feat 蓝牙模块

src/components.d.ts

@@ -10,6 +10,9 @@ declare module 'vue' {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     AppLogos: typeof import('./components/AppLogos.vue')['default']
     BackNav: typeof import('./components/backNav.vue')['default']
+    BluetoothDevice: typeof import('./components/bluetooth/device.vue')['default']
+    Device: typeof import('./components/deviceCard.vue')['default']
+    DeviceCard: typeof import('./components/deviceCard.vue')['default']
     HiCounter: typeof import('./components/HiCounter.vue')['default']
     HomeConstruction: typeof import('./components/home/construction.vue')['default']
     HomeHomeNav: typeof import('./components/home/homeNav.vue')['default']

src/components/bluetooth/device.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  name?: string
+  deviceId?: string
+  connected?: boolean
+}>(), {
+  name: '徐工XS65H #01',
+  deviceId: 'ABC1234',
+  connected: true,
+})
+</script>
+
+<template>
+  <view class="device-item">
+    <view class="device-icon">
+      <wd-icon name="device" size="24px" color="#4685FD" />
+    </view>
+    <view class="device-info">
+      <text class="device-name">
+        {{ name }}
+      </text>
+      <text class="device-id">
+        设备号: {{ deviceId }}
+      </text>
+    </view>
+    <view class="device-status">
+      <view class="status-dot" :class="{ 'status-connected': connected }" />
+      <text class="status-text">
+        {{ connected ? '已连接' : '未连接' }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+
+.device-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background-color: #f0f5ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.device-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.device-id {
+  font-size: 13px;
+  color: #999999;
+}
+
+.device-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #cccccc;
+}
+
+.status-connected {
+  background-color: #52c41a;
+}
+
+.status-text {
+  font-size: 13px;
+  color: #999999;
+}
+</style>

src/components/deviceCard.vue

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+  name?: string
+  deviceId?: string
+  connected?: boolean
+}>(), {
+  name: '徐工XS65H #01',
+  deviceId: 'ABC1234',
+  connected: true,
+})
+</script>
+
+<template>
+  <view class="device-item">
+    <view class="device-icon">
+      <wd-icon name="device" size="24px" color="#4685FD" />
+    </view>
+    <view class="device-info">
+      <text class="device-name">
+        {{ name }}
+      </text>
+      <text class="device-id">
+        设备号: {{ deviceId }}
+      </text>
+    </view>
+    <view class="device-status">
+      <view class="status-dot" :class="{ 'status-connected': connected }" />
+      <text variant="subtle" class="status-text">
+        {{ connected ? '已连接' : '未连接' }}
+      </text>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.device-item {
+  display: flex;
+  align-items: center;
+  padding: 16px;
+  background-color: #ffffff;
+  border-radius: 12px;
+  margin-bottom: 12px;
+}
+
+.device-icon {
+  width: 48px;
+  height: 48px;
+  border-radius: 12px;
+  background-color: #f0f5ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-right: 12px;
+  flex-shrink: 0;
+}
+
+.device-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+
+.device-name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.device-id {
+  font-size: 13px;
+  color: #999999;
+}
+
+.device-status {
+  background-color: #F0FFF5;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 8px 16px;
+  border-radius: 12px;
+}
+
+.status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #cccccc;
+}
+
+.status-connected {
+  background-color: #52c41a;
+}
+
+.status-text {
+  font-size: 13px;
+  color: #27BB58;
+}
+</style>

src/components/home/homeNav.vue

@@ -5,13 +5,10 @@ function onIconClick(name: string) {
       url: '/pages/message/index',
     })
   }
-  else if (name === '设置') {
-    // 处理设置
-    console.log(`点击了${name}图标`)
-  }
   else if (name === '蓝牙') {
-    // 处理蓝牙
-    console.log(`点击了${name}图标`)
+    uni.navigateTo({
+      url: '/pages/bluetooth/index',
+    })
   }
   else {
     console.log(`点击了${name}图标`)

src/pages/bluetooth/index.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+definePage({
+  layout: false,
+  style: {
+    navigationStyle: 'custom',
+  },
+})
+</script>
+
+<template>
+  <view class="page">
+    <back-nav title="蓝牙管理" />
+    <!-- 激活卡片 -->
+    <view class="content">
+      <deviceCard
+        name="徐工XS65H #01"
+        device-id="ABC1234"
+        :connected="true"
+      />
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.page {
+  min-height: 100vh;
+  background-color: #EAEFF9;
+}
+
+.content {
+  padding: 16px;
+  padding-top: 72px;
+}
+</style>

src/uni-pages.d.ts

@@ -4,6 +4,7 @@
 // Generated by vite-plugin-uni-pages
 
 type _LocationUrl =
+  "/pages/bluetooth/index" |
   "/pages/home/index" |
   "/pages/message/index" |
   "/pages/report/index" |