feat: plugin-layout init

2025-04-05 19:41:57 +08:00 · 2020-12-18 18:23:00 +08:00 · 2020-12-18 18:23:00 +08:00 · 76078684a4
commit 76078684a4
parent 8103071168
14 changed files with 210 additions and 53 deletions
--- a/.fatherrc.js
+++ b/.fatherrc.js
@ -1,10 +1,19 @@
-import { readdirSync } from 'fs';
-import { join } from 'path';
+import { readdirSync } from "fs";
+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',
-  cjs: { type: 'babel', lazy: false },
-  disableTypeCheck: true,
-  pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
-};
+    target: "node",
+    cjs: { type: "babel", lazy: false },
+    disableTypeCheck: true,
+    pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs],
+};
--- a/packages/fes-plugin-access/src/index.js
+++ b/packages/fes-plugin-access/src/index.js
@ -12,12 +12,10 @@ export default (api) => {
        config: {
            schema(joi) {
                return joi.object({
-                    roles: joi
-                        .object()
+                    roles: joi.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'), {
-                REPLACE_ROLES: JSON.stringify(roles)
-            })
+            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')
+            content: readFileSync(
+                join(__dirname, 'template/runtime.tpl'),
+                'utf-8'
+            )
        });
    });

--- a/packages/fes-plugin-built-in/package.json
+++ b/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"
  }
 }
--- a/packages/fes-plugin-built-in/src/plugins/misc/route/index.js
+++ b/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) : {}
                });
            }
        }
--- a/packages/fes-plugin-layout/package.json
+++ b/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"
  }
 }
--- a/packages/fes-plugin-layout/src/index.js
+++ b/packages/fes-plugin-layout/src/index.js
@ -1,12 +1,61 @@
+import { readFileSync } from 'fs';
+import { join } from 'path';

-import generateLayout from './views/layout';
-import './views/styles/index.scss';
+const namespace = 'plugin-layout';

+export default (api) => {
+    const {
+        utils: { Mustache }
+    } = api;

-export function createLayout() {
-    return {
-        install(app, options, ctx) {
-            ctx.layout = generateLayout(options);
+    api.describe({
+        config: {
+            schema(joi) {
+                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}`);
+};
--- a/packages/fes-plugin-layout/src/template/runtime.tpl
+++ b/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 />;
+            };
+        },
+    };
+}
--- a/packages/fes-plugin-layout/src/views/BaseLayout.vue
+++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue
--- a/packages/fes-plugin-layout/src/views/layout.vue
+++ b/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;
-  line-height: 64px;
-  padding: 0 24px;
-  cursor: pointer;
-  transition: color 0.3s;
+    font-size: 18px;
+    line-height: 64px;
+    padding: 0 24px;
+    cursor: pointer;
+    transition: color 0.3s;
 }

 #components-layout-demo-custom-trigger .trigger:hover {
-  color: #1890ff;
+    color: #1890ff;
 }

 #components-layout-demo-custom-trigger .logo {
-  height: 32px;
-  background: rgba(255, 255, 255, 0.2);
-  margin: 16px;
+    height: 32px;
+    background: rgba(255, 255, 255, 0.2);
+    margin: 16px;
 }
 </style>
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -6,5 +6,10 @@ export default {
        roles: {
            admin: ["/"]
        }
+    },
+    layout: {
+        menus: [{
+            path: '/'
+        }]
    }
 };
--- a/packages/fes-template/package.json
+++ b/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"
  }
 }
--- a/packages/fes-template/src/pages/index.vue
+++ b/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 {
-    useAccess, useModel, useRouter
-} from '@webank/fes';
-
+import { useAccess, useModel, useRouter } from '@webank/fes';

 export default {
    setup() {
--- a/packages/fes-template/src/pages/onepiece.vue
+++ b/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';

--- a/yarn.lock
+++ b/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:
-  version "16.0.0-rc.1"
-  resolved "https://registry.npmjs.org/vue-loader/-/vue-loader-16.0.0-rc.1.tgz#9c1f1684e2d01c8a72216f9d4db119e15c622645"
-  integrity sha512-yR+BS90EOXTNieasf8ce9J3TFCpm2DGqoqdbtiwQ33hon3FyIznLX7sKavAq1VmfBnOeV6It0Htg4aniv8ph1g==
+vue-loader@^16.1.2:
+  version "16.1.2"
+  resolved "https://registry.yarnpkg.com/vue-loader/-/vue-loader-16.1.2.tgz#5c03b6c50d2a5f983c7ceba15c50d78ca2b298f4"
+  integrity sha512-8QTxh+Fd+HB6fiL52iEVLKqE9N1JSlMXLR92Ijm6g8PZrwIxckgpqjPDWRP5TWxdiPaHR+alUWsnu1ShQOwt+Q==
  dependencies:
    chalk "^4.1.0"
    hash-sum "^2.0.0"