feat(ui): 集成 uview-plus 组件库并重构界面

App.vue

@@ -20,6 +20,8 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss">
+@import 'uview-plus/index.scss';
+
 /* 每个页面公共 css（当前按需在页面中引入 common.css） */
 </style>

hooks/useBluetoothDiscovery.js

@@ -12,7 +12,7 @@ import { showToast } from '@/utils/toast'
 const FILTER_SCAN_TIMEOUT_MS = 4000
 const RESTART_SCAN_DELAY_MS = 120
 const DISCOVERY_POLL_INTERVAL_MS = 1200
-const TARGET_NAME_KEYWORDS = Object.freeze(['ED713', 'ED719'])
+const TARGET_NAME_KEYWORDS = Object.freeze(['ED713', '713WQ', 'ED719'])
 
 function promisifyUniApi(apiName, params = {}) {
   return new Promise((resolve, reject) => {

main.js

@@ -17,12 +17,14 @@ app.$mount()
 
 // #ifdef VUE3
 import { createSSRApp } from 'vue'
+import uviewPlus from 'uview-plus'
 
 /**
  * uni-app Vue3 入口。
  */
 export function createApp() {
   const app = createSSRApp(App)
+  app.use(uviewPlus)
   return {
     app
   }

package-lock.json

@@ -0,0 +1,435 @@
+{
+  "name": "smarthome",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "dependencies": {
+        "sass": "^1.99.0",
+        "uview-plus": "^3.7.36"
+      }
+    },
+    "node_modules/@parcel/watcher": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher/-/watcher-2.5.6.tgz",
+      "integrity": "sha512-tmmZ3lQxAe/k/+rNnXQRawJ4NjxO2hqiOLTHvWchtGZULp4RyFeh6aU4XdOYBFe2KE1oShQTv4AblOs2iOrNnQ==",
+      "hasInstallScript": true,
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "detect-libc": "^2.0.3",
+        "is-glob": "^4.0.3",
+        "node-addon-api": "^7.0.0",
+        "picomatch": "^4.0.3"
+      },
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher-android-arm64": "2.5.6",
+        "@parcel/watcher-darwin-arm64": "2.5.6",
+        "@parcel/watcher-darwin-x64": "2.5.6",
+        "@parcel/watcher-freebsd-x64": "2.5.6",
+        "@parcel/watcher-linux-arm-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm-musl": "2.5.6",
+        "@parcel/watcher-linux-arm64-glibc": "2.5.6",
+        "@parcel/watcher-linux-arm64-musl": "2.5.6",
+        "@parcel/watcher-linux-x64-glibc": "2.5.6",
+        "@parcel/watcher-linux-x64-musl": "2.5.6",
+        "@parcel/watcher-win32-arm64": "2.5.6",
+        "@parcel/watcher-win32-ia32": "2.5.6",
+        "@parcel/watcher-win32-x64": "2.5.6"
+      }
+    },
+    "node_modules/@parcel/watcher-android-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-android-arm64/-/watcher-android-arm64-2.5.6.tgz",
+      "integrity": "sha512-YQxSS34tPF/6ZG7r/Ih9xy+kP/WwediEUsqmtf0cuCV5TPPKw/PQHRhueUo6JdeFJaqV3pyjm0GdYjZotbRt/A==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-arm64/-/watcher-darwin-arm64-2.5.6.tgz",
+      "integrity": "sha512-Z2ZdrnwyXvvvdtRHLmM4knydIdU9adO3D4n/0cVipF3rRiwP+3/sfzpAwA/qKFL6i1ModaabkU7IbpeMBgiVEA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-darwin-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-darwin-x64/-/watcher-darwin-x64-2.5.6.tgz",
+      "integrity": "sha512-HgvOf3W9dhithcwOWX9uDZyn1lW9R+7tPZ4sug+NGrGIo4Rk1hAXLEbcH1TQSqxts0NYXXlOWqVpvS1SFS4fRg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "darwin"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-freebsd-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-freebsd-x64/-/watcher-freebsd-x64-2.5.6.tgz",
+      "integrity": "sha512-vJVi8yd/qzJxEKHkeemh7w3YAn6RJCtYlE4HPMoVnCpIXEzSrxErBW5SJBgKLbXU3WdIpkjBTeUNtyBVn8TRng==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-glibc/-/watcher-linux-arm-glibc-2.5.6.tgz",
+      "integrity": "sha512-9JiYfB6h6BgV50CCfasfLf/uvOcJskMSwcdH1PHH9rvS1IrNy8zad6IUVPVUfmXr+u+Km9IxcfMLzgdOudz9EQ==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm-musl/-/watcher-linux-arm-musl-2.5.6.tgz",
+      "integrity": "sha512-Ve3gUCG57nuUUSyjBq/MAM0CzArtuIOxsBdQ+ftz6ho8n7s1i9E1Nmk/xmP323r2YL0SONs1EuwqBp2u1k5fxg==",
+      "cpu": [
+        "arm"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-glibc/-/watcher-linux-arm64-glibc-2.5.6.tgz",
+      "integrity": "sha512-f2g/DT3NhGPdBmMWYoxixqYr3v/UXcmLOYy16Bx0TM20Tchduwr4EaCbmxh1321TABqPGDpS8D/ggOTaljijOA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-arm64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-arm64-musl/-/watcher-linux-arm64-musl-2.5.6.tgz",
+      "integrity": "sha512-qb6naMDGlbCwdhLj6hgoVKJl2odL34z2sqkC7Z6kzir8b5W65WYDpLB6R06KabvZdgoHI/zxke4b3zR0wAbDTA==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-glibc": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-glibc/-/watcher-linux-x64-glibc-2.5.6.tgz",
+      "integrity": "sha512-kbT5wvNQlx7NaGjzPFu8nVIW1rWqV780O7ZtkjuWaPUgpv2NMFpjYERVi0UYj1msZNyCzGlaCWEtzc+exjMGbQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-linux-x64-musl": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-linux-x64-musl/-/watcher-linux-x64-musl-2.5.6.tgz",
+      "integrity": "sha512-1JRFeC+h7RdXwldHzTsmdtYR/Ku8SylLgTU/reMuqdVD7CtLwf0VR1FqeprZ0eHQkO0vqsbvFLXUmYm/uNKJBg==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-arm64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-arm64/-/watcher-win32-arm64-2.5.6.tgz",
+      "integrity": "sha512-3ukyebjc6eGlw9yRt678DxVF7rjXatWiHvTXqphZLvo7aC5NdEgFufVwjFfY51ijYEWpXbqF5jtrK275z52D4Q==",
+      "cpu": [
+        "arm64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-ia32": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-ia32/-/watcher-win32-ia32-2.5.6.tgz",
+      "integrity": "sha512-k35yLp1ZMwwee3Ez/pxBi5cf4AoBKYXj00CZ80jUz5h8prpiaQsiRPKQMxoLstNuqe2vR4RNPEAEcjEFzhEz/g==",
+      "cpu": [
+        "ia32"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/@parcel/watcher-win32-x64": {
+      "version": "2.5.6",
+      "resolved": "https://registry.npmjs.org/@parcel/watcher-win32-x64/-/watcher-win32-x64-2.5.6.tgz",
+      "integrity": "sha512-hbQlYcCq5dlAX9Qx+kFb0FHue6vbjlf0FrNzSKdYK2APUf7tGfGxQCk2ihEREmbR6ZMc0MVAD5RIX/41gpUzTw==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ],
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/parcel"
+      }
+    },
+    "node_modules/chokidar": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-4.0.3.tgz",
+      "integrity": "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA==",
+      "license": "MIT",
+      "dependencies": {
+        "readdirp": "^4.0.1"
+      },
+      "engines": {
+        "node": ">= 14.16.0"
+      },
+      "funding": {
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/detect-libc": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-2.1.2.tgz",
+      "integrity": "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ==",
+      "license": "Apache-2.0",
+      "optional": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/immutable": {
+      "version": "5.1.5",
+      "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.5.tgz",
+      "integrity": "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A==",
+      "license": "MIT"
+    },
+    "node_modules/is-extglob": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/is-glob": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
+      "license": "MIT",
+      "optional": true,
+      "dependencies": {
+        "is-extglob": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/node-addon-api": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/node-addon-api/-/node-addon-api-7.1.1.tgz",
+      "integrity": "sha512-5m3bsyrjFWE1xf7nz7YXdN4udnVtXK6/Yfgn5qnahL6bCkf2yKt4k3nuTKAtT4r3IG8JNR2ncsIMdZuAzJjHQQ==",
+      "license": "MIT",
+      "optional": true
+    },
+    "node_modules/picomatch": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
+      "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
+      "license": "MIT",
+      "optional": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
+    "node_modules/readdirp": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-4.1.2.tgz",
+      "integrity": "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 14.18.0"
+      },
+      "funding": {
+        "type": "individual",
+        "url": "https://paulmillr.com/funding/"
+      }
+    },
+    "node_modules/sass": {
+      "version": "1.99.0",
+      "resolved": "https://registry.npmjs.org/sass/-/sass-1.99.0.tgz",
+      "integrity": "sha512-kgW13M54DUB7IsIRM5LvJkNlpH+WhMpooUcaWGFARkF1Tc82v9mIWkCbCYf+MBvpIUBSeSOTilpZjEPr2VYE6Q==",
+      "license": "MIT",
+      "dependencies": {
+        "chokidar": "^4.0.0",
+        "immutable": "^5.1.5",
+        "source-map-js": ">=0.6.2 <2.0.0"
+      },
+      "bin": {
+        "sass": "sass.js"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "optionalDependencies": {
+        "@parcel/watcher": "^2.4.1"
+      }
+    },
+    "node_modules/source-map-js": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
+      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/uview-plus": {
+      "version": "3.7.36",
+      "resolved": "https://registry.npmjs.org/uview-plus/-/uview-plus-3.7.36.tgz",
+      "integrity": "sha512-44pW0oKKatYxCHhXPljaNv5E+CESSJlhsz0FRZRNpMv1ms02m5Agk+CNpgDnv/XNHt9YxHdYSYerN+xnNP5orw==",
+      "engines": {
+        "HBuilderX": "^3.1.0",
+        "uni-app": "^4.66",
+        "uni-app-x": ""
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,6 @@
+{
+  "dependencies": {
+    "sass": "^1.99.0",
+    "uview-plus": "^3.7.36"
+  }
+}

pages.json

@@ -63,5 +63,12 @@
 			}
 		]
 	},
-	"uniIdRouter": {}
+	"uniIdRouter": {},
+	"easycom": {
+		"autoscan": true,
+		"custom": {
+			"^u-(.*)": "uview-plus/components/u-$1/u-$1.vue",
+			"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue"
+		}
+	}
 }

pages/device/config.vue

@@ -27,6 +27,7 @@
           <view class="device-name-row">
             <text class="device-name">{{ device.showName }}</text>
             <text v-if="device.hasTargetService" class="device-tag">00F4</text>
+            <text v-else-if="device.matchedByName || device.matchedByPayload" class="device-tag name-tag">名称匹配</text>
           </view>
           <text class="device-id">{{ device.deviceId }}</text>
           <view class="device-actions">
@@ -273,6 +274,11 @@ export default {
   padding: 2rpx 10rpx;
 }
 
+.name-tag {
+  color: #2f7de1;
+  border-color: #2f7de1;
+}
+
 .device-id {
   display: block;
   margin-top: 8rpx;

pages/event/index.vue

@@ -1,19 +1,16 @@
-<!-- 事件页：展示事件筛选头与空状态占位，后续可接入告警列表数据 -->
+<!-- 事件页：使用 uview-plus 筛选与空状态组件 -->
 <template>
   <view class="page page-base">
-    <view class="top-nav top-nav-base">
+    <up-navbar title="事件" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
-      <view class="title top-nav-title-base">事件</view>
-    </view>
 
     <view class="filters">
-      <view class="filter-item">全部场所</view>
+      <view><up-button size="mini" type="primary" plain text="全部场所"  /></view>
-      <view class="filter-item">全部状态</view>
+      <view><up-button size="mini" type="primary" plain text="全部状态"  /></view>
-      <view class="filter-item">时间</view>
+      <view><up-button size="mini" type="primary" plain text="时间"  /></view>
     </view>
 
-    <view class="empty-area empty-state">
+    <view class="empty-area">
-      <view class="empty-box empty-state-box"></view>
+      <up-empty mode="message" text="暂无事件数据" />
-      <text class="empty-text empty-state-text">暂无数据</text>
     </view>
   </view>
 </template>
@@ -23,26 +20,25 @@
 export default {}
 </script>
 
-<style>
+<style lang="scss" scoped>
 @import '@/styles/common.css';
 
 .filters {
-  height: 92rpx;
+  > view + view {
+    margin-left: 18rpx;
+  }
+  min-height: 96rpx;
+  padding: 16rpx 24rpx;
   background: #ffffff;
   border-top: 1rpx solid #ededed;
   display: flex;
   align-items: center;
 }
 
-.filter-item {
-  flex: 1;
-  text-align: center;
-  font-size: 42rpx;
-  color: #3a3a3a;
-  font-weight: 600;
-}
-
 .empty-area {
-  min-height: 980rpx;
+  min-height: 880rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 </style>

pages/index/index.vue

@@ -1,9 +1,7 @@
-<!-- 首页：当前以静态壳页面为主，负责跳转到设备添加与配置入口 -->
+<!-- 首页：切换为 uview-plus 组件化结构，保留原有设备添加与配置入口 -->
 <template>
   <view class="page page-base">
-    <view class="top-nav top-nav-base">
+    <up-navbar title="智慧养老" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
-      <view class="title">智慧养老</view>
-    </view>
 
     <view class="banner">
       <view class="banner-left">
@@ -11,22 +9,33 @@
         <text class="banner-sub">一键开启智慧好生活</text>
       </view>
       <view class="banner-illus">
-        <view class="phone"></view>
+        <up-icon name="home" color="#ffffff" size="52" />
       </view>
     </view>
 
+    <up-notice-bar
+      mode="link"
+      :text="noticeText"
+      color="#2f5a3a"
+      bg-color="#e9fff3"
+      @click="goConfig"
+    />
+
     <view class="site-row" @click="goConfig">
-      <text class="menu">☰</text>
+      <view class="site-left">
+        <up-icon name="list" size="18" color="#26c996" />
         <text class="site-text">请选择场所</text>
-      <text class="down">⌄</text>
+      </view>
+      <up-icon name="arrow-right" size="14" color="#26c996" />
     </view>
 
-    <view class="empty-area empty-state">
+    <view class="empty-area">
-      <view class="empty-box empty-state-box"></view>
+      <up-empty mode="list" text="暂无数据" />
-      <text class="empty-text empty-state-text">暂无数据</text>
     </view>
 
-    <view class="fab" @click="goAdd">+</view>
+    <view class="fab-wrap">
+      <up-button type="success" shape="circle" text="添加设备" @click="goAdd" />
+    </view>
   </view>
 </template>
 
@@ -35,6 +44,11 @@ import { ROUTES } from '@/constants/routes'
 import { navigateTo } from '@/utils/navigation'
 
 export default {
+  data() {
+    return {
+      noticeText: '点击选择场所后可进入设备配置流程'
+    }
+  },
   methods: {
     // 进入设备添加页（后续会承接蓝牙配网流程入口）。
     goAdd() {
@@ -48,25 +62,19 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 @import '@/styles/common.css';
 
 .page {
   position: relative;
-  padding-bottom: 160rpx;
+  padding-bottom: 180rpx;
-}
-
-.title {
-  font-size: 48rpx;
-  font-weight: 700;
-  color: #222;
 }
 
 .banner {
   margin: 0;
-  height: 380rpx;
+  min-height: 360rpx;
-  background: #28cda0;
+  background: linear-gradient(135deg, #1fca97 0%, #2dbf9c 100%);
-  padding: 56rpx 52rpx;
+  padding: 48rpx 44rpx;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -78,75 +86,61 @@ export default {
 }
 
 .banner-title {
-  font-size: 58rpx;
+  font-size: 52rpx;
   color: #ffffff;
   font-weight: 700;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
 }
 
 .banner-sub {
-  font-size: 46rpx;
+  font-size: 34rpx;
   color: #e9fff8;
   font-weight: 600;
 }
 
 .banner-illus {
-  width: 220rpx;
+  width: 180rpx;
-  height: 220rpx;
+  height: 180rpx;
-  border-radius: 16rpx;
+  border-radius: 24rpx;
-  background: rgba(255, 255, 255, 0.2);
+  background: rgba(255, 255, 255, 0.18);
   display: flex;
   align-items: center;
   justify-content: center;
 }
 
-.phone {
-  width: 120rpx;
-  height: 170rpx;
-  border: 8rpx solid rgba(255, 255, 255, 0.92);
-  border-radius: 22rpx;
-}
-
 .site-row {
   height: 108rpx;
-  padding: 0 36rpx;
+  padding: 0 32rpx;
   background: #ffffff;
   display: flex;
   align-items: center;
-  font-size: 46rpx;
+  justify-content: space-between;
-  color: #222;
 }
 
-.menu {
+.site-left {
-  margin-right: 22rpx;
+  display: flex;
+  align-items: center;
 }
 
 .site-text {
+  margin-left: 14rpx;
+  font-size: 34rpx;
+  color: #222;
   font-weight: 600;
 }
 
-.down {
-  margin-left: 10rpx;
-  color: #26c996;
-}
-
 .empty-area {
   margin-top: 40rpx;
-  min-height: 760rpx;
+  min-height: 680rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
-.fab {
+.fab-wrap {
   position: fixed;
-  right: 38rpx;
+  right: 32rpx;
   bottom: 220rpx;
-  width: 118rpx;
+  width: 240rpx;
-  height: 118rpx;
-  border-radius: 59rpx;
-  background: #2cc998;
-  color: #ffffff;
-  font-size: 88rpx;
-  line-height: 110rpx;
-  text-align: center;
-  box-shadow: 0 12rpx 24rpx rgba(29, 177, 130, 0.3);
 }
 </style>

pages/login/index.vue

@@ -6,31 +6,47 @@
     </view>
 
     <view class="card">
-      <view class="form-row">
+      <up-form :model="form" label-position="top" :border-bottom="false">
+        <up-form-item label="手机号" :required="true">
+          <view class="mobile-wrap">
             <text class="prefix">+86</text>
-        <input
+            <up-input
-          v-model="mobile"
+              v-model="form.mobile"
-          class="input"
               type="number"
               maxlength="11"
+              clearable
               placeholder="请输入手机号"
+              border="none"
+              :custom-style="inputInnerStyle"
             />
           </view>
+        </up-form-item>
 
-      <view class="form-row code-row">
+        <up-form-item label="验证码" :required="true">
-        <input
+          <view class="code-wrap">
-          v-model="code"
+            <up-input
-          class="input"
+              v-model="form.code"
               type="number"
               maxlength="6"
+              clearable
               placeholder="请输入验证码"
+              border="none"
+              :custom-style="inputInnerStyle"
+            />
+            <up-button
+              class="code-btn"
+              size="mini"
+              type="primary"
+              :plain="countdown > 0"
+              :disabled="countdown > 0"
+              :text="codeBtnText"
+              @click="sendCode"
             />
-        <button class="code-btn" :disabled="countdown > 0" @click="sendCode">
-          {{ codeBtnText }}
-        </button>
           </view>
+        </up-form-item>
+      </up-form>
 
-      <button class="login-btn" @click="loginByMobileSubmit">手机号验证码登录</button>
+      <up-button class="login-btn" type="success" shape="circle" text="手机号验证码登录" @click="loginByMobileSubmit" />
 
       <view class="split">
         <view class="line"></view>
@@ -38,7 +54,7 @@
         <view class="line"></view>
       </view>
 
-      <button class="wx-btn" @click="loginByWechatSubmit">微信一键登录</button>
+      <up-button class="wx-btn" type="success" shape="circle" text="微信一键登录" @click="loginByWechatSubmit" />
     </view>
   </view>
 </template>
@@ -53,11 +69,16 @@ import { isValidMobile, isValidSmsCode } from '@/utils/validators'
 export default {
   data() {
     return {
+      form: {
         mobile: '',
-      code: '',
+        code: ''
+      },
       countdown: 0,
       redirect: '',
-      countdownController: null
+      countdownController: null,
+      inputInnerStyle: {
+        padding: '0'
+      }
     }
   },
   computed: {
@@ -93,7 +114,7 @@ export default {
     },
 
     validateMobileOrToast() {
-      if (isValidMobile(this.mobile)) {
+      if (isValidMobile(this.form.mobile)) {
         return true
       }
 
@@ -119,7 +140,7 @@ export default {
       }
 
       try {
-        await sendSmsCode(this.mobile)
+        await sendSmsCode(this.form.mobile)
       } catch (error) {
         return
       }
@@ -133,7 +154,7 @@ export default {
         return
       }
 
-      if (!isValidSmsCode(this.code)) {
+      if (!isValidSmsCode(this.form.code)) {
         showToast('请输入6位验证码')
         return
       }
@@ -143,12 +164,12 @@ export default {
       })
 
       try {
-        const data = await loginByMobile(this.mobile, this.code)
+        const data = await loginByMobile(this.form.mobile, this.form.code)
         this.finishLogin({
           token: data?.token,
           user: data?.user || {
-            name: `用户${this.mobile.slice(-4)}`,
+            name: `用户${this.form.mobile.slice(-4)}`,
-            mobile: this.mobile,
+            mobile: this.form.mobile,
             loginType: 'mobile'
           }
         })
@@ -214,7 +235,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 .page {
   min-height: 100vh;
   background: linear-gradient(180deg, #ecf9f5 0%, #f5f6f8 48%, #f1f1f4 100%);
@@ -243,22 +264,27 @@ export default {
 .card {
   background: #ffffff;
   border-radius: 24rpx;
-  padding: 38rpx 30rpx 42rpx;
+  padding: 30rpx;
   box-shadow: 0 16rpx 40rpx rgba(10, 63, 48, 0.08);
 }
 
-.form-row {
+.mobile-wrap,
+.code-wrap {
   min-height: 98rpx;
   border: 1rpx solid #e8eaef;
   border-radius: 16rpx;
-  padding: 0 24rpx;
+  padding: 0 20rpx;
   display: flex;
   align-items: center;
   box-sizing: border-box;
 }
 
-.form-row + .form-row {
+.mobile-wrap {
-  margin-top: 22rpx;
+  margin-top: 10rpx;
+}
+
+.code-wrap {
+  margin-top: 10rpx;
 }
 
 .prefix {
@@ -268,57 +294,16 @@ export default {
   font-weight: 600;
 }
 
-.input {
-  flex: 1;
-  height: 98rpx;
-  font-size: 30rpx;
-  color: #1f2b37;
-}
-
-.code-row {
-  padding-right: 12rpx;
-}
-
 .code-btn {
-  width: 190rpx;
+  margin-left: 12rpx;
-  height: 70rpx;
-  line-height: 70rpx;
-  border-radius: 36rpx;
-  background: #e9faf4;
-  color: #15b880;
-  font-size: 26rpx;
-  border: none;
-}
-
-.code-btn::after {
-  border: none;
-}
-
-.code-btn[disabled] {
-  color: #8f98a3;
-  background: #f1f3f6;
-}
-
-.login-btn,
-.wx-btn {
-  margin-top: 26rpx;
-  width: 100%;
-  height: 92rpx;
-  line-height: 92rpx;
-  border-radius: 16rpx;
-  color: #ffffff;
-  font-size: 32rpx;
-  font-weight: 600;
-  border: none;
 }
 
 .login-btn {
-  background: linear-gradient(90deg, #23c797, #11b880);
+  margin-top: 28rpx;
 }
 
-.login-btn::after,
+.wx-btn {
-.wx-btn::after {
+  margin-top: 22rpx;
-  border: none;
 }
 
 .split {
@@ -338,9 +323,4 @@ export default {
   font-size: 26rpx;
   color: #9aa2ad;
 }
-
-.wx-btn {
-  margin-top: 24rpx;
-  background: #07c160;
-}
 </style>

pages/mine/index.vue

@@ -1,52 +1,27 @@
-<!-- 我的页：展示用户信息、账号入口与设备配置等个人中心菜单 -->
+<!-- 我的页：引入 uview-plus 组件重构个人中心菜单 -->
 <template>
   <view class="page page-base">
-    <view class="top-nav top-nav-base">
+    <up-navbar title="我的" :fixed="false" :safe-area-inset-top="true" :border="false" left-icon="" />
-      <view class="title top-nav-title-base">我的</view>
-    </view>
 
     <view class="user-card" @click="goLogin">
-      <view class="avatar"></view>
+      <up-avatar size="58" text="U" bg-color="#35c48f" />
-      <view>
+      <view class="user-main">
         <text class="user-name">{{ userName }}</text>
         <text class="user-tip">{{ loginTip }}</text>
       </view>
+      <up-icon name="arrow-right" size="14" color="#b5b9c0" />
     </view>
 
-    <view class="menu-card">
+    <up-cell-group :border="false" custom-style="margin: 24rpx; border-radius: 24rpx; overflow: hidden; background: #ffffff;">
-      <view class="item" @click="goConfig">
+      <up-cell title="设备配置" is-link @click="goConfig" />
-        <text class="left">设备配置</text>
+      <up-cell title="分享的设备" is-link />
-        <text class="right">›</text>
+      <up-cell title="场所管理" is-link />
-      </view>
+      <up-cell title="接警人管理" is-link />
-      <view class="item">
+      <up-cell title="手机号" :value="phoneText" is-link />
-        <text class="left">分享的设备</text>
+      <up-cell title="语音广播" is-link />
-        <text class="right">›</text>
+      <up-cell title="当前版本" value="2.8.44" />
-      </view>
+      <up-cell title="退出登录" @click="logout" />
-      <view class="item">
+    </up-cell-group>
-        <text class="left">场所管理</text>
-        <text class="right">›</text>
-      </view>
-      <view class="item">
-        <text class="left">接警人管理</text>
-        <text class="right">›</text>
-      </view>
-      <view class="item">
-        <text class="left">手机号</text>
-        <text class="mid">{{ phoneText }}</text>
-        <text class="right">›</text>
-      </view>
-      <view class="item">
-        <text class="left">语音广播</text>
-        <text class="right">›</text>
-      </view>
-      <view class="item">
-        <text class="left">当前版本</text>
-        <text class="mid">2.8.44</text>
-      </view>
-      <view class="item" @click="logout">
-        <text class="left">退出登录</text>
-      </view>
-    </view>
   </view>
 </template>
 
@@ -100,7 +75,7 @@ export default {
 }
 </script>
 
-<style>
+<style lang="scss" scoped>
 @import '@/styles/common.css';
 
 .page {
@@ -109,25 +84,22 @@ export default {
 
 .user-card {
   margin: 24rpx;
-  min-height: 200rpx;
+  min-height: 180rpx;
   border-radius: 24rpx;
   background: #ffffff;
   display: flex;
   align-items: center;
-  padding: 20rpx 34rpx;
+  padding: 20rpx 28rpx;
 }
 
-.avatar {
+.user-main {
-  width: 132rpx;
+  flex: 1;
-  height: 132rpx;
+  margin-left: 20rpx;
-  border-radius: 66rpx;
-  background: radial-gradient(circle at 35% 35%, #95d347 0 32%, #6ba83a 33% 100%);
-  margin-right: 24rpx;
 }
 
 .user-name {
   display: block;
-  font-size: 46rpx;
+  font-size: 42rpx;
   color: #2a2d33;
   font-weight: 700;
 }
@@ -136,43 +108,6 @@ export default {
   display: block;
   margin-top: 12rpx;
   color: #9ea1a6;
-  font-size: 30rpx;
+  font-size: 28rpx;
-}
-
-.menu-card {
-  margin: 24rpx;
-  border-radius: 24rpx;
-  background: #ffffff;
-  overflow: hidden;
-}
-
-.item {
-  min-height: 94rpx;
-  display: flex;
-  align-items: center;
-  padding: 0 30rpx;
-  border-bottom: 1rpx solid #efefef;
-}
-
-.item:last-child {
-  border-bottom: none;
-}
-
-.left {
-  flex: 1;
-  font-size: 48rpx;
-  color: #2f3135;
-  font-weight: 600;
-}
-
-.mid {
-  margin-right: 16rpx;
-  color: #9ea1a6;
-  font-size: 44rpx;
-}
-
-.right {
-  color: #9ea1a6;
-  font-size: 54rpx;
 }
 </style>

uni.scss

@@ -6,6 +6,8 @@
  *
  */
 
+@import 'uview-plus/theme.scss';
+
 /**
  * 如果你是App开发者（插件使用者），你可以通过修改这些变量来定制自己的插件主题，实现自定义主题功能
  *