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>