From d855c787d76f8454eb9722de14df6389cfa45ab8 Mon Sep 17 00:00:00 2001
From: shaun <beingswu@gmail.com>
Date: Mon, 30 Oct 2023 13:34:23 +0800
Subject: [PATCH] refactor(projects): update locales

---
 README.md                                     |  3 +-
 docs/readme/README-zh.md                      | 80 +++++++++++++++++++
 .../src/routes/Settings/Preferences/index.tsx | 29 ++-----
 3 files changed, 88 insertions(+), 24 deletions(-)
 create mode 100644 docs/readme/README-zh.md

diff --git a/README.md b/README.md
index f4c73f9..a5bdb68 100644
--- a/README.md
+++ b/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>
diff --git a/docs/readme/README-zh.md b/docs/readme/README-zh.md
new file mode 100644
index 0000000..2cc75d0
--- /dev/null
+++ b/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].
diff --git a/packages/ovm-web/src/routes/Settings/Preferences/index.tsx b/packages/ovm-web/src/routes/Settings/Preferences/index.tsx
index 4ce997c..973b54d 100644
--- a/packages/ovm-web/src/routes/Settings/Preferences/index.tsx
+++ b/packages/ovm-web/src/routes/Settings/Preferences/index.tsx
@@ -3,9 +3,8 @@ 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";
 
@@ -13,27 +12,17 @@ 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);
   };
 
@@ -41,13 +30,9 @@ export const Preferences = () => {
     <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}>