This commit is contained in:
winixt 2021-06-24 20:02:15 +08:00
commit 0b079e90d5
33 changed files with 146 additions and 100 deletions

View File

@ -14,8 +14,19 @@
- 可配置页面是否需要 layout。
## 启用方式
`package.json` 中引入依赖:
```json
{
"dependencies": {
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-layout": "^2.0.0"
},
}
```
## 布局类型
配置参数是 `navigation`, 内容默认是 `side`
配置参数是 `navigation`, 布局有三种类型 `side``mixin``top` 默认是 `side`
```js
export default {
layout: {
@ -36,28 +47,31 @@ export default {
<!-- ![mixin](/mixin.png) -->
<img :src="$withBase('mixin.png')" alt="mixin">
## 启用方式
`package.json` 中引入依赖:
```json
{
"dependencies": {
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-layout": "^2.0.0"
},
}
```
### 页面禁用布局
Fes.js 渲染路由时,如果路由元信息存在配置 `layout``false`,则表示禁用此配置,用户只需要如下配置:
布局是默认开启的,但是可能某些页面不需要展示布局样式,比如登录页面。我们只需要在页面的`.vue`中添加如下配置:
```vue
<config>
<config lang="json">
{
"layout": false
}
</config>
<script>
</script>
```
如果只是不想展示`side`,则:
<config lang="json">
{
"layout": {
"side": false
}
}
</config>
```
`layout`的可选配置有:
- **side** 左侧区域
- **top** 头部区域
- **logo**logo和标题区域。
## 配置
@ -174,13 +188,13 @@ export default {
- 图标使用[antv icon](https://www.antdv.com/components/icon-cn/)在这里使用组件type。
```js
{
name: "user"
icon: "user"
}
```
- 图使用本地或者远程svg图片。
- 图使用本地或者远程svg图片。
```js
{
name: "/wine-outline.svg"
icon: "/wine-outline.svg"
}
```
@ -201,7 +215,7 @@ export const layout = {
- **默认值**`null`
- **详情**布局的 Header 部位提供组件自定义功能。
- **详情**top的区域部分位置提供组件自定义功能。
#### unAccessHandler
- **类型**`Function`

View File

@ -1,5 +1,5 @@
{
"version": "2.0.0-rc.29",
"version": "2.0.0",
"changelog": {
"repo": "WeBankFinTech/fes.js",
"cacheDir": ".changelog",

View File

@ -11,7 +11,7 @@
"clean": "lerna clean",
"bootstrap": "lerna bootstrap",
"build": "father-build --watch",
"ver": "lerna version prerelease --preid rc --no-changelog --no-commit-hooks --no-private",
"ver": "lerna version patch --no-changelog --no-commit-hooks --no-private",
"release": "father-build && lerna publish from-git",
"docs:dev": "vuepress dev docs --clean-cache",
"docs:build": "vuepress build docs --clean-cache"

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/create-fes-app",
"version": "2.0.0-rc.27",
"version": "2.0.0",
"description": "create a app base on fes.js",
"main": "lib/index.js",
"files": [

View File

@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "none"
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/template-h5",
"version": "2.0.0-rc.0",
"version": "2.0.0",
"description": "fes 移动端项目模版",
"scripts": {
"build": "fes build",
@ -44,9 +44,9 @@
"@ttou/postcss-px-to-viewport": "1.1.1"
},
"dependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/plugin-icon": "^2.0.0-rc.0",
"@fesjs/plugin-request": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-icon": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0",
"vue": "^3.0.5"
},
"private": true

View File

@ -0,0 +1,4 @@
{
"singleQuote": true,
"trailingComma": "none"
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/template",
"version": "2.0.0-rc.0",
"version": "2.0.0",
"description": "fes项目模版",
"scripts": {
"build": "fes build",
@ -46,11 +46,11 @@
"@webank/eslint-config-webank": "0.3.0"
},
"dependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/plugin-access": "^2.0.0-rc.0",
"@fesjs/plugin-layout": "^2.0.0-rc.0",
"@fesjs/plugin-model": "^2.0.0-rc.0",
"@fesjs/plugin-enums": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-access": "^2.0.0",
"@fesjs/plugin-layout": "^2.0.0",
"@fesjs/plugin-model": "^2.0.0",
"@fesjs/plugin-enums": "^2.0.0",
"ant-design-vue": "^2.0.0",
"vue": "^3.0.5"
},

View File

@ -1080,7 +1080,7 @@
set-value "3.0.2"
tapable "^2.2.0"
"@fesjs/fes@^2.0.0-rc.0":
"@fesjs/fes@^2.0.0":
version "2.0.0-rc.22"
resolved "https://registry.yarnpkg.com/@fesjs/fes/-/fes-2.0.0-rc.22.tgz#dd82e6bd0abd0da90e9adf952f6e661d61faef03"
integrity sha512-udoJSozlZUPCKjhdRyNj8bDcqXSve9fJzu7flFYux6ZQYUQpQP6c4NI0wPqWoZ1bcW/Ntx0slvuMOP8TEcYSxw==
@ -1091,26 +1091,26 @@
"@umijs/utils" "3.3.3"
resolve-cwd "^3.0.0"
"@fesjs/plugin-access@^2.0.0-rc.0":
"@fesjs/plugin-access@^2.0.0":
version "2.0.0-rc.20"
resolved "https://registry.yarnpkg.com/@fesjs/plugin-access/-/plugin-access-2.0.0-rc.20.tgz#6342e3b167973d874b1e6d044dd6703b86392b73"
integrity sha512-vZe68gag4zAgzpWScUA8VIFCFTFYeVnK4Duwya9USero6Zh48V6NlzocQndLODt0xReeHnc5Et7suMA6Nq9WsA==
dependencies:
lodash "^4.17.15"
"@fesjs/plugin-enums@^2.0.0-rc.0":
"@fesjs/plugin-enums@^2.0.0":
version "2.0.0-rc.22"
resolved "https://registry.yarnpkg.com/@fesjs/plugin-enums/-/plugin-enums-2.0.0-rc.22.tgz#97a5f8d309d290e28227d06e6140a6230ff9d6bd"
integrity sha512-KFMcbUi87vo1eBJ8xkuoBflZID6ez9fPh4YUwNWqhMERYOOJuJ5h2331ORZIOSU903iFbBfDE/tn+XpcCXUHbQ==
"@fesjs/plugin-layout@^2.0.0-rc.0":
"@fesjs/plugin-layout@^2.0.0":
version "2.0.0-rc.18"
resolved "https://registry.yarnpkg.com/@fesjs/plugin-layout/-/plugin-layout-2.0.0-rc.18.tgz#f24b05b063584ac0541bdd1553128cd18e661297"
integrity sha512-az7q4c+EHydabqn9Ctx2vo19ERua882fqkTgYOH15ebl+g04duDDjeWsFnCKl8AofIBuJjb98IVNqs2qvNuG8w==
dependencies:
"@umijs/utils" "3.3.3"
"@fesjs/plugin-model@^2.0.0-rc.0":
"@fesjs/plugin-model@^2.0.0":
version "2.0.0-rc.8"
resolved "https://registry.yarnpkg.com/@fesjs/plugin-model/-/plugin-model-2.0.0-rc.8.tgz#ca61e696168c5698e3630212f602c3da99ca40b4"
integrity sha512-4OVDutEYOmx6GLpjxbKlXug7MJjOhDa/4FBP5M5s+MMJsy+y7VdCHLn74/ZZuWalVmx7kNRl2niJNS2EVx3vyQ==

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/compiler",
"version": "2.0.0-rc.5",
"version": "2.0.0",
"description": "@fesjs/compiler",
"main": "lib/index.js",
"files": [

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-access",
"version": "2.0.0-rc.20",
"version": "2.0.0",
"description": "@fesjs/plugin-access",
"main": "lib/index.js",
"files": [
@ -30,7 +30,7 @@
"lodash": "^4.17.15"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-enums",
"version": "2.0.0-rc.22",
"version": "2.0.0",
"description": "@fesjs/plugin-enums",
"main": "lib/index.js",
"files": [
@ -27,7 +27,7 @@
"access": "public"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-icon",
"version": "2.0.0-rc.1",
"version": "2.0.0",
"description": "@fesjs/plugin-icon",
"main": "lib/index.js",
"files": [

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-jest",
"version": "2.0.0-rc.5",
"version": "2.0.0",
"description": "@fesjs/plugin-jest",
"main": "lib/index.js",
"files": [
@ -31,7 +31,7 @@
},
"dependencies": {
"@babel/core": "7.11.6",
"@fesjs/compiler": "^2.0.0-rc.5",
"@fesjs/compiler": "^2.0.0",
"@umijs/babel-preset-umi": "3.2.24",
"babel-core": "^7.0.0-bridge.0",
"babel-jest": "^26.6.3",

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-layout",
"version": "2.0.0-rc.25",
"version": "2.0.0",
"description": "@fesjs/plugin-layout",
"main": "lib/index.js",
"files": [
@ -31,7 +31,7 @@
},
"peerDependencies": {
"@ant-design/icons-vue": "^5.1.6",
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"ant-design-vue": "2.0.0",
"vue": "^3.0.5"
}

View File

@ -6,7 +6,7 @@ const matchName = (config, name) => {
for (let i = 0; i < config.length; i++) {
const item = config[i];
if (item.meta && item.meta.name === name) {
res = item.meta || {};
res = item.meta;
res.path = item.path;
break;
}
@ -68,10 +68,10 @@ export function getIconsFromMenu(data) {
return [];
}
let icons = [];
(data || []).forEach((item = { path: '/' }) => {
data.forEach((item = { path: '/' }) => {
if (item.icon) {
const { icon } = item;
if (icon && icon.type === 'icon') {
if (icon.type === 'icon') {
icons.push(icon.name);
}
}

View File

@ -1,6 +1,6 @@
<template>
<a-layout
v-if="routeHasLayout"
v-if="routeLayout"
:class="[
collapsed ? 'main-layout-collapsed' : '',
`main-layout-navigation-${navigation}`,
@ -8,7 +8,7 @@
]"
class="main-layout"
>
<template v-if="navigation !== 'top'">
<template v-if="navigation !== 'top' && routeLayout.side">
<div v-if="fixedSideBar" :style="siderFixedStuffStyle" class="layout-sider-fixed-stuff"></div>
<a-layout-sider
v-model:collapsed="collapsed"
@ -20,7 +20,7 @@
:theme="siderTheme"
collapsible
>
<div v-if="navigation !== 'mixin'" class="layout-logo">
<div v-if="navigation !== 'mixin' && routeLayout.logo" class="layout-logo">
<img :src="logo" class="logo-img" />
<h1 class="logo-name">{{title}}</h1>
</div>
@ -28,19 +28,20 @@
</a-layout-sider>
</template>
<a-layout class="child-layout">
<a-layout-header v-if="currentFixedHeader" class="layout-header">
<a-layout-header v-if="currentFixedHeader && routeLayout.top" class="layout-header">
</a-layout-header>
<a-layout-header
v-if="routeLayout.top"
:style="headerFixedStyle"
:class="[currentFixedHeader ? 'layout-header-fixed' : '']"
class="layout-header"
>
<div v-if="navigation === 'mixin'" class="layout-logo">
<div v-if="navigation === 'mixin' && routeLayout.logo" class="layout-logo">
<img :src="logo" class="logo-img" />
<h1 class="logo-name">{{title}}</h1>
</div>
<template v-if="navigation === 'top'">
<div class="layout-logo">
<div v-if="routeLayout.logo" class="layout-logo">
<img :src="logo" class="logo-img" />
<h1 class="logo-name">{{title}}</h1>
</div>
@ -135,9 +136,32 @@ export default {
setup(props) {
const collapsed = ref(false);
const route = useRoute();
const routeHasLayout = computed(() => {
const _routeLayout = route.meta.layout;
return _routeLayout === undefined ? true : _routeLayout;
const routeLayoutDefault = {
side: true,
top: true,
logo: true
};
const routeLayout = computed(() => {
let config;
// meta layout true
const metaLayoutConfig = route.meta.layout === undefined ? true : route.meta.layout;
if (typeof metaLayoutConfig === 'boolean') {
config = metaLayoutConfig ? routeLayoutDefault : false;
} else if (typeof metaLayoutConfig === 'object') {
config = { ...routeLayoutDefault, ...metaLayoutConfig };
} else {
console.error('[plugin-layout]: meta layout must be object or boolean');
}
// query layout false
const routeQueryLayoutConfig = route.query.layout && JSON.parse(route.query.layout);
if (typeof routeQueryLayoutConfig === 'boolean') {
config = routeQueryLayoutConfig ? routeLayoutDefault : false;
} else if (typeof routeQueryLayoutConfig === 'object') {
config = { ...config, ...routeQueryLayoutConfig };
} else if (routeQueryLayoutConfig !== undefined) {
console.error('[plugin-layout]: query layout must be object or boolean');
}
return config;
});
const siderTheme = computed(() => {
if (props.navigation === 'mixin') {
@ -175,7 +199,7 @@ export default {
siderTheme,
currentFixedHeader,
route,
routeHasLayout,
routeLayout,
collapsed,
siderFixedStuffStyle,
headerFixedStyle

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-locale",
"version": "2.0.0-rc.8",
"version": "2.0.0",
"description": "@fesjs/plugin-locale",
"main": "lib/index.js",
"files": [
@ -32,7 +32,7 @@
},
"peerDependencies": {
"@ant-design/icons-vue": "^5.1.6",
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"ant-design-vue": "2.0.0",
"vue": "^3.0.5"
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-model",
"version": "2.0.0-rc.8",
"version": "2.0.0",
"description": "@fesjs/plugin-model",
"main": "lib/index.js",
"files": [
@ -30,7 +30,7 @@
"@umijs/utils": "3.3.3"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5"
}
}

View File

@ -46,7 +46,7 @@
"@webank/eslint-config-webank": "0.3.0"
},
"dependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5",
"ant-design-vue": "2.0.0"
},

View File

@ -46,7 +46,7 @@
"@webank/eslint-config-webank": "0.3.0"
},
"dependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5",
"ant-design-vue": "2.0.0"
},

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-qiankun",
"version": "2.0.0-rc.27",
"version": "2.0.0",
"description": "@fesjs/plugin-qiankun",
"main": "lib/index.js",
"files": [
@ -38,7 +38,7 @@
"npm-run-all": "^4.1.5"
},
"peerDependencies": {
"@webank/fes": "^2.0.0-rc.0",
"@webank/fes": "^2.0.0",
"vue": "^3.0.5"
}
}

View File

@ -45,7 +45,7 @@ function modifyRoutesWithAttachMode({
export default function modifyRoutes({ api, namespace }) {
api.modifyRoutes((routes) => {
const { router, base } = api.config;
const masterHistoryType = (router && router?.mode) || defaultHistoryType;
const masterHistoryType = (router && router.mode) || defaultHistoryType;
modifyRoutesWithAttachMode({
routes,

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-request",
"version": "2.0.0-rc.27",
"version": "2.0.0",
"description": "@fesjs/plugin-request",
"main": "lib/index.js",
"files": [
@ -27,11 +27,11 @@
"access": "public"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5"
},
"dependencies": {
"@fesjs/compiler": "^2.0.0-rc.5",
"@fesjs/compiler": "^2.0.0",
"axios": "0.21.1"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-sass",
"version": "2.0.0-rc.18",
"version": "2.0.0",
"description": "@fesjs/plugin-sass",
"main": "lib/index.js",
"files": [
@ -31,6 +31,6 @@
"sass-loader": "^11.0.1"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0"
"@fesjs/fes": "^2.0.0"
}
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/plugin-vuex",
"version": "2.0.0-rc.16",
"version": "2.0.0",
"description": "@fesjs/plugin-vuex",
"main": "lib/index.js",
"files": [
@ -30,7 +30,7 @@
"@umijs/utils": "3.3.3"
},
"peerDependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"vue": "^3.0.5",
"vuex": "^4.0.0"
}

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/preset-built-in",
"version": "2.0.0-rc.29",
"version": "2.0.0",
"description": "@fesjs/preset-built-in",
"main": "lib/index.js",
"types": "lib/index.d.ts",
@ -32,7 +32,7 @@
"@babel/plugin-proposal-pipeline-operator": "^7.12.13",
"@babel/plugin-transform-runtime": "^7.12.13",
"@babel/preset-env": "^7.12.13",
"@fesjs/compiler": "^2.0.0-rc.5",
"@fesjs/compiler": "^2.0.0",
"@soda/friendly-errors-webpack-plugin": "^1.8.0",
"@umijs/utils": "3.3.3",
"@vue/babel-plugin-jsx": "^1.0.2",

View File

@ -39,7 +39,7 @@ export default function (api) {
try {
// clear output path before exec build
if (process.env.CLEAR_OUTPUT !== 'none') {
if (paths.absOutputPath && existsSync(paths.absOutputPath || '')) {
if (paths.absOutputPath && existsSync(paths.absOutputPath)) {
logger.debug(`Clear OutputPath: ${paths.absNodeModulesPath}`);
rimraf.sync(paths.absOutputPath);
}

View File

@ -163,7 +163,7 @@ const rank = function (routes) {
rank(item.children);
}
});
routes = routes.sort((a, b) => b.count - a.count);
routes.sort((a, b) => b.count - a.count);
};
const getRoutes = function ({ config, absPagesPath }) {

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/runtime",
"version": "2.0.0-rc.5",
"version": "2.0.0",
"description": "@fesjs/runtime",
"main": "dist/index.js",
"files": [

View File

@ -46,9 +46,9 @@
},
"dependencies": {
"debounce": "1.2.1",
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/plugin-icon": "^2.0.0-rc.0",
"@fesjs/plugin-request": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-icon": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0",
"vue": "^3.0.5"
},
"private": true

View File

@ -46,17 +46,17 @@
"@webank/eslint-config-webank": "0.3.0"
},
"dependencies": {
"@fesjs/fes": "^2.0.0-rc.0",
"@fesjs/plugin-access": "^2.0.0-rc.0",
"@fesjs/plugin-layout": "^2.0.0-rc.0",
"@fesjs/plugin-locale": "^2.0.0-rc.0",
"@fesjs/plugin-model": "^2.0.0-rc.0",
"@fesjs/plugin-enums": "^2.0.0-rc.0",
"@fesjs/plugin-jest": "^2.0.0-rc.0",
"@fesjs/plugin-vuex": "^2.0.0-rc.0",
"@fesjs/plugin-request": "^2.0.0-rc.0",
"@fesjs/plugin-qiankun": "^2.0.0-rc.0",
"@fesjs/plugin-sass": "^2.0.0-rc.0",
"@fesjs/fes": "^2.0.0",
"@fesjs/plugin-access": "^2.0.0",
"@fesjs/plugin-layout": "^2.0.0",
"@fesjs/plugin-locale": "^2.0.0",
"@fesjs/plugin-model": "^2.0.0",
"@fesjs/plugin-enums": "^2.0.0",
"@fesjs/plugin-jest": "^2.0.0",
"@fesjs/plugin-vuex": "^2.0.0",
"@fesjs/plugin-request": "^2.0.0",
"@fesjs/plugin-qiankun": "^2.0.0",
"@fesjs/plugin-sass": "^2.0.0",
"ant-design-vue": "2.0.0",
"vue": "^3.0.5",
"vuex": "^4.0.0"

View File

@ -1,6 +1,6 @@
{
"name": "@fesjs/fes",
"version": "2.0.0-rc.29",
"version": "2.0.0",
"description": "一个好用的前端管理台快速开发框架",
"preferGlobal": true,
"scripts": {
@ -39,9 +39,9 @@
"strong"
],
"dependencies": {
"@fesjs/compiler": "^2.0.0-rc.5",
"@fesjs/preset-built-in": "^2.0.0-rc.29",
"@fesjs/runtime": "^2.0.0-rc.5",
"@fesjs/compiler": "^2.0.0",
"@fesjs/preset-built-in": "^2.0.0",
"@fesjs/runtime": "^2.0.0",
"@umijs/utils": "3.3.3",
"resolve-cwd": "^3.0.0"
},