diff --git a/docs/zh/reference/plugin/plugins/icon.md b/docs/zh/reference/plugin/plugins/icon.md index a67c2dfa..1b7f693c 100644 --- a/docs/zh/reference/plugin/plugins/icon.md +++ b/docs/zh/reference/plugin/plugins/icon.md @@ -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 \ No newline at end of file +## 使用 + +新建 `src/icons` 目录，将 svg 文件放入其中，在 `component` 中引用： + +```jsx + +``` + +### 属性 + +| 属性 | 说明 | 类型 | +| :-----| :---- | :---- | +| type | svg 文件名 | `string` | +| spin | 是否无限旋转 | `boolean` | +| rotate | 旋转角度 | `number` | diff --git a/docs/zh/reference/plugin/plugins/request.md b/docs/zh/reference/plugin/plugins/request.md index 0a3049b7..ac056937 100644 --- a/docs/zh/reference/plugin/plugins/request.md +++ b/docs/zh/reference/plugin/plugins/request.md @@ -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 \ No newline at end of file +### 构建时配置 + +```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` diff --git a/packages/create-fes-app/templates/app/pc/src/pages/index.vue b/packages/create-fes-app/templates/app/pc/src/pages/index.vue index 3a304634..ef41dd64 100644 --- a/packages/create-fes-app/templates/app/pc/src/pages/index.vue +++ b/packages/create-fes-app/templates/app/pc/src/pages/index.vue @@ -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'; diff --git a/packages/fes-plugin-access/src/runtime/core.tpl b/packages/fes-plugin-access/src/runtime/core.tpl index 15d44688..cd0c9c3c 100644 --- a/packages/fes-plugin-access/src/runtime/core.tpl +++ b/packages/fes-plugin-access/src/runtime/core.tpl @@ -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) => { diff --git a/packages/fes-plugin-access/src/runtime/runtime.js b/packages/fes-plugin-access/src/runtime/runtime.js index 01d19641..46a877d2 100644 --- a/packages/fes-plugin-access/src/runtime/runtime.js +++ b/packages/fes-plugin-access/src/runtime/runtime.js @@ -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); }); } diff --git a/packages/fes-plugin-layout/src/index.js b/packages/fes-plugin-layout/src/index.js index ff6373a6..5c9eb985 100644 --- a/packages/fes-plugin-layout/src/index.js +++ b/packages/fes-plugin-layout/src/index.js @@ -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 => [ diff --git a/packages/fes-plugin-layout/src/runtime/helpers/index.js b/packages/fes-plugin-layout/src/runtime/helpers/index.js index 484d4343..d21db0c0 100644 --- a/packages/fes-plugin-layout/src/runtime/helpers/index.js +++ b/packages/fes-plugin-layout/src/runtime/helpers/index.js @@ -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; } diff --git a/packages/fes-plugin-layout/src/runtime/helpers/addAccessTag.js b/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js similarity index 72% rename from packages/fes-plugin-layout/src/runtime/helpers/addAccessTag.js rename to packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js index ec962335..f1221540 100644 --- a/packages/fes-plugin-layout/src/runtime/helpers/addAccessTag.js +++ b/packages/fes-plugin-layout/src/runtime/helpers/pluginAccess.js @@ -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; -} +}; diff --git a/packages/fes-plugin-layout/src/runtime/runtime.js b/packages/fes-plugin-layout/src/runtime/runtime.js new file mode 100644 index 00000000..c0e04ebc --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/runtime.js @@ -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'); + } +}; diff --git a/packages/fes-plugin-layout/src/runtime/views/403.vue b/packages/fes-plugin-layout/src/runtime/views/403.vue new file mode 100644 index 00000000..b1c61d9d --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/views/403.vue @@ -0,0 +1,35 @@ + + +{ + "layout": false +} + + diff --git a/packages/fes-plugin-layout/src/runtime/views/404.vue b/packages/fes-plugin-layout/src/runtime/views/404.vue new file mode 100644 index 00000000..2b1972fa --- /dev/null +++ b/packages/fes-plugin-layout/src/runtime/views/404.vue @@ -0,0 +1,35 @@ + + +{ + "layout": false +} + + diff --git a/packages/fes-plugin-layout/src/runtime/views/Menu.vue b/packages/fes-plugin-layout/src/runtime/views/Menu.vue index 5ee7d084..1240fdec 100644 --- a/packages/fes-plugin-layout/src/runtime/views/Menu.vue +++ b/packages/fes-plugin-layout/src/runtime/views/Menu.vue @@ -1,11 +1,11 @@