fix(area-detail-card): 添加独立计算属性 doorStatus 和 isConnected，修复因深层响应式丢失导致的区域连接状态和门状态显示不更新问题

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

@@ -20,17 +20,36 @@ const areasTick = computed<string>(() =>
     .join('|'),
 );
 
+// 优化 pen 计算属性，确保响应式更新
 const pen = computed<MapPen | undefined>(() => {
   // 引用 areasTick 以建立依赖关系
   void areasTick.value;
   return editor.value.getPenById(props.current);
 });
+
 const area = computed<MapAreaInfo | null>(() => {
   const v = pen.value?.area;
   if (!v?.type) return null;
   return v;
 });
 
+// 关键修复：创建直接的状态计算，绕过深层响应式问题
+const doorStatus = computed(() => {
+  // 强制依赖 areasTick 以确保响应式更新
+  void areasTick.value;
+
+  const pen = editor.value.getPenById(props.current);
+  return pen?.area?.doorStatus;
+});
+
+const isConnected = computed(() => {
+  // 强制依赖 areasTick 以确保响应式更新
+  void areasTick.value;
+
+  const pen = editor.value.getPenById(props.current);
+  return pen?.area?.isConnected;
+});
+
 const icon = computed<string>(() => `area${area.value?.type}-detail`);
 
 // 区域类型显示：兼容门区域（不在原始枚举中）
@@ -162,7 +181,7 @@ watch(area, (newArea) => {
           <a-flex :gap="8" vertical>
             <a-typography-text type="secondary">{{ $t('连接状态') }}</a-typography-text>
             <a-typography-text>{{
-              area.isConnected === true ? $t('已连接') : area.isConnected === false ? $t('未连接') : $t('无')
+              isConnected === true ? $t('已连接') : isConnected === false ? $t('未连接') : $t('无')
             }}</a-typography-text>
           </a-flex>
         </a-list-item>
@@ -170,7 +189,7 @@ watch(area, (newArea) => {
           <a-flex :gap="8" vertical>
             <a-typography-text type="secondary">{{ $t('门状态') }}</a-typography-text>
             <a-typography-text>
-              {{ area.doorStatus === 1 ? $t('开门') : area.doorStatus === 0 ? $t('关门') : $t('无') }}
+              {{ doorStatus === 1 ? $t('开门') : doorStatus === 0 ? $t('关门') : $t('无') }}
             </a-typography-text>
           </a-flex>
         </a-list-item>