mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-05 19:41:57 +08:00
Merge branch 'vue3' of github.com:WeBankFinTech/fes.js into vue3
merge vue3 code
This commit is contained in:
tianxuan
commit
c84f96cab1
@ -1,7 +1,32 @@
|
||||
# @webank/fes-plugin-icon
|
||||
|
||||
## 介绍
|
||||
|
||||
提供以 `component` 的方式，直接使用 svg icon 的能力。
|
||||
## 启用方式
|
||||
|
||||
## 配置
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@webank/fes": "^2.0.0",
|
||||
"@webank/fes-plugin-icon": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
## 使用
|
||||
|
||||
新建 `src/icons` 目录，将 svg 文件放入其中，在 `component` 中引用：
|
||||
|
||||
```jsx
|
||||
<fes-icon type="iconName" />
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性 | 说明 | 类型 |
|
||||
| :-----| :---- | :---- |
|
||||
| type | svg 文件名 | `string` |
|
||||
| spin | 是否无限旋转 | `boolean` |
|
||||
| rotate | 旋转角度 | `number` |
|
||||
|
||||
@ -1,8 +1,157 @@
|
||||
# @webank/fes-plugin-request
|
||||
|
||||
|
||||
基于 axios 封装的 request，内置防止重复请求、请求节流、错误处理等功能。
|
||||
## 启用方式
|
||||
|
||||
在 `package.json` 中引入依赖：
|
||||
```json
|
||||
{
|
||||
"dependencies": {
|
||||
"@webank/fes": "^2.0.0",
|
||||
"@webank/fes-plugin-request": "^2.0.0"
|
||||
},
|
||||
}
|
||||
```
|
||||
## 配置
|
||||
|
||||
## API
|
||||
### 构建时配置
|
||||
|
||||
```js
|
||||
export default {
|
||||
request: {
|
||||
dataField: 'result',
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
#### dataField
|
||||
|
||||
- 类型： `string`
|
||||
- 默认值： `''`
|
||||
- 详情：
|
||||
|
||||
`dataField` 对应接口统一格式中的数据字段，比如接口如果统一的规范是 `{ success: boolean, result: any}` ，那么就不需要配置，这样你通过 `useRequest` 消费的时候会生成一个默认的 `formatResult`，直接返回 `result` 中的数据，方便使用。如果你的后端接口不符合这个规范，可以自行配置 `dataField`。配置为 `''`（空字符串）的时候不做处理。
|
||||
|
||||
### 运行时配置
|
||||
|
||||
在 `app.js` 中进行运行时配置。
|
||||
|
||||
```js
|
||||
export const request = {
|
||||
// 格式化 response.data (只有 response.data 类型为 object 才会调用)
|
||||
responseDataAdaptor: (data) => {
|
||||
|
||||
},
|
||||
// 请求拦截器
|
||||
requestInterceptors: [],
|
||||
// 相应拦截器
|
||||
responseInterceptors: [],
|
||||
// 错误处理
|
||||
// 内部以 reponse.data.code === '0' 判断请求是否成功
|
||||
// 若使用其他字段判断，可以使用 responseDataAdaptor 对响应数据进行格式
|
||||
errorHandler: {
|
||||
11199: (response) => {
|
||||
|
||||
},
|
||||
404: (error) => {
|
||||
|
||||
}
|
||||
},
|
||||
// 其他 axios 配置
|
||||
...otherConfigs
|
||||
}
|
||||
```
|
||||
## 使用
|
||||
|
||||
### 发起一个普通 post 请求
|
||||
|
||||
```js
|
||||
import {request} from '@webank/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
```
|
||||
|
||||
### 请求节流
|
||||
|
||||
```js
|
||||
import {request} from '@webank/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
throttle: 1000, // 1 秒内只能发起一次请求
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
```
|
||||
|
||||
### 请求缓存
|
||||
|
||||
```js
|
||||
import {request} from '@webank/fes';
|
||||
|
||||
request('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
}, {
|
||||
cache: {
|
||||
cacheType: 'ram', // ram: 内存，session: sessionStorage，local：localStorage
|
||||
cacheTime: 1000 * 60 * 3 // 缓存时间，默认3min
|
||||
},
|
||||
}).then((res) => {
|
||||
// do something
|
||||
}).catch((err) => {
|
||||
// 处理异常
|
||||
})
|
||||
```
|
||||
|
||||
若 `cache` 传 `true`，则默认使用 `ram` 缓存类型，缓存时间 3min。
|
||||
|
||||
### 结合 use 使用
|
||||
|
||||
```js
|
||||
import {useRequest} from '@webank/fes';
|
||||
|
||||
|
||||
export default {
|
||||
setup() {
|
||||
const {loading, data, error} = useRequest('/api/login', {
|
||||
username: 'robby',
|
||||
password: '123456'
|
||||
})
|
||||
|
||||
return {
|
||||
loading,
|
||||
data,
|
||||
error
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
### request
|
||||
|
||||
- **类型**：函数
|
||||
|
||||
- **详情**：请求后端接口
|
||||
- **参数**：
|
||||
- url: 后端接口 url
|
||||
- data: 参数
|
||||
- options: 配置（ 支持 axios 所有配置）
|
||||
- **返回值**: Promise
|
||||
|
||||
### useRequest
|
||||
|
||||
request 的封装，返回响应式 `loading`、`error`、 `data`
|
||||
|
||||
@ -73,7 +73,6 @@ export default {
|
||||
locale.setLocale({ lang: 'en-US' });
|
||||
locale.addLocale({ lang: 'ja-JP', messages: { test: 'テスト' } });
|
||||
console.log(locale.getAllLocales());
|
||||
access.addAccess('/onepiece1');
|
||||
}, 2000);
|
||||
setTimeout(() => {
|
||||
accessId.value = '11';
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { reactive, computed, inject } from "vue";
|
||||
import { reactive, unref, computed, inject } from "vue";
|
||||
import createDirective from "./createDirective";
|
||||
import createComponent from "./createComponent";
|
||||
|
||||
@ -56,12 +56,9 @@ const setAccess = (accessIds) => {
|
||||
state.currentAccessIds = accessIds;
|
||||
};
|
||||
|
||||
const addAccess = (accessId) => {
|
||||
if (typeof accessId !== 'string') {
|
||||
throw new Error("[plugin-access]: argument to the addAccess() must be string");
|
||||
}
|
||||
state.currentAccessIds.push(accessId);
|
||||
};
|
||||
const getAccess = () => {
|
||||
return state.currentAccessIds.slice(0)
|
||||
}
|
||||
|
||||
const _syncSetRoleId = (promise) => {
|
||||
rolePromiseList.push(promise);
|
||||
@ -116,12 +113,12 @@ const match = (path, accessIds) => {
|
||||
return false;
|
||||
};
|
||||
|
||||
const hasLoading = () => {
|
||||
const isDataReady = () => {
|
||||
return rolePromiseList.length || accessPromiseList.length;
|
||||
};
|
||||
|
||||
const hasAccess = async (path) => {
|
||||
if (!hasLoading()) {
|
||||
if (!isDataReady()) {
|
||||
return match(path, getAllowAccessIds());
|
||||
}
|
||||
await Promise.all(rolePromiseList.concat(accessPromiseList));
|
||||
@ -132,7 +129,7 @@ export const install = (app) => {
|
||||
const allowPageIds = computed(getAllowAccessIds);
|
||||
const useAccess = (path) => {
|
||||
const result = computed(() => {
|
||||
return match(path, allowPageIds.value);
|
||||
return match(unref(path), allowPageIds.value);
|
||||
});
|
||||
return result;
|
||||
};
|
||||
@ -143,10 +140,10 @@ export const install = (app) => {
|
||||
|
||||
export const access = {
|
||||
hasAccess,
|
||||
hasLoading,
|
||||
isDataReady,
|
||||
setRole,
|
||||
setAccess,
|
||||
addAccess
|
||||
getAccess,
|
||||
};
|
||||
|
||||
export const useAccess = (path) => {
|
||||
|
||||
@ -3,6 +3,18 @@ import { access, install } from './core';
|
||||
|
||||
export function onRouterCreated({ router }) {
|
||||
router.beforeEach(async (to, from, next) => {
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: 'access',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {}
|
||||
});
|
||||
if (to.matched.length === 0) {
|
||||
if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
|
||||
return runtimeConfig.noFoundHandler({
|
||||
router, to, from, next
|
||||
});
|
||||
}
|
||||
}
|
||||
let path;
|
||||
if (to.matched.length === 1) {
|
||||
path = to.matched[0].path;
|
||||
@ -11,21 +23,14 @@ export function onRouterCreated({ router }) {
|
||||
}
|
||||
const canRoute = await access.hasAccess(path);
|
||||
if (canRoute) {
|
||||
next();
|
||||
} else {
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: 'access',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {}
|
||||
});
|
||||
if (runtimeConfig.noAccessHandler && typeof runtimeConfig.noAccessHandler === 'function') {
|
||||
runtimeConfig.noAccessHandler({
|
||||
router, to, from, next
|
||||
});
|
||||
} else {
|
||||
next(false);
|
||||
}
|
||||
return next();
|
||||
}
|
||||
if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
|
||||
return runtimeConfig.unAccessHandler({
|
||||
router, to, from, next
|
||||
});
|
||||
}
|
||||
next(false);
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -23,6 +23,8 @@ export default (api) => {
|
||||
|
||||
const absFilePath = join(namespace, 'index.js');
|
||||
|
||||
const absRuntimeFilePath = join(namespace, 'runtime.js');
|
||||
|
||||
api.onGenerateFiles(() => {
|
||||
const { name } = api.pkg;
|
||||
|
||||
@ -53,6 +55,7 @@ export default (api) => {
|
||||
});
|
||||
});
|
||||
|
||||
api.addRuntimePlugin(() => `@@/${absRuntimeFilePath}`);
|
||||
|
||||
// 把BaseLayout插入到路由配置中，作为根路由
|
||||
api.modifyRoutes(routes => [
|
||||
|
||||
@ -27,7 +27,7 @@ const matchPath = (config, path) => {
|
||||
for (let i = 0; i < config.length; i++) {
|
||||
const item = config[i];
|
||||
if (item.path && item.path === path) {
|
||||
res = item.meta;
|
||||
res = item.meta || {};
|
||||
res.path = item.path;
|
||||
break;
|
||||
}
|
||||
|
||||
@ -7,29 +7,29 @@ if (!useAccess) {
|
||||
);
|
||||
}
|
||||
|
||||
const hasAccess = (item) => {
|
||||
export const hasAccessByMenuItem = (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)));
|
||||
res = computed(() => item.children.some(child => hasAccessByMenuItem(child)));
|
||||
}
|
||||
return res;
|
||||
};
|
||||
|
||||
const addAcessTag = (arr) => {
|
||||
const _addAccessTag = (arr) => {
|
||||
if (Array.isArray(arr)) {
|
||||
arr.forEach((item) => {
|
||||
item.access = hasAccess(item);
|
||||
item.access = hasAccessByMenuItem(item);
|
||||
if (item.children && item.children.length > 0) {
|
||||
addAcessTag(item.children);
|
||||
_addAccessTag(item.children);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default function (menus) {
|
||||
export const addAccessTag = (menus) => {
|
||||
const originData = unref(menus);
|
||||
addAcessTag(originData);
|
||||
_addAccessTag(originData);
|
||||
return originData;
|
||||
}
|
||||
};
|
||||
69
packages/fes-plugin-layout/src/runtime/runtime.js
Normal file
69
packages/fes-plugin-layout/src/runtime/runtime.js
Normal file
@ -0,0 +1,69 @@
|
||||
import { plugin, ApplyPluginsType } from '@@/core/coreExports';
|
||||
import { access as accessApi } from '../plugin-access/core';
|
||||
import Exception404 from './views/404';
|
||||
import Exception403 from './views/403';
|
||||
|
||||
if (!accessApi) {
|
||||
throw new Error(
|
||||
'[plugin-layout]: pLugin-layout depends on plugin-access，please install plugin-access first！'
|
||||
);
|
||||
}
|
||||
|
||||
const handle = (type, router) => {
|
||||
const accesssIds = accessApi.getAccess();
|
||||
const path = `/${type}`;
|
||||
const name = `Exception${type}`;
|
||||
const components = {
|
||||
404: Exception404,
|
||||
403: Exception403
|
||||
};
|
||||
if (!accesssIds.includes(path)) {
|
||||
accessApi.setAccess(accesssIds.concat([path]));
|
||||
}
|
||||
if (!router.hasRoute(name)) {
|
||||
router.addRoute({ path, name, component: components[type] });
|
||||
}
|
||||
};
|
||||
|
||||
export const access = {
|
||||
unAccessHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: 'layout',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {}
|
||||
});
|
||||
if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {
|
||||
return runtimeConfig.unAccessHandler({
|
||||
router, to, from, next
|
||||
});
|
||||
}
|
||||
if (to.path === '/404') {
|
||||
handle(404, router);
|
||||
return next('/404');
|
||||
}
|
||||
handle(403, router);
|
||||
next('/403');
|
||||
},
|
||||
noFoundHandler({
|
||||
router, to, from, next
|
||||
}) {
|
||||
const runtimeConfig = plugin.applyPlugins({
|
||||
key: 'layout',
|
||||
type: ApplyPluginsType.modify,
|
||||
initialValue: {}
|
||||
});
|
||||
if (runtimeConfig.noFoundHandler && typeof runtimeConfig.noFoundHandler === 'function') {
|
||||
return runtimeConfig.noFoundHandler({
|
||||
router, to, from, next
|
||||
});
|
||||
}
|
||||
if (to.path === '/403') {
|
||||
handle(403, router);
|
||||
return next('/403');
|
||||
}
|
||||
handle(404, router);
|
||||
next('/404');
|
||||
}
|
||||
};
|
||||
35
packages/fes-plugin-layout/src/runtime/views/403.vue
Normal file
35
packages/fes-plugin-layout/src/runtime/views/403.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<a-result status="403" title="403" sub-title="对不起，您没有权限访问此页面。">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="click">上一页</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Result.name]: Result,
|
||||
[Button.name]: Button
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const click = () => {
|
||||
router.back();
|
||||
};
|
||||
return {
|
||||
click
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
35
packages/fes-plugin-layout/src/runtime/views/404.vue
Normal file
35
packages/fes-plugin-layout/src/runtime/views/404.vue
Normal file
@ -0,0 +1,35 @@
|
||||
<template>
|
||||
<a-result status="404" title="404" sub-title="对不起，您访问的页面不存在。">
|
||||
<template #extra>
|
||||
<a-button type="primary" @click="click">上一页</a-button>
|
||||
</template>
|
||||
</a-result>
|
||||
</template>
|
||||
<config>
|
||||
{
|
||||
"layout": false
|
||||
}
|
||||
</config>
|
||||
<script>
|
||||
import { useRouter } from '@@/core/coreExports';
|
||||
import Result from 'ant-design-vue/lib/result';
|
||||
import 'ant-design-vue/lib/result/style';
|
||||
import Button from 'ant-design-vue/lib/button';
|
||||
import 'ant-design-vue/lib/button/style';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
[Result.name]: Result,
|
||||
[Button.name]: Button
|
||||
},
|
||||
setup() {
|
||||
const router = useRouter();
|
||||
const click = () => {
|
||||
router.back();
|
||||
};
|
||||
return {
|
||||
click
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
@ -1,11 +1,11 @@
|
||||
<template>
|
||||
<a-menu
|
||||
:selectedKeys="selectedKeys"
|
||||
@click="onMenuClick"
|
||||
:theme="theme"
|
||||
mode="inline"
|
||||
@click="onMenuClick"
|
||||
>
|
||||
<template v-for="(item, index) in menus" :key="index">
|
||||
<template v-for="(item, index) in fixedMenus" :key="index">
|
||||
<template v-if="item.access">
|
||||
<a-sub-menu v-if="item.children" :title="item.title">
|
||||
<template
|
||||
@ -52,7 +52,7 @@ import 'ant-design-vue/lib/menu/style';
|
||||
import {
|
||||
UserOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import addAccessTag from '../helpers/addAccessTag';
|
||||
import { addAccessTag } from '../helpers/pluginAccess';
|
||||
|
||||
export default {
|
||||
components: {
|
||||
@ -93,7 +93,7 @@ export default {
|
||||
const selectedKeys = computed(() => [route.path]);
|
||||
return {
|
||||
selectedKeys,
|
||||
menus: fixedMenus,
|
||||
fixedMenus,
|
||||
onMenuClick
|
||||
};
|
||||
}
|
||||
|
||||
@ -1,18 +1,18 @@
|
||||
<template>
|
||||
<a-tabs
|
||||
:activeKey="route.path"
|
||||
@tabClick="switchPage"
|
||||
class="layout-content-tabs"
|
||||
hide-add
|
||||
type="editable-card"
|
||||
@tabClick="switchPage"
|
||||
>
|
||||
<a-tab-pane v-for="page in pageList" :key="page.path" closable>
|
||||
<template #tab>
|
||||
{{page.name}}
|
||||
<ReloadOutlined
|
||||
v-show="route.path === page.path"
|
||||
@click="reloadPage(page.path)"
|
||||
class="layout-tabs-close-icon"
|
||||
@click="reloadPage(page.path)"
|
||||
/>
|
||||
</template>
|
||||
</a-tab-pane>
|
||||
@ -36,7 +36,7 @@
|
||||
</a-tabs>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<keep-alive>
|
||||
<component :key="getPageKey(route)" :is="Component" />
|
||||
<component :is="Component" :key="getPageKey(route)" />
|
||||
</keep-alive>
|
||||
</router-view>
|
||||
</template>
|
||||
|
||||
@ -84,8 +84,6 @@ export function trimObj(obj) {
|
||||
obj[key] = value.trim();
|
||||
} else if (isObject(value)) {
|
||||
trimObj(value);
|
||||
} else if (Array.isArray(value)) {
|
||||
trimObj(value);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -46,7 +46,6 @@ async function axiosMiddleware(context, next) {
|
||||
function getRequestInstance() {
|
||||
const {
|
||||
responseDataAdaptor,
|
||||
errorConfig,
|
||||
requestInterceptors = [],
|
||||
responseInterceptors = [],
|
||||
errorHandler,
|
||||
@ -82,7 +81,6 @@ function getRequestInstance() {
|
||||
defaultConfig,
|
||||
dataField: REPLACE_DATA_FIELD, // eslint-disable-line
|
||||
responseDataAdaptor,
|
||||
errorConfig,
|
||||
errorHandler
|
||||
},
|
||||
request: scheduler.compose()
|
||||
|
||||
@ -28,6 +28,7 @@ export default function () {
|
||||
require.resolve('./plugins/features/extraBabelPresets'),
|
||||
require.resolve('./plugins/features/extraPostCSSPlugins'),
|
||||
require.resolve('./plugins/features/html'),
|
||||
require.resolve('./plugins/features/globalCSS'),
|
||||
require.resolve('./plugins/features/inlineLimit'),
|
||||
require.resolve('./plugins/features/lessLoader'),
|
||||
require.resolve('./plugins/features/mountElementId'),
|
||||
@ -42,6 +43,7 @@ export default function () {
|
||||
require.resolve('./plugins/features/nodeModulesTransform'),
|
||||
require.resolve('./plugins/features/vueLoader'),
|
||||
require.resolve('./plugins/features/mock'),
|
||||
require.resolve('./plugins/features/dynamicImport'),
|
||||
|
||||
// misc
|
||||
require.resolve('./plugins/misc/route'),
|
||||
|
||||
@ -2,9 +2,10 @@ import {
|
||||
winPath
|
||||
} from '@umijs/utils';
|
||||
|
||||
function getBabelOpts({
|
||||
function getBableOpts({
|
||||
cwd,
|
||||
targets,
|
||||
config,
|
||||
presetOpts
|
||||
}) {
|
||||
const presets = [
|
||||
@ -19,7 +20,8 @@ function getBabelOpts({
|
||||
},
|
||||
modules: false
|
||||
}
|
||||
]
|
||||
],
|
||||
...(config.extraBabelPresets || [])
|
||||
];
|
||||
const plugins = [
|
||||
require('@babel/plugin-proposal-export-default-from').default,
|
||||
@ -45,7 +47,8 @@ function getBabelOpts({
|
||||
importOpts.libraryName
|
||||
])
|
||||
: []),
|
||||
require.resolve('@vue/babel-plugin-jsx')
|
||||
require.resolve('@vue/babel-plugin-jsx'),
|
||||
...(config.extraBabelPresets || [])
|
||||
];
|
||||
return {
|
||||
babelrc: false,
|
||||
@ -62,6 +65,7 @@ function getBabelOpts({
|
||||
|
||||
export default async ({
|
||||
cwd,
|
||||
config,
|
||||
modifyBabelOpts,
|
||||
modifyBabelPresetOpts,
|
||||
targets
|
||||
@ -72,8 +76,9 @@ export default async ({
|
||||
if (modifyBabelPresetOpts) {
|
||||
presetOpts = await modifyBabelPresetOpts(presetOpts);
|
||||
}
|
||||
let babelOpts = getBabelOpts({
|
||||
let babelOpts = getBableOpts({
|
||||
cwd,
|
||||
config,
|
||||
presetOpts,
|
||||
targets
|
||||
});
|
||||
|
||||
@ -157,6 +157,7 @@ export default async function getConfig({
|
||||
const { targets, browserslist } = getTargetsAndBrowsersList({ config });
|
||||
const babelOpts = await getBableOpts({
|
||||
cwd,
|
||||
config,
|
||||
modifyBabelOpts,
|
||||
modifyBabelPresetOpts,
|
||||
targets
|
||||
|
||||
@ -0,0 +1,12 @@
|
||||
|
||||
export default (api) => {
|
||||
api.describe({
|
||||
key: 'dynamicImport',
|
||||
config: {
|
||||
schema(joi) {
|
||||
return joi.boolean();
|
||||
}
|
||||
},
|
||||
default: false
|
||||
});
|
||||
};
|
||||
@ -0,0 +1,25 @@
|
||||
import { relative, join } from 'path';
|
||||
import { existsSync } from 'fs';
|
||||
|
||||
export default (api) => {
|
||||
const {
|
||||
paths,
|
||||
utils: { winPath }
|
||||
} = api;
|
||||
const { absSrcPath = '', absTmpPath = '' } = paths;
|
||||
const files = [
|
||||
'global.css',
|
||||
'global.less',
|
||||
'global.stylus'
|
||||
];
|
||||
const globalCSSFile = files
|
||||
.map(file => join(absSrcPath || '', file))
|
||||
.filter(file => existsSync(file))
|
||||
.slice(0, 1);
|
||||
|
||||
api.addEntryCodeAhead(
|
||||
() => `${globalCSSFile
|
||||
.map(file => `require('${winPath(relative(absTmpPath, file))}');`)
|
||||
.join('')}`
|
||||
);
|
||||
};
|
||||
@ -57,14 +57,15 @@ const getRoutePath = function (parentRoutePath, fileName) {
|
||||
if (fileName === 'index') {
|
||||
fileName = '';
|
||||
}
|
||||
let routePath = posix.join(parentRoutePath, fileName);
|
||||
// /@id.vue -> /:id
|
||||
routePath = routePath.replace(/@/g, ':');
|
||||
// /*.vue -> *
|
||||
if (routePath === '/*') {
|
||||
routePath = '*';
|
||||
if (fileName.startsWith('@')) {
|
||||
fileName = fileName.replace(/@/, ':');
|
||||
}
|
||||
return routePath;
|
||||
// /*.vue -> :pathMatch(.*)
|
||||
if (fileName.includes('*')) {
|
||||
fileName = fileName.replace('*', ':pathMatch(.*)');
|
||||
}
|
||||
return posix.join(parentRoutePath, fileName);
|
||||
};
|
||||
|
||||
// TODO 约定 layout 目录作为布局文件夹，
|
||||
@ -140,7 +141,7 @@ const genRoutes = function (parentRoutes, path, parentRoutePath, config) {
|
||||
|
||||
* @param {*} routes
|
||||
*/
|
||||
const fix = function (routes) {
|
||||
const rank = function (routes) {
|
||||
routes.forEach((item) => {
|
||||
const path = item.path;
|
||||
let arr = path.split('/');
|
||||
@ -150,9 +151,9 @@ const fix = function (routes) {
|
||||
let count = 0;
|
||||
arr.forEach((sonPath) => {
|
||||
count += 4;
|
||||
if (sonPath.indexOf(':') !== -1) {
|
||||
if (sonPath.indexOf(':') !== -1 && sonPath.indexOf(':pathMatch(.*)') === -1) {
|
||||
count += 2;
|
||||
} else if (sonPath.indexOf('*') !== -1) {
|
||||
} else if (sonPath.indexOf(':pathMatch(.*)') !== -1) {
|
||||
count -= 1;
|
||||
} else if (sonPath === '') {
|
||||
count += 1;
|
||||
@ -162,7 +163,7 @@ const fix = function (routes) {
|
||||
});
|
||||
item.count = count;
|
||||
if (item.children && item.children.length) {
|
||||
fix(item.children);
|
||||
rank(item.children);
|
||||
}
|
||||
});
|
||||
routes = routes.sort((a, b) => b.count - a.count);
|
||||
@ -175,7 +176,7 @@ const getRoutes = function ({ config, absPagesPath }) {
|
||||
|
||||
const routes = [];
|
||||
genRoutes(routes, absPagesPath, '/', config);
|
||||
fix(routes);
|
||||
rank(routes);
|
||||
return routes;
|
||||
};
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export default {
|
||||
publicPath: '/',
|
||||
access: {
|
||||
roles: {
|
||||
admin: ["/", "/onepiece", '/store']
|
||||
admin: ["/"]
|
||||
}
|
||||
},
|
||||
request: {
|
||||
@ -52,5 +52,6 @@ export default {
|
||||
},
|
||||
vuex: {
|
||||
strict: true
|
||||
}
|
||||
},
|
||||
dynamicImport: true
|
||||
};
|
||||
|
||||
@ -1,13 +1,13 @@
|
||||
|
||||
|
||||
import { access } from '@webank/fes';
|
||||
import { access as accessApi } from '@webank/fes';
|
||||
import PageLoading from '@/components/PageLoading';
|
||||
import UserCenter from '@/components/UserCenter';
|
||||
|
||||
export const beforeRender = {
|
||||
loading: <PageLoading />,
|
||||
action() {
|
||||
const { setRole } = access;
|
||||
const { setRole } = accessApi;
|
||||
return new Promise((resolve) => {
|
||||
setTimeout(() => {
|
||||
setRole('admin');
|
||||
@ -21,4 +21,10 @@ export const beforeRender = {
|
||||
|
||||
export const layout = {
|
||||
customHeader: <UserCenter />
|
||||
// unAccessHandler({ next }) {
|
||||
// next(false);
|
||||
// },
|
||||
// noFoundHandler({ next }) {
|
||||
// next(false);
|
||||
// }
|
||||
};
|
||||
|
||||
0
packages/fes-template/src/global.css
Normal file
0
packages/fes-template/src/global.css
Normal file
@ -69,12 +69,10 @@ export default {
|
||||
locale.setLocale({ lang: 'en-US' });
|
||||
locale.addLocale({ lang: 'ja-JP', messages: { test: 'テスト' } });
|
||||
console.log(locale.getAllLocales());
|
||||
access.addAccess('/onepiece1');
|
||||
}, 2000);
|
||||
setTimeout(() => {
|
||||
accessId.value = '11';
|
||||
}, 4000);
|
||||
// router.push('/onepiece');
|
||||
|
||||
console.log('测试 mock!!');
|
||||
request('/v2/file').then((data) => {
|
||||
|
||||
36
yarn.lock
36
yarn.lock
@ -7528,6 +7528,11 @@ es-module-lexer@^0.3.26:
|
||||
resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.3.26.tgz#7b507044e97d5b03b01d4392c74ffeb9c177a83b"
|
||||
integrity sha512-Va0Q/xqtrss45hWzP8CZJwzGSZJjDM5/MJRE3IXXnUCcVLElR9BRaE9F62BopysASyc4nM3uwhSW7FFB9nlWAA==
|
||||
|
||||
es-module-lexer@^0.4.0:
|
||||
version "0.4.1"
|
||||
resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-0.4.1.tgz#dda8c6a14d8f340a24e34331e0fab0cb50438e0e"
|
||||
integrity sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==
|
||||
|
||||
es-to-primitive@^1.2.1:
|
||||
version "1.2.1"
|
||||
resolved "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
|
||||
@ -16631,7 +16636,7 @@ webpack-sources@^2.1.1, webpack-sources@^2.2.0:
|
||||
source-list-map "^2.0.1"
|
||||
source-map "^0.6.1"
|
||||
|
||||
webpack@^5.18.0, webpack@^5.21.0:
|
||||
webpack@^5.18.0:
|
||||
version "5.21.2"
|
||||
resolved "https://registry.npmjs.org/webpack/-/webpack-5.21.2.tgz#647507e50d3637695be28af58a6a8246050394e7"
|
||||
integrity sha512-xHflCenx+AM4uWKX71SWHhxml5aMXdy2tu/vdi4lClm7PADKxlyDAFFN1rEFzNV0MAoPpHtBeJnl/+K6F4QBPg==
|
||||
@ -16660,6 +16665,35 @@ webpack@^5.18.0, webpack@^5.21.0:
|
||||
watchpack "^2.0.0"
|
||||
webpack-sources "^2.1.1"
|
||||
|
||||
webpack@^5.24.2:
|
||||
version "5.24.3"
|
||||
resolved "https://registry.npmjs.org/webpack/-/webpack-5.24.3.tgz#6ec0f5059f8d7c7961075fa553cfce7b7928acb3"
|
||||
integrity sha512-x7lrWZ7wlWAdyKdML6YPvfVZkhD1ICuIZGODE5SzKJjqI9A4SpqGTjGJTc6CwaHqn19gGaoOR3ONJ46nYsn9rw==
|
||||
dependencies:
|
||||
"@types/eslint-scope" "^3.7.0"
|
||||
"@types/estree" "^0.0.46"
|
||||
"@webassemblyjs/ast" "1.11.0"
|
||||
"@webassemblyjs/wasm-edit" "1.11.0"
|
||||
"@webassemblyjs/wasm-parser" "1.11.0"
|
||||
acorn "^8.0.4"
|
||||
browserslist "^4.14.5"
|
||||
chrome-trace-event "^1.0.2"
|
||||
enhanced-resolve "^5.7.0"
|
||||
es-module-lexer "^0.4.0"
|
||||
eslint-scope "^5.1.1"
|
||||
events "^3.2.0"
|
||||
glob-to-regexp "^0.4.1"
|
||||
graceful-fs "^4.2.4"
|
||||
json-parse-better-errors "^1.0.2"
|
||||
loader-runner "^4.2.0"
|
||||
mime-types "^2.1.27"
|
||||
neo-async "^2.6.2"
|
||||
schema-utils "^3.0.0"
|
||||
tapable "^2.1.1"
|
||||
terser-webpack-plugin "^5.1.1"
|
||||
watchpack "^2.0.0"
|
||||
webpack-sources "^2.1.1"
|
||||
|
||||
webpackbar@^5.0.0-3:
|
||||
version "5.0.0-3"
|
||||
resolved "https://registry.npmjs.org/webpackbar/-/webpackbar-5.0.0-3.tgz#f4f96c8fb13001b2bb1348252db4c980ab93aaac"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user