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

* feat: layout的title支持国际化

* feat: locale插件暴漏onLocaleChange事件

* chore: change docs

* fix: 去掉无用代码

---------

Co-authored-by: winixt <haizekuo@gmail.com>

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
 

docs/reference/plugin/plugins/layout.md

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

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
+
 ```
 
 插件会把相同语言的配置合并在一起！
@@ -145,7 +144,19 @@ export default {
 
 ### 运行时配置
 
-暂无。
+## onLocaleChange
+
+当语言环境发生变化时，会触发此函数。
+
+```js
+import { defineRuntimeConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    onLocaleChange: ({ t, locale }) => {
+
+    }
+});
+```
 
 ## API
 

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">
+                    <div v-if="transformedTitle" class="logo-name">
-                        {{ title }}
+                        {{ 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">
+                            <div v-if="transformedTitle" class="logo-name">
-                                {{ title }}
+                                {{ 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">
+                    <div v-if="transformedTitle" class="logo-name">
-                        {{ title }}
+                        {{ 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">
+                    <div v-if="transformedTitle" class="logo-name">
-                        {{ title }}
+                        {{ 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">
+                    <div v-if="transformedTitle" class="logo-name">
-                        {{ title }}
+                        {{ 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,
         };
     },
 };

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');

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 };

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;
+    }
 }

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',

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() {