Merge pull request #91 from unchase/feat/ru-localization

Feat: Add Russian localization

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

@@ -6,8 +6,9 @@ import { Input } from '@/components/ui/Input';
 import { IconEye, IconEyeOff } from '@/components/ui/icons';
 import { useAuthStore, useLanguageStore, useNotificationStore } from '@/stores';
 import { detectApiBaseFromLocation, normalizeApiBase } from '@/utils/connection';
+import { LANGUAGE_LABEL_KEYS, LANGUAGE_ORDER } from '@/utils/constants';
 import { INLINE_LOGO_JPEG } from '@/assets/logoInline';
-import type { ApiError } from '@/types';
+import type { ApiError, Language } from '@/types';
 import styles from './LoginPage.module.scss';
 
 /**
@@ -59,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);
@@ -78,7 +79,12 @@ export function LoginPage() {
   const [error, setError] = useState('');
 
   const detectedBase = useMemo(() => detectApiBaseFromLocation(), []);
-  const nextLanguageLabel = language === 'zh-CN' ? t('language.english') : t('language.chinese');
+  const handleLanguageChange = useCallback(
+    (event: React.ChangeEvent<HTMLSelectElement>) => {
+      setLanguage(event.target.value as Language);
+    },
+    [setLanguage]
+  );
 
   useEffect(() => {
     const init = async () => {
@@ -185,17 +191,19 @@ export function LoginPage() {
               <div className={styles.loginHeader}>
                 <div className={styles.titleRow}>
                   <div className={styles.title}>{t('title.login')}</div>
-                  <Button
-                    type="button"
-                    variant="ghost"
-                    size="sm"
-                    className={styles.languageBtn}
-                    onClick={toggleLanguage}
+                  <select
+                    className={styles.languageSelect}
+                    value={language}
+                    onChange={handleLanguageChange}
                     title={t('language.switch')}
                     aria-label={t('language.switch')}
                   >
-                    {nextLanguageLabel}
-                  </Button>
+                    {LANGUAGE_ORDER.map((lang) => (
+                      <option key={lang} value={lang}>
+                        {t(LANGUAGE_LABEL_KEYS[lang])}
+                      </option>
+                    ))}
+                  </select>
                 </div>
                 <div className={styles.subtitle}>{t('login.subtitle')}</div>
               </div>