feat(components): station-card

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

@@ -2,10 +2,9 @@
 import type { Station } from '@/apis/domains';
 import { DeviceType } from '@/enums/device-type';
 import { type StationAlarmCounts, type StationDevices } from '@/composables/query';
-import { ControlOutlined } from '@vicons/antd';
+import { MoreOutlined, EllipsisOutlined } from '@vicons/antd';
-import { Video as VideoIcon } from '@vicons/carbon';
 import axios from 'axios';
-import { NCard, NTag, NButton, NIcon, useThemeVars, NSpace, NFlex, NText, NTooltip } from 'naive-ui';
+import { NCard, NTag, NButton, NIcon, useThemeVars, NFlex, NText, NTooltip, NDropdown, type DropdownOption } from 'naive-ui';
 import { toRefs, computed } from 'vue';
 
 const props = defineProps<{
@@ -89,102 +88,106 @@ const openVideoPlatform = async () => {
   }
 };
 
+const dropdownOptions: DropdownOption[] = [
+  {
+    label: '视频平台',
+    key: 'video-platform',
+    onClick: openVideoPlatform,
+  },
+  {
+    label: '设备配置',
+    key: 'device-config',
+    onClick: openDeviceConfigModal,
+  },
+];
+
+const selectDropdownOption = (key: string, option: DropdownOption) => {
+  if (typeof option['onClick'] === 'function') {
+    option['onClick']();
+  }
+};
+
 const theme = useThemeVars();
 </script>
 
 <template>
-  <NCard bordered hoverable size="small" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
+  <NCard bordered hoverable size="medium" class="station-card" :header-style="{ padding: `6px` }" :content-style="{ padding: `0px 6px 6px 6px` }">
     <template #header>
       <NTooltip v-if="station.ip" trigger="click">
         <template #trigger>
-          <span class="font-smaller">{{ station.name }}</span>
+          <span class="font-medium">{{ station.name }}</span>
         </template>
         <span>{{ station.ip }}</span>
       </NTooltip>
-      <span v-else class="font-smaller">{{ station.name }}</span>
+      <span v-else class="font-medium">{{ station.name }}</span>
     </template>
     <template #header-extra>
+      <NFlex :size="4">
         <NTag :type="station.online ? 'success' : 'error'" size="small">
           {{ station.online ? '在线' : '离线' }}
         </NTag>
+        <NDropdown trigger="click" :options="dropdownOptions" @select="selectDropdownOption">
+          <NButton quaternary size="tiny" :focusable="false">
+            <NIcon :component="MoreOutlined" />
+          </NButton>
+        </NDropdown>
+      </NFlex>
     </template>
 
     <template #default>
-      <NSpace vertical :size="8">
+      <NFlex vertical :size="6" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
-        <NFlex :justify="'flex-start'" class="actions">
+        <NFlex vertical :size="4" class="metric-item">
-          <NButton quaternary size="tiny" :focusable="false" :disabled="!station.online" @click="openVideoPlatform">
+          <NFlex justify="end" align="center" class="metric-line">
-            <NIcon>
+            <span class="font-small">{{ deviceCount }} 台设备</span>
-              <VideoIcon />
+            <NButton quaternary size="tiny" :focusable="false" @click="openOfflineDeviceTreeModal">
-            </NIcon>
+              <NIcon :component="EllipsisOutlined" />
-            <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 justify="end" align="center" class="metric-line">
-        <NFlex vertical :size="0" class="metrics" :style="{ opacity: station.online ? '1' : '0.5' }">
+            <span class="font-small">
-          <NFlex justify="space-between" align="baseline" class="metric-item">
+              <span :style="{ color: onlineDeviceCount > 0 ? theme.successColor : '' }">在线 {{ onlineDeviceCount }} 台</span>
-            <NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openOfflineDeviceTreeModal()">设备统计</NText>
+              <NText depth="3" class="sep">·</NText>
-            <span class="metric-value">
+              <span :style="{ color: offlineDeviceCount > 0 ? theme.errorColor : '' }">离线 {{ offlineDeviceCount }} 台</span>
-              <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>
+            <NButton quaternary size="tiny" :focusable="false" style="visibility: hidden">
+              <NIcon :component="EllipsisOutlined" />
+            </NButton>
+          </NFlex>
         </NFlex>
 
-          <NFlex justify="space-between" align="baseline" class="metric-item">
+        <NFlex justify="end" align="center" class="metric-item">
-            <NText depth="3" class="metric-label" :class="[station.online ? 'clickable' : '']" @click="station.online && openDeviceAlarmTreeModal()">告警记录</NText>
+          <NFlex align="center" :size="8">
-            <span class="metric-value">
+            <span class="font-small" :style="{ color: alarmCount > 0 ? theme.warningColor : '' }">今日 {{ alarmCount }} 条告警</span>
-              <span>{{ alarmCount }}</span>
+            <NButton quaternary size="tiny" :focusable="false" @click="openDeviceAlarmTreeModal">
-              <NText depth="3" class="unit">条</NText>
+              <NIcon :component="EllipsisOutlined" />
-            </span>
+            </NButton>
+          </NFlex>
         </NFlex>
       </NFlex>
-      </NSpace>
     </template>
   </NCard>
 </template>
 
 <style scoped lang="scss">
-.clickable {
+.font-medium {
-  text-decoration: underline dashed;
+  font-size: medium;
-  cursor: pointer;
-  transition: color 0.2s ease;
-
-  &:hover {
-    color: v-bind('theme.iconColorHover');
-  }
 }
 
-.font-smaller {
+.font-small {
-  font-size: smaller;
+  font-size: small;
 }
 
-.btn-text {
+.metrics {
-  margin-left: 6px;
+  padding-top: 4px;
+}
+
+.sep {
+  margin: 0 6px;
   font-size: xx-small;
   color: v-bind('theme.textColor3');
 }
 
-.metric-label {
+.metric-line .font-small {
-  font-size: xx-small;
+  white-space: nowrap;
-}
-
-.metric-value {
-  font-size: small;
-}
-
-.unit,
-.slash {
-  margin-left: 4px;
-  font-size: xx-small;
 }
 </style>