refactor: 抽取 DeviceDetail 状态矩阵与环境卡

src/components/DeviceEnvironmentValues.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="environment-values">
+    <div v-for="(item, index) in items" :key="index">
+      <svg><use :href="item.icon" /></svg>
+      <span>{{ item.label }}</span>
+      <strong>{{ item.value }}</strong>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>

src/components/DeviceStatusMatrix.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="status-matrix">
+    <div v-for="(item, index) in items" :key="index">
+      <svg><use :href="item.icon" /></svg>
+      <span>{{ item.label }}</span>
+      <strong>{{ item.value }}</strong>
+      <i v-if="item.ok" class="ok"></i>
+    </div>
+  </div>
+</template>
+
+<script setup>
+defineProps({
+  items: {
+    type: Array,
+    default: () => []
+  }
+})
+</script>

src/views/DeviceDetailView/DeviceDetailView.vue

@@ -41,14 +41,7 @@
             <div class="detail-main-column">
               <section class="data-section">
                 <div class="data-section-title"><h2>机巢运行状态</h2><t-button variant="text" theme="primary" @click="activeTab = 'state'">全部状态</t-button></div>
-                <div class="status-matrix">
-                  <div><svg><use href="#i-door" /></svg><span>左侧舱门</span><strong>{{ doorText('left') }}</strong><i v-if="isClosed(doorValue('left'))" class="ok"></i></div>
-                  <div><svg><use href="#i-door" /></svg><span>右侧舱门</span><strong>{{ doorText('right') }}</strong><i v-if="isClosed(doorValue('right'))" class="ok"></i></div>
-                  <div><svg><use href="#i-grid" /></svg><span>左右归中</span><strong>{{ centeringText('leftRight') }}</strong><i v-if="isTight(centeringValue('leftRight'))" class="ok"></i></div>
-                  <div><svg><use href="#i-grid" /></svg><span>前后归中</span><strong>{{ centeringText('frontBack') }}</strong><i v-if="isTight(centeringValue('frontBack'))" class="ok"></i></div>
-                  <div><svg><use href="#i-alert" /></svg><span>急停状态</span><strong>{{ isTrue(rt('emergencyStop')) ? '已触发' : booleanText(rt('emergencyStop')) === '--' ? '--' : '未触发' }}</strong><i v-if="isFalse(rt('emergencyStop'))" class="ok"></i></div>
-                  <div><svg><use href="#i-refresh" /></svg><span>整机状态</span><strong>{{ record.status }}</strong><i v-if="record.online" class="ok"></i></div>
-                </div>
+                <DeviceStatusMatrix :items="statusMatrixItems" />
               </section>
               <section class="data-section">
                 <h2>充电系统</h2>
@@ -63,14 +56,7 @@
               </section>
               <section class="data-section">
                 <h2>环境监测</h2>
-                <div class="environment-values">
-                  <div><svg><use href="#i-sun" /></svg><span>舱外温度</span><strong>{{ withUnit(record.environment?.outsideTemperature, '℃') }}</strong></div>
-                  <div><svg><use href="#i-sun" /></svg><span>舱内温度</span><strong>{{ withUnit(record.environment?.insideTemperature, '℃') }}</strong></div>
-                  <div><svg><use href="#i-cloud-rain" /></svg><span>舱外湿度</span><strong>{{ withUnit(record.environment?.outsideHumidity, '%RH') }}</strong></div>
-                  <div><svg><use href="#i-cloud-rain" /></svg><span>舱内湿度</span><strong>{{ withUnit(record.environment?.insideHumidity, '%RH') }}</strong></div>
-                  <div><svg><use href="#i-wind" /></svg><span>实时风速</span><strong>{{ withUnit(record.environment?.windSpeed, ' m/s') }}</strong></div>
-                  <div><svg><use href="#i-cloud-rain" /></svg><span>降雨</span><strong>{{ booleanText(record.environment?.rain) }}</strong></div>
-                </div>
+                <DeviceEnvironmentValues :items="environmentItems" />
               </section>
             </div>
             <div class="detail-side-column">
@@ -316,6 +302,8 @@ import { useUiStore } from '@/stores/modules/uiStore'
 import { useUserStore } from '@/stores/modules/userStore'
 import request from '@/utils/http'
 import DockEditModal from '@/components/DockEditModal.vue'
+import DeviceStatusMatrix from '@/components/DeviceStatusMatrix.vue'
+import DeviceEnvironmentValues from '@/components/DeviceEnvironmentValues.vue'
 import * as urls from '@/config/urls'
 
 const route = useRoute()
@@ -383,6 +371,29 @@ const homeSetText = computed(() => {
   if (isFalse(rt('homeSet'))) return '未设置'
   return '--'
 })
+const statusMatrixItems = computed(() => {
+  const emergency = rt('emergencyStop')
+  const emergencyValue = isTrue(emergency) ? '已触发' : booleanText(emergency) === '--' ? '--' : '未触发'
+  return [
+    { icon: '#i-door', label: '左侧舱门', value: doorText('left'), ok: isClosed(doorValue('left')) },
+    { icon: '#i-door', label: '右侧舱门', value: doorText('right'), ok: isClosed(doorValue('right')) },
+    { icon: '#i-grid', label: '左右归中', value: centeringText('leftRight'), ok: isTight(centeringValue('leftRight')) },
+    { icon: '#i-grid', label: '前后归中', value: centeringText('frontBack'), ok: isTight(centeringValue('frontBack')) },
+    { icon: '#i-alert', label: '急停状态', value: emergencyValue, ok: isFalse(emergency) },
+    { icon: '#i-refresh', label: '整机状态', value: record.value?.status ?? '--', ok: !!record.value?.online }
+  ]
+})
+const environmentItems = computed(() => {
+  const env = record.value?.environment
+  return [
+    { icon: '#i-sun', label: '舱外温度', value: withUnit(env?.outsideTemperature, '℃') },
+    { icon: '#i-sun', label: '舱内温度', value: withUnit(env?.insideTemperature, '℃') },
+    { icon: '#i-cloud-rain', label: '舱外湿度', value: withUnit(env?.outsideHumidity, '%RH') },
+    { icon: '#i-cloud-rain', label: '舱内湿度', value: withUnit(env?.insideHumidity, '%RH') },
+    { icon: '#i-wind', label: '实时风速', value: withUnit(env?.windSpeed, ' m/s') },
+    { icon: '#i-cloud-rain', label: '降雨', value: booleanText(env?.rain) }
+  ]
+})
 const filteredAlarms = computed(() => {
   if (!alarmStatusFilter.value) return alarmRecords.value
   if (alarmStatusFilter.value === 'active') return alarmRecords.value.filter((item) => item.status !== 'resolved')