blackteay/fes.js
1
0
Fork 0
mirror of https://github.com/WeBankFinTech/fes.js.git synced 2025-04-06 03:59:53 +08:00
Code Issues Projects Releases Wiki Activity

feat: plugin-layout

Browse Source
This commit is contained in:
万纯 2020-12-22 17:54:46 +08:00
parent 21f4f66504
commit 0a709907bf
19 changed files with 463 additions and 164 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@ -1,6 +1,6 @@
{
"name": "fes.js",
"version": "0.1.0",
"version": "2.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {

5
packages/fes-plugin-layout/README.md Normal file
View File

@ -0,0 +1,5 @@
主题： light/dark
布局： 左右（上/下）、上/下、上/下（左/右）
固定Header: 是/否
固定sidebar: 是/否
multi tabs： 是/否

3
packages/fes-plugin-layout/package.json
View File

@ -15,6 +15,7 @@
"license": "MIT",
"peerDependencies": {
"vue": "^3.0.0",
"@webank/fes": "^2.0.0"
"@webank/fes": "^2.0.0",
"ant-design-vue": "2.0.0-rc.3"
}
}

1
packages/fes-plugin-layout/src/helpers.js
View File

@ -1 +0,0 @@
export const noop = () => { };

35
packages/fes-plugin-layout/src/helpers/addAccessTag.js Normal file
View File

@ -0,0 +1,35 @@
import { unref, computed } from 'vue';
import { useAccess } from '@webank/fes';
if (!useAccess) {
throw new Error(
'[plugin-layout]: pLugin-layout依赖plugin-access，请先安装plugin-access！'
);
}
const hasAccess = (item) => {
let res;
if (item.path && (!item.children || item.children.length === 0)) {
res = useAccess(item.path);
} else if (item.children && item.children.length > 0) {
res = computed(() => item.children.some(child => hasAccess(child)));
}
return res;
};
const addAcessTag = (arr) => {
if (Array.isArray(arr)) {
arr.forEach((item) => {
item.access = hasAccess(item);
if (item.children && item.children.length > 0) {
addAcessTag(item.children);
}
});
}
};
export default function (menus) {
const originData = unref(menus);
addAcessTag(originData);
return originData;
}

65
packages/fes-plugin-layout/src/helpers/index.js Normal file
View File

@ -0,0 +1,65 @@
export const noop = () => {};
const matchName = (config, name) => {
let res;
if (Array.isArray(config)) {
for (let i = 0; i < config.length; i++) {
const item = config[i];
if (item.meta && item.meta.name === name) {
res = item.meta;
res.path = item.path;
break;
}
if (item.children && item.children.length > 0) {
res = matchName(item.children, name);
if (res) {
break;
}
}
}
}
return res;
};
const matchPath = (config, path) => {
let res = {};
if (Array.isArray(config)) {
for (let i = 0; i < config.length; i++) {
const item = config[i];
if (item.path && item.path === path) {
res = item.meta;
res.path = item.path;
break;
}
if (item.children && item.children.length > 0) {
res = matchPath(item.children, path);
if (res) {
break;
}
}
}
}
return res;
};
export const fillMenuData = (menuConfig, routeConfig, dep = 0) => {
dep += 1;
if (dep > 3) {
throw new Error('[plugin-layout]: menu层级不能超出三层！');
}
const arr = [];
if (Array.isArray(menuConfig) && Array.isArray(routeConfig)) {
menuConfig.forEach((item) => {
if (item.path !== undefined && item.path !== null) {
Object.assign(item, matchPath(routeConfig, item.path));
} else {
Object.assign(item, matchName(routeConfig, item.name));
}
if (item.children && item.children.length > 0) {
item.children = fillMenuData(item.children, routeConfig, dep);
}
arr.push(item);
});
}
return arr;
};

64
packages/fes-plugin-layout/src/index.js
View File

@ -1,4 +1,4 @@
import { readFileSync } from 'fs';
import { readFileSync, copyFileSync, statSync } from 'fs';
import { join } from 'path';
const namespace = 'plugin-layout';
@ -9,53 +9,55 @@ export default (api) => {
} = api;
api.describe({
key: 'layout',
config: {
schema(joi) {
return joi.object({
menus: joi.array()
});
return joi.object();
},
default: {}
onChange: api.ConfigChangeType.regenerateTmpFiles
}
});
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)
// }
// )
// });
const userConfig = api.config.layout || {};
api.writeTmpFile({
path: absRuntimeFilePath,
content: readFileSync(
join(__dirname, 'template/runtime.tpl'),
'utf-8'
content: Mustache.render(
readFileSync(join(__dirname, 'template/runtime.tpl'), 'utf-8'),
{
REPLACE_USER_CONFIG: JSON.stringify(userConfig)
}
)
});
});
// api.addPluginExports(() => [
// {
// specifiers: ['access', 'useAccess'],
// source: absoluteFilePath
// }
// ]);
let generatedOnce = false;
api.onGenerateFiles(() => {
if (generatedOnce) return;
generatedOnce = true;
const cwd = join(__dirname, '../src');
const files = api.utils.glob.sync('**/*', {
cwd
});
const base = join(api.paths.absTmpPath, namespace);
files.forEach((file) => {
if (file.indexOf('template') !== -1) return;
if (file === 'index.js') return;
const source = join(cwd, file);
const target = join(base, file);
if (statSync(source).isDirectory()) {
api.utils.mkdirp.sync(target);
} else {
copyFileSync(source, target);
}
});
});
// api.addRuntimePluginKey(() => 'noAccessHandler');
api.addRuntimePluginKey(() => 'layout');
// api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
};

45
packages/fes-plugin-layout/src/template/runtime.tpl
View File

@ -1,23 +1,30 @@
import { reactive, toRefs } 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 useRuntimeConfig =
plugin.applyPlugins({
key: "initialStateConfig",
type: ApplyPluginsType.modify,
initialValue: {},
}) || {};
return {
setup() {
const { loading } = useModel("@@initialState") || {};
return () => {
if (loading.value) {
return useRuntimeConfig.loading ? (
<useRuntimeConfig.loading />
) : (
<></>
);
const runtimeConfig = plugin.applyPlugins({
key: "layout",
type: ApplyPluginsType.modify,
initialValue: {},
});
const routeConfig = getRoutes();
userConfig.menus = fillMenuData(userConfig.menus, routeConfig);
return () => {
const slots = {
default: () => <childComponent></childComponent>,
userCenter: () => {
if(runtimeConfig.userCenter){
return <runtimeConfig.userCenter></runtimeConfig.userCenter>
}
return <childComponent />;
};
},
return <></>
}
};
return (
<BaseLayout {...userConfig} v-slots={slots}>
</BaseLayout>
);
};
}

151
packages/fes-plugin-layout/src/views/BaseLayout.vue
View File

@ -0,0 +1,151 @@
<template>
<a-layout class="main-layout">
<a-layout-sider
v-if="routeLayout"
v-model:collapsed="collapsed"
:width="sideWidth"
:class="{ collapsed: collapsed }"
collapsible
theme="dark"
class="layout-sider"
>
<div class="logo">
<img :src="logo" class="logo-img" />
<h1 class="logo-name">{{title}}</h1>
</div>
<Menu :menus="menus" :theme="theme" />
</a-layout-sider>
<a-layout>
<a-layout-header v-if="routeLayout" class="layout-header">
<slot name="userCenter"></slot>
</a-layout-header>
<a-layout-content class="layout-content">
<slot></slot>
</a-layout-content>
<a-layout-footer v-if="routeLayout" class="layout-footer">
Ant Design ©2020 Created by MumbleFe
</a-layout-footer>
</a-layout>
</a-layout>
</template>
<script>
import { ref, computed } from 'vue';
import { useRoute } from '@webank/fes';
import Layout from 'ant-design-vue/lib/layout';
import 'ant-design-vue/lib/layout/style';
import Menu from './Menu.vue';
export default {
components: {
[Layout.name]: Layout,
[Layout.Sider.name]: Layout.Sider,
[Layout.Content.name]: Layout.Content,
[Layout.Header.name]: Layout.Header,
[Layout.Footer.name]: Layout.Footer,
Menu
},
props: {
menus: {
type: Array,
default() {
return [];
}
},
title: {
type: String,
default: ''
},
locale: {
type: Boolean,
default: false
},
logo: {
type: String,
default: ''
},
theme: {
type: String,
default: 'dark'
},
navigation: {
type: String,
default: 'side' // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
},
fixedHeader: {
type: Boolean,
default: false
},
fixedSideBar: {
type: Boolean,
default: true
},
multiTabs: {
type: Boolean,
default: false
},
sideWidth: {
type: Number,
default: 200
}
},
setup(props, content) {
const route = useRoute();
const routeLayout = computed(() => {
const _routeLayout = route.meta.layout;
return _routeLayout === undefined ? true : _routeLayout;
});
return {
routeLayout,
collapsed: ref(false)
};
}
};
</script>
<style lang="less">
.main-layout {
min-height: 100vh;
.layout-sider{
&.collapsed{
.logo{
justify-content: center;
.logo-name{
display: none;
}
}
}
.logo {
height: 32px;
margin: 16px;
display: flex;
justify-content: flex-start;
align-items: center;
.logo-img{
height: 32px;
width: auto;
}
.logo-name{
overflow: hidden;
margin: 0 0 0 12px;
color: #fff;
font-weight: 600;
font-size: 18px;
line-height: 32px;
}
}
}
.layout-header {
height: 48px;
line-height: 48px;
background: #fff;
padding: 0;
}
.layout-content {
position: relative;
}
.layout-footer {
text-align: center;
}
}
</style>

104
packages/fes-plugin-layout/src/views/Menu.vue Normal file
View File

@ -0,0 +1,104 @@
<template>
<a-menu
:selectedKeys="selectedKeys"
@click="onMenuClick"
theme="dark"
mode="inline"
>
<template v-for="(item, index) in menus" :key="index">
<template v-if="item.access">
<a-sub-menu v-if="item.children" :title="item.title">
<template
v-for="(item1, index) in item.children"
:key="index"
>
<template v-if="item1.access">
<a-sub-menu
v-if="item1.children"
:title="item1.title"
>
<template
v-for="(item2, index) in item1.children"
:key="index"
>
<a-menu-item
v-if="item2.access"
:key="item2.path"
>
{{item2.title}}
</a-menu-item>
</template>
</a-sub-menu>
<a-menu-item v-else :key="item1.path">
{{item1.title}}
</a-menu-item>
</template>
</template>
</a-sub-menu>
<a-menu-item v-else :key="item.path">
<UserOutlined />
<span>{{item.title}}</span>
</a-menu-item>
</template>
</template>
</a-menu>
</template>
<script>
import { ref, toRefs, computed } from 'vue';
import { useRoute, useRouter } from '@webank/fes';
import Menu from 'ant-design-vue/lib/menu';
import 'ant-design-vue/lib/menu/style';
import {
UserOutlined
} from '@ant-design/icons-vue';
import addAccessTag from '../helpers/addAccessTag';
export default {
components: {
[Menu.name]: Menu,
[Menu.SubMenu.name]: Menu.SubMenu,
[Menu.Item.name]: Menu.Item,
UserOutlined
},
props: {
menus: {
type: Array,
default() {
return [];
}
},
theme: {
type: String,
default: 'dark'
}
},
setup(props) {
const { menus } = toRefs(props);
const route = useRoute();
const router = useRouter();
const fixedMenus = addAccessTag(menus);
const onMenuClick = (e) => {
const path = e.key;
if (/^https?:\/\//.test(path)) {
window.open(path, '_blank');
} else if (/^\//.test(path)) {
router.push(path);
} else {
console.warn(
'[plugin-layout]: 菜单的path只能使以http(s)开头的网址或者路由地址'
);
}
};
const selectedKeys = computed(() => [route.path]);
return {
selectedKeys,
menus: fixedMenus,
onMenuClick
};
}
};
</script>
<style lang="less">
</style>

99
packages/fes-plugin-layout/src/views/layout.vue
View File

@ -1,99 +0,0 @@
<template>
<a-layout id="components-layout-demo-custom-trigger">
<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-item key="1">
<user-outlined />
<span>nav 1</span>
</a-menu-item>
<a-menu-item key="2">
<video-camera-outlined />
<span>nav 2</span>
</a-menu-item>
<a-menu-item key="3">
<upload-outlined />
<span>nav 3</span>
</a-menu-item>
</a-menu>
</a-layout-sider>
<a-layout>
<a-layout-header style="background: #fff; padding: 0">
<menu-unfold-outlined
v-if="collapsed"
@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'
}"
>
Content
</a-layout-content>
</a-layout>
</a-layout>
</template>
<script>
import {
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined
} from '@ant-design/icons-vue';
export default {
components: {
UserOutlined,
VideoCameraOutlined,
UploadOutlined,
MenuUnfoldOutlined,
MenuFoldOutlined
},
data() {
return {
selectedKeys: ['1'],
collapsed: false
};
}
};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
font-size: 18px;
line-height: 64px;
padding: 0 24px;
cursor: pointer;
transition: color 0.3s;
}
#components-layout-demo-custom-trigger .trigger:hover {
color: #1890ff;
}
#components-layout-demo-custom-trigger .logo {
height: 32px;
background: rgba(255, 255, 255, 0.2);
margin: 16px;
}
</style>

1
packages/fes-preset-built-in/src/plugins/commands/dev/index.js
View File

@ -33,7 +33,6 @@ export default (api) => {
description: 'start a dev server for development',
async fn({ args = {} }) {
const defaultPort = process.env.PORT || args.port || api.config.devServer?.port;
console.log(api.config.devServer);
port = await portfinder.getPortPromise({
port: defaultPort ? parseInt(String(defaultPort), 10) : 8000
});

7
packages/fes-preset-built-in/src/plugins/misc/route/index.js
View File

@ -267,5 +267,12 @@ export default function (api) {
});
});
api.addCoreExports(() => [
{
specifiers: ['getRoutes'],
source: absCoreFilePath
}
]);
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
}

10
packages/fes-template/.fes.js
View File

@ -1,15 +1,19 @@
// fes.config.js 只负责管理 cli 相关的配置
// .fes.js 只负责管理编译时配置，只能使用plain Object
export default {
access: {
roles: {
admin: ["/"]
admin: ["/", "/onepiece"]
}
},
layout: {
title: "Fes.js",
logo: 'https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg',
menus: [{
path: '/'
name: 'index'
}, {
name: 'onepiece'
}]
},
devServer: {

11
packages/fes-template/src/app.js
View File

@ -1,6 +1,6 @@
import { access } from '@webank/fes';
import PageLoading from '@/components/PageLoading.vue';
import UserCenter from '@/components/UserCenter.vue';
export const beforeRender = {
loading: <PageLoading />,
@ -10,10 +10,13 @@ export const beforeRender = {
setTimeout(() => {
setRole('admin');
resolve({
a: 1,
b: 2
userName: 'harrywan'
});
}, 3000);
}, 1000);
});
}
};
export const layout = {
userCenter: <UserCenter />
};

2
packages/fes-template/src/components/PageLoading.vue
View File

@ -4,7 +4,7 @@
</div>
</template>
<script>
import { Spin } from 'ant-design-vue';
import Spin from 'ant-design-vue/lib/spin';
import 'ant-design-vue/lib/spin/style';
export default {

15
packages/fes-template/src/components/UserCenter.vue Normal file
View File

@ -0,0 +1,15 @@
<template>
<div>{{initialState.userName}}</div>
</template>
<script>
import { useModel } from '@webank/fes';
export default {
setup() {
const { initialState } = useModel('@@initialState');
return {
initialState
};
}
};
</script>

3
packages/fes-template/src/pages/index.vue
View File

@ -6,8 +6,9 @@
</template>
<config>
{
"name": "index",
"title": "首页",
"layout": "false"
"layout": false
}
</config>
<script>

4
packages/fes-template/src/pages/onepiece.vue
View File

@ -3,8 +3,8 @@
</template>
<config>
{
"title": "onepiece",
"layout": "true"
"name": "onepiece",
"title": "onepiece"
}
</config>
<script>