feat: 暴露语言变化事件 & layout的title支持配置国际化 (#255)

* feat: layout的title支持国际化 * feat: locale插件暴漏onLocaleChange事件 * chore: change docs * fix: 去掉无用代码 --------- Co-authored-by: winixt <[email protected]>
WeBankFinTech · Oct 23, 2024 · a303e17 · a303e17
1 parent db35857
commit a303e17
Show file tree

Hide file tree

Showing 9 changed files with 87 additions and 50 deletions.
diff --git a/docs/guide/upgrade3.md b/docs/guide/upgrade3.md
@@ -11,7 +11,7 @@
 
 1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`。
 2. 如果设置了 `publicPath: './'`，请更改为 `publicPath: ''`
-3. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
+3. 将 html 模版文件从 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
 
 ## 换成 Vite
 

diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md
@@ -233,7 +233,7 @@ export function layout(layoutConfig, { initialState }) {
 - **类型**：`String`
 - **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
 
-- **详情**：产品名。
+- **详情**：产品名，当配置为"$"开头时，开启国际化，使用`$`后面的内容去匹配语言设置。
 
 ### logo
 

diff --git a/docs/reference/plugin/plugins/locale.md b/docs/reference/plugin/plugins/locale.md
@@ -69,11 +69,9 @@ export default {
 
 想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
 
-
 ### 多层配置
-如果国际化内容较多，希望模块化配置，则可以这样：
 
-```
+如果国际化内容较多，希望模块化配置，则可以这样：
 src
   ├── locales
   │    ├── zh-CN.js
@@ -84,6 +82,7 @@ src
   └── pages
   │    └── index.vue
   └── app.js
+
 ```
 
 插件会把相同语言的配置合并在一起！
@@ -115,37 +114,49 @@ export default {
 
 #### locale
 
--   **类型**：`String`
--   **默认值**：`zh-CN`
+- **类型**：`String`
+- **默认值**：`zh-CN`
 
--   **详情**：当前的语言。
+- **详情**：当前的语言。
 
 #### fallbackLocale
 
--   **类型**：`String`
--   **默认值**：`zh-CN`
+- **类型**：`String`
+- **默认值**：`zh-CN`
 
--   **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
+- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
 
 #### baseNavigator
 
--   **类型**：`Boolean`
--   **默认值**：`true`
+- **类型**：`Boolean`
+- **默认值**：`true`
 
--   **详情**：开启浏览器语言检测。
+- **详情**：开启浏览器语言检测。
 
 默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
 
 #### legacy
 
--   **类型**：`Boolean`
--   **默认值**：`false`
+- **类型**：`Boolean`
+- **默认值**：`false`
 
--   **详情**：用户是否需要 Legacy API 模式
+- **详情**：用户是否需要 Legacy API 模式
 
 ### 运行时配置
 
-暂无。
+## onLocaleChange
+
+当语言环境发生变化时，会触发此函数。
+
+```js
+import { defineRuntimeConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    onLocaleChange: ({ t, locale }) => {
+
+    }
+});
+```
 
 ## API
 
@@ -159,16 +170,16 @@ import { locale } from '@fesjs/fes';
 
 #### locale.messages
 
--   **类型**：`Object`
--   **详情**：当前的配置的语言信息。
+- **类型**：`Object`
+- **详情**：当前的配置的语言信息。
 
 #### locale.setLocale
 
--   **类型**：`Function`
--   **详情**：设置当前的语言。
--   **参数**：
-    -   locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
--   **返回值**：`null`
+- **类型**：`Function`
+- **详情**：设置当前的语言。
+- **参数**：
+  - locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
+- **返回值**：`null`
 
 ```js
 import { locale } from '@fesjs/fes';
@@ -177,12 +188,12 @@ locale.setLocale({ locale: 'en-US' });
 
 #### locale.addLocale
 
--   **类型**：`Function`
--   **详情**：手动添加语言配置。
--   **参数**：
-    -   locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
-    -   messages, 语言信息。
--   **返回值**：`null`
+- **类型**：`Function`
+- **详情**：手动添加语言配置。
+- **参数**：
+  - locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
+  - messages, 语言信息。
+- **返回值**：`null`
 
 ```js
 import { locale } from '@fesjs/fes';
@@ -191,10 +202,10 @@ locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
 
 #### locale.getAllLocales
 
--   **类型**：`Function`
--   **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
--   **参数**：null
--   **返回值**：`Array`
+- **类型**：`Function`
+- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
+- **参数**：null
+- **返回值**：`Array`
 
 ```js
 import { locale } from '@fesjs/fes';

diff --git a/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue b/packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue
@@ -11,8 +11,8 @@
             >
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <LayoutMenu
@@ -58,8 +58,8 @@
                     <div>
                         <div class="layout-logo">
                             <img v-if="logo" :src="logo" class="logo-img">
-                            <div v-if="title" class="logo-name">
-                                {{ title }}
+                            <div v-if="transformedTitle" class="logo-name">
+                                {{ transformedTitle }}
                             </div>
                         </div>
                         <LayoutMenu
@@ -98,8 +98,8 @@
             <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <LayoutMenu
@@ -131,8 +131,8 @@
             <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <LayoutMenu
@@ -184,8 +184,8 @@
             <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <div class="layout-header-custom">
@@ -231,6 +231,7 @@ import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
 import { computed, nextTick, ref, watch } from 'vue';
 import defaultLogo from '../assets/logo.png';
 import { flatNodes } from '../helpers/utils';
+import { transTitle } from '../helpers/pluginLocale';
 import LayoutMenu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
 
@@ -302,6 +303,10 @@ export default {
         const route = useRoute();
         const router = useRouter();
 
+        const transformedTitle = computed(() => {
+            return transTitle(props.title);
+        });
+
         const currentNavigation = computed(() => {
             if (route.meta.layout && route.meta.layout.navigation !== undefined) {
                 return route.meta.layout.navigation;
@@ -397,6 +402,7 @@ export default {
             currentNavigation,
             rootMenus,
             activeSubMenus,
+            transformedTitle,
         };
     },
 };

diff --git a/packages/fes-plugin-locale/src/index.js b/packages/fes-plugin-locale/src/index.js
@@ -24,6 +24,8 @@ export default (api) => {
 
     api.addRuntimePluginKey(() => 'locale');
 
+    api.addRuntimePluginKey(() => 'onLocaleChange');
+
     const absoluteFilePath = join(namespace, 'core.js');
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');

diff --git a/packages/fes-plugin-locale/src/runtime/core.js.tpl b/packages/fes-plugin-locale/src/runtime/core.js.tpl
@@ -8,7 +8,7 @@
 import { isRef, unref } from 'vue';
 import { createI18n, useI18n } from '{{{ VUE_I18N_PATH }}}';
 import locales from './locales'
-
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
 
 const defaultOptions = {{{REPLACE_DEFAULT_OPTIONS}}};
 
@@ -51,6 +51,8 @@ const i18n = createI18n({
     messages,
 });
 
+const t = i18n.global.t;
+
 window.localStorage.setItem("fes_locale", unref(i18n.global.locale));
 const setLocale = ({ locale }) => {
     if (isRef(i18n.global.locale)) {
@@ -59,6 +61,11 @@ const setLocale = ({ locale }) => {
         i18n.global.locale = locale;
     }
     window.localStorage.setItem("fes_locale", locale);
+    plugin.applyPlugins({
+        key: 'onLocaleChange',
+        type: ApplyPluginsType.event,
+        args: { i18n, t, locale: unref(i18n.global.locale) },
+    });
 };
 
 const getLocale = () => {
@@ -82,17 +89,20 @@ const getAllLocales = () => {
 
 const install = (app) => {
     app.use(i18n);
+    plugin.applyPlugins({
+        key: 'onLocaleChange',
+        type: ApplyPluginsType.event,
+        args: { i18n, t, locale: unref(i18n.global.locale) },
+    });
 };
 
-const t = i18n.global.t;
-
 const locale = {
     setLocale,
     getLocale,
     addLocale,
     getAllLocales,
     messages,
-    t
+    t,
 };
 
 export { useI18n, locale, install };
diff --git a/packages/fes-plugin-locale/types.d.ts b/packages/fes-plugin-locale/types.d.ts
@@ -21,4 +21,7 @@ declare module '@fesjs/fes' {
             }
             | false;
     }
+    interface PluginRuntimeConfig {
+        onLocaleChange: (params: { t: VueI18n['t']; locale: string }) => void;
+    }
 }
diff --git a/packages/fes-template/.fes.js b/packages/fes-template/.fes.js
@@ -33,7 +33,7 @@ export default defineBuildConfig({
         },
     },
     layout: {
-        title: 'Fes.js',
+        title: '$home',
         footer: 'Created by MumbleFE',
         multiTabs: true,
         navigation: 'mixin',

diff --git a/packages/fes-template/src/app.jsx b/packages/fes-template/src/app.jsx
@@ -3,6 +3,11 @@ import { ref, watch } from 'vue';
 import PageLoading from '@/components/pageLoading.vue';
 import UserCenter from '@/components/userCenter.vue';
 
+export function onLocaleChange({ locale, t }) {
+    // 切换语言
+    console.log(locale, t);
+}
+
 export const beforeRender = {
     loading: <PageLoading />,
     action() {