From 4bcca526825495c096c2e86aac1d6fa8c36bb620 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Tue, 5 Jan 2021 20:56:03 +0800 Subject: [PATCH 1/4] =?UTF-8?q?feat:=20layout=E7=9A=84multiTabs=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=E6=97=B6=E6=94=AF=E6=8C=81=E5=88=B7=E6=96=B0=E5=BD=93?= =?UTF-8?q?=E5=89=8D=E9=A1=B5=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/views/BaseLayout.vue | 61 +++++++++++++++++-- 1 file changed, 57 insertions(+), 4 deletions(-) diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue index 681e6172..0dbfd332 100644 --- a/packages/fes-plugin-layout/src/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue @@ -25,11 +25,22 @@ + - Ant Design ©2020 Created by MumbleFe @@ -47,8 +58,12 @@ import Layout from 'ant-design-vue/lib/layout'; import 'ant-design-vue/lib/layout/style'; import Tabs from 'ant-design-vue/lib/tabs'; import 'ant-design-vue/lib/tabs/style'; +import { ReloadOutlined } from '@ant-design/icons-vue'; import Menu from './Menu'; +let i = 0; +const getKey = () => ++i; + export default { components: { [Layout.name]: Layout, @@ -58,6 +73,7 @@ export default { [Layout.Footer.name]: Layout.Footer, [Tabs.name]: Tabs, [Tabs.TabPane.name]: Tabs.TabPane, + ReloadOutlined, Menu }, props: { @@ -114,15 +130,42 @@ export default { }); router.beforeEach((to) => { if (!openedPageList.some(page => unref(page.path) === to.path)) { - openedPageList.push(to); + openedPageList.push({ + path: to.path, + route: to, + name: to.meta.name, + key: getKey() + }); } return true; }); // 还需要考虑参数 const switchTab = (path) => { - router.push(path); + const selectedRoute = openedPageList.find(item => item.path === path); + if (selectedRoute) { + router.push({ + path, + query: selectedRoute.route.query, + params: selectedRoute.route.params + }); + } + }; + const reloadTab = (path) => { + const selectedPage = openedPageList.find(item => item.path === path); + if (selectedPage) { + selectedPage.key = getKey(); + } + }; + const getPageKey = (_route) => { + const selectedPage = openedPageList.find(item => item.path === _route.path); + if (selectedPage) { + return selectedPage.key; + } + return ''; }; return { + getPageKey, + reloadTab, switchTab, route, openedPageList, @@ -188,6 +231,16 @@ export default { width: 100%; .ant-tabs-nav-container { padding-left: 16px; + .layout-tabs-close-icon { + vertical-align: middle; + color: rgba(0, 0, 0, 0.45); + font-size: 12px; + margin-left: 6px; + margin-top: -2px; + &:hover{ + color: rgba(0, 0, 0, 0.8); + } + } } } } From bb81f11766f331c1d8f4e711bbd9c7ab639e03cf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 6 Jan 2021 15:33:21 +0800 Subject: [PATCH 2/4] =?UTF-8?q?feat:=20plugin-layou=E5=AE=9E=E7=8E=B0?= =?UTF-8?q?=E4=BB=8ErootContainer=E6=94=B9=E4=B8=BA=E5=9C=A8=E6=A0=B9?= =?UTF-8?q?=E8=B7=AF=E7=94=B1=E6=8F=92=E5=85=A5=E5=85=AC=E5=85=B1=E5=B8=83?= =?UTF-8?q?=E5=B1=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 好处： 1、布局组件涉及到router-view，需要包裹住router-view，跟rootContainer的默认参数冲突 2、布局组件的内容应该是rootContainer的最底层，但是由于rootContainer的机制，插件循序影响dom结构层级。不能保证布局的内容属于最底层 --- packages/fes-plugin-layout/package.json | 3 + packages/fes-plugin-layout/src/index.js | 22 +++- .../fes-plugin-layout/src/template/index.tpl | 41 +++++++ .../src/template/runtime.tpl | 37 ------ .../src/views/BaseLayout.vue | 96 ++------------- .../src/views/MultiTabProvider.vue | 111 ++++++++++++++++++ .../src/plugins/generateFiles/fes/fes.tpl | 5 +- .../src/plugins/misc/route/index.js | 7 -- .../plugins/misc/route/template/baseView.vue | 22 ---- 9 files changed, 179 insertions(+), 165 deletions(-) create mode 100644 packages/fes-plugin-layout/src/template/index.tpl delete mode 100644 packages/fes-plugin-layout/src/template/runtime.tpl create mode 100644 packages/fes-plugin-layout/src/views/MultiTabProvider.vue delete mode 100644 packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index 5ae5a579..da450c6b 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -27,6 +27,9 @@ "publishConfig": { "access": "public" }, + "dependencies": { + "@umijs/utils": "3.3.3" + }, "peerDependencies": { "@ant-design/icons-vue": "^5.1.6", "@webank/fes": "^2.0.0", diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index 0095de4f..38dbfc73 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -1,5 +1,6 @@ import { readFileSync, copyFileSync, statSync } from 'fs'; import { join } from 'path'; +import { winPath } from '@umijs/utils'; const namespace = 'plugin-layout'; @@ -18,16 +19,18 @@ export default (api) => { } }); - const absRuntimeFilePath = join(namespace, 'runtime.js'); + api.addRuntimePluginKey(() => 'layout'); + + const absFilePath = join(namespace, 'index.js'); api.onGenerateFiles(() => { // 文件写出 const userConfig = api.config.layout || {}; api.writeTmpFile({ - path: absRuntimeFilePath, + path: absFilePath, content: Mustache.render( - readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8'), + readFileSync(join(__dirname, 'template/index.tpl'), 'utf-8'), { REPLACE_USER_CONFIG: JSON.stringify(userConfig), HAS_LOCALE: api.pkg.dependencies?.['@webank/fes-plugin-locale'] @@ -58,7 +61,14 @@ export default (api) => { }); }); - api.addRuntimePluginKey(() => 'layout'); - - api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`); + // 把BaseLayout插入到路由配置中，作为跟路由 + api.modifyRoutes(routes => [ + { + path: '/', + component: winPath( + join(api.paths.absTmpPath || '', absFilePath) + ), + children: routes + } + ]); }; diff --git a/packages/fes-plugin-layout/src/template/index.tpl b/packages/fes-plugin-layout/src/template/index.tpl new file mode 100644 index 00000000..ff67008d --- /dev/null +++ b/packages/fes-plugin-layout/src/template/index.tpl @@ -0,0 +1,41 @@ +import { reactive, defineComponent } from "vue"; +import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports"; +import BaseLayout from "./views/BaseLayout.vue"; +import { fillMenuData } from "./helpers"; + +const userConfig = reactive({{{REPLACE_USER_CONFIG}}}); + +const Layout = defineComponent({ + name: 'Layout', + setup(){ + const runtimeConfig = plugin.applyPlugins({ + key: "layout", + type: ApplyPluginsType.modify, + initialValue: {}, + }); + const localeShared = plugin.getShared("locale"); + const routeConfig = getRoutes(); + userConfig.menus = fillMenuData(userConfig.menus, routeConfig); + return () => { + const slots = { + userCenter: () => { + if (runtimeConfig.userCenter) { + return ( + + ); + } + return null; + }, + locale: () => { + if (localeShared) { + return ; + } + return null; + }, + }; + return ; + }; + } +}) + +export default Layout; diff --git a/packages/fes-plugin-layout/src/template/runtime.tpl b/packages/fes-plugin-layout/src/template/runtime.tpl deleted file mode 100644 index da4f8bdf..00000000 --- a/packages/fes-plugin-layout/src/template/runtime.tpl +++ /dev/null @@ -1,37 +0,0 @@ -import { reactive } from "vue"; -import { getRoutes, plugin, ApplyPluginsType } from "@@/core/coreExports"; -import BaseLayout from "./views/BaseLayout.vue"; -import { fillMenuData } from "./helpers"; - -const userConfig = reactive({{{REPLACE_USER_CONFIG}}}); -export function rootContainer(childComponent, args) { - const runtimeConfig = plugin.applyPlugins({ - key: "layout", - type: ApplyPluginsType.modify, - initialValue: {}, - }); - const localeShared = plugin.getShared("locale"); - const routeConfig = getRoutes(); - userConfig.menus = fillMenuData(userConfig.menus, routeConfig); - return () => { - const slots = { - default: () => , - userCenter: () => { - if(runtimeConfig.userCenter){ - return () - } - return null - }, - locale: () => { - if(localeShared){ - return () - } - return null - } - }; - 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 index 0dbfd332..40b451c9 100644 --- a/packages/fes-plugin-layout/src/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue @@ -23,24 +23,8 @@ - - + + Ant Design ©2020 Created by MumbleFe @@ -51,18 +35,14 @@ + diff --git a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl index 994c16ec..ca548063 100644 --- a/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl +++ b/packages/fes-preset-built-in/src/plugins/generateFiles/fes/fes.tpl @@ -8,7 +8,6 @@ import { plugin } from './core/plugin'; import './core/pluginRegister'; import { ApplyPluginsType } from '{{{ runtimePath }}}'; import { getRoutes } from './core/routes/routes'; -import BaseView from './core/routes/baseView'; {{{ imports }}} @@ -19,9 +18,7 @@ const renderClient = (opts = {}) => { const rootContainer = plugin.applyPlugins({ type: ApplyPluginsType.modify, key: 'rootContainer', - initialValue: defineComponent((props) => { - return () => () - }), + initialValue: defineComponent(() => () => ()), args: { routes: routes, plugin: plugin diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/index.js b/packages/fes-preset-built-in/src/plugins/misc/route/index.js index a632d323..d978fe30 100644 --- a/packages/fes-preset-built-in/src/plugins/misc/route/index.js +++ b/packages/fes-preset-built-in/src/plugins/misc/route/index.js @@ -250,8 +250,6 @@ export default function (api) { const absRuntimeFilePath = join(namespace, 'runtime.js'); - const baseViewFilePath = join(namespace, 'baseView.vue'); - api.onGenerateFiles(async () => { const routesTpl = readFileSync(join(__dirname, 'template/routes.tpl'), 'utf-8'); const routes = await api.getRoutesJSON(); @@ -269,11 +267,6 @@ export default function (api) { path: absRuntimeFilePath, content: readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8') }); - - api.writeTmpFile({ - path: baseViewFilePath, - content: readFileSync(join(__dirname, 'template/baseView.vue'), 'utf-8') - }); }); api.addCoreExports(() => [ diff --git a/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue b/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue deleted file mode 100644 index 7073fc6a..00000000 --- a/packages/fes-preset-built-in/src/plugins/misc/route/template/baseView.vue +++ /dev/null @@ -1,22 +0,0 @@ - - From 4eb8257f43432d56410323a313c8624aaebbfc8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 6 Jan 2021 15:45:10 +0800 Subject: [PATCH 3/4] =?UTF-8?q?feat:=20=202.0.0-alpha=20=E6=AF=94=202.0.0?= =?UTF-8?q?=20=E6=9B=B4=E6=97=A9=EF=BC=8C=E6=89=80=E4=BB=A5=E5=BD=93?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E6=98=AFalpha=E6=97=B6=EF=BC=8C=E9=9C=80?= =?UTF-8?q?=E8=A6=81=E6=8C=87=E5=AE=9A=E4=B8=BA2.0.0-alpha.0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-compiler/package.json | 1 - packages/fes-plugin-access/package.json | 2 +- packages/fes-plugin-layout/package.json | 2 +- packages/fes-plugin-locale/package.json | 2 +- packages/fes-plugin-model/package.json | 2 +- packages/fes-plugin-request/package.json | 2 +- packages/fes-preset-built-in/package.json | 2 +- packages/fes-template-h5/package.json | 6 +++--- packages/fes-template/package.json | 10 +++++----- packages/fes/package.json | 6 +++--- 10 files changed, 17 insertions(+), 18 deletions(-) diff --git a/packages/fes-compiler/package.json b/packages/fes-compiler/package.json index ddbec7f2..c5021b92 100644 --- a/packages/fes-compiler/package.json +++ b/packages/fes-compiler/package.json @@ -28,7 +28,6 @@ "@babel/register": "^7.12.1", "@umijs/babel-preset-umi": "3.3.3", "@umijs/utils": "3.3.3", - "@webank/fes-runtime": "^2.0.0", "dotenv": "8.2.0", "joi": "17.3.0", "set-value": "3.0.2", diff --git a/packages/fes-plugin-access/package.json b/packages/fes-plugin-access/package.json index c139eb30..75bbc5bc 100644 --- a/packages/fes-plugin-access/package.json +++ b/packages/fes-plugin-access/package.json @@ -28,7 +28,7 @@ "access": "public" }, "peerDependencies": { - "@webank/fes": "^2.0.0", + "@webank/fes": "^2.0.0-alpha.0", "vue": "^3.0.4" } } diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index da450c6b..c03bf457 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -32,7 +32,7 @@ }, "peerDependencies": { "@ant-design/icons-vue": "^5.1.6", - "@webank/fes": "^2.0.0", + "@webank/fes": "^2.0.0-alpha.0", "ant-design-vue": "2.0.0-rc.3", "vue": "^3.0.4" } diff --git a/packages/fes-plugin-locale/package.json b/packages/fes-plugin-locale/package.json index 49185c08..d8f50aed 100644 --- a/packages/fes-plugin-locale/package.json +++ b/packages/fes-plugin-locale/package.json @@ -33,7 +33,7 @@ }, "peerDependencies": { "@ant-design/icons-vue": "^5.1.6", - "@webank/fes": "^2.0.0", + "@webank/fes": "^2.0.0-alpha.0", "ant-design-vue": "2.0.0-rc.3", "vue": "^3.0.4" } diff --git a/packages/fes-plugin-model/package.json b/packages/fes-plugin-model/package.json index 2ee6e3bc..2701475a 100644 --- a/packages/fes-plugin-model/package.json +++ b/packages/fes-plugin-model/package.json @@ -31,7 +31,7 @@ "@umijs/utils": "3.3.3" }, "peerDependencies": { - "@webank/fes": "^2.0.0", + "@webank/fes": "^2.0.0-alpha.0", "vue": "^3.0.4" } } diff --git a/packages/fes-plugin-request/package.json b/packages/fes-plugin-request/package.json index 024aff67..1f28c210 100644 --- a/packages/fes-plugin-request/package.json +++ b/packages/fes-plugin-request/package.json @@ -28,7 +28,7 @@ "access": "public" }, "peerDependencies": { - "@webank/fes": "^2.0.0" + "@webank/fes": "^2.0.0-alpha.0" }, "dependencies": { "axios": "0.21.1" diff --git a/packages/fes-preset-built-in/package.json b/packages/fes-preset-built-in/package.json index 6e5af35b..56cb828e 100644 --- a/packages/fes-preset-built-in/package.json +++ b/packages/fes-preset-built-in/package.json @@ -31,7 +31,7 @@ "@vue/babel-plugin-jsx": "^1.0.0-rc.5", "@vue/compiler-sfc": "^3.0.4", "@vue/preload-webpack-plugin": "1.1.2", - "@webank/fes-compiler": "^2.0.0", + "@webank/fes-compiler": "^2.0.0-alpha.0", "cliui": "6.0.0", "html-webpack-plugin": "^3.2.0", "html-webpack-tags-plugin": "2.0.17", diff --git a/packages/fes-template-h5/package.json b/packages/fes-template-h5/package.json index ced69ed3..91cf1098 100644 --- a/packages/fes-template-h5/package.json +++ b/packages/fes-template-h5/package.json @@ -40,9 +40,9 @@ "postcss-px-to-viewport": "1.1.1" }, "dependencies": { - "@webank/fes": "^2.0.0", - "@webank/fes-plugin-icon": "^1.0.0", - "@webank/fes-plugin-request": "^1.0.0", + "@webank/fes": "^2.0.0-alpha.0", + "@webank/fes-plugin-icon": "^2.0.0-alpha.0", + "@webank/fes-plugin-request": "^2.0.0-alpha.0", "vue": "^3.0.4" } } diff --git a/packages/fes-template/package.json b/packages/fes-template/package.json index 3b7a1a06..706b0c83 100644 --- a/packages/fes-template/package.json +++ b/packages/fes-template/package.json @@ -43,11 +43,11 @@ "@webank/eslint-config-webank": "0.2.7" }, "dependencies": { - "@webank/fes": "^2.0.0", - "@webank/fes-plugin-access": "^1.0.0", - "@webank/fes-plugin-layout": "^1.0.0", - "@webank/fes-plugin-locale": "^1.0.0", - "@webank/fes-plugin-model": "^1.0.0", + "@webank/fes": "^2.0.0-alpha.0", + "@webank/fes-plugin-access": "^2.0.0-alpha.0", + "@webank/fes-plugin-layout": "^2.0.0-alpha.0", + "@webank/fes-plugin-locale": "^2.0.0-alpha.0", + "@webank/fes-plugin-model": "^2.0.0-alpha.0", "ant-design-vue": "2.0.0-rc.3", "vue": "3.0.4" } diff --git a/packages/fes/package.json b/packages/fes/package.json index 7f5501e9..f6b2900d 100644 --- a/packages/fes/package.json +++ b/packages/fes/package.json @@ -39,9 +39,9 @@ ], "dependencies": { "@umijs/utils": "3.3.3", - "@webank/fes-compiler": "^2.0.0", - "@webank/fes-preset-built-in": "^2.0.0", - "@webank/fes-runtime": "^2.0.0", + "@webank/fes-compiler": "^2.0.0-alpha.0", + "@webank/fes-preset-built-in": "^2.0.0-alpha.0", + "@webank/fes-runtime": "^2.0.0-alpha.0", "resolve-cwd": "^3.0.0" } } From a5bfd009d3f640166d5deee108e5b3daea22f2a5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E4=B8=87=E7=BA=AF?= Date: Wed, 6 Jan 2021 19:50:10 +0800 Subject: [PATCH 4/4] =?UTF-8?q?feat:=20=20layout=E6=94=AF=E6=8C=81side?= =?UTF-8?q?=E5=92=8Ctop=E4=B8=A4=E7=A7=8D=E5=B8=83=E5=B1=80=E6=A8=A1?= =?UTF-8?q?=E5=BC=8F=EF=BC=8C=E4=B8=A4=E7=A7=8D=E6=A8=A1=E5=BC=8F=E6=94=AF?= =?UTF-8?q?=E6=8C=81fixedHeader=E5=92=8CfixedSideBar?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/fes-compiler/package.json | 1 - packages/fes-plugin-access/package.json | 1 - packages/fes-plugin-icon/package.json | 1 - packages/fes-plugin-layout/package.json | 1 - .../fes-plugin-layout/src/template/index.tpl | 2 +- .../src/views/BaseLayout.vue | 167 ++++++++++++++---- .../src/views/MultiTabProvider.vue | 129 ++++++++++---- packages/fes-plugin-locale/package.json | 1 - .../src/views/SelectLang.vue | 7 +- packages/fes-plugin-model/package.json | 1 - packages/fes-plugin-request/package.json | 1 - 11 files changed, 231 insertions(+), 81 deletions(-) diff --git a/packages/fes-compiler/package.json b/packages/fes-compiler/package.json index c5021b92..e590aa2f 100644 --- a/packages/fes-compiler/package.json +++ b/packages/fes-compiler/package.json @@ -3,7 +3,6 @@ "version": "2.0.0-alpha.0", "description": "@webank/fes-compiler", "main": "lib/index.js", - "types": "lib/index.d.ts", "files": [ "lib" ], diff --git a/packages/fes-plugin-access/package.json b/packages/fes-plugin-access/package.json index 75bbc5bc..0c37d838 100644 --- a/packages/fes-plugin-access/package.json +++ b/packages/fes-plugin-access/package.json @@ -6,7 +6,6 @@ "files": [ "lib" ], - "module": "dist/index.esm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/fes-plugin-icon/package.json b/packages/fes-plugin-icon/package.json index 58a0d70d..5a5b8c1a 100644 --- a/packages/fes-plugin-icon/package.json +++ b/packages/fes-plugin-icon/package.json @@ -9,7 +9,6 @@ "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, - "module": "dist/index.esm.js", "repository": { "type": "git", "url": "git+https://github.com/WeBankFinTech/fes.js.git", diff --git a/packages/fes-plugin-layout/package.json b/packages/fes-plugin-layout/package.json index c03bf457..cff9269b 100644 --- a/packages/fes-plugin-layout/package.json +++ b/packages/fes-plugin-layout/package.json @@ -6,7 +6,6 @@ "files": [ "lib" ], - "module": "dist/index.esm.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, diff --git a/packages/fes-plugin-layout/src/template/index.tpl b/packages/fes-plugin-layout/src/template/index.tpl index ff67008d..dd6ea19f 100644 --- a/packages/fes-plugin-layout/src/template/index.tpl +++ b/packages/fes-plugin-layout/src/template/index.tpl @@ -33,7 +33,7 @@ const Layout = defineComponent({ return null; }, }; - return ; + return ; }; } }) diff --git a/packages/fes-plugin-layout/src/views/BaseLayout.vue b/packages/fes-plugin-layout/src/views/BaseLayout.vue index 40b451c9..9b0ad043 100644 --- a/packages/fes-plugin-layout/src/views/BaseLayout.vue +++ b/packages/fes-plugin-layout/src/views/BaseLayout.vue @@ -1,49 +1,75 @@ -