xuans/Scert
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化当前账号卡片：参照Smail样式将注销按钮整合至账号行同一行

Browse Source
This commit is contained in:
xuans 2026-10-16 16:55:24 +08:00
parent a8ed08aaf3
commit 4f8f6ee755
2 changed files with 58 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
frontend/src/views/Dashboard/DashboardNavigation.css
View File

@ -183,40 +183,58 @@
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
gap: 6px;
margin-left: auto;
padding: 3px 6px;
border: none;
border-radius: 6px;
background: transparent;
color: #475569;
color: #64748b;
font: inherit;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.15s ease;
white-space: nowrap;
flex-shrink: 0;
}
.navigation-logout-btn:hover:not(:disabled) {
background: #f1f5f9;
color: #0f172a;
background: #fef2f2;
color: #ef4444;
}
.navigation-logout-btn:disabled {
opacity: 0.6;
opacity: 0.5;
cursor: wait;
}
.navigation-power-icon {
width: 15px;
height: 15px;
width: 16px;
height: 16px;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
stroke-linejoin: round;
}
.navigation-logout-text {
font-size: 13px;
line-height: 1;
}
.navigation-logout-sr {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border-width: 0;
}
.navigation-error {
margin: 0 4px 8px;
color: #b42318;

47
frontend/src/views/Dashboard/DashboardNavigation.vue
View File

@ -84,27 +84,46 @@ defineEmits(["select", "settings"]);
<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">{{ currentUser.account || "未命名账号" }}</strong>
<strong class="navigation-account-name" :title="currentUser.account">{{ currentUser.account || "未命名账号" }}</strong>
<span
class="navigation-role-badge"
:class="`role-${currentUser.role}`"
>{{ roleLabels[currentUser.role] || "未知权限" }}</span>
<button
class="navigation-logout-btn navigation-logout"
type="button"
:disabled="loggingOut"
:aria-busy="loggingOut"
title="注销登录"
aria-label="注销登录"
@click="logout"
>
<svg class="navigation-power-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10" />
</svg>
<span class="navigation-logout-text">注销</span>
<span class="navigation-logout-sr">{{ loggingOut ? "退出中…" : "退出登录" }}</span>
</button>
</div>
</div>
<div v-else class="navigation-session-anon">
<button
class="navigation-logout-btn navigation-logout"
type="button"
:disabled="loggingOut"
:aria-busy="loggingOut"
title="注销登录"
aria-label="注销登录"
@click="logout"
>
<svg class="navigation-power-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10" />
</svg>
<span class="navigation-logout-text">注销</span>
<span class="navigation-logout-sr">{{ loggingOut ? "退出中…" : "退出登录" }}</span>
</button>
</div>
<p v-if="error" class="navigation-error" role="alert">{{ error }}</p>
<button
class="navigation-logout-btn navigation-logout"
type="button"
:disabled="loggingOut"
:aria-busy="loggingOut"
title="注销登录"
@click="logout"
>
<svg class="navigation-power-icon" viewBox="0 0 24 24" fill="none" aria-hidden="true">
<path d="M18.36 6.64a9 9 0 1 1-12.73 0M12 2v10" />
</svg>
<span>{{ loggingOut ? "退出中…" : "退出登录" }}</span>
</button>
<p class="navigation-footer">SSL 证书管理</p>
</div>
</nav>