From 1109ab41f761bd85b94efce2954ce83af20f1d3a Mon Sep 17 00:00:00 2001
From: cfy666 <3087823110@qq.com>
Date: Sun, 14 Jun 2026 18:42:47 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E5=B0=86=E9=80=80=E5=87=BA?=
 =?UTF-8?q?=E7=99=BB=E5=BD=95=E5=8A=9F=E8=83=BD=E4=BB=8E=E9=A1=B6=E9=83=A8?=
 =?UTF-8?q?=E5=AF=BC=E8=88=AA=E6=A0=8F=E7=A7=BB=E8=87=B3=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=9D=A2=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/App.css                          | 37 +++++++------------
 frontend/src/App.tsx                          |  8 +---
 frontend/src/components/ConfigPanel/index.tsx | 22 ++++++++++-
 frontend/src/lib/i18n/en-US.ts                |  4 ++
 frontend/src/lib/i18n/ja-JP.ts                |  4 ++
 frontend/src/lib/i18n/zh-CN.ts                |  4 ++
 6 files changed, 48 insertions(+), 31 deletions(-)

diff --git a/frontend/src/App.css b/frontend/src/App.css
index b31ff55..6d1d39c 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -1710,34 +1710,23 @@ body {
   color: var(--color-primary-hover);
 }
 
-/* ---- User badge in header ---- */
+/* ---- Logout button in config panel ---- */
 
-.header__user {
-  display: flex;
-  align-items: center;
-  gap: 8px;
-  font-size: 0.78rem;
-  color: var(--color-text-muted);
-}
-
-.header__username {
-  font-weight: 500;
-  color: var(--color-text);
-}
-
-.header__logout-btn {
-  background: none;
-  border: 1px solid var(--color-border);
-  color: var(--color-text-muted);
-  font-size: 0.72rem;
-  font-weight: 500;
-  padding: 4px 10px;
+.config-logout-btn {
+  width: 100%;
+  margin-top: 12px;
+  padding: 9px 0;
+  border: 1px solid rgba(248, 113, 113, 0.25);
   border-radius: var(--radius-sm);
+  background: rgba(248, 113, 113, 0.08);
+  color: var(--color-error);
+  font-size: 0.82rem;
+  font-weight: 600;
   cursor: pointer;
   transition: all var(--transition-fast);
 }
 
-.header__logout-btn:hover {
-  border-color: var(--color-error);
-  color: var(--color-error);
+.config-logout-btn:hover {
+  background: rgba(248, 113, 113, 0.15);
+  border-color: rgba(248, 113, 113, 0.4);
 }
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index fd123bb..d0e9473 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -234,12 +234,6 @@ function AppContent() {
           <span className="header__subtitle">{tr("app.title")}</span>
         </div>
         <div className="header__right">
-          <div className="header__user">
-            <span className="header__username">{user?.username}</span>
-            <button className="header__logout-btn" onClick={logout}>
-              {tr("auth.logout")}
-            </button>
-          </div>
           <span className={`badge badge--${connectionStatus}`}>
             {isConnected ? tr("status.connected") : connectionStatus === "connecting" ? tr("status.connecting") : tr("status.disconnected")}
           </span>
@@ -273,8 +267,10 @@ function AppContent() {
         <ConfigPanel
           config={config}
           theme={theme}
+          username={user?.username}
           onUpdate={updateConfig}
           onThemeChange={handleThemeChange}
+          onLogout={logout}
           onClose={() => setShowConfig(false)}
         />
       )}
diff --git a/frontend/src/components/ConfigPanel/index.tsx b/frontend/src/components/ConfigPanel/index.tsx
index 9523ec6..031106e 100644
--- a/frontend/src/components/ConfigPanel/index.tsx
+++ b/frontend/src/components/ConfigPanel/index.tsx
@@ -9,12 +9,14 @@ import type { SessionConfig, Theme } from "../../types";
 interface ConfigPanelProps {
   config: SessionConfig;
   theme: Theme;
+  username?: string;
   onUpdate: (partial: Partial<SessionConfig>) => void;
   onThemeChange: (theme: Theme) => void;
+  onLogout?: () => void;
   onClose: () => void;
 }
 
-export function ConfigPanel({ config, theme, onUpdate, onThemeChange, onClose }: ConfigPanelProps) {
+export function ConfigPanel({ config, theme, username, onUpdate, onThemeChange, onLogout, onClose }: ConfigPanelProps) {
   const { t } = useI18n();
 
   return (
@@ -88,6 +90,24 @@ export function ConfigPanel({ config, theme, onUpdate, onThemeChange, onClose }:
               </select>
             </label>
           </div>
+
+          {username && onLogout && (
+            <div className="config-group">
+              <div className="config-group__title">{t("settings.account")}</div>
+              <div className="config-row" style={{ cursor: "default" }}>
+                <div className="config-row__info">
+                  <span className="config-row__label">{t("settings.account.user")}</span>
+                  <span className="config-row__desc">{username}</span>
+                </div>
+              </div>
+              <button
+                className="config-logout-btn"
+                onClick={onLogout}
+              >
+                {t("auth.logout")}
+              </button>
+            </div>
+          )}
         </div>
       </div>
     </div>
diff --git a/frontend/src/lib/i18n/en-US.ts b/frontend/src/lib/i18n/en-US.ts
index 9f47068..835c5fa 100644
--- a/frontend/src/lib/i18n/en-US.ts
+++ b/frontend/src/lib/i18n/en-US.ts
@@ -145,4 +145,8 @@ export const enUS: TranslationMap = {
   "auth.error.usernameLength": "Username must be 3-64 characters",
   "auth.error.passwordLength": "Password must be 8-72 characters",
   "auth.logout": "Sign Out",
+
+  // Account (in settings)
+  "settings.account": "Account",
+  "settings.account.user": "Current user",
 };
diff --git a/frontend/src/lib/i18n/ja-JP.ts b/frontend/src/lib/i18n/ja-JP.ts
index 34abfbe..74f4764 100644
--- a/frontend/src/lib/i18n/ja-JP.ts
+++ b/frontend/src/lib/i18n/ja-JP.ts
@@ -145,4 +145,8 @@ export const jaJP: TranslationMap = {
   "auth.error.usernameLength": "ユーザー名は3〜64文字で入力してください",
   "auth.error.passwordLength": "パスワードは8〜72文字で入力してください",
   "auth.logout": "ログアウト",
+
+  // Account (in settings)
+  "settings.account": "アカウント",
+  "settings.account.user": "現在のユーザー",
 };
diff --git a/frontend/src/lib/i18n/zh-CN.ts b/frontend/src/lib/i18n/zh-CN.ts
index 337fc95..8fc5716 100644
--- a/frontend/src/lib/i18n/zh-CN.ts
+++ b/frontend/src/lib/i18n/zh-CN.ts
@@ -145,4 +145,8 @@ export const zhCN: TranslationMap = {
   "auth.error.usernameLength": "用户名需要 3-64 个字符",
   "auth.error.passwordLength": "密码需要 8-72 个字符",
   "auth.logout": "退出登录",
+
+  // Account (in settings)
+  "settings.account": "账号",
+  "settings.account.user": "当前用户",
 };