feat: plugin提供share机制,重新实现layout和locale的结合

This commit is contained in:
万纯 2021-01-05 11:16:34 +08:00
parent db6d1d7215
commit aab55688be
5 changed files with 31 additions and 27 deletions

View File

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

View File

@ -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>

View File

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

View File

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

View File

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