feat: plugin-layout init

.fatherrc.js

@@ -1,10 +1,19 @@
-import { readdirSync } from 'fs';
+import { readdirSync } from "fs";
-import { join } from 'path';
+import { join } from "path";
 
 // utils must build before core
 // runtime must build before renderer-react
 
-const headPkgs = ['fes-runtime', 'fes-core', 'fes', 'fes-plugin-built-in', 'fes-plugin-request', 'fes-plugin-access', 'fes-plugin-model'];
+const headPkgs = [
+    "fes-runtime",
+    "fes-core",
+    "fes",
+    "fes-plugin-built-in",
+    "fes-plugin-request",
+    "fes-plugin-access",
+    "fes-plugin-model",
+    "fes-plugin-layout",
+];
 const tailPkgs = [];
 // const otherPkgs = readdirSync(join(__dirname, 'packages')).filter(
 //   (pkg) =>
@@ -14,8 +23,8 @@ const tailPkgs = [];
 const otherPkgs = [];
 
 export default {
-  target: 'node',
+    target: "node",
-  cjs: { type: 'babel', lazy: false },
+    cjs: { type: "babel", lazy: false },
-  disableTypeCheck: true,
+    disableTypeCheck: true,
-  pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
+    pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
 };

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

@@ -12,12 +12,10 @@ export default (api) => {
         config: {
             schema(joi) {
                 return joi.object({
-                    roles: joi
+                    roles: joi.object()
-                        .object()
                 });
             },
-            default: {
+            default: {}
-            }
         }
     });
 
@@ -31,14 +29,20 @@ export default (api) => {
 
         api.writeTmpFile({
             path: absoluteFilePath,
-            content: Mustache.render(readFileSync(join(__dirname, 'template/core.tpl'), 'utf-8'), {
+            content: Mustache.render(
-                REPLACE_ROLES: JSON.stringify(roles)
+                readFileSync(join(__dirname, 'template/core.tpl'), 'utf-8'),
-            })
+                {
+                    REPLACE_ROLES: JSON.stringify(roles)
+                }
+            )
         });
 
         api.writeTmpFile({
             path: absRuntimeFilePath,
-            content: readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8')
+            content: readFileSync(
+                join(__dirname, 'template/runtime.tpl'),
+                'utf-8'
+            )
         });
     });
 

packages/fes-plugin-built-in/package.json

@@ -28,9 +28,10 @@
     "@umijs/bundler-webpack": "^3.2.23",
     "@umijs/server": "^3.2.23",
     "@vue/babel-plugin-jsx": "^1.0.0-rc.3",
+    "@vue/compiler-sfc": "^3.0.4",
     "@webank/fes-core": "^2.0.0",
     "cliui": "6.0.0",
-    "vue-loader": "^16.0.0-rc.1",
+    "vue-loader": "^16.1.2",
     "html-webpack-plugin": "^3.2.0"
   }
 }

packages/fes-plugin-built-in/src/plugins/misc/route/index.js

@@ -3,6 +3,7 @@ import {
     join, extname, posix, basename
 } from 'path';
 import { lodash } from '@umijs/utils';
+import { parse } from '@vue/compiler-sfc';
 import { runtimePath } from '../../../utils/constants';
 
 //   pages
@@ -80,6 +81,10 @@ const genRoutes = function (parentRoutes, path, parentRoutePath) {
         // 文件或者目录的绝对路径
         const component = join(path, item);
         if (isProcessFile(component)) {
+            const { descriptor } = parse(readFileSync(component, 'utf-8'));
+            const routeMetaBlock = descriptor.customBlocks.find(
+                b => b.type === 'config'
+            );
             const ext = extname(item);
             const fileName = basename(item, ext);
             // 路由的path
@@ -94,14 +99,16 @@ const genRoutes = function (parentRoutes, path, parentRoutePath) {
                     layoutRoute.children.push({
                         path: routePath,
                         component: componentPath,
-                        name: routeName
+                        name: routeName,
+                        meta: routeMetaBlock.content ? JSON.parse(routeMetaBlock.content) : {}
                     });
                 }
             } else {
                 parentRoutes.push({
                     path: routePath,
                     component: componentPath,
-                    name: routeName
+                    name: routeName,
+                    meta: routeMetaBlock.content ? JSON.parse(routeMetaBlock.content) : {}
                 });
             }
         }

packages/fes-plugin-layout/package.json

@@ -2,7 +2,11 @@
   "name": "@webank/fes-plugin-layout",
   "version": "1.0.0",
   "description": "",
-  "main": "index.js",
+  "main": "lib/index.js",
+  "files": [
+    "lib"
+  ],
+  "module": "dist/index.esm.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -11,6 +15,6 @@
   "license": "MIT",
   "peerDependencies": {
     "vue": "^3.0.0",
-    "@webank/fes-core": "^0.2.4"
+    "@webank/fes": "^2.0.0"
   }
 }

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

@@ -1,12 +1,61 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';
 
-import generateLayout from './views/layout';
+const namespace = 'plugin-layout';
-import './views/styles/index.scss';
 
+export default (api) => {
+    const {
+        utils: { Mustache }
+    } = api;
 
-export function createLayout() {
+    api.describe({
-    return {
+        config: {
-        install(app, options, ctx) {
+            schema(joi) {
-            ctx.layout = generateLayout(options);
+                return joi.object({
+                    menus: joi.array()
+                });
+            },
+            default: {}
         }
-    };
+    });
-}
+
+    const absoluteFilePath = join(namespace, 'core.js');
+
+    const absRuntimeFilePath = join(namespace, 'runtime.js');
+
+    api.onGenerateFiles(() => {
+        // 文件写出
+        const { menus = [] } = api.config.layout || {};
+
+        console.log(menus);
+
+        // api.writeTmpFile({
+        //     path: absoluteFilePath,
+        //     content: Mustache.render(
+        //         readFileSync(join(__dirname, 'template/core.tpl'), 'utf-8'),
+        //         {
+        //             REPLACE_ROLES: JSON.stringify(roles)
+        //         }
+        //     )
+        // });
+
+        api.writeTmpFile({
+            path: absRuntimeFilePath,
+            content: readFileSync(
+                join(__dirname, 'template/runtime.tpl'),
+                'utf-8'
+            )
+        });
+    });
+
+    // api.addPluginExports(() => [
+    //     {
+    //         specifiers: ['access', 'useAccess'],
+    //         source: absoluteFilePath
+    //     }
+    // ]);
+
+    // api.addRuntimePluginKey(() => 'noAccessHandler');
+
+    // api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
+};

packages/fes-plugin-layout/src/template/runtime.tpl

@@ -0,0 +1,23 @@
+export function rootContainer(childComponent, args) {
+    const useRuntimeConfig =
+        plugin.applyPlugins({
+            key: "initialStateConfig",
+            type: ApplyPluginsType.modify,
+            initialValue: {},
+        }) || {};
+    return {
+        setup() {
+            const { loading } = useModel("@@initialState") || {};
+            return () => {
+                if (loading.value) {
+                    return useRuntimeConfig.loading ? (
+                        <useRuntimeConfig.loading />
+                    ) : (
+                        <></>
+                    );
+                }
+                return <childComponent />;
+            };
+        },
+    };
+}

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

@@ -1,8 +1,16 @@
 <template>
     <a-layout id="components-layout-demo-custom-trigger">
-        <a-layout-sider v-model:collapsed="collapsed" :trigger="null" collapsible>
+        <a-layout-sider
+            v-model:collapsed="collapsed"
+            :trigger="null"
+            collapsible
+        >
             <div class="logo" />
-            <a-menu v-model:selectedKeys="selectedKeys" theme="dark" mode="inline">
+            <a-menu
+                v-model:selectedKeys="selectedKeys"
+                theme="dark"
+                mode="inline"
+            >
                 <a-menu-item key="1">
                     <user-outlined />
                     <span>nav 1</span>
@@ -24,10 +32,19 @@
                     @click="() => (collapsed = !collapsed)"
                     class="trigger"
                 />
-                <menu-fold-outlined v-else @click="() => (collapsed = !collapsed)" class="trigger" />
+                <menu-fold-outlined
+                    v-else
+                    @click="() => (collapsed = !collapsed)"
+                    class="trigger"
+                />
             </a-layout-header>
             <a-layout-content
-                :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
+                :style="{
+                    margin: '24px 16px',
+                    padding: '24px',
+                    background: '#fff',
+                    minHeight: '280px'
+                }"
             >
                 Content
             </a-layout-content>
@@ -63,20 +80,20 @@ export default {
 
 <style>
 #components-layout-demo-custom-trigger .trigger {
-  font-size: 18px;
+    font-size: 18px;
-  line-height: 64px;
+    line-height: 64px;
-  padding: 0 24px;
+    padding: 0 24px;
-  cursor: pointer;
+    cursor: pointer;
-  transition: color 0.3s;
+    transition: color 0.3s;
 }
 
 #components-layout-demo-custom-trigger .trigger:hover {
-  color: #1890ff;
+    color: #1890ff;
 }
 
 #components-layout-demo-custom-trigger .logo {
-  height: 32px;
+    height: 32px;
-  background: rgba(255, 255, 255, 0.2);
+    background: rgba(255, 255, 255, 0.2);
-  margin: 16px;
+    margin: 16px;
 }
 </style>

packages/fes-template/.fes.js

@@ -6,5 +6,10 @@ export default {
         roles: {
             admin: ["/"]
         }
+    },
+    layout: {
+        menus: [{
+            path: '/'
+        }]
     }
 };

packages/fes-template/package.json

@@ -36,6 +36,7 @@
     "@webank/fes": "^2.0.0",
     "@webank/fes-plugin-access": "^1.0.0",
     "@webank/fes-plugin-model": "^1.0.0",
+    "@webank/fes-plugin-layout": "^1.0.0",
     "ant-design-vue": "2.0.0-rc.3"
   }
 }

packages/fes-template/src/pages/index.vue

@@ -1,16 +1,18 @@
 <template>
     <div>
-        fes & 拉夫德鲁  <br />
+        fes & 拉夫德鲁 <br />
         accessOnepicess: {{accessOnepicess}}
     </div>
 </template>
-
+<config>
+{
+    "title": "首页",
+    "layout": "false"
+}
+</config>
 <script>
 import { ref, onMounted } from 'vue';
-import {
+import { useAccess, useModel, useRouter } from '@webank/fes';
-    useAccess, useModel, useRouter
-} from '@webank/fes';
-
 
 export default {
     setup() {

packages/fes-template/src/pages/onepiece.vue

@@ -1,7 +1,12 @@
 <template>
     <div>{{fes}}</div>
 </template>
-
+<config>
+{
+    "title": "onepiece",
+    "layout": "true"
+}
+</config>
 <script>
 import { ref } from 'vue';
 

yarn.lock

@@ -3626,6 +3626,28 @@
     postcss-selector-parser "^6.0.4"
     source-map "^0.6.1"
 
+"@vue/compiler-sfc@^3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-sfc/-/compiler-sfc-3.0.4.tgz#2119fe1e68d2c268aafa20461c82c139a9adf8e0"
+  integrity sha512-brDn6HTuK6R3oBCjtMPPsIpyJEZFinlnxjtBXww/goFJOJBAU9CrsdegwyZItNnixCFUIg4CLv4Nj1Eg/eKlfg==
+  dependencies:
+    "@babel/parser" "^7.12.0"
+    "@babel/types" "^7.12.0"
+    "@vue/compiler-core" "3.0.4"
+    "@vue/compiler-dom" "3.0.4"
+    "@vue/compiler-ssr" "3.0.4"
+    "@vue/shared" "3.0.4"
+    consolidate "^0.16.0"
+    estree-walker "^2.0.1"
+    hash-sum "^2.0.0"
+    lru-cache "^5.1.1"
+    magic-string "^0.25.7"
+    merge-source-map "^1.1.0"
+    postcss "^7.0.32"
+    postcss-modules "^3.2.2"
+    postcss-selector-parser "^6.0.4"
+    source-map "^0.6.1"
+
 "@vue/compiler-ssr@3.0.2":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.0.2.tgz#73af4d274a79bfcc72a996a9b45f1072e7deaa26"
@@ -3634,6 +3656,14 @@
     "@vue/compiler-dom" "3.0.2"
     "@vue/shared" "3.0.2"
 
+"@vue/compiler-ssr@3.0.4":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@vue/compiler-ssr/-/compiler-ssr-3.0.4.tgz#ccbd1f55734d51d1402fad825ac102002a7a07c7"
+  integrity sha512-4aYWQEL4+LS4+D44K9Z7xMOWMEjBsz4Li9nMcj2rxRQ35ewK6uFPodvs6ORP60iBDSkwUFZoldFlNemQlu1BFw==
+  dependencies:
+    "@vue/compiler-dom" "3.0.4"
+    "@vue/shared" "3.0.4"
+
 "@vue/reactivity@3.0.2":
   version "3.0.2"
   resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.0.2.tgz#42ed5af6025b494a5e69b05169fcddf04eebfe77"
@@ -14702,10 +14732,10 @@ vue-i18n@^9.0.0-beta.2:
   dependencies:
     source-map "^0.6.1"
 
-vue-loader@^16.0.0-rc.1:
+vue-loader@^16.1.2:
-  version "16.0.0-rc.1"
+  version "16.1.2"
-  resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz#9c1f1684e2d01c8a72216f9d4db119e15c622645"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4"
-  integrity sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==
+  integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==
   dependencies:
     chalk "^4.1.0"
     hash-sum "^2.0.0"