feat: optimize language selector display

DIYgod · DIYgod · commit 7ce5420f92a4 · 2025-04-30T15:58:25.000+08:00
diff --git a/apps/desktop/layer/renderer/src/@types/constants.ts b/apps/desktop/layer/renderer/src/@types/constants.ts
@@ -1,6 +1,6 @@
 // This file is auto-generated by scripts/generate-i18n-locale.ts
 // DONT EDIT THIS FILE MANUALLY
-const langs = ["en", "ja", "zh-CN", "zh-TW"] as const
+const langs = ["en", "zh-CN", "zh-TW", "ja"] as const
 export const currentSupportedLanguages = langs as readonly string[]
 export type RendererSupportedLanguages = (typeof langs)[number]
 
diff --git a/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx b/apps/desktop/layer/renderer/src/modules/settings/tabs/general.tsx
@@ -204,7 +204,6 @@ export const LanguageSelector = ({
   contentClassName?: string
 }) => {
   const { t } = useTranslation("settings")
-  const { t: langT } = useTranslation("lang")
   const language = useGeneralSettingSelector((state) => state.language)
 
   const finalRenderLanguage = currentSupportedLanguages.includes(language)
@@ -229,44 +228,26 @@ export const LanguageSelector = ({
         onValueChange={(value) => {
           setGeneralSetting("language", value as string)
         }}
-        renderItem={useTypeScriptHappyCallback(
-          (item) => {
-            const lang = item.value
-            const percent = I18N_COMPLETENESS_MAP[lang]
-
-            const languageName =
-              langT(`langs.${lang}` as any) === `langs.${lang}`
-                ? defaultResources[lang].lang.name
-                : langT(`langs.${lang}` as any)
-
-            const originalLanguageName = defaultResources[lang].lang.name
-
-            if (isMobile) {
-              return `${languageName} - ${originalLanguageName} (${percent}%)`
-            }
-            return (
-              <span className="group" key={lang}>
-                <span
-                  className={cn(originalLanguageName !== languageName && "group-hover:invisible")}
-                >
-                  {languageName}
-                  {typeof percent === "number" ? (percent >= 100 ? null : ` (${percent}%)`) : null}
-                </span>
-                {originalLanguageName !== languageName && (
-                  <span
-                    className="absolute inset-0 hidden items-center pl-2 group-hover:flex"
-                    key={"org"}
-                  >
-                    {originalLanguageName}
-                  </span>
-                )}
+        renderItem={useTypeScriptHappyCallback((item) => {
+          const lang = item.value
+          const percent = I18N_COMPLETENESS_MAP[lang]
+
+          const originalLanguageName = defaultResources[lang].lang.name
+
+          if (isMobile) {
+            return `${originalLanguageName} (${percent}%)`
+          }
+          return (
+            <span className="group" key={lang}>
+              <span>
+                {originalLanguageName}
+                {typeof percent === "number" ? (percent >= 100 ? null : ` (${percent}%)`) : null}
               </span>
-            )
-          },
-          [langT],
-        )}
+            </span>
+          )
+        }, [])}
         items={currentSupportedLanguages.map((lang) => ({
-          label: langT(`langs.${lang}` as any),
+          label: `langs.${lang}`,
           value: lang,
         }))}
       />
@@ -319,7 +300,10 @@ const ActionLanguageSelector = () => {
         }}
         items={[
           { label: t("general.action_language.default"), value: DEFAULT_ACTION_LANGUAGE },
-          ...Object.values(ACTION_LANGUAGE_MAP),
+          ...Object.values(ACTION_LANGUAGE_MAP).map((item) => ({
+            label: defaultResources[item.value].lang.name,
+            value: item.value,
+          })),
         ]}
       />
     </div>
diff --git a/apps/mobile/src/modules/settings/routes/General.tsx b/apps/mobile/src/modules/settings/routes/General.tsx
@@ -6,6 +6,7 @@ import { View } from "react-native"
 
 import type { MobileSupportedLanguages } from "@/src/@types/constants"
 import { currentSupportedLanguages } from "@/src/@types/constants"
+import { defaultResources } from "@/src/@types/default-resource"
 import { setGeneralSetting, useGeneralSettingKey } from "@/src/atoms/settings/general"
 import {
   NavigationBlurEffectHeaderView,
@@ -22,7 +23,7 @@ import { updateDayjsLocale } from "@/src/lib/i18n"
 import type { NavigationControllerView } from "@/src/lib/navigation/types"
 
 export function LanguageSelect({ settingKey }: { settingKey: "language" | "actionLanguage" }) {
-  const { t: tLang } = useTranslation("lang")
+  const { t } = useTranslation("settings")
   const languageMapWithTranslation = useMemo(() => {
     const languageKeys =
       settingKey === "language"
@@ -32,12 +33,11 @@ export function LanguageSelect({ settingKey }: { settingKey: "language" | "actio
           )
 
     return languageKeys.map((key) => ({
-      subLabel: settingKey === "language" ? tLang(`langs.${key}`, { lng: key }) : undefined,
-      label: tLang(`langs.${key}`),
+      label: defaultResources[key].lang.name,
       value: key,
     }))
-  }, [settingKey, tLang])
-  const language = useGeneralSettingKey(settingKey)
+  }, [settingKey])
+  const language = useGeneralSettingKey(settingKey) as MobileSupportedLanguages | "default"
 
   return (
     <Select
@@ -49,7 +49,11 @@ export function LanguageSelect({ settingKey }: { settingKey: "language" | "actio
           updateDayjsLocale(value)
         }
       }}
-      displayValue={tLang(`langs.${language}` as any)}
+      displayValue={
+        language === "default"
+          ? t(`general.action_language.default`)
+          : defaultResources[language]?.lang.name
+      }
       options={languageMapWithTranslation}
     />
   )
diff --git a/locales/lang/en.json b/locales/lang/en.json
@@ -1,7 +1,3 @@
 {
-  "langs.en": "English",
-  "langs.ja": "Japanese",
-  "langs.zh-CN": "Simplified Chinese",
-  "langs.zh-TW": "Traditional Chinese (Taiwan)",
   "name": "English"
 }
diff --git a/locales/lang/ja.json b/locales/lang/ja.json
@@ -1,7 +1,3 @@
 {
-  "langs.en": "英語",
-  "langs.ja": "日本語",
-  "langs.zh-CN": "簡体字中国語",
-  "langs.zh-TW": "繁体字中国語（台湾）",
   "name": "日本語"
 }
diff --git a/locales/lang/zh-CN.json b/locales/lang/zh-CN.json
@@ -1,7 +1,3 @@
 {
-  "langs.en": "英语",
-  "langs.ja": "日语",
-  "langs.zh-CN": "简体中文",
-  "langs.zh-TW": "繁体中文（台湾）",
   "name": "简体中文"
 }
diff --git a/locales/lang/zh-TW.json b/locales/lang/zh-TW.json
@@ -1,7 +1,3 @@
 {
-  "langs.en": "英語",
-  "langs.ja": "日語",
-  "langs.zh-CN": "簡體中文",
-  "langs.zh-TW": "繁體中文（台灣）",
-  "name": "繁體中文（台灣）"
+  "name": "繁體中文"
 }
diff --git a/packages/internal/shared/src/language.ts b/packages/internal/shared/src/language.ts
@@ -10,27 +10,26 @@ export const ACTION_LANGUAGE_MAP: Record<
     value: string
     code?: string
   }
-> =
-  /// keep-sorted
-  {
-    "zh-CN": {
-      label: "Simplified Chinese",
-      value: "zh-CN",
-      code: "cmn",
-    },
-    "zh-TW": {
-      label: "Traditional Chinese (Taiwan)",
-      value: "zh-TW",
-    },
-    en: {
-      label: "English",
-      value: "en",
-      code: "eng",
-    },
-    ja: {
-      label: "Japanese",
-      value: "ja",
-      code: "jpn",
-    },
-  }
+> = {
+  // keep-sorted
+  en: {
+    label: "English",
+    value: "en",
+    code: "eng",
+  },
+  "zh-CN": {
+    code: "cmn",
+    label: "Simplified Chinese",
+    value: "zh-CN",
+  },
+  "zh-TW": {
+    label: "Traditional Chinese (Taiwan)",
+    value: "zh-TW",
+  },
+  ja: {
+    label: "Japanese",
+    value: "ja",
+    code: "jpn",
+  },
+}
 export const ACTION_LANGUAGE_KEYS = Object.keys(ACTION_LANGUAGE_MAP) as SupportedActionLanguage[]

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`{`
`2`		`- "langs.en": "English",`
`3`		`- "langs.ja": "Japanese",`
`4`		`- "langs.zh-CN": "Simplified Chinese",`
`5`		`- "langs.zh-TW": "Traditional Chinese (Taiwan)",`
`6`	`2`	`"name": "English"`
`7`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`{`
`2`		`- "langs.en": "英語",`
`3`		`- "langs.ja": "日本語",`
`4`		`- "langs.zh-CN": "簡体字中国語",`
`5`		`- "langs.zh-TW": "繁体字中国語（台湾）",`
`6`	`2`	`"name": "日本語"`
`7`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`{`
`2`		`- "langs.en": "英语",`
`3`		`- "langs.ja": "日语",`
`4`		`- "langs.zh-CN": "简体中文",`
`5`		`- "langs.zh-TW": "繁体中文（台湾）",`
`6`	`2`	`"name": "简体中文"`
`7`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,3 @@`
`1`	`1`	`{`
`2`		`- "langs.en": "英語",`
`3`		`- "langs.ja": "日語",`
`4`		`- "langs.zh-CN": "簡體中文",`
`5`		`- "langs.zh-TW": "繁體中文（台灣）",`
`6`		`- "name": "繁體中文（台灣）"`
	`2`	`+ "name": "繁體中文"`
`7`	`3`	`}`