系统设置增加系统语言切换

src/app.ts

@@ -1,4 +1,5 @@
 const baseUrl = window.__ENV__QlBaseUrl || '/';
+import { setLocale } from '@umijs/max';
 import intl from 'react-intl-universal';
 
 export function rootContainer(container: any) {
@@ -9,6 +10,7 @@ export function rootContainer(container: any) {
   let currentLocale = intl.determineLocale({
     urlLocaleKey: 'lang',
     cookieLocaleKey: 'lang',
+    localStorageLocaleKey: 'lang',
   }).slice(0, 2);
 
   if (!currentLocale || !Object.keys(locales).includes(currentLocale)) {
@@ -16,6 +18,7 @@ export function rootContainer(container: any) {
   }
 
   intl.init({ currentLocale, locales });
+  setLocale(currentLocale === 'zh' ? 'zh-CN' : 'en-US');
   return container;
 }
 

src/locales/en-US.json

@@ -450,5 +450,6 @@
   "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）": "The 'Group Code' for One-to-Many Push (Below One-to-Many Push->Your Group (if not, create one)->Group Code, if you are the creator of the group, you also need to click 'View QR Code' to scan and bind, otherwise you cannot receive group messages)",
   "登录已过期，请重新登录": "Login session has expired, please log in again",
   "系统日志": "System Logs",
-  "主题": "Theme"
+  "主题": "Theme",
+  "语言": "Language"
 }

src/locales/zh-CN.json

@@ -450,5 +450,6 @@
   "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）": "一对多推送的“群组编码”（一对多推送下面->您的群组(如无则新建)->群组编码，如果您是创建群组人。也需点击“查看二维码”扫描绑定，否则不能接受群组消息推送）",
   "登录已过期，请重新登录": "登录已过期，请重新登录",
   "系统日志": "系统日志",
-  "主题": "主题"
+  "主题": "主题",
+  "语言": "语言"
 }

src/pages/setting/index.tsx

@@ -243,6 +243,9 @@ const Setting = () => {
       })
       .then(async (res) => {
         setSystemLogData(await res.text());
+        setTimeout(() => {
+          getSystemLog();
+        }, 5000);
       })
       .catch((error: any) => {
         console.log(error);
@@ -335,22 +338,6 @@ const Setting = () => {
             label: intl.get('通知设置'),
             children: <NotificationSetting data={notificationInfo} />,
           },
-          {
-            key: 'login',
-            label: intl.get('登录日志'),
-            children: <LoginLog data={loginLogData} />,
-          },
-          {
-            key: 'other',
-            label: intl.get('其他设置'),
-            children: (
-              <Other
-                reloadTheme={reloadTheme}
-                socketMessage={socketMessage}
-                systemInfo={systemInfo}
-              />
-            ),
-          },
           {
             key: 'syslog',
             label: intl.get('系统日志'),
@@ -375,6 +362,22 @@ const Setting = () => {
               />
             ),
           },
+          {
+            key: 'login',
+            label: intl.get('登录日志'),
+            children: <LoginLog data={loginLogData} />,
+          },
+          {
+            key: 'other',
+            label: intl.get('其他设置'),
+            children: (
+              <Other
+                reloadTheme={reloadTheme}
+                socketMessage={socketMessage}
+                systemInfo={systemInfo}
+              />
+            ),
+          },
           {
             key: 'about',
             label: intl.get('关于'),

src/pages/setting/other.tsx

@@ -9,7 +9,7 @@ import {
   Input,
   Upload,
   Modal,
-  Progress,
+  Select,
 } from 'antd';
 import * as DarkReader from '@umijs/ssr-darkreader';
 import config from '@/utils/config';
@@ -22,12 +22,6 @@ import { UploadOutlined } from '@ant-design/icons';
 import Countdown from 'antd/lib/statistic/Countdown';
 import useProgress from './progress';
 
-const optionsWithDisabled = [
-  { label: intl.get('亮色'), value: 'light' },
-  { label: intl.get('暗色'), value: 'dark' },
-  { label: intl.get('跟随系统'), value: 'auto' },
-];
-
 const Other = ({
   systemInfo,
   socketMessage,
@@ -67,6 +61,13 @@ const Other = ({
     reloadTheme();
   };
 
+  const handleLangChange = (v: string) => {
+    localStorage.setItem('lang', v);
+    setTimeout(() => {
+      window.location.reload();
+    }, 500);
+  };
+
   const getSystemConfig = () => {
     request
       .get(`${config.apiPrefix}system/config`)
@@ -167,12 +168,27 @@ const Other = ({
         initialValue={defaultTheme}
       >
         <Radio.Group
-          options={optionsWithDisabled}
           onChange={themeChange}
           value={defaultTheme}
           optionType="button"
           buttonStyle="solid"
-        />
+        >
+          <Radio.Button
+            value="light"
+            style={{ width: 70, textAlign: 'center' }}
+          >
+            {intl.get('亮色')}
+          </Radio.Button>
+          <Radio.Button value="dark" style={{ width: 66, textAlign: 'center' }}>
+            {intl.get('暗色')}
+          </Radio.Button>
+          <Radio.Button
+            value="auto"
+            style={{ width: 129, textAlign: 'center' }}
+          >
+            {intl.get('跟随系统')}
+          </Radio.Button>
+        </Radio.Group>
       </Form.Item>
       <Form.Item
         label={intl.get('日志删除频率')}
@@ -190,7 +206,11 @@ const Other = ({
               setSystemConfig({ ...systemConfig, logRemoveFrequency: value });
             }}
           />
-          <Button type="primary" onClick={updateSystemConfig}>
+          <Button
+            type="primary"
+            onClick={updateSystemConfig}
+            style={{ width: 84 }}
+          >
             {intl.get('确认')}
           </Button>
         </Input.Group>
@@ -198,18 +218,34 @@ const Other = ({
       <Form.Item label={intl.get('定时任务并发数')} name="frequency">
         <Input.Group compact>
           <InputNumber
-            style={{ width: 150 }}
+            style={{ width: 180 }}
             min={1}
             value={systemConfig?.cronConcurrency}
             onChange={(value) => {
               setSystemConfig({ ...systemConfig, cronConcurrency: value });
             }}
           />
-          <Button type="primary" onClick={updateSystemConfig}>
+          <Button
+            type="primary"
+            onClick={updateSystemConfig}
+            style={{ width: 84 }}
+          >
             {intl.get('确认')}
           </Button>
         </Input.Group>
       </Form.Item>
+      <Form.Item label={intl.get('语言')} name="lang">
+        <Select
+          defaultValue={localStorage.getItem('lang') || ''}
+          style={{ width: 264 }}
+          onChange={handleLangChange}
+          options={[
+            { value: '', label: intl.get('跟随系统') },
+            { value: 'zh', label: '简体中文' },
+            { value: 'en', label: 'English' },
+          ]}
+        />
+      </Form.Item>
       <Form.Item label={intl.get('数据备份还原')} name="frequency">
         <Button type="primary" onClick={exportData} loading={exportLoading}>
           {exportLoading ? intl.get('生成数据中...') : intl.get('备份')}