From 941fef8ea624826e4f9e0145b27d0863c12fd516 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Fri, 5 Dec 2025 10:01:45 +0800
Subject: [PATCH] =?UTF-8?q?fix(area-detail-card):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E8=AE=A1=E7=AE=97=E5=B1=9E=E6=80=A7=20doorSt?=
 =?UTF-8?q?atus=20=E5=92=8C=20isConnected=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E5=9B=A0=E6=B7=B1=E5=B1=82=E5=93=8D=E5=BA=94=E5=BC=8F=E4=B8=A2?=
 =?UTF-8?q?=E5=A4=B1=E5=AF=BC=E8=87=B4=E7=9A=84=E5=8C=BA=E5=9F=9F=E8=BF=9E?=
 =?UTF-8?q?=E6=8E=A5=E7=8A=B6=E6=80=81=E5=92=8C=E9=97=A8=E7=8A=B6=E6=80=81?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA=E4=B8=8D=E6=9B=B4=E6=96=B0=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/area-detail-card.vue | 23 +++++++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/src/components/card/area-detail-card.vue b/src/components/card/area-detail-card.vue
index 4ed8c71..527c6e2 100644
--- a/src/components/card/area-detail-card.vue
+++ b/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>