mirror of
https://github.com/fastapiadmin/FastapiAdmin.git
synced 2026-09-22 21:06:32 +00:00
style(ui): 调整表格高度和用户头像样式
统一将表格高度从500/600调整为450/540,优化视觉一致性 更新用户头像组件,添加在线状态指示器和显示名称
This commit is contained in:
@@ -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"
|
||||
|
||||
Reference in New Issue
Block a user