From a0dcee51bcf740da0abdb98729e161992c9a1ef0 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Mon, 1 Jun 2026 16:05:29 +0800
Subject: [PATCH] feat(i18n): add language selector to settings

---
 .../editor/EditorSettingsDialog.vue           | 25 +++++++++++++++++++
 .../src/components/layout/AppToolbar.vue      | 13 +++-------
 apps/desktop/src/i18n/locales/en.ts           |  1 +
 apps/desktop/src/i18n/locales/es.ts           |  1 +
 apps/desktop/src/i18n/locales/zh-CN.ts        |  1 +
 apps/desktop/src/lib/localeOptions.ts         |  7 ++++++
 6 files changed, 39 insertions(+), 9 deletions(-)
 create mode 100644 apps/desktop/src/lib/localeOptions.ts

diff --git a/apps/desktop/src/components/editor/EditorSettingsDialog.vue b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
index 389ed67d85..4aef9bee1f 100644
--- a/apps/desktop/src/components/editor/EditorSettingsDialog.vue
+++ b/apps/desktop/src/components/editor/EditorSettingsDialog.vue
@@ -70,6 +70,8 @@ import AiProviderLogo from "@/components/icons/AiProviderLogo.vue";
 import AppLogo from "@/components/icons/AppLogo.vue";
 import type { AppThemeAppearance } from "@/lib/appTheme";
 import { useConnectionStore } from "@/stores/connectionStore";
+import { currentLocale, setLocale, type Locale } from "@/i18n";
+import { LOCALE_OPTIONS } from "@/lib/localeOptions";
 
 const { t } = useI18n();
 const settingsStore = useSettingsStore();
@@ -365,6 +367,10 @@ function onThemeChange(v: any) {
   if (typeof v === "string") editTheme.value = v as typeof DEFAULT_EDITOR_SETTINGS.theme;
 }
 
+function onLocaleChange(v: any) {
+  if (typeof v === "string") void setLocale(v as Locale);
+}
+
 function onRedisScanPageSizeChange(v: any) {
   const value = Number(v);
   if (redisScanPageSizeOptions.includes(value)) editRedisScanPageSize.value = value;
@@ -1127,6 +1133,25 @@ watch(
             </section>
 
             <section v-else-if="activeSettingsTab === 'appearance'" class="flex flex-col gap-5 py-2">
+              <div class="space-y-2">
+                <Label>{{ t("settings.languageTitle") }}</Label>
+                <Select :model-value="currentLocale()" @update:model-value="onLocaleChange">
+                  <SelectTrigger class="min-w-36">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem v-for="locale in LOCALE_OPTIONS" :key="locale.value" :value="locale.value">
+                      <div class="flex items-center gap-2">
+                        <span>{{ locale.flag }}</span>
+                        <span>{{ locale.label }}</span>
+                      </div>
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+
+              <Separator />
+
               <div class="space-y-2">
                 <Label>{{ t("settings.uiScale") }}</Label>
                 <Select
diff --git a/apps/desktop/src/components/layout/AppToolbar.vue b/apps/desktop/src/components/layout/AppToolbar.vue
index 9198a555e1..b89280fff8 100644
--- a/apps/desktop/src/components/layout/AppToolbar.vue
+++ b/apps/desktop/src/components/layout/AppToolbar.vue
@@ -5,7 +5,7 @@ import {
   DatabaseZap,
   FilePlus2,
   Loader2,
-  Globe,
+  Languages,
   Moon,
   Sun,
   SunMoon,
@@ -26,12 +26,7 @@ import WindowControls from "@/components/layout/WindowControls.vue";
 import { shouldReserveMacTrafficLightInset, useWindowControls } from "@/composables/useWindowControls";
 import { currentLocale, setLocale, type Locale } from "@/i18n";
 import type { AppThemeMode } from "@/lib/appTheme";
-
-const localeOptions: { value: Locale; flag: string; label: string }[] = [
-  { value: "en", flag: "🇺🇸", label: "English" },
-  { value: "es", flag: "🇪🇸", label: "Español" },
-  { value: "zh-CN", flag: "🇨🇳", label: "简体中文" },
-];
+import { LOCALE_OPTIONS } from "@/lib/localeOptions";
 
 const props = defineProps<{
   isDark: boolean;
@@ -72,7 +67,7 @@ const themeItems = computed(() => [
   { value: "system", label: t("toolbar.themeSystem"), icon: SunMoon },
 ]);
 const localeItems = computed(() =>
-  localeOptions.map((option) => ({
+  LOCALE_OPTIONS.map((option) => ({
     value: option.value,
     label: option.label,
     leadingText: option.flag,
@@ -257,7 +252,7 @@ function onToolbarDblClick(e: MouseEvent) {
             :model-value="currentLocale()"
             :items="localeItems"
             :aria-label="t('common.language')"
-            :trigger-icon="Globe"
+            :trigger-icon="Languages"
             trigger-class="inline-flex h-8 w-8 items-center justify-center rounded-md hover:bg-accent hover:text-accent-foreground"
             trigger-icon-class="h-4 w-4"
             :show-trigger-label="false"
diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts
index 9824e662b4..9764805156 100644
--- a/apps/desktop/src/i18n/locales/en.ts
+++ b/apps/desktop/src/i18n/locales/en.ts
@@ -1492,6 +1492,7 @@ export default {
     loadingFonts: "Loading fonts...",
     noFontsFound: "No fonts found",
     useCustomFont: "Use “{font}”",
+    languageTitle: "Language / 语言",
     fontSize: "Font Size",
     uiScale: "UI Scale",
     uiScaleDescription:
diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts
index 4d6b37a99f..2a188fc3dc 100644
--- a/apps/desktop/src/i18n/locales/es.ts
+++ b/apps/desktop/src/i18n/locales/es.ts
@@ -1387,6 +1387,7 @@ export default {
     loadingFonts: "Cargando fuentes...",
     noFontsFound: "No se encontraron fuentes",
     useCustomFont: "Usar “{font}”",
+    languageTitle: "Idioma / Language",
     fontSize: "Tamaño de fuente",
     uiScale: "Escala de interfaz",
     uiScaleDescription:
diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts
index 8a97218028..7c984e8afe 100644
--- a/apps/desktop/src/i18n/locales/zh-CN.ts
+++ b/apps/desktop/src/i18n/locales/zh-CN.ts
@@ -1465,6 +1465,7 @@ export default {
     loadingFonts: "正在加载字体...",
     noFontsFound: "未找到字体",
     useCustomFont: "使用“{font}”",
+    languageTitle: "语言 / Language",
     fontSize: "字号",
     uiScale: "界面缩放",
     uiScaleDescription: "按比例缩放整个桌面端界面，适合高清屏；修改后立即生效，并在下次启动时恢复。",
diff --git a/apps/desktop/src/lib/localeOptions.ts b/apps/desktop/src/lib/localeOptions.ts
new file mode 100644
index 0000000000..ed06c7cd13
--- /dev/null
+++ b/apps/desktop/src/lib/localeOptions.ts
@@ -0,0 +1,7 @@
+import type { Locale } from "@/i18n";
+
+export const LOCALE_OPTIONS: { value: Locale; flag: string; label: string }[] = [
+  { value: "en", flag: "🇺🇸", label: "English" },
+  { value: "es", flag: "🇪🇸", label: "Español" },
+  { value: "zh-CN", flag: "🇨🇳", label: "简体中文" },
+];