feat: integrate language switcher into settings with modern segment control UI

- Move language switcher from header to settings modal for better organization
- Implement modern segment control UI instead of radio buttons for language selection
- Add language preference persistence in localStorage and backend settings
- Support instant language preview with cancel/revert functionality
- Remove standalone LanguageSwitcher component
- Improve initial language detection logic (localStorage -> browser -> default)
- Add proper i18n keys for language settings UI text
This commit is contained in:
Jason
2025-09-28 22:23:49 +08:00
parent 0bedbb2663
commit c5aa244d65
8 changed files with 157 additions and 38 deletions

View File

@@ -4,6 +4,36 @@ import { initReactI18next } from "react-i18next";
import en from "./locales/en.json";
import zh from "./locales/zh.json";
const DEFAULT_LANGUAGE: "zh" | "en" = "zh";
const getInitialLanguage = (): "zh" | "en" => {
if (typeof window !== "undefined") {
try {
const stored = window.localStorage.getItem("language");
if (stored === "zh" || stored === "en") {
return stored;
}
} catch (error) {
console.warn("[i18n] Failed to read stored language preference", error);
}
}
const navigatorLang =
typeof navigator !== "undefined"
? navigator.language?.toLowerCase() ?? navigator.languages?.[0]?.toLowerCase()
: undefined;
if (navigatorLang?.startsWith("zh")) {
return "zh";
}
if (navigatorLang?.startsWith("en")) {
return "en";
}
return DEFAULT_LANGUAGE;
};
const resources = {
en: {
translation: en,
@@ -15,7 +45,7 @@ const resources = {
i18n.use(initReactI18next).init({
resources,
lng: "zh", // 默认语言调整为中文
lng: getInitialLanguage(), // 根据本地存储或系统语言选择默认语言
fallbackLng: "en", // 如果缺少中文翻译则退回英文
interpolation: {

View File

@@ -62,6 +62,11 @@
},
"settings": {
"title": "Settings",
"general": "General",
"language": "Language",
"languageDescription": "Choose the display language for CC Switch. This preference will be remembered next time you open the app.",
"languageOptionChinese": "中文",
"languageOptionEnglish": "English",
"windowBehavior": "Window Behavior",
"minimizeToTray": "Minimize to tray on close",
"minimizeToTrayDescription": "When checked, clicking the close button will hide to system tray, otherwise the app will exit directly.",

View File

@@ -62,6 +62,11 @@
},
"settings": {
"title": "设置",
"general": "通用",
"language": "界面语言",
"languageDescription": "选择 CC Switch 的显示语言,下次启动会自动记住你的偏好。",
"languageOptionChinese": "中文",
"languageOptionEnglish": "English",
"windowBehavior": "窗口行为",
"minimizeToTray": "关闭时最小化到托盘",
"minimizeToTrayDescription": "勾选后点击关闭按钮会隐藏到系统托盘,取消则直接退出应用。",