chore: v3.4.11

* fix: 模版PC模版无法启动

* fix: 修复PC模版无法启动问题

---------

Co-authored-by: zhouyonghuan <zhouyonghuan@gyyx.cn>

.eslintignore

@@ -1,4 +0,0 @@
-**/*.ts
-
-lib
-node_modules

.vscode/settings.json

@@ -31,5 +31,8 @@
             "source": "./fixtures/output/**/*.*",
             "target": "./fixtures/input/<base>"
         }
+    ],
+    "cSpell.words": [
+        "unref"
     ]
 }

README.en-US.md

@@ -16,21 +16,21 @@ An excellent front-end solution
 
 </div>
 
--   document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
--   changelog - [CHANGELOG.md](./CHANGELOG.md)
+- document - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
+- changelog - [CHANGELOG.md](./CHANGELOG.md)
 
 # Pain points
 
 Before developing a front-end project, we may need to do the following preparations：
 
--   Set up a development environment
--   Conventional code specification
--   Encapsulate API requests
--   Configure routing
--   Realize layout, menu, navigation
--   Realize login
--   authority management
--   ...
+- Set up a development environment
+- Conventional code specification
+- Encapsulate API requests
+- Configure routing
+- Realize layout, menu, navigation
+- Realize login
+- authority management
+- ...
 
 In addition to the preparation work, there are many similar business types. For example, most of the middle and back-end applications are workbenches, additions, deletions, changes, permissions, charts, etc. If each project is completely processed manually, it will not only take time, but over time there may be multiple technology stacks and development specifications, leading to inconsistent development processes and making historical projects more and more difficult to maintain. So we need a complete solution to manage the entire process from development to deployment.
 
@@ -40,14 +40,14 @@ Fes.js is an excellent front-end application solution. Fes.js is based on Vue 3.
 
 It mainly has the following functions:
 
--   🚀 **fast** , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.
--   🧨 **easy** , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
+- 🚀 **fast** , Built-in routing, development, construction, etc., and provide plug-ins such as testing, layout, permissions, internationalization, state management, API requests, data dictionary, SvgIcon, etc., which can meet most of the daily development needs.
+- 🧨 **easy** , Based on Vue.js 3.0, easy to get started. Carry out the idea of "Convention is better than configuration", design plug-ins as much as possible to replace configuration with conventions, and provide a unified plug-in configuration entry, which is simple, concise and flexible. Provide a consistent API entry, a consistent experience, and easier learning.
 
--   💪 **strong** , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
+- 💪 **strong** , Only need to care about the content of the page, reduce the chance of writing BUG! Provide unit testing and coverage testing capabilities to ensure project quality.
 
--   📦 **expanded** , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
+- 📦 **expanded** , Drawing lessons from Umi, it implements a complete life cycle and plug-in mechanism. The plug-in can manage the compile time and runtime of the project, and the capabilities can be encapsulated through the plug-in, and run in an orderly manner in Fes.js.
 
--   📡 **future** , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
+- 📡 **future** , While meeting demand, we will not stop exploring new technologies. Vue3.0 has been used to improve application performance, webpack5 has been used to improve construction performance and implement microservices, and new technologies such as vite will be explored in the future.
 
 ## Plugins
 
@@ -57,7 +57,7 @@ It mainly has the following functions:
 | [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)                       | Provide unified enumeration access and rich functions to handle enumeration                                                                   |
 | [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)                         | svg file is automatically registered as a component                                                                                           |
 | [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)       | Based on `Jest`, provide unit testing and coverage testing capabilities                                                                       |
-| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html)                                       | Simple configuration to have a layout, including navigation and sidebar                                                                       |
+| [@fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html)                                       | Simple configuration to have a layout, including navigation and sidebar                                                                       |
 | [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D)                     | Based on `Vue I18n`, providing internationalization capabilities                                                                              |
 | [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D)                       | Simple data management solution                                                                                                               |
 | [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | Based on the request encapsulated by `Axios`, built-in functions such as preventing repeated requests, request throttling, and error handling |
@@ -97,15 +97,17 @@ npm install
 npm run dev
 ```
 
-## Start On Cloud IDE
+## Project Demo
 
-[https://idegithub.com/WeBankFinTech/fes.js](https://idegithub.com/WeBankFinTech/fes.js)
+| Project     |  Description           |
+|----------------------------------------- | ----------------------------------------- |
+| <img src="https://docs.icegl.cn/logo.png" width="100px"> | [threejs webgl three three.js tres.js tvt.js](https://gitee.com/ice-gl/icegl-three-vue-tres) |
 
 ## Feedback
 
 | Github Issue                         | WeChat group                                                                | Fes.js 开源运营小助手                                                       |
 | ------------------------------------ | --------------------------------------------------------------------------- | --------------------------------------------------------------------------- |
-| [@fesjs/fes.js/issues](../../issues) | <img src="https://i.loli.net/2020/09/11/2XhKtPZd6NFVbDE.png" width="250" /> | <img src="https://i.loli.net/2020/09/16/sxwr62CKhmYOUyV.jpg" height="250"/> |
+| [@fesjs/fes.js/issues](../../issues) | <img src="https://wanchun-1252303708.cos.ap-nanjing.myqcloud.com/WeChatb7bcfb33e47b8949ced831b8e79ffb0b.jpg" height="250"/> |
 
 ## Contributing
 
@@ -127,4 +129,4 @@ In order for the Fes.js open source project to run better, and to give back to t
 
 The output of experience can also help your system accumulate your own projects, sort out your work ideas, and also help your technology blog to promote. Good practice cases will have the opportunity to be invited to participate in the project community technical meeting to share, hurry up and participate.
 
-Please stamp: https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+Please stamp: <https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g>

README.md

@@ -8,7 +8,7 @@
 
 <div align="center">
 
-一个优秀的前端解决方案
+一个好用的前端应用解决方案
 
 [![GitHub issues](https://img.shields.io/github/issues/WeBankFinTech/fes.js.svg?style=flat-square)](../../issues)
 [![MIT](https://img.shields.io/dub/l/vibe-d.svg?style=flat-square)](http://opensource.org/licenses/MIT)
@@ -17,21 +17,21 @@
 
 </div>
 
--   使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
--   更新日志 - [CHANGELOG.md](./CHANGELOG.md)
+- 使用文档 - [http://fesjs.mumblefe.cn/](http://fesjs.mumblefe.cn/)
+- 更新日志 - [CHANGELOG.md](./CHANGELOG.md)
 
 # 痛点
 
 在开发一个前端项目之前，我们可能需要做如下准备工作：
 
--   搭建开发环境
--   约定代码规范
--   封装 API 请求
--   配置路由
--   实现布局、菜单、导航
--   实现登录
--   权限管理
--   ...
+- 搭建开发环境
+- 约定代码规范
+- 封装 API 请求
+- 配置路由
+- 实现布局、菜单、导航
+- 实现登录
+- 权限管理
+- ...
 
 除了准备工作之外，还会遇到很多相似的业务类型，比如中后台应用大多都是工作台、增删改查、权限、图表等。如果每次项目都完全手动处理一遍，不仅耗费时间，久而久之可能会存在多种技术栈、开发规范，导致开发流程不统一，历史项目越来越难维护。所以我们需要一套完整的解决方案，管理开发到部署整个流程。
 
@@ -41,14 +41,14 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 
 它主要具备以下功能：
 
--   🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
--   🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
+- 🚀 **快速** ，内置了路由、开发、构建等，并且提供测试、布局、权限、国际化、状态管理、API 请求、数据字典、SvgIcon 等插件，可以满足大部分日常开发需求。
+- 🧨 **简单** ，基于 Vue.js 3.0，上手简单。贯彻“约定优于配置”思想，设计插件上尽可能用约定替代配置，同时提供统一的插件配置入口，简单简洁又不失灵活。提供一致性的 API 入口，一致化的体验，学习起来更轻松。
 
--   💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
+- 💪 **健壮** ，只需要关心页面内容，减少写 BUG 的机会！提供单元测试、覆盖测试能力保障项目质量。
 
--   📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
+- 📦 **可扩展** ，借鉴 Umi 实现了完整的生命周期和插件化机制，插件可以管理项目的编译时和运行时，能力均可以通过插件封装进来，在 Fes.js 中协调有序的运行。
 
--   📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
+- 📡 **面向未来** ，在满足需求的同时，我们也不会停止对新技术的探索。已使用 Vue3.0 来提升应用性能，已使用 webpack5 和 vite 提升构建性能和实现微服务。
 
 ## 插件
 
@@ -58,7 +58,7 @@ Fes.js 是一个好用的前端应用解决方案。提供覆盖编译构建到
 | [@fesjs/plugin-enums](http://fesjs.mumblefe.cn/reference/plugin/plugins/enums.html#%E4%BB%8B%E7%BB%8D)                       | 提供统一的枚举存取及丰富的函数来处理枚举                                |
 | [@fesjs/plugin-icon](http://fesjs.mumblefe.cn/reference/plugin/plugins/icon.html#%E4%BB%8B%E7%BB%8D)                         | svg 文件自动注册为组件                                                  |
 | [@fesjs/plugin-jest](http://fesjs.mumblefe.cn/reference/plugin/plugins/jest.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F)       | 基于 `Jest`，提供单元测试、覆盖测试能力                                 |
-| [ @fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html)                                       | 简单的配置即可拥有布局，包括导航以及侧边栏                              |
+| [@fesjs/plugin-layout](http://fesjs.mumblefe.cn/reference/plugin/plugins/layout.html)                                       | 简单的配置即可拥有布局，包括导航以及侧边栏                              |
 | [@fesjs/plugin-locale](http://fesjs.mumblefe.cn/reference/plugin/plugins/locale.html#%E4%BB%8B%E7%BB%8D)                     | 基于 `Vue I18n`，提供国际化能力                                         |
 | [@fesjs/plugin-model](http://fesjs.mumblefe.cn/reference/plugin/plugins/model.html#%E4%BB%8B%E7%BB%8D)                       | 简易的数据管理方案                                                      |
 | [@fesjs/plugin-request](http://fesjs.mumblefe.cn/reference/plugin/plugins/request.html#%E5%90%AF%E7%94%A8%E6%96%B9%E5%BC%8F) | 基于 `Axios` 封装的 request，内置防止重复请求、请求节流、错误处理等功能 |
@@ -99,15 +99,19 @@ npm install
 npm run dev
 ```
 
-## 在 Cloud IDE 中预览
+## 项目样例
 
-[https://idegithub.com/WeBankFinTech/fes.js](https://idegithub.com/WeBankFinTech/fes.js)
+使用 fes.js 构建的优秀项目，欢迎联系。
+
+| 项目     |  描述           |
+|----------------------------------------- | ----------------------------------------- |
+| <img src="https://docs.icegl.cn/logo.png" width="100px"> | [三维可视化项目快速落地の开源框架](https://gitee.com/ice-gl/icegl-three-vue-tres) |
 
 ## 反馈
 
 | Github Issue                         | Fes.js 开源运营小助手                                                                            |
 | ------------------------------------ | ------------------------------------------------------------------------------------------------ |
-| [@fesjs/fes.js/issues](../../issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
+| [@fesjs/fes.js/issues](../../issues) | <img src="https://wanchun-1252303708.cos.ap-nanjing.myqcloud.com/WeChatb7bcfb33e47b8949ced831b8e79ffb0b.jpg" height="250"/> |
 
 ## 参与共建
 
@@ -128,4 +132,4 @@ npm run dev
 为了 Fes.js 开源项目更好的运转，同时回馈开源社区，社区推出有奖征文活动！欢迎大家投递实践经验，给社区用户，更广泛的开发者提供借鉴。
 
 经验输出也可以帮助到你系统沉淀自有项目，梳理工作思路，也能够帮助你的技术博客做宣传。优秀的实践案例将有机会邀请参与项目社区技术会议分享，赶快来参与吧。
-请戳：https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g
+请戳：<https://mp.weixin.qq.com/s/nV4NG_OUUrdgtft8g_IW4g>

docs/.vitepress/configs/sidebar/zh.ts

@@ -1,4 +1,3 @@
-
 export const zh = {
     '/guide/': [
         {
@@ -6,12 +5,12 @@ export const zh = {
             items: [
                 {
                     text: '介绍',
-                    link: '/guide/index.md'
+                    link: '/guide/index.md',
                 },
                 {
                     text: '快速上手',
-                    link: '/guide/getting-started.md'
-                }
+                    link: '/guide/getting-started.md',
+                },
             ],
         },
         {
@@ -19,35 +18,44 @@ export const zh = {
             items: [
                 {
                     text: '目录结构',
-                    link: '/guide/directory-structure.md'
-                },{
+                    link: '/guide/directory-structure.md',
+                },
+                {
                     text: 'Vite 和 Webpack 双构建',
-                    link: '/guide/builder.md'
-                },{
+                    link: '/guide/builder.md',
+                },
+                {
                     text: '编译时配置',
-                    link: '/guide/config.md'
-                },{
+                    link: '/guide/config.md',
+                },
+                {
                     text: '运行时配置',
-                    link: '/guide/runtime-config.md'
-                },{
+                    link: '/guide/runtime-config.md',
+                },
+                {
                     text: '环境变量',
-                    link: '/guide/env.md'
-                },{
+                    link: '/guide/env.md',
+                },
+                {
                     text: '路由',
-                    link: '/guide/route.md'
-                },{
+                    link: '/guide/route.md',
+                },
+                {
                     text: '插件',
-                    link: '/guide/plugin.md'
-                },{
+                    link: '/guide/plugin.md',
+                },
+                {
                     text: 'HTML 模板',
-                    link: '/guide/template.md'
-                },{
+                    link: '/guide/template.md',
+                },
+                {
                     text: 'Mock 数据',
-                    link: '/guide/mock.md'
-                },{
-                    text: '从 2.0.x 迁移到 3.0.x',
-                    link: '/guide/upgrade3.md'
-                }
+                    link: '/guide/mock.md',
+                },
+                {
+                    text: '从 2.x 迁移到 3.x',
+                    link: '/guide/upgrade3.md',
+                },
             ],
         },
         {
@@ -55,102 +63,102 @@ export const zh = {
             items: [
                 {
                     text: '使用图片',
-                    link: '/guide/image.md'
+                    link: '/guide/image.md',
                 },
                 {
                     text: '使用 css',
-                    link: '/guide/css.md'
+                    link: '/guide/css.md',
                 },
                 {
                     text: '静态资源',
-                    link: '/guide/public.md'
-                }
+                    link: '/guide/public.md',
+                },
             ],
         },
         {
             text: '贡献指南',
-            link: '/guide/contributing.md'
+            link: '/guide/contributing.md',
         },
         {
             text: '常见问题',
-            link: '/guide/faq.md'
+            link: '/guide/faq.md',
         },
     ],
     '/reference/plugin/': [
         {
             text: '介绍',
-            link: '/reference/plugin/index.md'
+            link: '/reference/plugin/index.md',
         },
         {
             text: 'Plugins',
             items: [
                 {
                     text: '@fesjs/plugin-access',
-                    link: '/reference/plugin/plugins/access.md'
+                    link: '/reference/plugin/plugins/access.md',
                 },
                 {
                     text: '@fesjs/plugin-enums',
-                    link: '/reference/plugin/plugins/enums.md'
+                    link: '/reference/plugin/plugins/enums.md',
                 },
                 {
                     text: '@fesjs/plugin-icon',
-                    link: '/reference/plugin/plugins/icon.md'
+                    link: '/reference/plugin/plugins/icon.md',
                 },
                 {
                     text: '@fesjs/plugin-jest',
-                    link: '/reference/plugin/plugins/jest.md'
+                    link: '/reference/plugin/plugins/jest.md',
                 },
                 {
                     text: '@fesjs/plugin-layout',
-                    link: '/reference/plugin/plugins/layout.md'
+                    link: '/reference/plugin/plugins/layout.md',
                 },
                 {
                     text: '@fesjs/plugin-locale',
-                    link: '/reference/plugin/plugins/locale.md'
+                    link: '/reference/plugin/plugins/locale.md',
                 },
                 {
                     text: '@fesjs/plugin-model',
-                    link: '/reference/plugin/plugins/model.md'
+                    link: '/reference/plugin/plugins/model.md',
                 },
                 {
                     text: '@fesjs/plugin-request',
-                    link: '/reference/plugin/plugins/request.md'
+                    link: '/reference/plugin/plugins/request.md',
                 },
                 {
                     text: '@fesjs/plugin-vuex',
-                    link: '/reference/plugin/plugins/vuex.md'
+                    link: '/reference/plugin/plugins/vuex.md',
                 },
                 {
                     text: '@fesjs/plugin-qiankun',
-                    link: '/reference/plugin/plugins/qiankun.md'
+                    link: '/reference/plugin/plugins/qiankun.md',
                 },
                 {
                     text: '@fesjs/plugin-windicss',
-                    link: '/reference/plugin/plugins/windicss.md'
+                    link: '/reference/plugin/plugins/windicss.md',
                 },
                 {
                     text: '@fesjs/plugin-sass',
-                    link: '/reference/plugin/plugins/sass.md'
+                    link: '/reference/plugin/plugins/sass.md',
                 },
                 {
                     text: '@fesjs/plugin-editor',
-                    link: '/reference/plugin/plugins/editor.md'
+                    link: '/reference/plugin/plugins/editor.md',
                 },
                 {
                     text: '@fesjs/plugin-pinia',
-                    link: '/reference/plugin/plugins/pinia.md'
+                    link: '/reference/plugin/plugins/pinia.md',
                 },
                 {
                     text: '@fesjs/plugin-watermark',
-                    link: '/reference/plugin/plugins/watermark.md'
+                    link: '/reference/plugin/plugins/watermark.md',
                 },
                 {
                     text: '@fesjs/plugin-login',
-                    link: '/reference/plugin/plugins/login.md'
+                    link: '/reference/plugin/plugins/login.md',
                 },
                 {
                     text: '@fesjs/plugin-swc',
-                    link: '/reference/plugin/plugins/swc.md'
+                    link: '/reference/plugin/plugins/swc.md',
                 },
             ],
         },
@@ -158,10 +166,10 @@ export const zh = {
             text: '插件开发',
             items: [{
                 text: '插件介绍',
-                link: '/reference/plugin/dev/index.md'
+                link: '/reference/plugin/dev/index.md',
             }, {
                 text: '插件API',
-                link: '/reference/plugin/dev/api.md'
+                link: '/reference/plugin/dev/api.md',
             }],
         },
     ],

docs/guide/getting-started.md

@@ -6,12 +6,12 @@ import { withBase } from 'vitepress'
 
 ## 依赖环境
 
-首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 12.13 或以上。
+首先得有 [Node.js](https://nodejs.org/)，并确保 node 版本是 `v18.12.0` 或以上。
 
 ```bash
 # 打印 node 版本
 node -v
-v12.13.0
+v18.12.0
 ```
 
 推荐使用 [pnpm](https://pnpm.io/installation) 管理 npm 依赖

docs/guide/upgrade3.md

@@ -1,28 +1,29 @@
-# 从 2.0.x 迁移到 3.0.x
+# 从 2.x 迁移到 3.x
 
-## 版本 3.0.x 的 break
+## 版本 3.x 的 break
 
-1. 编译时的 [base](../reference/config/index.md/#base) 配置，移到了 [router.base](../reference/config/index.md/#router) 下。
-2. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v4.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)。
-3. [layout 插件](../reference/plugin/plugins/layout.md#_4-x-升级到-5-x) 有一些属性变更
-3. [request 插件](../reference/plugin/plugins/request.md#_2-x-升级到-3-x) 有一些参数变更
+1. 环境要求 `node >= v18.12.0`
+2. 编译时的 [base](../reference/config/index.md/#base) 配置，移到了 [router.base](../reference/config/index.md/#router) 下
+3. [webpack-dev-server](https://github.com/webpack/webpack-dev-server) 从 `v3.x` 升级到了 `v5.x`，如果遇到配置不兼容，可以查看[webpack-dev-server 3.x 升级 4.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v4.md)、[webpack-dev-server 4.x 升级 5.x](https://github.com/webpack/webpack-dev-server/blob/master/migration-v5.md)
+4. [layout 插件](../reference/plugin/plugins/layout.md#_4-x-升级到-5-x) 有一些属性变更
+5. [request 插件](../reference/plugin/plugins/request.md#_2-x-升级到-3-x) 有一些参数变更，升级请使用最新版本
 
 ## 继续使用 Webpack
 
-1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`。
-2. 如果设置了 `publicPath: './'`，请更改为 `publicPath: ''`
-3. 如果有，将 `public/index.html` 文件挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)。
+1. 添加 Webpack 构建依赖包： `npm i @fesjs/builder-webpack -D`
+2. `dev` 的 `publicPath` 配置不能为 `./`，请更改为 `auto`
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，移除 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 相关配置，具体模版变量使用请查看[HTML 模版](../guide/template.html)
 
 ## 换成 Vite
 
-1. 安装依赖包 `npm i @fesjs/builder-vite`。
-2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config/index.md)。
-3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法。
-4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式。
+1. 安装依赖包 `npm i @fesjs/builder-vite`
+2. 将 Webpack 相关的配置换成 Vite，具体可查看[配置](../reference/config/index.md)
+3. 将 html 模版文件从 `public/index.html` 挪到项目根目录，如果有相应的 [html-webpack-plugin](https://github.com/jantimon/html-webpack-plugin) 配置，需要改成 [vite-plugin-html](https://github.com/vbenjs/vite-plugin-html) 的写法
+4. 将 `require` 等 Vite 不支持的代码，改写成 Vite 支持的方式
 
 ## 插件
 
-插件都需要升级到 `3.0.x` 版本，新版添加了兼容`builder`的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。
+插件都需要升级到 `3.x` 版本，新版添加了兼容`builder`的逻辑，但是提供的接口和配置没有变化，只需要升级版本即可使用。
 
 -   [@fesjs/plugin-layout](../reference/plugin/plugins/layout.md) 需要升级到`5.0.x`版本。
 -   [@fesjs/plugin-locale](../reference/plugin/plugins/locale.md) 需要升级到`4.0.x`版本。

docs/index.md

@@ -64,6 +64,6 @@ npm run dev
 
 | Github Issue                                                           | Fes.js 开源运营小助手                                                                            |
 | ---------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
-| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://cos-1254145788.cos.ap-guangzhou.myqcloud.com/WechatIMG104.jpeg" height="250"/> |
+| [@fesjs/fes.js/issues](https://github.com/WeBankFinTech/fes.js/issues) | <img src="https://wanchun-1252303708.cos.ap-nanjing.myqcloud.com/WeChatb7bcfb33e47b8949ced831b8e79ffb0b.jpg" height="250"/> |
 
 </HomeContent>

docs/reference/config/index.md

@@ -93,6 +93,22 @@ export default {
 };
 ```
 
+### console
+
+-   类型： `object`
+-   默认值：`{}`
+-   详情：
+    用于控制应用启动的时候在 console 中打印的信息，目前仅支持 version
+-   示例：
+
+```js
+export default {
+    console: {
+        version: true
+    }
+};
+```
+
 ### define
 
 -   类型： `object`

docs/reference/plugin/plugins/layout.md

@@ -8,16 +8,16 @@ import { withBase } from 'vitepress'
 
 为了进一步降低研发成本，我们将布局利用 `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`、`top-left-right` 五种布局。
+- 主题，提供 `light`、`dark` 两种主题。
+- 默认实现对路由的 404、403 处理。
+- 搭配 [@fesjs/plugin-access](./access.html) 插件使用，可以完成对路由的权限控制。
+- 搭配 [@fesjs/plugin-locale](./locale.html) 插件使用，提供切换语言的能力。
+- 支持自定义头部或者侧边栏区域。
+- 菜单支持配置 icon。
+- 菜单标题支持国际化。
+- 可配置页面是否需要 layout。
 
 ## 启用方式
 
@@ -34,7 +34,7 @@ import { withBase } from 'vitepress'
 
 ## 布局类型
 
-配置参数是 `navigation`, 布局有三种类型 `side`、`mixin` 、`top` 和 `left-right`， 默认是 `side`。
+配置参数是 `navigation`, 布局有五种类型 `side`、`mixin` 、`top` 、`left-right`、`top-left-right`， 默认是 `side`。
 
 ### side
 
@@ -53,9 +53,12 @@ import { withBase } from 'vitepress'
 
 ### left-right
 
-<!-- ![mixin](/mixin.png) -->
+<!-- ![mixin](/left-right.png) -->
 <img :src="withBase('left-right.png')" alt="left-right">
 
+<!-- ![mixin](/top-left-right.png) -->
+<img :src="withBase('top-left-right.png')" alt="top-left-right">
+
 ### 页面个性化
 
 可以为页面单独设置布局类型：
@@ -127,7 +130,14 @@ export default {
         }, {
             name: 'simpleList'
         }],
-
+        // 403 页面配置
+        403: {
+            title: '没有访问权限，请联系管理人员',
+        },
+        // 404 页面配置
+        404: {
+            title: '哎呀！这个页面找不到了',
+        }
     },
 };
 ```
@@ -179,58 +189,58 @@ export function layout(layoutConfig, { initialState }) {
 
 ### footer
 
--   **类型**：`String`
--   **默认值**：`null`
+- **类型**：`String`
+- **默认值**：`null`
 
--   **详情**：页面底部的文字。
+- **详情**：页面底部的文字。
 
 ### theme
 
--   **类型**：`String`
--   **默认值**：`dark`
+- **类型**：`String`
+- **默认值**：`dark`
 
--   **详情**：主题，可选有 `dark`、`light`
+- **详情**：主题，可选有 `dark`、`light`
 
 ### navigation
 
--   **类型**：`String`
--   **默认值**：`side`
+- **类型**：`String`
+- **默认值**：`side`
 
--   **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
+- **详情**：页面布局类型，可选有 `side`、 `top`、 `mixin`
 
 ### navigationOnError
 
--   **类型**：`String`、`Function`
+- **类型**：`String`、`Function`
 
--   **详情**：指定 `403`、`404` 时，页面的布局类型。值同 `navigation`。也支持函数返回。
+- **详情**：指定 `403`、`404` 时，页面的布局类型。值同 `navigation`。也支持函数返回。
 
 ### isFixedHeader
 
--   **类型**：`Boolean`
--   **默认值**：`false`
+- **类型**：`Boolean`
+- **默认值**：`false`
 
--   **详情**：是否固定头部，不跟随页面滚动。
+- **详情**：是否固定头部，不跟随页面滚动。
 
 ### isFixedSidebar
 
--   **类型**：`Boolean`
--   **默认值**：`true`
+- **类型**：`Boolean`
+- **默认值**：`true`
 
--   **详情**：是否固定 sidebar，不跟随页面滚动。
+- **详情**：是否固定 sidebar，不跟随页面滚动。
 
 ### title
 
--   **类型**：`String`
--   **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
+- **类型**：`String`
+- **默认值**：默认为 [编译时配置 title](../../../reference/config/#title)
 
--   **详情**：产品名。
+- **详情**：产品名，当配置为"$"开头时，开启国际化，使用`$`后面的内容去匹配语言设置。
 
 ### logo
 
--   **类型**：`String`
--   **默认值**：默认提供 `fes.js` 的 Logo
+- **类型**：`String`
+- **默认值**：默认提供 `fes.js` 的 Logo
 
--   **详情**：Logo 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置([BASE_URL 来自这里](../../../guide/env#process-env))
+- **详情**：Logo 的链接，例如在 public/logo.png 放了一个 logo，可以这么配置([BASE_URL 来自这里](../../../guide/env#process-env))
 
 ```js
 export const layout = {
@@ -240,25 +250,29 @@ export const layout = {
 
 ### multiTabs
 
--   **类型**：`boolean`
--   **默认值**：`false`
+- **类型**：`boolean`
+- **默认值**：`false`
 
--   **详情**：是否开启多页。
+- **详情**：是否开启多页。可通过  tabReload: false 控制标签页是否重新加载。
 
 ### menus
 
--   **类型**：`[] | () => Ref<[]> | () => []`
--   **默认值**：`[]`
+- **类型**：`[] | () => Ref<[]> | () => []`
+- **默认值**：`[]`
 
--   **详情**：菜单配置
+- **详情**：菜单配置
 
     子项具体配置如下：
 
-    -   **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。
+  - **name**：菜单的名称。通过匹配 `name` 和路由元信息 [meta](../../../guide/route.md#扩展路由元信息) 中的 `name`，把菜单和路由关联起来， 然后使用路由元信息补充菜单配置，比如 `title`、`path`  等。
 
-    -   **path**：菜单的路径，可配置第三方地址。
+  - **path**：菜单的路径，可配置第三方地址。
 
-    -   **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
+  - **query**：同 vue-router 的 query 参数。
+
+  - **params**：同 vue-router 的 params 参数。
+
+  - **match (v4.0.0+）**：额外匹配的路径，当前路由命中匹配规则时，此菜单高亮。
 
         ```
         {
@@ -267,17 +281,17 @@ export const layout = {
         }
         ```
 
-    -   **title**：菜单的标题。
+  - **title**：菜单的标题。
 
-        -   如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
+    - 如果同时使用[国际化插件](./locale.md)，而且`title`的值以`$`开头，则使用`$`后面的内容去匹配语言设置。
 
-        -   title 支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
+    - title 支持配置函数，对应 Fes Design 中 Menu 组件的`label`插槽。仅在运行时配置中支持。
 
-    -   **icon**: 菜单的图标，只一级标题展示图标。
+  - **icon**: 菜单的图标，只一级标题展示图标。
 
-        -   图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
+    - 图标使用[fes-design icon](https://fes-design-4gvn317r3b6bfe17-1254145788.ap-shanghai.app.tcloudbase.com/zh/components/icon.html)，编译时配置使用组件名称，我们会自动引入组件。
 
-        -   图标使用本地或者远程 svg 图片。
+    - 图标使用本地或者远程 svg 图片。
 
             ```js
             {
@@ -285,7 +299,8 @@ export const layout = {
             }
             ```
 
-    -   **children**：子菜单配置。
+  - **children**：子菜单配置。
+  - **_blank**：是否在新的窗口打开页面，默认 http 开头的链接在新窗口打开
 
 :::tip
 函数类型仅在运行时可用，可以实现动态变更菜单。
@@ -293,42 +308,42 @@ export const layout = {
 
 ### menuProps
 
--   **类型**：`Object`
--   **默认值**：`{}`
+- **类型**：`Object`
+- **默认值**：`{}`
 
--   **详情**：菜单的配置：
+- **详情**：菜单的配置：
 
-    -   **defaultExpandAll**：是否默认展开全部菜单。
+  - **defaultExpandAll**：是否默认展开全部菜单。
 
-    -   **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
+  - **expandedKeys**：配置默认展开的菜单，需要传子项是菜单路径的数组。
 
-    -   **accordion**：是否只保持一个子菜单的展开。
+  - **accordion**：是否只保持一个子菜单的展开。
 
 ### sideWidth
 
--   **类型**：`Number`
--   **默认值**：`200`
+- **类型**：`Number`
+- **默认值**：`200`
 
--   **详情**：sidebar 的宽度
+- **详情**：sidebar 的宽度
 
 ### renderCustom
 
--   **类型**： `()=> VNodes`
--   **默认值**：`null`
+- **类型**： `()=> VNodes`
+- **默认值**：`null`
 
--   **详情**： 自定义区域内容，仅运行时。
+- **详情**： 自定义区域内容，仅运行时。
 
 ### unAccessHandler
 
--   **类型**：`({ to, from, next})=> void`
--   **默认值**：`null`
+- **类型**：`({ 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)
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不属于可见资源列表，则会暂停进入，调用 `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)
 
 比如：
 
@@ -350,15 +365,15 @@ export const layout = {
 
 ### noFoundHandler
 
--   **类型**：`({ to, from, next})=> void`
--   **默认值**：`null`
+- **类型**：`({ 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)
+- **详情**：仅运行时，当进入某个路由时，如果路由对应的页面不存在，则会调用 `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)
 
 比如：
 
@@ -376,7 +391,7 @@ export const layout = {
 
 ## API
 
-### useTabTitle
+### useTabTitle（建议使用useLayout）
 
 类型定义如下：
 
@@ -397,6 +412,18 @@ titleRef.value = 'changed';
 </script>
 ```
 
+### useLayout
+
+类型定义如下：
+
+```ts
+function useLayout(options: { title?: string }): { title: Ref<string>; reloadTab: () => void; closeTab: () => void };
+```
+
+- title: 更新当前页签的标题
+- reloadTab：重载当前页签
+- closeTab：关闭当前页签
+
 ## 4.x 升级到 5.x
 
 1. 个性化 layout 配置改为使用传入 navigation

docs/reference/plugin/plugins/locale.md

@@ -69,11 +69,9 @@ export default {
 
 想了解更多语言信息配置、匹配规则，请参考 [Vue I18n](https://vue-i18n.intlify.dev/guide/essentials/syntax.html) 文档。
 
-
 ### 多层配置
-如果国际化内容较多，希望模块化配置，则可以这样：
 
-```
+如果国际化内容较多，希望模块化配置，则可以这样：
 src
   ├── locales
   │    ├── zh-CN.js
@@ -84,6 +82,7 @@ src
   └── pages
   │    └── index.vue
   └── app.js
+
 ```
 
 插件会把相同语言的配置合并在一起！
@@ -115,37 +114,49 @@ export default {
 
 #### locale
 
--   **类型**：`String`
--   **默认值**：`zh-CN`
+- **类型**：`String`
+- **默认值**：`zh-CN`
 
--   **详情**：当前的语言。
+- **详情**：当前的语言。
 
 #### fallbackLocale
 
--   **类型**：`String`
--   **默认值**：`zh-CN`
+- **类型**：`String`
+- **默认值**：`zh-CN`
 
--   **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
+- **详情**：兜底的语言，如果当前语言找不到配置，则使用默认语言，需要保证默认语言配置文件存在。
 
 #### baseNavigator
 
--   **类型**：`Boolean`
--   **默认值**：`true`
+- **类型**：`Boolean`
+- **默认值**：`true`
 
--   **详情**：开启浏览器语言检测。
+- **详情**：开启浏览器语言检测。
 
 默认情况下，当前语言环境的识别按照：`localStorage` 中 `fes_locale` 值 > 浏览器检测 > `default` 设置的默认语言 > `zh-CN` 中文。
 
 #### legacy
 
--   **类型**：`Boolean`
--   **默认值**：`false`
+- **类型**：`Boolean`
+- **默认值**：`false`
 
--   **详情**：用户是否需要 Legacy API 模式
+- **详情**：用户是否需要 Legacy API 模式
 
 ### 运行时配置
 
-暂无。
+## onLocaleChange
+
+当语言环境发生变化时，会触发此函数。
+
+```js
+import { defineRuntimeConfig } from '@fesjs/fes';
+
+export default defineRuntimeConfig({
+    onLocaleChange: ({ t, locale }) => {
+
+    }
+});
+```
 
 ## API
 
@@ -159,16 +170,16 @@ import { locale } from '@fesjs/fes';
 
 #### locale.messages
 
--   **类型**：`Object`
--   **详情**：当前的配置的语言信息。
+- **类型**：`Object`
+- **详情**：当前的配置的语言信息。
 
 #### locale.setLocale
 
--   **类型**：`Function`
--   **详情**：设置当前的语言。
--   **参数**：
-    -   locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
--   **返回值**：`null`
+- **类型**：`Function`
+- **详情**：设置当前的语言。
+- **参数**：
+  - locale，语言的名称，应该是符合 `<lang>-<COUNTRY>` 规范的名称。
+- **返回值**：`null`
 
 ```js
 import { locale } from '@fesjs/fes';
@@ -177,12 +188,12 @@ locale.setLocale({ locale: 'en-US' });
 
 #### locale.addLocale
 
--   **类型**：`Function`
--   **详情**：手动添加语言配置。
--   **参数**：
-    -   locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
-    -   messages, 语言信息。
--   **返回值**：`null`
+- **类型**：`Function`
+- **详情**：手动添加语言配置。
+- **参数**：
+  - locale，语言的名称，符合 `<lang>-<COUNTRY>` 规范的名称。
+  - messages, 语言信息。
+- **返回值**：`null`
 
 ```js
 import { locale } from '@fesjs/fes';
@@ -191,10 +202,10 @@ locale.addLocale({ locale: 'ja-JP', messages: { test: 'テスト' } });
 
 #### locale.getAllLocales
 
--   **类型**：`Function`
--   **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
--   **参数**：null
--   **返回值**：`Array`
+- **类型**：`Function`
+- **详情**：获取当前获得所有国际化文件的列表，默认会在 locales 文件夹下寻找类似 `en-US.js` 文件。
+- **参数**：null
+- **返回值**：`Array`
 
 ```js
 import { locale } from '@fesjs/fes';

eslint.config.js

@@ -2,7 +2,6 @@
 import antfu from '@antfu/eslint-config';
 
 export default await antfu({
-    files: ['**/*.js', '**/*.jsx', '**/*.vue', '**/*.ts'],
     // TODO: 使用 ignore 代替 cli 命令中的配置
     stylistic: {
         indent: 4,

package.json

@@ -1,8 +1,9 @@
 {
     "name": "fes.js",
     "type": "module",
-    "version": "3.1.6",
+    "version": "3.4.11",
     "private": true,
+    "packageManager": "pnpm@8.6.6",
     "description": "一个好用的前端管理台快速开发框架",
     "preferGlobal": true,
     "workspaces": [
@@ -39,18 +40,18 @@
         "semver": "^7.3.6"
     },
     "devDependencies": {
-        "@antfu/eslint-config": "^2.6.2",
+        "@antfu/eslint-config": "^3.8.0",
         "@commitlint/cli": "^18.4.4",
         "@commitlint/config-conventional": "^18.4.4",
         "chokidar": "^3.5.3",
-        "commitizen": "^4.3.0",
+        "commitizen": "^4.3.1",
         "cz-conventional-changelog": "^3.3.0",
         "deepmerge": "^4.2.2",
-        "eslint": "^8.56.0",
+        "eslint": "^9.13.0",
         "fs-extra": "^11.1.1",
         "lint-staged": "^15.2.0",
         "simple-git-hooks": "^2.9.0",
-        "typescript": "^5.0.4",
+        "typescript": "^5.6.3",
         "vitepress": "1.0.0-alpha.73",
         "vue": "^3.3.4",
         "yargs-parser": "^21.1.1"

packages/create-fes-app/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@fesjs/create-fes-app",
-  "version": "3.0.2",
-  "description": "create a app base on fes.js",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "bin",
-    "templates/**/*"
-  ],
-  "bin": {
-    "create-fes-app": "bin/create-fes-app.js"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/create-fes-app"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "sideEffects": false,
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "fs-extra": "^11.1.1",
-    "inquirer": "^7.3.3",
-    "readline": "^1.3.0",
-    "validate-npm-package-name": "^3.0.0"
-  }
+    "name": "@fesjs/create-fes-app",
+    "version": "3.0.6",
+    "description": "create a app base on fes.js",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "bin",
+        "templates/**/*"
+    ],
+    "bin": {
+        "create-fes-app": "bin/create-fes-app.js"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/create-fes-app"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "sideEffects": false,
+    "author": "qlin",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "fs-extra": "^11.1.1",
+        "inquirer": "^7.3.3",
+        "readline": "^1.3.0",
+        "validate-npm-package-name": "^3.0.0"
+    }
 }

packages/create-fes-app/templates/app/pc/package.json

@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@fesjs/fes": "^3.0.0",
-    "@fesjs/plugin-access": "^3.0.0",
-    "@fesjs/plugin-layout": "^5.0.0",
+    "@fesjs/plugin-access": "^3.1.9",
+    "@fesjs/plugin-layout": "^5.4.3",
     "@fesjs/plugin-model": "^3.0.0",
     "@fesjs/plugin-enums": "^3.0.0",
     "@fesjs/fes-design": "^0.8.0",
@@ -27,4 +27,4 @@
     "core-js": "^3.29.1"
   },
   "private": true
-}
+}

packages/fes-builder-vite/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/builder-vite",
-    "version": "4.0.2",
+    "version": "4.0.5",
     "description": "@fesjs/builder-vite",
     "author": "qlin",
     "license": "MIT",
@@ -25,12 +25,12 @@
         "access": "public"
     },
     "peerDependencies": {
-        "@fesjs/fes": "^3.1.8",
+        "@fesjs/fes": "^3.1.12",
         "core-js": "^3.29.1"
     },
     "dependencies": {
         "@babel/core": "^7.23.3",
-        "@fesjs/utils": "^3.0.1",
+        "@fesjs/utils": "^3.0.3",
         "@rollup/pluginutils": "^5.1.0",
         "@vitejs/plugin-basic-ssl": "^1.0.2",
         "@vitejs/plugin-legacy": "^5.2.0",

packages/fes-builder-vite/src/commands/dev/getDevConfig.js

@@ -25,7 +25,7 @@ export default async (api, args) => {
         args: {},
     });
 
-    const isHTTPS = !!(process.env.HTTPS || args.https);
+    const isHTTPS = !!(process.env.HTTPS || args.https || api.config.viteOption.server?.https);
 
     const bundleConfig = deepmerge(getInnerCommonConfig(api), {
         mode: 'development',

packages/fes-builder-webpack/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/builder-webpack",
-    "version": "3.0.12",
+    "version": "3.1.0",
     "description": "@fesjs/builder-webpack",
     "author": "qlin",
     "license": "MIT",
@@ -26,7 +26,7 @@
         "access": "public"
     },
     "peerDependencies": {
-        "@fesjs/fes": "^3.1.10",
+        "@fesjs/fes": "^3.1.17",
         "core-js": "^3.29.1"
     },
     "dependencies": {
@@ -38,7 +38,7 @@
         "@babel/plugin-transform-runtime": "^7.23.2",
         "@babel/preset-env": "^7.23.2",
         "@babel/preset-typescript": "^7.23.2",
-        "@fesjs/utils": "^3.0.1",
+        "@fesjs/utils": "^3.0.3",
         "@vue/babel-plugin-jsx": "^1.2.2",
         "ajv": "^8.12.0",
         "autoprefixer": "^10.4.14",
@@ -52,7 +52,7 @@
         "fs-extra": "^11.1.1",
         "get-folder-size": "^2.0.1",
         "html-webpack-plugin": "^5.5.0",
-        "html-webpack-tags-plugin": "^3.0.0",
+        "html-webpack-tags-plugin": "^3.0.2",
         "less": "^4.1.3",
         "less-loader": "^11.1.0",
         "mini-css-extract-plugin": "^2.8.1",
@@ -66,7 +66,7 @@
         "webpack": "^5.90.3",
         "webpack-5-chain": "^8.0.1",
         "webpack-bundle-analyzer": "^4.4.0",
-        "webpack-dev-server": "^4.15.1",
-        "webpackbar": "^5.0.2"
+        "webpack-dev-server": "^5.1.0",
+        "webpackbar": "^7.0.0"
     }
 }

packages/fes-builder-webpack/src/plugins/commands/dev/connectHistoryMiddleware.js

@@ -1,19 +1,28 @@
-import { extname } from 'path';
+import { extname } from 'node:path';
 import historyFallback from 'connect-history-api-fallback';
 
 const ASSET_EXT_NAMES = ['.ico', '.png', '.jpg', '.jpeg', '.gif', '.svg'];
 
-const proxyMiddleware = (api) => (req, res, next) => {
-    const proxyConfig = api.config.proxy;
-    if (proxyConfig && Object.keys(proxyConfig).some((path) => req.url.startsWith(path))) {
-        return next();
-    }
-    if (ASSET_EXT_NAMES.includes(extname(req.url))) {
-        return next();
-    }
+function proxyMiddleware(api) {
+    return (req, res, next) => {
+        const proxyConfig = api.config.proxy;
+        if (proxyConfig) {
+            if (Array.isArray(proxyConfig)) {
+                if (proxyConfig.some(item => item.context.some(path => path && req.url.startsWith(path)))) {
+                    return next();
+                }
+            }
+            else if (Object.keys(proxyConfig).some(path => req.url.startsWith(path))) {
+                return next();
+            }
+        }
+        if (ASSET_EXT_NAMES.includes(extname(req.url))) {
+            return next();
+        }
 
-    const history = historyFallback();
-    history(req, res, next);
-};
+        const history = historyFallback();
+        history(req, res, next);
+    };
+}
 
 export default proxyMiddleware;

packages/fes-builder-webpack/src/plugins/commands/dev/devServer.js

@@ -1,6 +1,23 @@
-import WebpackDevServer from 'webpack-dev-server';
-import webpack from 'webpack';
 import { chalk } from '@fesjs/utils';
+import webpack from 'webpack';
+import WebpackDevServer from 'webpack-dev-server';
+
+function formatProxy(proxy) {
+    if (!proxy) {
+        return [];
+    }
+
+    if (Array.isArray(proxy)) {
+        return proxy;
+    }
+
+    return Object.keys(proxy).map((apiPath) => {
+        return {
+            context: [apiPath],
+            ...proxy[apiPath],
+        };
+    });
+}
 
 export function startDevServer({ webpackConfig, host, port, proxy, https, beforeMiddlewares, afterMiddlewares, customerDevServerConfig }) {
     const options = {
@@ -10,6 +27,7 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
         client: {
             logging: 'error',
             overlay: false,
+            progress: true,
             webSocketURL: {
                 hostname: host,
                 port,
@@ -27,12 +45,20 @@ export function startDevServer({ webpackConfig, host, port, proxy, https, before
         ...(customerDevServerConfig || {}),
         port,
         host,
-        proxy,
+        proxy: formatProxy(proxy),
     };
     const compiler = webpack(webpackConfig);
     const server = new WebpackDevServer(options, compiler);
-
-    console.log(chalk.green('Server: '), chalk.blue(`${options.server}://${options.host}:${options.port}`));
+    if (options.host === '0.0.0.0') {
+        // eslint-disable-next-line no-console
+        console.log(chalk.green('  ➜ Local: '), chalk.cyan(`${options.server}://127.0.0.1:${options.port}`));
+        // eslint-disable-next-line no-console
+        console.log(chalk.gray('  ➜ Network: '), chalk.gray(`${options.server}://${options.host}:${options.port}`));
+    }
+    else {
+        // eslint-disable-next-line no-console
+        console.log(chalk.green('  ➜ :Local: '), chalk.cyan(`${options.server}://${options.host}:${options.port}`));
+    }
     server.startCallback((err) => {
         if (err) {
             console.error(err);

packages/fes-builder-webpack/src/plugins/commands/dev/index.js

@@ -1,5 +1,6 @@
-import path from 'path';
-import fs from 'fs';
+import fs from 'node:fs';
+import path from 'node:path';
+import process from 'node:process';
 import { cleanTmpPathExceptCache, getBundleAndConfigs } from '../../common/buildDevUtils';
 import connectHistoryMiddleware from './connectHistoryMiddleware';
 

packages/fes-builder-webpack/src/plugins/common/webpackConfig/index.js

@@ -1,13 +1,13 @@
-import { join } from 'node:path';
 import { existsSync } from 'node:fs';
-import Config from 'webpack-5-chain';
+import { join } from 'node:path';
 import webpack from 'webpack';
+import Config from 'webpack-5-chain';
 import createCssWebpackConfig from './css';
-import getBabelOpts from './getBabelOpts';
-import createVueWebpackConfig from './vue';
 import createDefineWebpackConfig from './define';
-import createMinimizerWebpackConfig from './minimizer';
+import getBabelOpts from './getBabelOpts';
 import createHtmlWebpackConfig from './html';
+import createMinimizerWebpackConfig from './minimizer';
+import createVueWebpackConfig from './vue';
 
 const DEFAULT_EXCLUDE_NODE_MODULES = [
     'vue',
@@ -124,12 +124,14 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
     webpackConfig.module
         .rule('esm')
         .test(/\.m?jsx?$/)
-        .resolve.set('fullySpecified', false);
+        .resolve
+        .set('fullySpecified', false);
 
     webpackConfig.module
         .rule('js')
         .test(/\.(js|mjs|jsx|ts|tsx)$/)
-        .exclude.add((filepath) => {
+        .exclude
+        .add((filepath) => {
             // always transpile js in vue files
             if (/(\.vue|\.jsx)$/.test(filepath)) { return false; }
 
@@ -147,9 +149,11 @@ export default async function getConfig({ api, cwd, config, env, entry = {}, mod
         webpackConfig.module
             .rule('js-in-node_modules')
             .test(/\.(js|mjs)$/)
-            .include.add(/node_modules/)
+            .include
+            .add(/node_modules/)
             .end()
-            .exclude.add((filepath) => {
+            .exclude
+            .add((filepath) => {
                 if (transpileDepRegex && transpileDepRegex.test(filepath)) { return true; }
 
                 return false;

packages/fes-compiler/package.json

@@ -1,37 +1,36 @@
 {
-  "name": "@fesjs/compiler",
-  "version": "3.0.2",
-  "description": "@fesjs/compiler",
-  "main": "lib/index.js",
-  "files": [
-    "lib"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-compiler"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@babel/core": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/register": "^7.22.15",
-    "@fesjs/utils": "^3.0.1",
-    "commander": "^7.0.0",
-    "dotenv": "8.2.0",
-    "joi": "17.3.0",
-    "set-value": "3.0.2",
-    "tapable": "^2.2.0"
-  }
+    "name": "@fesjs/compiler",
+    "version": "3.0.6",
+    "description": "@fesjs/compiler",
+    "author": "qlin",
+    "license": "MIT",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-compiler"
+    },
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "main": "lib/index.js",
+    "files": [
+        "lib"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@babel/core": "^7.23.2",
+        "@babel/preset-env": "^7.23.2",
+        "@babel/register": "^7.22.15",
+        "@fesjs/utils": "^3.0.3",
+        "commander": "^7.0.0",
+        "dotenv": "8.2.0",
+        "joi": "17.3.0",
+        "tapable": "^2.2.0"
+    }
 }

packages/fes-compiler/src/config/utils/configUtils.js

@@ -1,17 +1,16 @@
 import { lodash } from '@fesjs/utils';
-import set from 'set-value';
 
 export function updateUserConfigWithKey({
     key,
     value,
-    userConfig
+    userConfig,
 }) {
-    set(userConfig, key, value);
+    lodash.set(userConfig, key, value);
 }
 
 export function getUserConfigWithKey({
     key,
-    userConfig
+    userConfig,
 }) {
     return lodash.get(userConfig, key);
 }

packages/fes-plugin-access/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/plugin-access",
-    "version": "3.1.4",
+    "version": "3.1.9",
     "description": "@fesjs/plugin-access",
     "main": "lib/index.js",
     "files": [
@@ -28,11 +28,11 @@
         "access": "public"
     },
     "dependencies": {
-        "@fesjs/utils": "^3.0.1",
+        "@fesjs/utils": "^3.0.3",
         "lodash-es": "^4.17.21"
     },
     "peerDependencies": {
-        "@fesjs/fes": "^3.1.9",
+        "@fesjs/fes": "^3.1.13",
         "vue": "^3.2.47",
         "vue-router": "^4.0.1"
     },

packages/fes-plugin-access/src/runtime/core.tpl

@@ -1,7 +1,7 @@
-import { reactive, unref, computed, inject } from "vue";
-import createDirective from "./createDirective";
+import { computed, reactive, unref } from "vue";
+import { isPlainObject } from "{{{ lodashPath }}}";
 import createComponent from "./createComponent";
-import {isPlainObject} from "{{{ lodashPath }}}";
+import createDirective from "./createDirective";
 
 function isPromise(obj) {
     return (
@@ -20,12 +20,23 @@ const state = reactive({
 const rolePromiseList = [];
 const accessPromiseList = [];
 
+// 预设的 accessId，且不会被移除
+const presetAccessIds = []
+const setPresetAccess = (access) => {
+    const accessIds = Array.isArray(access) ? access : [access];
+
+    presetAccessIds.push(...accessIds.filter(id => !presetAccessIds.includes(id)));
+}
+
 const getAllowAccessIds = () => {
+    const result = [...presetAccessIds, ...state.currentAccessIds];
+
     const roleAccessIds = state.roles[state.currentRoleId];
     if (Array.isArray(roleAccessIds) && roleAccessIds.length > 0) {
-        return state.currentAccessIds.concat(roleAccessIds);
+        result.push(...roleAccessIds);
     }
-    return state.currentAccessIds;
+
+    return result;
 };
 
 const _syncSetAccessIds = (promise) => {
@@ -134,8 +145,13 @@ export const install = (app) => {
     app.component("Access", createComponent(useAccess));
 };
 
+export const hasAccessSync = (path) => {
+    return match(unref(path), getAllowAccessIds());
+}
+
 export const access = {
     hasAccess,
+    hasAccessSync,
     isDataReady,
     setRole,
     getRole: () => {
@@ -144,12 +160,9 @@ export const access = {
     setAccess,
     match,
     getAccess: getAllowAccessIds,
+    setPresetAccess,
 };
 
-export const hasAccessSync = (path) => {
-    return match(unref(path), getAllowAccessIds());
-}
-
 export const useAccess = (path) => {
     const allowPageIds = computed(getAllowAccessIds);
     const result = computed(() => {

packages/fes-plugin-access/src/runtime/createDirective.js

@@ -13,7 +13,10 @@ export default function createDirective(useAccess) {
         beforeMount(el) {
             const ctx = {};
             ctx.watch = (path) => {
-                el._display = el._display || el.style.display;
+                // el._display = el._display || el.style.display; // 这种只能获取到行内样式 会导致保存不了组件加载时的初始display
+                if (!el._display) {
+                    el._display = window.getComputedStyle(el).display
+                }
                 const access = useAccess(path);
                 setDisplay(el, access);
                 return watch(access, () => {

packages/fes-plugin-access/types.d.ts

@@ -3,10 +3,14 @@ import type { Ref } from 'vue';
 
 export const access: {
     hasAccess: (accessId: string | number) => Promise<boolean>;
+    hasAccessSync: (accessId: string | number) => boolean;
     isDataReady: () => boolean;
     setRole: (roleId: string | Promise<string>) => void;
+    getRole: () => string;
     setAccess: (accessIds: Array<string | number> | Promise<Array<string | number>>) => void;
     getAccess: () => string[];
+    match: (path: string, accessIds: string[]) => boolean;
+    setPresetAccess: (accessId: string | string[]) => void;
 };
 
 export function useAccess(accessId: string | number): Ref<boolean>;

packages/fes-plugin-icon/package.json

@@ -1,38 +1,38 @@
 {
-  "name": "@fesjs/plugin-icon",
-  "version": "3.0.0",
-  "description": "@fesjs/plugin-icon",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-icon"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.0.0",
-    "vue": "^3.2.47"
-  },
-  "dependencies": {
-    "svgo": "^3.0.2"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-icon",
+    "version": "4.0.0",
+    "description": "@fesjs/plugin-icon",
+    "author": "qlin",
+    "license": "MIT",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-icon"
+    },
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.0.0",
+        "vue": "^3.2.47"
+    },
+    "dependencies": {
+        "svgo": "^3.0.2"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-icon/src/optimizeSvg.js

@@ -1,5 +1,5 @@
-import { extname, basename } from 'path';
-import { statSync, readFileSync } from 'fs';
+import { basename, extname } from 'node:path';
+import { readFileSync, statSync } from 'node:fs';
 import { optimize } from 'svgo';
 
 const presetDefault = [
@@ -15,7 +15,7 @@ const presetDefault = [
     {
         name: 'removeAttrs',
         params: {
-            attrs: '(fill|stroke|class)',
+            attrs: '(class)',
         },
     },
 ];

packages/fes-plugin-icon/src/runtime/Icon/Icon.jsx

@@ -1,8 +1,8 @@
 import { computed } from 'vue';
-// eslint-disable-next-line
+
 import icons from '../icons';
 
-const noop = () => {};
+function noop() {}
 
 export default {
     name: 'FesIcon',
@@ -19,9 +19,9 @@ export default {
         const svgStyle = computed(() =>
             props.rotate
                 ? {
-                      msTransform: `rotate(${props.rotate}deg)`,
-                      transform: `rotate(${props.rotate}deg)`,
-                  }
+                        msTransform: `rotate(${props.rotate}deg)`,
+                        transform: `rotate(${props.rotate}deg)`,
+                    }
                 : null,
         );
         const svgCls = computed(() => ({

packages/fes-plugin-icon/src/runtime/Icon/icon.less

@@ -29,6 +29,7 @@
     &[tabindex] {
         cursor: pointer;
     }
+
     &--spin {
         display: inline-block;
         animation: loadingCircle 1s infinite linear;
@@ -46,5 +47,5 @@
             transform: rotate(360deg);
         }
     }
-    
+
 }

packages/fes-plugin-layout/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/plugin-layout",
-    "version": "5.1.10",
+    "version": "5.4.6",
     "description": "@fesjs/plugin-layout",
     "author": "harrywan",
     "license": "MIT",
@@ -28,14 +28,15 @@
         "access": "public"
     },
     "peerDependencies": {
-        "@fesjs/fes": "^3.1.9",
+        "@fesjs/fes": "^3.1.17",
         "@fesjs/fes-design": ">=0.7.0",
         "vue": "^3.2.47",
         "vue-router": "^4.0.1"
     },
     "dependencies": {
-        "@fesjs/utils": "^3.0.1",
-        "@vueuse/core": "^10.7.0"
+        "@fesjs/utils": "^3.0.3",
+        "@vueuse/core": "^10.7.0",
+        "dompurify": "^3.1.7"
     },
     "typings": "./types.d.ts"
 }

packages/fes-plugin-layout/src/index.js

@@ -30,6 +30,13 @@ export default (api) => {
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');
 
+    api.register({
+        key: 'addExtraLocales',
+        fn: () => [
+            join(api.paths.absTmpPath, namespace, 'locales'),
+        ],
+    });
+
     api.onGenerateFiles(async () => {
         // .fes配置
         const userConfig = {
@@ -115,6 +122,7 @@ export default (api) => {
         return [
             {
                 path: '/',
+                name: 'fesLayout',
                 component: winPath(join(api.paths.absTmpPath || '', absFilePath)),
                 children: routes,
             },

packages/fes-plugin-layout/src/runtime/helpers/fillMenu.js

@@ -1,4 +1,4 @@
-const getMetaByName = (config, name) => {
+function getMetaByName(config, name) {
     let res = {};
     if (Array.isArray(config)) {
         for (let i = 0; i < config.length; i++) {
@@ -17,9 +17,9 @@ const getMetaByName = (config, name) => {
         }
     }
     return res;
-};
+}
 
-const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
+function fillMenuByRoute(menuConfig, routeConfig, dep = 0) {
     dep += 1;
     if (dep > 3) {
         console.warn('[plugin-layout]: 菜单层级最好不要超出三层！');
@@ -44,6 +44,6 @@ const fillMenuByRoute = (menuConfig, routeConfig, dep = 0) => {
         });
     }
     return arr;
-};
+}
 
 export default fillMenuByRoute;

packages/fes-plugin-layout/src/runtime/helpers/pluginLocale.js

@@ -1,6 +1,6 @@
 import { plugin } from '@@/core/coreExports';
 
-export const transTitle = (name) => {
+export function transTitle(name) {
     if (!/^\$\S+$/.test(name)) {
         return name;
     }
@@ -10,10 +10,10 @@ export const transTitle = (name) => {
         return t(name.slice(1));
     }
     return name;
-};
+}
 
-export const transform = (menus) =>
-    menus.map((menu) => {
+export function transform(menus) {
+    return menus.map((menu) => {
         const copy = {
             ...menu,
             label: transTitle(menu.label),
@@ -23,3 +23,4 @@ export const transform = (menus) =>
         }
         return copy;
     });
+}

packages/fes-plugin-layout/src/runtime/helpers/svg.js

@@ -1,8 +1,10 @@
+import DOMPurify from 'dompurify';
+
 const isStr = function (str) {
     return typeof str === 'string';
 };
 
-export const isValid = (elm) => {
+export function isValid(elm) {
     if (elm.nodeType === 1) {
         if (elm.nodeName.toLowerCase() === 'script') {
             return false;
@@ -22,11 +24,11 @@ export const isValid = (elm) => {
         }
     }
     return true;
-};
+}
 
-export const validateContent = (svgContent) => {
+export function validateContent(svgContent) {
     const div = document.createElement('div');
-    div.innerHTML = svgContent;
+    div.innerHTML = DOMPurify.sanitize(svgContent);
 
     // setup this way to ensure it works on our buddy IE
     for (let i = div.childNodes.length - 1; i >= 0; i--) {
@@ -46,4 +48,4 @@ export const validateContent = (svgContent) => {
         }
     }
     return '';
-};
+}

packages/fes-plugin-layout/src/runtime/helpers/utils.js

@@ -1,8 +1,9 @@
-export const flatNodes = (nodes = []) =>
-    nodes.reduce((res, node) => {
+export function flatNodes(nodes = []) {
+    return nodes.reduce((res, node) => {
         res.push(node);
         if (node.children) {
             res = res.concat(flatNodes(node.children));
         }
         return res;
     }, []);
+}

packages/fes-plugin-layout/src/runtime/index.js

@@ -1,3 +1,2 @@
 export { default as Page } from './views/page.vue';
-export { useTabTitle } from './useTitle';
 export * from './useLayout';

packages/fes-plugin-layout/src/runtime/locales/layout/en-US.js

@@ -0,0 +1,6 @@
+export default {
+    pluginLayout: {
+        closeOtherPage: 'Close Other Page',
+        reloadPage: 'Reload Page',
+    },
+};

packages/fes-plugin-layout/src/runtime/locales/layout/zh-CN.js

@@ -0,0 +1,6 @@
+export default {
+    pluginLayout: {
+        closeOtherPage: '关闭其他页签',
+        reloadPage: '刷新当前页签',
+    },
+};

packages/fes-plugin-layout/src/runtime/runtime.js.tpl

@@ -8,13 +8,8 @@ if (!accessApi) {
 
 export const access = (memo) => {
     const runtimeConfig = getConfig();
-    const accessIds = accessApi.getAccess();
-    if (!accessIds.includes('/403')) {
-        accessApi.setAccess(accessIds.concat('/403'));
-    }
-    if (!accessIds.includes('/404')) {
-        accessApi.setAccess(accessIds.concat('/404'));
-    }
+    accessApi.setPresetAccess(['/403', '/404']);
+
     return {
         unAccessHandler({ router, to, from, next }) {
             if (runtimeConfig.unAccessHandler && typeof runtimeConfig.unAccessHandler === 'function') {

packages/fes-plugin-layout/src/runtime/useLayout.js

@@ -1,12 +1,31 @@
-import { createSharedComposable } from '@vueuse/core';
-import { shallowReactive } from 'vue';
+import { inject, ref } from 'vue';
 
-function _useLayout() {
-    const state = shallowReactive({
-        closeTab: () => {},
-    });
+import { useRoute } from '@@/core/coreExports';
 
-    return state;
+export const PLUGIN_LAYOUT_TITLE_KEY = Symbol('PLUGIN_LAYOUT_TITLE_KEY');
+
+export const PLUGIN_LAYOUT_KEY = Symbol('PLUGIN_LAYOUT_KEY');
+
+export function useTabTitle(title) {
+    const titleMap = inject(PLUGIN_LAYOUT_TITLE_KEY);
+    if (!titleMap) {
+        console.warn('[plugin-layout]: 未正确获取到titleMap');
+        return;
+    }
+    const route = useRoute();
+    const titleRef = ref(title);
+    const path = route.path;
+
+    titleMap.set(path, titleRef);
+
+    return titleRef;
 }
 
-export const useLayout = createSharedComposable(_useLayout);
+export function useLayout(options) {
+    const parent = inject(PLUGIN_LAYOUT_KEY, { reloadTab: () => void 0, closeTab: () => void 0 });
+    const titleRef = useTabTitle(options?.title);
+    return {
+        ...parent,
+        title: titleRef,
+    };
+}

packages/fes-plugin-layout/src/runtime/useTitle.js

@@ -1,18 +0,0 @@
-import { reactive, ref } from 'vue';
-import { useRoute } from '@@/core/coreExports';
-
-const cache = reactive(new Map());
-
-export const getTitle = path => cache.get(path);
-
-export const deleteTitle = patch => cache.delete(patch);
-
-export function useTabTitle(title) {
-    const route = useRoute();
-    const titleRef = ref(title);
-    const path = route.path;
-
-    cache.set(path, titleRef);
-
-    return titleRef;
-}

packages/fes-plugin-layout/src/runtime/views/403.vue

@@ -1,8 +1,10 @@
 <template>
-    <Wrapper :iconSrc="img403" title="没有访问权限，请联系管理人员" subTitle="" />
+    <Wrapper :icon-src="img403" :title="title" sub-title="" />
 </template>
+
 <script>
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
+import getConfig from '../helpers/getConfig';
 import img403 from '../assets/403.png';
 import Wrapper from './components/Wrapper.vue';
 
@@ -11,8 +13,13 @@ export default defineComponent({
         Wrapper,
     },
     setup() {
+        const config = getConfig();
+        const title = computed(() => {
+            return config['403']?.title || '没有访问权限，请联系管理人员';
+        });
         return {
             img403,
+            title,
         };
     },
 });

packages/fes-plugin-layout/src/runtime/views/404.vue

@@ -1,9 +1,11 @@
 <template>
-    <Wrapper :iconSrc="img404" title="哎呀！这个页面找不到了" subTitle="" />
+    <Wrapper :icon-src="img404" :title="title" sub-title="" />
 </template>
+
 <script>
-import { defineComponent } from 'vue';
+import { computed, defineComponent } from 'vue';
 import img404 from '../assets/404.png';
+import getConfig from '../helpers/getConfig';
 import Wrapper from './components/Wrapper.vue';
 
 export default defineComponent({
@@ -11,8 +13,14 @@ export default defineComponent({
         Wrapper,
     },
     setup() {
+        const config = getConfig();
+        const title = computed(() => {
+            return config['404']?.title || '哎呀！这个页面找不到了';
+        });
+
         return {
             img404,
+            title,
         };
     },
 });

packages/fes-plugin-layout/src/runtime/views/BaseLayout.vue

@@ -11,8 +11,8 @@
             >
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <LayoutMenu
@@ -58,8 +58,8 @@
                     <div>
                         <div class="layout-logo">
                             <img v-if="logo" :src="logo" class="logo-img">
-                            <div v-if="title" class="logo-name">
-                                {{ title }}
+                            <div v-if="transformedTitle" class="logo-name">
+                                {{ transformedTitle }}
                             </div>
                         </div>
                         <LayoutMenu
@@ -98,8 +98,8 @@
             <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <LayoutMenu
@@ -127,12 +127,65 @@
                 </FFooter>
             </FLayout>
         </template>
+        <template v-else-if="currentNavigation === 'top-left-right'">
+            <FHeader ref="headerRef" class="layout-header" :inverted="theme === 'dark'" :fixed="currentFixedHeaderRef">
+                <div class="layout-logo">
+                    <img v-if="logo" :src="logo" class="logo-img">
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
+                    </div>
+                </div>
+                <LayoutMenu
+                    class="layout-menu"
+                    :menus="rootMenus"
+                    mode="horizontal"
+                    :inverted="theme === 'dark'"
+                />
+                <div class="layout-header-custom">
+                    <slot name="renderCustom" :menus="menus" />
+                </div>
+                <template v-if="locale">
+                    <slot name="locale" />
+                </template>
+            </FHeader>
+            <FLayout v-if="activeSubMenus.length" :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FAside v-model:collapsed="collapsedRef" :inverted="theme === 'dark'" :fixed="isFixedSidebar" :width="`${sideWidth}px`" collapsible class="layout-aside">
+                    <LayoutMenu
+                        class="layout-menu"
+                        :menus="activeSubMenus"
+                        :collapsed="collapsedRef"
+                        mode="vertical"
+                        :expanded-keys="menuProps?.expandedKeys"
+                        :default-expand-all="menuProps?.defaultExpandAll"
+                        :accordion="menuProps?.accordion"
+                        :inverted="theme === 'dark'"
+                    />
+                </FAside>
+
+                <FLayout :embedded="!multiTabs" :fixed="isFixedSidebar" :style="sideStyleRef">
+                    <FMain class="layout-main">
+                        <MultiTabProvider :multi-tabs="multiTabs" />
+                    </FMain>
+                    <FFooter v-if="footer" class="layout-footer">
+                        {{ footer }}
+                    </FFooter>
+                </FLayout>
+            </FLayout>
+            <FLayout v-else :embedded="!multiTabs" :fixed="currentFixedHeaderRef" :style="headerStyleRef">
+                <FMain class="layout-main">
+                    <MultiTabProvider :multi-tabs="multiTabs" />
+                </FMain>
+                <FFooter v-if="footer" class="layout-footer">
+                    {{ footer }}
+                </FFooter>
+            </FLayout>
+        </template>
         <template v-else-if="currentNavigation === 'mixin'">
             <FHeader ref="headerRef" class="layout-header" :fixed="currentFixedHeaderRef" :inverted="theme === 'dark'">
                 <div class="layout-logo">
                     <img v-if="logo" :src="logo" class="logo-img">
-                    <div v-if="title" class="logo-name">
-                        {{ title }}
+                    <div v-if="transformedTitle" class="logo-name">
+                        {{ transformedTitle }}
                     </div>
                 </div>
                 <div class="layout-header-custom">
@@ -177,6 +230,8 @@ import { useRoute, useRouter } from '@@/core/coreExports';
 import { FAside, FFooter, FHeader, FLayout, FMain } from '@fesjs/fes-design';
 import { computed, nextTick, ref, watch } from 'vue';
 import defaultLogo from '../assets/logo.png';
+import { flatNodes } from '../helpers/utils';
+import { transTitle } from '../helpers/pluginLocale';
 import LayoutMenu from './Menu.vue';
 import MultiTabProvider from './MultiTabProvider.vue';
 
@@ -215,7 +270,7 @@ export default {
         },
         navigation: {
             type: String,
-            default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）
+            default: 'side', // side 左右（上/下）、 top 上/下、 mixin 上/下（左/右）、top-left-right 上/下（左/右）
         },
         navigationOnError: {
             type: [String, Function], // 403, 404 时的 navigation
@@ -248,6 +303,10 @@ export default {
         const route = useRoute();
         const router = useRouter();
 
+        const transformedTitle = computed(() => {
+            return transTitle(props.title);
+        });
+
         const currentNavigation = computed(() => {
             if (route.meta.layout && route.meta.layout.navigation !== undefined) {
                 return route.meta.layout.navigation;
@@ -282,6 +341,56 @@ export default {
             },
         );
 
+        const rootMenus = computed(() => {
+            return props.menus.map((menu) => {
+                const { children, match, ...others } = menu;
+                let { path, query, params } = menu;
+                const flatChildren = flatNodes(children || []);
+                if (!menu.path) {
+                    const firstChild = flatChildren.find(item => item.path);
+                    if (firstChild) {
+                        path = firstChild.path;
+                        query = firstChild.query;
+                        params = firstChild.params;
+                    }
+                }
+                return {
+                    ...others,
+                    path,
+                    query,
+                    params,
+                    match: (match || [])
+                        .concat(...flatChildren.map(item => []
+                            .concat(item.match || [])
+                            .concat(item.path)),
+                        ),
+                    _children: children,
+                };
+            });
+        });
+
+        const activeRootMenu = computed(() => {
+            const matchRootMenus = rootMenus.value.filter((menu) => {
+                const match = menu.match;
+                if (!match || !Array.isArray(match)) {
+                    return false;
+                }
+                return match.some((str) => {
+                    const reg = new RegExp(str);
+                    return reg.test(route.path);
+                });
+            });
+
+            return matchRootMenus[0] ?? null;
+        });
+
+        const activeSubMenus = computed(() => {
+            if (!activeRootMenu.value) {
+                return [];
+            }
+            return activeRootMenu.value._children || [];
+        });
+
         return {
             headerRef,
             headerHeightRef,
@@ -291,6 +400,9 @@ export default {
             headerStyleRef,
             sideStyleRef,
             currentNavigation,
+            rootMenus,
+            activeSubMenus,
+            transformedTitle,
         };
     },
 };

packages/fes-plugin-layout/src/runtime/views/Menu.vue

@@ -1,7 +1,7 @@
 <template>
     <FMenu
-        v-model:expandedKeys="expandedKeysRef"
-        :model-value="activePath"
+        v-model:expanded-keys="expandedKeysRef"
+        v-model="activeMenu"
         :inverted="inverted"
         :mode="mode"
         :options="transformedMenus"
@@ -12,9 +12,9 @@
 </template>
 
 <script>
-import { computed, h, ref, watch } from 'vue';
-import { FMenu } from '@fesjs/fes-design';
 import { useRoute, useRouter } from '@@/core/coreExports';
+import { FMenu } from '@fesjs/fes-design';
+import { computed, h, nextTick, ref, watch } from 'vue';
 import { transform as transformByAccess } from '../helpers/pluginAccess';
 import { transform as transformByLocale } from '../helpers/pluginLocale';
 import { flatNodes } from '../helpers/utils';
@@ -79,6 +79,7 @@ export default {
         const router = useRouter();
         const transformedMenus = computed(() => transformByLocale(transformByAccess(transform(props.menus))));
         const menuArray = computed(() => flatNodes(transformedMenus.value));
+
         const activePath = computed(() => {
             const matchMenus = menuArray.value.filter((menu) => {
                 const match = menu.match;
@@ -96,6 +97,12 @@ export default {
             return matchMenus[0].path;
         });
 
+        const activeMenu = ref(activePath.value);
+
+        watch(activePath, () => {
+            activeMenu.value = activePath.value;
+        });
+
         const expandedKeysRef = ref(props.expandedKeys);
 
         watch(
@@ -125,11 +132,32 @@ export default {
 
         const onMenuClick = (e) => {
             const path = e.value;
-            if (/^https?:\/\//.test(path)) {
+            const currentMenu = menuArray.value.find(item => item.value === path);
+            if (currentMenu._blank) {
+                const resolved = router.resolve({
+                    path,
+                    query: currentMenu?.query || {},
+                    params: currentMenu?.params || {},
+                });
+                // TODO 有受控模式之后优化
+                nextTick(() => {
+                    activeMenu.value = activePath.value;
+                });
+                window.open(resolved.href, '_blank');
+            }
+            else if (/^https?:\/\//.test(path)) {
+                // TODO 有受控模式之后优化
+                nextTick(() => {
+                    activeMenu.value = activePath.value;
+                });
                 window.open(path, '_blank');
             }
             else if (/^\//.test(path)) {
-                router.push(path);
+                router.push({
+                    path,
+                    query: currentMenu?.query || {},
+                    params: currentMenu?.params || {},
+                });
             }
             else {
                 console.warn('[plugin-layout]: 菜单的path只能是以http(s)开头的网址或者路由地址');
@@ -137,6 +165,7 @@ export default {
         };
 
         return {
+            activeMenu,
             activePath,
             expandedKeysRef,
             transformedMenus,

packages/fes-plugin-layout/src/runtime/views/MenuIcon.vue

@@ -1,11 +1,11 @@
 <script lang="jsx">
-import { ref, onBeforeMount, isVNode } from 'vue';
-// eslint-disable-next-line import/extensions
+import { isVNode, onBeforeMount, ref } from 'vue';
+
 import Icons from '../icons';
 import { validateContent } from '../helpers/svg';
 
 const urlReg = /^((https?|ftp|file):\/\/)?([\da-z.-]+)\.([a-z.]{2,6})([/\w .-]*)*\/?$/;
-const isUrlResource = (name) => urlReg.test(name) || name.includes('.svg');
+const isUrlResource = name => urlReg.test(name) || name.includes('.svg');
 
 export default {
     props: {
@@ -25,7 +25,8 @@ export default {
                             });
                         }
                     });
-                } else {
+                }
+                else {
                     AIconComponent.value = Icons[props.icon];
                 }
             }
@@ -39,13 +40,14 @@ export default {
                 return <AIconComponent.value />;
             }
             if (AText.value) {
-                return <span class={'fes-layout-icon'} innerHTML={AText.value}></span>;
+                return <span class="fes-layout-icon" innerHTML={AText.value}></span>;
             }
             return null;
         };
     },
 };
 </script>
+
 <style>
 .fes-layout-icon {
     display: inline-block;

packages/fes-plugin-layout/src/runtime/views/MultiTabProvider.vue

@@ -7,12 +7,12 @@
             type="card"
             class="layout-content-tabs"
             @close="handleCloseTab"
-            @update:modelValue="switchPage"
+            @update:model-value="switchPage"
         >
             <FTabPane v-for="page in pageList" :key="page.path" :value="page.path" :closable="pageList.length > 1">
                 <template #tab>
                     {{ page.title }}
-                    <ReloadOutlined v-show="route.path === page.path" class="layout-tabs-close-icon" @click="reloadPage(page.path)" />
+                    <ReloadOutlined v-if="page.tabReload" v-show="route.path === page.path" class="layout-tabs-close-icon" @click="reloadPage(page.path)" />
                 </template>
             </FTabPane>
             <template #suffix>
@@ -27,13 +27,12 @@
 </template>
 
 <script>
-import { computed, ref, unref } from 'vue';
+import { computed, provide, reactive, ref, unref } from 'vue';
 import { FDropdown, FTabPane, FTabs } from '@fesjs/fes-design';
 import { MoreOutlined, ReloadOutlined } from '@fesjs/fes-design/icon';
-import { useRoute, useRouter } from '@@/core/coreExports';
+import { plugin, useRoute, useRouter } from '@@/core/coreExports';
 import { transTitle } from '../helpers/pluginLocale';
-import { deleteTitle, getTitle } from '../useTitle';
-import { useLayout } from '../useLayout';
+import { PLUGIN_LAYOUT_KEY, PLUGIN_LAYOUT_TITLE_KEY } from '../useLayout';
 import Page from './page.vue';
 
 let i = 0;
@@ -54,7 +53,14 @@ export default {
         const pageRef = ref();
         const route = useRoute();
         const router = useRouter();
-        const layoutState = useLayout();
+
+        const titleCache = reactive(new Map());
+
+        provide(PLUGIN_LAYOUT_TITLE_KEY, titleCache);
+
+        const getTitle = path => titleCache.get(path);
+
+        const deleteTitle = patch => titleCache.delete(patch);
 
         const createPage = (_route) => {
             const computedTitle = computed(() => {
@@ -67,30 +73,50 @@ export default {
                 name: _route.meta.name ?? _route.name,
                 title: computedTitle,
                 key: getKey(),
+                tabReload: _route.meta.tabReload ?? true,
             };
         };
 
         const pageList = ref([createPage(router.currentRoute.value)]);
-        const actions = [
-            {
-                value: 'closeOtherPage',
-                label: '关闭其他页签',
-            },
-            {
-                value: 'reloadPage',
-                label: '刷新当前页签',
-            },
-        ];
+
+        const actions = computed(() => {
+            const sharedLocale = plugin.getShared('locale');
+            if (sharedLocale) {
+                const { t } = sharedLocale.locale;
+                return [
+                    {
+                        value: 'closeOtherPage',
+                        label: t('pluginLayout.closeOtherPage'),
+                    },
+                    {
+                        value: 'reloadPage',
+                        label: t('pluginLayout.reloadPage'),
+                    },
+                ];
+            }
+            return [
+                {
+                    value: 'closeOtherPage',
+                    label: '关闭其他页签',
+                },
+                {
+                    value: 'reloadPage',
+                    label: '刷新当前页签',
+                },
+            ];
+        });
 
         const findPage = path => pageList.value.find(item => unref(item.path) === unref(path));
 
         router.beforeEach((to) => {
             const page = findPage(to.path);
-            if (!page)
+            if (!page) {
                 pageList.value = [...pageList.value, createPage(to)];
+            }
 
-            else
+            else {
                 page.route = to;
+            }
 
             return true;
         });
@@ -109,15 +135,20 @@ export default {
         const handleCloseTab = async (targetKey) => {
             targetKey = targetKey || route.path;
             const selectedPage = findPage(targetKey);
+            if (!selectedPage) {
+                return;
+            }
             const list = [...pageList.value];
             const index = list.indexOf(selectedPage);
             if (route.path === selectedPage.path) {
                 if (list.length > 1) {
-                    if (list.length - 1 === index)
+                    if (list.length - 1 === index) {
                         await switchPage(list[index - 1].path);
+                    }
 
-                    else
+                    else {
                         await switchPage(list[index + 1].path);
+                    }
                 }
             }
             list.splice(index, 1);
@@ -125,12 +156,12 @@ export default {
             pageRef.value.removeKeepAlive(selectedPage.name);
             deleteTitle(selectedPage.path);
         };
-        layoutState.closeTab = handleCloseTab;
 
         const reloadPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
-            if (selectedPage)
+            if (selectedPage) {
                 selectedPage.key = getKey();
+            }
         };
         const closeOtherPage = (path) => {
             const selectedPage = findPage(path || unref(route.path));
@@ -139,8 +170,9 @@ export default {
         };
         const getPageKey = (_route) => {
             const selectedPage = findPage(_route.path);
-            if (selectedPage)
+            if (selectedPage) {
                 return selectedPage.key;
+            }
 
             return '';
         };
@@ -156,6 +188,11 @@ export default {
             }
         };
 
+        provide(PLUGIN_LAYOUT_KEY, {
+            closeTab: handleCloseTab,
+            reloadTab: reloadPage,
+        });
+
         return {
             pageRef,
             route,

packages/fes-plugin-layout/types.d.ts

@@ -22,12 +22,14 @@ interface Menu {
     children?: Menu[];
 }
 
-type Navigation = 'side' | 'mixin' | 'top' | 'left-right';
+type Navigation = 'side' | 'mixin' | 'top' | 'left-right' | 'top-left';
 
 export const Page: Component;
 
 export function useTabTitle(title: string | Ref<string>): void;
 
+export function useLayout(options: { title?: string }): { title: Ref<string>; reloadTab: () => void; closeTab: () => void };
+
 interface LayoutRuntimeConfig {
     footer?: string;
     theme?: 'dark' | 'light';

packages/fes-plugin-locale/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/plugin-locale",
-    "version": "4.2.2",
+    "version": "4.4.0",
     "description": "@fesjs/plugin-locale",
     "main": "lib/index.js",
     "files": [
@@ -28,12 +28,12 @@
         "access": "public"
     },
     "dependencies": {
-        "@fesjs/utils": "^3.0.1",
+        "@fesjs/utils": "^3.0.3",
         "vue-i18n": "^9.0.0",
         "lodash-es": "^4.17.21"
     },
     "peerDependencies": {
-        "@fesjs/fes": "^3.1.9",
+        "@fesjs/fes": "^3.1.12",
         "@fesjs/fes-design": ">=0.7.0",
         "vue": "^3.2.47"
     },

packages/fes-plugin-locale/src/index.js

@@ -1,5 +1,5 @@
-import { readFileSync } from 'fs';
-import { join } from 'path';
+import { readFileSync } from 'node:fs';
+import { join } from 'node:path';
 import { name } from '../package.json';
 
 const namespace = 'plugin-locale';
@@ -24,6 +24,8 @@ export default (api) => {
 
     api.addRuntimePluginKey(() => 'locale');
 
+    api.addRuntimePluginKey(() => 'onLocaleChange');
+
     const absoluteFilePath = join(namespace, 'core.js');
 
     const absRuntimeFilePath = join(namespace, 'runtime.js');
@@ -32,10 +34,17 @@ export default (api) => {
         return join(api.paths.absSrcPath, api.config.singular ? 'locale' : 'locales');
     }
 
+    api.register({
+        key: 'addExtraLocales',
+        fn: () => [
+            getLocaleFileBasePath(),
+        ],
+    });
+
     // 监听 locale 文件改变，重新生成文件
     api.addTmpGenerateWatcherPaths(getLocaleFileBasePath);
 
-    api.onGenerateFiles(() => {
+    api.onGenerateFiles(async () => {
         // .fes配置
         const userConfig = {
             locale: 'zh-CN', // default locale
@@ -45,9 +54,13 @@ export default (api) => {
             ...api.config.locale,
         };
 
-        const localeConfigFileBasePath = getLocaleFileBasePath();
+        const additionalLocales = await api.applyPlugins({
+            key: 'addExtraLocales',
+            type: api.ApplyPluginsType.add,
+            initialValue: [],
+        });
 
-        const { files, locales } = getLocales(localeConfigFileBasePath);
+        const { files, locales } = getLocales(additionalLocales);
 
         const { baseNavigator, ...otherConfig } = userConfig;
 
@@ -55,7 +68,7 @@ export default (api) => {
             path: join(namespace, 'locales.js'),
             content: Mustache.render(readFileSync(join(__dirname, 'runtime/locales.js.tpl'), 'utf-8'), {
                 REPLACE_IMPORTS: files,
-                REPLACE_LOCALES: locales.map((item) => ({
+                REPLACE_LOCALES: locales.map(item => ({
                     locale: item.locale,
                     importNames: item.importNames.join(', '),
                 })),

packages/fes-plugin-locale/src/runtime/core.js.tpl

@@ -8,7 +8,7 @@
 import { isRef, unref } from 'vue';
 import { createI18n, useI18n } from '{{{ VUE_I18N_PATH }}}';
 import locales from './locales'
-
+import { plugin, ApplyPluginsType } from '@@/core/coreExports';
 
 const defaultOptions = {{{REPLACE_DEFAULT_OPTIONS}}};
 
@@ -19,18 +19,22 @@ const getDefaultLocale = () => {
     if (fes_locale) {
         return {
             locale: fes_locale,
-            fallbackLocale: fes_locale,
+            fallbackLocale: defaultOptions.fallbackLocale,
         };
     }
     if (BASE_NAVIGATOR) {
-        return {
-            locale: window.navigator.language,
-            fallbackLocale: window.navigator.language,
-        };
+        const keys = locales.map(item=> item.locale);
+        const findKey = keys.find(item=> item.includes(window.navigator.language))
+        if(findKey){
+            return {
+                locale: findKey,
+                fallbackLocale: defaultOptions.fallbackLocale,
+            };
+        }
     }
     return {
-        locale: 'zh-CN',
-        fallbackLocale: 'zh-CN',
+        locale: defaultOptions.locale,
+        fallbackLocale: defaultOptions.fallbackLocale,
     };
 };
 
@@ -47,6 +51,8 @@ const i18n = createI18n({
     messages,
 });
 
+const t = i18n.global.t;
+
 window.localStorage.setItem("fes_locale", unref(i18n.global.locale));
 const setLocale = ({ locale }) => {
     if (isRef(i18n.global.locale)) {
@@ -55,6 +61,11 @@ const setLocale = ({ locale }) => {
         i18n.global.locale = locale;
     }
     window.localStorage.setItem("fes_locale", locale);
+    plugin.applyPlugins({
+        key: 'onLocaleChange',
+        type: ApplyPluginsType.event,
+        args: { i18n, t, locale: unref(i18n.global.locale) },
+    });
 };
 
 const getLocale = () => {
@@ -78,19 +89,20 @@ const getAllLocales = () => {
 
 const install = (app) => {
     app.use(i18n);
+    plugin.applyPlugins({
+        key: 'onLocaleChange',
+        type: ApplyPluginsType.event,
+        args: { i18n, t, locale: unref(i18n.global.locale) },
+    });
 };
 
-const t = (key) => {
-    return i18n.global.t(key)
-}
-
 const locale = {
     setLocale,
     getLocale,
     addLocale,
     getAllLocales,
     messages,
-    t
+    t,
 };
 
 export { useI18n, locale, install };

packages/fes-plugin-locale/src/runtime/langUConfigMap.js

@@ -126,7 +126,7 @@ export default {
         title: 'Nyelv',
     },
     'hy-AM': {
-        lang: 'hu-HU',
+        lang: 'hy-AM',
         label: 'Հայերեն',
         icon: '🇦🇲',
         title: 'Լեզու',
@@ -162,7 +162,7 @@ export default {
         title: 'Ziman',
     },
     'kn-IN': {
-        lang: 'zh-TW',
+        lang: 'kn-IN',
         label: 'ಕನ್ನಡ',
         icon: '🇮🇳',
         title: 'ಭಾಷೆ',

packages/fes-plugin-locale/src/runtime/runtime.js

@@ -1,6 +1,6 @@
 import { plugin } from '@@/core/coreExports';
-// eslint-disable-next-line import/extensions
-import { useI18n, locale, install } from './core';
+
+import { install, locale, useI18n } from './core';
 import SelectLang from './views/SelectLang.vue';
 
 // 共享出去

packages/fes-plugin-locale/src/runtime/views/SelectLang.vue

@@ -1,11 +1,11 @@
 <template>
-    <FTooltip v-model="isOpened" popperClass="lang-popper" mode="popover">
+    <FTooltip v-model="isOpened" popper-class="lang-popper" mode="popover">
         <div class="lang-icon">
             <LanguageOutlined />
         </div>
         <template #content>
             <FScrollbar height="274" class="lang-container">
-                <div v-for="item in configs" :key="item.lang" :class="['lang-option', item.lang === locale && 'is-selected']" @click="handleSelect(item)">
+                <div v-for="item in configs" :key="item.lang" class="lang-option" :class="[item.lang === locale && 'is-selected']" @click="handleSelect(item)">
                     <span>{{ item.icon }}</span>
                     <span>{{ item.label }}</span>
                 </div>
@@ -15,12 +15,12 @@
 </template>
 
 <script>
-import { FTooltip, FScrollbar } from '@fesjs/fes-design';
+import { FScrollbar, FTooltip } from '@fesjs/fes-design';
 import { LanguageOutlined } from '@fesjs/fes-design/icon';
 import { useI18n } from 'vue-i18n';
 import { computed, ref } from 'vue';
 import langUConfigMap from '../langUConfigMap';
-// eslint-disable-next-line import/extensions
+
 import { locale as _locale } from '../core';
 
 export default {
@@ -55,11 +55,13 @@ export default {
     },
 };
 </script>
+
 <style>
 .fes-tooltip.fes-tooltip-popover.lang-popper {
     padding: 0;
 }
 </style>
+
 <style lang="less" scoped>
 .lang-icon {
     display: flex;

packages/fes-plugin-locale/src/utils/index.js

@@ -1,4 +1,4 @@
-import { join, basename } from 'path';
+import { basename, join } from 'node:path';
 import { glob, winPath } from '@fesjs/utils';
 
 const ignore = /\.(d\.ts|\.test\.(js|ts))$/;
@@ -15,30 +15,32 @@ const getRouteName = function (path) {
         .replace(/\[...([a-zA-Z]*)\]/, 'FUZZYMATCH-$1');
 };
 
-export function getLocales(cwd) {
+export function getLocales(cwdArray) {
     const map = {};
     const files = [];
-    glob.sync('**/*.js', {
-        cwd,
-    })
-        .filter((file) => !ignore.test(file))
-        .forEach((fileName) => {
-            const locale = basename(fileName, '.js');
-            const importName = getRouteName(fileName).replace('.js', '');
-            const result = {
-                importName,
-                // import语法的路径，必须处理win
-                path: winPath(join(cwd, fileName)),
-            };
-            files.push(result);
-            if (!map[locale]) {
-                map[locale] = [];
-            }
-            map[locale].push(importName);
-        });
+    cwdArray.forEach((cwd) => {
+        glob.sync('**/*.js', {
+            cwd,
+        })
+            .filter(file => !ignore.test(file))
+            .forEach((fileName) => {
+                const locale = basename(fileName, '.js');
+                const importName = getRouteName(fileName).replace('.js', '');
+                const result = {
+                    importName,
+                    // import语法的路径，必须处理win
+                    path: winPath(join(cwd, fileName)),
+                };
+                files.push(result);
+                if (!map[locale]) {
+                    map[locale] = [];
+                }
+                map[locale].push(importName);
+            });
+    });
 
     return {
-        locales: Object.keys(map).map((key) => ({ locale: key, importNames: map[key] })),
+        locales: Object.keys(map).map(key => ({ locale: key, importNames: map[key] })),
         files,
     };
 }

packages/fes-plugin-locale/types.d.ts

@@ -1,3 +1,5 @@
+import type { VueI18n } from 'vue-i18n';
+
 export { useI18n } from 'vue-i18n';
 
 export const locale: {
@@ -5,6 +7,7 @@ export const locale: {
     addLocale: ({ locale, messages }: { locale: string; messages: object }) => void;
     getAllLocales: () => string[];
     messages: Record<string, object>;
+    t: VueI18n['t'];
 };
 
 declare module '@fesjs/fes' {
@@ -18,4 +21,7 @@ declare module '@fesjs/fes' {
             }
             | false;
     }
+    interface PluginRuntimeConfig {
+        onLocaleChange: (params: { t: VueI18n['t']; locale: string }) => void;
+    }
 }

packages/fes-plugin-login/package.json

@@ -1,36 +1,36 @@
 {
-  "name": "@fesjs/plugin-login",
-  "version": "3.0.0",
-  "description": "@fesjs/plugin-login",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-login"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.0.0",
-    "@fesjs/plugin-request": "^3.0.0",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-login",
+    "version": "3.0.2",
+    "description": "@fesjs/plugin-login",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-login"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "qlin",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.0.0",
+        "@fesjs/plugin-request": "^4.0.0-rc.3",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-login/src/runtime/runtime.js

@@ -1,8 +1,12 @@
+import { request } from '@@/core/pluginExports';
 import { ApplyPluginsType, getRouter, plugin } from '@fesjs/fes';
 
 let config;
 function getLoginConfig() {
-    if (config) return config;
+    if (config) {
+        return config;
+    }
+
     config = plugin.applyPlugins({
         key: 'login',
         type: ApplyPluginsType.modify,
@@ -14,38 +18,67 @@ function getLoginConfig() {
     return config;
 }
 
+const defaultExport = {
+    onRouterCreated({ router }) {
+        const { hasLogin, loginPath } = getLoginConfig();
+        if (hasLogin && loginPath) {
+            let isAuthenticated;
+            router.beforeEach(async (to, from, next) => {
+                if (to.path !== loginPath && !isAuthenticated) {
+                    isAuthenticated = await hasLogin();
+                    if (!isAuthenticated) {
+                        return next({ path: loginPath });
+                    }
+                }
+                next();
+            });
+        }
+    },
+};
+
 // ACCESS
 
-export function request(memo) {
-    if (!memo.responseInterceptors) {
-        memo.responseInterceptors = [];
-    }
-    memo.responseInterceptors.push([
-        (response) => response,
-        (error) => {
+if (request.version) {
+    defaultExport.request = (memo) => {
+        const config = getLoginConfig();
+        if (config.ignore401Redirect) {
+            return memo;
+        }
+
+        const errorHandler = memo.errorHandler;
+        memo.errorHandler = (error) => {
             if (error?.response?.status === 401) {
                 const router = getRouter();
                 const { loginPath } = getLoginConfig();
                 router.push({ path: loginPath });
             }
-            throw error;
-        },
-    ]);
-    return memo;
+            errorHandler && errorHandler(error);
+        };
+        return memo;
+    };
+}
+else {
+    defaultExport.request = (memo) => {
+        const config = getLoginConfig();
+        if (config.ignore401Redirect) {
+            return memo;
+        }
+        if (!memo.responseInterceptors) {
+            memo.responseInterceptors = [];
+        }
+        memo.responseInterceptors.push([
+            response => response,
+            (error) => {
+                if (error?.response?.status === 401) {
+                    const router = getRouter();
+                    const { loginPath } = getLoginConfig();
+                    router.push({ path: loginPath });
+                }
+                throw error;
+            },
+        ]);
+        return memo;
+    };
 }
 
-export function onRouterCreated({ router }) {
-    const { hasLogin, loginPath } = getLoginConfig();
-    if (hasLogin && loginPath) {
-        let isAuthenticated;
-        router.beforeEach(async (to, from, next) => {
-            if (to.path !== loginPath && !isAuthenticated) {
-                isAuthenticated = await hasLogin();
-                if (!isAuthenticated) {
-                    return next({ path: loginPath });
-                }
-            }
-            next();
-        });
-    }
-}
+export default defaultExport;

packages/fes-plugin-model/package.json

@@ -1,38 +1,38 @@
 {
-  "name": "@fesjs/plugin-model",
-  "version": "3.0.1",
-  "description": "@fesjs/plugin-model",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-model"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-model",
+    "version": "3.0.3",
+    "description": "@fesjs/plugin-model",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-model"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-monaco-editor/package.json

@@ -1,40 +1,40 @@
 {
-  "name": "@fesjs/plugin-monaco-editor",
-  "version": "3.0.1",
-  "description": "@fesjs/plugin-monaco-editor",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {},
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-monaco-editor"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "lodash-es": "^4.17.21",
-    "monaco-editor": "^0.36.1",
-    "monaco-editor-webpack-plugin": "^7.0.1",
-    "vite-plugin-monaco-editor": "^1.1.0"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-monaco-editor",
+    "version": "3.0.3",
+    "description": "@fesjs/plugin-monaco-editor",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {},
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-monaco-editor"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "lodash-es": "^4.17.21",
+        "monaco-editor": "^0.36.1",
+        "monaco-editor-webpack-plugin": "^7.0.1",
+        "vite-plugin-monaco-editor": "^1.1.0"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-pinia/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@fesjs/plugin-pinia",
-  "version": "3.0.1",
-  "description": "@fesjs/plugin-pinia",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-pinia"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "pinia": "^2.0.11",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-pinia",
+    "version": "3.0.3",
+    "description": "@fesjs/plugin-pinia",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-pinia"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "pinia": "^2.0.11",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-qiankun/examples/webpack-main/.env

@@ -1 +1,2 @@
 PORT=9000
+HOST=127.0.0.1

packages/fes-plugin-qiankun/examples/webpack-micro/.env

@@ -1 +1,2 @@
 PORT=9001
+HOST=127.0.0.1

packages/fes-plugin-qiankun/package.json

@@ -1,50 +1,50 @@
 {
-  "name": "@fesjs/plugin-qiankun",
-  "version": "3.1.1",
-  "description": "@fesjs/plugin-qiankun",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "start": "npm-run-all --parallel start:*",
-    "start:vite-main": "cd ./examples/vite-main && fes dev",
-    "start:vite-micro": "cd ./examples/vite-micro && fes dev",
-    "start:webpack-main": "cd ./examples/webpack-main && fes dev",
-    "start:webpack-micro": "cd ./examples/webpack-micro && fes dev"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-qiankun"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "michaelxxie、harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "address": "^1.1.2",
-    "lodash-es": "^4.17.21",
-    "qiankun": "^2.7.0",
-    "vite-plugin-qiankun": "^1.0.15"
-  },
-  "devDependencies": {
-    "npm-run-all": "^4.1.5"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "@fesjs/fes-design": ">=0.7.20",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-qiankun",
+    "version": "3.1.6",
+    "description": "@fesjs/plugin-qiankun",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "start": "npm-run-all --parallel start:*",
+        "start:vite-main": "cd ./examples/vite-main && fes dev",
+        "start:vite-micro": "cd ./examples/vite-micro && fes dev",
+        "start:webpack-main": "cd ./examples/webpack-main && fes dev",
+        "start:webpack-micro": "cd ./examples/webpack-micro && fes dev"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-qiankun"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "michaelxxie、harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "address": "^1.1.2",
+        "lodash-es": "^4.17.21",
+        "qiankun": "^2.7.0",
+        "vite-plugin-qiankun": "^1.0.15"
+    },
+    "devDependencies": {
+        "npm-run-all": "^4.1.5"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.13",
+        "@fesjs/fes-design": ">=0.7.20",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-qiankun/src/main/runtime/MicroApp.tpl

@@ -9,7 +9,7 @@ import {
     shallowRef,
 } from "vue";
 import { loadMicroApp } from "{{{QIANKUN}}}";
-import { mergeWith, cloneDeep, isEqual } from "{{{LODASH_ES}}}";
+import { mergeWith, cloneDeep, isEqual, concat } from "{{{LODASH_ES}}}";
 // eslint-disable-next-line import/extensions
 import { getMasterOptions } from "./masterOptions";
 
@@ -66,7 +66,7 @@ export const MicroApp = defineComponent({
             return {};
         });
 
-        
+
         const propsConfigRef = shallowRef({});
 
         watch(

packages/fes-plugin-qiankun/src/micro/runtime/qiankunModel.tpl

@@ -3,9 +3,12 @@ import { cloneDeep } from 'lodash-es'
 let initState = reactive({});
 const setModelState = (props) => {
     // 使用深拷贝去掉主应用数据和子应用数据的引用关系，避免出现副作用。
+    Object.keys(initState).forEach(p=>{
+        delete initState[p]
+    })
     Object.assign(initState, cloneDeep(props))
 };
 
 export default () => initState;
 
-export { setModelState };
+export { setModelState };

packages/fes-plugin-request/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@fesjs/plugin-request",
-  "version": "4.0.0-rc.1",
-  "description": "@fesjs/plugin-request",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-request"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "vue": "^3.2.37"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "@qlin/request": "^0.1.2"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-request",
+    "version": "4.0.1",
+    "description": "@fesjs/plugin-request",
+    "author": "qlin",
+    "license": "MIT",
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-request"
+    },
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "vue": "^3.2.37"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "@qlin/request": "^0.3.1"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-request/src/index.js

@@ -1,4 +1,4 @@
-import { join } from 'path';
+import { join } from 'node:path';
 import { name } from '../package.json';
 
 export default (api) => {
@@ -9,7 +9,9 @@ export default (api) => {
 
     let generatedOnce = false;
     api.onGenerateFiles(() => {
-        if (generatedOnce) return;
+        if (generatedOnce) {
+            return;
+        }
         generatedOnce = true;
         api.copyTmpFiles({
             namespace,

packages/fes-plugin-request/src/template/request.js

@@ -1,39 +1,44 @@
 import { ApplyPluginsType, plugin } from '@fesjs/fes';
-import { ref, shallowRef } from 'vue';
-
 import { createRequest } from '@qlin/request';
 
+import { ref, shallowRef } from 'vue';
+
 function getRequestInstance() {
     const defaultConfig = plugin.applyPlugins({
         key: 'request',
         type: ApplyPluginsType.modify,
         initialValue: {
             timeout: 10000,
-            responseType: 'json',
         },
     });
 
     return createRequest(defaultConfig);
 }
 
+// 不能立马初始化，用户配置可能还没准备好
 let currentRequest;
 
-export const rawRequest = (url, data, options = {}) => {
-    if (typeof options === 'string') {
-        options = {
-            method: options,
-        };
-    }
+function _rawRequest(url, data, options = {}) {
     if (!currentRequest) {
         currentRequest = getRequestInstance();
     }
     return currentRequest(url, data, options);
-};
+}
 
-export const request = async (url, data, options = {}) => {
+// 代理 request 上的属性
+export const rawRequest = new Proxy(_rawRequest, {
+    get(_, key) {
+        if (!currentRequest) {
+            currentRequest = getRequestInstance();
+        }
+        return currentRequest[key];
+    },
+});
+
+export async function request(url, data, options = {}) {
     const response = await rawRequest(url, data, options);
     return response.data;
-};
+}
 
 request.version = '4.0.0';
 
@@ -41,14 +46,15 @@ function isPromiseLike(obj) {
     return !!obj && typeof obj === 'object' && typeof obj.then === 'function';
 }
 
-export const useRequest = (url, data, options = {}) => {
+export function useRequest(url, data, options = {}) {
     const loadingRef = ref(true);
     const errorRef = ref(null);
     const dataRef = shallowRef(null);
     let promise;
     if (isPromiseLike(url)) {
         promise = url;
-    } else {
+    }
+    else {
         promise = request(url, data, options);
     }
     promise
@@ -66,4 +72,4 @@ export const useRequest = (url, data, options = {}) => {
         error: errorRef,
         data: dataRef,
     };
-};
+}

packages/fes-plugin-swc/package.json

@@ -1,40 +1,40 @@
 {
-  "name": "@fesjs/plugin-swc",
-  "version": "3.0.3",
-  "description": "@fesjs/plugin-swc",
-  "main": "lib/index.js",
-  "types": "types.d.ts",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-swc"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "RiESAEX",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "@swc/core": "^1.3.49",
-    "@swc/css": "^0.0.20",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "swc-loader": "^0.2.3",
-    "swc-plugin-vue-jsx": "^0.2.2",
-    "terser-webpack-plugin": "^5.3.7"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4"
-  }
+    "name": "@fesjs/plugin-swc",
+    "version": "3.0.5",
+    "description": "@fesjs/plugin-swc",
+    "main": "lib/index.js",
+    "types": "types.d.ts",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-swc"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "RiESAEX",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "@swc/core": "^1.3.49",
+        "@swc/css": "^0.0.20",
+        "css-minimizer-webpack-plugin": "^5.0.0",
+        "swc-loader": "^0.2.3",
+        "swc-plugin-vue-jsx": "^0.2.2",
+        "terser-webpack-plugin": "^5.3.7"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12"
+    }
 }

packages/fes-plugin-vuex/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@fesjs/plugin-vuex",
-  "version": "3.0.1",
-  "description": "@fesjs/plugin-vuex",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-vuex"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "aringlai",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "vue": "^3.2.47",
-    "vuex": "^4.0.0"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-vuex",
+    "version": "3.0.3",
+    "description": "@fesjs/plugin-vuex",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-vuex"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "aringlai",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "vue": "^3.2.47",
+        "vuex": "^4.0.0"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-plugin-vuex/src/helper.js

@@ -1,12 +1,15 @@
+import { existsSync, readFileSync, readdirSync, statSync } from 'node:fs';
+import { join } from 'node:path';
 import { parser, winPath } from '@fesjs/utils';
-import { readdirSync, readFileSync, statSync } from 'fs';
-import { join } from 'path';
 
 /**
  * 获取文件夹所有JS文件路径
  * @param {string} dir
  */
 function getDirFilePaths(dir) {
+    if (!existsSync(dir)) {
+        return [];
+    }
     const dirs = readdirSync(dir);
     let pathList = [];
     for (const name of dirs) {
@@ -14,7 +17,8 @@ function getDirFilePaths(dir) {
         const info = statSync(path);
         if (info.isDirectory()) {
             pathList = pathList.concat(getDirFilePaths(path));
-        } else if (path.endsWith('.js')) {
+        }
+        else if (path.endsWith('.js')) {
             pathList.push(path);
         }
     }
@@ -29,8 +33,8 @@ function pathToHump(path, root) {
     return path
         .replace(root, '')
         .replace('.js', '')
-        .replace(RegExp('(/|\\.|-|_)\\S', 'g'), (text) => text[1].toUpperCase())
-        .replace(/\S/, (text) => text.toLowerCase());
+        .replace(RegExp('(/|\\.|-|_)\\S', 'g'), text => text[1].toUpperCase())
+        .replace(/\S/, text => text.toLowerCase());
 }
 
 /**
@@ -45,7 +49,7 @@ function getModelTypes(ast, name, namespace = '') {
         getters: {},
     };
     let namespaced = false;
-    if (ast.type !== 'ObjectExpression') return types;
+    if (ast.type !== 'ObjectExpression') { return types; }
     ast.properties.forEach((node) => {
         if (node.key.name === 'namespaced' && node.value.value) {
             namespaced = true;
@@ -56,7 +60,6 @@ function getModelTypes(ast, name, namespace = '') {
             if (namespaced) {
                 type = types[node.key.name][name];
                 if (!type) {
-                    // eslint-disable-next-line no-multi-assign
                     type = types[node.key.name][name] = {};
                 }
             }
@@ -77,7 +80,8 @@ function getModelTypes(ast, name, namespace = '') {
                             ...subTypes[key],
                             ...types[key][name],
                         };
-                    } else {
+                    }
+                    else {
                         types[key] = {
                             ...subTypes[key],
                             ...types[key],
@@ -112,8 +116,9 @@ function parseModel(paths = [], root) {
                 sourceType: 'module',
                 plugins: ['jsx', 'typescript'],
             });
-            ast = ast.program.body.filter((body) => body.type === 'ExportDefaultDeclaration')[0];
-        } catch (err) { }
+            ast = ast.program.body.filter(body => body.type === 'ExportDefaultDeclaration')[0];
+        }
+        catch (err) { }
         if (ast) {
             const { mutations, actions, getters } = getModelTypes(ast.declaration, moduleName);
             MUTATION_TYPES = {
@@ -155,9 +160,10 @@ export function parseStore(root) {
     const modelPaths = [];
     const pluginPaths = [];
     paths.forEach((path) => {
-        if (path.indexOf('plugin') > -1) {
+        if (path.includes('plugin')) {
             pluginPaths.push(path);
-        } else {
+        }
+        else {
             modelPaths.push(path);
         }
     });

packages/fes-plugin-watermark/package.json

@@ -1,39 +1,39 @@
 {
-  "name": "@fesjs/plugin-watermark",
-  "version": "3.0.1",
-  "description": "@fesjs/plugin-watermark",
-  "main": "lib/index.js",
-  "files": [
-    "lib",
-    "types.d.ts"
-  ],
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-plugin-watermark"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "harrywan",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@fesjs/utils": "^3.0.1",
-    "lodash-es": "^4.17.21"
-  },
-  "peerDependencies": {
-    "@fesjs/fes": "^3.1.4",
-    "vue": "^3.2.47"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/plugin-watermark",
+    "version": "3.0.3",
+    "description": "@fesjs/plugin-watermark",
+    "main": "lib/index.js",
+    "files": [
+        "lib",
+        "types.d.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-plugin-watermark"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "harrywan",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@fesjs/utils": "^3.0.3",
+        "lodash-es": "^4.17.21"
+    },
+    "peerDependencies": {
+        "@fesjs/fes": "^3.1.12",
+        "vue": "^3.2.47"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-preset-built-in/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@fesjs/preset-built-in",
-    "version": "3.1.8",
+    "version": "3.1.14",
     "description": "@fesjs/preset-built-in",
     "author": "qlin",
     "license": "MIT",
@@ -29,13 +29,13 @@
         "vue": "^3.2.47"
     },
     "dependencies": {
-        "@fesjs/compiler": "^3.0.2",
-        "@fesjs/runtime": "^3.0.0",
-        "@fesjs/utils": "^3.0.1",
+        "@fesjs/compiler": "^3.0.6",
+        "@fesjs/runtime": "^3.0.1",
+        "@fesjs/utils": "^3.0.3",
         "@vue/compiler-sfc": "^3.3.4",
+        "@wll8/better-mock": "0.3.3-alpha",
         "envinfo": "^7.7.3",
-        "express": "^4.17.3",
-        "mockjs": "^1.1.0"
+        "express": "^4.17.3"
     },
     "typings": "./types.d.ts"
 }

packages/fes-preset-built-in/src/index.js

@@ -16,6 +16,7 @@ export default function () {
             require.resolve('./plugins/features/alias'),
             require.resolve('./plugins/features/autoprefixer'),
             require.resolve('./plugins/features/define'),
+            require.resolve('./plugins/features/console'),
             require.resolve('./plugins/features/dynamicImport'),
             require.resolve('./plugins/features/globalCSS'),
             require.resolve('./plugins/features/inlineLimit'),

packages/fes-preset-built-in/src/plugins/core/entry/fes.tpl

@@ -12,6 +12,8 @@ import DefaultContainer from './defaultContainer.vue';
 
 {{{ entryCodeAhead }}}
 
+{{{ CONSOLE }}}
+
 const renderClient = (opts = {}) => {
     const { plugin, routes, rootElement } = opts;
     const rootContainer = plugin.applyPlugins({

packages/fes-preset-built-in/src/plugins/core/entry/index.js

@@ -13,6 +13,15 @@ export function importsToStr(imports) {
     });
 }
 
+function getConsoleInfo(config, pkg) {
+    if (config.console?.version) {
+        return `
+console.log('%c[${pkg.name}]%c${pkg.version}', 'background-color: #1677ff;  border-top-left-radius: 6px;  border-bottom-left-radius: 6px; color: white; padding: 4px', 'background-color: #42b983;  border-top-right-radius: 6px;  border-bottom-right-radius: 6px; color: white; padding: 4px');
+        `;
+    }
+    return '';
+}
+
 export default function (api) {
     const {
         utils: { Mustache },
@@ -24,6 +33,7 @@ export default function (api) {
             path: 'fes.js',
             content: Mustache.render(fesTpl, {
                 enableTitle: api.config.title !== false,
+                CONSOLE: getConsoleInfo(api.config, api.pkg),
                 defaultTitle: api.config.title || 'fes.js',
                 runtimePath,
                 rootElement: `#${api.config.mountElementId || 'app'}`,

packages/fes-preset-built-in/src/plugins/features/console.js

@@ -0,0 +1,13 @@
+export default (api) => {
+    api.describe({
+        key: 'console',
+        config: {
+            default: {
+                version: false,
+            },
+            schema(joi) {
+                return joi.object().description('output info in console, default version');
+            },
+        },
+    });
+};

packages/fes-preset-built-in/src/plugins/features/mock.js

@@ -122,7 +122,7 @@ export default (api) => {
                 api.logger.info('mock.js should export Function');
                 return;
             }
-            const mockjs = require('mockjs');
+            const mockjs = require('@wll8/better-mock');
             initFunction({ cgiMock, mockjs, utils });
         } catch (err) {
             api.logger.error('mock.js run fail!');

packages/fes-preset-built-in/types.d.ts

@@ -1,8 +1,8 @@
-import { Component, DefineComponent, Component, App } from 'vue';
-import { RouteRecordRaw, Router, RouterHistory, createMemoryHistory, createWebHashHistory, createWebHistory } from 'vue-router';
+import type { App, Component, DefineComponent } from 'vue';
+import type { createMemoryHistory, createWebHashHistory, createWebHistory, Router, RouteRecordRaw, RouterHistory } from 'vue-router';
 
 // @ts-ignore
-import { Plugin } from '@fesjs/runtime';
+import type { Plugin } from '@fesjs/runtime';
 
 interface BeforeRenderConfig {
     loading: Component;
@@ -44,6 +44,9 @@ declare module '@fesjs/fes' {
     interface PluginBuildConfig {
         globalCSS?: 'beforeImports' | 'afterImports';
         alias?: Record<string, string>;
+        console?: {
+            version?: boolean;
+        };
         autoprefixer?: {
             /** environment for `Browserslist` */
             env?: string;
@@ -86,10 +89,10 @@ declare module '@fesjs/fes' {
         dynamicImport?: boolean;
         inlineLimit?: number;
         mock?:
-        | boolean
-        | {
-            prefix?: string;
-        };
+            | boolean
+            | {
+                prefix?: string;
+            };
         mountElementId?: string;
         plugins?: string[];
         presets?: string[];

packages/fes-runtime/package.json

@@ -1,37 +1,37 @@
 {
-  "name": "@fesjs/runtime",
-  "version": "3.0.0",
-  "description": "@fesjs/runtime",
-  "main": "es/index.js",
-  "module": "es/index.js",
-  "files": [
-    "lib",
-    "es",
-    "types.d.ts"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-runtime"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "sideEffects": false,
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "peerDependencies": {
-    "vue": "^3.2.47"
-  },
-  "dependencies": {
-    "vue-router": "^4.0.1"
-  },
-  "typings": "./types.d.ts"
+    "name": "@fesjs/runtime",
+    "version": "3.0.1",
+    "description": "@fesjs/runtime",
+    "main": "es/index.js",
+    "module": "es/index.js",
+    "files": [
+        "lib",
+        "es",
+        "types.d.ts"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-runtime"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "sideEffects": false,
+    "author": "qlin",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "peerDependencies": {
+        "vue": "^3.2.47"
+    },
+    "dependencies": {
+        "vue-router": "^4.0.1"
+    },
+    "typings": "./types.d.ts"
 }

packages/fes-runtime/types.d.ts

@@ -1,4 +1,4 @@
-export { Plugin } from './es/index' 
+export { Plugin } from './es/index';
 
 export {
     useRoute,
@@ -15,7 +15,7 @@ export {
 } from 'vue-router';
 
 export interface ApplyPluginsType {
-    compose: 'compose',
-    event: 'event',
-    modify: 'modify'
+    compose: 'compose';
+    event: 'event';
+    modify: 'modify';
 };

packages/fes-template-vite/.fes.js

@@ -54,6 +54,7 @@ export default defineBuildConfig({
                     {
                         title: '子菜单',
                         path: '/menuTest',
+                        query: { id: 1 },
                     },
                 ],
             },

packages/fes-template-vite/src/app.jsx

@@ -23,8 +23,9 @@ export const beforeRender = {
 };
 
 export const layout = {
-    logo: `${process.env.BASE_URL}wine-outline.svg`,
-    renderCustom: (props) => {
+    // eslint-disable-next-line node/prefer-global/process
+    logo: `${process.env.BASE_URL}logo.png`,
+    renderCustom: () => {
         return <UserCenter />;
     },
 };

packages/fes-template/.fes.js

@@ -8,6 +8,9 @@ export default defineBuildConfig({
     define: {
         __DEV__: false,
     },
+    console: {
+        version: true,
+    },
     html: {
         title: '海贼王',
     },
@@ -33,7 +36,7 @@ export default defineBuildConfig({
         },
     },
     layout: {
-        title: 'Fes.js',
+        title: '$home',
         footer: 'Created by MumbleFE',
         multiTabs: true,
         navigation: 'mixin',
@@ -47,6 +50,7 @@ export default defineBuildConfig({
             {
                 name: 'editor',
                 icon: '/wine-outline.svg',
+                _blank: true,
             },
             {
                 title: '$externalLink',
@@ -70,6 +74,7 @@ export default defineBuildConfig({
             },
             {
                 name: 'pinia',
+                _blank: true,
             },
         ],
         menuProps: {

packages/fes-template/src/app.jsx

@@ -3,6 +3,11 @@ import { ref, watch } from 'vue';
 import PageLoading from '@/components/pageLoading.vue';
 import UserCenter from '@/components/userCenter.vue';
 
+export function onLocaleChange({ locale, t }) {
+    // 切换语言
+    console.log(locale, t);
+}
+
 export const beforeRender = {
     loading: <PageLoading />,
     action() {
@@ -20,24 +25,29 @@ export const beforeRender = {
     },
 };
 
-export const layout = (layoutConfig, { initialState }) => ({
-    ...layoutConfig,
-    renderCustom: (props) => {
-        console.log(props);
-        return <UserCenter />;
-    },
-    menus: () => {
-        const menusRef = ref(layoutConfig.menus);
-        watch(
-            () => initialState.userName,
-            () => {
-                menusRef.value = [
-                    {
-                        name: 'store',
-                    },
-                ];
-            },
-        );
-        return menusRef;
-    },
-});
+export function layout(layoutConfig, { initialState }) {
+    return {
+        ...layoutConfig,
+        403: {
+            title: 'hello word',
+        },
+        renderCustom: (props) => {
+            console.log(props);
+            return <UserCenter />;
+        },
+        menus: () => {
+            const menusRef = ref(layoutConfig.menus);
+            watch(
+                () => initialState.userName,
+                () => {
+                    menusRef.value = [
+                        {
+                            name: 'store',
+                        },
+                    ];
+                },
+            );
+            return menusRef;
+        },
+    };
+}

packages/fes-template/src/global.css

@@ -5,5 +5,5 @@ html, body {
 
 .page {
     height: 1000px;
-    background-image: url('~@/images/hello.png');
+    background: url("@/images/hello.png");
 }

packages/fes-template/src/locales/en-US.js

@@ -4,6 +4,6 @@ export default {
     externalLink: 'externalLink',
     mock: 'mock',
     test: {
-        b: 1,
+        test: 'test',
     },
 };

packages/fes-template/src/locales/zh-CN.js

@@ -4,6 +4,6 @@ export default {
     externalLink: '外部链接',
     mock: '代理',
     test: {
-        b: 1,
+        test: '测试',
     },
 };

packages/fes-template/src/pages/index.vue

@@ -13,7 +13,7 @@ import { FButton } from '@fesjs/fes-design';
 
 defineRouteMeta({
     name: 'index',
-    title: '$home',
+    title: '$test.test',
 });
 
 console.log('123123'.replaceAll('123', '234'));
@@ -27,6 +27,5 @@ function go() {
 <style lang="less">
 .page {
     height: 1000px;
-    background-image: url('@/images/hello.png');
 }
 </style>

packages/fes-template/src/pages/menuTest/[id].vue

@@ -1,19 +1,23 @@
 <template>
-    <div class="page">menuTest: {{ route.params }} <input style="border: 1px solid red" /></div>
+    <div class="page">
+        menuTest: {{ route.params }} <input style="border: 1px solid red">
+    </div>
 </template>
+
 <config>
 {
     "title": "menuTest-详情"
 }
 </config>
+
 <script>
-import { useRoute, useTabTitle } from '@fesjs/fes';
+import { useLayout, useRoute } from '@fesjs/fes';
 
 export default {
     components: {},
     setup() {
         const route = useRoute();
-        const title = useTabTitle(`详情-${route.params?.id}`);
+        const { title } = useLayout({ title: `详情-${route.params?.id}` });
 
         setTimeout(() => {
             title.value = `详情-${route.params?.id}-changed`;

packages/fes-template/src/pages/menuTest/index.vue

@@ -2,17 +2,25 @@
     <div class="page">
         menuTest-index
         <div style="display: flex; flex-direction: column">
-            <router-link to="/menuTest/1">Go to 1</router-link>
-            <router-link to="/menuTest/2">Go to 2</router-link>
-            <router-link to="/menuTest/3">Go to 3</router-link>
+            <router-link to="/menuTest/1">
+                Go to 1
+            </router-link>
+            <router-link to="/menuTest/2">
+                Go to 2
+            </router-link>
+            <router-link to="/menuTest/3">
+                Go to 3
+            </router-link>
         </div>
     </div>
 </template>
+
 <config>
 {
     "title": "menuTest"
 }
 </config>
+
 <script>
 export default {
     components: {},

packages/fes-template/src/pages/pinia.vue

@@ -1,7 +1,10 @@
 <template>
     <div>{{ store.counter }}</div>
-    <FButton class="m-2" @click="store.increment">Button</FButton>
+    <FButton class="m-2" @click="store.increment">
+        Button
+    </FButton>
 </template>
+
 <config>
 {
     "name": "pinia",
@@ -11,6 +14,7 @@
     }
 }
 </config>
+
 <script>
 import { FButton } from '@fesjs/fes-design';
 import { useStore } from '@/store/main';

packages/fes-template/tsconfig.json

@@ -1,31 +1,30 @@
 {
-  "compilerOptions": {
-    "outDir": "build/dist",
-    "module": "esnext",
-    "target": "esnext",
-    "lib": ["esnext", "dom"],
-    "sourceMap": true,
-    "baseUrl": ".",
-    "jsx": "preserve",
-    "allowSyntheticDefaultImports": true,
-    "moduleResolution": "node",
-    "forceConsistentCasingInFileNames": true,
-    "noImplicitReturns": true,
-    "suppressImplicitAnyIndexErrors": true,
-    "noUnusedLocals": true,
-    "allowJs": true,
-    "skipLibCheck": true,
-    "experimentalDecorators": true,
-    "strict": true,
-    "paths": {
-      "@/*": ["./src/*"],
-      "@@/*": ["./src/.fes/*"]
-    }
-  },
-  "include": [
-    "src/**/*",
-    ".fes.js",
-    ".fes.*.js"
-  ],
-  "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
+    "compilerOptions": {
+        "target": "esnext",
+        "jsx": "preserve",
+        "lib": ["esnext", "dom"],
+        "experimentalDecorators": true,
+        "baseUrl": ".",
+        "module": "esnext",
+        "moduleResolution": "node",
+        "paths": {
+            "@/*": ["./src/*"],
+            "@@/*": ["./src/.fes/*"]
+        },
+        "allowJs": true,
+        "strict": true,
+        "noImplicitReturns": true,
+        "noUnusedLocals": true,
+        "outDir": "build/dist",
+        "sourceMap": true,
+        "allowSyntheticDefaultImports": true,
+        "forceConsistentCasingInFileNames": true,
+        "skipLibCheck": true
+    },
+    "include": [
+        "src/**/*",
+        ".fes.js",
+        ".fes.*.js"
+    ],
+    "exclude": ["node_modules", "build", "dist", "scripts", "src/.fes/*", "webpack", "jest"]
 }

packages/fes-utils/package.json

@@ -1,46 +1,46 @@
 {
-  "name": "@fesjs/utils",
-  "version": "3.0.1",
-  "description": "@fesjs/utils",
-  "main": "lib/index.js",
-  "files": [
-    "lib"
-  ],
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/WeBankFinTech/fes.js.git",
-    "directory": "packages/fes-utils"
-  },
-  "keywords": [
-    "fes"
-  ],
-  "author": "qlin",
-  "license": "MIT",
-  "bugs": {
-    "url": "https://github.com/WeBankFinTech/fes.js/issues"
-  },
-  "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@babel/generator": "^7.21.3",
-    "@babel/parser": "^7.21.3",
-    "@babel/traverse": "^7.21.3",
-    "chalk": "^4.1.2",
-    "chokidar": "^3.5.2",
-    "crequire": "^1.8.1",
-    "debug": "^4.3.2",
-    "deepmerge": "^4.2.2",
-    "glob": "^9.3.2",
-    "lodash": "^4.17.21",
-    "mkdirp": "^2.1.6",
-    "mustache": "^4.2.0",
-    "pkg-up": "^3.1.0",
-    "portfinder": "^1.0.32",
-    "resolve": "^1.20.0",
-    "rimraf": "^4.4.1",
-    "semver": "^7.3.5",
-    "yargs-parser": "^21.1.1"
-  }
+    "name": "@fesjs/utils",
+    "version": "3.0.3",
+    "description": "@fesjs/utils",
+    "main": "lib/index.js",
+    "files": [
+        "lib"
+    ],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/WeBankFinTech/fes.js.git",
+        "directory": "packages/fes-utils"
+    },
+    "keywords": [
+        "fes"
+    ],
+    "author": "qlin",
+    "license": "MIT",
+    "bugs": {
+        "url": "https://github.com/WeBankFinTech/fes.js/issues"
+    },
+    "homepage": "https://github.com/WeBankFinTech/fes.js#readme",
+    "publishConfig": {
+        "access": "public"
+    },
+    "dependencies": {
+        "@babel/generator": "^7.21.3",
+        "@babel/parser": "^7.21.3",
+        "@babel/traverse": "^7.21.3",
+        "chalk": "^4.1.2",
+        "chokidar": "^3.5.2",
+        "crequire": "^1.8.1",
+        "debug": "^4.3.2",
+        "deepmerge": "^4.2.2",
+        "glob": "^9.3.2",
+        "lodash": "^4.17.21",
+        "mkdirp": "^2.1.6",
+        "mustache": "^4.2.0",
+        "pkg-up": "^3.1.0",
+        "portfinder": "^1.0.32",
+        "resolve": "^1.20.0",
+        "rimraf": "^4.4.1",
+        "semver": "^7.3.5",
+        "yargs-parser": "^21.1.1"
+    }
 }