refactor: 将退出登录功能从顶部导航栏移至设置面板

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 {
+.config-logout-btn {
-  display: flex;
+  width: 100%;
-  align-items: center;
+  margin-top: 12px;
-  gap: 8px;
+  padding: 9px 0;
-  font-size: 0.78rem;
+  border: 1px solid rgba(248, 113, 113, 0.25);
-  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;
   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 {
+.config-logout-btn:hover {
-  border-color: var(--color-error);
+  background: rgba(248, 113, 113, 0.15);
-  color: var(--color-error);
+  border-color: rgba(248, 113, 113, 0.4);
 }

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)}
         />
       )}

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>

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",
 };

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": "現在のユーザー",
 };

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": "当前用户",
 };