refactor: 抽取 AlarmItem 告警列表项组件

src/components/AlarmItem.vue

@@ -0,0 +1,24 @@
+<template>
+  <article class="alarm-item" :class="severityClass">
+    <span class="alarm-severity">{{ severity }}</span>
+    <div>
+      <strong>{{ title }}</strong>
+      <small>{{ device }} · {{ time }}</small>
+    </div>
+    <em class="status" :class="statusClass">{{ status }}</em>
+    <t-button class="alarm-handle" variant="outline" size="small" @click="$emit('handle')">处理</t-button>
+  </article>
+</template>
+
+<script setup>
+defineProps({
+  severity: { type: String, required: true },
+  severityClass: { type: String, required: true },
+  title: { type: String, required: true },
+  device: { type: String, required: true },
+  time: { type: String, required: true },
+  status: { type: String, required: true },
+  statusClass: { type: String, required: true }
+})
+defineEmits(['handle'])
+</script>

src/views/AlarmsView/AlarmsView.vue

@@ -18,15 +18,18 @@
     <div class="business-workspace alarm-workspace">
       <div class="alarm-layout" style="height:100%">
         <div class="alarm-list">
-          <article v-for="a in alarms" :key="a.id" class="alarm-item" :class="a.severityClass">
-            <span class="alarm-severity">{{ a.severity }}</span>
-            <div>
-              <strong>{{ a.title }}</strong>
-              <small>{{ a.device }} · {{ a.time }}</small>
-            </div>
-            <em class="status" :class="a.statusClass">{{ a.status }}</em>
-            <t-button class="alarm-handle" variant="outline" size="small" @click="handle(a)">处理</t-button>
-          </article>
+          <AlarmItem
+            v-for="a in alarms"
+            :key="a.id"
+            :severity="a.severity"
+            :severity-class="a.severityClass"
+            :title="a.title"
+            :device="a.device"
+            :time="a.time"
+            :status="a.status"
+            :status-class="a.statusClass"
+            @handle="handle(a)"
+          />
           <div v-if="!alarms.length" class="table-empty">暂无告警</div>
         </div>
 
@@ -54,6 +57,7 @@
 import { computed, onMounted, ref } from 'vue'
 import { useUiStore } from '@/stores/modules/uiStore'
 import request from '@/utils/http'
+import AlarmItem from '@/components/AlarmItem.vue'
 import * as urls from '@/config/urls'
 
 const ui = useUiStore()