From 97bbd47e3c237eba80adcaff49cf663d2f0d06e3 Mon Sep 17 00:00:00 2001
From: xudan <staysky25@outlook.com>
Date: Fri, 5 Dec 2025 10:16:14 +0800
Subject: [PATCH] =?UTF-8?q?feat(area-detail-card):=20=E4=B8=BA=E9=97=A8?=
 =?UTF-8?q?=E5=8C=BA=E5=9F=9F=E8=AF=A6=E6=83=85=E5=8D=A1=E7=89=87=E4=B8=AD?=
 =?UTF-8?q?=E7=9A=84=E8=BF=9E=E6=8E=A5=E7=8A=B6=E6=80=81=E5=92=8C=E9=97=A8?=
 =?UTF-8?q?=E7=8A=B6=E6=80=81=E6=B7=BB=E5=8A=A0=E5=BE=BD=E7=AB=A0=E3=80=81?=
 =?UTF-8?q?=E6=A0=87=E7=AD=BE=E5=8F=8A=E5=8A=A8=E7=94=BB=E6=A0=B7=E5=BC=8F?=
 =?UTF-8?q?=EF=BC=8C=E4=BB=A5=E6=8F=90=E5=8D=87=E7=8A=B6=E6=80=81=E4=BF=A1?=
 =?UTF-8?q?=E6=81=AF=E7=9A=84=E8=A7=86=E8=A7=89=E8=A1=A8=E7=8E=B0=E5=8A=9B?=
 =?UTF-8?q?=E5=92=8C=E4=BA=A4=E4=BA=92=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/card/area-detail-card.vue | 140 ++++++++++++++++++++++-
 1 file changed, 134 insertions(+), 6 deletions(-)

diff --git a/src/components/card/area-detail-card.vue b/src/components/card/area-detail-card.vue
index 527c6e2..a49c935 100644
--- a/src/components/card/area-detail-card.vue
+++ b/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>{{
-              isConnected === true ? $t('已连接') : isConnected === false ? $t('未连接') : $t('无')
-            }}</a-typography-text>
+            <a-flex align="center" :gap="8"  class="connection-indicator">
+              <a-badge
+                :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>
-              {{ doorStatus === 1 ? $t('开门') : doorStatus === 0 ? $t('关门') : $t('无') }}
-            </a-typography-text>
+            <a-flex align="center" :gap="8" >
+              <a-tag
+                :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>