fix: 路由生成支持全数字

* fix: 路由生成支持全数字

* fix: 路由生成支持全数字

* fix: 优化 layout ts

* chore: remove 403 404 page route config

docs/reference/plugin/plugins/layout.md

@@ -1,76 +1,87 @@
 # @fesjs/plugin-layout
 
 ## 介绍
+
 为了进一步降低研发成本，我们将布局利用 `fes.js` 插件的方式内置，只需通过简单的配置即可拥有布局，包括导航以及侧边栏。从而做到用户无需关心布局。
-- 侧边栏菜单数据根据路由中的配置自动生成。
+
-- 布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
+-   侧边栏菜单数据根据路由中的配置自动生成。
-- 主题，提供 `light`、`dark` 两种主题。
+-   布局，提供 `side`、 `top`、`mixin`、`left-right` 四种布局。
-- 默认实现对路由的 404、403 处理。
+-   主题，提供 `light`、`dark` 两种主题。
-- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
+-   默认实现对路由的 404、403 处理。
-- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
+-   搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
-- 支持自定义头部或者侧边栏区域。
+-   搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
-- 菜单支持配置icon。
+-   支持自定义头部或者侧边栏区域。
-- 菜单标题支持国际化。
+-   菜单支持配置 icon。
-  
+-   菜单标题支持国际化。
-- 可配置页面是否需要 layout。
+-   可配置页面是否需要 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 />,
+    renderHeader: () => <UserCenter />,
-    menus: [{
+    menus: [
-        name: 'index'
+        {
-    }]
+            name: 'index',
+        },
+    ],
 };
-
 ```
-在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。         
+
+在`fes.js`中，运行时配置有定义对象和函数两种方式，当使用函数配置`layout`时，`layoutConfig`是编译时配置结果，`initialState`是 `beforeRender.action`执行后创建的应用初始状态数据。  
 。
+
 ```js
 export const layout = (layoutConfig, { initialState }) => ({
     renderHeader: () => <UserCenter />,
@@ -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<[]>`
-  
-- **默认值**：`[]`
 
-- **详情**：菜单配置，子项具体配置如下：
+-   **类型**：`[] | ()=> Ref<[]>`
-  
+-   **默认值**：`[]`
-  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来，然后使用路由元信息补充菜单配置，比如 `title`、`path` 等。
-  
-  - **path**：菜单的路径，可配置第三方地址。
 
-  - **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`
-  
-- **默认值**：`{}`
 
-- **详情**：菜单的配置：
+-   **类型**：`Object`
-  
+-   **默认值**：`{}`
-  - **defaultExpandAll**：是否默认展开全部菜单。
-  
-  - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
 
-  - **accordion**：是否只保持一个子菜单的展开。
+-   **详情**：菜单的配置：
-  
+
+    -   **defaultExpandAll**：是否默认展开全部菜单。
+
+    -   **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+
+    -   **accordion**：是否只保持一个子菜单的展开。
 
 ### sideWidth
-- **类型**：`Number`
-  
-- **默认值**：`200`
 
-- **详情**：sidebar的宽度
+-   **类型**：`Number`
-  
+-   **默认值**：`200`
+
+-   **详情**：sidebar 的宽度
 
 ### renderCustom
-- **类型**： `()=> VNodes`
-  
-- **默认值**：`null`
 
-- **详情**： 自定义区域内容，仅运行时。
+-   **类型**： `()=> VNodes`
+-   **默认值**：`null`
 
+-   **详情**： 自定义区域内容，仅运行时。
 
 ### unAccessHandler
-- **类型**：`({ to, from, next})=> void`
-  
-- **默认值**：`null`
 
-- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
+-   **类型**：`({ to, from, next})=> void`
-- **参数**
+-   **默认值**：`null`
-  - router：createRouter 创建的路由实例
+
-  - to： 准备进入的路由
+-   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `unAccessHandler` 函数。
-  - 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)
+    -   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` 函数。
+-   **类型**：`({ to, from, next})=> void`
-- **参数**
+-   **默认值**：`null`
-  - router：createRouter 创建的路由实例
+
-  - to： 准备进入的路由
+-   **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `noFoundHandler` 函数。
-  - 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)
+    -   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
+6. 去掉运行时 logo、header、sidebar 三个区域显示配置，请改为使用 navigation: left-right

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": "^2.9.14",
-    "vite-plugin-html": "^3.2.0",
+    "vite-plugin-html": "^3.2.0"
-    "@vitejs/plugin-legacy": "^1.8.2"
   },
   "peerDependencies": {
     "@fesjs/fes": "^3.0.0-beta.0",

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';

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';

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?:
             | {

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) {

packages/fes-template/.fes.js

@@ -69,7 +69,7 @@ export default defineBuildConfig({
             },
             {
                 name: 'pinia'
-            }
+            },
         ],
         menuProps: {
             defaultExpandAll: false

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>

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 {}

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:
+vite@^2.9.14:
-  version "2.9.1"
+  version "2.9.14"
-  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.1.tgz#84bce95fae210a7beb566a0af06246748066b48f"
+  resolved "https://registry.npmmirror.com/vite/-/vite-2.9.14.tgz#c438324c6594afd1050df3777da981dee988bb1b"
-  integrity sha512-vSlsSdOYGcYEJfkQ/NeLXgnRv5zZfpAsdztkIrs7AZHV8RCMZQkwjo4DS5BnrYTqoWqLoUe1Cah4aVO4oNNqCQ==
+  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: