From 76078684a4cf291388b35262f0e67e15d13e8868 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Fri, 18 Dec 2020 18:23:00 +0800 Subject: [PATCH] feat: plugin-layout init --- .fatherrc.js | 25 ++++--- packages/fes-plugin-access/src/index.js | 20 +++--- packages/fes-plugin-built-in/package.json | 3 +- .../src/plugins/misc/route/index.js | 11 +++- packages/fes-plugin-layout/package.json | 8 ++- packages/fes-plugin-layout/src/index.js | 65 ++++++++++++++++--- .../src/template/runtime.tpl | 23 +++++++ .../src/views/BaseLayout.vue | 0 .../fes-plugin-layout/src/views/layout.vue | 43 ++++++++---- packages/fes-template/.fes.js | 5 ++ packages/fes-template/package.json | 1 + packages/fes-template/src/pages/index.vue | 14 ++-- packages/fes-template/src/pages/onepiece.vue | 7 +- yarn.lock | 38 +++++++++-- 14 files changed, 210 insertions(+), 53 deletions(-) create mode 100644 packages/fes-plugin-layout/src/template/runtime.tpl create mode 100644 packages/fes-plugin-layout/src/views/BaseLayout.vue diff --git a/.fatherrc.js b/.fatherrc.js index 9cb72122..5bf28d97 100644 --- 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], -}; \ No newline at end of file + target: "node", + cjs: { type: "babel", lazy: false }, + disableTypeCheck: true, + pkgs: [...headPkgs, ...otherPkgs, ...tailPkgs], +}; diff --git a/packages/fes-plugin-access/src/index.js b/packages/fes-plugin-access/src/index.js index b041cecf..cf23763c 100644 --- 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' + ) }); }); diff --git a/packages/fes-plugin-built-in/package.json b/packages/fes-plugin-built-in/package.json index d5dfbfa1..26143769 100644 --- 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" } } diff --git a/packages/fes-plugin-built-in/src/plugins/misc/route/index.js b/packages/fes-plugin-built-in/src/plugins/misc/route/index.js index cdf86b59..df06f964 100644 --- 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) : {} }); } } diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index 41795040..88da06ce 100644 --- 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" } } diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 199ad104..71a8174b 100644 --- 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}`); +}; diff --git a/packages/fes-plugin-layout/src/template/runtime.tpl b/packages/fes-plugin-layout/src/template/runtime.tpl new file mode 100644 index 00000000..7fc09b78 --- /dev/null +++ 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 ? ( + + ) : ( + <> + ); + } + return ; + }; + }, + }; +} \ No newline at end of file diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue new file mode 100644 index 00000000..e69de29b diff --git a/packages/fes-plugin-layout/src/views/layout.vue b/packages/fes-plugin-layout/src/views/layout.vue index d0b68168..d31e3806 100644 --- a/packages/fes-plugin-layout/src/views/layout.vue +++ b/packages/fes-plugin-layout/src/views/layout.vue @@ -1,8 +1,16 @@