style(ui): 调整表格高度和用户头像样式

统一将表格高度从500/600调整为450/540,优化视觉一致性
更新用户头像组件,添加在线状态指示器和显示名称
This commit is contained in:
zhangtao
2026-01-06 23:10:03 +08:00
parent ca49902990
commit ccb7bebc3d
14 changed files with 54 additions and 33 deletions
@@ -32,13 +32,16 @@
<div class="navbar-actions__item">
<el-dropdown trigger="click">
<div class="user-profile">
<template v-if="userStore.basicInfo.avatar">
<el-avatar size="small" :src="userStore.basicInfo.avatar" />
</template>
<template v-else>
<el-avatar size="small" icon="UserFilled" />
</template>
<span class="user-profile__name">{{ userStore.basicInfo.username }}</span>
<div class="user-profile__avatar-wrapper">
<template v-if="userStore.basicInfo.avatar">
<el-avatar size="default" :src="userStore.basicInfo.avatar" />
</template>
<template v-else>
<el-avatar size="default" icon="UserFilled" />
</template>
<span class="user-profile__online-indicator"></span>
</div>
<span class="user-profile__name">{{ userStore.basicInfo.name }}</span>
</div>
<template #dropdown>
<el-dropdown-menu>
@@ -302,10 +305,28 @@ function logout() {
justify-content: center;
padding: 0 8px;
&__avatar-wrapper {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
&__avatar {
border-radius: 50%;
}
&__online-indicator {
position: absolute;
right: 0;
bottom: 0;
width: 8px;
height: 8px;
background-color: #50b731;
border-radius: 50%;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
}
&__name {
margin-left: 8px;
color: var(--el-text-color-regular);