fix(navigation): 当前账号卡片与导航菜单等宽展示且避免用户名截断

This commit is contained in:
xuans 2026-10-17 01:36:04 +08:00
parent 73f489c165
commit 6873be9c46
2 changed files with 27 additions and 11 deletions

View File

@ -120,15 +120,25 @@
.navigation-account-card {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0 4px 10px;
padding: 10px 12px;
gap: 8px;
width: 100%;
box-sizing: border-box;
margin: 0 0 10px;
padding: 12px;
border: 1px solid #e2e8f2;
border-radius: 12px;
border-radius: 10px;
background: #f8faff;
color: #1e293b;
}
.navigation-account-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
}
.navigation-account-label {
color: #64748b;
font-size: 12px;
@ -139,7 +149,9 @@
.navigation-account-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
width: 100%;
min-width: 0;
}
@ -150,6 +162,8 @@
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
flex: 1 1 auto;
min-width: 0;
}
.navigation-role-badge {

View File

@ -82,13 +82,8 @@ defineEmits(["select", "settings"]);
</button>
<div class="navigation-session">
<div v-if="currentUser" class="navigation-account-card" aria-label="当前登录账号">
<div class="navigation-account-label">当前账号</div>
<div class="navigation-account-row">
<strong class="navigation-account-name" :title="currentUser.account">{{ currentUser.account || "未命名账号" }}</strong>
<span
class="navigation-role-badge"
:class="`role-${currentUser.role}`"
>{{ roleLabels[currentUser.role] || "未知权限" }}</span>
<div class="navigation-account-header">
<div class="navigation-account-label">当前账号</div>
<button
class="navigation-logout-btn navigation-logout"
type="button"
@ -105,6 +100,13 @@ defineEmits(["select", "settings"]);
<span class="navigation-logout-sr">{{ loggingOut ? "退出中…" : "退出登录" }}</span>
</button>
</div>
<div class="navigation-account-row">
<strong class="navigation-account-name" :title="currentUser.account">{{ currentUser.account || "未命名账号" }}</strong>
<span
class="navigation-role-badge"
:class="`role-${currentUser.role}`"
>{{ roleLabels[currentUser.role] || "未知权限" }}</span>
</div>
</div>
<div v-else class="navigation-session-anon">
<button