前端设备列表展示设备状态

frontend/src/pages/Device.vue

@@ -30,6 +30,7 @@
                 <span class="node-title">{{ relay.name }}</span>
                 <span class="node-type relay-type">{{ getDeviceTypeText(relay.type) }}</span>
                 <span v-if="relay.address" class="node-address">[{{ relay.address }}]</span>
+                <span class="node-status" :class="{ 'status-active': relay.active, 'status-inactive': !relay.active }">{{ relay.active ? '在线' : '离线' }}</span>
               </div>
               <div class="node-actions">
                 <button class="action-btn edit-btn" @click.stop="editDevice(relay)">编辑</button>
@@ -50,6 +51,7 @@
                     <span class="node-title">{{ controller.name }}</span>
                     <span class="node-type controller-type">{{ getDeviceTypeText(controller.type) }}</span>
                     <span v-if="controller.address" class="node-address">[{{ controller.address }}]</span>
+                    <span class="node-status" :class="{ 'status-active': controller.active, 'status-inactive': !controller.active }">{{ controller.active ? '在线' : '离线' }}</span>
                   </div>
                   <div class="node-actions">
                     <button class="action-btn edit-btn" @click.stop="editDevice(controller)">编辑</button>
@@ -69,6 +71,7 @@
                         <span class="node-title">{{ leaf.name }}</span>
                         <span class="node-type device-type">{{ getDeviceTypeText(leaf.type) }}</span>
                         <span v-if="leaf.address" class="node-address">[{{ leaf.address }}]</span>
+                        <span class="node-status" :class="{ 'status-active': leaf.active, 'status-inactive': !leaf.active }">{{ leaf.active ? '在线' : '离线' }}</span>
                       </div>
                       <div class="node-actions">
                         <button class="action-btn edit-btn" @click.stop="editDevice(leaf)">编辑</button>
@@ -225,6 +228,11 @@ export default {
         'fan': '风机',
         'water_curtain': '水帘'
       }
+      const statusMap = {
+        'online': '在线',
+        'offline': '离线',
+        'error': '故障'
+      }
       return typeMap[type] || type
     },
     
@@ -621,6 +629,23 @@ export default {
   text-transform: uppercase;
 }
 
+.node-status {
+  font-size: 0.8rem;
+  padding: 0.3rem 0.6rem;
+  border-radius: 12px;
+  font-weight: 500;
+}
+
+.status-active {
+  background: #4caf50;
+  color: white;
+}
+
+.status-inactive {
+  background: #9e9e9e;
+  color: white;
+}
+
 .relay-type {
   background: #ff9800;
   color: white;