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

Feat: Add Russian localization

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')}>
-              {headerIcons.language}
-            </Button>
+            <div className="language-select-wrapper" title={t('language.switch')}>
+              <span className="language-select-icon" aria-hidden="true">
+                {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/i18n/index.ts

@@ -6,12 +6,14 @@ import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import zhCN from './locales/zh-CN.json';
 import en from './locales/en.json';
+import ru from './locales/ru.json';
 import { getInitialLanguage } from '@/utils/language';
 
 i18n.use(initReactI18next).init({
   resources: {
     'zh-CN': { translation: zhCN },
-    en: { translation: en }
+    en: { translation: en },
+    ru: { translation: ru }
   },
   lng: getInitialLanguage(),
   fallbackLng: 'zh-CN',

src/i18n/locales/en.json

@@ -1098,7 +1098,8 @@
   "language": {
     "switch": "Language",
     "chinese": "中文",
-    "english": "English"
+    "english": "English",
+    "russian": "Русский"
   },
   "theme": {
     "switch": "Theme",

src/i18n/locales/zh-CN.json

@@ -1098,7 +1098,8 @@
   "language": {
     "switch": "语言",
     "chinese": "中文",
-    "english": "English"
+    "english": "English",
+    "russian": "Русский"
   },
   "theme": {
     "switch": "主题",

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>

src/stores/useLanguageStore.ts

@@ -6,7 +6,7 @@
 import { create } from 'zustand';
 import { persist } from 'zustand/middleware';
 import type { Language } from '@/types';
-import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+import { LANGUAGE_ORDER, STORAGE_KEY_LANGUAGE } from '@/utils/constants';
 import i18n from '@/i18n';
 import { getInitialLanguage } from '@/utils/language';
 
@@ -29,8 +29,9 @@ export const useLanguageStore = create<LanguageState>()(
 
       toggleLanguage: () => {
         const { language, setLanguage } = get();
-        const newLanguage: Language = language === 'zh-CN' ? 'en' : 'zh-CN';
-        setLanguage(newLanguage);
+        const currentIndex = LANGUAGE_ORDER.indexOf(language);
+        const nextLanguage = LANGUAGE_ORDER[(currentIndex + 1) % LANGUAGE_ORDER.length];
+        setLanguage(nextLanguage);
       }
     }),
     {

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

src/types/common.ts

@@ -4,7 +4,7 @@
 
 export type Theme = 'light' | 'dark' | 'auto';
 
-export type Language = 'zh-CN' | 'en';
+export type Language = 'zh-CN' | 'en' | 'ru';
 
 export type NotificationType = 'info' | 'success' | 'warning' | 'error';
 

src/utils/constants.ts

@@ -3,6 +3,8 @@
  * 从原项目 src/utils/constants.js 迁移
  */
 
+import type { Language } from '@/types';
+
 // 缓存过期时间（毫秒）
 export const CACHE_EXPIRY_MS = 30 * 1000; // 与基线保持一致，减少管理端压力
 
@@ -33,6 +35,15 @@ export const STORAGE_KEY_LANGUAGE = 'cli-proxy-language';
 export const STORAGE_KEY_SIDEBAR = 'cli-proxy-sidebar-collapsed';
 export const STORAGE_KEY_AUTH_FILES_PAGE_SIZE = 'cli-proxy-auth-files-page-size';
 
+// 语言配置
+export const LANGUAGE_ORDER: Language[] = ['zh-CN', 'en', 'ru'];
+export const LANGUAGE_LABEL_KEYS: Record<Language, string> = {
+  'zh-CN': 'language.chinese',
+  en: 'language.english',
+  ru: 'language.russian'
+};
+export const SUPPORTED_LANGUAGES: Language[] = LANGUAGE_ORDER;
+
 // 通知持续时间
 export const NOTIFICATION_DURATION_MS = 3000;
 

src/utils/language.ts

@@ -1,16 +1,16 @@
 import type { Language } from '@/types';
-import { STORAGE_KEY_LANGUAGE } from '@/utils/constants';
+import { STORAGE_KEY_LANGUAGE, SUPPORTED_LANGUAGES } from '@/utils/constants';
 
 const parseStoredLanguage = (value: string): Language | null => {
   try {
     const parsed = JSON.parse(value);
     const candidate = parsed?.state?.language ?? parsed?.language ?? parsed;
-    if (candidate === 'zh-CN' || candidate === 'en') {
-      return candidate;
+    if (SUPPORTED_LANGUAGES.includes(candidate as Language)) {
+      return candidate as Language;
     }
   } catch {
-    if (value === 'zh-CN' || value === 'en') {
-      return value;
+    if (SUPPORTED_LANGUAGES.includes(value as Language)) {
+      return value as Language;
     }
   }
   return null;
@@ -36,7 +36,10 @@ const getBrowserLanguage = (): Language => {
     return 'zh-CN';
   }
   const raw = navigator.languages?.[0] || navigator.language || 'zh-CN';
-  return raw.toLowerCase().startsWith('zh') ? 'zh-CN' : 'en';
+  const lower = raw.toLowerCase();
+  if (lower.startsWith('zh')) return 'zh-CN';
+  if (lower.startsWith('ru')) return 'ru';
+  return 'en';
 };
 
 export const getInitialLanguage = (): Language => getStoredLanguage() ?? getBrowserLanguage();