From cf5ee30ce8e11cbddf446f4e7527a18fc543c835 Mon Sep 17 00:00:00 2001
From: moonrailgun <moonrailgun@gmail.com>
Date: Sun, 12 Sep 2021 16:04:55 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E7=B3=BB=E7=BB=9F?=
 =?UTF-8?q?=E8=AF=AD=E8=A8=80=E5=88=87=E6=8D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 shared/i18n/langs/en-US/translation.json      |  3 ++
 shared/i18n/langs/zh-CN/translation.json      |  3 ++
 shared/index.tsx                              |  1 +
 .../components/modals/SettingsView/System.tsx | 37 +++++++++++++++++++
 .../components/modals/SettingsView/index.tsx  |  6 +++
 5 files changed, 50 insertions(+)
 create mode 100644 web/src/components/modals/SettingsView/System.tsx

diff --git a/shared/i18n/langs/en-US/translation.json b/shared/i18n/langs/en-US/translation.json
index 2ce3e2cf..1720aea2 100644
--- a/shared/i18n/langs/en-US/translation.json
+++ b/shared/i18n/langs/en-US/translation.json
@@ -2,6 +2,7 @@
   "k10c018fe": "Teamwork",
   "k162e37f1": "Plugin is successfully uninstalled, and it needs to be restarted to take effect",
   "k1704ea49": "Install",
+  "k1885734a": "Effective after refreshing the page",
   "k18c716ce": "Password cannot be less than 6 digits",
   "k19885be1": "Panel name is too long",
   "k1b38bb5c": "Register Now",
@@ -24,6 +25,7 @@
   "k3c7c48f8": "Invite not found",
   "k3e514bd0": "Panel name cannot be empty",
   "k3f3597fc": "All",
+  "k3fe97dcc": "System settings",
   "k419da0ef": "Message explanation",
   "k424be044": "This invite expired in <2>{{date}}</2>",
   "k42a44318": "Joined",
@@ -66,6 +68,7 @@
   "k979fc780": "Unable to join the room, you will not be able to get the latest information, please refresh the page and try again",
   "k9bb01902": "Show Detail",
   "k9d901c20": "Meeting room",
+  "ka01a00eb": "System language",
   "ka0451c97": "Cancel",
   "ka14986f0": "Plugin install successed, need to be restarted to take effect",
   "ka2c48894": "Customize your group",
diff --git a/shared/i18n/langs/zh-CN/translation.json b/shared/i18n/langs/zh-CN/translation.json
index 7013e0fc..d0483124 100644
--- a/shared/i18n/langs/zh-CN/translation.json
+++ b/shared/i18n/langs/zh-CN/translation.json
@@ -2,6 +2,7 @@
   "k10c018fe": "工作协同",
   "k162e37f1": "插件卸载成功, 需要重启后生效",
   "k1704ea49": "安装",
+  "k1885734a": "刷新页面后生效",
   "k18c716ce": "密码不能低于6位",
   "k19885be1": "面板名过长",
   "k1b38bb5c": "立即注册",
@@ -24,6 +25,7 @@
   "k3c7c48f8": "找不到邀请信息",
   "k3e514bd0": "面板名不能为空",
   "k3f3597fc": "全员",
+  "k3fe97dcc": "系统设置",
   "k419da0ef": "消息解释",
   "k424be044": "该邀请将于 <2>{{date}}</2> 过期",
   "k42a44318": "已加入",
@@ -66,6 +68,7 @@
   "k979fc780": "无法加入房间, 您将无法获取到最新的信息, 请刷新页面后重试",
   "k9bb01902": "显示详情",
   "k9d901c20": "会议室",
+  "ka01a00eb": "系统语言",
   "ka0451c97": "取消",
   "ka14986f0": "插件安装成功, 需要重启后生效",
   "ka2c48894": "自定义你的群组",
diff --git a/shared/index.tsx b/shared/index.tsx
index f273115b..6011f0ba 100644
--- a/shared/index.tsx
+++ b/shared/index.tsx
@@ -36,6 +36,7 @@ export { TcProvider } from './components/Provider';
 // i18n
 export { t, setLanguage, useTranslation } from './i18n';
 export { Trans } from './i18n/Trans';
+export { useLanguage } from './i18n/language';
 
 // hooks
 export { useAsync } from './hooks/useAsync';
diff --git a/web/src/components/modals/SettingsView/System.tsx b/web/src/components/modals/SettingsView/System.tsx
new file mode 100644
index 00000000..f65c355e
--- /dev/null
+++ b/web/src/components/modals/SettingsView/System.tsx
@@ -0,0 +1,37 @@
+import { FullModalField } from '@/components/FullModal/Field';
+import { Select } from 'antd';
+import React, { useCallback } from 'react';
+import { showToasts, t } from 'tailchat-shared';
+import { useLanguage } from 'tailchat-shared';
+
+export const SettingsSystem: React.FC = React.memo(() => {
+  const { language, setLanguage } = useLanguage();
+
+  const handleChangeLanguage = useCallback(
+    (newLang: string) => {
+      showToasts(t('刷新页面后生效'), 'info');
+      setLanguage(newLang);
+    },
+    [setLanguage]
+  );
+
+  return (
+    <div>
+      <FullModalField
+        title={t('系统语言')}
+        content={
+          <Select
+            style={{ width: 300 }}
+            size="large"
+            value={language}
+            onChange={handleChangeLanguage}
+          >
+            <Select.Option value="zh-CN">简体中文</Select.Option>
+            <Select.Option value="en-US">English</Select.Option>
+          </Select>
+        }
+      />
+    </div>
+  );
+});
+SettingsSystem.displayName = 'SettingsSystem';
diff --git a/web/src/components/modals/SettingsView/index.tsx b/web/src/components/modals/SettingsView/index.tsx
index 53617f0c..9c5e8ede 100644
--- a/web/src/components/modals/SettingsView/index.tsx
+++ b/web/src/components/modals/SettingsView/index.tsx
@@ -5,6 +5,7 @@ import { t } from 'tailchat-shared';
 import { SettingsAbout } from './About';
 import { SettingsAccount } from './Account';
 import { SettingsStatus } from './Status';
+import { SettingsSystem } from './System';
 
 interface SettingsViewProps {
   onClose: () => void;
@@ -30,6 +31,11 @@ export const SettingsView: React.FC<SettingsViewProps> = React.memo((props) => {
             title: t('账户信息'),
             content: <SettingsAccount />,
           },
+          {
+            type: 'item',
+            title: t('系统设置'),
+            content: <SettingsSystem />,
+          },
           {
             type: 'item',
             title: t('服务状态'),