refactor(projects): update locales

README.md

@@ -3,12 +3,11 @@
 </p>
 
 <div align="center">
-    <h1>OVM desktop</h1>
+    <h1>OVM Desktop</h1>
     <p>OVM is a fast, lightweight, and easy-to-use application for running Docker containers. Use our Docker Desktop alternative to develop quickly.</p>
 </div>
 
 <div align="center">
-    <h1>OVM</h1>
     <p>Project OVM is the Windows and macOS client of OVM</p>
     <img src="./assets/ovm_showcase.jpg">
 </div>

docs/readme/README-zh.md

@@ -0,0 +1,80 @@
+<p align="center">
+    <img width="94" height="94" style="display: block;" src="./assets/logo.svg">
+</p>
+
+<div align="center">
+    <h1>OVM Desktop</h1>
+    <p>OVM 是一个快速、轻量级且易于使用的应用程序，用于运行 Docker 容器。使用我们的 Docker 桌面替代方案可以快速进行开发。</p>
+</div>
+
+<div align="center">
+    <p>OVM 项目是 OVM 的 Windows 和 macOS 客户端。</p>
+    <img src="./assets/ovm_showcase.jpg">
+</div>
+
+## 特性
+
+## 快速上手
+
+### 安装
+
+> 如果你还没有安装 `pnpm`：
+>
+> ```bash
+> npm i -g pnpm
+> ```
+
+Clone 或者 fork 这个项目，在根目录执行：
+
+```bash
+pnpm i
+```
+
+### 构建并运行 Flat Electron 客户端
+
+在仓库根目录运行以下命令：
+
+```shell
+pnpm start
+```
+
+You can use one of the following methods to package your executable:
+
+- Run `pnpm ship` at project root to package based on current system.
+- Alternatively, run `pnpm ship:mac` or `pnpm ship:win` at project root to package for a specified system.
+
+### Build and run OVM Web client
+
+Run the following command at the root of the repository to build and run OVM web client.
+
+```shell
+pnpm start:web
+```
+
+Alternatively, run the following command:
+
+```shell
+cd ./web/ovm-web/ && pnpm start
+```
+
+UI and business logic are separated in OVM. You can view and develop OVM components UI via Storybook. You can either visit the ([Online address][ovm-storybook]) or run `pnpm storybook` at the root of the repository to run Storybook locally.
+
+## References
+
+## Related Projects
+
+## Contributing
+
+## Code Contributors
+
+Thank you to all the people who already contributed to OVM!
+
+## Disclaimer
+
+## License
+
+Copyright © OOMOL Corporation. All rights reserved.
+
+Licensed under the [MIT license](LICENSE).
+
+When using the OVM or other GitHub logos, be sure to follow the [GitHub logo guidelines][github-logo].

packages/ovm-web/src/routes/Settings/Preferences/index.tsx

@@ -3,51 +3,36 @@ import styles from "./Preferences.module.scss";
 import type { RadioChangeEvent } from "antd";
 
 import { Radio } from "antd";
-import { useState } from "react";
 import { useVal } from "use-value-enhancer";
-import { useTranslate } from "val-i18n-react";
+import { useI18n, useLang, useTranslate } from "val-i18n-react";
 import { Appearance } from "~/constants";
 import { useAppContext } from "~/hooks";
 
 import autoSVG from "../images/auto.svg";
 import darkSVG from "../images/dark.svg";
 import lightSVG from "../images/light.svg";
 
-export enum LanguageEnum {
-  English = "en",
-  Chinese = "zh-CN",
-}
-
-export type PreferencesDataType = {
-  language: LanguageEnum;
-};
-
 export const Preferences = () => {
   const t = useTranslate();
   const { appearance$ } = useAppContext();
+  const i18n = useI18n();
+  const lang = useLang();
   const appearance = useVal(appearance$);
-  const [language, setLanguage] = useState<LanguageEnum>(LanguageEnum.English);
 
   const onLanguageChange = (e: RadioChangeEvent) => {
-    console.log("radio checked", e.target.value);
-    setLanguage(e.target.value as LanguageEnum);
+    i18n.switchLang(e.target.value);
   };
   const onAppearanceChange = (e: RadioChangeEvent) => {
-    console.log("radio checked", e.target.value);
     appearance$.set(e.target.value as Appearance);
   };
 
   return (
     <div className={styles["preference-container"]}>
       <div className={styles.section}>
         <div className={styles["section-title"]}>{t("settings.language")}</div>
-        <Radio.Group
-          onChange={onLanguageChange}
-          defaultValue={language}
-          value={language}
-        >
-          <Radio value={LanguageEnum.English}>English</Radio>
-          <Radio value={LanguageEnum.Chinese}>中文</Radio>
+        <Radio.Group onChange={onLanguageChange} value={lang}>
+          <Radio value={"en"}>English</Radio>
+          <Radio value={"zh-CN"}>中文</Radio>
         </Radio.Group>
       </div>
       <div className={styles.section}>