feat 蓝牙模块

src/components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AppFooter: typeof import('./components/AppFooter.vue')['default']
     AppLogos: typeof import('./components/AppLogos.vue')['default']
     BackNav: typeof import('./components/backNav.vue')['default']
+    BluetoothConnect: typeof import('./components/bluetooth/connect.vue')['default']
     BluetoothDevice: typeof import('./components/bluetooth/device.vue')['default']
     Device: typeof import('./components/deviceCard.vue')['default']
     DeviceCard: typeof import('./components/deviceCard.vue')['default']

src/components/bluetooth/connect.vue

@@ -0,0 +1,184 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const bluetoothEnabled = ref(true)
+const searchValue = ref('')
+
+const deviceList = ref([
+  {
+    name: 'XS-65H',
+    mac: 'MACC:AA:BB:CC:DD:01',
+    connected: false,
+  },
+  {
+    name: 'XS-65H',
+    mac: 'MACC:AA:BB:CC:DD:01',
+    connected: true,
+  },
+])
+
+function handleConnect(index: number) {
+  deviceList.value[index].connected = true
+}
+
+function handleDisconnect(index: number) {
+  deviceList.value[index].connected = false
+}
+
+function handleRefresh() {
+  console.log('刷新设备列表')
+}
+</script>
+
+<template>
+  <view class="bluetooth-card">
+    <view class="card-header">
+      <text class="card-title">
+        蓝牙连接
+      </text>
+    </view>
+    <view class="card-body">
+      <!-- 蓝牙开关 -->
+      <view class="switch-row">
+        <text class="switch-label">
+          蓝牙开关
+        </text>
+        <switch :checked="bluetoothEnabled" color="#4685FD" @change="bluetoothEnabled = !bluetoothEnabled" />
+      </view>
+
+      <!-- 搜索框 -->
+      <view class="search-box">
+        <wd-search v-model="searchValue" placeholder="搜索蓝牙设备" hide-cancel placeholder-left />
+      </view>
+
+      <!-- 设备列表标题 -->
+      <view class="device-header">
+        <text class="device-title">
+          设备名称
+        </text>
+        <view class="refresh-btn" @tap="handleRefresh">
+          <wd-icon name="refresh" size="20px" color="#999999" />
+        </view>
+      </view>
+
+      <!-- 设备列表 -->
+      <view class="device-list">
+        <view v-for="(device, index) in deviceList" :key="index" class="device-item">
+          <view class="device-info">
+            <text class="device-name">
+              {{ device.name }}
+            </text>
+            <text class="device-mac">
+              {{ device.mac }}
+            </text>
+          </view>
+          <wd-button
+            v-if="!device.connected"
+            size="small"
+            round
+            @tap="handleConnect(index)"
+          >
+            连接
+          </wd-button>
+          <wd-button
+            v-else
+            type="danger"
+            size="small"
+            round
+            @tap="handleDisconnect(index)"
+          >
+            断开
+          </wd-button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<style scoped>
+.bluetooth-card {
+  background-color: #ffffff;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.card-header {
+  padding: 16px;
+  border-bottom: 1px solid #f5f5f5;
+}
+
+.card-title {
+  font-size: 18px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.card-body {
+  padding: 16px;
+}
+
+.switch-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+.switch-label {
+  font-size: 15px;
+  color: #333333;
+}
+
+.search-box {
+  margin-bottom: 16px;
+}
+
+.device-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+}
+
+.device-title {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333333;
+}
+
+.refresh-btn {
+  padding: 4px;
+}
+
+.device-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.device-item {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 16px;
+  background-color: #f8f9fa;
+  border-radius: 8px;
+}
+
+.device-info {
+  display: flex;
+  flex-direction: column;
+}
+
+.device-name {
+  font-size: 15px;
+  font-weight: bold;
+  color: #333333;
+  margin-bottom: 4px;
+}
+
+.device-mac {
+  font-size: 12px;
+  color: #999999;
+}
+</style>

src/components/bluetooth/device.vue

@@ -1,96 +0,0 @@
-<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/pages/bluetooth/index.vue

@@ -10,13 +10,10 @@ definePage({
 <template>
   <view class="page">
     <back-nav title="蓝牙管理" />
-    <!-- 激活卡片 -->
+
     <view class="content">
-      <deviceCard
+      <device-card />
-        name="徐工XS65H #01"
+      <bluetooth-connect />
-        device-id="ABC1234"
-        :connected="true"
-      />
     </view>
   </view>
 </template>
@@ -29,6 +26,6 @@ definePage({
 
 .content {
   padding: 16px;
-  padding-top: 72px;
+  padding-top: 100px;
 }
 </style>