feat: plugin-layout在有locale时显示语言选项

2025-04-05 19:41:57 +08:00 · 2021-01-04 10:18:43 +08:00 · 2021-01-04 10:18:43 +08:00 · d23f22f631
commit d23f22f631
parent f01538ba8b
9 changed files with 44 additions and 337 deletions
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@ -29,7 +29,8 @@ export default (api) => {
            content: Mustache.render(
                readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8'),
                {
-                    REPLACE_USER_CONFIG: JSON.stringify(userConfig)
+                    REPLACE_USER_CONFIG: JSON.stringify(userConfig),
+                    HAS_LOCALE: api.pkg.dependencies?.['@webank/fes-plugin-locale']
                }
            )
        });
--- a/packages/fes-plugin-layout/src/template/runtime.tpl
+++ b/packages/fes-plugin-layout/src/template/runtime.tpl
@ -1,9 +1,13 @@
-import { reactive, toRefs } from "vue";
+import { reactive, ref } from "vue";
 import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports";
 import BaseLayout from "./views/BaseLayout.vue";
 import { fillMenuData } from "./helpers";

 const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
+const langConfig = {
+    localInited: ref(false),
+    component: null
+};
 export function rootContainer(childComponent, args) {
    const runtimeConfig = plugin.applyPlugins({
        key: "layout",
@ -19,7 +23,13 @@ export function rootContainer(childComponent, args) {
                if(runtimeConfig.userCenter){
                    return <runtimeConfig.userCenter></runtimeConfig.userCenter>
                }
-                return <></>
+                return <div></div>
+            },
+            lang: () => {
+                if(langConfig.localInited.value){
+                    return <langConfig.component></langConfig.component>
+                }
+                return <div></div>
            }
          };
        return (
@ -27,4 +37,11 @@ export function rootContainer(childComponent, args) {
            </BaseLayout>
        );
    };
-}
+}
+
+{{#HAS_LOCALE}}
+export function onLocaleReady({ i18n, SelectLang }){
+    langConfig.localInited.value = true;
+    langConfig.component = SelectLang;
+}
+{{/HAS_LOCALE}}
--- a/packages/fes-plugin-layout/src/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue
@ -20,7 +20,7 @@
                <div class="layout-header-user">
                    <slot name="userCenter"></slot>
                </div>
-                <SelectLang />
+                <slot name="lang"></slot>
            </a-layout-header>
            <a-layout-content class="layout-content">
                <slot></slot>
@ -34,7 +34,7 @@

 <script>
 import { ref, computed } from 'vue';
-import { useRoute, SelectLang } from '@webank/fes';
+import { useRoute } from '@@/core/coreExports';
 import Layout from 'ant-design-vue/lib/layout';
 import 'ant-design-vue/lib/layout/style';
 import Menu from './Menu';
@ -46,8 +46,7 @@ export default {
        [Layout.Content.name]: Layout.Content,
        [Layout.Header.name]: Layout.Header,
        [Layout.Footer.name]: Layout.Footer,
-        Menu,
-        SelectLang: SelectLang || (<></>)
+        Menu
    },
    props: {
        menus: {
--- a/packages/fes-plugin-layout/src/views/Menu.vue
+++ b/packages/fes-plugin-layout/src/views/Menu.vue
@ -46,7 +46,7 @@

 <script>
 import { toRefs, computed } from 'vue';
-import { useRoute, useRouter } from '@webank/fes';
+import { useRoute, useRouter } from '@@/core/coreExports';
 import Menu from 'ant-design-vue/lib/menu';
 import 'ant-design-vue/lib/menu/style';
 import {
--- a/packages/fes-plugin-locale/src/index.js
+++ b/packages/fes-plugin-locale/src/index.js
@ -80,10 +80,12 @@ export default (api) => {

    api.addPluginExports(() => [
        {
-            specifiers: ['useI18n', 'setLocale', 'SelectLang'],
+            specifiers: ['useI18n', 'setLocale'],
            source: absoluteFilePath
        }
    ]);

+    api.addRuntimePluginKey(() => 'onLocaleReady');
+
    api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
 };
--- a/packages/fes-plugin-locale/src/template/core.tpl
+++ b/packages/fes-plugin-locale/src/template/core.tpl
@ -5,325 +5,10 @@
 // locales目录下以语言简称为子文件下存放配置信息
 // 其他插件可以运行时修改配置
 // 所有插件使用一个语言和配置
-
 import { createI18n, useI18n }  from 'vue-i18n/dist/vue-i18n.esm-bundler.js';
+import { plugin, ApplyPluginsType } from "@@/core/coreExports";
 import SelectLang from "./views/SelectLang"

-const defaultLangUConfigMap = {
-  'ar-EG': {
-    lang: 'ar-EG',
-    label: 'العربية',
-    icon: '🇪🇬',
-    title: 'لغة'
-  },
-  'az-AZ': {
-    lang: 'az-AZ',
-    label: 'Azərbaycan dili',
-    icon: '🇦🇿',
-    title: 'Dil'
-  },
-  'bg-BG': {
-    lang: 'bg-BG',
-    label: 'Български език',
-    icon: '🇧🇬',
-    title: 'език'
-  },
-  'ca-ES': {
-    lang: 'ca-ES',
-    label: 'Catalá',
-    icon: '🇨🇦',
-    title: 'llengua'
-  },
-  'cs-CZ': {
-    lang: 'cs-CZ',
-    label: 'Čeština',
-    icon: '🇨🇿',
-    title: 'Jazyk'
-  },
-  'da-DK': {
-    lang: 'da-DK',
-    label: 'Dansk',
-    icon: '🇩🇰',
-    title: 'Sprog'
-  },
-  'de-DE': {
-    lang: 'de-DE',
-    label: 'Deutsch',
-    icon: '🇩🇪',
-    title: 'Sprache'
-  },
-  'el-GR': {
-    lang: 'el-GR',
-    label: 'Ελληνικά',
-    icon: '🇬🇷',
-    title: 'Γλώσσα'
-  },
-  'en-GB': {
-    lang: 'en-GB',
-    label: 'English',
-    icon: '🇬🇧',
-    title: 'Language'
-  },
-  'en-US': {
-    lang: 'en-US',
-    label: 'English',
-    icon: '🇺🇸',
-    title: 'Language'
-  },
-  'es-ES': {
-    lang: 'es-ES',
-    label: 'Español',
-    icon: '🇪🇸',
-    title: 'Idioma'
-  },
-  'et-EE': {
-    lang: 'et-EE',
-    label: 'Eesti',
-    icon: '🇪🇪',
-    title: 'Keel'
-  },
-  'fa-IR': {
-    lang: 'fa-IR',
-    label: 'فارسی',
-    icon: '🇮🇷',
-    title: 'زبان'
-  },
-  'fi-FI': {
-    lang: 'fi-FI',
-    label: 'Suomi',
-    icon: '🇫🇮',
-    title: 'Kieli'
-  },
-  'fr-BE': {
-    lang: 'fr-BE',
-    label: 'Français',
-    icon: '🇧🇪',
-    title: 'Langue'
-  },
-  'fr-FR': {
-    lang: 'fr-FR',
-    label: 'Français',
-    icon: '🇫🇷',
-    title: 'Langue'
-  },
-  'ga-IE': {
-    lang: 'ga-IE',
-    label: 'Gaeilge',
-    icon: '🇮🇪',
-    title: 'Teanga'
-  },
-  'he-IL': {
-    lang: 'he-IL',
-    label: 'עברית',
-    icon: '🇮🇱',
-    title: 'שפה'
-  },
-  'hi-IN': {
-    lang: 'hi-IN',
-    label: 'हिन्दी, हिंदी',
-    icon: '🇮🇳',
-    title: 'भाषा: हिन्दी'
-  },
-  'hr-HR': {
-    lang: 'hr-HR',
-    label: 'Hrvatski jezik',
-    icon: '🇭🇷',
-    title: 'Jezik'
-  },
-  'hu-HU': {
-    lang: 'hu-HU',
-    label: 'Magyar',
-    icon: '🇭🇺',
-    title: 'Nyelv'
-  },
-  'hy-AM': {
-    lang: 'hu-HU',
-    label: 'Հայերեն',
-    icon: '🇦🇲',
-    title: 'Լեզու'
-  },
-  'id-ID': {
-    lang: 'id-ID',
-    label: 'Bahasa Indonesia',
-    icon: '🇮🇩',
-    title: 'Bahasa'
-  },
-  'it-IT': {
-    lang: 'it-IT',
-    label: 'Italiano',
-    icon: '🇮🇹',
-    title: 'Linguaggio'
-  },
-  'is-IS': {
-    lang: 'is-IS',
-    label: 'Íslenska',
-    icon: '🇮🇸',
-    title: 'Tungumál'
-  },
-  'ja-JP': {
-    lang: 'ja-JP',
-    label: '日本語',
-    icon: '🇯🇵',
-    title: '言語'
-  },
-  'ku-IQ': {
-    lang: 'ku-IQ',
-    label: 'کوردی',
-    icon: '🇮🇶',
-    title: 'Ziman'
-  },
-  'kn-IN': {
-    lang: 'zh-TW',
-    label: 'ಕನ್ನಡ',
-    icon: '🇮🇳',
-    title: 'ಭಾಷೆ'
-  },
-  'ko-KR': {
-    lang: 'ko-KR',
-    label: '한국어',
-    icon: '🇰🇷',
-    title: '언어'
-  },
-  'lv-LV': {
-    lang: 'lv-LV',
-    label: 'Latviešu valoda',
-    icon: '🇱🇮',
-    title: 'Kalba'
-  },
-  'mk-MK': {
-    lang: 'mk-MK',
-    label: 'македонски јазик',
-    icon: '🇲🇰',
-    title: 'Јазик'
-  },
-  'mn-MN': {
-    lang: 'mn-MN',
-    label: 'Монгол хэл',
-    icon: '🇲🇳',
-    title: 'Хэл'
-  },
-  'ms-MY': {
-    lang: 'ms-MY',
-    label: 'بهاس ملايو‎',
-    icon: '🇲🇾',
-    title: 'Bahasa'
-  },
-  'nb-NO': {
-    lang: 'nb-NO',
-    label: 'Norsk',
-    icon: '🇳🇴',
-    title: 'Språk'
-  },
-  'ne-NP': {
-    lang: 'ne-NP',
-    label: 'नेपाली',
-    icon: '🇳🇵',
-    title: 'भाषा'
-  },
-  'nl-BE': {
-    lang: 'nl-BE',
-    label: 'Vlaams',
-    icon: '🇧🇪',
-    title: 'Taal'
-  },
-  'nl-NL': {
-    lang: 'nl-NL',
-    label: 'Vlaams',
-    icon: '🇳🇱',
-    title: 'Taal'
-  },
-  'pt-BR': {
-    lang: 'pt-BR',
-    label: 'Português',
-    icon: '🇧🇷',
-    title: 'Idiomas'
-  },
-  'pt-PT': {
-    lang: 'pt-PT',
-    label: 'Português',
-    icon: '🇵🇹',
-    title: 'Idiomas'
-  },
-  'ro-RO': {
-    lang: 'ro-RO',
-    label: 'Română',
-    icon: '🇷🇴',
-    title: 'Limba'
-  },
-  'ru-RU': {
-    lang: 'ru-RU',
-    label: 'русский',
-    icon: '🇷🇺',
-    title: 'язык'
-  },
-  'sk-SK': {
-    lang: 'sk-SK',
-    label: 'Slovenčina',
-    icon: '🇸🇰',
-    title: 'Jazyk'
-  },
-  'sr-RS': {
-    lang: 'sr-RS',
-    label: 'српски језик',
-    icon: '🇸🇷',
-    title: 'Језик'
-  },
-  'sl-SI': {
-    lang: 'sl-SI',
-    label: 'Slovenščina',
-    icon: '🇸🇱',
-    title: 'Jezik'
-  },
-  'sv-SE': {
-    lang: 'sv-SE',
-    label: 'Svenska',
-    icon: '🇸🇪',
-    title: 'Språk'
-  },
-  'ta-IN': {
-    lang: 'ta-IN',
-    label: 'தமிழ்',
-    icon: '🇮🇳',
-    title: 'மொழி'
-  },
-  'th-TH': {
-    lang: 'th-TH',
-    label: 'ไทย',
-    icon: '🇹🇭',
-    title: 'ภาษา'
-  },
-  'tr-TR': {
-    lang: 'tr-TR',
-    label: 'Türkçe',
-    icon: '🇹🇷',
-    title: 'Dil'
-  },
-  'uk-UA': {
-    lang: 'uk-UA',
-    label: 'Українська',
-    icon: '🇺🇰',
-    title: 'Мова'
-  },
-  'vi-VN': {
-    lang: 'vi-VN',
-    label: 'Tiếng Việt',
-    icon: '🇻🇳',
-    title: 'Ngôn ngữ'
-  },
-  'zh-CN': {
-    lang: 'zh-CN',
-    label: '简体中文',
-    icon: '🇨🇳',
-    title: '语言'
-  },
-  'zh-TW': {
-    lang: 'zh-TW',
-    label: '繁体中文',
-    icon: '🇭🇰',
-    title: '語言'
-  }
-};
-
 const locales = {{{REPLACE_LOCALES}}};

 const defaultOptions = {{{REPLACE_DEFAULT_OPTIONS}}}
@ -347,6 +32,11 @@ const getAllLocales = ()=>{};

 const install = (app)=>{
    app.use(i18n);
+    plugin.applyPlugins({
+        key: 'onLocaleReady',
+        type: ApplyPluginsType.event,
+        args: { i18n, SelectLang }
+    });
 }

-export { useI18n, setLocale, SelectLang, install }
+export { useI18n, setLocale, install }
--- a/packages/fes-runtime/src/plugin/index.js
+++ b/packages/fes-runtime/src/plugin/index.js
@ -30,7 +30,7 @@ export default class Plugin {
        Object.keys(plugin.apply).forEach((key) => {
            assert(
                this.validKeys.indexOf(key) > -1,
-                `register failed, invalid key ${key} from plugin ${plugin.path}.`,
+                `register failed, invalid key ${key} from plugin ${plugin.path}.`
            );
            if (!this.hooks[key]) this.hooks[key] = [];
            this.hooks[key] = this.hooks[key].concat(plugin.apply[key]);
@ -70,7 +70,7 @@ export default class Plugin {
        if (args) {
            assert(
                typeof args === 'object',
-                'applyPlugins failed, args must be plain object.',
+                'applyPlugins failed, args must be plain object.'
            );
        }

@ -80,7 +80,7 @@ export default class Plugin {
                    return hooks.reduce(
                        async (memo, hook) => {
                            assert(typeof hook === 'function' || typeof hook === 'object' || isPromiseLike(hook),
-                                `applyPlugins failed, all hooks for key ${key} must be function, plain object or Promise.`,);
+                                `applyPlugins failed, all hooks for key ${key} must be function, plain object or Promise.`);
                            if (isPromiseLike(memo)) {
                                memo = await memo;
                            }
@ -98,13 +98,13 @@ export default class Plugin {
                        },
                        isPromiseLike(initialValue)
                            ? initialValue
-                            : Promise.resolve(initialValue),
+                            : Promise.resolve(initialValue)
                    );
                }
                return hooks.reduce((memo, hook) => {
                    assert(
                        typeof hook === 'function' || typeof hook === 'object',
-                        `applyPlugins failed, all hooks for key ${key} must be function or plain object.`,
+                        `applyPlugins failed, all hooks for key ${key} must be function or plain object.`
                    );
                    if (typeof hook === 'function') {
                        return hook(memo, args);
@ -117,7 +117,7 @@ export default class Plugin {
                return hooks.forEach((hook) => {
                    assert(
                        typeof hook === 'function',
-                        `applyPlugins failed, all hooks for key ${key} must be function.`,
+                        `applyPlugins failed, all hooks for key ${key} must be function.`
                    );
                    hook(args);
                });
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -21,10 +21,6 @@ export default {
            name: 'onepiece'
        }]
    },
-    locale: {
-        locale: 'zh-CN',
-        fallbackLocale: 'zh-CN'
-    },
    devServer: {
        port: 8080
    }
--- a/packages/fes-template/src/app.js
+++ b/packages/fes-template/src/app.js
@ -1,3 +1,5 @@
+
+
 import { access } from '@webank/fes';
 import PageLoading from '@/components/PageLoading';
 import UserCenter from '@/components/UserCenter';