From 0a78b72fdf00e6333634fafffa6868d69c2553a2 Mon Sep 17 00:00:00 2001
From: harrywan <harrywan@webank.com>
Date: Wed, 4 Sep 2024 15:27:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20plugin-layout=E7=9A=84=E9=A1=B5?=
 =?UTF-8?q?=E7=AD=BE=E4=BF=A1=E6=81=AF=E6=94=AF=E6=8C=81=E5=9B=BD=E9=99=85?=
 =?UTF-8?q?=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |  3 +
 packages/fes-plugin-layout/src/index.js       |  7 +++
 .../src/runtime/helpers/fillMenu.js           |  8 +--
 .../src/runtime/helpers/pluginLocale.js       |  9 +--
 .../src/runtime/helpers/svg.js                |  8 +--
 .../src/runtime/helpers/utils.js              |  5 +-
 .../src/runtime/locales/layout/en-US.js       |  6 ++
 .../src/runtime/locales/layout/zh-CN.js       |  6 ++
 .../src/runtime/views/MultiTabProvider.vue    | 59 +++++++++++++------
 packages/fes-plugin-locale/src/index.js       | 23 ++++++--
 .../fes-plugin-locale/src/runtime/runtime.js  |  4 +-
 .../src/runtime/views/SelectLang.vue          | 10 ++--
 packages/fes-plugin-locale/src/utils/index.js | 44 +++++++-------
 13 files changed, 127 insertions(+), 65 deletions(-)
 create mode 100644 packages/fes-plugin-layout/src/runtime/locales/layout/en-US.js
 create mode 100644 packages/fes-plugin-layout/src/runtime/locales/layout/zh-CN.js

diff --git a/.vscode/settings.json b/.vscode/settings.json
index 1d237d44..fb221bd7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -31,5 +31,8 @@
             "source": "./fixtures/output/**/*.*",
             "target": "./fixtures/input/<base>"
         }
+    ],
+    "cSpell.words": [
+        "unref"
     ]
 }
diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js
index 5ff334de..5fe82f90 100644
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@@ -30,6 +30,13 @@ export default (api) => {
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');
 
+    api.register({
+        key: 'addExtraLocales',
+        fn: () => [
+            join(api.paths.absTmpPath, namespace, 'locales'),
+        ],
+    });
+
     api.onGenerateFiles(async () => {
         // .fes配置
         const userConfig = {
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js b/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js
index 366dfa4f..b6345a0a 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js
@@ -1,4 +1,4 @@
-const getMetaByName = (config, name) => {
+function getMetaByName(config, name) {
     let res = {};
     if (Array.isArray(config)) {
         for (let i = 0; i < config.length; i++) {
@@ -17,9 +17,9 @@ const getMetaByName = (config, name) => {
         }
     }
     return res;
-};
+}
 
-const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
+function fillMenuByRoute(menuConfig, routeConfig, dep = 0) {
     dep += 1;
     if (dep > 3) {
         console.warn('[plugin-layout]: 菜单层级最好不要超出三层！');
@@ -44,6 +44,6 @@ const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
         });
     }
     return arr;
-};
+}
 
 export default fillMenuByRoute;
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
index 0691f188..f6ab7a9c 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js
@@ -1,6 +1,6 @@
 import { plugin } from '@@/core/coreExports';
 
-export const transTitle = (name) => {
+export function transTitle(name) {
     if (!/^\$\S+$/.test(name)) {
         return name;
     }
@@ -10,10 +10,10 @@ export const transTitle = (name) => {
         return t(name.slice(1));
     }
     return name;
-};
+}
 
-export const transform = (menus) =>
-    menus.map((menu) => {
+export function transform(menus) {
+    return menus.map((menu) => {
         const copy = {
             ...menu,
             label: transTitle(menu.label),
@@ -23,3 +23,4 @@ export const transform = (menus) =>
         }
         return copy;
     });
+}
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/svg.js b/packages/fes-plugin-layout/src/runtime/helpers/svg.js
index f42d5cb5..54ea0491 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/svg.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/svg.js
@@ -2,7 +2,7 @@ const isStr = function (str) {
     return typeof str === 'string';
 };
 
-export const isValid = (elm) => {
+export function isValid(elm) {
     if (elm.nodeType === 1) {
         if (elm.nodeName.toLowerCase() === 'script') {
             return false;
@@ -22,9 +22,9 @@ export const isValid = (elm) => {
         }
     }
     return true;
-};
+}
 
-export const validateContent = (svgContent) => {
+export function validateContent(svgContent) {
     const div = document.createElement('div');
     div.innerHTML = svgContent;
 
@@ -46,4 +46,4 @@ export const validateContent = (svgContent) => {
         }
     }
     return '';
-};
+}
diff --git a/packages/fes-plugin-layout/src/runtime/helpers/utils.js b/packages/fes-plugin-layout/src/runtime/helpers/utils.js
index 29750c4d..c104bc76 100644
--- a/packages/fes-plugin-layout/src/runtime/helpers/utils.js
+++ b/packages/fes-plugin-layout/src/runtime/helpers/utils.js
@@ -1,8 +1,9 @@
-export const flatNodes = (nodes = []) =>
-    nodes.reduce((res, node) => {
+export function flatNodes(nodes = []) {
+    return nodes.reduce((res, node) => {
         res.push(node);
         if (node.children) {
             res = res.concat(flatNodes(node.children));
         }
         return res;
     }, []);
+}
diff --git a/packages/fes-plugin-layout/src/runtime/locales/layout/en-US.js b/packages/fes-plugin-layout/src/runtime/locales/layout/en-US.js
new file mode 100644
index 00000000..04cea5c9
--- /dev/null
+++ b/packages/fes-plugin-layout/src/runtime/locales/layout/en-US.js
@@ -0,0 +1,6 @@
+export default {
+    pluginLayout: {
+        closeOtherPage: 'Close Other Page',
+        reloadPage: 'Reload Page',
+    },
+};
diff --git a/packages/fes-plugin-layout/src/runtime/locales/layout/zh-CN.js b/packages/fes-plugin-layout/src/runtime/locales/layout/zh-CN.js
new file mode 100644
index 00000000..d21ae72e
--- /dev/null
+++ b/packages/fes-plugin-layout/src/runtime/locales/layout/zh-CN.js
@@ -0,0 +1,6 @@
+export default {
+    pluginLayout: {
+        closeOtherPage: '关闭其他页签',
+        reloadPage: '刷新当前页签',
+    },
+};
diff --git a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
index 96b9e683..cd78be98 100644
--- a/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue
@@ -7,7 +7,7 @@
             type="card"
             class="layout-content-tabs"
             @close="handleCloseTab"
-            @update:modelValue="switchPage"
+            @update:model-value="switchPage"
         >
             <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="pageList.length > 1">
                 <template #tab>
@@ -30,7 +30,7 @@
 import { computed, ref, unref } from 'vue';
 import { FDropdown, FTabPane, FTabs } from '@fesjs/fes-design';
 import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon';
-import { useRoute, useRouter } from '@@/core/coreExports';
+import { plugin, useRoute, useRouter } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
 import { deleteTitle, getTitle } from '../useTitle';
 import { useLayout } from '../useLayout';
@@ -71,26 +71,45 @@ export default {
         };
 
         const pageList = ref([createPage(router.currentRoute.value)]);
-        const actions = [
-            {
-                value: 'closeOtherPage',
-                label: '关闭其他页签',
-            },
-            {
-                value: 'reloadPage',
-                label: '刷新当前页签',
-            },
-        ];
+
+        const actions = computed(() => {
+            const sharedLocale = plugin.getShared('locale');
+            if (sharedLocale) {
+                const { t } = sharedLocale.locale;
+                return [
+                    {
+                        value: 'closeOtherPage',
+                        label: t('pluginLayout.closeOtherPage'),
+                    },
+                    {
+                        value: 'reloadPage',
+                        label: t('pluginLayout.reloadPage'),
+                    },
+                ];
+            }
+            return [
+                {
+                    value: 'closeOtherPage',
+                    label: '关闭其他页签',
+                },
+                {
+                    value: 'reloadPage',
+                    label: '刷新当前页签',
+                },
+            ];
+        });
 
         const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
 
         router.beforeEach((to) => {
             const page = findPage(to.path);
-            if (!page)
+            if (!page) {
                 pageList.value = [...pageList.value, createPage(to)];
+            }
 
-            else
+            else {
                 page.route = to;
+            }
 
             return true;
         });
@@ -113,11 +132,13 @@ export default {
             const index = list.indexOf(selectedPage);
             if (route.path === selectedPage.path) {
                 if (list.length > 1) {
-                    if (list.length - 1 === index)
+                    if (list.length - 1 === index) {
                         await switchPage(list[index - 1].path);
+                    }
 
-                    else
+                    else {
                         await switchPage(list[index + 1].path);
+                    }
                 }
             }
             list.splice(index, 1);
@@ -129,8 +150,9 @@ export default {
 
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
-            if (selectedPage)
+            if (selectedPage) {
                 selectedPage.key = getKey();
+            }
         };
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -139,8 +161,9 @@ export default {
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
-            if (selectedPage)
+            if (selectedPage) {
                 return selectedPage.key;
+            }
 
             return '';
         };
diff --git a/packages/fes-plugin-locale/src/index.js b/packages/fes-plugin-locale/src/index.js
index b5338b3a..558450f2 100644
--- a/packages/fes-plugin-locale/src/index.js
+++ b/packages/fes-plugin-locale/src/index.js
@@ -1,5 +1,5 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { name } from '../package.json';
 
 const namespace = 'plugin-locale';
@@ -32,10 +32,17 @@ export default (api) => {
         return join(api.paths.absSrcPath, api.config.singular ? 'locale' : 'locales');
     }
 
+    api.register({
+        key: 'addExtraLocales',
+        fn: () => [
+            getLocaleFileBasePath(),
+        ],
+    });
+
     // 监听 locale 文件改变，重新生成文件
     api.addTmpGenerateWatcherPaths(getLocaleFileBasePath);
 
-    api.onGenerateFiles(() => {
+    api.onGenerateFiles(async () => {
         // .fes配置
         const userConfig = {
             locale: 'zh-CN', // default locale
@@ -45,9 +52,13 @@ export default (api) => {
             ...api.config.locale,
         };
 
-        const localeConfigFileBasePath = getLocaleFileBasePath();
+        const additionalLocales = await api.applyPlugins({
+            key: 'addExtraLocales',
+            type: api.ApplyPluginsType.add,
+            initialValue: [],
+        });
 
-        const { files, locales } = getLocales(localeConfigFileBasePath);
+        const { files, locales } = getLocales(additionalLocales);
 
         const { baseNavigator, ...otherConfig } = userConfig;
 
@@ -55,7 +66,7 @@ export default (api) => {
             path: join(namespace, 'locales.js'),
             content: Mustache.render(readFileSync(join(__dirname, 'runtime/locales.js.tpl'), 'utf-8'), {
                 REPLACE_IMPORTS: files,
-                REPLACE_LOCALES: locales.map((item) => ({
+                REPLACE_LOCALES: locales.map(item => ({
                     locale: item.locale,
                     importNames: item.importNames.join(', '),
                 })),
diff --git a/packages/fes-plugin-locale/src/runtime/runtime.js b/packages/fes-plugin-locale/src/runtime/runtime.js
index a555ea87..624e0257 100644
--- a/packages/fes-plugin-locale/src/runtime/runtime.js
+++ b/packages/fes-plugin-locale/src/runtime/runtime.js
@@ -1,6 +1,6 @@
 import { plugin } from '@@/core/coreExports';
-// eslint-disable-next-line import/extensions
-import { useI18n, locale, install } from './core';
+
+import { install, locale, useI18n } from './core';
 import SelectLang from './views/SelectLang.vue';
 
 // 共享出去
diff --git a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue b/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
index 96f77b6c..35894488 100644
--- a/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
+++ b/packages/fes-plugin-locale/src/runtime/views/SelectLang.vue
@@ -1,11 +1,11 @@
 <template>
-    <FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
+    <FTooltip v-model="isOpened" popper-class="lang-popper" mode="popover">
         <div class="lang-icon">
             <LanguageOutlined />
         </div>
         <template #content>
             <FScrollbar height="274" class="lang-container">
-                <div v-for="item in configs" :key="item.lang" :class="['lang-option', item.lang === locale && 'is-selected']" @click="handleSelect(item)">
+                <div v-for="item in configs" :key="item.lang" class="lang-option" :class="[item.lang === locale && 'is-selected']" @click="handleSelect(item)">
                     <span>{{ item.icon }}</span>
                     <span>{{ item.label }}</span>
                 </div>
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { FTooltip, FScrollbar } from '@fesjs/fes-design';
+import { FScrollbar, FTooltip } from '@fesjs/fes-design';
 import { LanguageOutlined } from '@fesjs/fes-design/icon';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import langUConfigMap from '../langUConfigMap';
-// eslint-disable-next-line import/extensions
+
 import { locale as _locale } from '../core';
 
 export default {
@@ -55,11 +55,13 @@ export default {
     },
 };
 </script>
+
 <style>
 .fes-tooltip.fes-tooltip-popover.lang-popper {
     padding: 0;
 }
 </style>
+
 <style lang="less" scoped>
 .lang-icon {
     display: flex;
diff --git a/packages/fes-plugin-locale/src/utils/index.js b/packages/fes-plugin-locale/src/utils/index.js
index 87656861..a488c55b 100644
--- a/packages/fes-plugin-locale/src/utils/index.js
+++ b/packages/fes-plugin-locale/src/utils/index.js
@@ -1,4 +1,4 @@
-import { join, basename } from 'path';
+import { basename, join } from 'node:path';
 import { glob, winPath } from '@fesjs/utils';
 
 const ignore = /\.(d\.ts|\.test\.(js|ts))$/;
@@ -15,30 +15,32 @@ const getRouteName = function (path) {
         .replace(/\[...([a-zA-Z]*)\]/, 'FUZZYMATCH-$1');
 };
 
-export function getLocales(cwd) {
+export function getLocales(cwdArray) {
     const map = {};
     const files = [];
-    glob.sync('**/*.js', {
-        cwd,
-    })
-        .filter((file) => !ignore.test(file))
-        .forEach((fileName) => {
-            const locale = basename(fileName, '.js');
-            const importName = getRouteName(fileName).replace('.js', '');
-            const result = {
-                importName,
-                // import语法的路径，必须处理win
-                path: winPath(join(cwd, fileName)),
-            };
-            files.push(result);
-            if (!map[locale]) {
-                map[locale] = [];
-            }
-            map[locale].push(importName);
-        });
+    cwdArray.forEach((cwd) => {
+        glob.sync('**/*.js', {
+            cwd,
+        })
+            .filter(file => !ignore.test(file))
+            .forEach((fileName) => {
+                const locale = basename(fileName, '.js');
+                const importName = getRouteName(fileName).replace('.js', '');
+                const result = {
+                    importName,
+                    // import语法的路径，必须处理win
+                    path: winPath(join(cwd, fileName)),
+                };
+                files.push(result);
+                if (!map[locale]) {
+                    map[locale] = [];
+                }
+                map[locale].push(importName);
+            });
+    });
 
     return {
-        locales: Object.keys(map).map((key) => ({ locale: key, importNames: map[key] })),
+        locales: Object.keys(map).map(key => ({ locale: key, importNames: map[key] })),
         files,
     };
 }