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);
@@ -167,8 +167,8 @@
:data="pageTableData"
class="data-table__content"
highlight-current-row
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -212,8 +212,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -147,8 +147,8 @@
:data="tableList"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleTableSelectionChange"
@@ -105,8 +105,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -154,8 +154,8 @@
:data="fileList"
row-key="file_url"
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -151,8 +151,8 @@
:data="pageTableData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
class="data-table__content"
height="600"
max-height="600"
height="540"
max-height="540"
border
stripe
@selection-change="handleSelectionChange"
@@ -170,8 +170,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -135,8 +135,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -145,8 +145,8 @@
:data="pageTableData"
:tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
class="data-table__content"
height="600"
max-height="600"
height="540"
max-height="540"
border
stripe
@selection-change="handleSelectionChange"
@@ -189,8 +189,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -156,8 +156,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -174,8 +174,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"
@@ -166,8 +166,8 @@
:data="pageTableData"
highlight-current-row
class="data-table__content"
height="500"
max-height="500"
height="450"
max-height="450"
border
stripe
@selection-change="handleSelectionChange"