perf(views): 优化“网关列表”模块在线状态样式显示

src/views/gateway-list/GatewayList.vue

@@ -332,7 +332,8 @@ onMounted(() => {
                 {{ index + 1 }}
               </template>
               <template v-else-if="column.key === 'state'">
-                {{ record.state === 0 ? $t('common.offline') : $t('common.online') }}
+                <div v-if="record.state === 0" class="tag-style default">{{ $t('common.offline') }}</div>
+                <div v-else class="tag-style success">{{ $t('common.online') }}</div>
               </template>
               <template v-else-if="column.key === 'action'">
                 <SvgIcon @click="addGatewayDelete(record.id)" class="icon-delete" name="delete" />
@@ -436,6 +437,29 @@ onMounted(() => {
 </template>
 
 <style lang="scss" scoped>
+.success {
+  width: 40px;
+  color: #52c41a;
+  background: #f6ffed;
+  border: 1px solid #b7eb8f;
+}
+
+.default {
+  width: 40px;
+  color: #666;
+  background: #f8f8f8;
+  border: 1px solid #e5e5e5;
+}
+
+.tag-style {
+  display: flex;
+  align-items: center; /* 垂直居中 */
+  justify-content: center; /* 水平居中 */
+  height: 24px;
+  font-size: 12px;
+  border-radius: 4px;
+}
+
 /* 添加选中行样式 */
 :deep(.selected-row) td {
   background-color: #e0f5f5 !important;