feat(area-detail-card): 为门区域详情卡片添加设备名称显示，通过查询设备映射列表并监听区域变化实现，以提供更直观的设备信息

src/components/card/area-detail-card.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
+import { type DeviceMappingDTO, queryDeviceMappingByType } from '@api/device';
 import { type MapAreaInfo, MapAreaType, type MapPen, MapPointType } from '@api/map';
 import { DOOR_AREA_TYPE } from '@api/map/door-area';
 import type { EditorService } from '@core/editor.service';
 import sTheme from '@core/theme.service';
-import { computed, inject, type InjectionKey, type ShallowRef } from 'vue';
+import { computed, inject, type InjectionKey, ref, type ShallowRef,watch } from 'vue';
 
 type Props = {
   token: InjectionKey<ShallowRef<EditorService>>;
@@ -73,6 +74,38 @@ const ruleText = computed(() => {
   return '';
 });
 
+// 设备映射相关状态
+const deviceMappings = ref<DeviceMappingDTO[]>([]);
+
+// 根据设备ID获取设备名称
+const getDeviceName = computed(() => {
+  if (!area.value?.doorDeviceId || !deviceMappings.value.length) return '';
+
+  const device = deviceMappings.value.find(d => d.id === area.value?.doorDeviceId);
+  return device?.deviceUniqueName || '';
+});
+
+// 获取设备映射数据
+const fetchDeviceMappings = async () => {
+  if (!area.value || (area.value.type as any) !== DOOR_AREA_TYPE) return;
+
+  try {
+    // 根据门类型获取对应的设备映射
+    const deviceType = '1'; // 门的类型是"1"
+    deviceMappings.value = await queryDeviceMappingByType(deviceType);
+  } catch (error) {
+    console.error('获取设备映射失败:', error);
+    deviceMappings.value = [];
+  }
+};
+
+// 监听区域变化，获取设备映射
+watch(area, (newArea) => {
+  if (newArea && (newArea.type as any) === DOOR_AREA_TYPE && newArea.doorDeviceId) {
+    fetchDeviceMappings();
+  }
+}, { immediate: true });
+
 // 无日志版：不输出调试信息
 </script>
 
@@ -119,6 +152,12 @@ const ruleText = computed(() => {
             <a-typography-text>{{ area.doorDeviceId || $t('无') }}</a-typography-text>
           </a-flex>
         </a-list-item>
+        <a-list-item v-if="area && (area.type as any) === DOOR_AREA_TYPE && getDeviceName">
+          <a-flex :gap="8" vertical>
+            <a-typography-text type="secondary">{{ $t('设备名称') }}</a-typography-text>
+            <a-typography-text>{{ getDeviceName }}</a-typography-text>
+          </a-flex>
+        </a-list-item>
         <a-list-item v-if="area && (area.type as any) === DOOR_AREA_TYPE">
           <a-flex :gap="8" vertical>
             <a-typography-text type="secondary">{{ $t('连接状态') }}</a-typography-text>