From e569571462b957305d3b0d2e751ec98dd4fa1076 Mon Sep 17 00:00:00 2001
From: daxiong <daxiong@qq.com>
Date: Sun, 19 Apr 2026 21:44:17 +0800
Subject: [PATCH] feat

---
 .../ops/pages/monitor/environment/index.vue   | 258 ++++++++++--------
 1 file changed, 142 insertions(+), 116 deletions(-)

diff --git a/src/views/ops/pages/monitor/environment/index.vue b/src/views/ops/pages/monitor/environment/index.vue
index 892fff9..9af38de 100644
--- a/src/views/ops/pages/monitor/environment/index.vue
+++ b/src/views/ops/pages/monitor/environment/index.vue
@@ -16,9 +16,7 @@
             <span v-if="r.code" class="text-muted room-option-code">{{ r.code }}</span>
           </a-option>
         </a-select>
-        <a-button type="outline" :disabled="!selectedRoomId" :loading="loading" @click="reloadRoomData">
-          刷新
-        </a-button>
+        <a-button type="outline" :disabled="!selectedRoomId" :loading="loading" @click="reloadRoomData">刷新</a-button>
       </div>
       <div v-if="statsPartialHint" class="toolbar-meta text-muted">{{ statsPartialHint }}</div>
     </div>
@@ -88,60 +86,76 @@
 
       <!-- 第二行：设备卡片 -->
       <div v-if="selectedRoomId && deviceCardsHint" class="device-cards-hint text-muted">{{ deviceCardsHint }}</div>
-      <a-row v-if="selectedRoomId" :gutter="16" class="device-cards-row">
-        <a-col v-for="d in devicesForCards" :key="d.id" :xs="24" :sm="12" :md="8" :lg="6">
-          <a-card class="device-card" :bordered="false">
-            <div class="device-card-head">
-              <div class="device-card-title">{{ d.name }}</div>
-              <a-tag :color="getStatusColor(d.status)" size="small">{{ formatStatusText(d.status) }}</a-tag>
-            </div>
-            <div class="device-card-meta">
-              <span>{{ DEVICE_CATEGORY_MAP[d.device_category] || d.device_category }}</span>
-              <span class="text-muted"> · {{ d.type || '-' }}</span>
-            </div>
-            <div class="device-card-meta text-muted">
-              <a-tag :color="d.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
-                {{ d.collect_method === 'snmp' ? 'SNMP' : 'API' }}
-              </a-tag>
-              <span class="ml-8">{{ formatDateTime(d.last_check_time) }}</span>
-            </div>
-            <div v-if="d.collect_last_result" class="device-card-result text-muted" :title="d.collect_last_result">
-              {{ truncate(d.collect_last_result, 80) }}
-            </div>
-            <a-divider :margin="12" />
-            <div class="device-metrics">
-              <a-spin :loading="metricsLoading && isMetricsTarget(d)" :size="16">
-                <template v-if="metricsForDevice(d).length">
-                  <div
-                    v-for="(m, idx) in metricsForDevice(d).slice(0, 6)"
-                    :key="`${m.metric_name}-${idx}`"
-                    class="metric-line"
+      <div v-if="selectedRoomId" class="device-cards-row">
+        <div v-for="d in devicesForCards" :key="d.id" class="device-card-wrapper">
+          <a-card class="device-card" :bordered="false" hoverable>
+            <template #title>
+              <div class="device-card-header">
+                <span class="device-card-title">{{ d.name }}</span>
+                <a-tag :color="getStatusColor(d.status)" size="small">{{ formatStatusText(d.status) }}</a-tag>
+              </div>
+            </template>
+            <div class="device-card-body">
+              <a-descriptions
+                :column="1"
+                size="small"
+                :value-style="{ width: '100%', color: 'var(--color-text-2)' }"
+                :label-style="{ color: 'var(--color-text-3)', fontWeight: 500 }"
+              >
+                <a-descriptions-item label="分类">{{ DEVICE_CATEGORY_MAP[d.device_category] || d.device_category }}</a-descriptions-item>
+                <a-descriptions-item label="型号">{{ d.type || '-' }}</a-descriptions-item>
+                <a-descriptions-item label="采集">
+                  <a-tag :color="d.collect_method === 'snmp' ? 'purple' : 'arcoblue'" size="small">
+                    {{ d.collect_method === 'snmp' ? 'SNMP' : 'API' }}
+                  </a-tag>
+                </a-descriptions-item>
+                <a-descriptions-item label="最近检查">{{ formatDateTime(d.last_check_time) }}</a-descriptions-item>
+              </a-descriptions>
+              <div v-if="d.collect_last_result" class="device-card-result" :title="d.collect_last_result">
+                <a-typography-text :ellipsis="{ rows: 2, showTooltip: true }" class="text-muted">
+                  {{ d.collect_last_result }}
+                </a-typography-text>
+              </div>
+              <a-divider :margin="12" />
+              <div class="device-metrics">
+                <a-spin :loading="metricsLoading && isMetricsTarget(d)" :size="16">
+                  <a-descriptions
+                    bordered
+                    :column="2"
+                    size="small"
+                    :label-style="{ color: 'var(--color-text-3)' }"
+                    :value-style="{ color: 'var(--color-text-1)', fontWeight: 600, fontFamily: 'SF Mono, Menlo, Monaco, monospace' }"
                   >
-                    <span class="metric-name">{{ m.metric_name }}</span>
-                    <span class="metric-val"
-                      >{{ m.metric_value }}{{ m.metric_unit ? ` ${m.metric_unit}` : '' }}</span
-                    >
-                  </div>
-                </template>
-                <span v-else-if="!isMetricsTarget(d)" class="text-muted">指标见前 {{ METRICS_CARD_LIMIT }} 台</span>
-                <span v-else class="text-muted">暂无指标</span>
-              </a-spin>
+                    <template v-if="metricsForDevice(d).length">
+                      <a-descriptions-item
+                        v-for="(m, idx) in metricsForDevice(d)"
+                        :key="`${m.metric_name}-${idx}`"
+                        :label="m.metric_name"
+                        :span="1"
+                      >
+                        {{ m.metric_value }}
+                        <span v-if="m.metric_unit" class="metric-unit">({{ m.metric_unit }})</span>
+                      </a-descriptions-item>
+                    </template>
+                    <template v-else-if="!isMetricsTarget(d)">
+                      <a-descriptions-item :span="2" class="text-muted">指标见前 {{ METRICS_CARD_LIMIT }} 台</a-descriptions-item>
+                    </template>
+                    <template v-else>
+                      <a-descriptions-item :span="2" class="text-muted">暂无指标</a-descriptions-item>
+                    </template>
+                  </a-descriptions>
+                </a-spin>
+              </div>
             </div>
           </a-card>
-        </a-col>
-      </a-row>
+        </div>
+      </div>
       <a-empty v-if="selectedRoomId && !devicesAll.length && !loading" description="该机房下暂无设备" />
 
       <!-- 设备列表 -->
       <a-card v-if="selectedRoomId" class="table-card" title="设备列表" :bordered="false">
         <template #extra>
-          <a-select
-            v-model="selectedCategory"
-            placeholder="全部分类"
-            allow-clear
-            style="width: 160px"
-            :options="DEVICE_CATEGORY_OPTIONS"
-          />
+          <a-select v-model="selectedCategory" placeholder="全部分类" allow-clear style="width: 160px" :options="DEVICE_CATEGORY_OPTIONS" />
         </template>
         <a-table
           :data="tableRowsPaged"
@@ -176,16 +190,15 @@
             </a-tag>
           </template>
           <template #collect_last_result="{ record }">
-            <a-typography-text :ellipsis="{ rows: 2, showTooltip: true }" style="max-width: 240px">
+            <a-typography-text :ellipsis="{ rows: 2, showTooltip: true }">
               {{ record.collect_last_result || '-' }}
             </a-typography-text>
           </template>
           <template #response_time="{ record }">
-            {{
-              record.response_time != null && record.response_time !== undefined
-                ? Number(record.response_time).toFixed(1)
-                : '-'
-            }}
+            {{ record.response_time != null && record.response_time !== undefined ? Number(record.response_time).toFixed(1) : '-' }}
+          </template>
+          <template #last_check_time="{ record }">
+            {{ formatDateTime(record.last_check_time) }}
           </template>
           <template #continuous_errors="{ record }">
             {{ record.continuous_errors != null ? record.continuous_errors : '-' }}
@@ -199,12 +212,7 @@
 <script lang="ts" setup>
 import { computed, onMounted, ref, watch } from 'vue'
 import { Message } from '@arco-design/web-vue'
-import {
-  IconBuildingCommunity,
-  IconCircleCheck,
-  IconActivity,
-  IconAlertCircle,
-} from '@tabler/icons-vue'
+import { IconBuildingCommunity, IconCircleCheck, IconActivity, IconAlertCircle } from '@tabler/icons-vue'
 import type { TableColumnData } from '@arco-design/web-vue/es/table/interface'
 import { fetchRoomOptions, type RoomOptionItem } from '@/api/ops/room'
 import {
@@ -241,15 +249,15 @@ const tablePagination = ref({
 })
 
 const columns: TableColumnData[] = [
-  { title: '名称', dataIndex: 'name', width: 180, ellipsis: true, tooltip: true },
-  { title: '设备分类', dataIndex: 'device_category', slotName: 'device_category', width: 100 },
-  { title: '类型/型号', dataIndex: 'type', width: 120, ellipsis: true, tooltip: true },
-  { title: '采集方式', dataIndex: 'collect_method', slotName: 'collect_method', width: 96 },
-  { title: '启用 / 周期采集', dataIndex: 'enabled', slotName: 'enabled_collect', width: 160 },
-  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100, align: 'center' },
-  { title: '最近检查', dataIndex: 'last_check_time', width: 168, ellipsis: true, tooltip: true },
-  { title: '响应(ms)', dataIndex: 'response_time', slotName: 'response_time', width: 88 },
-  { title: '连续错误', dataIndex: 'continuous_errors', slotName: 'continuous_errors', width: 88 },
+  { title: '名称', dataIndex: 'name', minWidth: 180, ellipsis: true, tooltip: true },
+  { title: '设备分类', dataIndex: 'device_category', slotName: 'device_category', minWidth: 100 },
+  { title: '类型/型号', dataIndex: 'type', minWidth: 120, ellipsis: true, tooltip: true },
+  { title: '采集方式', dataIndex: 'collect_method', slotName: 'collect_method', minWidth: 96 },
+  { title: '启用 / 周期采集', dataIndex: 'enabled', slotName: 'enabled_collect', minWidth: 160 },
+  { title: '状态', dataIndex: 'status', slotName: 'status', minWidth: 100, align: 'center' },
+  { title: '最近检查', dataIndex: 'last_check_time', slotName: 'last_check_time', minWidth: 250, ellipsis: true, tooltip: true },
+  { title: '响应(ms)', dataIndex: 'response_time', slotName: 'response_time', minWidth: 88 },
+  { title: '连续错误', dataIndex: 'continuous_errors', slotName: 'continuous_errors', minWidth: 88 },
   { title: '采集摘要', dataIndex: 'collect_last_result', slotName: 'collect_last_result', minWidth: 200 },
 ]
 
@@ -263,9 +271,7 @@ const statsPartialHint = computed(() => {
 
 const summaryOnline = computed(() => devicesAll.value.filter((d) => d.status === 'online').length)
 const summaryCollectOn = computed(() => devicesAll.value.filter((d) => d.enabled && d.collect_on).length)
-const summaryOfflineUnknown = computed(
-  () => devicesAll.value.filter((d) => d.status !== 'online').length
-)
+const summaryOfflineUnknown = computed(() => devicesAll.value.filter((d) => d.status !== 'online').length)
 
 const devicesForCards = computed(() => devicesAll.value)
 
@@ -422,10 +428,7 @@ async function loadMetricsForFirstDevices() {
         batch.map(async (d) => {
           try {
             const res = await fetchLatestMetrics(d.service_identity)
-            const metrics =
-              res?.code === 0 && res.details?.metrics && Array.isArray(res.details.metrics)
-                ? res.details.metrics
-                : []
+            const metrics = res?.code === 0 && res.details?.metrics && Array.isArray(res.details.metrics) ? res.details.metrics : []
             metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: metrics }
           } catch {
             metricsByIdentity.value = { ...metricsByIdentity.value, [d.service_identity]: [] }
@@ -519,9 +522,36 @@ export default {
 }
 
 .device-cards-row {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 16px;
   margin-bottom: 16px;
 }
 
+.device-card-wrapper {
+  flex: 1 1 calc(25% - 12px);
+  min-width: 280px;
+  max-width: 100%;
+}
+
+@media (max-width: 1200px) {
+  .device-card-wrapper {
+    flex: 1 1 calc(33.33% - 11px);
+  }
+}
+
+@media (max-width: 992px) {
+  .device-card-wrapper {
+    flex: 1 1 calc(50% - 8px);
+  }
+}
+
+@media (max-width: 768px) {
+  .device-card-wrapper {
+    flex: 1 1 100%;
+  }
+}
+
 .stats-card {
   height: 100%;
 
@@ -592,71 +622,67 @@ export default {
 
 .device-card {
   height: 100%;
-  margin-bottom: 0;
+  border-radius: 12px;
+  background: var(--color-bg-2);
+  box-shadow:
+    0 1px 3px rgba(0, 0, 0, 0.06),
+    0 1px 2px rgba(0, 0, 0, 0.04);
+  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+
+  :deep(.arco-card-header) {
+    padding: 16px 16px 12px;
+    border-bottom: 1px solid var(--color-border-1);
+  }
 
   :deep(.arco-card-body) {
-    padding: 14px;
+    padding: 14px 16px 16px;
+  }
+
+  &:hover {
+    box-shadow:
+      0 4px 12px rgba(0, 0, 0, 0.08),
+      0 2px 4px rgba(0, 0, 0, 0.06);
+    transform: translateY(-2px);
   }
 }
 
-.device-card-head {
+.device-card-header {
   display: flex;
-  align-items: flex-start;
+  align-items: center;
   justify-content: space-between;
   gap: 8px;
-  margin-bottom: 8px;
 }
 
 .device-card-title {
-  font-size: 14px;
-  font-weight: 500;
+  font-size: 15px;
+  font-weight: 600;
   color: var(--color-text-1);
-  line-height: 1.4;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   flex: 1;
   min-width: 0;
 }
 
-.device-card-meta {
-  font-size: 12px;
-  margin-bottom: 6px;
-}
-
-.ml-8 {
-  margin-left: 8px;
+.device-card-body {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
 }
 
 .device-card-result {
   font-size: 12px;
-  line-height: 1.4;
-  word-break: break-all;
+  line-height: 1.5;
+  padding: 10px 12px;
+  background: var(--color-fill-1);
+  border-radius: 8px;
+  border-left: 3px solid var(--color-border-2);
 }
 
 .device-metrics {
   min-height: 48px;
 }
 
-.metric-line {
-  display: flex;
-  justify-content: space-between;
-  gap: 8px;
-  font-size: 12px;
-  margin-bottom: 4px;
-}
-
-.metric-name {
-  color: var(--color-text-3);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  max-width: 55%;
-}
-
-.metric-val {
-  color: var(--color-text-1);
-  font-weight: 500;
-  flex-shrink: 0;
-}
-
 .table-card {
   margin-top: 8px;