diff --git a/frontend/src/views/Dashboard/DashboardNavigation.css b/frontend/src/views/Dashboard/DashboardNavigation.css
index 1620c15..7080481 100644
--- a/frontend/src/views/Dashboard/DashboardNavigation.css
+++ b/frontend/src/views/Dashboard/DashboardNavigation.css
@@ -114,31 +114,107 @@
 .navigation-session {
   flex-shrink: 0;
   margin-top: auto;
-  padding-top: 22px;
+  padding-top: 18px;
 }
 
-.navigation-account {
-  display: grid;
-  gap: 5px;
+.navigation-account-card {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
   margin: 0 4px 10px;
-  padding: 12px 14px;
+  padding: 10px 12px;
   border: 1px solid #e2e8f2;
   border-radius: 12px;
   background: #f8faff;
-  color: #263752;
-  overflow-wrap: anywhere;
+  color: #1e293b;
 }
 
-.navigation-account-label,
-.navigation-account-role {
-  color: #7a879d;
+.navigation-account-label {
+  color: #64748b;
+  font-size: 12px;
+  font-weight: 500;
+  line-height: 1.4;
+}
+
+.navigation-account-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.navigation-account-name {
+  font-size: 14px;
+  font-weight: 700;
+  color: #0f172a;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.navigation-role-badge {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  padding: 2px 8px;
+  border-radius: 6px;
   font-size: 11px;
+  font-weight: 600;
   line-height: 1.4;
+  white-space: nowrap;
+  background: #fef2f2;
+  color: #ef4444;
+  border: 1px solid #fee2e2;
 }
 
-.navigation-account strong {
+.navigation-role-badge.role-admin {
+  background: #eff6ff;
+  color: #3b82f6;
+  border-color: #dbeafe;
+}
+
+.navigation-role-badge.role-user {
+  background: #f1f5f9;
+  color: #64748b;
+  border-color: #e2e8f0;
+}
+
+.navigation-logout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  margin-left: auto;
+  padding: 3px 6px;
+  border: none;
+  border-radius: 6px;
+  background: transparent;
+  color: #475569;
+  font: inherit;
   font-size: 13px;
-  line-height: 1.4;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  white-space: nowrap;
+}
+
+.navigation-logout-btn:hover:not(:disabled) {
+  background: #f1f5f9;
+  color: #0f172a;
+}
+
+.navigation-logout-btn:disabled {
+  opacity: 0.6;
+  cursor: wait;
+}
+
+.navigation-power-icon {
+  width: 15px;
+  height: 15px;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
 }
 
 .navigation-error {
@@ -149,17 +225,8 @@
   overflow-wrap: anywhere;
 }
 
-.navigation-logout {
-  margin-bottom: 6px;
-}
-
-.navigation-logout:disabled {
-  opacity: 0.6;
-  cursor: wait;
-}
-
 .navigation-footer {
-  margin: 8px 12px 0;
+  margin: 4px 12px 0;
   padding: 0 4px;
 }
 
diff --git a/frontend/src/views/Dashboard/DashboardNavigation.vue b/frontend/src/views/Dashboard/DashboardNavigation.vue
index 3b957c0..9f5985a 100644
--- a/frontend/src/views/Dashboard/DashboardNavigation.vue
+++ b/frontend/src/views/Dashboard/DashboardNavigation.vue
@@ -81,23 +81,27 @@ defineEmits(["select", "settings"]);
       <span>系统设置</span>
     </button>
     <div class="navigation-session">
-      <div v-if="currentUser" class="navigation-account" aria-label="当前登录账号">
-        <span class="navigation-account-label">当前登录账号</span>
-        <strong>{{ currentUser.account || "未命名账号" }}</strong>
-        <span class="navigation-account-role">
-          权限：{{ roleLabels[currentUser.role] || "未知权限" }}
-        </span>
+      <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>
+          <span
+            class="navigation-role-badge"
+            :class="`role-${currentUser.role}`"
+          >{{ roleLabels[currentUser.role] || "未知权限" }}</span>
+        </div>
       </div>
       <p v-if="error" class="navigation-error" role="alert">{{ error }}</p>
       <button
-        class="navigation-item navigation-logout"
+        class="navigation-logout-btn navigation-logout"
         type="button"
         :disabled="loggingOut"
         :aria-busy="loggingOut"
+        title="注销登录"
         @click="logout"
       >
-        <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
-          <path d="M9 4H4v16h5m6-13 5 5-5 5M9 12h11" />
+        <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>