From 5279e560188d7ca5daddad55cc5526f4f889a4cf Mon Sep 17 00:00:00 2001
From: smail <likb_blue@163.com>
Date: Fri, 18 Sep 2026 16:56:27 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B0=86=E6=B3=A8=E9=94=80=E5=85=A5=E5=8F=A3?=
 =?UTF-8?q?=E7=A7=BB=E5=8A=A8=E5=88=B0=E4=BE=A7=E6=A0=8F=E5=BD=93=E5=89=8D?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E5=8C=BA=E5=9F=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../views/components/HomeAside/HomeAside.css  | 34 ++++++++++++++++++-
 .../views/components/HomeAside/HomeAside.js   | 24 +++++++++++--
 .../views/components/HomeAside/HomeAside.vue  | 16 ++++++++-
 .../SecuritySettings/SecuritySettings.css     |  2 +-
 .../SecuritySettings/SecuritySettings.js      |  4 +--
 .../SecuritySettings/SecuritySettings.vue     |  4 +--
 6 files changed, 73 insertions(+), 11 deletions(-)

diff --git a/frontend/src/views/components/HomeAside/HomeAside.css b/frontend/src/views/components/HomeAside/HomeAside.css
index c18b39f..e25c697 100644
--- a/frontend/src/views/components/HomeAside/HomeAside.css
+++ b/frontend/src/views/components/HomeAside/HomeAside.css
@@ -115,7 +115,7 @@
 }
 
 .account-caption {
-  grid-column: 1 / -1;
+  grid-column: 1;
   color: var(--pm-text-secondary);
   font-size: 11px;
   line-height: 1.4;
@@ -132,10 +132,42 @@
 }
 
 .account-role {
+  justify-self: end;
   border-radius: 6px;
   font-size: 11px;
 }
 
+.logout-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: end;
+  width: 32px;
+  height: 32px;
+  padding: 0;
+  border: 0;
+  border-radius: 6px;
+  background: transparent;
+  color: var(--pm-text-secondary);
+  font-size: 18px;
+  cursor: pointer;
+}
+
+.logout-btn:hover:not(:disabled) {
+  background: var(--el-color-danger-light-9);
+  color: var(--el-color-danger);
+}
+
+.logout-btn:focus-visible {
+  outline: 2px solid var(--pm-primary-color);
+  outline-offset: 2px;
+}
+
+.logout-btn:disabled {
+  opacity: 0.5;
+  cursor: wait;
+}
+
 .settings-btn {
   display: flex;
   width: 100%;
diff --git a/frontend/src/views/components/HomeAside/HomeAside.js b/frontend/src/views/components/HomeAside/HomeAside.js
index 3aba9ed..e2a5650 100644
--- a/frontend/src/views/components/HomeAside/HomeAside.js
+++ b/frontend/src/views/components/HomeAside/HomeAside.js
@@ -8,7 +8,8 @@ import lang from "../../../i18n/i18n";
 
 import { http } from "@/utils/axios";
 
-import { Setting } from "@element-plus/icons-vue";
+import { Setting, SwitchButton } from "@element-plus/icons-vue";
+import { ElMessage } from "element-plus";
 
 import { useGlobalStatusStore } from "../../../stores/useGlobalStatusStore";
 
@@ -25,6 +26,22 @@ export function usePage() {
   const currentAccount = computed(() => globalStatus.userInfos.account || '账号未加载');
 
   const currentRole = computed(() => roleMeta(globalStatus.role));
+
+  const loggingOut = ref(false);
+  const logout = async () => {
+    if (loggingOut.value) return;
+    loggingOut.value = true;
+    try {
+      const result = await http.post('/api/v1/logout', {});
+      if (result.errorNo !== 0) {
+        throw new Error(result.errorMsg || '注销失败，请重试');
+      }
+      location.reload();
+    } catch (error) {
+      ElMessage.error(error.message || '注销失败，请重试');
+      loggingOut.value = false;
+    }
+  };
   
   const router = useRouter();
   
@@ -89,6 +106,8 @@ export function usePage() {
     isLogin,
     currentAccount,
     currentRole,
+    loggingOut,
+    logout,
     router,
     data,
     searchQuery,
@@ -100,5 +119,6 @@ export function usePage() {
 
 export {
   BrandLogo,
-  Setting
+  Setting,
+  SwitchButton
 }
diff --git a/frontend/src/views/components/HomeAside/HomeAside.vue b/frontend/src/views/components/HomeAside/HomeAside.vue
index 5e28d60..9b7ed37 100644
--- a/frontend/src/views/components/HomeAside/HomeAside.vue
+++ b/frontend/src/views/components/HomeAside/HomeAside.vue
@@ -32,6 +32,18 @@
     <div class="sidebar-footer" v-if="isLogin">
       <div class="account-identity" aria-label="当前登录账号" aria-live="polite">
         <span class="account-caption">当前账号</span>
+        <el-tooltip :content="lang.logout" placement="top">
+          <button
+            type="button"
+            class="logout-btn"
+            :aria-label="lang.logout"
+            :aria-busy="loggingOut"
+            :disabled="loggingOut"
+            @click="logout"
+          >
+            <el-icon><SwitchButton /></el-icon>
+          </button>
+        </el-tooltip>
         <strong class="account-name" :title="currentAccount">{{ currentAccount }}</strong>
         <el-tag :type="currentRole.type" size="small" effect="light" class="account-role">
           {{ currentRole.label }}
@@ -46,7 +58,7 @@
 </template>
 
 <script setup>
-import { usePage, BrandLogo, Setting } from './HomeAside.js'
+import { usePage, BrandLogo, Setting, SwitchButton } from './HomeAside.js'
 
 const {
   searchQuery,
@@ -57,6 +69,8 @@ const {
   isLogin,
   currentAccount,
   currentRole,
+  loggingOut,
+  logout,
   openSettings
 } = usePage()
 </script>
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.css b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
index fb8f11d..8a85892 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.css
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.css
@@ -21,7 +21,7 @@
 .premium-input :deep(.el-input__wrapper) { box-shadow: none; border-radius: var(--pm-radius-sm); border: 1px solid var(--pm-border-color); background-color: var(--pm-bg-secondary); transition: all 0.2s; }
 .premium-input :deep(.el-input__wrapper:hover), .premium-input :deep(.el-input__wrapper.is-focus) { border-color: var(--pm-primary-color); background-color: var(--pm-bg-primary); }
 .form-actions { margin-top: 24px; }
-.submit-btn, .logout-btn { border-radius: var(--pm-radius-sm); font-weight: 500; }
+.submit-btn { border-radius: var(--pm-radius-sm); font-weight: 500; }
 .submit-btn { padding: 10px 24px; }
 .settings-divider { margin: 32px 0; border-color: var(--pm-border-color); }
 .security-key-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.js b/frontend/src/views/components/SecuritySettings/SecuritySettings.js
index 40d3777..6de1426 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.js
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.js
@@ -26,7 +26,6 @@ export function usePage() {
     }
     options.push({ value: 'external-email', label: '外部安全邮箱' })
     options.push({ value: 'webauthn', label: '安全密钥' })
-    options.push({ value: 'logout', label: lang.logout })
     return options
   })
   const selectedSection = computed({
@@ -259,7 +258,6 @@ export function usePage() {
   }
 
   const formatTime = value => value ? new Date(value).toLocaleString('zh-CN', { hour12: false }) : '-'
-  const logout = () => http.post('/api/v1/logout', {}).then(() => location.reload())
 
   const submit = async () => {
     if (passwordSubmitting.value || passwordSending.value) return
@@ -348,6 +346,6 @@ export function usePage() {
     externalDialogVisible, ruleForm, rules, submit, registerCredential, renameCredential, revokeCredential,
     saveSecurityQuestion, generateRecoveryCodes, revokeRecoveryCodes, openExternalEmailDialog,
     handleExternalEmailBound,
-    disableExternalEmail, formatTime, logout,
+    disableExternalEmail, formatTime,
   }
 }
diff --git a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
index bb5bdfc..7ebec00 100644
--- a/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
+++ b/frontend/src/views/components/SecuritySettings/SecuritySettings.vue
@@ -124,8 +124,6 @@
     </section>
     <el-alert v-if="selectedSection === 'webauthn' && !supported" title="当前浏览器不支持 WebAuthn，请使用 HTTPS 和受支持的浏览器。" type="warning" :closable="false" show-icon />
 
-    <el-divider v-if="selectedSection === 'logout'" class="settings-divider" />
-    <section v-if="selectedSection === 'logout'" class="security-section"><div class="settings-header"><h3 class="danger-text">{{ lang.logout }}</h3><p class="settings-desc">{{ lang.logout_desc }}</p></div><el-button type="danger" plain @click="logout" class="logout-btn">{{ lang.logout }}</el-button></section>
 
     <ExternalEmailBindingDialog
       v-model="externalDialogVisible"
@@ -152,7 +150,7 @@ const {
   externalDialogVisible, ruleForm, rules, submit, registerCredential, renameCredential, revokeCredential,
   saveSecurityQuestion, generateRecoveryCodes, revokeRecoveryCodes, openExternalEmailDialog,
   handleExternalEmailBound,
-  disableExternalEmail, formatTime, logout,
+  disableExternalEmail, formatTime,
 } = usePage()
 </script>