feat: add language dropdown

src/components/layout/MainLayout.tsx

@@ -35,6 +35,8 @@ import {
 } from '@/stores';
 import { configApi, versionApi } from '@/services/api';
 import { triggerHeaderRefresh } from '@/hooks/useHeaderRefresh';
+import { LANGUAGE_LABEL_KEYS, LANGUAGE_ORDER } from '@/utils/constants';
+import type { Language } from '@/types';
 
 const sidebarIcons: Record<string, ReactNode> = {
   dashboard: <IconLayoutDashboard size={18} />,
@@ -189,7 +191,15 @@ export function MainLayout() {
 
   const theme = useThemeStore((state) => state.theme);
   const cycleTheme = useThemeStore((state) => state.cycleTheme);
-  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+  const language = useLanguageStore((state) => state.language);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
+
+  const handleLanguageChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      setLanguage(event.target.value as Language);
+    },
+    [setLanguage]
+  );
 
   const [sidebarOpen, setSidebarOpen] = useState(false);
   const [sidebarCollapsed, setSidebarCollapsed] = useState(false);
@@ -566,9 +576,23 @@ export function MainLayout() {
             >
               {headerIcons.update}
             </Button>
-            <Button variant="ghost" size="sm" onClick={toggleLanguage} title={t('language.switch')}>
+            <div className="language-select-wrapper" title={t('language.switch')}>
-              {headerIcons.language}
+              <span className="language-select-icon" aria-hidden="true">
-            </Button>
+                {headerIcons.language}
+              </span>
+              <select
+                className="language-select"
+                value={language}
+                onChange={handleLanguageChange}
+                aria-label={t('language.switch')}
+              >
+                {LANGUAGE_ORDER.map((lang) => (
+                  <option key={lang} value={lang}>
+                    {t(LANGUAGE_LABEL_KEYS[lang])}
+                  </option>
+                ))}
+              </select>
+            </div>
             <Button variant="ghost" size="sm" onClick={cycleTheme} title={t('theme.switch')}>
               {theme === 'auto'
                 ? headerIcons.autoTheme

src/pages/LoginPage.module.scss

@@ -167,9 +167,24 @@
   font-size: 14px;
 }
 
-// 语言切换按钮
+// 语言下拉选择
-.languageBtn {
+.languageSelect {
   white-space: nowrap;
+  border: 1px solid var(--border-color);
+  border-radius: $radius-md;
+  padding: 10px 12px;
+  font-size: 14px;
+  background: var(--bg-primary);
+  color: var(--text-primary);
+  cursor: pointer;
+  height: 40px;
+  box-sizing: border-box;
+
+  &:focus {
+    outline: none;
+    border-color: var(--primary-color);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+  }
 }
 
 // 连接信息框

src/pages/LoginPage.tsx

@@ -60,7 +60,7 @@ export function LoginPage() {
   const location = useLocation();
   const { showNotification } = useNotificationStore();
   const language = useLanguageStore((state) => state.language);
-  const toggleLanguage = useLanguageStore((state) => state.toggleLanguage);
+  const setLanguage = useLanguageStore((state) => state.setLanguage);
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated);
   const login = useAuthStore((state) => state.login);
   const restoreSession = useAuthStore((state) => state.restoreSession);
@@ -79,9 +79,12 @@ export function LoginPage() {
   const [error, setError] = useState('');
 
   const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
-  const nextLanguageIndex = LANGUAGE_ORDER.indexOf(language);
+  const handleLanguageChange = useCallback(
-  const nextLanguage: Language = LANGUAGE_ORDER[(nextLanguageIndex + 1) % LANGUAGE_ORDER.length];
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
-  const nextLanguageLabel = t(LANGUAGE_LABEL_KEYS[nextLanguage]);
+      setLanguage(event.target.value as Language);
+    },
+    [setLanguage]
+  );
 
   useEffect(() => {
     const init = async () => {
@@ -188,17 +191,19 @@ export function LoginPage() {
               <div className={styles.loginHeader}>
                 <div className={styles.titleRow}>
                   <div className={styles.title}>{t('title.login')}</div>
-                  <Button
+                  <select
-                    type="button"
+                    className={styles.languageSelect}
-                    variant="ghost"
+                    value={language}
-                    size="sm"
+                    onChange={handleLanguageChange}
-                    className={styles.languageBtn}
-                    onClick={toggleLanguage}
                     title={t('language.switch')}
                     aria-label={t('language.switch')}
                   >
-                    {nextLanguageLabel}
+                    {LANGUAGE_ORDER.map((lang) => (
-                  </Button>
+                      <option key={lang} value={lang}>
+                        {t(LANGUAGE_LABEL_KEYS[lang])}
+                      </option>
+                    ))}
+                  </select>
                 </div>
                 <div className={styles.subtitle}>{t('login.subtitle')}</div>
               </div>

src/styles/layout.scss

@@ -190,6 +190,41 @@
     gap: $spacing-xs;
     flex-shrink: 0;
 
+    .language-select-wrapper {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--text-secondary);
+
+      &:hover {
+        color: var(--text-primary);
+      }
+    }
+
+    .language-select-icon {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .language-select {
+      border: 1px solid var(--border-color);
+      border-radius: $radius-md;
+      padding: 10px 12px;
+      font-size: 14px;
+      background: var(--bg-primary);
+      color: var(--text-primary);
+      cursor: pointer;
+      height: 40px;
+      box-sizing: border-box;
+
+      &:focus {
+        outline: none;
+        border-color: var(--primary-color);
+        box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
+      }
+    }
+
     svg {
       display: block;
     }