xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
xudan 2025-12-05 10:16:14 +08:00
parent 941fef8ea6
commit 97bbd47e3c
1 changed files with 134 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

138
src/components/card/area-detail-card.vue
View File

@ -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>
<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-typography-text>
</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>