fix: 路由生成支持全数字

* fix: 路由生成支持全数字 * fix: 路由生成支持全数字 * fix: 优化 layout ts * chore: remove 403 404 page route config
2025-04-05 19:41:57 +08:00 · 2022-07-18 15:33:27 +08:00 · 2022-07-18 15:33:27 +08:00 · ba73ac7ff7
commit ba73ac7ff7
parent eade938092
10 changed files with 189 additions and 155 deletions
--- a/docs/reference/plugin/plugins/layout.md
+++ b/docs/reference/plugin/plugins/layout.md
@ -1,7 +1,9 @@
 # @fesjs/plugin-layout

 ## 介绍
+
 为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
+
 -   侧边栏菜单数据根据路由中的配置自动生成。
 -   布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
 -   主题，提供 `light`、`dark` 两种主题。
@ -9,68 +11,77 @@
 -   搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
 -   搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
 -   支持自定义头部或者侧边栏区域。
- 菜单支持配置icon。
+-   菜单支持配置 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](/side.png) -->
 <img :src="$withBase('side.png')" alt="side">

 ### top
+
 <!-- ![top](/top.png) -->
 <img :src="$withBase('top.png')" alt="top">

 ### mixin
+
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('mixin.png')" alt="mixin">

 ### left-right
+
 <!-- ![mixin](/mixin.png) -->
 <img :src="$withBase('left-right.png')" alt="left-right">

 ### 页面个性化

 可以为页面单独设置布局类型：
-```
-<config lang="json">
-{
-    "layout": {
-        "navigation": 'top'
-    }
-}
-</config>
-```
-当设置为 `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 中必须实现 `<RouterView/>`。如果嵌套路由下的页面设置了 `keep-alive`，则需要用 `<Page/>` 替换 `<RouterView/>`，`<Page/>`实现了页面缓存。

 ```vue
@ -78,12 +89,12 @@ Fes.js 里约定目录下有 `layout.vue` 时会生成嵌套路由，以 `layout
    <Page></Page>
 </template>
 <script>
-import { Page } from '@fesjs/fes'
+import { Page } from '@fesjs/fes';
 export default {
    components: {
-        Page
-    }
-}
+        Page,
+    },
+};
 </script>
 ```

@ -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: ()=> <UserCenter />,
-    menus: [{
-        name: 'index'
-    }]
+    renderHeader: () => <UserCenter />,
+    menus: [
+        {
+            name: 'index',
+        },
+    ],
 };
-
 ```
+
 在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。  
 。
+
 ```js
 export const layout = (layoutConfig, { initialState }) => ({
    renderHeader: () => <UserCenter />,
@ -153,73 +169,70 @@ export const layout = (layoutConfig, { initialState }) => ({

 实际上运行配置能做的事情更多，推荐用运行时配置方式。

-
-
 ### footer
- **类型**：`String`

+-   **类型**：`String`
 -   **默认值**：`null`

 -   **详情**：页面底部的文字。

 ### theme
- **类型**：`String`

+-   **类型**：`String`
 -   **默认值**：`dark`

 -   **详情**：主题，可选有 `dark`、`light`

 ### navigation
- **类型**：`String`

+-   **类型**：`String`
 -   **默认值**：`side`

 -   **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`

 ### isFixedHeader
- **类型**：`Boolean`

+-   **类型**：`Boolean`
 -   **默认值**：`false`

 -   **详情**：是否固定头部，不跟随页面滚动。

 ### isFixedSidebar
- **类型**：`Boolean`

+-   **类型**：`Boolean`
 -   **默认值**：`true`

- **详情**：是否固定sidebar，不跟随页面滚动。
+-   **详情**：是否固定 sidebar，不跟随页面滚动。

 ### title
- **类型**：`String`

- **默认值**：默认为 [编译时配置title](../../../reference/config/#title)
+-   **类型**：`String`
+-   **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)

 -   **详情**：产品名。

 ### logo
- **类型**：`String`

+-   **类型**：`String`
 -   **默认值**：默认提供 `fes.js` 的 Logo

- **详情**：Logo的链接
-
+-   **详情**：Logo 的链接

 ### multiTabs
- **类型**：`boolean`

+-   **类型**：`boolean`
 -   **默认值**：`false`

 -   **详情**：是否开启多页。

 ### menus
- **类型**：`[] | ()=> Ref<[]>`

+-   **类型**：`[] | ()=> Ref<[]>`
 -   **默认值**：`[]`

 -   **详情**：菜单配置，子项具体配置如下：

-  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
+    -   **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。

    -   **path**：菜单的路径，可配置第三方地址。

@ -232,31 +245,29 @@ export const layout = (layoutConfig, { initialState }) => ({
 }
 ```

-  - **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
+-   **title**：菜单的标题，如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。

-  - **icon**: 菜单的图标，只有一级标题展示图标。
+-   **icon**: 菜单的图标，只有一级标题展示图标。

    -   图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。

-    - 图标使用本地或者远程svg图片。
+    -   图标使用本地或者远程 svg 图片。

 ```js
 {
-    icon: "/wine-outline.svg"
+    icon: '/wine-outline.svg';
 }
 ```

-  - **children**：子菜单配置。
+-   **children**：子菜单配置。

 :::tip
 函数类型仅在运行时可用，可以实现动态变更菜单。
 :::

-
-
 ### menuProps
- **类型**：`Object`

+-   **类型**：`Object`
 -   **默认值**：`{}`

 -   **详情**：菜单的配置：
@ -267,26 +278,23 @@ export const layout = (layoutConfig, { initialState }) => ({

    -   **accordion**：是否只保持一个子菜单的展开。

-
 ### sideWidth
- **类型**：`Number`

+-   **类型**：`Number`
 -   **默认值**：`200`

- **详情**：sidebar的宽度
-  
+-   **详情**：sidebar 的宽度

 ### renderCustom
- **类型**： `()=> VNodes`

+-   **类型**： `()=> VNodes`
 -   **默认值**：`null`

 -   **详情**： 自定义区域内容，仅运行时。

-
 ### unAccessHandler
- **类型**：`({ to, from, next})=> void`

+-   **类型**：`({ to, from, next})=> void`
 -   **默认值**：`null`

 -   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
@ -294,9 +302,10 @@ export const layout = (layoutConfig, { initialState }) => ({
    -   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)
+    -   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,14 +318,13 @@ export const access = {
            accessApi.setAccess(accesssIds.concat(['/403']));
        }
        next('/403');
-    }
+    },
 };
-
 ```

 ### noFoundHandler
- **类型**：`({ to, from, next})=> void`

+-   **类型**：`({ to, from, next})=> void`
 -   **默认值**：`null`

 -   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
@ -324,9 +332,10 @@ export const access = {
    -   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)
+    -   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
--- 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",
--- a/packages/fes-plugin-layout/src/runtime/views/403.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/403.vue
@ -208,11 +208,6 @@
        <f-button type="primary" @click="click">上一页</f-button>
    </div>
 </template>
-<config>
-{
-    "layout": false
-}
-</config>
 <script>
 import { useRouter } from '@@/core/coreExports';
 import { FButton } from '@fesjs/fes-design';
--- a/packages/fes-plugin-layout/src/runtime/views/404.vue
+++ b/packages/fes-plugin-layout/src/runtime/views/404.vue
@ -233,11 +233,6 @@
        <f-button type="primary" @click="click">上一页</f-button>
    </div>
 </template>
-<config>
-{
-    "layout": false
-}
-</config>
 <script>
 import { useRouter } from '@@/core/coreExports';
 import { FButton } from '@fesjs/fes-design';
--- a/packages/fes-plugin-layout/types.d.ts
+++ b/packages/fes-plugin-layout/types.d.ts
@ -11,6 +11,12 @@ interface Menu {
 }

 declare module '@fesjs/fes' {
+    interface RouteMeta {
+        'keep-alive'?: boolean;
+        layout?: {
+            navigation?: 'side' | 'mixin' | 'top' | 'left-right' | null,
+        }
+    }
    interface PluginBuildConfig {
        layout?:
            | {
--- a/packages/fes-preset-built-in/src/plugins/route/index.js
+++ b/packages/fes-preset-built-in/src/plugins/route/index.js
@ -209,7 +209,11 @@ const getRoutes = function ({ config, absPagesPath }) {
 };

 function genComponentName(component, paths) {
-    return lodash.camelCase(component.replace(paths.absPagesPath, '').replace('.vue', ''));
+    const componentName = lodash.camelCase(component.replace(paths.absPagesPath, '').replace('.vue', ''));
+    if (/^\d+/.test(componentName)) {
+        return `numPage${componentName}`;
+    }
+    return componentName;
 }

 function isFunctionComponent(component) {
--- a/packages/fes-template/.fes.js
+++ b/packages/fes-template/.fes.js
@ -69,7 +69,7 @@ export default defineBuildConfig({
            },
            {
                name: 'pinia'
-            }
+            },
        ],
        menuProps: {
            defaultExpandAll: false
--- a/packages/fes-template/src/pages/404.vue
+++ b/packages/fes-template/src/pages/404.vue
@ -0,0 +1,14 @@
+<template>
+    <div>自定义 404 页面</div>
+</template>
+
+<script>
+import { defineRouteMeta } from '@fesjs/fes';
+
+defineRouteMeta({
+    layout: {
+        navigation: null,
+    },
+});
+export default {};
+</script>
--- 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 {}
--- 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: