mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-09-07 07:59:51 +08:00
feat: plugin提供share机制,重新实现layout和locale的结合
This commit is contained in:
parent
db6d1d7215
commit
aab55688be
@ -1,19 +1,16 @@
|
|||||||
import { reactive, ref } from "vue";
|
import { reactive } from "vue";
|
||||||
import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports";
|
import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports";
|
||||||
import BaseLayout from "./views/BaseLayout.vue";
|
import BaseLayout from "./views/BaseLayout.vue";
|
||||||
import { fillMenuData } from "./helpers";
|
import { fillMenuData } from "./helpers";
|
||||||
|
|
||||||
const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
|
const userConfig = reactive({{{REPLACE_USER_CONFIG}}});
|
||||||
const langConfig = {
|
|
||||||
localInited: ref(false),
|
|
||||||
component: null
|
|
||||||
};
|
|
||||||
export function rootContainer(childComponent, args) {
|
export function rootContainer(childComponent, args) {
|
||||||
const runtimeConfig = plugin.applyPlugins({
|
const runtimeConfig = plugin.applyPlugins({
|
||||||
key: "layout",
|
key: "layout",
|
||||||
type: ApplyPluginsType.modify,
|
type: ApplyPluginsType.modify,
|
||||||
initialValue: {},
|
initialValue: {},
|
||||||
});
|
});
|
||||||
|
const localeShared = plugin.openShared("locale");
|
||||||
const routeConfig = getRoutes();
|
const routeConfig = getRoutes();
|
||||||
userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
|
userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
|
||||||
return () => {
|
return () => {
|
||||||
@ -21,15 +18,15 @@ export function rootContainer(childComponent, args) {
|
|||||||
default: () => <childComponent></childComponent>,
|
default: () => <childComponent></childComponent>,
|
||||||
userCenter: () => {
|
userCenter: () => {
|
||||||
if(runtimeConfig.userCenter){
|
if(runtimeConfig.userCenter){
|
||||||
return <runtimeConfig.userCenter></runtimeConfig.userCenter>
|
return (<runtimeConfig.userCenter></runtimeConfig.userCenter>)
|
||||||
}
|
}
|
||||||
return <div></div>
|
return null
|
||||||
},
|
},
|
||||||
lang: () => {
|
locale: () => {
|
||||||
if(langConfig.localInited.value){
|
if(localeShared){
|
||||||
return <langConfig.component></langConfig.component>
|
return (<localeShared.SelectLang></localeShared.SelectLang>)
|
||||||
}
|
}
|
||||||
return <div></div>
|
return null
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
return (
|
return (
|
||||||
@ -37,11 +34,4 @@ export function rootContainer(childComponent, args) {
|
|||||||
</BaseLayout>
|
</BaseLayout>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
||||||
{{#HAS_LOCALE}}
|
|
||||||
export function onLocaleReady({ i18n, SelectLang }){
|
|
||||||
langConfig.localInited.value = true;
|
|
||||||
langConfig.component = SelectLang;
|
|
||||||
}
|
|
||||||
{{/HAS_LOCALE}}
|
|
@ -20,7 +20,7 @@
|
|||||||
<div class="layout-header-user">
|
<div class="layout-header-user">
|
||||||
<slot name="userCenter"></slot>
|
<slot name="userCenter"></slot>
|
||||||
</div>
|
</div>
|
||||||
<slot name="lang"></slot>
|
<slot name="locale"></slot>
|
||||||
</a-layout-header>
|
</a-layout-header>
|
||||||
<a-layout-content class="layout-content">
|
<a-layout-content class="layout-content">
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
|
@ -22,6 +22,9 @@ if (Array.isArray(locales)) {
|
|||||||
|
|
||||||
const i18n = createI18n({ ...defaultOptions, messages });
|
const i18n = createI18n({ ...defaultOptions, messages });
|
||||||
|
|
||||||
|
// 共享出去
|
||||||
|
plugin.share("locale", { i18n, SelectLang })
|
||||||
|
|
||||||
const setLocale = (locale)=>{
|
const setLocale = (locale)=>{
|
||||||
i18n.global.locale = locale
|
i18n.global.locale = locale
|
||||||
};
|
};
|
||||||
@ -32,11 +35,6 @@ const getAllLocales = ()=>{};
|
|||||||
|
|
||||||
const install = (app)=>{
|
const install = (app)=>{
|
||||||
app.use(i18n);
|
app.use(i18n);
|
||||||
plugin.applyPlugins({
|
|
||||||
key: 'onLocaleReady',
|
|
||||||
type: ApplyPluginsType.event,
|
|
||||||
args: { i18n, SelectLang }
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
export { useI18n, setLocale, install }
|
export { useI18n, setLocale, install }
|
@ -73,13 +73,18 @@ const beforeRenderConfig = plugin.applyPlugins({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const beforeRender = async () => {
|
const beforeRender = async () => {
|
||||||
|
let initialState = {};
|
||||||
if (typeof beforeRenderConfig.action === "function") {
|
if (typeof beforeRenderConfig.action === "function") {
|
||||||
const app = createApp(beforeRenderConfig.loading);
|
const app = createApp(beforeRenderConfig.loading);
|
||||||
app.mount("#app");
|
app.mount("#app");
|
||||||
const initialState = await beforeRenderConfig.action();
|
try {
|
||||||
|
initialState = await beforeRenderConfig.action();
|
||||||
|
} catch(e){
|
||||||
|
console.error(`[fes] beforeRender执行出现异常`)
|
||||||
|
}
|
||||||
app.unmount();
|
app.unmount();
|
||||||
return initialState;
|
|
||||||
}
|
}
|
||||||
|
return initialState;
|
||||||
};
|
};
|
||||||
|
|
||||||
const render = async () => {
|
const render = async () => {
|
||||||
|
@ -22,6 +22,17 @@ export default class Plugin {
|
|||||||
constructor(opts) {
|
constructor(opts) {
|
||||||
this.validKeys = opts?.validKeys || [];
|
this.validKeys = opts?.validKeys || [];
|
||||||
this.hooks = {};
|
this.hooks = {};
|
||||||
|
// 共享
|
||||||
|
this.shared = {};
|
||||||
|
}
|
||||||
|
|
||||||
|
share(key, obj) {
|
||||||
|
assert(!Object.keys(this.shared).includes(key), 'share failed, key repeat');
|
||||||
|
this.shared[key] = obj;
|
||||||
|
}
|
||||||
|
|
||||||
|
openShared(key) {
|
||||||
|
return this.shared[key];
|
||||||
}
|
}
|
||||||
|
|
||||||
register(plugin) {
|
register(plugin) {
|
||||||
|
Loading…
x
Reference in New Issue
Block a user