改为串口调试

src/views/DeviceConfig.vue

@@ -6,7 +6,7 @@ import {useBleDevice} from '@/composables/useBleDevice'
 import {useDeviceConfig} from '@/composables/useDeviceConfig'
 
 const ble = useBleDevice()
-const mqtt = useDeviceConfig()
+const serial = useDeviceConfig()
 
 const {
   connectionState: bleState,
@@ -23,24 +23,24 @@ const {
 } = ble
 
 const {
-  connectionState: mqttState,
-  deviceName: mqttName,
-  currentMode: mqttMode,
-  config: mqttConfig,
-  logs: mqttLogs,
-  connect: mqttConnect,
-  disconnect: mqttDisconnect,
-  setMode: mqttSetMode,
-  saveConfig: mqttSaveConfig,
-  restartDevice: mqttRestartDevice,
-  clearLogs: mqttClearLogs,
-} = mqtt
+  connectionState: serialState,
+  deviceName: serialName,
+  currentMode: serialMode,
+  config: serialConfig,
+  logs: serialLogs,
+  connect: serialConnect,
+  disconnect: serialDisconnect,
+  setMode: serialSetMode,
+  saveConfig: serialSaveConfig,
+  restartDevice: serialRestartDevice,
+  clearLogs: serialClearLogs,
+} = serial
 
 const isMobile = ref(window.innerWidth < 768)
 const activeTab = ref('bluetooth')
 const tabList = [
   {key: 'bluetooth', tab: '蓝牙配置'},
-  {key: 'mqtt', tab: '消息配置'},
+  {key: 'serial', tab: '串口配置'},
 ]
 
 function onTabChange(key: string) {
@@ -102,13 +102,13 @@ function getDeviceType(name: string): string {
 }
 
 const bleDeviceType = computed(() => getDeviceType(bleName.value))
-const mqttDeviceType = computed(() => getDeviceType(mqttName.value))
+const serialDeviceType = computed(() => getDeviceType(serialName.value))
 
 const bleLightModes = computed(() => DEVICE_CONFIGS[bleDeviceType.value]?.modes || DEVICE_CONFIGS[DEFAULT_DEVICE].modes)
-const mqttLightModes = computed(() => DEVICE_CONFIGS[mqttDeviceType.value]?.modes || DEVICE_CONFIGS[DEFAULT_DEVICE].modes)
+const serialLightModes = computed(() => DEVICE_CONFIGS[serialDeviceType.value]?.modes || DEVICE_CONFIGS[DEFAULT_DEVICE].modes)
 
 const blePinConfig = computed(() => DEVICE_CONFIGS[bleDeviceType.value]?.pins || DEVICE_CONFIGS[DEFAULT_DEVICE].pins)
-const mqttPinConfig = computed(() => DEVICE_CONFIGS[mqttDeviceType.value]?.pins || DEVICE_CONFIGS[DEFAULT_DEVICE].pins)
+const serialPinConfig = computed(() => DEVICE_CONFIGS[serialDeviceType.value]?.pins || DEVICE_CONFIGS[DEFAULT_DEVICE].pins)
 
 const GPIO_OPTIONS = [
   {value: 2, label: 'GPIO2'},
@@ -130,8 +130,8 @@ const bleMqttForm = reactive({
 const blePinForm = reactive<Record<string, number>>({red: 4, green: 3, blue: 2, yellow: 2})
 let blePendingAction: 'save' | 'restart' | null = null
 
-const mqttWifiForm = reactive({ssid: '', password: ''})
-const mqttMqttForm = reactive({
+const serialWifiForm = reactive({ssid: '', password: ''})
+const serialMqttForm = reactive({
   broker: '',
   port: 1883,
   client: 'AI-Beacon-Light',
@@ -141,7 +141,7 @@ const mqttMqttForm = reactive({
   statusTopic: 'openCodeLight/status',
   topicConfig: 'agent/status/config',
 })
-const mqttPinForm = reactive<Record<string, number>>({red: 4, green: 3, blue: 2, yellow: 2})
+const serialPinForm = reactive<Record<string, number>>({red: 4, green: 3, blue: 2, yellow: 2})
 
 watch(bleConfig, (cfg) => {
   if (cfg) {
@@ -171,20 +171,20 @@ watch(bleState, (state) => {
   }
 })
 
-watch(mqttConfig, (cfg) => {
+watch(serialConfig, (cfg) => {
   if (cfg) {
-    mqttWifiForm.ssid = cfg.wifi_ssid || ''
-    mqttMqttForm.broker = cfg.mqtt_broker || ''
-    mqttMqttForm.port = cfg.mqtt_port || 1883
-    mqttMqttForm.client = cfg.mqtt_client || 'AI-Beacon-Light'
-    mqttMqttForm.username = cfg.mqtt_user || ''
-    mqttMqttForm.topic = cfg.mqtt_topic || ''
-    mqttMqttForm.statusTopic = cfg.mqtt_status || ''
-    mqttMqttForm.topicConfig = cfg.config_topic || 'agent/status/config'
-    mqttPinForm.red = cfg.pin_red ?? 4
-    mqttPinForm.green = cfg.pin_green ?? 3
-    mqttPinForm.blue = cfg.pin_blue ?? 2
-    mqttPinForm.yellow = cfg.pin_yellow ?? 2
+    serialWifiForm.ssid = cfg.wifi_ssid || ''
+    serialMqttForm.broker = cfg.mqtt_broker || ''
+    serialMqttForm.port = cfg.mqtt_port || 1883
+    serialMqttForm.client = cfg.mqtt_client || 'AI-Beacon-Light'
+    serialMqttForm.username = cfg.mqtt_user || ''
+    serialMqttForm.topic = cfg.mqtt_topic || ''
+    serialMqttForm.statusTopic = cfg.mqtt_status || ''
+    serialMqttForm.topicConfig = cfg.config_topic || 'agent/status/config'
+    serialPinForm.red = cfg.pin_red ?? 4
+    serialPinForm.green = cfg.pin_green ?? 3
+    serialPinForm.blue = cfg.pin_blue ?? 2
+    serialPinForm.yellow = cfg.pin_yellow ?? 2
   }
 })
 
@@ -227,37 +227,37 @@ async function handleBleRestart() {
   }
 }
 
-async function handleMqttSave() {
+async function handleSerialSave() {
   const cfg: Record<string, any> = {
-    wifi_ssid: mqttWifiForm.ssid,
-    wifi_pass: mqttWifiForm.password,
-    mqtt_broker: mqttMqttForm.broker,
-    mqtt_port: mqttMqttForm.port,
-    mqtt_user: mqttMqttForm.username,
-    mqtt_pass: mqttMqttForm.password,
-    mqtt_client: mqttMqttForm.client,
-    mqtt_topic: mqttMqttForm.topic,
-    mqtt_status: mqttMqttForm.statusTopic,
-    mqtt_topic_config: mqttMqttForm.topicConfig,
-    pin_red: mqttPinForm.red,
-    pin_green: mqttPinForm.green,
+    wifi_ssid: serialWifiForm.ssid,
+    wifi_pass: serialWifiForm.password,
+    mqtt_broker: serialMqttForm.broker,
+    mqtt_port: serialMqttForm.port,
+    mqtt_user: serialMqttForm.username,
+    mqtt_pass: serialMqttForm.password,
+    mqtt_client: serialMqttForm.client,
+    mqtt_topic: serialMqttForm.topic,
+    mqtt_status: serialMqttForm.statusTopic,
+    mqtt_topic_config: serialMqttForm.topicConfig,
+    pin_red: serialPinForm.red,
+    pin_green: serialPinForm.green,
   }
-  if (mqttDeviceType.value === 'AI-Beacon-Light') {
-    cfg.pin_blue = mqttPinForm.blue
+  if (serialDeviceType.value === 'AI-Beacon-Light') {
+    cfg.pin_blue = serialPinForm.blue
   } else {
-    cfg.pin_yellow = mqttPinForm.yellow
+    cfg.pin_yellow = serialPinForm.yellow
   }
   try {
-    await mqttSaveConfig(cfg)
+    await serialSaveConfig(cfg)
     message.success('保存成功，请待设备启动成功后手动连接设备！')
   } catch {
     message.error('保存失败')
   }
 }
 
-async function handleMqttRestart() {
+async function handleSerialRestart() {
   try {
-    await mqttRestartDevice()
+    await serialRestartDevice()
     message.success('重启成功，请待设备启动成功后手动连接设备！')
   } catch {
     message.error('重启失败')
@@ -493,21 +493,21 @@ onMounted(() => window.addEventListener('resize', onResize))
         </div>
       </template>
 
-      <!-- 消息配置 Tab -->
-      <template v-if="activeTab === 'mqtt'">
+      <!-- 串口配置 Tab -->
+      <template v-if="activeTab === 'serial'">
         <a-alert
-            v-if="mqttState === 'connected'"
-            :message="'已连接: ' + mqttName"
+            v-if="serialState === 'connected'"
+            :message="'已连接: ' + serialName"
             class="conn-alert"
             show-icon
             type="success"
         >
           <template #action>
-            <a-button danger size="small" @click="mqttDisconnect">断开</a-button>
+            <a-button danger size="small" @click="serialDisconnect">断开</a-button>
           </template>
         </a-alert>
         <a-alert
-            v-else-if="mqttState === 'connecting'"
+            v-else-if="serialState === 'connecting'"
             class="conn-alert"
             message="正在加载配置..."
             show-icon
@@ -529,7 +529,7 @@ onMounted(() => window.addEventListener('resize', onResize))
             type="warning"
         >
           <template #action>
-            <a-button size="small" type="primary" @click="mqttConnect">连接</a-button>
+            <a-button size="small" type="primary" @click="serialConnect">连接</a-button>
           </template>
         </a-alert>
 
@@ -538,18 +538,18 @@ onMounted(() => window.addEventListener('resize', onResize))
             <a-card v-if="isMobile" class="section-card" size="small" title="设备状态">
               <a-descriptions :column="1" :label-style="{ width: '80px' }" size="small">
                 <a-descriptions-item label="WiFi配置">
-                  <a-tag v-if="mqttConfig?.wifi_ssid" color="success">{{ mqttConfig.wifi_ssid }}</a-tag>
+                  <a-tag v-if="serialConfig?.wifi_ssid" color="success">{{ serialConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT配置">
-                  <a-tag v-if="mqttConfig?.mqtt_broker" color="success">{{
-                      mqttConfig.mqtt_broker
+                  <a-tag v-if="serialConfig?.mqtt_broker" color="success">{{
+                      serialConfig.mqtt_broker
                     }}
                   </a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="灯效模式">
-                  <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
+                  <a-tag color="processing">{{ serialMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信方式">
                   <a-tag color="success">MQTT</a-tag>
@@ -562,11 +562,11 @@ onMounted(() => window.addEventListener('resize', onResize))
                 <a-card class="section-card equal-height-card" size="small" title="灯效模式">
                   <div class="mode-grid">
                     <a-button
-                        v-for="m in mqttLightModes"
+                        v-for="m in serialLightModes"
                         :key="m.key"
-                        :type="mqttMode === m.key ? 'primary' : 'default'"
+                        :type="serialMode === m.key ? 'primary' : 'default'"
                         class="mode-btn"
-                        @click="mqttSetMode(m.key)"
+                        @click="serialSetMode(m.key)"
                     >
                       {{ m.label }}
                     </a-button>
@@ -577,10 +577,10 @@ onMounted(() => window.addEventListener('resize', onResize))
                 <a-card class="section-card equal-height-card" size="small" title="WiFi 配置">
                   <a-form layout="vertical">
                     <a-form-item label="名称">
-                      <a-input v-model:value="mqttWifiForm.ssid" placeholder="WiFi 名称"/>
+                      <a-input v-model:value="serialWifiForm.ssid" placeholder="WiFi 名称"/>
                     </a-form-item>
                     <a-form-item label="密码">
-                      <a-input-password v-model:value="mqttWifiForm.password" placeholder="WiFi 密码"/>
+                      <a-input-password v-model:value="serialWifiForm.password" placeholder="WiFi 密码"/>
                     </a-form-item>
                   </a-form>
                 </a-card>
@@ -592,48 +592,48 @@ onMounted(() => window.addEventListener('resize', onResize))
                 <a-row :gutter="12">
                   <a-col :span="12">
                     <a-form-item label="地址">
-                      <a-input v-model:value="mqttMqttForm.broker" placeholder="192.168.1.100"/>
+                      <a-input v-model:value="serialMqttForm.broker" placeholder="192.168.1.100"/>
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
                     <a-form-item label="端口">
-                      <a-input-number v-model:value="mqttMqttForm.port" :max="65535" :min="1" style="width: 100%"/>
+                      <a-input-number v-model:value="serialMqttForm.port" :max="65535" :min="1" style="width: 100%"/>
                     </a-form-item>
                   </a-col>
                 </a-row>
                 <a-row :gutter="12">
                   <a-col :span="12">
                     <a-form-item label="订阅主题">
-                      <a-input v-model:value="mqttMqttForm.topic" placeholder="agent/status"/>
+                      <a-input v-model:value="serialMqttForm.topic" placeholder="agent/status"/>
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
                     <a-form-item label="客户端ID">
-                      <a-input v-model:value="mqttMqttForm.client" placeholder="AI-Beacon-Light"/>
+                      <a-input v-model:value="serialMqttForm.client" placeholder="AI-Beacon-Light"/>
                     </a-form-item>
                   </a-col>
                 </a-row>
                 <a-row :gutter="12">
                   <a-col :span="12">
                     <a-form-item label="用户名">
-                      <a-input v-model:value="mqttMqttForm.username" placeholder="可选"/>
+                      <a-input v-model:value="serialMqttForm.username" placeholder="可选"/>
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
                     <a-form-item label="密码">
-                      <a-input-password v-model:value="mqttMqttForm.password" placeholder="可选"/>
+                      <a-input-password v-model:value="serialMqttForm.password" placeholder="可选"/>
                     </a-form-item>
                   </a-col>
                 </a-row>
                 <a-row :gutter="12">
                   <a-col :span="12">
                     <a-form-item label="状态发布主题">
-                      <a-input v-model:value="mqttMqttForm.statusTopic" placeholder="openCodeLight/status"/>
+                      <a-input v-model:value="serialMqttForm.statusTopic" placeholder="openCodeLight/status"/>
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
                     <a-form-item label="配置订阅主题">
-                      <a-input v-model:value="mqttMqttForm.topicConfig" placeholder="agent/status/config"/>
+                      <a-input v-model:value="serialMqttForm.topicConfig" placeholder="agent/status/config"/>
                     </a-form-item>
                   </a-col>
                 </a-row>
@@ -643,9 +643,9 @@ onMounted(() => window.addEventListener('resize', onResize))
             <a-card class="section-card" size="small" title="灯序配置">
               <a-form layout="vertical">
                 <a-row :gutter="12">
-                  <a-col v-for="pin in mqttPinConfig" :key="pin.key" :span="8">
+                  <a-col v-for="pin in serialPinConfig" :key="pin.key" :span="8">
                     <a-form-item :label="pin.label">
-                      <a-select v-model:value="mqttPinForm[pin.key]" :options="GPIO_OPTIONS" style="width: 100%"/>
+                      <a-select v-model:value="serialPinForm[pin.key]" :options="GPIO_OPTIONS" style="width: 100%"/>
                     </a-form-item>
                   </a-col>
                 </a-row>
@@ -654,7 +654,7 @@ onMounted(() => window.addEventListener('resize', onResize))
 
             <a-row :gutter="8">
               <a-col :span="12">
-                <a-button block size="large" type="primary" @click="handleMqttSave">
+                <a-button block size="large" type="primary" @click="handleSerialSave">
                   <template #icon>
                     <SaveOutlined/>
                   </template>
@@ -662,7 +662,7 @@ onMounted(() => window.addEventListener('resize', onResize))
                 </a-button>
               </a-col>
               <a-col :span="12">
-                <a-button block danger size="large" @click="handleMqttRestart">
+                <a-button block danger size="large" @click="handleSerialRestart">
                   <template #icon>
                     <ReloadOutlined/>
                   </template>
@@ -676,18 +676,18 @@ onMounted(() => window.addEventListener('resize', onResize))
             <a-card class="section-card" size="small" title="设备状态">
               <a-descriptions :column="1" :label-style="{ width: '80px' }" size="small">
                 <a-descriptions-item label="WiFi配置">
-                  <a-tag v-if="mqttConfig?.wifi_ssid" color="success">{{ mqttConfig.wifi_ssid }}</a-tag>
+                  <a-tag v-if="serialConfig?.wifi_ssid" color="success">{{ serialConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT配置">
-                  <a-tag v-if="mqttConfig?.mqtt_broker" color="success">{{
-                      mqttConfig.mqtt_broker
+                  <a-tag v-if="serialConfig?.mqtt_broker" color="success">{{
+                      serialConfig.mqtt_broker
                     }}
                   </a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="灯效模式">
-                  <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
+                  <a-tag color="processing">{{ serialMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信方式">
                   <a-tag color="success">MQTT</a-tag>
@@ -697,14 +697,14 @@ onMounted(() => window.addEventListener('resize', onResize))
 
             <a-card class="section-card log-card" size="small" title="日志">
               <template #extra>
-                <a-button size="small" type="text" @click="mqttClearLogs">
+                <a-button size="small" type="text" @click="serialClearLogs">
                   <ClearOutlined/>
                   清空
                 </a-button>
               </template>
               <div class="log-container">
-                <div v-for="(line, i) in mqttLogs" :key="i" class="log-line">{{ line }}</div>
-                <div v-if="mqttLogs.length === 0" class="log-empty">暂无日志</div>
+                <div v-for="(line, i) in serialLogs" :key="i" class="log-line">{{ line }}</div>
+                <div v-if="serialLogs.length === 0" class="log-empty">暂无日志</div>
               </div>
             </a-card>
           </div>