页面样式修改

src/views/DeviceConfig.vue

@@ -262,18 +262,18 @@ onMounted(() => window.addEventListener('resize', onResize))
           <div class="config-col">
             <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-descriptions-item label="WiFi配置">
                   <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-descriptions-item label="MQTT配置">
                   <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-descriptions-item label="灯效模式">
                   <a-tag color="processing">{{ bleMode || '-' }}</a-tag>
                 </a-descriptions-item>
-                <a-descriptions-item label="通信">
+                <a-descriptions-item label="通信方式">
                   <a-tag v-if="bleConfig?.mqtt_broker" color="success">MQTT</a-tag>
                   <a-tag v-else color="warning">BLE-only</a-tag>
                 </a-descriptions-item>
@@ -299,7 +299,7 @@ onMounted(() => window.addEventListener('resize', onResize))
               <a-col :span="isMobile ? 24 : 10" class="equal-height-col">
                 <a-card class="section-card equal-height-card" size="small" title="WiFi 配置">
                   <a-form layout="vertical">
-                    <a-form-item label="SSID">
+                    <a-form-item label="名称">
                       <a-input v-model:value="bleWifiForm.ssid" placeholder="WiFi 名称"/>
                     </a-form-item>
                     <a-form-item label="密码">
@@ -314,7 +314,7 @@ onMounted(() => window.addEventListener('resize', onResize))
               <a-form layout="vertical">
                 <a-row :gutter="12">
                   <a-col :span="12">
-                    <a-form-item label="Broker">
+                    <a-form-item label="地址">
                       <a-input v-model:value="bleMqttForm.broker" placeholder="192.168.1.100"/>
                     </a-form-item>
                   </a-col>
@@ -331,7 +331,7 @@ onMounted(() => window.addEventListener('resize', onResize))
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
-                    <a-form-item label="Client ID">
+                    <a-form-item label="客户端ID">
                       <a-input v-model:value="bleMqttForm.client" placeholder="AI-Light"/>
                     </a-form-item>
                   </a-col>
@@ -408,18 +408,18 @@ onMounted(() => window.addEventListener('resize', onResize))
           <div v-if="!isMobile" class="side-col">
             <a-card class="section-card" size="small" title="设备状态">
               <a-descriptions :column="1" :label-style="{ width: '80px' }" size="small">
-                <a-descriptions-item label="WiFi">
+                <a-descriptions-item label="WiFi配置">
                   <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-descriptions-item label="MQTT配置">
                   <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-descriptions-item label="灯效模式">
                   <a-tag color="processing">{{ bleMode || '-' }}</a-tag>
                 </a-descriptions-item>
-                <a-descriptions-item label="通信">
+                <a-descriptions-item label="通信方式">
                   <a-tag v-if="bleConfig?.mqtt_broker" color="success">MQTT</a-tag>
                   <a-tag v-else color="warning">BLE-only</a-tag>
                 </a-descriptions-item>
@@ -486,21 +486,21 @@ onMounted(() => window.addEventListener('resize', onResize))
           <div class="config-col">
             <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-descriptions-item label="WiFi配置">
                   <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-descriptions-item label="MQTT配置">
                   <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-descriptions-item label="灯效模式">
                   <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
                 </a-descriptions-item>
-                <a-descriptions-item label="通信">
+                <a-descriptions-item label="通信方式">
                   <a-tag color="success">MQTT</a-tag>
                 </a-descriptions-item>
               </a-descriptions>
@@ -525,7 +525,7 @@ onMounted(() => window.addEventListener('resize', onResize))
               <a-col :span="isMobile ? 24 : 10" class="equal-height-col">
                 <a-card class="section-card equal-height-card" size="small" title="WiFi 配置">
                   <a-form layout="vertical">
-                    <a-form-item label="SSID">
+                    <a-form-item label="名称">
                       <a-input v-model:value="mqttWifiForm.ssid" placeholder="WiFi 名称"/>
                     </a-form-item>
                     <a-form-item label="密码">
@@ -540,7 +540,7 @@ onMounted(() => window.addEventListener('resize', onResize))
               <a-form layout="vertical">
                 <a-row :gutter="12">
                   <a-col :span="12">
-                    <a-form-item label="Broker">
+                    <a-form-item label="地址">
                       <a-input v-model:value="mqttMqttForm.broker" placeholder="192.168.1.100"/>
                     </a-form-item>
                   </a-col>
@@ -557,7 +557,7 @@ onMounted(() => window.addEventListener('resize', onResize))
                     </a-form-item>
                   </a-col>
                   <a-col :span="12">
-                    <a-form-item label="Client ID">
+                    <a-form-item label="客户端ID">
                       <a-input v-model:value="mqttMqttForm.client" placeholder="AI-Light"/>
                     </a-form-item>
                   </a-col>
@@ -634,21 +634,21 @@ onMounted(() => window.addEventListener('resize', onResize))
           <div v-if="!isMobile" class="side-col">
             <a-card class="section-card" size="small" title="设备状态">
               <a-descriptions :column="1" :label-style="{ width: '80px' }" size="small">
-                <a-descriptions-item label="WiFi">
+                <a-descriptions-item label="WiFi配置">
                   <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-descriptions-item label="MQTT配置">
                   <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-descriptions-item label="灯效模式">
                   <a-tag color="processing">{{ mqttMode || '-' }}</a-tag>
                 </a-descriptions-item>
-                <a-descriptions-item label="通信">
+                <a-descriptions-item label="通信方式">
                   <a-tag color="success">MQTT</a-tag>
                 </a-descriptions-item>
               </a-descriptions>