refactor: 重构首页

packages/mobile/src/views/Home.vue

@@ -3,22 +3,27 @@
     <CurrentSite />
 
     <div class="content">
-      <van-grid :gutter="10" :column-num="3" class="grid">
-        <van-grid-item
-          class="grid-item"
-          v-for="item in gridItems"
-          :key="item.text"
-          :to="item.to"
-        >
-          <template #icon>
-            <img :src="item.icon" class="grid-icon" />
-          </template>
-          <template #text>
-            <span class="grid-text">{{ item.text }}</span>
-          </template>
-        </van-grid-item>
-      </van-grid>
+      <div class="banner-card">
+        <img :src="bannerImage" alt="安全保通服务" class="banner-image" />
       </div>
+
+      <section class="nav-card" v-for="(card, index) in navCardList" :key="index">
+        <div class="nav-card-header">
+          <span class="card-icon"></span>
+          <span class="card-title">{{ card.text }}</span>
+        </div>
+
+        <div class="nav-list">
+          <div v-for="item in card.navs" :key="item.text" class="nav-item" @click="toNav(item)">
+            <div class="nav-icon-wrap">
+              <img :src="item.icon" :alt="item.text" class="nav-icon" />
+            </div>
+            <span class="nav-text">{{ item.text }}</span>
+          </div>
+        </div>
+      </section>
+    </div>
+
     <van-popup
       :show="YHZConfirmpopup"
       position="center"
@@ -26,168 +31,250 @@
       close-on-click-overlay
       :style="{ height: '20%', width: '80%' }"
       @close="onYHZConfirmClose"
-      class="confirmpopup"
     >
       <div class="confirmpopup__content">
         <h3>请在服务站授权定位</h3>
       </div>
       <div class="btn-box">
         <van-button class="btn" @click="onYHZConfirmClose">取消</van-button>
-        <van-button class="btn" type="primary" @click="getLocation"
-          >授权定位</van-button
-        >
+        <van-button class="btn" type="primary" @click="getLocation"> 授权定位 </van-button>
       </div>
     </van-popup>
   </PageContainer>
 </template>
 
 <script setup>
-import "vant/es/toast/style";
-import "vant/es/popup/style";
-import { ref, onMounted } from "vue";
-import { useRouter, useRoute } from "vue-router";
-import { useYHZStore } from "../stores/yhzStore";
-import { showToast } from "vant";
-import { request } from "../../../shared/utils/request";
-import PageContainer from "@/components/PageContainer.vue";
-import CurrentSite from "@/components/CurrentSite.vue";
+import 'vant/es/toast/style'
+import 'vant/es/popup/style'
+import { ref, onMounted } from 'vue'
+import { useRouter, useRoute } from 'vue-router'
+import { useYHZStore } from '../stores/yhzStore'
+import { showToast } from 'vant'
+import { request } from '../../../shared/utils/request'
+import PageContainer from '@/components/PageContainer.vue'
+import CurrentSite from '@/components/CurrentSite.vue'
 
-import group63Icon from "@/assets/images/组 63.png";
-import group105Icon from "@/assets/images/组 105.png";
-import group10501Icon from "@/assets/images/组 105(1).png";
-import group104Icon from "@/assets/images/组 104.png";
-import group106Icon from "@/assets/images/组 106.png";
+import bannerImage from '@/assets/images/banenr.png'
+import equipmentIcon from '@/assets/images/设备管理icon.png'
+import materialIcon from '@/assets/images/物资管理icon.png'
+import staffIcon from '@/assets/images/人员管理icon.png'
+import disasterIcon from '@/assets/images/灾毁管理icon.png'
+import warningIcon from '@/assets/images/预警信息icon.png'
+import rebuildIcon from '@/assets/images/恢复重建icon.png'
 
-const router = useRouter();
-const yhzinfo = ref({});
-const yhzStore = useYHZStore();
+const router = useRouter()
+const yhzinfo = ref({})
+const yhzStore = useYHZStore()
 
-const route = useRoute();
-const token = route.query.token;
-const YHZConfirmpopup = ref(false);
+const route = useRoute()
+const token = route.query.token
+const YHZConfirmpopup = ref(false)
 
-// 配置项
-const gridItems = [
+const navCardList = [
   {
-    icon: group63Icon,
-    text: "设备管理",
+    text: '灾毁管理',
+    navs: [
+      {
+        icon: disasterIcon,
+        text: '灾害管理',
         to: {
-      name: "EquipManage",
-      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+          name: 'DisasterManagement',
         },
       },
       {
-    icon: group10501Icon,
-    text: "物资管理",
-    to: {
-      name: "MaterialManage",
-      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
-    },
-  },
-  {
-    icon: group104Icon,
-    text: "人员管理",
-    to: {
-      name: "StaffManage",
-      params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
-    },
-  },
-  // {
-  //   icon: group106Icon,
-  //   text: "冰雪灾害",
-  //   to: {
-  //     name: "IceEventManage",
-  //     params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
-  //   },
-  // },
-  {
-    icon: group106Icon,
-    text: "灾害管理",
-    to: {
-      name: "DisasterManagement",
-    },
-  },
-  {
-    icon: group105Icon,
-    text: "预警信息",
-    to: {
-      name: "WarningMessage",
-    },
-  },
-  {
-    icon: group106Icon,
+        icon: rebuildIcon,
         text: '恢复重建',
         to: {
           name: 'Rebuild',
-    }
-  }
-];
+        },
+      },
+    ],
+  },
+  {
+    text: '预警信息',
+    navs: [
+      {
+        icon: warningIcon,
+        text: '预警信息',
+        to: {
+          name: 'WarningMessage',
+        },
+      },
+    ],
+  },
+  {
+    text: '应急力量',
+    navs: [
+      {
+        icon: equipmentIcon,
+        text: '设备管理',
+        to: {
+          name: 'EquipManage',
+          params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+        },
+      },
+      {
+        icon: materialIcon,
+        text: '物资管理',
+        to: {
+          name: 'MaterialManage',
+          params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+        },
+      },
+      {
+        icon: staffIcon,
+        text: '人员管理',
+        to: {
+          name: 'StaffManage',
+          params: { data: encodeURIComponent(JSON.stringify(yhzinfo.value)) },
+        },
+      },
+    ],
+  },
+]
 
-// 获取当前登录用于就职的养护站信息
 const getYHZinfo = async () => {
   try {
     const res = await request({
       url: `/snow-ops-platform/yhz/getStationByUser`,
-      method: "GET",
-    });
-    if (res.code === "00000") {
-      yhzinfo.value = res.data[0];
-      yhzStore.setYHZInfo(res.data[0]);
+      method: 'GET',
+    })
+    if (res.code === '00000') {
+      yhzinfo.value = res.data[0]
+      yhzStore.setYHZInfo(res.data[0])
 
-      // 更新配置项中的params，确保使用最新的yhzinfo
-      gridItems.forEach(item => {
+      navCardList.forEach((card) => {
+        card.navs?.forEach((item) => {
           if (item.to.params && item.to.params.data) {
-          item.to.params.data = encodeURIComponent(JSON.stringify(yhzinfo.value));
+            item.to.params.data = encodeURIComponent(JSON.stringify(yhzinfo.value))
           }
-      });
+        })
+      })
     } else {
-      throw new Error(res.message);
+      throw new Error(res.message)
     }
   } catch (error) {
     showToast({
       message: error.message,
-      type: "fail",
-    });
+      type: 'fail',
+    })
+  }
 }
-};
 
 const onYHZConfirmClose = () => {
-  YHZConfirmpopup.value = false;
-};
+  YHZConfirmpopup.value = false
+}
 
 const getLocation = () => {
-  // 定位逻辑
-  YHZConfirmpopup.value = false;
-};
+  YHZConfirmpopup.value = false
+}
+
+const toNav = (item) => {
+  if (!item?.to) {
+    return
+  }
+
+  router.push(item.to)
+}
 
 onMounted(async () => {
   if (token) {
-    localStorage.setItem("token", token);
+    localStorage.setItem('token', token)
     router.replace({ path: route.path }).then(() => {
-      window.location.reload();
-    });
+      window.location.reload()
+    })
   }
-  await getYHZinfo();
-  if (
-    yhzinfo.value.isManager &&
-    (yhzinfo.value.jd === "" || yhzinfo.value.wd === "")
-  ) {
-    YHZConfirmpopup.value = true;
-  }
-});
 
-const goToUser = () => {
-  router.push("/user");
-};
+  await getYHZinfo()
+
+  if (yhzinfo.value.isManager && (yhzinfo.value.jd === '' || yhzinfo.value.wd === '')) {
+    YHZConfirmpopup.value = true
+  }
+})
 </script>
 
 <style lang="scss" scoped>
+.banner-card {
+  overflow: hidden;
+}
+
+.banner-image {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.nav-card {
+  margin-top: 8px;
+  padding: 14px 0 16px;
+  border-radius: 4px;
+  background: #ffffff;
+}
+
+.nav-card-header {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+.card-icon {
+  width: 4px;
+  height: 11px;
+  background: #2E7AF4;
+  border-radius: 2px;
+  margin-left: 8px;
+}
+
+.card-title {
+  font-weight: 500;
+  font-size: 16px;
+  color: #333333;
+  line-height: 16px;
+}
+
+.nav-list {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 14px 10px;
+}
+
+.nav-item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+.nav-icon-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+}
+
+.nav-icon {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+}
+
+.nav-text {
+  font-weight: 400;
+  font-size: 14px;
+  color: #333333;
+  line-height: 16px;
+  margin-top: 8px;
+}
+
 .btn-box {
   width: 100%;
   display: flex;
   gap: 16px;
   padding: 16px;
 }
+
 .btn {
   width: 50%;
 }
@@ -195,24 +282,4 @@ const goToUser = () => {
 .confirmpopup__content {
   padding: 20px;
 }
-
-.grid-icon {
-  width: 48px;
-  height: 48px;
-  object-fit: contain;
-}
-
-.grid-text {
-  font-size: 14px;
-  color: #323233;
-}
-:deep(.grid-item) {
-  .grid-text {
-    margin-top: 16px;
-    font-weight: 400;
-    font-size: 16px;
-    color: #333333;
-    line-height: 16px;
-  }
-}
 </style>