refactor(station-card): update UI

src/components/dashboard-page/station-card.vue

@@ -5,7 +5,7 @@ import { type StationAlarmCounts, type StationDevices } from '@/composables/quer
 import { ControlOutlined } from '@vicons/antd';
 import { Video as VideoIcon } from '@vicons/carbon';
 import axios from 'axios';
-import { NCard, NStatistic, NTag, NGrid, NGi, NButton, NIcon, useThemeVars, NSpace, NTooltip } from 'naive-ui';
+import { NCard, NTag, NButton, NIcon, useThemeVars, NSpace, NFlex, NText } from 'naive-ui';
 import { toRefs, computed } from 'vue';
 
 const props = defineProps<{
@@ -22,7 +22,14 @@ const emit = defineEmits<{
 
 const { station, stationDevices, stationAlarmCounts } = toRefs(props);
 
-// 计算总离线设备数量
+const onlineDeviceCount = computed(() => {
+  let count = 0;
+  Object.values(DeviceType).forEach((deviceType) => {
+    const onlineDeviceList = stationDevices.value?.[deviceType].filter((device) => device.deviceStatus === '10') ?? [];
+    count += onlineDeviceList.length;
+  });
+  return count;
+});
 const offlineDeviceCount = computed(() => {
   let count = 0;
   Object.values(DeviceType).forEach((deviceType) => {
@@ -95,63 +102,47 @@ const theme = useThemeVars();
         {{ station.online ? '在线' : '离线' }}
       </NTag>
     </template>
+
     <template #default>
-      <NSpace>
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NButton text @click="openVideoPlatform">
-              <NIcon>
-                <VideoIcon />
-              </NIcon>
-            </NButton>
-          </template>
-          <template #default>
-            <span style="font-size: xx-small">打开视频平台</span>
-          </template>
-        </NTooltip>
-        <NTooltip trigger="hover">
-          <template #trigger>
-            <NButton text @click="openDeviceConfigModal">
-              <NIcon>
-                <ControlOutlined />
-              </NIcon>
-            </NButton>
-          </template>
-          <template #default>
-            <span style="font-size: xx-small">打开设备配置</span>
-          </template>
-        </NTooltip>
+      <NSpace vertical :size="8">
+        <NFlex :justify="'flex-start'" class="actions">
+          <NButton quaternary size="tiny" :focusable="false" :disabled="!station.online" @click="openVideoPlatform">
+            <NIcon>
+              <VideoIcon />
+            </NIcon>
+            <span class="btn-text">视频平台</span>
+          </NButton>
+
+          <NButton quaternary size="tiny" :focusable="false" :disabled="!station.online" @click="openDeviceConfigModal">
+            <NIcon>
+              <ControlOutlined />
+            </NIcon>
+            <span class="btn-text">设备配置</span>
+          </NButton>
+        </NFlex>
+
+        <NFlex vertical :size="0" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
+          <NFlex justify="space-between" align="baseline" class="metric-item">
+            <NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openOfflineDeviceTreeModal()">设备统计</NText>
+            <span class="metric-value">
+              <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">{{ onlineDeviceCount }}</span>
+              <NText depth="3" class="slash">/</NText>
+              <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">{{ offlineDeviceCount }}</span>
+              <NText depth="3" class="slash">/</NText>
+              <span>{{ deviceCount }}</span>
+              <NText depth="3" class="unit">台</NText>
+            </span>
+          </NFlex>
+
+          <NFlex justify="space-between" align="baseline" class="metric-item">
+            <NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openDeviceAlarmTreeModal()">告警记录</NText>
+            <span class="metric-value">
+              <span>{{ alarmCount }}</span>
+              <NText depth="3" class="unit">条</NText>
+            </span>
+          </NFlex>
+        </NFlex>
       </NSpace>
-      <NGrid :cols="2" :style="{ opacity: station.online ? '1' : '0.3' }">
-        <NGi>
-          <NStatistic tabular-nums>
-            <template #label>
-              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openOfflineDeviceTreeModal">离线设备</span>
-            </template>
-            <template #default>
-              <span class="font-small" :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">{{ offlineDeviceCount }}</span>
-              <span class="font-small">/</span>
-              <span class="font-small">{{ deviceCount }}</span>
-            </template>
-            <template #suffix>
-              <span class="font-xx-small">台</span>
-            </template>
-          </NStatistic>
-        </NGi>
-        <NGi>
-          <NStatistic tabular-nums>
-            <template #label>
-              <span class="font-xx-small" :class="[station.online ? 'clickable' : '']" @click="openDeviceAlarmTreeModal">告警记录</span>
-            </template>
-            <template #default>
-              <span class="font-small">{{ alarmCount }}</span>
-            </template>
-            <template #suffix>
-              <span class="font-xx-small">条</span>
-            </template>
-          </NStatistic>
-        </NGi>
-      </NGrid>
     </template>
   </NCard>
 </template>
@@ -163,23 +154,31 @@ const theme = useThemeVars();
   transition: color 0.2s ease;
 
   &:hover {
-    color: v-bind('theme.primaryColorHover');
+    color: v-bind('theme.iconColorHover');
   }
 }
 
-.font-xx-small {
-  font-size: xx-small;
-}
-
-.font-medium {
-  font-size: medium;
-}
-
-.font-small {
-  font-size: small;
-}
-
 .font-smaller {
   font-size: smaller;
 }
+
+.btn-text {
+  margin-left: 6px;
+  font-size: xx-small;
+  color: v-bind('theme.textColor3');
+}
+
+.metric-label {
+  font-size: xx-small;
+}
+
+.metric-value {
+  font-size: small;
+}
+
+.unit,
+.slash {
+  margin-left: 4px;
+  font-size: xx-small;
+}
 </style>