📱 语言可跟随系统

neila-a · May 31, 2024 · 74bb4b5 · 74bb4b5
1 parent f0a63d7
commit 74bb4b5
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 17 deletions.
diff --git a/packages/core/src/app/layout/layoutClient.tsx b/packages/core/src/app/layout/layoutClient.tsx
@@ -36,7 +36,9 @@ import enUS from "../locales/en-US.json";
 import zhCN from "../locales/zh-CN.json";
 import zhTW from "../locales/zh-TW.json";
 import WindowContainer from "./WindowContainer"; // 重的Window已经被动态加载，那么WindowContainer是轻的
-import langAtom from "@verkfi/shared/atoms/lang";
+import {
+ usableLangAtom
+} from "@verkfi/shared/atoms/lang";
 import composeProviders from "./providerCompose";
 import desktopAdder from "./registers/desktopAdder";
 import registerProtocolHandler from "./registers/registerProtocolHandler";
@@ -78,7 +80,7 @@ export default function ModifiedApp(props: {
  ),
  pathname = usePathname(),
  params = useSearchParams(),
- [choosedLang] = useAtom(langAtom),
+ [choosedLang] = useAtom(usableLangAtom),
  [expand, setExpand] = useState<boolean>(false),
  [loaded, setLoaded] = useState<"" | keyof typeof locales>(""),
  implant = (pathname === "/") || (params.get("only") === "true"),

diff --git a/packages/core/src/app/setting/option/page.tsx b/packages/core/src/app/setting/option/page.tsx
@@ -86,7 +86,7 @@ export default function Options() {
  {get("选择语言")}
  </InputLabel>
  <Select labelId={langId} value={lang} label={get("选择语言")} onChange={event => {
- const plang = event.target.value as keyof typeof locales;
+ const plang = event.target.value as typeof lang;
  setLang(plang);
  }}>
  {Object.values(locales).map(ilang => {
@@ -100,6 +100,9 @@ export default function Options() {
  </MenuItem>
  );
  })}
+ <MenuItem value="system">
+ {get("appearance.colorMode.system")}
+ </MenuItem>
  </Select>
  <br />
  <ButtonGroup fullWidth>

diff --git a/packages/core/src/app/tools/info.ts b/packages/core/src/app/tools/info.ts
@@ -37,7 +37,9 @@ import {
 import {
  locales
 } from "layout/layoutClient";
-import langAtom from "@verkfi/shared/atoms/lang";
+import {
+ usableLangAtom
+} from "@verkfi/shared/atoms/lang";
 export interface noIconTool {
 
  /**
@@ -90,7 +92,7 @@ export interface tool extends noIconTool {
 }
 const toolsInfoAtom = atom(async getAtom => {
  const instance = new ReactIntlUniversal() as typeof import("react-intl-universal"),
- lang = await getAtom(langAtom);
+ lang = await getAtom(usableLangAtom);
  instance.init({
  currentLocale: lang,
  locales

diff --git a/packages/shared/atoms/lang.ts b/packages/shared/atoms/lang.ts
@@ -3,29 +3,35 @@ import {
  atom
 } from "jotai";
 import setSetting from "../reader/setSetting";
-import settingReader from "../reader/settingReader";
 import {
  locales
 } from "layout/layoutClient";
 import isBrowser from "../isBrowser";
+import settingReader from "../reader/settingReader";
 const emptyString = "__lang__",
- valueAtom = atom<keyof typeof locales | typeof emptyString>(emptyString);
-const langAtom = atom(async get => {
- let value = get(valueAtom);
- if (value === emptyString) {
+ valueAtom = atom<keyof typeof locales | typeof emptyString | "system">(emptyString),
+ langAtom = atom(async get => {
+ let value = get(valueAtom);
+ if (value === emptyString) {
+ return await settingReader("lang", "system") as keyof typeof locales | "system";
+ }
+ return value;
+ }, async (get, set, update: keyof typeof locales | "system") => {
+ set(valueAtom, update);
+ setSetting("lang", "语言", update);
+ });
+export const usableLangAtom = atom(async get => {
+ const got = await get(langAtom);
+ if (got === "system") {
  let browserLang: string = "zhCN";
  if (isBrowser()) {
  if (window.navigator.language || window.navigator.languages) {
  browserLang = ((window.navigator.languages && window.navigator.languages[0]) || window.navigator.language).split("-").join("") || "zhCN";
  }
  }
- const detailedLang = Object.keys(locales).includes(browserLang) ? browserLang : "zhCN",
- chooseOption = await settingReader("lang", detailedLang) as keyof typeof locales;
- value = chooseOption;
+ const detailedLang = Object.keys(locales).includes(browserLang) ? browserLang : "zhCN";
+ return detailedLang as keyof typeof locales;
  }
- return value as keyof typeof locales;
-}, async (get, set, update: keyof typeof locales) => {
- set(valueAtom, update);
- setSetting("lang", "语言", update);
+ return got;
 });
 export default langAtom;