From 4f8f6ee7557ab8649733812393ba44387b9451af Mon Sep 17 00:00:00 2001
From: xuans <likb_blue@163.com>
Date: Fri, 16 Oct 2026 16:55:24 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E5=BD=93=E5=89=8D=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E5=8D=A1=E7=89=87=EF=BC=9A=E5=8F=82=E7=85=A7Smail?=
 =?UTF-8?q?=E6=A0=B7=E5=BC=8F=E5=B0=86=E6=B3=A8=E9=94=80=E6=8C=89=E9=92=AE?=
 =?UTF-8?q?=E6=95=B4=E5=90=88=E8=87=B3=E8=B4=A6=E5=8F=B7=E8=A1=8C=E5=90=8C?=
 =?UTF-8?q?=E4=B8=80=E8=A1=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/Dashboard/DashboardNavigation.css   | 32 ++++++++++---
 .../views/Dashboard/DashboardNavigation.vue   | 47 +++++++++++++------
 2 files changed, 58 insertions(+), 21 deletions(-)

diff --git a/frontend/src/views/Dashboard/DashboardNavigation.css b/frontend/src/views/Dashboard/DashboardNavigation.css
index 7080481..f1371dc 100644
--- a/frontend/src/views/Dashboard/DashboardNavigation.css
+++ b/frontend/src/views/Dashboard/DashboardNavigation.css
@@ -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;
diff --git a/frontend/src/views/Dashboard/DashboardNavigation.vue b/frontend/src/views/Dashboard/DashboardNavigation.vue
index 9f5985a..602e387 100644
--- a/frontend/src/views/Dashboard/DashboardNavigation.vue
+++ b/frontend/src/views/Dashboard/DashboardNavigation.vue
@@ -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>