chore: release 2.6.1

chore: restore vite to version 2.3.6
feat(demo): multi-modal in one page usage
2025-08-26 00:26:20 +08:00 · 2021-07-19 23:56:14 +08:00 · 2021-07-19 23:54:47 +08:00 · 2021-07-19 18:40:02 +08:00 · 2021-07-19 16:37:47 +08:00 · 2021-07-19 16:25:56 +08:00
88 changed files with 2080 additions and 1982 deletions
--- a/.env.test
+++ b/.env.test
@@ -0,0 +1,36 @@
+NODE_ENV=production
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Delete console
+VITE_DROP_CONSOLE = true
+
+# Whether to enable gzip or brotli compression
+# Optional: gzip | brotli | none
+# If you need multiple forms, you can use `,` to separate
+VITE_BUILD_COMPRESS = 'none'
+
+# Whether to delete origin files when using compress, default false
+VITE_BUILD_COMPRESS_DELETE_ORIGIN_FILE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# File upload address， optional
+# It can be forwarded by nginx or write the actual address directly
+VITE_GLOB_UPLOAD_URL=/upload
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=
+
+# Whether to enable image compression
+VITE_USE_IMAGEMIN= true
+
+# use pwa
+VITE_USE_PWA = false
+
+# Is it compatible with older browsers
+VITE_LEGACY = false
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -61,6 +61,7 @@ module.exports = defineConfig({
    'vue/singleline-html-element-content-newline': 'off',
    'vue/attribute-hyphenation': 'off',
    'vue/require-default-prop': 'off',
+    'vue/script-setup-uses-vars': 'off',
    'vue/html-self-closing': [
      'error',
      {
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -130,6 +130,23 @@
    "sider",
    "pinia",
    "sider",
-    "nprogress"
+    "nprogress",
+    "INTLIFY",
+    "stylelint",
+    "esno",
+    "vitejs",
+    "sortablejs",
+    "mockjs",
+    "codemirror",
+    "iconify",
+    "commitlint",
+    "vditor",
+    "echarts",
+    "cropperjs",
+    "logicflow",
+    "vueuse",
+    "zxcvbn",
+    "lintstagedrc",
+    "brotli"
  ]
 }
--- a/CHANGELOG.en_US.md
+++ b/CHANGELOG.en_US.md
@@ -1,3 +1,52 @@
+## 2.6.1(2021-07-19)
+
+### ✨ Features
+
+- **NoticeList** Add pagination, auto omit for overlength, title click event, title strikethrough, etc.
+- **MixSider** Optimize the style of the bottom collapse button in the Mix menu layout to be consistent with the style of other menu layouts
+- **ApiTreeSelect** Extend `TreeSelect` component of `antdv` to support remote data source, similar to `ApiSelect`.
+- **BasicTable** New `ApiTreeSelect` editing component
+- Different backend home pages can be specified for different users.
+  - Add `homePath` field (optional) to the user information returned by the `getUserInfo` interface to customize the home page path for the current user
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - Fix scrollbar style issue (removed scroll style patch)
+  - Fix the alignment problem of cells with expanded icons in tree tables
+  - Add `headerTop` slot.
+  - Fix the color display of the operation column button in disabled state.
+  - Repair the problem that the values of editable cells cannot be updated by modifying `dataSource` directly.
+  - Repair the problem of data replay when using `ApiSelect` to edit components.
+  - Repair the problem that editing components may report `onXXX` type error in some scenarios.
+- **TableAction**
+  - Create Tooltip component only if `action.tooltip` exists.
+  - Fix the problem that the content of the round button inside the component is not centered
+- **AppSearch** Fix the problem that the hidden menu may be searched.
+- **BasicUpload** Repair the problem of error when handling non-`array` values.
+- **Form** Repair the `suffix` slot style problem of `FormItem`.
+- **Menu**
+  - Repair the hovering trigger logic of the left mixed menu
+  - Repair the problem that the top bar menu is wrong when displaying menu items that need to be hidden.
+  - Fix the left mixed menu in hover trigger mode will jump to route directly when there is no submenu and it is activated
+- **Breadcrumb** Repair the problem that the menu with redirection cannot be jumped when clicked
+- **Markdown** fixes an initialization exception and an issue where value was not set dynamically correctly
+- **Modal** Make sure props are passed correctly
+- **MultipleTab** fixes an issue that could accidentally create login route tabs
+- **BasicTree** Fix the problem that the search function may cause `checkedKeys` to be lost
+- **CodeEditor** Fix the problem that value does not support v-model usage.
+- **CountdownInput** Fix the problem that `input` slot is not supported.
+- **ApiSelect** Fix the problem that the `options-change` event parameter is not the standard `options` data used by `select
+- **Other**
+  - Fix the problem that the configuration of default menu collapse does not work
+  - Repair the problem that `safari` browser reports an error and the website cannot be opened.
+  - Repair the problem that eslint keeps error due to endOfLine after pulling the code on window.
+  - Fix `Vue Router warn` caused by dynamic routing
+
+### 🎫 Chores
+
+- Add test environment test command
+
 ## 2.6.0(2021-07-04)

 ### ✨ Features
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,68 @@
+## [2.6.1](https://github.com/anncwb/vue-vben-admin/compare/v2.6.0...v2.6.1) (2021-07-19)
+
+### Bug Fixes
+
+- **api-select:** fix `options-change` event data ([897bed9](https://github.com/anncwb/vue-vben-admin/commit/897bed97295a0b9101d33102340749689a4368de))
+- **api-tree-select:** auto load data if necessary ([1b3058f](https://github.com/anncwb/vue-vben-admin/commit/1b3058f8253effe974feaf08a12250a111ab58c0))
+- **api-tree-select:** fix `event` checked in form ([d9d0071](https://github.com/anncwb/vue-vben-admin/commit/d9d00714011fa7914c61f990ce1159351ee21a1a))
+- **app-search:** exclude hidden items ([faf5c9f](https://github.com/anncwb/vue-vben-admin/commit/faf5c9fd7ea40c407419a5a5c473f9b0c32c2a53))
+- **app-search:** exclude items by `hideChildrenInMenu` ([02d3dca](https://github.com/anncwb/vue-vben-admin/commit/02d3dca57efedc1322ae38e3f432cf1f6c2cf839))
+- **basic-tree:** `checkedKeys` not worked with `search` ([b06a7ab](https://github.com/anncwb/vue-vben-admin/commit/b06a7ab77b99abee63dd55770ffd55b594ee42f9)), closes [#915](https://github.com/anncwb/vue-vben-admin/issues/915)
+- **breadcrumb:** `redirect` not worked ([f5e31fe](https://github.com/anncwb/vue-vben-admin/commit/f5e31febbd18372a34166cac390b1d9b914fe80e))
+- **code-editor:** `value` not support use as `v-model` ([8832a07](https://github.com/anncwb/vue-vben-admin/commit/8832a074dceb44f057c87289d3a99feef58c08fd)), closes [#933](https://github.com/anncwb/vue-vben-admin/issues/933)
+- **countdown-input:** add `slots` support ([a764a95](https://github.com/anncwb/vue-vben-admin/commit/a764a95ae9a6cff831f75aa97b00724cadc48e92))
+- **CountTo:** Fix displaying empty string when the value is 0 ([#864](https://github.com/anncwb/vue-vben-admin/issues/864)) ([82eb72b](https://github.com/anncwb/vue-vben-admin/commit/82eb72bbced931ba7f50069211f9511035ad09f4))
+- **demo:** `setup` page route config ([d5d5c4b](https://github.com/anncwb/vue-vben-admin/commit/d5d5c4b4bfb3e3a5e54f9993966adc46a09a8b90))
+- **demo:** add mock data `account detail` route ([993e19d](https://github.com/anncwb/vue-vben-admin/commit/993e19dcc319e2b4c68df2ab76174b7b4d7b0428)), closes [#858](https://github.com/anncwb/vue-vben-admin/issues/858)
+- **demo:** fix display problem of editable table with `apiSelect` ([535bddd](https://github.com/anncwb/vue-vben-admin/commit/535bdddf91785e20295c18cf80c8a22cc2172681))
+- **demo:** form pages support `keepAlive` ([9228282](https://github.com/anncwb/vue-vben-admin/commit/9228282ae27daaa246f42e441e27b1b05eb30464))
+- **demo:** resolve `key not exist` warnings ([45a94e4](https://github.com/anncwb/vue-vben-admin/commit/45a94e41c1397b84d08373f84f766204d2488714))
+- **form:** fix `suffix` slot style ([a9bbed1](https://github.com/anncwb/vue-vben-admin/commit/a9bbed19739376ab2bf67a14b04e872f14ca84cc))
+- **formItem:** Fix labelcol type mismatch ([#903](https://github.com/anncwb/vue-vben-admin/issues/903)) ([03b17a8](https://github.com/anncwb/vue-vben-admin/commit/03b17a8f8bdb50322aa10e3b614bcc40b9e9dcc8))
+- **markdown:** resolving markdown exceptions ([d95815b](https://github.com/anncwb/vue-vben-admin/commit/d95815b5031984e224140eb1b1d46e2dbf80abc1))
+- **markdown:** set `value` error ([35e1347](https://github.com/anncwb/vue-vben-admin/commit/35e1347029e29a83a9648b6b398e6863cc40fca9))
+- **menu:** display error when contains hidden items ([5ceeefd](https://github.com/anncwb/vue-vben-admin/commit/5ceeefd17d9ddc0e8844b900069b100f24d9c00e))
+- **menu:** fix mix-menu incorrect jumping in `hover` mode ([cad021c](https://github.com/anncwb/vue-vben-admin/commit/cad021c34b71fa109640af75a0c2b72179e9e257))
+- **mix-sider:** fix mix-sider hover logic ([0595a72](https://github.com/anncwb/vue-vben-admin/commit/0595a72da9c666af81a0916663e8e6a014e6fa69))
+- **modal:** ensure that props are passed correctly,fix [#897](https://github.com/anncwb/vue-vben-admin/issues/897) ([ae7821e](https://github.com/anncwb/vue-vben-admin/commit/ae7821e29690bea8934ea724bfd0ae4e2cf30c77))
+- **modal:** fixed `fullscreen` not worked ([5baaa58](https://github.com/anncwb/vue-vben-admin/commit/5baaa58581f22a915cda9fa39e4cb9f094254d3b)), closes [#918](https://github.com/anncwb/vue-vben-admin/issues/918)
+- **model:** auto validate on value change ([f844017](https://github.com/anncwb/vue-vben-admin/commit/f8440175f35076073c9f53483cf6c0164d427ff4)), closes [#920](https://github.com/anncwb/vue-vben-admin/issues/920)
+- **table:** fix index column style ([c7c0a7e](https://github.com/anncwb/vue-vben-admin/commit/c7c0a7e4c88a895000b1621981e4d4b2020c64b1))
+- **table:** `value` show problem in editable cell ([61ce25b](https://github.com/anncwb/vue-vben-admin/commit/61ce25be1b40d7a0e26205ca6a6757c6c43fc21e)), closes [#922](https://github.com/anncwb/vue-vben-admin/issues/922)
+- **table-action:** fixed icon `margin` without label ([dc51e6a](https://github.com/anncwb/vue-vben-admin/commit/dc51e6a8d4e4f2c97b387b37959944c9bb49d779))
+- **tree:** fixed `checkedKeys` with `search` mode ([f707541](https://github.com/anncwb/vue-vben-admin/commit/f707541dda78146bda89814ddccbb259d9f5d8a2))
+- fix homePage affix error ([c117802](https://github.com/anncwb/vue-vben-admin/commit/c1178027f0fab2791d02efcd7c52beff5fc7dc25))
+- **table-action:** fix `circle` button style ([db7254a](https://github.com/anncwb/vue-vben-admin/commit/db7254a5e0ac6d10a7ea37334ad523b150facb19))
+- `menuSetting` can not set collapsed to false as default ([808291b](https://github.com/anncwb/vue-vben-admin/commit/808291b503d59e3026f5f0b5e7a38b9c69bcc451))
+- ensure PAGE_NOT_FOUND_ROUTE exist ([87583c8](https://github.com/anncwb/vue-vben-admin/commit/87583c8b54d335ddf1c416859ef62bbde189c809))
+- ensure that safari is running properly, fix [#875](https://github.com/anncwb/vue-vben-admin/issues/875) ([dafcdd8](https://github.com/anncwb/vue-vben-admin/commit/dafcdd898caae57104f1155b0ec660ea333e7b19))
+- infinite redirect in `BACK` mode ([4b46a84](https://github.com/anncwb/vue-vben-admin/commit/4b46a84c2b85e8da799426c54b3381ae93183db4))
+- **multiple-tab:** ignore login page ([1e63379](https://github.com/anncwb/vue-vben-admin/commit/1e63379088e1d7c823f29f607ab49d62ca22cb25))
+- resolving `Vue Router warn` ([237e65e](https://github.com/anncwb/vue-vben-admin/commit/237e65eac909368c4b4857da6c8deb1dc18e7684))
+- **table:** fix tree node align ([1e61da6](https://github.com/anncwb/vue-vben-admin/commit/1e61da644f65a79ce10fde98ee017aba7d36be10)), closes [#829](https://github.com/anncwb/vue-vben-admin/issues/829)
+- **table:** scrollbar style ([d8c3820](https://github.com/anncwb/vue-vben-admin/commit/d8c38207c08510d805a8dc66ffbba210e0cf4215))
+- **table-action:** incorrect button color of `disabled` state ([0f28e80](https://github.com/anncwb/vue-vben-admin/commit/0f28e803d0b65537216cd9f40ad5cad63c20db9b)), closes [#891](https://github.com/anncwb/vue-vben-admin/issues/891)
+- **upload:** ensure the value type is correct ([05329ce](https://github.com/anncwb/vue-vben-admin/commit/05329ce9501eb899a0bbb45320e5807c83372317))
+- **useWatermark:** fix `func` call `createWatermark` call `clear` to resizeEvent removed ([#901](https://github.com/anncwb/vue-vben-admin/issues/901)) ([a1d956d](https://github.com/anncwb/vue-vben-admin/commit/a1d956d3697cd07e0ba8910768f2a73e55f18491))
+
+### Features
+
+- **api-tree-select:** add `api` options to tree-select ([d81db89](https://github.com/anncwb/vue-vben-admin/commit/d81db890dfeb533d60f378ddb86f8ac50a31252b))
+- **basic-table:** add `ApiTreeSelect` edit component ([52af1dd](https://github.com/anncwb/vue-vben-admin/commit/52af1dd0d494e66c0af20f886dcc2b983cbb096f))
+- **demo:** multi-modal in one page usage ([7a7dab0](https://github.com/anncwb/vue-vben-admin/commit/7a7dab0c4b3602b7bd3e9381408e4168d7494c52))
+- customized user home page ([0a3683a](https://github.com/anncwb/vue-vben-admin/commit/0a3683a186ab55d34a12a5a3c6d794dfa1094ad4))
+- **api-select:** clear options before fetch ([9cf070d](https://github.com/anncwb/vue-vben-admin/commit/9cf070dd6305bb69a67ab6be85ef00bddc86fda0))
+- **demo:** add basicTree with async data expand all ([5421211](https://github.com/anncwb/vue-vben-admin/commit/542121129eb5bf65f61e7b484835591756c80f04))
+- **demo:** add search demo for apiSelect ([41e6d94](https://github.com/anncwb/vue-vben-admin/commit/41e6d94b3b64dc0d40b7ec57ecfaa4d966f202ae))
+- **demo:** demo default expanded tree table ([5f1a6cd](https://github.com/anncwb/vue-vben-admin/commit/5f1a6cdc599d5840df2dfebdaad029aac093cd81))
+- **notice-list:** add `pagination` support ([c16be2c](https://github.com/anncwb/vue-vben-admin/commit/c16be2c499d90126dfa35d699da9294c21a4ab48)), closes [#894](https://github.com/anncwb/vue-vben-admin/issues/894)
+- **table:** add `headerTop` slot ([540423e](https://github.com/anncwb/vue-vben-admin/commit/540423ecf741a815d28d7a6baa1541ac884efe95)), closes [#881](https://github.com/anncwb/vue-vben-admin/issues/881)
+
+### Performance Improvements
+
+- **menu:** Optimize the style of the bottom collapse button in the Mix menu layout ([#896](https://github.com/anncwb/vue-vben-admin/issues/896)) ([6f83070](https://github.com/anncwb/vue-vben-admin/commit/6f830703a2607c33e5d25d6d17d0e453fc2fac2e))
+- image compression configuration optimization ([cf840e3](https://github.com/anncwb/vue-vben-admin/commit/cf840e3e73b9572de0ba7bf7b32d83f6a353a8ad))
+
 # [2.6.0](https://github.com/anncwb/vue-vben-admin/compare/v2.5.2...v2.6.0) (2021-07-04)

 ### Bug Fixes
--- a/CHANGELOG.zh_CN.md
+++ b/CHANGELOG.zh_CN.md
@@ -1,3 +1,52 @@
+## 2.6.1(2021-07-19)
+
+### ✨ Features
+
+- **NoticeList** 添加分页、超长自动省略、标题点击事件、标题删除线等功能
+- **MixSider** 优化 Mix 菜单布局时 底部折叠按钮 的样式，与其它菜单布局时的风格保持一致
+- **ApiTreeSelect** 扩展`antdv`的`TreeSelect`组件，支持远程数据源，用法类似`ApiSelect`
+- **BasicTable** 新增`ApiTreeSelect`编辑组件
+- 可以为不同的用户指定不同的后台首页：
+  - 在`getUserInfo`接口返回的用户信息中增加`homePath`字段(可选)即可为当前用户定制首页路径
+
+### 🐛 Bug Fixes
+
+- **BasicTable**
+  - 修复滚动条样式问题(移除了滚动样式补丁)
+  - 修复树形表格的带有展开图标的单元格的内容对齐问题
+  - 新增`headerTop`插槽
+  - 修复操作列的按钮在 disabled 状态下的颜色显示
+  - 修复可编辑单元格的值不能直接通过修改`dataSource`来更新显示的问题
+  - 修复使用`ApiSelect`编辑组件时的数据回显问题
+  - 修复在部分场景下编辑组件可能会报`onXXX`类型错误的问题
+- **TableAction**
+  - 仅在 `action.tooltip`存在的情况下 才创建 Tooltip 组件
+  - 修复组件内的圆形按钮内容没有居中的问题
+- **AppSearch** 修复可能会搜索隐藏菜单的问题
+- **BasicUpload** 修复处理非`array`值时报错的问题
+- **Form** 修复`FormItem`的`suffix`插槽样式问题
+- **Menu**
+  - 修复左侧混合菜单的悬停触发逻辑
+  - 修复顶栏菜单在显示包含需要隐藏的菜单项目时出错的问题
+  - 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由
+- **Breadcrumb** 修复带有重定向的菜单点击无法跳转的问题
+- **Markdown** 修复初始化异常以及不能正确地动态设置 value 的问题
+- **Modal** 确保 props 正确被传递
+- **MultipleTab** 修复可能会意外创建登录路由标签的问题
+- **BasicTree** 修复搜索功能可能导致`checkedKeys`丢失的问题
+- **CodeEditor** 修复 value 不支持 v-model 用法的问题
+- **CountdownInput** 修复不支持`input`插槽的问题
+- **ApiSelect** 修复`options-change`事件参数不是`select`所使用的标准`options`数据的问题
+- **其它**
+  - 修复菜单默认折叠的配置不起作用的问题
+  - 修复`safari`浏览器报错导致网站打不开
+  - 修复在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题
+  - 修复因动态路由而产生的 `Vue Router warn`
+
+### 🎫 Chores
+
+- 添加 test 环境测试命令
+
 ## 2.6.0(2021-07-04)

 ### ✨ Features
--- a/build/utils.ts
+++ b/build/utils.ts
@@ -44,7 +44,7 @@ export function wrapperEnv(envConf: Recordable): ViteEnv {
 */
 function getConfFiles() {
  const script = process.env.npm_lifecycle_script;
-  const reg = new RegExp('--mode ([a-z]+) ');
+  const reg = new RegExp('--mode ([a-z]+)');
  const result = reg.exec(script as string) as any;
  if (result) {
    const mode = result[1] as string;
--- a/build/vite/plugin/imagemin.ts
+++ b/build/vite/plugin/imagemin.ts
@@ -13,7 +13,7 @@ export function configImageminPlugin() {
      optimizationLevel: 7,
    },
    mozjpeg: {
-      quality: 8,
+      quality: 20,
    },
    pngquant: {
      quality: [0.8, 0.9],
@@ -22,10 +22,11 @@ export function configImageminPlugin() {
    svgo: {
      plugins: [
        {
-          removeViewBox: false,
+          name: 'removeViewBox',
        },
        {
-          removeEmptyAttrs: false,
+          name: 'removeEmptyAttrs',
+          active: false,
        },
      ],
    },
--- a/commitlint.config.js
+++ b/commitlint.config.js
@@ -1,31 +1,6 @@
 module.exports = {
  ignores: [(commit) => commit.includes('init')],
  extends: ['@commitlint/config-conventional'],
-  parserPreset: {
-    parserOpts: {
-      headerPattern: /^(\w*|[\u4e00-\u9fa5]*)(?:[\(\（](.*)[\)\）])?[\:\：] (.*)/,
-      headerCorrespondence: ['type', 'scope', 'subject'],
-      referenceActions: [
-        'close',
-        'closes',
-        'closed',
-        'fix',
-        'fixes',
-        'fixed',
-        'resolve',
-        'resolves',
-        'resolved',
-      ],
-      issuePrefixes: ['#'],
-      noteKeywords: ['BREAKING CHANGE'],
-      fieldPattern: /^-(.*?)-$/,
-      revertPattern: /^Revert\s"([\s\S]*)"\s*This reverts commit (\w*)\./,
-      revertCorrespondence: ['header', 'hash'],
-      warn() {},
-      mergePattern: null,
-      mergeCorrespondence: null,
-    },
-  },
  rules: {
    'body-leading-blank': [2, 'always'],
    'footer-leading-blank': [1, 'always'],
--- a/mock/demo/select-demo.ts
+++ b/mock/demo/select-demo.ts
@@ -1,28 +1,28 @@
 import { MockMethod } from 'vite-plugin-mock';
 import { resultSuccess } from '../_util';

-const list: any[] = [];
-const demoList = (() => {
+const demoList = (keyword) => {
  const result = {
-    list: list,
+    list: [] as any[],
  };
  for (let index = 0; index < 20; index++) {
    result.list.push({
-      name: `选项${index}`,
+      name: `${keyword ?? ''}选项${index}`,
      id: `${index}`,
    });
  }
  return result;
-})();
+};

 export default [
  {
    url: '/basic-api/select/getDemoOptions',
    timeout: 1000,
-    method: 'post',
+    method: 'get',
    response: ({ query }) => {
-      console.log(query);
-      return resultSuccess(demoList);
+      const { keyword } = query;
+      console.log(keyword);
+      return resultSuccess(demoList(keyword));
    },
  },
 ] as MockMethod[];
--- a/mock/demo/tree-demo.ts
+++ b/mock/demo/tree-demo.ts
@@ -0,0 +1,38 @@
+import { MockMethod } from 'vite-plugin-mock';
+import { resultSuccess } from '../_util';
+
+const demoTreeList = (keyword) => {
+  const result = {
+    list: [] as Recordable[],
+  };
+  for (let index = 0; index < 5; index++) {
+    const children: Recordable[] = [];
+    for (let j = 0; j < 3; j++) {
+      children.push({
+        title: `${keyword ?? ''}选项${index}-${j}`,
+        value: `${index}-${j}`,
+        key: `${index}-${j}`,
+      });
+    }
+    result.list.push({
+      title: `${keyword ?? ''}选项${index}`,
+      value: `${index}`,
+      key: `${index}`,
+      children,
+    });
+  }
+  return result;
+};
+
+export default [
+  {
+    url: '/basic-api/tree/getDemoOptions',
+    timeout: 1000,
+    method: 'get',
+    response: ({ query }) => {
+      const { keyword } = query;
+      console.log(keyword);
+      return resultSuccess(demoTreeList(keyword));
+    },
+  },
+] as MockMethod[];
--- a/mock/sys/menu.ts
+++ b/mock/sys/menu.ts
@@ -5,13 +5,40 @@ import { createFakeUserList } from './user';
 // single
 const dashboardRoute = {
  path: '/dashboard',
-  name: 'Welcome',
-  component: '/dashboard/analysis/index',
+  name: 'Dashboard',
+  component: 'LAYOUT',
+  redirect: '/dashboard/analysis',
  meta: {
-    title: 'routes.dashboard.analysis',
-    affix: true,
+    title: 'routes.dashboard.dashboard',
+    hideChildrenInMenu: true,
    icon: 'bx:bx-home',
  },
+  children: [
+    {
+      path: 'analysis',
+      name: 'Analysis',
+      component: '/dashboard/analysis/index',
+      meta: {
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.analysis',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
+      },
+    },
+    {
+      path: 'workbench',
+      name: 'Workbench',
+      component: '/dashboard/workbench/index',
+      meta: {
+        hideMenu: true,
+        hideBreadcrumb: true,
+        title: 'routes.dashboard.workbench',
+        currentActiveMenu: '/dashboard',
+        icon: 'bx:bx-home',
+      },
+    },
+  ],
 };

 const backRoute = {
@@ -128,6 +155,18 @@ const sysRoute = {
      },
      component: '/demo/system/account/index',
    },
+    {
+      path: 'account_detail/:id',
+      name: 'AccountDetail',
+      meta: {
+        hideMenu: true,
+        title: 'routes.demo.system.account_detail',
+        ignoreKeepAlive: true,
+        showMenu: false,
+        currentActiveMenu: '/system/account',
+      },
+      component: '/demo/system/account/AccountDetail',
+    },
    {
      path: 'role',
      name: 'RoleManagement',
@@ -211,12 +250,21 @@ export default [
        return resultError('Invalid user token!');
      }
      const id = checkUser.userId;
-      if (!id || id === '1') {
-        return resultSuccess([dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute]);
-      }
-      if (id === '2') {
-        return resultSuccess([dashboardRoute, authRoute, levelRoute, linkRoute]);
+      let menu: Object[];
+      switch (id) {
+        case '1':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[0].path;
+          menu = [dashboardRoute, authRoute, levelRoute, sysRoute, linkRoute];
+          break;
+        case '2':
+          dashboardRoute.redirect = dashboardRoute.path + '/' + dashboardRoute.children[1].path;
+          menu = [dashboardRoute, authRoute, levelRoute, linkRoute];
+          break;
+        default:
+          menu = [];
      }
+
+      return resultSuccess(menu);
    },
  },
 ] as MockMethod[];
--- a/mock/sys/user.ts
+++ b/mock/sys/user.ts
@@ -11,6 +11,7 @@ export function createFakeUserList() {
      desc: 'manager',
      password: '123456',
      token: 'fakeToken1',
+      homePath: '/dashboard/analysis',
      roles: [
        {
          roleName: 'Super Admin',
@@ -26,6 +27,7 @@ export function createFakeUserList() {
      avatar: 'https://q1.qlogo.cn/g?b=qq&nk=339449197&s=640',
      desc: 'tester',
      token: 'fakeToken2',
+      homePath: '/dashboard/workbench',
      roles: [
        {
          roleName: 'Tester',
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vben-admin",
-  "version": "2.6.0",
+  "version": "2.6.1",
  "author": {
    "name": "vben",
    "email": "anncwb@126.com",
@@ -11,6 +11,7 @@
    "serve": "npm run dev",
    "dev": "vite",
    "build": "cross-env NODE_ENV=production vite build && esno ./build/script/postBuild.ts",
+    "build:test": "cross-env vite build --mode test && esno ./build/script/postBuild.ts",
    "build:no-cache": "yarn clean:cache && npm run build",
    "report": "cross-env REPORT=true npm run build",
    "type:check": "vue-tsc --noEmit --skipLibCheck",
@@ -20,7 +21,7 @@
    "clean:cache": "rimraf node_modules/.cache/ && rimraf node_modules/.vite",
    "clean:lib": "rimraf node_modules",
    "lint:eslint": "eslint --cache --max-warnings 0  \"{src,mock}/**/*.{vue,ts,tsx}\" --fix",
-    "lint:prettier": "prettier --write --loglevel warn \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
+    "lint:prettier": "prettier --write  \"src/**/*.{js,json,tsx,css,less,scss,vue,html,md}\"",
    "lint:stylelint": "stylelint --cache --fix \"**/*.{vue,less,postcss,css,scss}\" --cache --cache-location node_modules/.cache/stylelint/",
    "lint:lint-staged": "lint-staged -c ./.husky/lintstagedrc.js",
    "lint:pretty": "pretty-quick --staged",
@@ -34,11 +35,11 @@
  },
  "dependencies": {
    "@iconify/iconify": "^2.0.3",
-    "@logicflow/core": "^0.5.0",
-    "@logicflow/extension": "^0.5.0",
-    "@vueuse/core": "^5.0.3",
+    "@logicflow/core": "^0.6.1",
+    "@logicflow/extension": "^0.6.1",
+    "@vueuse/core": "^5.1.4",
    "@zxcvbn-ts/core": "^1.0.0-beta.0",
-    "ant-design-vue": "2.2.0-rc.1",
+    "ant-design-vue": "2.2.2",
    "axios": "^0.21.1",
    "codemirror": "^5.62.0",
    "cropperjs": "^1.5.12",
@@ -49,14 +50,14 @@
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "path-to-regexp": "^6.2.0",
-    "pinia": "^2.0.0-beta.3",
+    "pinia": "^2.0.0-beta.5",
    "print-js": "^1.6.0",
    "qrcode": "^1.4.4",
    "resize-observer-polyfill": "^1.5.1",
-    "sortablejs": "^1.13.0",
+    "sortablejs": "^1.14.0",
    "tinymce": "^5.8.2",
-    "vditor": "^3.8.5",
-    "vue": "3.1.4",
+    "vditor": "^3.8.6",
+    "vue": "3.1.5",
    "vue-i18n": "9.1.6",
    "vue-json-pretty": "^2.0.2",
    "vue-router": "^4.0.10",
@@ -66,79 +67,79 @@
  "devDependencies": {
    "@commitlint/cli": "^12.1.4",
    "@commitlint/config-conventional": "^12.1.4",
-    "@iconify/json": "^1.1.369",
+    "@iconify/json": "^1.1.374",
    "@purge-icons/generated": "^0.7.0",
-    "@types/codemirror": "^5.60.1",
-    "@types/crypto-js": "^4.0.1",
-    "@types/fs-extra": "^9.0.11",
-    "@types/inquirer": "^7.3.2",
-    "@types/intro.js": "^3.0.1",
-    "@types/jest": "^26.0.23",
+    "@types/codemirror": "^5.60.2",
+    "@types/crypto-js": "^4.0.2",
+    "@types/fs-extra": "^9.0.12",
+    "@types/inquirer": "^7.3.3",
+    "@types/intro.js": "^3.0.2",
+    "@types/jest": "^26.0.24",
    "@types/lodash-es": "^4.17.4",
-    "@types/mockjs": "^1.0.3",
-    "@types/node": "^16.0.0",
+    "@types/mockjs": "^1.0.4",
+    "@types/node": "^16.3.3",
    "@types/nprogress": "^0.2.0",
-    "@types/qrcode": "^1.4.0",
-    "@types/qs": "^6.9.6",
-    "@types/sortablejs": "^1.10.6",
-    "@typescript-eslint/eslint-plugin": "^4.28.1",
-    "@typescript-eslint/parser": "^4.28.1",
-    "@vitejs/plugin-legacy": "^1.4.3",
-    "@vitejs/plugin-vue": "^1.2.4",
+    "@types/qrcode": "^1.4.1",
+    "@types/qs": "^6.9.7",
+    "@types/sortablejs": "^1.10.7",
+    "@typescript-eslint/eslint-plugin": "^4.28.3",
+    "@typescript-eslint/parser": "^4.28.3",
+    "@vitejs/plugin-legacy": "^1.4.4",
+    "@vitejs/plugin-vue": "^1.2.5",
    "@vitejs/plugin-vue-jsx": "^1.1.6",
-    "@vue/compiler-sfc": "3.1.4",
-    "@vue/test-utils": "^2.0.0-rc.9",
-    "autoprefixer": "^10.2.6",
+    "@vue/compiler-sfc": "3.1.5",
+    "@vue/test-utils": "^2.0.0-rc.10",
+    "autoprefixer": "^10.3.1",
    "commitizen": "^4.2.4",
    "conventional-changelog-cli": "^2.1.1",
    "cross-env": "^7.0.3",
    "dotenv": "^10.0.0",
-    "eslint": "^7.30.0",
+    "eslint": "^7.31.0",
    "eslint-config-prettier": "^8.3.0",
    "eslint-define-config": "^1.0.9",
    "eslint-plugin-jest": "^24.3.6",
    "eslint-plugin-prettier": "^3.4.0",
-    "eslint-plugin-vue": "^7.12.1",
+    "eslint-plugin-vue": "^7.14.0",
    "esno": "^0.7.3",
    "fs-extra": "^10.0.0",
    "http-server": "^0.12.3",
-    "husky": "^7.0.0",
-    "inquirer": "^8.1.1",
+    "husky": "^7.0.1",
+    "inquirer": "^8.1.2",
    "is-ci": "^3.0.0",
    "jest": "^27.0.6",
    "less": "^4.1.1",
-    "lint-staged": "^11.0.0",
+    "lint-staged": "^11.0.1",
    "npm-run-all": "^4.1.5",
    "postcss": "^8.3.5",
    "prettier": "^2.3.2",
    "pretty-quick": "^3.1.1",
    "rimraf": "^3.0.2",
-    "rollup-plugin-visualizer": "5.5.1",
+    "rollup-plugin-visualizer": "5.5.2",
    "stylelint": "^13.13.1",
    "stylelint-config-prettier": "^8.0.2",
    "stylelint-config-standard": "^22.0.0",
    "stylelint-order": "^4.1.0",
    "tailwindcss": "^2.2.4",
    "ts-jest": "^27.0.3",
-    "ts-node": "^10.0.0",
+    "ts-node": "^10.1.0",
    "typescript": "4.3.5",
-    "vite": "2.4.0-beta.2",
-    "vite-plugin-compression": "^0.2.5",
+    "vite": "2.3.6",
+    "vite-plugin-compression": "^0.3.1",
    "vite-plugin-html": "^2.0.7",
-    "vite-plugin-imagemin": "^0.3.2",
-    "vite-plugin-mock": "^2.8.0",
+    "vite-plugin-imagemin": "^0.4.1",
+    "vite-plugin-mock": "^2.9.3",
    "vite-plugin-purge-icons": "^0.7.0",
    "vite-plugin-pwa": "^0.8.1",
    "vite-plugin-style-import": "^1.0.1",
-    "vite-plugin-svg-icons": "^1.0.0",
+    "vite-plugin-svg-icons": "^1.0.1",
    "vite-plugin-theme": "^0.8.1",
-    "vue-eslint-parser": "^7.7.2",
-    "vue-tsc": "^0.2.0"
+    "vue-eslint-parser": "^7.9.0",
+    "vue-tsc": "^0.2.1"
  },
  "resolutions": {
    "//": "Used to install imagemin dependencies, because imagemin may not be installed in China. If it is abroad, you can delete it",
    "bin-wrapper": "npm:bin-wrapper-china",
-    "rollup": "^2.52.7"
+    "rollup": "^2.53.2"
  },
  "repository": {
    "type": "git",
--- a/prettier.config.js
+++ b/prettier.config.js
@@ -15,6 +15,6 @@ module.exports = {
  requirePragma: false,
  proseWrap: 'never',
  htmlWhitespaceSensitivity: 'strict',
-  endOfLine: 'lf',
+  endOfLine: 'auto',
  rangeStart: 0,
 };
--- a/src/api/demo/select.ts
+++ b/src/api/demo/select.ts
@@ -8,4 +8,4 @@ enum Api {
 * @description: Get sample options value
 */
 export const optionsListApi = (params?: selectParams) =>
-  defHttp.post<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
+  defHttp.get<DemoOptionsItem[]>({ url: Api.OPTIONS_LIST, params });
--- a/src/api/demo/tree.ts
+++ b/src/api/demo/tree.ts
@@ -0,0 +1,11 @@
+import { defHttp } from '/@/utils/http/axios';
+
+enum Api {
+  TREE_OPTIONS_LIST = '/tree/getDemoOptions',
+}
+
+/**
+ * @description: Get sample options value
+ */
+export const treeOptionsListApi = (params?: Recordable) =>
+  defHttp.get<Recordable[]>({ url: Api.TREE_OPTIONS_LIST, params });
--- a/src/components/Application/src/AppLogo.vue
+++ b/src/components/Application/src/AppLogo.vue
@@ -17,6 +17,7 @@
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { PageEnum } from '/@/enums/pageEnum';
+  import { useUserStore } from '/@/store/modules/user';

  const props = {
    /**
@@ -39,6 +40,7 @@
    setup(props) {
      const { prefixCls } = useDesign('app-logo');
      const { getCollapsedShowTitle } = useMenuSetting();
+      const userStore = useUserStore();
      const { title } = useGlobSetting();
      const go = useGo();

@@ -56,7 +58,7 @@
      ]);

      function goHome() {
-        go(PageEnum.BASE_HOME);
+        go(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
      }

      return {
--- a/src/components/Application/src/search/useMenuSearch.ts
+++ b/src/components/Application/src/search/useMenuSearch.ts
@@ -55,7 +55,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
    }
    const reg = createSearchReg(unref(keyword));
    const filterMenu = filter(menuList, (item) => {
-      return reg.test(item.name);
+      return reg.test(item.name) && !item.hideMenu;
    });
    searchResult.value = handlerSearchResult(filterMenu, reg);
    activeIndex.value = 0;
@@ -64,15 +64,15 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref<ElRef>,
  function handlerSearchResult(filterMenu: Menu[], reg: RegExp, parent?: Menu) {
    const ret: SearchResult[] = [];
    filterMenu.forEach((item) => {
-      const { name, path, icon, children } = item;
-      if (reg.test(name) && !children?.length) {
+      const { name, path, icon, children, hideMenu, meta } = item;
+      if (!hideMenu && reg.test(name) && (!children?.length || meta?.hideChildrenInMenu)) {
        ret.push({
          name: parent?.name ? `${parent.name} > ${name}` : name,
          path,
          icon,
        });
      }
-      if (Array.isArray(children) && children.length) {
+      if (!meta?.hideChildrenInMenu && Array.isArray(children) && children.length) {
        ret.push(...handlerSearchResult(children, reg, item));
      }
    });
--- a/src/components/Button/src/PopConfirmButton.vue
+++ b/src/components/Button/src/PopConfirmButton.vue
@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { defineComponent, h, unref, computed } from 'vue';
+  import { computed, defineComponent, h, unref } from 'vue';
  import BasicButton from './BasicButton.vue';
  import { Popconfirm } from 'ant-design-vue';
  import { extendSlots } from '/@/utils/helper/tsxHelper';
@@ -29,19 +29,20 @@

      // get inherit binding value
      const getBindValues = computed(() => {
-        const popValues = Object.assign(
+        return Object.assign(
          {
            okText: t('common.okText'),
            cancelText: t('common.cancelText'),
          },
          { ...props, ...unref(attrs) }
        );
-        return popValues;
      });

      return () => {
        const bindValues = omit(unref(getBindValues), 'icon');
-        const Button = h(BasicButton, omit(bindValues, 'title'), extendSlots(slots));
+        const btnBind = omit(bindValues, 'title');
+        if (btnBind.disabled) btnBind.color = '';
+        const Button = h(BasicButton, btnBind, extendSlots(slots));

        // If it is not enabled, it is a normal button
        if (!props.enable) {
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -29,7 +29,7 @@
    name: 'CodeEditor',
    components: { CodeMirrorEditor },
    props,
-    emits: ['change'],
+    emits: ['change', 'update:value'],
    setup(props, { emit }) {
      const getValue = computed(() => {
        const { value, mode } = props;
@@ -42,6 +42,7 @@
      });

      function handleValueChange(v) {
+        emit('update:value', v);
        emit('change', v);
      }

--- a/src/components/CountDown/src/CountdownInput.vue
+++ b/src/components/CountDown/src/CountdownInput.vue
@@ -3,6 +3,9 @@
    <template #addonAfter>
      <CountButton :size="size" :count="count" :value="state" :beforeStartFunc="sendCodeApi" />
    </template>
+    <template #[item]="data" v-for="item in Object.keys($slots).filter((k) => k !== 'addonAfter')">
+      <slot :name="item" v-bind="data"></slot>
+    </template>
  </a-input>
 </template>
 <script lang="ts">
--- a/src/components/CountTo/src/CountTo.vue
+++ b/src/components/CountTo/src/CountTo.vue
@@ -84,7 +84,7 @@
      }

      function formatNumber(num: number | string) {
-        if (!num) {
+        if (!num && num !== 0) {
          return '';
        }
        const { decimals, decimal, separator, suffix, prefix } = props;
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -8,5 +8,6 @@ export { useForm } from './src/hooks/useForm';

 export { default as ApiSelect } from './src/components/ApiSelect.vue';
 export { default as RadioButtonGroup } from './src/components/RadioButtonGroup.vue';
+export { default as ApiTreeSelect } from './src/components/ApiTreeSelect.vue';

 export { BasicForm };
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -229,6 +229,12 @@

      function setFormModel(key: string, value: any) {
        formModel[key] = value;
+        const { validateTrigger } = unref(getBindValue);
+        if (!validateTrigger || validateTrigger === 'change') {
+          try {
+            validateFields([key]);
+          } catch (e) {}
+        }
      }

      function handleEnterPress(e: KeyboardEvent) {
--- a/src/components/Form/src/componentMap.ts
+++ b/src/components/Form/src/componentMap.ts
@@ -22,6 +22,7 @@ import {

 import RadioButtonGroup from './components/RadioButtonGroup.vue';
 import ApiSelect from './components/ApiSelect.vue';
+import ApiTreeSelect from './components/ApiTreeSelect.vue';
 import { BasicUpload } from '/@/components/Upload';
 import { StrengthMeter } from '/@/components/StrengthMeter';
 import { IconPicker } from '/@/components/Icon';
@@ -40,6 +41,7 @@ componentMap.set('AutoComplete', AutoComplete);
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
 componentMap.set('TreeSelect', TreeSelect);
+componentMap.set('ApiTreeSelect', ApiTreeSelect);
 componentMap.set('Switch', Switch);
 componentMap.set('RadioButtonGroup', RadioButtonGroup);
 componentMap.set('RadioGroup', Radio.Group);
--- a/src/components/Form/src/components/ApiSelect.vue
+++ b/src/components/Form/src/components/ApiSelect.vue
@@ -106,7 +106,7 @@
      async function fetch() {
        const api = props.api;
        if (!api || !isFunction(api)) return;
-
+        options.value = [];
        try {
          loading.value = true;
          const res = await api(props.params);
@@ -134,7 +134,7 @@
      }

      function emitChange() {
-        emit('options-change', unref(options));
+        emit('options-change', unref(getOptions));
      }

      function handleChange(_, ...args) {
--- a/src/components/Form/src/components/ApiTreeSelect.vue
+++ b/src/components/Form/src/components/ApiTreeSelect.vue
@@ -0,0 +1,85 @@
+<template>
+  <a-tree-select v-bind="getAttrs" @change="handleChange">
+    <template #[item]="data" v-for="item in Object.keys($slots)">
+      <slot :name="item" v-bind="data"></slot>
+    </template>
+    <template #suffixIcon v-if="loading">
+      <LoadingOutlined spin />
+    </template>
+  </a-tree-select>
+</template>
+
+<script lang="ts">
+  import { computed, defineComponent, watch, ref, onMounted, unref } from 'vue';
+  import { TreeSelect } from 'ant-design-vue';
+  import { isArray, isFunction } from '/@/utils/is';
+  import { get } from 'lodash-es';
+  import { propTypes } from '/@/utils/propTypes';
+  import { LoadingOutlined } from '@ant-design/icons-vue';
+  export default defineComponent({
+    name: 'ApiTreeSelect',
+    components: { ATreeSelect: TreeSelect, LoadingOutlined },
+    props: {
+      api: { type: Function as PropType<(arg?: Recordable) => Promise<Recordable>> },
+      params: { type: Object },
+      immediate: { type: Boolean, default: true },
+      resultField: propTypes.string.def(''),
+    },
+    emits: ['options-change', 'change'],
+    setup(props, { attrs, emit }) {
+      const treeData = ref<Recordable[]>([]);
+      const isFirstLoaded = ref<Boolean>(false);
+      const loading = ref(false);
+      const getAttrs = computed(() => {
+        return {
+          ...(props.api ? { treeData: unref(treeData) } : {}),
+          ...attrs,
+        };
+      });
+
+      function handleChange(...args) {
+        emit('change', ...args);
+      }
+
+      watch(
+        () => props.params,
+        () => {
+          isFirstLoaded.value && fetch();
+        }
+      );
+
+      watch(
+        () => props.immediate,
+        (v) => {
+          v && !isFirstLoaded.value && fetch();
+        }
+      );
+
+      onMounted(() => {
+        props.immediate && fetch();
+      });
+
+      async function fetch() {
+        const { api } = props;
+        if (!api || !isFunction(api)) return;
+        loading.value = true;
+        treeData.value = [];
+        let result;
+        try {
+          result = await api(props.params);
+        } catch (e) {
+          console.error(e);
+        }
+        loading.value = false;
+        if (!result) return;
+        if (!isArray(result)) {
+          result = get(result, props.resultField);
+        }
+        treeData.value = (result as Recordable[]) || [];
+        isFirstLoaded.value = true;
+        emit('options-change', treeData.value);
+      }
+      return { getAttrs, loading, handleChange };
+    },
+  });
+</script>
--- a/src/components/Form/src/components/FormAction.vue
+++ b/src/components/Form/src/components/FormAction.vue
@@ -1,40 +1,42 @@
 <template>
  <a-col v-bind="actionColOpt" :style="{ textAlign: 'right' }" v-if="showActionButtonGroup">
-    <FormItem>
-      <slot name="resetBefore"></slot>
-      <Button
-        type="default"
-        class="mr-2"
-        v-bind="getResetBtnOptions"
-        @click="resetAction"
-        v-if="showResetButton"
-      >
-        {{ getResetBtnOptions.text }}
-      </Button>
-      <slot name="submitBefore"></slot>
+    <div style="width: 100%; text-align: right">
+      <FormItem>
+        <slot name="resetBefore"></slot>
+        <Button
+          type="default"
+          class="mr-2"
+          v-bind="getResetBtnOptions"
+          @click="resetAction"
+          v-if="showResetButton"
+        >
+          {{ getResetBtnOptions.text }}
+        </Button>
+        <slot name="submitBefore"></slot>

-      <Button
-        type="primary"
-        class="mr-2"
-        v-bind="getSubmitBtnOptions"
-        @click="submitAction"
-        v-if="showSubmitButton"
-      >
-        {{ getSubmitBtnOptions.text }}
-      </Button>
+        <Button
+          type="primary"
+          class="mr-2"
+          v-bind="getSubmitBtnOptions"
+          @click="submitAction"
+          v-if="showSubmitButton"
+        >
+          {{ getSubmitBtnOptions.text }}
+        </Button>

-      <slot name="advanceBefore"></slot>
-      <Button
-        type="link"
-        size="small"
-        @click="toggleAdvanced"
-        v-if="showAdvancedButton && !hideAdvanceBtn"
-      >
-        {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
-        <BasicArrow class="ml-1" :expand="!isAdvanced" up />
-      </Button>
-      <slot name="advanceAfter"></slot>
-    </FormItem>
+        <slot name="advanceBefore"></slot>
+        <Button
+          type="link"
+          size="small"
+          @click="toggleAdvanced"
+          v-if="showAdvancedButton && !hideAdvanceBtn"
+        >
+          {{ isAdvanced ? t('component.form.putAway') : t('component.form.unfold') }}
+          <BasicArrow class="ml-1" :expand="!isAdvanced" up />
+        </Button>
+        <slot name="advanceAfter"></slot>
+      </FormItem>
+    </div>
  </a-col>
 </template>
 <script lang="ts">
@@ -43,7 +45,7 @@
  import { defineComponent, computed, PropType } from 'vue';
  import { Form, Col } from 'ant-design-vue';
  import { Button, ButtonProps } from '/@/components/Button';
-  import { BasicArrow } from '/@/components/Basic/index';
+  import { BasicArrow } from '/@/components/Basic';
  import { useFormContext } from '../hooks/useFormContext';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { propTypes } from '/@/utils/propTypes';
--- a/src/components/Form/src/components/FormItem.vue
+++ b/src/components/Form/src/components/FormItem.vue
@@ -326,10 +326,10 @@
            labelCol={labelCol}
            wrapperCol={wrapperCol}
          >
-            <>
-              {getContent()}
+            <div style="display:flex">
+              <div style="flex:1">{getContent()}</div>
              {showSuffix && <span class="suffix">{getSuffix}</span>}
-            </>
+            </div>
          </Form.Item>
        );
      }
--- a/src/components/Form/src/types/formItem.ts
+++ b/src/components/Form/src/types/formItem.ts
@@ -1,6 +1,6 @@
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import type { ColProps } from 'ant-design-vue/lib/grid/Col';
-import type { VNodeChild } from 'vue';
+import type { HTMLAttributes, VNodeChild } from 'vue';

 export interface FormItem {
  /**
@@ -39,7 +39,7 @@ export interface FormItem {
   * The layout of label. You can set span offset to something like {span: 3, offset: 12} or sm: {span: 3, offset: 12} same as with <Col>
   * @type Col
   */
-  labelCol?: ColProps;
+  labelCol?: ColProps & HTMLAttributes;

  /**
   * Whether provided or not, it will be generated by the validation rule.
--- a/src/components/Form/src/types/index.ts
+++ b/src/components/Form/src/types/index.ts
@@ -91,6 +91,7 @@ export type ComponentType =
  | 'Select'
  | 'ApiSelect'
  | 'TreeSelect'
+  | 'ApiTreeSelect'
  | 'RadioButtonGroup'
  | 'RadioGroup'
  | 'Checkbox'
--- a/src/components/Markdown/src/Markdown.vue
+++ b/src/components/Markdown/src/Markdown.vue
@@ -5,18 +5,19 @@
  import {
    defineComponent,
    ref,
-    onMounted,
    unref,
-    onUnmounted,
    nextTick,
    computed,
    watch,
+    onBeforeUnmount,
+    onDeactivated,
  } from 'vue';
  import Vditor from 'vditor';
  import 'vditor/dist/index.css';
  import { useLocale } from '/@/locales/useLocale';
  import { useModalContext } from '../../Modal';
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
+  import { onMountedOrActivated } from '/@/hooks/core/onMountedOrActivated';

  type Lang = 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' | undefined;

@@ -26,7 +27,7 @@
      height: { type: Number, default: 360 },
      value: { type: String, default: '' },
    },
-    emits: ['change', 'get'],
+    emits: ['change', 'get', 'update:value'],
    setup(props, { attrs, emit }) {
      const wrapRef = ref<ElRef>(null);
      const vditorRef = ref<Nullable<Vditor>>(null);
@@ -36,17 +37,16 @@

      const { getLocale } = useLocale();
      const { getDarkMode } = useRootSetting();
+      const valueRef = ref('');

      watch(
        [() => getDarkMode.value, () => initedRef.value],
-        ([val]) => {
-          const vditor = unref(vditorRef);
-
-          if (!vditor) {
+        ([val, inited]) => {
+          if (!inited) {
            return;
          }
-          const theme = val === 'dark' ? 'dark' : undefined;
-          vditor.setTheme(theme as 'dark');
+          const theme = val === 'dark' ? 'dark' : 'classic';
+          instance.getVditor()?.setTheme(theme);
        },
        {
          immediate: true,
@@ -54,6 +54,16 @@
        }
      );

+      watch(
+        () => props.value,
+        (v) => {
+          if (v !== valueRef.value) {
+            instance.getVditor()?.setValue(v);
+          }
+          valueRef.value = v;
+        }
+      );
+
      const getCurrentLang = computed((): 'zh_CN' | 'en_US' | 'ja_JP' | 'ko_KR' => {
        let lang: Lang;
        switch (unref(getLocale)) {
@@ -72,54 +82,58 @@
        return lang;
      });
      function init() {
-        const wrapEl = unref(wrapRef);
+        const wrapEl = unref(wrapRef) as HTMLElement;
        if (!wrapEl) return;
        const bindValue = { ...attrs, ...props };
-        vditorRef.value = new Vditor(wrapEl, {
-          theme: 'classic',
+        const insEditor = new Vditor(wrapEl, {
+          theme: getDarkMode.value === 'dark' ? 'dark' : 'classic',
          lang: unref(getCurrentLang),
          mode: 'sv',
          preview: {
            actions: [],
          },
          input: (v) => {
-            // emit('update:value', v);
+            valueRef.value = v;
+            emit('update:value', v);
            emit('change', v);
          },
+          after: () => {
+            nextTick(() => {
+              modalFn?.redoModalHeight?.();
+              insEditor.setValue(valueRef.value);
+              vditorRef.value = insEditor;
+              initedRef.value = true;
+              emit('get', instance);
+            });
+          },
          blur: () => {
-            unref(vditorRef)?.setValue(props.value);
+            //unref(vditorRef)?.setValue(props.value);
          },
          ...bindValue,
          cache: {
            enable: false,
          },
        });
-        initedRef.value = true;
      }

      const instance = {
        getVditor: (): Vditor => vditorRef.value!,
      };

-      onMounted(() => {
-        nextTick(() => {
-          init();
-          setTimeout(() => {
-            modalFn?.redoModalHeight?.();
-          }, 200);
-        });
-
-        emit('get', instance);
-      });
-
-      onUnmounted(() => {
+      function destroy() {
        const vditorInstance = unref(vditorRef);
        if (!vditorInstance) return;
        try {
          vditorInstance?.destroy?.();
        } catch (error) {}
-      });
+        vditorRef.value = null;
+        initedRef.value = false;
+      }

+      onMountedOrActivated(init);
+
+      onBeforeUnmount(destroy);
+      onDeactivated(destroy);
      return {
        wrapRef,
        ...instance,
--- a/src/components/Modal/src/BasicModal.vue
+++ b/src/components/Modal/src/BasicModal.vue
@@ -18,7 +18,7 @@
    </template>

    <template #footer v-if="!$slots.footer">
-      <ModalFooter v-bind="getProps" @ok="handleOk" @cancel="handleCancel">
+      <ModalFooter v-bind="getBindValue" @ok="handleOk" @cancel="handleCancel">
        <template #[item]="data" v-for="item in Object.keys($slots)">
          <slot :name="item" v-bind="data"></slot>
        </template>
@@ -82,7 +82,7 @@
    setup(props, { emit, attrs }) {
      const visibleRef = ref(false);
      const propsRef = ref<Partial<ModalProps> | null>(null);
-      const modalWrapperRef = ref<ComponentRef>(null);
+      const modalWrapperRef = ref<any>(null);

      // modal   Bottom and top height
      const extHeightRef = ref(0);
@@ -133,7 +133,12 @@
      });

      const getBindValue = computed((): Recordable => {
-        const attr = { ...attrs, ...unref(getProps) };
+        const attr = {
+          ...attrs,
+          ...unref(getMergeProps),
+          visible: unref(visibleRef),
+          wrapClassName: unref(getWrapClassName),
+        };
        if (unref(fullScreenRef)) {
          return omit(attr, 'height');
        }
--- a/src/components/Table/src/componentMap.ts
+++ b/src/components/Table/src/componentMap.ts
@@ -9,7 +9,7 @@ import {
  TimePicker,
 } from 'ant-design-vue';
 import type { ComponentType } from './types/componentType';
-import { ApiSelect } from '/@/components/Form';
+import { ApiSelect, ApiTreeSelect } from '/@/components/Form';

 const componentMap = new Map<ComponentType, Component>();

@@ -17,6 +17,7 @@ componentMap.set('Input', Input);
 componentMap.set('InputNumber', InputNumber);
 componentMap.set('Select', Select);
 componentMap.set('ApiSelect', ApiSelect);
+componentMap.set('ApiTreeSelect', ApiTreeSelect);
 componentMap.set('Switch', Switch);
 componentMap.set('Checkbox', Checkbox);
 componentMap.set('DatePicker', DatePicker);
--- a/src/components/Table/src/components/ExpandIcon.tsx
+++ b/src/components/Table/src/components/ExpandIcon.tsx
@@ -3,11 +3,15 @@ import { BasicArrow } from '/@/components/Basic';
 export default () => {
  return (props: Recordable) => {
    if (!props.expandable) {
-      return <span />;
+      if (props.expanded) {
+        return <span class="ant-table-row-expand-icon ant-table-row-spaced" />;
+      } else {
+        return <span />;
+      }
    }
    return (
      <BasicArrow
-        class="mr-1"
+        style="margin-right: 8px"
        iconStyle="margin-top: -2px;"
        onClick={(e: Event) => {
          props.onExpand(props.record, e);
--- a/src/components/Table/src/components/TableAction.vue
+++ b/src/components/Table/src/components/TableAction.vue
@@ -1,12 +1,16 @@
 <template>
  <div :class="[prefixCls, getAlign]" @click="onCellClick">
    <template v-for="(action, index) in getActions" :key="`${index}-${action.label}`">
-      <Tooltip v-bind="getTooltip(action.tooltip)">
+      <Tooltip v-if="action.tooltip" v-bind="getTooltip(action.tooltip)">
        <PopConfirmButton v-bind="action">
-          <Icon :icon="action.icon" class="mr-1" v-if="action.icon" />
-          {{ action.label }}
+          <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
+          <template v-if="action.label">{{ action.label }}</template>
        </PopConfirmButton>
      </Tooltip>
+      <PopConfirmButton v-else v-bind="action">
+        <Icon :icon="action.icon" :class="{ 'mr-1': !!action.label }" v-if="action.icon" />
+        <template v-if="action.label">{{ action.label }}</template>
+      </PopConfirmButton>
      <Divider
        type="vertical"
        class="action-divider"
@@ -126,15 +130,13 @@
        return actionColumn?.align ?? 'left';
      });

-      const getTooltip = computed(() => {
-        return (data: string | TooltipProps): TooltipProps => {
-          if (isString(data)) {
-            return { title: data, placement: 'bottom' };
-          } else {
-            return Object.assign({ placement: 'bottom' }, data);
-          }
-        };
-      });
+      function getTooltip(data: string | TooltipProps): TooltipProps {
+        if (isString(data)) {
+          return { title: data, placement: 'bottom' };
+        } else {
+          return Object.assign({ placement: 'bottom' }, data);
+        }
+      }

      function onCellClick(e: MouseEvent) {
        if (!props.stopButtonPropagation) return;
@@ -180,6 +182,12 @@
      }
    }

+    button.ant-btn-circle {
+      span {
+        margin: auto !important;
+      }
+    }
+
    .ant-divider,
    .ant-divider-vertical {
      margin: 0 2px;
--- a/src/components/Table/src/components/TableHeader.vue
+++ b/src/components/Table/src/components/TableHeader.vue
@@ -1,16 +1,25 @@
 <template>
-  <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
-
-  <TableTitle :helpMessage="titleHelpMessage" :title="title" v-if="!$slots.tableTitle && title" />
-
-  <div :class="`${prefixCls}__toolbar`">
-    <slot name="toolbar"></slot>
-    <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
-    <TableSetting
-      :setting="tableSetting"
-      v-if="showTableSetting"
-      @columns-change="handleColumnChange"
-    />
+  <div style="width: 100%">
+    <div v-if="$slots.headerTop" style="margin: 5px">
+      <slot name="headerTop"></slot>
+    </div>
+    <div style="width: 100%; display: flex">
+      <slot name="tableTitle" v-if="$slots.tableTitle"></slot>
+      <TableTitle
+        :helpMessage="titleHelpMessage"
+        :title="title"
+        v-if="!$slots.tableTitle && title"
+      />
+      <div :class="`${prefixCls}__toolbar`">
+        <slot name="toolbar"></slot>
+        <Divider type="vertical" v-if="$slots.toolbar && showTableSetting" />
+        <TableSetting
+          :setting="tableSetting"
+          v-if="showTableSetting"
+          @columns-change="handleColumnChange"
+        />
+      </div>
+    </div>
  </div>
 </template>
 <script lang="ts">
--- a/src/components/Table/src/components/editable/CellComponent.ts
+++ b/src/components/Table/src/components/editable/CellComponent.ts
@@ -19,7 +19,7 @@ export const CellComponent: FunctionalComponent = (
  const Comp = componentMap.get(component) as typeof defineComponent;

  const DefaultComp = h(Comp, attrs);
-  if (!rule) {
+  if (!rule || !popoverVisible) {
    return DefaultComp;
  }
  return h(
--- a/src/components/Table/src/components/editable/EditableCell.vue
+++ b/src/components/Table/src/components/editable/EditableCell.vue
@@ -45,6 +45,7 @@
  import { isString, isBoolean, isFunction, isNumber, isArray } from '/@/utils/is';
  import { createPlaceholderMessage } from './helper';
  import { set, omit } from 'lodash-es';
+  import { treeToList } from '/@/utils/helper/treeHelper';

  export default defineComponent({
    name: 'EditableCell',
@@ -154,6 +155,7 @@

      watchEffect(() => {
        defaultValueRef.value = props.value;
+        currentValueRef.value = props.value;
      });

      watchEffect(() => {
@@ -275,9 +277,23 @@
        }
      }

-      // only ApiSelect
+      // only ApiSelect or TreeSelect
      function handleOptionsChange(options: LabelValueOptions) {
-        optionsRef.value = options;
+        const { replaceFields } = props.column?.editComponentProps ?? {};
+        const component = unref(getComponent);
+        if (component === 'ApiTreeSelect') {
+          const { title = 'title', value = 'value', children = 'children' } = replaceFields || {};
+          let listOptions: Recordable[] = treeToList(options, { children });
+          listOptions = listOptions.map((item) => {
+            return {
+              label: item[title],
+              value: item[value],
+            };
+          });
+          optionsRef.value = listOptions as LabelValueOptions;
+        } else {
+          optionsRef.value = options;
+        }
      }

      function initCbs(cbs: 'submitCbs' | 'validCbs' | 'cancelCbs', handle: Fn) {
--- a/src/components/Table/src/hooks/useTableHeader.ts
+++ b/src/components/Table/src/hooks/useTableHeader.ts
@@ -41,6 +41,11 @@ export function useTableHeader(
                      tableTitle: () => getSlot(slots, 'tableTitle'),
                    }
                  : {}),
+                ...(slots.headerTop
+                  ? {
+                      headerTop: () => getSlot(slots, 'headerTop'),
+                    }
+                  : {}),
              }
            ),
    };
--- a/src/components/Table/src/hooks/useTableScroll.ts
+++ b/src/components/Table/src/hooks/useTableScroll.ts
@@ -68,6 +68,23 @@ export function useTableScroll(
      bodyEl = tableEl.querySelector('.ant-table-body');
    }

+    const hasScrollBarY = bodyEl.scrollHeight > bodyEl.clientHeight;
+    const hasScrollBarX = bodyEl.scrollWidth > bodyEl.clientWidth;
+
+    if (hasScrollBarY) {
+      tableEl.classList.contains('hide-scrollbar-y') &&
+        tableEl.classList.remove('hide-scrollbar-y');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-y') && tableEl.classList.add('hide-scrollbar-y');
+    }
+
+    if (hasScrollBarX) {
+      tableEl.classList.contains('hide-scrollbar-x') &&
+        tableEl.classList.remove('hide-scrollbar-x');
+    } else {
+      !tableEl.classList.contains('hide-scrollbar-x') && tableEl.classList.add('hide-scrollbar-x');
+    }
+
    bodyEl!.style.height = 'unset';

    if (!unref(getCanResize) || tableData.length === 0) return;
--- a/src/components/Table/src/types/componentType.ts
+++ b/src/components/Table/src/types/componentType.ts
@@ -3,6 +3,7 @@ export type ComponentType =
  | 'InputNumber'
  | 'Select'
  | 'ApiSelect'
+  | 'ApiTreeSelect'
  | 'Checkbox'
  | 'Switch'
  | 'DatePicker'
--- a/src/components/Tree/src/Tree.vue
+++ b/src/components/Tree/src/Tree.vue
@@ -18,8 +18,8 @@
  import TreeHeader from './TreeHeader.vue';
  import { ScrollContainer } from '/@/components/Container';

-  import { omit, get } from 'lodash-es';
-  import { isBoolean, isFunction } from '/@/utils/is';
+  import { omit, get, difference } from 'lodash-es';
+  import { isArray, isBoolean, isFunction } from '/@/utils/is';
  import { extendSlots, getSlot } from '/@/utils/helper/tsxHelper';
  import { filter } from '/@/utils/helper/treeHelper';

@@ -90,8 +90,19 @@
            emit('update:selectedKeys', v);
          },
          onCheck: (v: CheckKeys, e: CheckEvent) => {
-            state.checkedKeys = v;
-            const rawVal = toRaw(v);
+            let currentValue = toRaw(state.checkedKeys) as Keys;
+            if (isArray(currentValue) && searchState.startSearch) {
+              const { key } = unref(getReplaceFields);
+              currentValue = difference(currentValue, getChildrenKeys(e.node.$attrs.node[key]));
+              if (e.checked) {
+                currentValue.push(e.node.$attrs.node[key]);
+              }
+              state.checkedKeys = currentValue;
+            } else {
+              state.checkedKeys = v;
+            }
+
+            const rawVal = toRaw(state.checkedKeys);
            emit('update:value', rawVal);
            emit('check', rawVal, e);
          },
@@ -115,6 +126,7 @@
        filterByLevel,
        updateNodeByKey,
        getAllKeys,
+        getChildrenKeys,
      } = useTree(treeDataRef, getReplaceFields);

      function getIcon(params: Recordable, icon?: string) {
--- a/src/components/Tree/src/useTree.ts
+++ b/src/components/Tree/src/useTree.ts
@@ -27,6 +27,28 @@ export function useTree(
    return keys as Keys;
  }

+  function getChildrenKeys(nodeKey: string | number, list?: TreeDataItem[]): Keys {
+    const keys: Keys = [];
+    const treeData = list || unref(treeDataRef);
+    const { key: keyField, children: childrenField } = unref(getReplaceFields);
+    if (!childrenField || !keyField) return keys;
+    for (let index = 0; index < treeData.length; index++) {
+      const node = treeData[index];
+      const children = node[childrenField];
+      if (nodeKey === node[keyField]) {
+        keys.push(node[keyField]!);
+        if (children && children.length) {
+          keys.push(...(getAllKeys(children) as string[]));
+        }
+      } else {
+        if (children && children.length) {
+          keys.push(...getChildrenKeys(nodeKey, children));
+        }
+      }
+    }
+    return keys as Keys;
+  }
+
  // Update node
  function updateNodeByKey(key: string, node: TreeDataItem, list?: TreeDataItem[]) {
    if (!key) return;
@@ -146,5 +168,6 @@ export function useTree(
    filterByLevel,
    updateNodeByKey,
    getAllKeys,
+    getChildrenKeys,
  };
 }
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -46,6 +46,7 @@
  import { uploadContainerProps } from './props';
  import { omit } from 'lodash-es';
  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isArray } from '/@/utils/is';

  export default defineComponent({
    name: 'BasicUpload',
@@ -77,7 +78,7 @@
      watch(
        () => props.value,
        (value = []) => {
-          fileList.value = value;
+          fileList.value = isArray(value) ? value : [];
        },
        { immediate: true }
      );
--- a/src/components/Upload/src/UploadPreviewModal.vue
+++ b/src/components/Upload/src/UploadPreviewModal.vue
@@ -20,6 +20,7 @@
  import { downloadByUrl } from '/@/utils/file/download';
  import { createPreviewColumns, createPreviewActionColumn } from './data';
  import { useI18n } from '/@/hooks/web/useI18n';
+  import { isArray } from '/@/utils/is';

  export default defineComponent({
    components: { BasicModal, FileList },
@@ -33,6 +34,7 @@
      watch(
        () => props.value,
        (value) => {
+          if (!isArray(value)) value = [];
          fileListRef.value = value
            .filter((item) => !!item)
            .map((item) => {
--- a/src/design/ant/index.less
+++ b/src/design/ant/index.less
@@ -1,7 +1,7 @@
@import './pagination.less';
@import './input.less';
@import './btn.less';
-@import './table.less';
+// @import './table.less';

 // TODO beta.11 fix
 .ant-col {
--- a/src/design/ant/table.less
+++ b/src/design/ant/table.less
@@ -2,7 +2,7 @@

 // fix table unnecessary scrollbar
 .@{prefix-cls} {
-  .ant-table-wrapper {
+  .hide-scrollbar-y {
    .ant-spin-nested-loading {
      .ant-spin-container {
        .ant-table {
@@ -13,7 +13,7 @@
              }

              .ant-table-body {
-                overflow: auto !important;
+                overflow-y: auto !important;
              }
            }

@@ -24,6 +24,50 @@
                }
              }
            }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-y: auto !important;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .hide-scrollbar-x {
+    .ant-spin-nested-loading {
+      .ant-spin-container {
+        .ant-table {
+          .ant-table-content {
+            .ant-table-scroll {
+              .ant-table-hide-scrollbar {
+                //overflow-x: auto !important;
+              }
+
+              .ant-table-body {
+                overflow: auto !important;
+              }
+            }
+
+            .ant-table-fixed-right {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
+
+            .ant-table-fixed-left {
+              .ant-table-body-outer {
+                .ant-table-body-inner {
+                  overflow-x: auto !important;
+                }
+              }
+            }
          }
        }
      }
--- a/src/hooks/web/useWatermark.ts
+++ b/src/hooks/web/useWatermark.ts
@@ -1,26 +1,36 @@
-import { getCurrentInstance, onBeforeUnmount, ref, Ref, unref } from 'vue';
+import { getCurrentInstance, onBeforeUnmount, ref, Ref, shallowRef, unref } from 'vue';
+import { useRafThrottle } from '/@/utils/domUtils';
+import { addResizeListener, removeResizeListener } from '/@/utils/event';
+import { isDef } from '/@/utils/is';

 const domSymbol = Symbol('watermark-dom');

 export function useWatermark(
  appendEl: Ref<HTMLElement | null> = ref(document.body) as Ref<HTMLElement>
 ) {
-  let func: Fn = () => {};
+  const func = useRafThrottle(function () {
+    const el = unref(appendEl);
+    if (!el) return;
+    const { clientHeight: height, clientWidth: width } = el;
+    updateWatermark({ height, width });
+  });
  const id = domSymbol.toString();
-  const clear = () => {
-    const domId = document.getElementById(id);
-    if (domId) {
-      const el = unref(appendEl);
-      el && el.removeChild(domId);
-    }
-    window.removeEventListener('resize', func);
-  };
-  const createWatermark = (str: string) => {
-    clear();
+  const watermarkEl = shallowRef<HTMLElement>();

+  const clear = () => {
+    const domId = unref(watermarkEl);
+    watermarkEl.value = undefined;
+    const el = unref(appendEl);
+    if (!el) return;
+    domId && el.removeChild(domId);
+    removeResizeListener(el, func);
+  };
+
+  function createBase64(str: string) {
    const can = document.createElement('canvas');
-    can.width = 300;
-    can.height = 240;
+    const width = 300;
+    const height = 240;
+    Object.assign(can, { width, height });

    const cans = can.getContext('2d');
    if (cans) {
@@ -29,30 +39,55 @@ export function useWatermark(
      cans.fillStyle = 'rgba(0, 0, 0, 0.15)';
      cans.textAlign = 'left';
      cans.textBaseline = 'middle';
-      cans.fillText(str, can.width / 20, can.height);
+      cans.fillText(str, width / 20, height);
    }
+    return can.toDataURL('image/png');
+  }

+  function updateWatermark(
+    options: {
+      width?: number;
+      height?: number;
+      str?: string;
+    } = {}
+  ) {
+    const el = unref(watermarkEl);
+    if (!el) return;
+    if (isDef(options.width)) {
+      el.style.width = `${options.width}px`;
+    }
+    if (isDef(options.height)) {
+      el.style.height = `${options.height}px`;
+    }
+    if (isDef(options.str)) {
+      el.style.background = `url(${createBase64(options.str)}) left top repeat`;
+    }
+  }
+
+  const createWatermark = (str: string) => {
+    if (unref(watermarkEl)) {
+      updateWatermark({ str });
+      return id;
+    }
    const div = document.createElement('div');
+    watermarkEl.value = div;
    div.id = id;
    div.style.pointerEvents = 'none';
    div.style.top = '0px';
    div.style.left = '0px';
    div.style.position = 'absolute';
    div.style.zIndex = '100000';
-    div.style.width = document.documentElement.clientWidth + 'px';
-    div.style.height = document.documentElement.clientHeight + 'px';
-    div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
    const el = unref(appendEl);
-    el && el.appendChild(div);
+    if (!el) return id;
+    const { clientHeight: height, clientWidth: width } = el;
+    updateWatermark({ str, width, height });
+    el.appendChild(div);
    return id;
  };

  function setWatermark(str: string) {
    createWatermark(str);
-    func = () => {
-      createWatermark(str);
-    };
-    window.addEventListener('resize', func);
+    addResizeListener(document.documentElement, func);
    const instance = getCurrentInstance();
    if (instance) {
      onBeforeUnmount(() => {
--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -1,9 +1,9 @@
 <template>
  <div :class="[prefixCls, `${prefixCls}--${theme}`]">
    <a-breadcrumb :routes="routes">
-      <template #itemRender="{ route, routes, paths }">
+      <template #itemRender="{ route, routes: routesMatched, paths }">
        <Icon :icon="getIcon(route)" v-if="getShowBreadCrumbIcon && getIcon(route)" />
-        <span v-if="!hasRedirect(routes, route)">
+        <span v-if="!hasRedirect(routesMatched, route)">
          {{ t(route.name || route.meta.title) }}
        </span>
        <router-link v-else to="" @click="handleClick(route, paths, $event)">
@@ -15,6 +15,7 @@
 </template>
 <script lang="ts">
  import type { RouteLocationMatched } from 'vue-router';
+  import { useRouter } from 'vue-router';
  import type { Menu } from '/@/router/types';

  import { defineComponent, ref, watchEffect } from 'vue';
@@ -26,7 +27,6 @@
  import { useRootSetting } from '/@/hooks/setting/useRootSetting';
  import { useGo } from '/@/hooks/web/usePage';
  import { useI18n } from '/@/hooks/web/useI18n';
-  import { useRouter } from 'vue-router';

  import { propTypes } from '/@/utils/propTypes';
  import { isString } from '/@/utils/is';
@@ -96,7 +96,7 @@
      }

      function filterItem(list: RouteLocationMatched[]) {
-        let resultList = filter(list, (item) => {
+        return filter(list, (item) => {
          const { meta, name } = item;
          if (!meta) {
            return !!name;
@@ -107,8 +107,6 @@
          }
          return true;
        }).filter((item) => !item.meta?.hideBreadcrumb || !item.meta?.hideMenu);
-
-        return resultList;
      }

      function handleClick(route: RouteLocationMatched, paths: string[], e: Event) {
@@ -140,10 +138,7 @@
      }

      function hasRedirect(routes: RouteLocationMatched[], route: RouteLocationMatched) {
-        if (routes.indexOf(route) === routes.length - 1) {
-          return false;
-        }
-        return true;
+        return routes.indexOf(route) !== routes.length - 1;
      }

      function getIcon(route) {
--- a/src/layouts/default/header/components/notify/NoticeList.vue
+++ b/src/layouts/default/header/components/notify/NoticeList.vue
@@ -1,11 +1,20 @@
 <template>
-  <a-list :class="prefixCls">
-    <template v-for="item in list" :key="item.id">
+  <a-list :class="prefixCls" bordered :pagination="getPagination">
+    <template v-for="item in getData" :key="item.id">
      <a-list-item class="list-item">
        <a-list-item-meta>
          <template #title>
            <div class="title">
-              {{ item.title }}
+              <a-typography-paragraph
+                @click="handleTitleClick(item)"
+                style="width: 100%; margin-bottom: 0 !important"
+                :style="{ cursor: isTitleClickable ? 'pointer' : '' }"
+                :delete="!!item.titleDelete"
+                :ellipsis="
+                  $props.titleRows > 0 ? { rows: $props.titleRows, tooltip: item.title } : false
+                "
+                :content="item.title"
+              />
              <div class="extra" v-if="item.extra">
                <a-tag class="tag" :color="item.color">
                  {{ item.extra }}
@@ -21,8 +30,16 @@

          <template #description>
            <div>
-              <div class="description">
-                {{ item.description }}
+              <div class="description" v-if="item.description">
+                <a-typography-paragraph
+                  style="width: 100%; margin-bottom: 0 !important"
+                  :ellipsis="
+                    $props.descRows > 0
+                      ? { rows: $props.descRows, tooltip: item.description }
+                      : false
+                  "
+                  :content="item.description"
+                />
              </div>
              <div class="datetime">
                {{ item.datetime }}
@@ -35,16 +52,18 @@
  </a-list>
 </template>
 <script lang="ts">
-  import { defineComponent, PropType } from 'vue';
+  import { computed, defineComponent, PropType, ref, watch, unref } from 'vue';
  import { ListItem } from './data';
  import { useDesign } from '/@/hooks/web/useDesign';
-  import { List, Avatar, Tag } from 'ant-design-vue';
+  import { List, Avatar, Tag, Typography } from 'ant-design-vue';
+  import { isNumber } from '/@/utils/is';
  export default defineComponent({
    components: {
      [Avatar.name]: Avatar,
      [List.name]: List,
      [List.Item.name]: List.Item,
      AListItemMeta: List.Item.Meta,
+      ATypographyParagraph: Typography.Paragraph,
      [Tag.name]: Tag,
    },
    props: {
@@ -52,10 +71,67 @@
        type: Array as PropType<ListItem[]>,
        default: () => [],
      },
+      pageSize: {
+        type: [Boolean, Number] as PropType<Boolean | Number>,
+        default: 5,
+      },
+      currentPage: {
+        type: Number,
+        default: 1,
+      },
+      titleRows: {
+        type: Number,
+        default: 1,
+      },
+      descRows: {
+        type: Number,
+        default: 2,
+      },
+      onTitleClick: {
+        type: Function as PropType<(Recordable) => void>,
+      },
    },
-    setup() {
+    emits: ['update:currentPage'],
+    setup(props, { emit }) {
      const { prefixCls } = useDesign('header-notify-list');
-      return { prefixCls };
+      const current = ref(props.currentPage || 1);
+      const getData = computed(() => {
+        const { pageSize, list } = props;
+        console.log('refreshData', list);
+        if (pageSize === false) return [];
+        let size = isNumber(pageSize) ? pageSize : 5;
+        return list.slice(size * (unref(current) - 1), size * unref(current));
+      });
+      watch(
+        () => props.currentPage,
+        (v) => {
+          current.value = v;
+        }
+      );
+      const isTitleClickable = computed(() => !!props.onTitleClick);
+      const getPagination = computed(() => {
+        const { list, pageSize } = props;
+        if (pageSize > 0 && list && list.length > pageSize) {
+          return {
+            total: list.length,
+            pageSize,
+            //size: 'small',
+            current: unref(current),
+            onChange(page) {
+              current.value = page;
+              emit('update:currentPage', page);
+            },
+          };
+        } else {
+          return false;
+        }
+      });
+
+      function handleTitleClick(item: ListItem) {
+        props.onTitleClick && props.onTitleClick(item);
+      }
+
+      return { prefixCls, getPagination, getData, handleTitleClick, isTitleClickable };
    },
  });
 </script>
@@ -67,6 +143,10 @@
      display: none;
    }

+    ::v-deep(.ant-pagination-disabled) {
+      display: inline-block !important;
+    }
+
    &-item {
      padding: 6px;
      overflow: hidden;
--- a/src/layouts/default/header/components/notify/data.ts
+++ b/src/layouts/default/header/components/notify/data.ts
@@ -1,7 +1,10 @@
 export interface ListItem {
  id: string;
  avatar: string;
+  // 通知的标题内容
  title: string;
+  // 是否在标题上显示删除线
+  titleDelete?: boolean;
  datetime: string;
  type: string;
  read?: boolean;
@@ -56,6 +59,55 @@ export const tabListData: TabItem[] = [
        datetime: '2017-08-07',
        type: '1',
      },
+      {
+        id: '000000005',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title:
+          '标题可以设置自动显示省略号，本例中标题行数已设为1行，如果内容超过1行将自动截断并支持tooltip显示完整标题。',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000006',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000007',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000008',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000009',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
+      {
+        id: '000000010',
+        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/GvqBnKhFgObvnSGkDsje.png',
+        title: '左侧图标用于区分不同的类型',
+        description: '',
+        datetime: '2017-08-07',
+        type: '1',
+      },
    ],
  },
  {
@@ -84,7 +136,8 @@ export const tabListData: TabItem[] = [
        id: '000000008',
        avatar: 'https://gw.alipayobjects.com/zos/rmsportal/fcHMVNCjPOsbUGdEduuv.jpeg',
        title: '标题',
-        description: '这种模板用于提醒谁与你发生了互动',
+        description:
+          '请将鼠标移动到此处，以便测试超长的消息在此处将如何处理。本例中设置的描述最大行数为2，超过2行的描述内容将被省略并且可以通过tooltip查看完整内容',
        datetime: '2017-08-07',
        type: '2',
        clickClose: true,
--- a/src/layouts/default/header/components/notify/index.vue
+++ b/src/layouts/default/header/components/notify/index.vue
@@ -6,13 +6,15 @@
      </Badge>
      <template #content>
        <Tabs>
-          <template v-for="item in tabListData" :key="item.key">
+          <template v-for="item in listData" :key="item.key">
            <TabPane>
              <template #tab>
                {{ item.name }}
                <span v-if="item.list.length !== 0">({{ item.list.length }})</span>
              </template>
-              <NoticeList :list="item.list" />
+              <!-- 绑定title-click事件的通知列表中标题是“可点击”的-->
+              <NoticeList :list="item.list" v-if="item.key === '1'" @title-click="onNoticeClick" />
+              <NoticeList :list="item.list" v-else />
            </TabPane>
          </template>
        </Tabs>
@@ -21,28 +23,40 @@
  </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { computed, defineComponent, ref } from 'vue';
  import { Popover, Tabs, Badge } from 'ant-design-vue';
  import { BellOutlined } from '@ant-design/icons-vue';
-  import { tabListData } from './data';
+  import { tabListData, ListItem } from './data';
  import NoticeList from './NoticeList.vue';
  import { useDesign } from '/@/hooks/web/useDesign';
+  import { useMessage } from '/@/hooks/web/useMessage';

  export default defineComponent({
    components: { Popover, BellOutlined, Tabs, TabPane: Tabs.TabPane, Badge, NoticeList },
    setup() {
      const { prefixCls } = useDesign('header-notify');
+      const { createMessage } = useMessage();
+      const listData = ref(tabListData);

-      let count = 0;
+      const count = computed(() => {
+        let count = 0;
+        for (let i = 0; i < tabListData.length; i++) {
+          count += tabListData[i].list.length;
+        }
+        return count;
+      });

-      for (let i = 0; i < tabListData.length; i++) {
-        count += tabListData[i].list.length;
+      function onNoticeClick(record: ListItem) {
+        createMessage.success('你点击了通知，ID=' + record.id);
+        // 可以直接将其标记为已读（为标题添加删除线）,此处演示的代码会切换删除线状态
+        record.titleDelete = !record.titleDelete;
      }

      return {
        prefixCls,
-        tabListData,
+        listData,
        count,
+        onNoticeClick,
        numberStyle: {},
      };
    },
--- a/src/layouts/default/sider/LayoutSider.vue
+++ b/src/layouts/default/sider/LayoutSider.vue
@@ -15,7 +15,6 @@
    :collapsedWidth="getCollapsedWidth"
    :theme="getMenuTheme"
    @breakpoint="onBreakpointChange"
-    @collapse="toggleCollapsed"
    :trigger="getTrigger"
    v-bind="getTriggerAttr"
  >
--- a/src/layouts/default/sider/MixSider.vue
+++ b/src/layouts/default/sider/MixSider.vue
@@ -15,7 +15,7 @@
  >
    <AppLogo :showTitle="false" :class="`${prefixCls}-logo`" />

-    <Trigger :class="`${prefixCls}-trigger`" />
+    <LayoutTrigger :class="`${prefixCls}-trigger`" />

    <ScrollContainer>
      <ul :class="`${prefixCls}-module`">
@@ -63,7 +63,7 @@
      </div>
      <ScrollContainer :class="`${prefixCls}-menu-list__content`">
        <SimpleMenu
-          :items="chilrenMenus"
+          :items="childrenMenus"
          :theme="getMenuTheme"
          mixSider
          @menuClick="handleMenuClick"
@@ -80,24 +80,23 @@
 <script lang="ts">
  import type { Menu } from '/@/router/types';
  import type { CSSProperties } from 'vue';
+  import { computed, defineComponent, onMounted, ref, unref } from 'vue';
  import type { RouteLocationNormalized } from 'vue-router';
-  import { defineComponent, onMounted, ref, computed, unref } from 'vue';
  import { ScrollContainer } from '/@/components/Container';
-  import { SimpleMenuTag } from '/@/components/SimpleMenu';
+  import { SimpleMenu, SimpleMenuTag } from '/@/components/SimpleMenu';
  import { Icon } from '/@/components/Icon';
  import { AppLogo } from '/@/components/Application';
-  import Trigger from '../trigger/HeaderTrigger.vue';
  import { useMenuSetting } from '/@/hooks/setting/useMenuSetting';
  import { useDragLine } from './useLayoutSider';
  import { useGlobSetting } from '/@/hooks/setting';
  import { useDesign } from '/@/hooks/web/useDesign';
  import { useI18n } from '/@/hooks/web/useI18n';
  import { useGo } from '/@/hooks/web/usePage';
-  import { SIDE_BAR_SHOW_TIT_MINI_WIDTH, SIDE_BAR_MINI_WIDTH } from '/@/enums/appEnum';
+  import { SIDE_BAR_MINI_WIDTH, SIDE_BAR_SHOW_TIT_MINI_WIDTH } from '/@/enums/appEnum';
  import clickOutside from '/@/directives/clickOutside';
-  import { getShallowMenus, getChildrenMenus, getCurrentParentPath } from '/@/router/menus';
+  import { getChildrenMenus, getCurrentParentPath, getShallowMenus } from '/@/router/menus';
  import { listenerRouteChange } from '/@/logics/mitt/routeChange';
-  import { SimpleMenu } from '/@/components/SimpleMenu';
+  import LayoutTrigger from '../trigger/index.vue';

  export default defineComponent({
    name: 'LayoutMixSider',
@@ -106,7 +105,7 @@
      AppLogo,
      SimpleMenu,
      Icon,
-      Trigger,
+      LayoutTrigger,
      SimpleMenuTag,
    },
    directives: {
@@ -115,7 +114,7 @@
    setup() {
      let menuModules = ref<Menu[]>([]);
      const activePath = ref('');
-      const chilrenMenus = ref<Menu[]>([]);
+      const childrenMenus = ref<Menu[]>([]);
      const openMenu = ref(false);
      const dragBarRef = ref<ElRef>(null);
      const sideRef = ref<ElRef>(null);
@@ -151,7 +150,7 @@

      const getIsFixed = computed(() => {
        /* eslint-disable-next-line */
-        mixSideHasChildren.value = unref(chilrenMenus).length > 0;
+        mixSideHasChildren.value = unref(childrenMenus).length > 0;
        const isFixed = unref(getMixSideFixed) && unref(mixSideHasChildren);
        if (isFixed) {
          /* eslint-disable-next-line */
@@ -179,6 +178,7 @@
        return !unref(getMixSideFixed)
          ? {
              onMouseleave: () => {
+                setActive(true);
                closeMenu();
              },
            }
@@ -209,9 +209,8 @@
      }

      // Process module menu click
-      async function hanldeModuleClick(path: string, hover = false) {
+      async function handleModuleClick(path: string, hover = false) {
        const children = await getChildrenMenus(path);
-
        if (unref(activePath) === path) {
          if (!hover) {
            if (!unref(openMenu)) {
@@ -219,6 +218,10 @@
            } else {
              closeMenu();
            }
+          } else {
+            if (!unref(openMenu)) {
+              openMenu.value = true;
+            }
          }
          if (!unref(openMenu)) {
            setActive();
@@ -229,20 +232,19 @@
        }

        if (!children || children.length === 0) {
-          go(path);
-          chilrenMenus.value = [];
+          if (!hover) go(path);
+          childrenMenus.value = [];
          closeMenu();
          return;
        }
-        chilrenMenus.value = children;
+        childrenMenus.value = children;
      }

      // Set the currently active menu and submenu
      async function setActive(setChildren = false) {
        const path = currentRoute.value?.path;
        if (!path) return;
-        const parentPath = await getCurrentParentPath(path);
-        activePath.value = parentPath;
+        activePath.value = await getCurrentParentPath(path);
        // hanldeModuleClick(parentPath);
        if (unref(getIsMixSidebar)) {
          const activeMenu = unref(menuModules).find((item) => item.path === unref(activePath));
@@ -250,14 +252,14 @@
          if (p) {
            const children = await getChildrenMenus(p);
            if (setChildren) {
-              chilrenMenus.value = children;
+              childrenMenus.value = children;

              if (unref(getMixSideFixed)) {
                openMenu.value = children.length > 0;
              }
            }
            if (children.length === 0) {
-              chilrenMenus.value = [];
+              childrenMenus.value = [];
            }
          }
        }
@@ -275,11 +277,15 @@
      function getItemEvents(item: Menu) {
        if (unref(getMixSideTrigger) === 'hover') {
          return {
-            onMouseenter: () => hanldeModuleClick(item.path, true),
+            onMouseenter: () => handleModuleClick(item.path, true),
+            onClick: async () => {
+              const children = await getChildrenMenus(item.path);
+              if (item.path && (!children || children.length === 0)) go(item.path);
+            },
          };
        }
        return {
-          onClick: () => hanldeModuleClick(item.path),
+          onClick: () => handleModuleClick(item.path),
        };
      }

@@ -300,9 +306,9 @@
        t,
        prefixCls,
        menuModules,
-        hanldeModuleClick,
+        handleModuleClick: handleModuleClick,
        activePath,
-        chilrenMenus,
+        childrenMenus: childrenMenus,
        getShowDragBar,
        handleMenuClick,
        getMenuStyle,
@@ -480,23 +486,24 @@
      bottom: 0;
      left: 0;
      width: 100%;
-      padding: 6px;
-      padding-left: 12px;
-      font-size: 18px;
+      font-size: 14px;
      color: rgba(255, 255, 255, 0.65);
+      text-align: center;
      cursor: pointer;
-      background-color: @sider-dark-bg-color;
+      background-color: @trigger-dark-bg-color;
+      height: 36px;
+      line-height: 36px;
    }

    &.light &-trigger {
      color: rgba(0, 0, 0, 0.65);
      background-color: #fff;
+      border-top: 1px solid #eee;
    }

    &-menu-list {
      position: fixed;
      top: 0;
-      width: 0;
      width: 200px;
      height: calc(100%);
      background-color: #fff;
--- a/src/router/constant.ts
+++ b/src/router/constant.ts
@@ -2,6 +2,8 @@ export const REDIRECT_NAME = 'Redirect';

 export const PARENT_LAYOUT_NAME = 'ParentLayout';

+export const PAGE_NOT_FOUND_NAME = 'PageNotFound';
+
 export const EXCEPTION_COMPONENT = () => import('../views/sys/exception/Exception.vue');

 /**
--- a/src/router/guard/permissionGuard.ts
+++ b/src/router/guard/permissionGuard.ts
@@ -7,17 +7,25 @@ import { useUserStoreWithOut } from '/@/store/modules/user';

 import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';

+import { RootRoute } from '/@/router/routes';
+
 const LOGIN_PATH = PageEnum.BASE_LOGIN;

+const ROOT_PATH = RootRoute.path;
+
 const whitePathList: PageEnum[] = [LOGIN_PATH];

 export function createPermissionGuard(router: Router) {
  const userStore = useUserStoreWithOut();
  const permissionStore = usePermissionStoreWithOut();
  router.beforeEach(async (to, from, next) => {
-    // Jump to the 404 page after processing the login
-    if (from.path === LOGIN_PATH && to.name === PAGE_NOT_FOUND_ROUTE.name) {
-      next(PageEnum.BASE_HOME);
+    if (
+      from.path === ROOT_PATH &&
+      to.path === PageEnum.BASE_HOME &&
+      userStore.getUserInfo.homePath &&
+      userStore.getUserInfo.homePath !== PageEnum.BASE_HOME
+    ) {
+      next(userStore.getUserInfo.homePath);
      return;
    }

@@ -52,6 +60,17 @@ export function createPermissionGuard(router: Router) {
      return;
    }

+    // Jump to the 404 page after processing the login
+    if (
+      from.path === LOGIN_PATH &&
+      to.name === PAGE_NOT_FOUND_ROUTE.name &&
+      to.fullPath !== (userStore.getUserInfo.homePath || PageEnum.BASE_HOME)
+    ) {
+      next(userStore.getUserInfo.homePath || PageEnum.BASE_HOME);
+      console.log({ from, to });
+      return;
+    }
+
    if (permissionStore.getIsDynamicAddedRoute) {
      next();
      return;
@@ -63,10 +82,18 @@ export function createPermissionGuard(router: Router) {
      router.addRoute(route as unknown as RouteRecordRaw);
    });

-    const redirectPath = (from.query.redirect || to.path) as string;
-    const redirect = decodeURIComponent(redirectPath);
-    const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+
    permissionStore.setDynamicAddedRoute(true);
-    next(nextData);
+
+    if (to.name === PAGE_NOT_FOUND_ROUTE.name) {
+      // 动态添加路由后，此处应当重定向到fullPath，否则会加载404页面内容
+      next({ path: to.fullPath, replace: true });
+    } else {
+      const redirectPath = (from.query.redirect || to.path) as string;
+      const redirect = decodeURIComponent(redirectPath);
+      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect };
+      next(nextData);
+    }
  });
 }
--- a/src/router/helper/menuHelper.ts
+++ b/src/router/helper/menuHelper.ts
@@ -62,6 +62,7 @@ export function transformRouteToMenu(routeModList: AppRouteModule[], routerMappi
        name: title,
        hideMenu,
        path: node.path,
+        ...(node.redirect ? { redirect: node.redirect } : {}),
      };
    },
  });
@@ -72,14 +73,16 @@ export function transformRouteToMenu(routeModList: AppRouteModule[], routerMappi
 /**
 * config menu with given params
 */
-const menuParamRegex = /(?<=:)([\s\S]+?)((?=\/)|$)/g;
+const menuParamRegex = /(?::)([\s\S]+?)((?=\/)|$)/g;
 export function configureDynamicParamsMenu(menu: Menu, params: RouteParams) {
  const { path, paramPath } = toRaw(menu);
  let realPath = paramPath ? paramPath : path;
  const matchArr = realPath.match(menuParamRegex);
+
  matchArr?.forEach((it) => {
-    if (params[it]) {
-      realPath = realPath.replace(`:${it}`, params[it] as string);
+    const realIt = it.substr(1);
+    if (params[realIt]) {
+      realPath = realPath.replace(`:${realIt}`, params[realIt] as string);
    }
  });
  // save original param path.
--- a/src/router/menus/index.ts
+++ b/src/router/menus/index.ts
@@ -54,7 +54,7 @@ const staticMenus: Menu[] = [];
 async function getAsyncMenus() {
  const permissionStore = usePermissionStore();
  if (isBackMode()) {
-    return permissionStore.getBackMenuList;
+    return permissionStore.getBackMenuList.filter((item) => !item.meta?.hideMenu && !item.hideMenu);
  }
  if (isRouteMappingMode()) {
    return permissionStore.getFrontMenuList.filter((item) => !item.hideMenu);
--- a/src/router/routes/basic.ts
+++ b/src/router/routes/basic.ts
@@ -1,11 +1,16 @@
 import type { AppRouteRecordRaw } from '/@/router/types';
 import { t } from '/@/hooks/web/useI18n';
-import { REDIRECT_NAME, LAYOUT, EXCEPTION_COMPONENT } from '/@/router/constant';
+import {
+  REDIRECT_NAME,
+  LAYOUT,
+  EXCEPTION_COMPONENT,
+  PAGE_NOT_FOUND_NAME,
+} from '/@/router/constant';

 // 404 on a page
 export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
  path: '/:path(.*)*',
-  name: 'ErrorPage',
+  name: PAGE_NOT_FOUND_NAME,
  component: LAYOUT,
  meta: {
    title: 'ErrorPage',
@@ -15,11 +20,12 @@ export const PAGE_NOT_FOUND_ROUTE: AppRouteRecordRaw = {
  children: [
    {
      path: '/:path(.*)*',
-      name: 'ErrorPage',
+      name: PAGE_NOT_FOUND_NAME,
      component: EXCEPTION_COMPONENT,
      meta: {
        title: 'ErrorPage',
        hideBreadcrumb: true,
+        hideMenu: true,
      },
    },
  ],
--- a/src/router/routes/index.ts
+++ b/src/router/routes/index.ts
@@ -37,4 +37,10 @@ export const LoginRoute: AppRouteRecordRaw = {
 };

 // Basic routing without permission
-export const basicRoutes = [LoginRoute, RootRoute, ...mainOutRoutes, REDIRECT_ROUTE];
+export const basicRoutes = [
+  LoginRoute,
+  RootRoute,
+  ...mainOutRoutes,
+  REDIRECT_ROUTE,
+  PAGE_NOT_FOUND_ROUTE,
+];
--- a/src/router/routes/modules/about.ts
+++ b/src/router/routes/modules/about.ts
@@ -22,6 +22,7 @@ const dashboard: AppRouteModule = {
      meta: {
        title: t('routes.dashboard.about'),
        icon: 'simple-icons:about-dot-me',
+        hideMenu: true,
      },
    },
  ],
--- a/src/router/routes/modules/dashboard.ts
+++ b/src/router/routes/modules/dashboard.ts
@@ -19,7 +19,7 @@ const dashboard: AppRouteModule = {
      name: 'Analysis',
      component: () => import('/@/views/dashboard/analysis/index.vue'),
      meta: {
-        affix: true,
+        // affix: true,
        title: t('routes.dashboard.analysis'),
      },
    },
--- a/src/router/routes/modules/demo/setup.ts
+++ b/src/router/routes/modules/demo/setup.ts
@@ -11,7 +11,7 @@ const setup: AppRouteModule = {
  meta: {
    orderNo: 90000,
    hideChildrenInMenu: true,
-    icon: 'simple-icons:about-dot-me',
+    icon: 'whh:paintroll',
    title: t('routes.demo.setup.page'),
  },
  children: [
@@ -22,6 +22,7 @@ const setup: AppRouteModule = {
      meta: {
        title: t('routes.demo.setup.page'),
        icon: 'whh:paintroll',
+        hideMenu: true,
      },
    },
  ],
--- a/src/store/modules/multipleTab.ts
+++ b/src/store/modules/multipleTab.ts
@@ -13,6 +13,7 @@ import { getRawRoute } from '/@/utils';
 import { MULTIPLE_TABS_KEY } from '/@/enums/cacheEnum';

 import projectSetting from '/@/settings/projectSetting';
+import { useUserStore } from '/@/store/modules/user';

 export interface MultipleTabState {
  cacheTabList: Set<string>;
@@ -113,6 +114,7 @@ export const useMultipleTabStore = defineStore({
      // 404  The page does not need to add a tab
      if (
        path === PageEnum.ERROR_PAGE ||
+        path === PageEnum.BASE_LOGIN ||
        !name ||
        [REDIRECT_ROUTE.name, PAGE_NOT_FOUND_ROUTE.name].includes(name as string)
      ) {
@@ -181,7 +183,8 @@ export const useMultipleTabStore = defineStore({
      if (index === 0) {
        // There is only one tab, then jump to the homepage, otherwise jump to the right tab
        if (this.tabList.length === 1) {
-          toTarget = PageEnum.BASE_HOME;
+          const userStore = useUserStore();
+          toTarget = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
        } else {
          //  Jump to the right tab
          const page = this.tabList[index + 1];
--- a/src/store/modules/permission.ts
+++ b/src/store/modules/permission.ts
@@ -22,6 +22,7 @@ import { getMenuList } from '/@/api/sys/menu';
 import { getPermCode } from '/@/api/sys/user';

 import { useMessage } from '/@/hooks/web/useMessage';
+import { PageEnum } from '/@/enums/pageEnum';

 interface PermissionState {
  // Permission code list
@@ -117,6 +118,36 @@ export const usePermissionStore = defineStore({
        return !ignoreRoute;
      };

+      /**
+       * @description 根据设置的首页path，修正routes中的affix标记（固定首页）
+       * */
+      const patchHomeAffix = (routes: AppRouteRecordRaw[]) => {
+        if (!routes || routes.length === 0) return;
+        let homePath: string = userStore.getUserInfo.homePath || PageEnum.BASE_HOME;
+        function patcher(routes: AppRouteRecordRaw[], parentPath = '') {
+          if (parentPath) parentPath = parentPath + '/';
+          routes.forEach((route: AppRouteRecordRaw) => {
+            const { path, children, redirect } = route;
+            const currentPath = path.startsWith('/') ? path : parentPath + path;
+            if (currentPath === homePath) {
+              if (redirect) {
+                homePath = route.redirect! as string;
+              } else {
+                route.meta = Object.assign({}, route.meta, { affix: true });
+                throw new Error('end');
+              }
+            }
+            children && children.length > 0 && patcher(children, currentPath);
+          });
+        }
+        try {
+          patcher(routes);
+        } catch (e) {
+          // 已处理完毕跳出循环
+        }
+        return;
+      };
+
      switch (permissionMode) {
        case PermissionModeEnum.ROLE:
          routes = filter(asyncRoutes, routeFilter);
@@ -176,6 +207,7 @@ export const usePermissionStore = defineStore({
      }

      routes.push(ERROR_LOG_ROUTE);
+      patchHomeAffix(routes);
      return routes;
    },
  },
--- a/src/store/modules/user.ts
+++ b/src/store/modules/user.ts
@@ -11,6 +11,9 @@ import { doLogout, getUserInfo, loginApi } from '/@/api/sys/user';
 import { useI18n } from '/@/hooks/web/useI18n';
 import { useMessage } from '/@/hooks/web/useMessage';
 import { router } from '/@/router';
+import { usePermissionStore } from '/@/store/modules/permission';
+import { RouteRecordRaw } from 'vue-router';
+import { PAGE_NOT_FOUND_ROUTE } from '/@/router/routes/basic';

 interface UserState {
  userInfo: Nullable<UserInfo>;
@@ -87,14 +90,26 @@ export const useUserStore = defineStore({
        const userInfo = await this.getUserInfoAction();

        const sessionTimeout = this.sessionTimeout;
-        sessionTimeout && this.setSessionTimeout(false);
-        !sessionTimeout && goHome && (await router.replace(PageEnum.BASE_HOME));
+        if (sessionTimeout) {
+          this.setSessionTimeout(false);
+        } else if (goHome) {
+          const permissionStore = usePermissionStore();
+          if (!permissionStore.isDynamicAddedRoute) {
+            const routes = await permissionStore.buildRoutesAction();
+            routes.forEach((route) => {
+              router.addRoute(route as unknown as RouteRecordRaw);
+            });
+            router.addRoute(PAGE_NOT_FOUND_ROUTE as unknown as RouteRecordRaw);
+            permissionStore.setDynamicAddedRoute(true);
+          }
+          await router.replace(userInfo.homePath || PageEnum.BASE_HOME);
+        }
        return userInfo;
      } catch (error) {
        return Promise.reject(error);
      }
    },
-    async getUserInfoAction() {
+    async getUserInfoAction(): Promise<UserInfo> {
      const userInfo = await getUserInfo();
      const { roles } = userInfo;
      const roleList = roles.map((item) => item.value) as RoleEnum[];
--- a/src/utils/domUtils.ts
+++ b/src/utils/domUtils.ts
@@ -1,3 +1,4 @@
+import type { FunctionArgs } from '@vueuse/core';
 import { upperFirst } from 'lodash-es';

 export interface ViewportOffsetResult {
@@ -163,3 +164,17 @@ export function once(el: HTMLElement, event: string, fn: EventListener): void {
  };
  on(el, event, listener);
 }
+
+export function useRafThrottle<T extends FunctionArgs>(fn: T): T {
+  let locked = false;
+  // @ts-ignore
+  return function (...args: any[]) {
+    if (locked) return;
+    locked = true;
+    window.requestAnimationFrame(() => {
+      // @ts-ignore
+      fn.apply(this, args);
+      locked = false;
+    });
+  };
+}
--- a/src/views/demo/comp/modal/Modal1.vue
+++ b/src/views/demo/comp/modal/Modal1.vue
@@ -8,7 +8,7 @@
    @visible-change="handleShow"
  >
    <template #insertFooter>
-      <a-button type="danger" @click="setLines" :disabled="loading">点我更新内容</a-button>
+      <a-button type="primary" danger @click="setLines" :disabled="loading">点我更新内容</a-button>
    </template>
    <template v-if="loading">
      <div class="empty-tips"> 加载中，稍等3秒…… </div>
--- a/src/views/demo/comp/modal/Modal2.vue
+++ b/src/views/demo/comp/modal/Modal2.vue
@@ -1,12 +1,11 @@
 <template>
  <BasicModal
-    v-bind="$attrs"
    @register="register"
    title="Modal Title"
    :helpMessage="['提示1', '提示2']"
+    :okButtonProps="{ disabled: true }"
  >
    <a-button type="primary" @click="closeModal" class="mr-2"> 从内部关闭弹窗 </a-button>
-
    <a-button type="primary" @click="setModalProps"> 从内部修改title </a-button>
  </BasicModal>
 </template>
--- a/src/views/demo/comp/modal/index.vue
+++ b/src/views/demo/comp/modal/index.vue
@@ -17,6 +17,16 @@
    <Alert message="内外数据交互" show-icon />
    <a-button type="primary" class="my-4" @click="send"> 打开弹窗并传递数据 </a-button>

+    <Alert message="使用动态组件的方式在页面内使用多个弹窗" show-icon />
+    <a-space>
+      <a-button type="primary" class="my-4" @click="openTargetModal(1)"> 打开弹窗1 </a-button>
+      <a-button type="primary" class="my-4" @click="openTargetModal(2)"> 打开弹窗2 </a-button>
+      <a-button type="primary" class="my-4" @click="openTargetModal(3)"> 打开弹窗3 </a-button>
+      <a-button type="primary" class="my-4" @click="openTargetModal(4)"> 打开弹窗4 </a-button>
+    </a-space>
+
+    <component :is="currentModal" @register="register" />
+
    <Modal1 @register="register1" :minHeight="100" />
    <Modal2 @register="register2" />
    <Modal3 @register="register3" />
@@ -24,8 +34,8 @@
  </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
-  import { Alert } from 'ant-design-vue';
+  import { defineComponent, nextTick, shallowRef, ComponentOptions } from 'vue';
+  import { Alert, Space } from 'ant-design-vue';
  import { useModal } from '/@/components/Modal';
  import Modal1 from './Modal1.vue';
  import Modal2 from './Modal2.vue';
@@ -34,12 +44,14 @@
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
-    components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper },
+    components: { Alert, Modal1, Modal2, Modal3, Modal4, PageWrapper, ASpace: Space },
    setup() {
+      const currentModal = shallowRef<Nullable<ComponentOptions>>(null);
      const [register1, { openModal: openModal1 }] = useModal();
      const [register2, { openModal: openModal2 }] = useModal();
      const [register3, { openModal: openModal3 }] = useModal();
      const [register4, { openModal: openModal4 }] = useModal();
+      const [register, { openModal }] = useModal();
      function send() {
        openModal4(true, {
          data: 'content',
@@ -53,6 +65,27 @@
        //   setModalProps({ loading: false });
        // }, 2000);
      }
+
+      function openTargetModal(index) {
+        switch (index) {
+          case 1:
+            currentModal.value = Modal1;
+            break;
+          case 2:
+            currentModal.value = Modal2;
+            break;
+          case 3:
+            currentModal.value = Modal3;
+            break;
+          default:
+            currentModal.value = Modal4;
+            break;
+        }
+        nextTick(() => {
+          openModal(true, { data: 'content', info: 'Info' });
+        });
+      }
+
      return {
        register1,
        openModal1,
@@ -62,7 +95,10 @@
        openModal3,
        register4,
        openModal4,
+        register,
+        openTargetModal,
        send,
+        currentModal,
        openModalLoading,
      };
    },
--- a/src/views/demo/editor/json/index.vue
+++ b/src/views/demo/editor/json/index.vue
@@ -1,11 +1,14 @@
 <template>
  <PageWrapper title="代码编辑器组件示例" contentFullHeight fixedHeight contentBackground>
    <template #extra>
-      <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
-        <RadioButton value="application/json"> json数据 </RadioButton>
-        <RadioButton value="htmlmixed"> html代码 </RadioButton>
-        <RadioButton value="javascript"> javascript代码 </RadioButton>
-      </RadioGroup>
+      <a-space size="middle">
+        <a-button @click="showData" type="primary">获取数据</a-button>
+        <RadioGroup button-style="solid" v-model:value="modeValue" @change="handleModeChange">
+          <RadioButton value="application/json"> json数据 </RadioButton>
+          <RadioButton value="htmlmixed"> html代码 </RadioButton>
+          <RadioButton value="javascript"> javascript代码 </RadioButton>
+        </RadioGroup>
+      </a-space>
    </template>
    <CodeEditor v-model:value="value" :mode="modeValue" />
  </PageWrapper>
@@ -14,7 +17,7 @@
  import { defineComponent, ref } from 'vue';
  import { CodeEditor } from '/@/components/CodeEditor';
  import { PageWrapper } from '/@/components/Page';
-  import { Radio } from 'ant-design-vue';
+  import { Radio, Space, Modal } from 'ant-design-vue';

  const jsonData =
    '{"name":"BeJson","url":"http://www.xxx.com","page":88,"isNonProfit":true,"address":{"street":"科技园路.","city":"江苏苏州","country":"中国"},"links":[{"name":"Google","url":"http://www.xxx.com"},{"name":"Baidu","url":"http://www.xxx.com"},{"name":"SoSo","url":"http://www.xxx.com"}]}';
@@ -51,7 +54,13 @@
 </html>
  `;
  export default defineComponent({
-    components: { CodeEditor, PageWrapper, RadioButton: Radio.Button, RadioGroup: Radio.Group },
+    components: {
+      CodeEditor,
+      PageWrapper,
+      RadioButton: Radio.Button,
+      RadioGroup: Radio.Group,
+      ASpace: Space,
+    },
    setup() {
      const modeValue = ref('application/json');
      const value = ref(jsonData);
@@ -72,7 +81,11 @@
        }
      }

-      return { value, modeValue, handleModeChange };
+      function showData() {
+        Modal.info({ title: '编辑器当前值', content: value.value });
+      }
+
+      return { value, modeValue, handleModeChange, showData };
    },
  });
 </script>
--- a/src/views/demo/editor/markdown/index.vue
+++ b/src/views/demo/editor/markdown/index.vue
@@ -1,7 +1,13 @@
 <template>
  <PageWrapper title="MarkDown组件示例">
    <a-button @click="toggleTheme" class="mb-2" type="primary"> 黑暗主题 </a-button>
-    <MarkDown :value="value" @change="handleChange" ref="markDownRef" />
+    <a-button @click="clearValue" class="mb-2" type="default"> 清空内容 </a-button>
+    <MarkDown
+      v-model:value="value"
+      @change="handleChange"
+      ref="markDownRef"
+      placeholder="这是占位文本"
+    />
  </PageWrapper>
 </template>
 <script lang="ts">
@@ -30,11 +36,16 @@
        valueRef.value = v;
      }

+      function clearValue() {
+        valueRef.value = '';
+      }
+
      return {
        value: valueRef,
        toggleTheme,
        markDownRef,
        handleChange,
+        clearValue,
      };
    },
  });
--- a/src/views/demo/form/index.vue
+++ b/src/views/demo/form/index.vue
@@ -3,22 +3,50 @@
    <CollapseContainer title="基础示例">
      <BasicForm
        autoFocusFirstItem
-        :labelWidth="100"
+        :labelWidth="200"
        :schemas="schemas"
        :actionColOptions="{ span: 24 }"
        @submit="handleSubmit"
-      />
+        @reset="handleReset"
+      >
+        <template #localSearch="{ model, field }">
+          <ApiSelect
+            :api="optionsListApi"
+            showSearch
+            v-model:value="model[field]"
+            optionFilterProp="label"
+            resultField="list"
+            labelField="name"
+            valueField="id"
+          />
+        </template>
+        <template #remoteSearch="{ model, field }">
+          <ApiSelect
+            :api="optionsListApi"
+            showSearch
+            v-model:value="model[field]"
+            :filterOption="false"
+            resultField="list"
+            labelField="name"
+            valueField="id"
+            :params="searchParams"
+            @search="onSearch"
+          />
+        </template>
+      </BasicForm>
    </CollapseContainer>
  </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, ref } from 'vue';
-  import { BasicForm, FormSchema } from '/@/components/Form/index';
-  import { CollapseContainer } from '/@/components/Container/index';
+  import { computed, defineComponent, unref, ref } from 'vue';
+  import { BasicForm, FormSchema, ApiSelect } from '/@/components/Form/index';
+  import { CollapseContainer } from '/@/components/Container';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { PageWrapper } from '/@/components/Page';

  import { optionsListApi } from '/@/api/demo/select';
+  import { useDebounceFn } from '@vueuse/core';
+  import { treeOptionsListApi } from '/@/api/demo/tree';

  const provincesOptions = [
    {
@@ -265,11 +293,10 @@
        ],
      },
    },
-
    {
      field: 'field30',
      component: 'ApiSelect',
-      label: '远程下拉',
+      label: '懒加载远程下拉',
      required: true,
      componentProps: {
        // more details see /src/components/Form/src/components/ApiSelect.vue
@@ -277,15 +304,6 @@
        params: {
          id: 1,
        },
-        // use [res.data.result.list] (no res.data.result) as options datas
-        // result: {
-        //   list: [
-        //     {
-        //       name: "选项0",
-        //       id: "0"
-        //     },
-        //   ]
-        // }
        resultField: 'list',
        // use name as label
        labelField: 'name',
@@ -304,9 +322,46 @@
      colProps: {
        span: 8,
      },
-      // set default value
      defaultValue: '0',
    },
+    {
+      field: 'field31',
+      component: 'Input',
+      label: '下拉本地搜索',
+      helpMessage: ['ApiSelect组件', '远程数据源本地搜索', '只发起一次请求获取所有选项'],
+      required: true,
+      slot: 'localSearch',
+      colProps: {
+        span: 8,
+      },
+      defaultValue: '0',
+    },
+    {
+      field: 'field32',
+      component: 'Input',
+      label: '下拉远程搜索',
+      helpMessage: ['ApiSelect组件', '将关键词发送到接口进行远程搜索'],
+      required: true,
+      slot: 'remoteSearch',
+      colProps: {
+        span: 8,
+      },
+      defaultValue: '0',
+    },
+    {
+      field: 'field33',
+      component: 'ApiTreeSelect',
+      label: '远程下拉树',
+      helpMessage: ['ApiTreeSelect组件', '使用接口提供的数据生成选项'],
+      required: true,
+      componentProps: {
+        api: treeOptionsListApi,
+        resultField: 'list',
+      },
+      colProps: {
+        span: 8,
+      },
+    },
    {
      field: 'field20',
      component: 'InputNumber',
@@ -394,12 +449,26 @@
  ];

  export default defineComponent({
-    components: { BasicForm, CollapseContainer, PageWrapper },
+    components: { BasicForm, CollapseContainer, PageWrapper, ApiSelect },
    setup() {
      const check = ref(null);
      const { createMessage } = useMessage();
+      const keyword = ref<string>('');
+      const searchParams = computed<Recordable>(() => {
+        return { keyword: unref(keyword) };
+      });
+
+      function onSearch(value: string) {
+        keyword.value = value;
+      }
      return {
        schemas,
+        optionsListApi,
+        onSearch: useDebounceFn(onSearch, 300),
+        searchParams,
+        handleReset: () => {
+          keyword.value = '';
+        },
        handleSubmit: (values: any) => {
          createMessage.success('click search,values:' + JSON.stringify(values));
        },
--- a/src/views/demo/page/form/basic/index.vue
+++ b/src/views/demo/page/form/basic/index.vue
@@ -16,6 +16,7 @@
  import { PageWrapper } from '/@/components/Page';

  export default defineComponent({
+    name: 'FormBasicPage',
    components: { BasicForm, PageWrapper },
    setup() {
      const { createMessage } = useMessage();
--- a/src/views/demo/page/form/high/index.vue
+++ b/src/views/demo/page/form/high/index.vue
@@ -28,6 +28,7 @@
  import { Card } from 'ant-design-vue';

  export default defineComponent({
+    name: 'FormHightPage',
    components: { BasicForm, PersonTable, PageWrapper, [Card.name]: Card },
    setup() {
      const tableRef = ref<{ getDataSource: () => any } | null>(null);
--- a/src/views/demo/page/form/step/index.vue
+++ b/src/views/demo/page/form/step/index.vue
@@ -33,6 +33,7 @@
  import { Steps } from 'ant-design-vue';

  export default defineComponent({
+    name: 'FormStepPage',
    components: {
      Step1,
      Step2,
--- a/src/views/demo/system/account/AccountDetail.vue
+++ b/src/views/demo/system/account/AccountDetail.vue
@@ -6,7 +6,7 @@
    @back="goBack"
  >
    <template #extra>
-      <a-button type="danger"> 禁用账号 </a-button>
+      <a-button type="primary" danger> 禁用账号 </a-button>
      <a-button type="primary"> 修改密码 </a-button>
    </template>
    <template #footer>
--- a/src/views/demo/system/menu/index.vue
+++ b/src/views/demo/system/menu/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <BasicTable @register="registerTable">
+    <BasicTable @register="registerTable" @fetch-success="onFetchSuccess">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增菜单 </a-button>
      </template>
@@ -27,7 +27,7 @@
  </div>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, nextTick } from 'vue';

  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import { getMenuList } from '/@/api/demo/system';
@@ -42,7 +42,7 @@
    components: { BasicTable, MenuDrawer, TableAction },
    setup() {
      const [registerDrawer, { openDrawer }] = useDrawer();
-      const [registerTable, { reload }] = useTable({
+      const [registerTable, { reload, expandAll }] = useTable({
        title: '菜单列表',
        api: getMenuList,
        columns,
@@ -50,6 +50,7 @@
          labelWidth: 120,
          schemas: searchFormSchema,
        },
+        isTreeTable: true,
        pagination: false,
        striped: false,
        useSearchForm: true,
@@ -87,6 +88,11 @@
        reload();
      }

+      function onFetchSuccess() {
+        // 演示默认展开所有表项
+        nextTick(expandAll);
+      }
+
      return {
        registerTable,
        registerDrawer,
@@ -94,6 +100,7 @@
        handleEdit,
        handleDelete,
        handleSuccess,
+        onFetchSuccess,
      };
    },
  });
--- a/src/views/demo/system/role/RoleDrawer.vue
+++ b/src/views/demo/system/role/RoleDrawer.vue
@@ -47,6 +47,10 @@
      const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
        resetFields();
        setDrawerProps({ confirmLoading: false });
+        // 需要在setFieldsValue之前先填充treeData，否则Tree组件可能会报key not exist警告
+        if (unref(treeData).length === 0) {
+          treeData.value = (await getMenuList()) as any as TreeItem[];
+        }
        isUpdate.value = !!data?.isUpdate;

        if (unref(isUpdate)) {
@@ -54,7 +58,6 @@
            ...data.record,
          });
        }
-        treeData.value = (await getMenuList()) as any as TreeItem[];
      });

      const getTitle = computed(() => (!unref(isUpdate) ? '新增角色' : '编辑角色'));
--- a/src/views/demo/table/EditCellTable.vue
+++ b/src/views/demo/table/EditCellTable.vue
@@ -13,6 +13,7 @@
  import { optionsListApi } from '/@/api/demo/select';

  import { demoListApi } from '/@/api/demo/table';
+  import { treeOptionsListApi } from '/@/api/demo/tree';
  const columns: BasicColumn[] = [
    {
      title: '输入框',
@@ -84,6 +85,21 @@
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
+        resultField: 'list',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      width: 200,
+    },
+    {
+      title: '远程下拉树',
+      dataIndex: 'name7',
+      edit: true,
+      editComponent: 'ApiTreeSelect',
+      editRule: false,
+      editComponentProps: {
+        api: treeOptionsListApi,
+        resultField: 'list',
      },
      width: 200,
    },
--- a/src/views/demo/table/EditRowTable.vue
+++ b/src/views/demo/table/EditRowTable.vue
@@ -20,6 +20,8 @@
  import { optionsListApi } from '/@/api/demo/select';

  import { demoListApi } from '/@/api/demo/table';
+  import { treeOptionsListApi } from '/@/api/demo/tree';
+
  const columns: BasicColumn[] = [
    {
      title: '输入框',
@@ -80,6 +82,10 @@
            label: 'Option2',
            value: '2',
          },
+          {
+            label: 'Option3',
+            value: '3',
+          },
        ],
      },
      width: 200,
@@ -91,6 +97,21 @@
      editComponent: 'ApiSelect',
      editComponentProps: {
        api: optionsListApi,
+        resultField: 'list',
+        labelField: 'name',
+        valueField: 'id',
+      },
+      width: 200,
+    },
+    {
+      title: '远程下拉树',
+      dataIndex: 'name7',
+      editRow: true,
+      editComponent: 'ApiTreeSelect',
+      editRule: false,
+      editComponentProps: {
+        api: treeOptionsListApi,
+        resultField: 'list',
      },
      width: 200,
    },
@@ -142,7 +163,6 @@
    components: { BasicTable, TableAction },
    setup() {
      const currentEditKeyRef = ref('');
-
      const [registerTable] = useTable({
        title: '可编辑行示例',
        titleHelpMessage: [
--- a/src/views/demo/table/FormTable.vue
+++ b/src/views/demo/table/FormTable.vue
@@ -1,22 +1,39 @@
 <template>
-  <BasicTable @register="registerTable">
+  <BasicTable
+    @register="registerTable"
+    :rowSelection="{ type: 'checkbox', selectedRowKeys: checkedKeys, onChange: onSelectChange }"
+  >
    <template #form-custom> custom-slot </template>
-
+    <template #headerTop>
+      <a-alert type="info" show-icon>
+        <template #message>
+          <template v-if="checkedKeys.length > 0">
+            <span>已选中{{ checkedKeys.length }}条记录(可跨页)</span>
+            <a-button type="link" @click="checkedKeys = []" size="small">清空</a-button>
+          </template>
+          <template v-else>
+            <span>未选中任何项目</span>
+          </template>
+        </template>
+      </a-alert>
+    </template>
    <template #toolbar>
      <a-button type="primary" @click="getFormValues">获取表单数据</a-button>
    </template>
  </BasicTable>
 </template>
 <script lang="ts">
-  import { defineComponent } from 'vue';
+  import { defineComponent, ref } from 'vue';
  import { BasicTable, useTable } from '/@/components/Table';
  import { getBasicColumns, getFormConfig } from './tableData';
+  import { Alert } from 'ant-design-vue';

  import { demoListApi } from '/@/api/demo/table';

  export default defineComponent({
-    components: { BasicTable },
+    components: { BasicTable, AAlert: Alert },
    setup() {
+      const checkedKeys = ref<Array<string | number>>([]);
      const [registerTable, { getForm }] = useTable({
        title: '开启搜索区域',
        api: demoListApi,
@@ -24,16 +41,24 @@
        useSearchForm: true,
        formConfig: getFormConfig(),
        showTableSetting: true,
-        rowSelection: { type: 'checkbox' },
+        showIndexColumn: false,
+        rowKey: 'id',
      });

      function getFormValues() {
        console.log(getForm().getFieldsValue());
      }

+      function onSelectChange(selectedRowKeys: (string | number)[]) {
+        console.log(selectedRowKeys);
+        checkedKeys.value = selectedRowKeys;
+      }
+
      return {
        registerTable,
        getFormValues,
+        checkedKeys,
+        onSelectChange,
      };
    },
  });
--- a/src/views/demo/table/tableData.tsx
+++ b/src/views/demo/table/tableData.tsx
@@ -31,13 +31,13 @@ export function getBasicColumns(): BasicColumn[] {
    },
    {
      title: '开始时间',
-      width: 120,
+      width: 150,
      sorter: true,
      dataIndex: 'beginTime',
    },
    {
      title: '结束时间',
-      width: 120,
+      width: 150,
      sorter: true,
      dataIndex: 'endTime',
    },
--- a/src/views/demo/tree/index.vue
+++ b/src/views/demo/tree/index.vue
@@ -1,55 +1,83 @@
 <template>
  <PageWrapper title="Tree基础示例">
-    <div class="flex">
-      <BasicTree
-        :treeData="treeData"
-        title="基础示例，默认展开第一层"
-        defaultExpandLevel="1"
-        class="w-1/3"
-      />
-
-      <BasicTree
-        :treeData="treeData"
-        title="可勾选，默认全部展开"
-        :checkable="true"
-        class="w-1/3 mx-4"
-        defaultExpandAll
-        @check="handleCheck"
-      />
-
-      <BasicTree
-        title="指定默认展开/勾选示例"
-        :treeData="treeData"
-        :checkable="true"
-        :expandedKeys="['0-0']"
-        :checkedKeys="['0-0']"
-        class="w-1/3"
-      />
-    </div>
-    <div class="flex">
-      <BasicTree
-        title="异步树"
-        ref="asyncTreeRef"
-        :treeData="tree"
-        class="w-1/3"
-        :load-data="onLoadData"
-      />
-    </div>
+    <Row :gutter="[16, 16]">
+      <Col :span="8">
+        <BasicTree title="基础示例，默认展开第一层" :treeData="treeData" defaultExpandLevel="1" />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="可勾选，默认全部展开"
+          :treeData="treeData"
+          :checkable="true"
+          defaultExpandAll
+          @check="handleCheck"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="指定默认展开/勾选示例"
+          :treeData="treeData"
+          :checkable="true"
+          :expandedKeys="['0-0']"
+          :checkedKeys="['0-0']"
+        />
+      </Col>
+      <Col :span="8">
+        <BasicTree
+          title="懒加载异步树"
+          ref="asyncTreeRef"
+          :treeData="tree"
+          :load-data="onLoadData"
+        />
+      </Col>
+      <Col :span="16">
+        <Card title="异步数据，默认展开">
+          <template #extra>
+            <a-button @click="loadTreeData" :loading="treeLoading">加载数据</a-button>
+          </template>
+          <Spin :spinning="treeLoading">
+            <BasicTree ref="asyncExpandTreeRef" :treeData="tree2" />
+          </Spin>
+        </Card>
+      </Col>
+    </Row>
  </PageWrapper>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, unref } from 'vue';
-  import { BasicTree, TreeActionType } from '/@/components/Tree/index';
+  import { defineComponent, nextTick, ref, unref } from 'vue';
+  import { BasicTree, TreeActionType, TreeItem } from '/@/components/Tree/index';
  import { treeData } from './data';
  import { PageWrapper } from '/@/components/Page';
+  import { Card, Row, Col, Spin } from 'ant-design-vue';
+  import { cloneDeep } from 'lodash-es';

  export default defineComponent({
-    components: { BasicTree, PageWrapper },
+    components: { BasicTree, PageWrapper, Card, Row, Col, Spin },
    setup() {
      const asyncTreeRef = ref<Nullable<TreeActionType>>(null);
+      const asyncExpandTreeRef = ref<Nullable<TreeActionType>>(null);
+      const tree2 = ref<TreeItem[]>([]);
+      const treeLoading = ref(false);
+
      function handleCheck(checkedKeys, e) {
        console.log('onChecked', checkedKeys, e);
      }
+
+      function loadTreeData() {
+        treeLoading.value = true;
+        // 以下是模拟异步获取数据
+        setTimeout(() => {
+          // 设置数据源
+          tree2.value = cloneDeep(treeData);
+          treeLoading.value = false;
+          // 展开全部
+          nextTick(() => {
+            console.log(unref(asyncExpandTreeRef));
+            unref(asyncExpandTreeRef)?.expandAll(true);
+          });
+        }, 2000);
+      }
+
      const tree = ref([
        {
          title: 'parent ',
@@ -82,7 +110,17 @@
          }, 1000);
        });
      }
-      return { treeData, handleCheck, tree, onLoadData, asyncTreeRef };
+      return {
+        treeData,
+        handleCheck,
+        tree,
+        onLoadData,
+        asyncTreeRef,
+        asyncExpandTreeRef,
+        tree2,
+        loadTreeData,
+        treeLoading,
+      };
    },
  });
 </script>
--- a/types/store.d.ts
+++ b/types/store.d.ts
@@ -1,5 +1,6 @@
 import { ErrorTypeEnum } from '/@/enums/exceptionEnum';
 import { MenuModeEnum, MenuTypeEnum } from '/@/enums/menuEnum';
+import { RoleInfo } from '/@/api/sys/model/userModel';

 // Lock screen information
 export interface LockInfo {
@@ -35,6 +36,8 @@ export interface UserInfo {
  realName: string;
  avatar: string;
  desc?: string;
+  homePath?: string;
+  roles: RoleInfo[];
 }

 export interface BeforeMiniState {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
vben	596670dc88	chore: release 2.6.1	2021-07-19 23:56:14 +08:00
vben	680ad0763c	chore: restore vite to version 2.3.6	2021-07-19 23:54:47 +08:00
无木	7a7dab0c4b	feat(demo): multi-modal in one page usage 添加使用is动态组件来在页面内使用多个modal的演示	2021-07-19 18:40:02 +08:00
无木	59eb828d4d	style: fixed line break style 修正换行符	2021-07-19 16:37:47 +08:00
无木	52af1dd0d4	feat(basic-table): add `ApiTreeSelect` edit component 为表格添加ApiTreeSelect编辑组件，修复一些其它的已知问题	2021-07-19 16:25:56 +08:00
无木	897bed9729	fix(api-select): fix `options-change` event data 修复options-change事件参数不是select所使用的标准options数据的问题	2021-07-19 16:19:51 +08:00
无木	a764a95ae9	fix(countdown-input): add `slots` support 为CountdownInput组件添加Input的插槽支持	2021-07-19 15:27:05 +08:00
无木	535bdddf91	fix(demo): fix display problem of editable table with `apiSelect` 修复ApiSelect在可编辑表格中的显示问题	2021-07-19 00:51:02 +08:00
vben	18567e13a6	chore: update deps	2021-07-19 00:14:53 +08:00
lzdjack	03b17a8f8b	fix(formItem): Fix labelcol type mismatch (#903 ) *修复antdv升级后formItem中labelCol没有类型style的bug	2021-07-18 23:25:51 +08:00
无木	8832a074dc	fix(code-editor): `value` not support use as `v-model` 修复value不支持v-model用法的问题 fixed: #933	2021-07-17 18:01:23 +08:00
无木	61ce25be1b	fix(table): `value` show problem in editable cell 修复可编辑单元格的值不能直接通过修改dataSource来更新显示的问题。 fixed: #922	2021-07-16 13:59:55 +08:00
无木	d9d0071401	fix(api-tree-select): fix `event` checked in form 修复ApiTreeSelect在BasicForm内使用时可能出现的onChange类型检查失败的警告	2021-07-16 13:17:25 +08:00
无木	f8440175f3	fix(model): auto validate on value change 修复BasicModel的表单值发生变化时未能自动校验 fixed: #920	2021-07-16 13:14:24 +08:00
无木	5baaa58581	fix(modal): fixed `fullscreen` not worked 修复全屏功能异常的问题 fixed: #918	2021-07-16 11:22:12 +08:00
无木	f707541dda	fix(tree): fixed `checkedKeys` with `search` mode 修复搜索状态的切换导致的勾选值可能不正确的问题	2021-07-16 10:56:37 +08:00
无木	b06a7ab77b	fix(basic-tree): `checkedKeys` not worked with `search` 修复搜索功能可能导致`checkedKeys`丢失的问题 fixed: #915	2021-07-15 23:17:31 +08:00
无木	1b3058f825	fix(api-tree-select): auto load data if necessary 修正ApiTreeSelect的数据加载时机	2021-07-15 18:39:54 +08:00
无木	d81db890df	feat(api-tree-select): add `api` options to tree-select 添加ApiTreeSelect组件	2021-07-15 18:05:13 +08:00
无木	c1178027f0	fix: fix homePage affix error 修复当没有通过接口为用户指定首页时，如果默认的首页是一个带有重定向的路由，则可能出现双首页Tab的问题	2021-07-15 17:15:15 +08:00
无木	db7254a5e0	fix(table-action): fix `circle` button style 修复table-action组件内的圆形按钮内容没有居中的问题	2021-07-15 15:42:47 +08:00
无木	dc51e6a8d4	fix(table-action): fixed icon `margin` without label 修复当没有label时，icon没有在按钮内居中的问题	2021-07-15 14:36:40 +08:00
无木	4b46a84c2b	fix: infinite redirect in `BACK` mode 修复后端权限模式下的路由无限重定向的问题	2021-07-15 01:59:23 +08:00
无木	87583c8b54	fix: ensure PAGE_NOT_FOUND_ROUTE exist 修复某些情况下404路由可能白屏的问题	2021-07-14 21:37:10 +08:00
无木	1e63379088	fix(multiple-tab): ignore login page 修复标签页可能会创建登录页面标签的问题	2021-07-14 20:44:52 +08:00
无木	237e65eac9	fix: resolving `Vue Router warn` 移除因为动态加载路由而产生的vue-router警告	2021-07-14 20:32:58 +08:00
无木	6350224a1b	style(basic-table): remove scroller patcher 移除table滚动条样式覆盖	2021-07-14 16:37:53 +08:00
Vben	ae7821e296	fix(modal): ensure that props are passed correctly,fix #897	2021-07-13 22:46:01 +08:00
yanzhuang	a1d956d369	fix(useWatermark): fix `func` call `createWatermark` call `clear` to resizeEvent removed (#901 )	2021-07-13 22:23:11 +08:00
无木	35e1347029	fix(markdown): set `value` error 修复markdown组件在完成初始化之前动态设置value可能导致异常的问题	2021-07-13 18:04:42 +08:00
无木	d95815b503	fix(markdown): resolving markdown exceptions 修复markdown组件的异常以及不能正确设置value的问题	2021-07-13 15:28:10 +08:00
无木	0a3683a186	feat: customized user home page 新增自定义的用户首页（可以每个用户都不相同）	2021-07-13 14:10:31 +08:00
无木	f5e31febbd	fix(breadcrumb): `redirect` not worked 修复面包屑组件的重定向菜单不能工作以及eslint警告	2021-07-13 11:09:00 +08:00
周旭	6f830703a2	perf(menu): Optimize the style of the bottom collapse button in the Mix menu layout (#896 )	2021-07-13 09:25:46 +08:00
shisan	bfb5ebd7b8	chore: update deps	2021-07-13 00:07:10 +08:00
无木	012020e51c	style(notice-list): adjust style 去除通知列表组件标题和内容部分多余的margin-bottom，禁止自动隐藏不可用的翻页按钮	2021-07-12 22:33:28 +08:00
无木	aeebfc4d3d	style(notice-list): fix `margin-bottom` value 去除通知列表组件标题和内容部分多余的margin-bottom	2021-07-12 22:22:33 +08:00
无木	c16be2c499	feat(notice-list): add `pagination` support 为通知列表组件添加分页、超长自动省略、标题点击响应、标题删除线等功能 fixed: #894	2021-07-12 22:12:16 +08:00
无木	0f28e803d0	fix(table-action): incorrect button color of `disabled` state 修复表格操作列的按钮在disabled状态下的颜色显示 fixed: #891	2021-07-12 16:46:27 +08:00
无木	cad021c34b	fix(menu): fix mix-menu incorrect jumping in `hover` mode 修复悬停触发模式下左侧混合菜单会在没有子菜单且被激活时直接跳转路由	2021-07-09 19:20:05 +08:00
无木	5ceeefd17d	fix(menu): display error when contains hidden items 修复顶栏菜单在包含隐藏项目时的显示问题	2021-07-09 17:25:38 +08:00
无木	a9bbed1973	fix(form): fix `suffix` slot style 修复suffix插槽的样式问题	2021-07-09 16:39:50 +08:00
无木	0595a72da9	fix(mix-sider): fix mix-sider hover logic 修复左侧混合菜单的悬停处理逻辑	2021-07-09 13:56:33 +08:00
无木	c7c0a7e4c8	fix(table): fix index column style 修复序号列的样式问题	2021-07-09 13:37:13 +08:00
无木	05329ce950	fix(upload): ensure the value type is correct 修复BasicUpload组件在设置null值时的问题	2021-07-09 00:22:00 +08:00
周旭	7b76945bff	chore: perf TableAction.vue、build/utils.ts、prettier.config.js (#868 ) * perf: 优化 build 时 vite 模式判断 * perf: 优化 TableAction, 仅在 action.tooltip 存在的情况下才使用 Tooltip 组件 * docs: 仅在 action.tooltip 存在的情况下才使用 Tooltip 组件 * fix: 在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题 * docs: 修复在 window 上，拉取代码后 eslint 因 endOfLine 而保错问题	2021-07-08 23:20:49 +08:00
无木	540423ecf7	feat(table): add `headerTop` slot 为表格添加`headerTop`插槽（表格头部的标题之上），以及相关演示 close: #881	2021-07-08 20:16:22 +08:00
无木	9cf070dd63	feat(api-select): clear options before fetch ApiSelect组件在发起新的请求之前先清空已有的options	2021-07-08 02:50:33 +08:00
无木	41e6d94b3b	feat(demo): add search demo for apiSelect 添加ApiSelect的本地搜索和远程搜索例子	2021-07-08 02:46:15 +08:00
Vben	17e47e074e	chore: add a multi-environment configuration example	2021-07-07 23:47:47 +08:00
Vben	dafcdd898c	fix: ensure that safari is running properly, fix #875	2021-07-07 23:40:29 +08:00
Vben	5bce6528ba	chore: update deps	2021-07-07 22:59:35 +08:00
无木	1e61da644f	fix(table): fix tree node align 修复树形表格的带有展开图标的单元格的内容对齐问题 fixed: #829	2021-07-07 22:38:00 +08:00
无木	9228282ae2	fix(demo): form pages support `keepAlive` 修复表单演示页面不支持keepAlive的问题	2021-07-07 21:33:08 +08:00
无木	45a94e41c1	fix(demo): resolve `key not exist` warnings 修复角色编辑页面可能会出现tree组件报key not exist警告的问题	2021-07-07 21:26:20 +08:00
无木	542121129e	feat(demo): add basicTree with async data expand all 演示basicTree使用异步数据并自动展开	2021-07-06 17:10:19 +08:00
Vben	cf840e3e73	perf: image compression configuration optimization	2021-07-06 00:30:16 +08:00
MARVIN	82eb72bbce	fix(CountTo): Fix displaying empty string when the value is 0 (#864 )	2021-07-05 22:45:13 +08:00
无木	5f1a6cdc59	feat(demo): demo default expanded tree table 演示默认展开树形表格数据	2021-07-05 16:23:58 +08:00
无木	02d3dca57e	fix(app-search): exclude items by `hideChildrenInMenu` 修复菜单搜索组件可能会显示被隐藏的子菜单的问题	2021-07-05 14:50:41 +08:00
无木	faf5c9fd7e	fix(app-search): exclude hidden items 修复菜单搜索组件可能会显示被隐藏的菜单的问题	2021-07-05 14:34:49 +08:00
无木	d5d5c4b4bf	fix(demo): `setup` page route config 修复引导页的相关路由配置	2021-07-05 12:18:05 +08:00
无木	993e19dcc3	fix(demo): add mock data `account detail` route 添加mock数据中缺失的账号详情路由 fixed: #858	2021-07-05 12:04:36 +08:00
无木	808291b503	fix: `menuSetting` can not set collapsed to false as default 修复无法通过将菜单配置为默认折叠的问题.	2021-07-05 11:07:27 +08:00
无木	d8c38207c0	fix(table): scrollbar style	2021-07-05 00:34:23 +08:00