feat: improve language settings (#627)

* feat: fix system local setting

* feat: improve language settings

* fix: improve code

* feat: update doc

* feat: add migration

Co-authored-by: chenos <chenlinxh@gmail.com>

docs/zh-CN/user-manual/advanced-guide/language-settings.md

@@ -0,0 +1,21 @@
+# 语言设置
+
+NocoBase 可以在安装时选择语言，目前支持两种语言：
+
+- 英文：`en-US`（默认）
+- 中文：`zh-CN`
+
+```bash
+# 英文
+yarn nocobase install --lang=en-US
+# 中文
+yarn nocobase install --lang=zh-CN
+```
+
+安装之后，可以在 System settings 里修改 Enabled languages。
+
+![](../../images/language-settings-1.jpg)
+
+如果启用了多个语言，用户可以在个人中心设置自己的语言环境。
+
+![](../../images/language-settings-2.jpg)

packages/core/client/src/locale/en_US.ts

@@ -550,4 +550,5 @@ export default {
   "Subtable": "Subtable",
   "Subform": "Subform",
   "Regular expression": "Pattern",
+  "Enabled languages": "Enabled languages",
 }

packages/core/client/src/locale/zh_CN.ts

@@ -646,4 +646,5 @@ export default {
   "One to one (belongs to)": "一对一（belongs to）",
   "Use the same time zone (GMT) for all users": "所有用户使用同一时区 (格林尼治标准时间)",
   "Province/city/area name": "省市区名称",
+  "Enabled languages": "启用的语言",
 }

packages/core/client/src/system-settings/SystemSettingsShortcut.tsx

@@ -1,10 +1,11 @@
 import { SettingOutlined } from '@ant-design/icons';
 import { ISchema, useForm } from '@formily/react';
 import { uid } from '@formily/shared';
+import cloneDeep from 'lodash/cloneDeep';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { useSystemSettings } from '.';
-import { PluginManager, useAPIClient, useRequest } from '..';
+import { i18n, PluginManager, useAPIClient, useRequest } from '..';
 import locale from '../locale';
 import { ActionContext, SchemaComponent, useActionContext } from '../schema-component';
 
@@ -41,18 +42,25 @@ const useSaveSystemSettingsValues = () => {
   return {
     async run() {
       await form.submit();
-      setVisible(false);
+      const values = cloneDeep(form.values);
       mutate({
         data: {
           ...data?.data,
-          ...form.values,
+          ...values,
         },
       });
       await api.request({
         url: 'systemSettings:update/1',
         method: 'post',
-        data: form.values,
+        data: values,
       });
+      const lang = values.enabledLanguages?.[0] || 'en-US';
+      if (values.enabledLanguages.length < 2 && api.auth.getLocale() !== lang) {
+        api.auth.setLocale('');
+        window.location.reload();
+      } else {
+        setVisible(false);
+      }
     },
   };
 };
@@ -96,13 +104,18 @@ const schema: ISchema = {
           },
           'x-decorator': 'FormItem',
           enum: langs,
+          'x-reactions': (field) => {
+            field.dataSource = langs.map((item) => {
+              let label = item.label;
+              if (field.value?.[0] === item.value) {
+                label += `(${i18n.t('Default')})`;
+              }
+              return {
+                label,
+                value: item.value,
+              };
+            });
           },
-        appLang: {
-          type: 'string',
-          title: '{{t("Default language")}}',
-          'x-component': 'Select',
-          'x-decorator': 'FormItem',
-          enum: langs,
         },
         allowSignUp: {
           type: 'boolean',

packages/plugins/client/src/server.ts

@@ -29,7 +29,7 @@ export class ClientPlugin extends Plugin {
           const systemSetting = await SystemSetting.findOne();
           const enabledLanguages: string[] = systemSetting.get('enabledLanguages') || [];
           const currentUser = ctx.state.currentUser;
-          let lang = systemSetting?.appLang || process.env.APP_LANG || 'en-US';
+          let lang = enabledLanguages?.[0] || process.env.APP_LANG || 'en-US';
           if (enabledLanguages.includes(currentUser?.appLang)) {
             lang = currentUser?.appLang;
           }
@@ -44,7 +44,7 @@ export class ClientPlugin extends Plugin {
           const systemSetting = await SystemSetting.findOne();
           const enabledLanguages: string[] = systemSetting.get('enabledLanguages') || [];
           const currentUser = ctx.state.currentUser;
-          let lang = systemSetting?.appLang || process.env.APP_LANG || 'en-US';
+          let lang = enabledLanguages?.[0] || process.env.APP_LANG || 'en-US';
           if (enabledLanguages.includes(currentUser?.appLang)) {
             lang = currentUser?.appLang;
           }

packages/plugins/system-settings/src/migrations/20220714204714-update-enabled-languages.ts

@@ -0,0 +1,17 @@
+import { Migration } from '@nocobase/server';
+
+export default class UpdateEnabledLanguagesMigration extends Migration {
+  async up() {
+    const result = await this.app.version.satisfies('<=0.7.2-alpha.7');
+    if (!result) {
+      return;
+    }
+    const SystemSetting = this.context.db.getRepository('systemSettings');
+    const setting = await SystemSetting.findOne();
+    const enabledLanguages = setting.get('enabledLanguages') || [];
+    if (Array.isArray(enabledLanguages) && enabledLanguages.length === 0) {
+      setting.set('enabledLanguages', [setting.get('appLang') || 'en-US']);
+      await setting.save();
+    }
+  }
+}

packages/plugins/system-settings/src/server.ts

@@ -12,6 +12,7 @@ export class SystemSettingsPlugin extends Plugin {
       values: {
         title: 'NocoBase',
         appLang: this.getInitAppLang(options),
+        enabledLanguages: [this.getInitAppLang(options)],
         logo: {
           title: 'nocobase-logo',
           filename: '682e5ad037dd02a0fe4800a3e91c283b.png',