美化

src/views/DeviceConfig.vue

@@ -8,6 +8,34 @@ import {useDeviceConfig} from '@/composables/useDeviceConfig'
 const ble = useBleDevice()
 const mqtt = useDeviceConfig()
 
+const {
+  connectionState: bleState,
+  deviceName: bleName,
+  currentMode: bleMode,
+  config: bleConfig,
+  logs: bleLogs,
+  connect: bleConnect,
+  disconnect: bleDisconnect,
+  setMode: bleSetMode,
+  saveConfig: bleSaveConfig,
+  restartDevice: bleRestartDevice,
+  clearLogs: bleClearLogs,
+} = 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
+
 const isMobile = ref(window.innerWidth < 768)
 const activeTab = ref('bluetooth')
 const tabList = [
@@ -20,15 +48,15 @@ function onTabChange(key: string) {
 }
 
 const LIGHT_MODES = [
-  {key: 'traffic', label: 'Traffic', color: '#52c41a'},
-  {key: 'thinking', label: 'Thinking', color: '#722ed1'},
-  {key: 'ai', label: 'AI', color: '#1890ff'},
-  {key: 'busy', label: 'Busy', color: '#faad14'},
-  {key: 'success', label: 'Success', color: '#52c41a'},
-  {key: 'error', label: 'Error', color: '#f5222d'},
-  {key: 'alarm', label: 'Alarm', color: '#fa541c'},
-  {key: 'init', label: 'Init', color: '#13c2c2'},
-  {key: 'off', label: 'Off', color: '#8c8c8c'},
+  {key: 'traffic', label: 'Traffic'},
+  {key: 'thinking', label: 'Thinking'},
+  {key: 'ai', label: 'AI'},
+  {key: 'busy', label: 'Busy'},
+  {key: 'success', label: 'Success'},
+  {key: 'error', label: 'Error'},
+  {key: 'alarm', label: 'Alarm'},
+  {key: 'init', label: 'Init'},
+  {key: 'off', label: 'Off'},
 ]
 
 const bleWifiForm = reactive({ssid: '', password: ''})
@@ -57,7 +85,7 @@ const mqttMqttForm = reactive({
 })
 const mqttPinForm = reactive({red: 4, green: 3, yellow: 2})
 
-watch(ble.config, (cfg) => {
+watch(bleConfig, (cfg) => {
   if (cfg) {
     bleWifiForm.ssid = cfg.wifi_ssid || ''
     bleMqttForm.broker = cfg.mqtt_broker || ''
@@ -73,7 +101,7 @@ watch(ble.config, (cfg) => {
   }
 })
 
-watch(mqtt.config, (cfg) => {
+watch(mqttConfig, (cfg) => {
   if (cfg) {
     mqttWifiForm.ssid = cfg.wifi_ssid || ''
     mqttMqttForm.broker = cfg.mqtt_broker || ''
@@ -106,7 +134,7 @@ async function handleBleSave() {
     pin_yellow: blePinForm.yellow,
   }
   try {
-    await ble.saveConfig(cfg)
+    await bleSaveConfig(cfg)
     message.success('配置已保存，设备将重启')
   } catch {
     message.error('保存失败')
@@ -115,7 +143,7 @@ async function handleBleSave() {
 
 async function handleBleRestart() {
   try {
-    await ble.restartDevice()
+    await bleRestartDevice()
     message.success('重启指令已发送')
   } catch {
     message.error('重启失败')
@@ -139,7 +167,7 @@ async function handleMqttSave() {
     pin_yellow: mqttPinForm.yellow,
   }
   try {
-    await mqtt.saveConfig(cfg)
+    await mqttSaveConfig(cfg)
     message.success('配置已保存并推送')
   } catch {
     message.error('保存失败')
@@ -148,7 +176,7 @@ async function handleMqttSave() {
 
 async function handleMqttRestart() {
   try {
-    await mqtt.restartDevice()
+    await mqttRestartDevice()
     message.success('重启指令已发送')
   } catch {
     message.error('重启失败')
@@ -174,18 +202,18 @@ onMounted(() => window.addEventListener('resize', onResize))
       <!-- 蓝牙配置 Tab -->
       <template v-if="activeTab === 'bluetooth'">
         <a-alert
-            v-if="ble.connectionState.value === 'connected'"
-            :message="'已连接: ' + ble.deviceName.value"
+            v-if="bleState === 'connected'"
+            :message="'已连接: ' + bleName"
             class="conn-alert"
             show-icon
             type="success"
         >
           <template #action>
-            <a-button danger size="small" @click="ble.disconnect">断开</a-button>
+            <a-button danger size="small" @click="bleDisconnect">断开</a-button>
           </template>
         </a-alert>
         <a-alert
-            v-else-if="ble.connectionState.value === 'scanning' || ble.connectionState.value === 'connecting'"
+            v-else-if="bleState === 'scanning' || bleState === 'connecting'"
             class="conn-alert"
             message="正在连接设备..."
             show-icon
@@ -207,7 +235,7 @@ onMounted(() => window.addEventListener('resize', onResize))
             type="warning"
         >
           <template #action>
-            <a-button size="small" type="primary" @click="ble.connect">连接设备</a-button>
+            <a-button size="small" type="primary" @click="bleConnect">连接设备</a-button>
           </template>
         </a-alert>
 
@@ -216,18 +244,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="ble.config.value?.wifi_ssid" color="success">{{ ble.config.value.wifi_ssid }}</a-tag>
+                  <a-tag v-if="bleConfig?.wifi_ssid" color="success">{{ bleConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT">
-                  <a-tag v-if="ble.config.value?.mqtt_broker" color="success">{{ ble.config.value.mqtt_broker }}</a-tag>
+                  <a-tag v-if="bleConfig?.mqtt_broker" color="success">{{ bleConfig.mqtt_broker }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="模式">
-                  <a-tag color="processing">{{ ble.currentMode.value || '-' }}</a-tag>
+                  <a-tag color="processing">{{ bleMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信">
-                  {{ ble.config.value?.comm_mode === 1 ? 'MQTT' : 'BLE-only' }}
+                  {{ bleConfig?.comm_mode === 1 ? 'MQTT' : 'BLE-only' }}
                 </a-descriptions-item>
               </a-descriptions>
             </a-card>
@@ -237,9 +265,9 @@ onMounted(() => window.addEventListener('resize', onResize))
                 <a-button
                     v-for="m in LIGHT_MODES"
                     :key="m.key"
-                    :type="ble.currentMode.value === m.key ? 'primary' : 'default'"
+                    :type="bleMode === m.key ? 'primary' : 'default'"
                     class="mode-btn"
-                    @click="ble.setMode(m.key)"
+                    @click="bleSetMode(m.key)"
                 >
                   {{ m.label }}
                 </a-button>
@@ -344,32 +372,32 @@ 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="ble.config.value?.wifi_ssid" color="success">{{ ble.config.value.wifi_ssid }}</a-tag>
+                  <a-tag v-if="bleConfig?.wifi_ssid" color="success">{{ bleConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT">
-                  <a-tag v-if="ble.config.value?.mqtt_broker" color="success">{{ ble.config.value.mqtt_broker }}</a-tag>
+                  <a-tag v-if="bleConfig?.mqtt_broker" color="success">{{ bleConfig.mqtt_broker }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="模式">
-                  <a-tag color="processing">{{ ble.currentMode.value || '-' }}</a-tag>
+                  <a-tag color="processing">{{ bleMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信">
-                  {{ ble.config.value?.comm_mode === 1 ? 'MQTT' : 'BLE-only' }}
+                  {{ bleConfig?.comm_mode === 1 ? 'MQTT' : 'BLE-only' }}
                 </a-descriptions-item>
               </a-descriptions>
             </a-card>
 
             <a-card class="section-card log-card" size="small" title="日志">
               <template #extra>
-                <a-button size="small" type="text" @click="ble.clearLogs">
+                <a-button size="small" type="text" @click="bleClearLogs">
                   <ClearOutlined/>
                   清空
                 </a-button>
               </template>
               <div class="log-container">
-                <div v-for="(line, i) in ble.logs.value" :key="i" class="log-line">{{ line }}</div>
-                <div v-if="ble.logs.value.length === 0" class="log-empty">暂无日志</div>
+                <div v-for="(line, i) in bleLogs" :key="i" class="log-line">{{ line }}</div>
+                <div v-if="bleLogs.length === 0" class="log-empty">暂无日志</div>
               </div>
             </a-card>
           </div>
@@ -379,18 +407,18 @@ onMounted(() => window.addEventListener('resize', onResize))
       <!-- 消息配置 Tab -->
       <template v-if="activeTab === 'mqtt'">
         <a-alert
-            v-if="mqtt.connectionState.value === 'connected'"
-            :message="'已连接: ' + mqtt.deviceName.value"
+            v-if="mqttState === 'connected'"
+            :message="'已连接: ' + mqttName"
             class="conn-alert"
             show-icon
             type="success"
         >
           <template #action>
-            <a-button danger size="small" @click="mqtt.disconnect">断开</a-button>
+            <a-button danger size="small" @click="mqttDisconnect">断开</a-button>
           </template>
         </a-alert>
         <a-alert
-            v-else-if="mqtt.connectionState.value === 'connecting'"
+            v-else-if="mqttState === 'connecting'"
             class="conn-alert"
             message="正在加载配置..."
             show-icon
@@ -412,7 +440,7 @@ onMounted(() => window.addEventListener('resize', onResize))
             type="warning"
         >
           <template #action>
-            <a-button size="small" type="primary" @click="mqtt.connect">连接</a-button>
+            <a-button size="small" type="primary" @click="mqttConnect">连接</a-button>
           </template>
         </a-alert>
 
@@ -421,18 +449,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="mqtt.config.value?.wifi_ssid" color="success">{{ mqtt.config.value.wifi_ssid }}</a-tag>
+                  <a-tag v-if="mqttConfig?.wifi_ssid" color="success">{{ mqttConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT">
-                  <a-tag v-if="mqtt.config.value?.mqtt_broker" color="success">{{
-                      mqtt.config.value.mqtt_broker
+                  <a-tag v-if="mqttConfig?.mqtt_broker" color="success">{{
+                      mqttConfig.mqtt_broker
                     }}
                   </a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="模式">
-                  <a-tag color="processing">{{ mqtt.currentMode.value || '-' }}</a-tag>
+                  <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信">MQTT</a-descriptions-item>
               </a-descriptions>
@@ -443,9 +471,9 @@ onMounted(() => window.addEventListener('resize', onResize))
                 <a-button
                     v-for="m in LIGHT_MODES"
                     :key="m.key"
-                    :type="mqtt.currentMode.value === m.key ? 'primary' : 'default'"
+                    :type="mqttMode === m.key ? 'primary' : 'default'"
                     class="mode-btn"
-                    @click="mqtt.setMode(m.key)"
+                    @click="mqttSetMode(m.key)"
                 >
                   {{ m.label }}
                 </a-button>
@@ -550,18 +578,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="mqtt.config.value?.wifi_ssid" color="success">{{ mqtt.config.value.wifi_ssid }}</a-tag>
+                  <a-tag v-if="mqttConfig?.wifi_ssid" color="success">{{ mqttConfig.wifi_ssid }}</a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="MQTT">
-                  <a-tag v-if="mqtt.config.value?.mqtt_broker" color="success">{{
-                      mqtt.config.value.mqtt_broker
+                  <a-tag v-if="mqttConfig?.mqtt_broker" color="success">{{
+                      mqttConfig.mqtt_broker
                     }}
                   </a-tag>
                   <a-tag v-else color="error">未配置</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="模式">
-                  <a-tag color="processing">{{ mqtt.currentMode.value || '-' }}</a-tag>
+                  <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
                 </a-descriptions-item>
                 <a-descriptions-item label="通信">MQTT</a-descriptions-item>
               </a-descriptions>
@@ -569,14 +597,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="mqtt.clearLogs">
+                <a-button size="small" type="text" @click="mqttClearLogs">
                   <ClearOutlined/>
                   清空
                 </a-button>
               </template>
               <div class="log-container">
-                <div v-for="(line, i) in mqtt.logs.value" :key="i" class="log-line">{{ line }}</div>
-                <div v-if="mqtt.logs.value.length === 0" class="log-empty">暂无日志</div>
+                <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>
             </a-card>
           </div>