设备管理 主页静态页面

packages/mobile/src/router/index.js

@@ -10,6 +10,11 @@ const routes = [
     path: '/user',
     name: 'User',
     component: () => import('../views/User.vue')
+  },
+  {
+    path: '/equipManage',
+    name: 'EquipManage',
+    component: () => import('../views/EquipmentManagement.vue')
   }
 ]
 

packages/mobile/src/views/EquipmentManagement.vue

@@ -0,0 +1,115 @@
+<template>
+  <div class="home">
+    <van-nav-bar title="设备管理" fixed left-arrow @click-left="onClickLeft">
+    </van-nav-bar>
+    <van-search
+      shape="round"
+      v-model="value"
+      :show-action="false"
+      placeholder="请输入设备名称"
+    />
+    <van-cell-group>
+      <van-cell title="当前站点" value="李家坝仓库" />
+    </van-cell-group>
+
+    <div class="content">
+      <van-cell-group>
+        <van-cell
+          title="高枝锯、绿篱机、油锯"
+          is-link
+          label="设备类型：绿化修剪设备"
+        >
+          <template #value>
+            <span class="status-tag status-good">完好</span>
+          </template>
+        </van-cell>
+        <van-cell title="撒布机三台" is-link label="设备类型：除雪设备">
+          <template #value>
+            <span class="status-tag status-warning">损坏</span>
+          </template>
+        </van-cell>
+        <van-cell title="撒布机三台" is-link label="设备类型：除雪设备">
+          <template #value>
+            <span class="status-tag status-danger">报废</span>
+          </template>
+        </van-cell>
+      </van-cell-group>
+    </div>
+
+    <van-button
+      type="primary"
+      class="add-btn"
+      icon="plus"
+      @click="handleAddDevice"
+    >
+      添加设备
+    </van-button>
+  </div>
+</template>
+  
+  <script setup>
+import { ref } from "vue";
+import { useRouter } from "vue-router";
+import { showToast } from "vant";
+
+const router = useRouter();
+const active = ref(0);
+
+const onClickLeft = () => {
+  router.push("/");
+};
+</script> 
+  
+  <style scoped>
+.home {
+  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
+}
+
+.content {
+  padding: 16px;
+}
+
+.content .van-cell-group .van-cell {
+  margin-bottom: 10px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
+}
+
+.add-btn {
+  position: fixed;
+  bottom: 20px;
+  left: 16px;
+  right: 16px;
+  width: calc(100% - 32px);
+  margin: 0 auto;
+  border-radius: 24px;
+  font-size: 16px;
+  height: 44px;
+  z-index: 999;
+}
+
+.grid {
+  margin-top: 16px;
+}
+
+.btn {
+  margin-top: 24px;
+}
+
+.status-tag {
+  display: inline-block;
+  padding: 3px 8px;
+  border-radius: 4px;
+  color: white;
+  font-size: 12px;
+}
+.status-good {
+  background-color: #07c160;
+}
+.status-warning {
+  background-color: #ff976a;
+}
+.status-danger {
+  background-color: #ee0a24;
+}
+</style>
+  

packages/mobile/src/views/Home.vue

@@ -1,47 +1,55 @@
 <template>
   <div class="home">
-    <van-nav-bar title="首页" fixed placeholder />
+    <van-nav-bar title="愉快政" fixed left-arrow />
 
-    <div class="content">
+    <van-cell-group>
-      <van-cell-group inset>
+      <van-cell title="当前站点" value="李家坝仓库" />
-        <van-cell title="欢迎使用" value="H5移动端" />
     </van-cell-group>
 
-      <van-grid :column-num="2" class="grid">
+    <div class="content">
-        <van-grid-item icon="photo-o" text="功能1" @click="showToast('功能1')" />
+      <van-grid :gutter="10" :column-num="3" class="grid">
-        <van-grid-item icon="chat-o" text="功能2" @click="showToast('功能2')" />
+        <van-grid-item icon="setting-o" text="设备管理" to="/EquipManage" />
-        <van-grid-item icon="setting-o" text="功能3" @click="showToast('功能3')" />
+        <van-grid-item
-        <van-grid-item icon="star-o" text="功能4" @click="showToast('功能4')" />
+          icon="setting-o"
+          text="物资管理"
+          @click="showToast('物资管理')"
+        />
+        <van-grid-item
+          icon="setting-o"
+          text="人员管理"
+          @click="showToast('人员管理')"
+        />
+        <van-grid-item
+          icon="setting-o"
+          text="冰雪灾害"
+          @click="showToast('冰雪灾害')"
+        />
       </van-grid>
-
-      <van-button type="primary" block class="btn" @click="goToUser">
-        进入个人中心
-      </van-button>
     </div>
 
-    <van-tabbar v-model="active" route>
+    <!-- <van-tabbar v-model="active" route>
       <van-tabbar-item icon="home-o" to="/">首页</van-tabbar-item>
       <van-tabbar-item icon="user-o" to="/user">我的</van-tabbar-item>
-    </van-tabbar>
+    </van-tabbar> -->
   </div>
 </template>
 
 <script setup>
-import { ref } from 'vue'
+import { ref } from "vue";
-import { useRouter } from 'vue-router'
+import { useRouter } from "vue-router";
-import { showToast } from 'vant'
+import { showToast } from "vant";
 
-const router = useRouter()
+const router = useRouter();
-const active = ref(0)
+const active = ref(0);
 
 const goToUser = () => {
-  router.push('/user')
+  router.push("/user");
-}
+};
 </script>
 
 <style scoped>
 .home {
-  padding-bottom: 50px;
+  padding-top: var(--van-nav-bar-height); /* 自动匹配导航栏高度 */
 }
 
 .content {

pnpm-lock.yaml

@@ -4,9 +4,6 @@ settings:
   autoInstallPeers: true
   excludeLinksFromLockfile: false
 
-overrides:
-  vue: ^3.2.47
-
 importers:
 
   .: {}
@@ -23,7 +20,7 @@ importers:
         specifier: ^4.8.0
         version: 4.9.21(vue@3.5.22)
       vue:
-        specifier: ^3.2.47
+        specifier: ^3.4.0
         version: 3.5.22
       vue-router:
         specifier: ^4.2.0
@@ -57,7 +54,7 @@ importers:
         specifier: ^2.1.0
         version: 2.3.1(vue@3.5.22)
       vue:
-        specifier: ^3.2.47
+        specifier: ^3.4.0
         version: 3.5.22
       vue-echarts:
         specifier: ^6.6.0
@@ -480,14 +477,14 @@ packages:
   '@vant/use@1.6.0':
     resolution: {integrity: sha512-PHHxeAASgiOpSmMjceweIrv2AxDZIkWXyaczksMoWvKV2YAYEhoizRuk/xFnKF+emUIi46TsQ+rvlm/t2BBCfA==}
     peerDependencies:
-      vue: ^3.2.47
+      vue: ^3.0.0
 
   '@vitejs/plugin-vue@5.2.4':
     resolution: {integrity: sha512-7Yx/SXSOcQq5HiiV3orevHUFn+pmMB4cgbEkDYgnkUWb0WfeQ/wa2yFv6D5ICiCQOVpjA7vYDXrC7AGO8yjDHA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     peerDependencies:
       vite: ^5.0.0 || ^6.0.0
-      vue: ^3.2.47
+      vue: ^3.2.25
 
   '@vue/compiler-core@3.5.22':
     resolution: {integrity: sha512-jQ0pFPmZwTEiRNSb+i9Ow/I/cHv2tXYqsnHKKyCQ08irI2kdF5qmYedmF8si8mA7zepUFmJ2hqzS8CQmNOWOkQ==}
@@ -516,7 +513,7 @@ packages:
   '@vue/server-renderer@3.5.22':
     resolution: {integrity: sha512-gXjo+ao0oHYTSswF+a3KRHZ1WszxIqO7u6XwNHqcqb9JfyIL/pbWrrh/xLv7jeDqla9u+LK7yfZKHih1e1RKAQ==}
     peerDependencies:
-      vue: ^3.2.47
+      vue: 3.5.22
 
   '@vue/shared@3.5.22':
     resolution: {integrity: sha512-F4yc6palwq3TT0u+FYf0Ns4Tfl9GRFURDN2gWG7L1ecIaS/4fCIuFOjMTnCyjsu/OK6vaDKLCrGAa+KvvH+h4w==}
@@ -808,7 +805,7 @@ packages:
     resolution: {integrity: sha512-khUlZSwt9xXCaTbbxFYBKDc/bWAGWJjOgvxETwkTN7KRm66EeT1ZdZj6i2ceh9sP2Pzqsbc704r2yngBrxBVug==}
     peerDependencies:
       typescript: '>=4.4.4'
-      vue: ^3.2.47
+      vue: ^2.7.0 || ^3.5.11
     peerDependenciesMeta:
       typescript:
         optional: true
@@ -922,7 +919,7 @@ packages:
     peerDependencies:
       '@babel/parser': ^7.15.8
       '@nuxt/kit': ^3.2.2
-      vue: ^3.2.47
+      vue: 2 || 3
     peerDependenciesMeta:
       '@babel/parser':
         optional: true
@@ -936,7 +933,7 @@ packages:
   vant@4.9.21:
     resolution: {integrity: sha512-hXUoZMrLLjykimFRLDlGNd+K2iYSRh9YwLMKnsVdVZ+9inUKxpqnjhOqlZwocbnYkvJlS+febf9u9aJpDol4Pw==}
     peerDependencies:
-      vue: ^3.2.47
+      vue: ^3.0.0
 
   vite@5.4.20:
     resolution: {integrity: sha512-j3lYzGC3P+B5Yfy/pfKNgVEg4+UtcIJcVRt2cDjIOmhLourAqPqf8P7acgxeiSgUB7E3p2P8/3gNIgDLpwzs4g==}
@@ -975,7 +972,7 @@ packages:
     hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.2.47
+      vue: ^3.0.0-0 || ^2.6.0
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
@@ -986,7 +983,7 @@ packages:
     hasBin: true
     peerDependencies:
       '@vue/composition-api': ^1.0.0-rc.1
-      vue: ^3.2.47
+      vue: ^3.0.0-0 || ^2.6.0
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
@@ -997,7 +994,7 @@ packages:
       '@vue/composition-api': ^1.0.5
       '@vue/runtime-core': ^3.0.0
       echarts: ^5.4.1
-      vue: ^3.2.47
+      vue: ^2.6.12 || ^3.1.1
     peerDependenciesMeta:
       '@vue/composition-api':
         optional: true
@@ -1007,7 +1004,7 @@ packages:
   vue-router@4.6.0:
     resolution: {integrity: sha512-YRrWLi4ayHe1d6zyH6sMPwF/WwcDY8XgUOfQGa0Kx4kmugSorLavD1ExrM/Y83B4X2NQMXYpJFSq2pbZh9ildQ==}
     peerDependencies:
-      vue: ^3.2.47
+      vue: ^3.5.0
 
   vue@3.5.22:
     resolution: {integrity: sha512-toaZjQ3a/G/mYaLSbV+QsQhIdMo9x5rrqIpYRObsJ6T/J+RyCSFwN2LHNVH9v8uIcljDNa3QzPVdv3Y6b9hAJQ==}