From 2e75e59eeb3fca5c7280418e6f49e245a09c6bdb Mon Sep 17 00:00:00 2001 From: harrywan Date: Wed, 23 Oct 2024 17:09:00 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20locale=E6=8F=92=E4=BB=B6=E6=9A=B4?= =?UTF-8?q?=E6=BC=8FonLocaleChange=E4=BA=8B=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/reference/plugin/plugins/locale.md | 77 +++++++++++-------- packages/fes-plugin-locale/src/index.js | 2 + .../fes-plugin-locale/src/runtime/core.js.tpl | 16 +++- packages/fes-plugin-locale/types.d.ts | 3 + packages/fes-template/src/app.jsx | 5 ++ 5 files changed, 67 insertions(+), 36 deletions(-) diff --git a/docs/reference/plugin/plugins/locale.md b/docs/reference/plugin/plugins/locale.md index ffde2fcb..59bbb081 100644 --- 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，语言的名称，应该是符合 `-` 规范的名称。 -- **返回值**：`null` +- **类型**：`Function` +- **详情**：设置当前的语言。 +- **参数**： + - locale，语言的名称，应该是符合 `-` 规范的名称。 +- **返回值**：`null` ```js import { locale } from '@fesjs/fes'; @@ -177,12 +188,12 @@ locale.setLocale({ locale: 'en-US' }); #### locale.addLocale -- **类型**：`Function` -- **详情**：手动添加语言配置。 -- **参数**： - - locale，语言的名称，符合 `-` 规范的名称。 - - messages, 语言信息。 -- **返回值**：`null` +- **类型**：`Function` +- **详情**：手动添加语言配置。 +- **参数**： + - locale，语言的名称，符合 `-` 规范的名称。 + - 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-locale/src/index.js b/packages/fes-plugin-locale/src/index.js index 95e66602..2aea0411 100644 --- 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 index e4efc19a..5f4eddac 100644 --- 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,10 +89,13 @@ 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, diff --git a/packages/fes-plugin-locale/types.d.ts b/packages/fes-plugin-locale/types.d.ts index 62b4917c..cef5d9bf 100644 --- 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/src/app.jsx b/packages/fes-template/src/app.jsx index 9e7ee8b2..5407043a 100644 --- 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 }) { + // 切换语言 + console.log(locale); +} + export const beforeRender = { loading: , action() {