feat(area-detail-card): 为门区域详情卡片中的连接状态和门状态添加徽章、标签及动画样式，以提升状态信息的视觉表现力和交互体验

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

@@ -180,17 +180,46 @@ watch(area, (newArea) => {
         <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>
-            <a-typography-text>{{
+            <a-flex align="center" :gap="8"  class="connection-indicator">
-              isConnected === true ? $t('已连接') : isConnected === false ? $t('未连接') : $t('无')
+              <a-badge
-            }}</a-typography-text>
+                :status="isConnected === true ? 'success' : isConnected === false ? 'error' : 'default'"
+                :text="isConnected === true ? $t('已连接') : isConnected === false ? $t('未连接') : $t('无')"
+              />
+              <a-tag
+                v-if="isConnected !== null"
+                :color="isConnected === true ? '#00b42a' : '#f53f3f'"
+                :bordered="false"
+                size="small"
+                class="status-text"
+              >
+                <span style="display: inline-flex; align-items: center; gap: 4px;">
+                  {{ isConnected === true ? $t('在线') : $t('离线') }}
+                </span>
+              </a-tag>
+            </a-flex>
           </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>
-            <a-typography-text>
+            <a-flex align="center" :gap="8" >
-              {{ doorStatus === 1 ? $t('开门') : doorStatus === 0 ? $t('关门') : $t('无') }}
+              <a-tag
-            </a-typography-text>
+                :color="doorStatus === 1 ? '#00b42a' : doorStatus === 0 ? '#ff7d00' : '#86909c'"
+                :bordered="false"
+                class="status-text door-status-tag"
+                :style="{
+                  padding: '6px 14px',
+                  border: doorStatus === 1 ? '1px solid #c6f6d5' : doorStatus === 0 
+                  ? '1px solid #ffe58f' : '1px solid #e5e6eb',
+                  background: doorStatus === 1 ? 'linear-gradient(135deg, #f0f9ff 0%, #e6f7ff 100%)' :
+                             doorStatus === 0 ? 'linear-gradient(135deg, #fff7e6 0%, #fef0e6 100%)' :
+                             'linear-gradient(135deg, #f5f5f5 0%, #e5e6eb 100%)',
+                  fontWeight: '500'
+                }"
+              >
+                {{ doorStatus === 1 ? $t('开门') : doorStatus === 0 ? $t('关门') : $t('无') }}
+              </a-tag>
+            </a-flex>
           </a-flex>
         </a-list-item>
         <a-list-item v-if="area && (area.type as any) === DOOR_AREA_TYPE">
@@ -210,3 +239,102 @@ watch(area, (newArea) => {
     <a-empty v-else :image="sTheme.empty" />
   </a-card>
 </template>
+
+<style scoped>
+/* 在线状态脉冲动画 */
+@keyframes pulse {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/* 门状态切换动画 */
+.a-tag {
+  transition: all 0.3s ease;
+}
+
+.a-tag:hover {
+  transform: translateY(-1px);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+/* 优化列表项间距 */
+.arco-list-item {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border-2);
+}
+
+.arco-list-item:last-child {
+  border-bottom: none;
+}
+
+/* 连接状态指示器动画 */
+.connection-indicator {
+  position: relative;
+}
+
+.connection-indicator::before {
+  content: '';
+  position: absolute;
+  inset: -3px;
+  border-radius: 50%;
+  background: inherit;
+  opacity: 0.3;
+  animation: ripple 1.5s ease-out infinite;
+}
+
+@keyframes ripple {
+  0% {
+    transform: scale(1);
+    opacity: 0.3;
+  }
+  100% {
+    transform: scale(1.5);
+    opacity: 0;
+  }
+}
+
+/* 门状态优化 */
+.door-status-tag {
+  position: relative;
+  overflow: hidden;
+}
+
+.door-status-tag::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+    90deg,
+    transparent,
+    rgba(255, 255, 255, 0.3),
+    transparent
+  );
+  transition: left 0.6s ease;
+}
+
+.door-status-tag:hover::after {
+  left: 100%;
+}
+
+/* 状态文本优化 */
+.status-text {
+  font-size: 13px;
+  font-weight: 500;
+  letter-spacing: 0.5px;
+}
+
+/* 徽章阴影效果 */
+.arco-badge-status-dot {
+  box-shadow: 0 0 0 2px rgba(var(--primary-6), 0.2);
+}
+</style>