From ba73ac7ff7beb5271c70f4154fa1357e180ef35c Mon Sep 17 00:00:00 2001 From: qlin Date: Mon, 18 Jul 2022 15:33:27 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E8=B7=AF=E7=94=B1=E7=94=9F=E6=88=90?= =?UTF-8?q?=E6=94=AF=E6=8C=81=E5=85=A8=E6=95=B0=E5=AD=97?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * fix: 路由生成支持全数字 * fix: 路由生成支持全数字 * fix: 优化 layout ts * chore: remove 403 404 page route config --- docs/reference/plugin/plugins/layout.md | 275 +++++++++--------- packages/fes-builder-vite/package.json | 6 +- .../src/runtime/views/403.vue | 5 - .../src/runtime/views/404.vue | 5 - packages/fes-plugin-layout/types.d.ts | 6 + .../src/plugins/route/index.js | 6 +- packages/fes-template/.fes.js | 2 +- packages/fes-template/src/pages/404.vue | 14 + packages/fes/types.d.ts | 1 - yarn.lock | 24 +- 10 files changed, 189 insertions(+), 155 deletions(-) create mode 100644 packages/fes-template/src/pages/404.vue diff --git a/docs/reference/plugin/plugins/layout.md b/docs/reference/plugin/plugins/layout.md index 22575455..88c39e24 100644 --- a/docs/reference/plugin/plugins/layout.md +++ b/docs/reference/plugin/plugins/layout.md @@ -1,76 +1,87 @@ # @fesjs/plugin-layout ## 介绍 + 为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。 -- 侧边栏菜单数据根据路由中的配置自动生成。 -- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。 -- 主题，提供 `light`、`dark` 两种主题。 -- 默认实现对路由的 404、403 处理。 -- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。 -- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。 -- 支持自定义头部或者侧边栏区域。 -- 菜单支持配置icon。 -- 菜单标题支持国际化。 - -- 可配置页面是否需要 layout。 + +- 侧边栏菜单数据根据路由中的配置自动生成。 +- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。 +- 主题，提供 `light`、`dark` 两种主题。 +- 默认实现对路由的 404、403 处理。 +- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。 +- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。 +- 支持自定义头部或者侧边栏区域。 +- 菜单支持配置 icon。 +- 菜单标题支持国际化。 +- 可配置页面是否需要 layout。 ## 启用方式 + 在 `package.json` 中引入依赖： + ```json { "dependencies": { "@fesjs/fes": "^3.0.0", "@fesjs/plugin-layout": "^5.0.0" - }, + } } ``` ## 布局类型 + 配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。 ### side + side ### top + top ### mixin + mixin ### left-right + left-right ### 页面个性化 可以为页面单独设置布局类型： -``` - -{ - "layout": { - "navigation": 'top' - } -} - -``` -当设置为 `null` 时，页面不使用布局。 - -## 页面缓存 - -支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存： ```js import { defineRouteMete } from '@fesjs/fes'; defineRouteMeta({ - "keep-alive": true -}) + layout: { + navigation: null, + }, +}); +``` + +当设置为 `null` 时，页面不使用布局。 + +## 页面缓存 + +支持配置页面缓存，通过[定义路由元信息](../../../guide/route.html#扩展路由元信息)开启缓存： + +```js +import { defineRouteMete } from '@fesjs/fes'; + +defineRouteMeta({ + 'keep-alive': true, +}); ``` ### 处理嵌套路由 + Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout.vue` 为该目录的公共父组件，layout.vue 中必须实现 ``。如果嵌套路由下的页面设置了 `keep-alive`，则需要用 `` 替换 ``，``实现了页面缓存。 ```vue @@ -78,12 +89,12 @@ Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout ``` @@ -92,6 +103,7 @@ export default { #### 编译时配置方式 在 `.fes.js` 中配置： + ```js export default { layout: { @@ -117,18 +129,22 @@ export default { #### 运行时配置方式 在 `app.js` 中配置： + ```js import UserCenter from '@/components/UserCenter'; export const layout = { - renderHeader: ()=> , - menus: [{ - name: 'index' - }] + renderHeader: () => , + menus: [ + { + name: 'index', + }, + ], }; - ``` -在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。 + +在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。 。 + ```js export const layout = (layoutConfig, { initialState }) => ({ renderHeader: () => , @@ -153,77 +169,74 @@ export const layout = (layoutConfig, { initialState }) => ({ 实际上运行配置能做的事情更多，推荐用运行时配置方式。 - - ### footer -- **类型**：`String` - -- **默认值**：`null` -- **详情**：页面底部的文字。 +- **类型**：`String` +- **默认值**：`null` + +- **详情**：页面底部的文字。 ### theme -- **类型**：`String` - -- **默认值**：`dark` -- **详情**：主题，可选有 `dark`、`light` +- **类型**：`String` +- **默认值**：`dark` + +- **详情**：主题，可选有 `dark`、`light` ### navigation -- **类型**：`String` - -- **默认值**：`side` -- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin` +- **类型**：`String` +- **默认值**：`side` + +- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin` ### isFixedHeader -- **类型**：`Boolean` - -- **默认值**：`false` -- **详情**：是否固定头部，不跟随页面滚动。 +- **类型**：`Boolean` +- **默认值**：`false` + +- **详情**：是否固定头部，不跟随页面滚动。 ### isFixedSidebar -- **类型**：`Boolean` - -- **默认值**：`true` -- **详情**：是否固定sidebar，不跟随页面滚动。 +- **类型**：`Boolean` +- **默认值**：`true` + +- **详情**：是否固定 sidebar，不跟随页面滚动。 ### title -- **类型**：`String` - -- **默认值**：默认为 [编译时配置title](../../../reference/config/#title) -- **详情**：产品名。 +- **类型**：`String` +- **默认值**：默认为 [编译时配置 title](../../../reference/config/#title) + +- **详情**：产品名。 ### logo -- **类型**：`String` - -- **默认值**：默认提供 `fes.js` 的 Logo -- **详情**：Logo的链接 +- **类型**：`String` +- **默认值**：默认提供 `fes.js` 的 Logo +- **详情**：Logo 的链接 ### multiTabs -- **类型**：`boolean` - -- **默认值**：`false` -- **详情**：是否开启多页。 +- **类型**：`boolean` +- **默认值**：`false` + +- **详情**：是否开启多页。 ### menus -- **类型**：`[] | ()=> Ref<[]>` - -- **默认值**：`[]` -- **详情**：菜单配置，子项具体配置如下： - - - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。 - - - **path**：菜单的路径，可配置第三方地址。 +- **类型**：`[] | ()=> Ref<[]>` +- **默认值**：`[]` - - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+） +- **详情**：菜单配置，子项具体配置如下： + + - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。 + + - **path**：菜单的路径，可配置第三方地址。 + + - **match**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。 (v4.0.0+） ``` { @@ -231,72 +244,68 @@ export const layout = (layoutConfig, { initialState }) => ({ match: ['/product/*', '/product/create'] } ``` - - - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。 - - **icon**: 菜单的图标，只有一级标题展示图标。 +- **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。 - - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。 +- **icon**: 菜单的图标，只有一级标题展示图标。 - - 图标使用本地或者远程svg图片。 + - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。 + + - 图标使用本地或者远程 svg 图片。 ```js { - icon: "/wine-outline.svg" + icon: '/wine-outline.svg'; } ``` - - - **children**：子菜单配置。 + +- **children**：子菜单配置。 :::tip 函数类型仅在运行时可用，可以实现动态变更菜单。 ::: - - ### menuProps -- **类型**：`Object` - -- **默认值**：`{}` -- **详情**：菜单的配置： - - - **defaultExpandAll**：是否默认展开全部菜单。 - - - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。 +- **类型**：`Object` +- **默认值**：`{}` - - **accordion**：是否只保持一个子菜单的展开。 - +- **详情**：菜单的配置： + + - **defaultExpandAll**：是否默认展开全部菜单。 + + - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。 + + - **accordion**：是否只保持一个子菜单的展开。 ### sideWidth -- **类型**：`Number` - -- **默认值**：`200` -- **详情**：sidebar的宽度 - +- **类型**：`Number` +- **默认值**：`200` + +- **详情**：sidebar 的宽度 ### renderCustom -- **类型**： `()=> VNodes` - -- **默认值**：`null` -- **详情**： 自定义区域内容，仅运行时。 +- **类型**： `()=> VNodes` +- **默认值**：`null` +- **详情**： 自定义区域内容，仅运行时。 ### unAccessHandler -- **类型**：`({ to, from, next})=> void` - -- **默认值**：`null` -- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。 -- **参数** - - router：createRouter 创建的路由实例 - - to： 准备进入的路由 - - from：离开的路由 - - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) +- **类型**：`({ to, from, next})=> void` +- **默认值**：`null` + +- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。 +- **参数** + - router：createRouter 创建的路由实例 + - to： 准备进入的路由 + - from：离开的路由 + - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) 比如： + ```js export const access = { unAccessHandler({ to, next }) { @@ -309,24 +318,24 @@ export const access = { accessApi.setAccess(accesssIds.concat(['/403'])); } next('/403'); - } + }, }; - ``` ### noFoundHandler -- **类型**：`({ to, from, next})=> void` - -- **默认值**：`null` -- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。 -- **参数** - - router：createRouter 创建的路由实例 - - to： 准备进入的路由 - - from：离开的路由 - - next： [next函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) +- **类型**：`({ to, from, next})=> void` +- **默认值**：`null` + +- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。 +- **参数** + - router：createRouter 创建的路由实例 + - to： 准备进入的路由 + - from：离开的路由 + - next： [next 函数](https://next.router.vuejs.org/zh/guide/advanced/navigation-guards.html#%E5%8F%AF%E9%80%89%E7%9A%84%E7%AC%AC%E4%B8%89%E4%B8%AA%E5%8F%82%E6%95%B0-next) 比如： + ```js export const access = { noFoundHandler({ next }) { @@ -335,12 +344,10 @@ export const access = { accessApi.setAccess(accesssIds.concat(['/404'])); } next('/404'); - } + }, }; - ``` - ## 4.x 升级到 5.x 1. 个性化 layout 配置改为使用传入 navigation @@ -348,4 +355,4 @@ export const access = { 3. fixedHeader 改为 isFixedHeader 4. menusConfig 改为 menuProps 5. fixedSideBar 改为 isFixedSidebar -6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right \ No newline at end of file +6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right diff --git a/packages/fes-builder-vite/package.json b/packages/fes-builder-vite/package.json index cb9dbf37..97a180c0 100644 --- a/packages/fes-builder-vite/package.json +++ b/packages/fes-builder-vite/package.json @@ -27,6 +27,7 @@ "dependencies": { "@babel/core": "^7.17.9", "@fesjs/utils": "^3.0.0-beta.0", + "@vitejs/plugin-legacy": "^1.8.2", "@vitejs/plugin-vue": "^2.2.4", "@vitejs/plugin-vue-jsx": "^1.3.8", "autoprefixer": "^10.4.4", @@ -35,9 +36,8 @@ "postcss-flexbugs-fixes": "^5.0.2", "postcss-safe-parser": "^6.0.0", "rollup-plugin-visualizer": "^5.6.0", - "vite": "^2.9.1", - "vite-plugin-html": "^3.2.0", - "@vitejs/plugin-legacy": "^1.8.2" + "vite": "^2.9.14", + "vite-plugin-html": "^3.2.0" }, "peerDependencies": { "@fesjs/fes": "^3.0.0-beta.0", diff --git a/packages/fes-plugin-layout/src/runtime/views/403.vue b/packages/fes-plugin-layout/src/runtime/views/403.vue index 04501ab3..0da87747 100644 --- a/packages/fes-plugin-layout/src/runtime/views/403.vue +++ b/packages/fes-plugin-layout/src/runtime/views/403.vue @@ -208,11 +208,6 @@ 上一页 - -{ - "layout": false -} - diff --git a/packages/fes/types.d.ts b/packages/fes/types.d.ts index 214915a5..1a657bb1 100644 --- a/packages/fes/types.d.ts +++ b/packages/fes/types.d.ts @@ -6,7 +6,6 @@ export * from '@fesjs/runtime'; export interface RouteMeta { name?: string; title?: string; - layout?: boolean | { sidebar?: boolean; header?: boolean; logo?: boolean }; } export interface PluginRuntimeConfig {} diff --git a/yarn.lock b/yarn.lock index 30d76373..85cc93f8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7973,6 +7973,11 @@ nanoid@^3.1.23, nanoid@^3.1.32, nanoid@^3.3.1: resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557" integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA== +nanoid@^3.3.4: + version "3.3.4" + resolved "https://registry.npmmirror.com/nanoid/-/nanoid-3.3.4.tgz#730b67e3cd09e2deacf03c027c81c9d9dbc5e8ab" + integrity sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw== + natural-compare@^1.4.0: version "1.4.0" resolved "https://registry.npmmirror.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7" @@ -8854,6 +8859,15 @@ postcss@^8.0.0, postcss@^8.1.10, postcss@^8.2.15, postcss@^8.3.5, postcss@^8.4.1 picocolors "^1.0.0" source-map-js "^1.0.2" +postcss@^8.4.13: + version "8.4.14" + resolved "https://registry.npmmirror.com/postcss/-/postcss-8.4.14.tgz#ee9274d5622b4858c1007a74d76e42e56fd21caf" + integrity sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig== + dependencies: + nanoid "^3.3.4" + picocolors "^1.0.0" + source-map-js "^1.0.2" + preact@^10.0.0, preact@^10.7.0: version "10.7.1" resolved "https://registry.npmmirror.com/preact/-/preact-10.7.1.tgz#bdd2b2dce91a5842c3b9b34dfe050e5401068c9e" @@ -10671,13 +10685,13 @@ vite-plugin-windicss@^1.8.3: kolorist "^1.5.1" windicss "^3.5.1" -vite@^2.9.1: - version "2.9.1" - resolved "https://registry.npmmirror.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f" - integrity sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ== +vite@^2.9.14: + version "2.9.14" + resolved "https://registry.npmmirror.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b" + integrity sha512-P/UCjSpSMcE54r4mPak55hWAZPlyfS369svib/gpmz8/01L822lMPOJ/RYW6tLCe1RPvMvOsJ17erf55bKp4Hw== dependencies: esbuild "^0.14.27" - postcss "^8.4.12" + postcss "^8.4.13" resolve "^1.22.0" rollup "^2.59.0" optionalDependencies: