refactor(plugin-layout): 优化index.jsx

n

packages/fes-plugin-layout/src/index.js

@@ -50,13 +50,6 @@ export default (api) => {
         }`,
         });
 
-        api.writeTmpFile({
-            path: absFilePath,
-            content: Mustache.render(readFileSync(join(__dirname, 'runtime/views/index.tpl'), 'utf-8'), {
-                REPLACE_USER_CONFIG: JSON.stringify(userConfig),
-            }),
-        });
-
         api.writeTmpFile({
             path: absConfigFilePath,
             content: Mustache.render(readFileSync(join(__dirname, 'runtime/helpers/getConfig.tpl'), 'utf-8'), {

packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js

@@ -29,27 +29,16 @@ const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
         menuConfig.forEach((menu) => {
             const pageConfig = {};
             if (menu.name) {
-                Object.assign(
-                    pageConfig,
-                    getMetaByName(routeConfig, menu.name)
-                );
+                Object.assign(pageConfig, getMetaByName(routeConfig, menu.name));
             }
             // menu的配置优先级高，当menu存在配置时，忽略页面的配置
             Object.keys(pageConfig).forEach((prop) => {
-                if (
-                    menu[prop] === undefined
-                    || menu[prop] === null
-                    || menu[prop] === ''
-                ) {
+                if (menu[prop] === undefined || menu[prop] === null || menu[prop] === '') {
                     menu[prop] = pageConfig[prop];
                 }
             });
             if (menu.children && menu.children.length > 0) {
-                menu.children = fillMenuByRoute(
-                    menu.children,
-                    routeConfig,
-                    dep
-                );
+                menu.children = fillMenuByRoute(menu.children, routeConfig, dep);
             }
             arr.push(menu);
         });

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -189,14 +189,14 @@ export default {
                 return [];
             },
         },
-        title: {
-            type: String,
-            default: '',
-        },
         locale: {
             type: Boolean,
             default: false,
         },
+        title: {
+            type: String,
+            default: '',
+        },
         logo: {
             type: String,
             default: defaultLogo,

packages/fes-plugin-layout/src/runtime/views/index.jsx

@@ -0,0 +1,54 @@
+import { unref, defineComponent, computed } from 'vue';
+import { plugin } from '@@/core/coreExports';
+import { getRoutes } from '@@/core/routes/routes';
+// eslint-disable-next-line import/extensions
+import getConfig from '../helpers/getConfig';
+import fillMenu from '../helpers/fillMenu';
+import BaseLayout from './BaseLayout.vue';
+
+const Layout = defineComponent({
+    name: 'Layout',
+    setup() {
+        const config = getConfig();
+
+        const menus = typeof config.menus === 'function' ? config.menus() : config.menus;
+
+        const routes = getRoutes();
+
+        // 把路由的 meta 合并到 menu 配置中
+        const filledMenuRef = computed(() => fillMenu(unref(menus) ?? [], routes));
+
+        const localeShared = plugin.getShared('locale');
+
+        return () => {
+            const slots = {
+                renderCustom: config.renderCustom,
+                locale: () => {
+                    if (localeShared) {
+                        return <localeShared.SelectLang></localeShared.SelectLang>;
+                    }
+                    return null;
+                },
+            };
+            return (
+                <BaseLayout
+                    menus={filledMenuRef.value}
+                    locale={localeShared ? true : false}
+                    title={config.title}
+                    logo={config.logo}
+                    theme={config.theme}
+                    navigation={config.navigation}
+                    isFixedHeader={config.isFixedHeader}
+                    isFixedSidebar={config.isFixedSidebar}
+                    multiTabs={config.multiTabs}
+                    sideWidth={config.sideWidth}
+                    footer={config.footer}
+                    menuProps={config.menuProps}
+                    v-slots={slots}
+                ></BaseLayout>
+            );
+        };
+    },
+});
+
+export default Layout;

packages/fes-plugin-layout/src/runtime/views/index.tpl

@@ -1,44 +0,0 @@
-import { ref, defineComponent, computed } from 'vue';
-import { plugin } from '@@/core/coreExports';
-import { getRoutes } from '@@/core/routes/routes';
-import BaseLayout from './BaseLayout.vue';
-// eslint-disable-next-line import/extensions
-import getConfig from '../helpers/getConfig';
-import fillMenu from '../helpers/fillMenu';
-
-const Layout = defineComponent({
-    name: 'Layout',
-    setup() {
-        const initConfig = {{{REPLACE_USER_CONFIG}}}
-        const config = {...initConfig, ...getConfig()};
-
-        let menusRef = ref(config.menus);
-        // 如果运行时配置了，则需要处理
-        if (config.menus && typeof config.menus === 'function') {
-            menusRef = ref(config.menus());
-        }
-        // 把路由的meta合并到menu配置中
-        const filledMenuRef = computed(() => fillMenu(menusRef.value, getRoutes()));
-
-        const localeShared = plugin.getShared('locale');
-
-        const renderCustom = config.renderCustom;
-
-        delete config.renderCustom;
-        
-        return () => {
-            const slots = {
-                renderCustom,
-                locale: () => {
-                    if (localeShared) {
-                        return <localeShared.SelectLang></localeShared.SelectLang>;
-                    }
-                    return null;
-                },
-            };
-            return <BaseLayout {...config} locale={localeShared ? true : false} menus={filledMenuRef.value} v-slots={slots}></BaseLayout>;
-        };
-    },
-});
-
-export default Layout;

packages/fes-template-vite/src/pages/editor.vue

@@ -1,12 +1,6 @@
 <template>
-    <monaco-editor
-        ref="editorRef"
-        v-model="json"
-        :language="language"
-        height="200px"
-        check
-    />
-    {{json}}
+    <monaco-editor ref="editorRef" v-model="json" :language="language" height="200px" check />
+    {{ json }}
 </template>
 <config>
 {
@@ -21,7 +15,7 @@ import { MonacoEditor } from '@fesjs/fes';
 
 export default {
     components: {
-        MonacoEditor
+        MonacoEditor,
     },
     setup() {
         const editorRef = ref();
@@ -35,8 +29,8 @@ export default {
         return {
             editorRef,
             json,
-            language
+            language,
         };
-    }
+    },
 };
 </script>

packages/fes-template/.fes.js

@@ -1,9 +1,7 @@
 import { defineBuildConfig } from '@fesjs/fes';
 
 export default defineBuildConfig({
-    swc: {
-        loader: {},
-    },
+    swc: false,
     targets: {
         chrome: '78',
     },

packages/fes-template/src/app.jsx

@@ -21,7 +21,10 @@ export const beforeRender = {
 
 export const layout = (layoutConfig, { initialState }) => ({
     ...layoutConfig,
-    renderCustom: () => <UserCenter />,
+    renderCustom: (props) => {
+        console.log(props);
+        return <UserCenter />;
+    },
     menus: () => {
         const menusRef = ref(layoutConfig.menus);
         watch(