chore: release 2.11.5

perf(menu->search): highlight match chars when search menu (#3880 )
* fix: state mutations in computed getters should be avoided * fix: type about getDataSourceRef * perf(menu search): highlight match chars when search menu
2025-08-26 00:26:20 +08:00 · 2024-05-31 09:57:10 +08:00 · 2024-05-31 09:55:27 +08:00 · 2024-05-31 09:54:41 +08:00 · 2024-05-31 09:54:05 +08:00 · 2024-05-31 09:53:50 +08:00
46 changed files with 1164 additions and 777 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,33 @@
+## [2.11.5](https://github.com/vbenjs/vue-vben-admin/compare/v2.11.4...v2.11.5) (2024-05-31)
+
+### Bug Fixes
+
+- 路由参数存在非英文字符的情况下 会生成一个新的tab 而非返回原有tab ([#3832](https://github.com/vbenjs/vue-vben-admin/issues/3832)) ([1fee161](https://github.com/vbenjs/vue-vben-admin/commit/1fee161786fee79a06fb3b308374db098abd461a))
+- 修复表单重置后，页面变化了，但是由于异步问题导致表单内部的状态没有及时同步 ([#3882](https://github.com/vbenjs/vue-vben-admin/issues/3882)) ([5d36b1a](https://github.com/vbenjs/vue-vben-admin/commit/5d36b1a5604f72921bf09c16a78e5e287a1ba9d0))
+- **Application:** search menu now correctly lowercases input keys ([#3842](https://github.com/vbenjs/vue-vben-admin/issues/3842)) ([144cdd4](https://github.com/vbenjs/vue-vben-admin/commit/144cdd468092f9314abf766ffc2eccc66c00f08a))
+- **BasicForm:** 修复FormSchema中使用ifShow隐藏字段时，默认表单查询重置按钮位置偏移量计算问题 ([#3830](https://github.com/vbenjs/vue-vben-admin/issues/3830)) ([478802b](https://github.com/vbenjs/vue-vben-admin/commit/478802b42625f74e8e8f817dea343b0692e3d024))
+- **BasicForm:** setFieldsValue not work in form when use date comp ([#3819](https://github.com/vbenjs/vue-vben-admin/issues/3819)) ([7538c57](https://github.com/vbenjs/vue-vben-admin/commit/7538c57db755f221d201e3fdb5052ecf1f42fd9a))
+- **BasicForm:** when value is 0 or false resetFields is not work ([#3828](https://github.com/vbenjs/vue-vben-admin/issues/3828)) ([22052f1](https://github.com/vbenjs/vue-vben-admin/commit/22052f10f9264008dcd25f6efdd53d679585407a))
+- **Breadcrumb:** if hideBreadcrumb is true and hidden ([#3821](https://github.com/vbenjs/vue-vben-admin/issues/3821)) ([b66a0de](https://github.com/vbenjs/vue-vben-admin/commit/b66a0def98018fc1504573692a9b7a83b5c2d483))
+- **imgUpload:** disabled not effect in the form ([#3809](https://github.com/vbenjs/vue-vben-admin/issues/3809)) ([4348d21](https://github.com/vbenjs/vue-vben-admin/commit/4348d21da80a1e54c94fb9528617b29090701080))
+- **Loading:** 处理v-loading指令和useLoading的内存泄露 ([#3861](https://github.com/vbenjs/vue-vben-admin/issues/3861)) ([bcd98ee](https://github.com/vbenjs/vue-vben-admin/commit/bcd98ee0672047aafebdd504ef0ecc630b5068da))
+- **loading:** useLoading is not working as expected ([#3877](https://github.com/vbenjs/vue-vben-admin/issues/3877)) ([c89417f](https://github.com/vbenjs/vue-vben-admin/commit/c89417f523bf4c7e2329d943796c3dd92c066d3a))
+- **useDataSource:** state mutations in computed getters should be avoided ([#3859](https://github.com/vbenjs/vue-vben-admin/issues/3859)) ([fee8081](https://github.com/vbenjs/vue-vben-admin/commit/fee808198e5c2038424a5f5b1da41b11d16d1508))
+
+### Features
+
+- add devtools plugin instead of inspector plugin ([#3856](https://github.com/vbenjs/vue-vben-admin/issues/3856)) ([e69dd1e](https://github.com/vbenjs/vue-vben-admin/commit/e69dd1e223a2e817805739f11823092992d14ae1))
+- **BasicForm:** add prefix slot for schema ([#3840](https://github.com/vbenjs/vue-vben-admin/issues/3840)) ([265627f](https://github.com/vbenjs/vue-vben-admin/commit/265627fcc8a197861aea2f04641f457548180177))
+- **codeEditor:** add type and config && add use case ([#3829](https://github.com/vbenjs/vue-vben-admin/issues/3829)) ([0ee7211](https://github.com/vbenjs/vue-vben-admin/commit/0ee721183bf52c4d1239a7966cc76f2150b43b13))
+- **Demo:** add ScreenShot page demo ([#3826](https://github.com/vbenjs/vue-vben-admin/issues/3826)) ([5a2d742](https://github.com/vbenjs/vue-vben-admin/commit/5a2d74249e9e9a9631f3f43e2249b7ccc13f6da4))
+- **form:** add valueFormat for schema ([#3873](https://github.com/vbenjs/vue-vben-admin/issues/3873)) ([0bc01d8](https://github.com/vbenjs/vue-vben-admin/commit/0bc01d8528fc11904628974799ab44180e3e3314))
+
+### Performance Improvements
+
+- **BasicForm:** fix invaild defaultValue && split-setdefault-setvalue ([#3815](https://github.com/vbenjs/vue-vben-admin/issues/3815)) ([88e77db](https://github.com/vbenjs/vue-vben-admin/commit/88e77dbf994f594bc31189b896deab4be18351b8))
+- **form->util:** duplicate judge ([#3865](https://github.com/vbenjs/vue-vben-admin/issues/3865)) ([dcba0ca](https://github.com/vbenjs/vue-vben-admin/commit/dcba0ca837a0f72beaa09ff394fa9b6ff465dec1))
+- **menu->search:** highlight match chars when search menu ([#3880](https://github.com/vbenjs/vue-vben-admin/issues/3880)) ([d5fed8a](https://github.com/vbenjs/vue-vben-admin/commit/d5fed8a47c031f6f228ca41ed29c0f9aaf05f623))
+
 ## [2.11.4](https://github.com/vbenjs/vue-vben-admin/compare/v2.11.3...v2.11.4) (2024-05-06)

 ### Bug Fixes
--- a/README.md
+++ b/README.md
@@ -62,7 +62,7 @@ Open the project in Gitpod (free online dev environment for GitHub) and start co
 - Get the project code

 ```bash
-git clone https://github.com/anncwb/vue-vben-admin.git
+git clone https://github.com/vbenjs/vue-vben-admin.git
 ```

 - Install dependencies
--- a/README.zh-CN.md
+++ b/README.zh-CN.md
@@ -62,7 +62,7 @@ Vue Vben Admin 是一个免费开源的中后台模版。使用了最新的`vue3
 - 获取项目代码

 ```bash
-git clone https://github.com/anncwb/vue-vben-admin.git
+git clone https://github.com/vbenjs/vue-vben-admin.git
 ```

 - 安装依赖
--- a/internal/vite-config/src/config/application.ts
+++ b/internal/vite-config/src/config/application.ts
@@ -36,7 +36,7 @@ function defineApplicationConfig(defineOptions: DefineOptions = {}) {
    });

    const pathResolve = (pathname: string) => resolve(root, '.', pathname);
-    const timestamp = new Date().getTime();
+
    const applicationConfig: UserConfig = {
      base: VITE_PUBLIC_PATH,
      resolve: {
@@ -63,8 +63,8 @@ function defineApplicationConfig(defineOptions: DefineOptions = {}) {
        cssTarget: 'chrome80',
        rollupOptions: {
          output: {
-            // 入口文件名
-            entryFileNames: `assets/entry/[name]-[hash]-${timestamp}.js`,
+            // 入口文件名（不能变，否则所有打包的 js hash 值全变了）
+            entryFileNames: 'index.js',
            manualChunks: {
              vue: ['vue', 'pinia', 'vue-router'],
              antd: ['ant-design-vue', '@ant-design/icons-vue'],
--- a/internal/vite-config/src/plugins/index.ts
+++ b/internal/vite-config/src/plugins/index.ts
@@ -2,6 +2,7 @@ import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import { type PluginOption } from 'vite';
 import purgeIcons from 'vite-plugin-purge-icons';
+import DevTools from 'vite-plugin-vue-devtools';

 import { createAppConfigPlugin } from './appConfig';
 import { configCompressPlugin } from './compress';
@@ -24,6 +25,8 @@ async function createPlugins({ isBuild, root, enableMock, compress, enableAnalyz
  const appConfigPlugin = await createAppConfigPlugin({ root, isBuild });
  vitePlugins.push(appConfigPlugin);

+  vitePlugins.push(DevTools());
+
  // vite-plugin-html
  vitePlugins.push(configHtmlPlugin({ isBuild }));

--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "vben-admin",
-  "version": "2.11.4",
+  "version": "2.11.5",
  "homepage": "https://github.com/vbenjs/vue-vben-admin",
  "bugs": {
    "url": "https://github.com/vbenjs/vue-vben-admin/issues"
@@ -85,6 +85,7 @@
    "dayjs": "^1.11.10",
    "echarts": "^5.5.0",
    "exceljs": "^4.4.0",
+    "html2canvas": "^1.4.1",
    "lodash-es": "^4.17.21",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
@@ -146,7 +147,7 @@
    "unbuild": "^2.0.0",
    "vite": "^5.2.10",
    "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-vue-inspector": "^5.0.1",
+    "vite-plugin-vue-devtools": "^7.2.0",
    "vue-tsc": "^2.0.14"
  },
  "packageManager": "pnpm@9.0.4",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -56,6 +56,9 @@ importers:
      exceljs:
        specifier: ^4.4.0
        version: 4.4.0
+      html2canvas:
+        specifier: ^1.4.1
+        version: 1.4.1
      lodash-es:
        specifier: ^4.17.21
        version: 4.17.21
@@ -234,9 +237,9 @@ importers:
      vite-plugin-mock:
        specifier: ^2.9.6
        version: 2.9.8(mockjs@1.1.0)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))
-      vite-plugin-vue-inspector:
-        specifier: ^5.0.1
-        version: 5.0.1(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))
+      vite-plugin-vue-devtools:
+        specifier: ^7.2.0
+        version: 7.2.0(rollup@3.29.4)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))(vue@3.4.25(typescript@5.4.5))
      vue-tsc:
        specifier: ^2.0.14
        version: 2.0.14(typescript@5.4.5)
@@ -1931,21 +1934,9 @@ packages:
    peerDependencies:
      '@babel/core': ^7.0.0-0

-  '@vue/compiler-core@3.4.23':
-    resolution: {integrity: sha512-HAFmuVEwNqNdmk+w4VCQ2pkLk1Vw4XYiiyxEp3z/xvl14aLTUBw2OfVH3vBcx+FtGsynQLkkhK410Nah1N2yyQ==}
-
-  '@vue/compiler-core@3.4.24':
-    resolution: {integrity: sha512-vbW/tgbwJYj62N/Ww99x0zhFTkZDTcGh3uwJEuadZ/nF9/xuFMC4693P9r+3sxGXISABpDKvffY5ApH9pmdd1A==}
-
  '@vue/compiler-core@3.4.25':
    resolution: {integrity: sha512-Y2pLLopaElgWnMNolgG8w3C5nNUVev80L7hdQ5iIKPtMJvhVpG0zhnBG/g3UajJmZdvW0fktyZTotEHD1Srhbg==}

-  '@vue/compiler-dom@3.4.23':
-    resolution: {integrity: sha512-t0b9WSTnCRrzsBGrDd1LNR5HGzYTr7LX3z6nNBG+KGvZLqrT0mY6NsMzOqlVMBKKXKVuusbbB5aOOFgTY+senw==}
-
-  '@vue/compiler-dom@3.4.24':
-    resolution: {integrity: sha512-4XgABML/4cNndVsQndG6BbGN7+EoisDwi3oXNovqL/4jdNhwvP8/rfRMTb6FxkxIxUUtg6AI1/qZvwfSjxJiWA==}
-
  '@vue/compiler-dom@3.4.25':
    resolution: {integrity: sha512-Ugz5DusW57+HjllAugLci19NsDK+VyjGvmbB2TXaTcSlQxwL++2PETHx/+Qv6qFwNLzSt7HKepPe4DcTE3pBWg==}

@@ -1958,6 +1949,17 @@ packages:
  '@vue/devtools-api@6.6.1':
    resolution: {integrity: sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==}

+  '@vue/devtools-core@7.2.0':
+    resolution: {integrity: sha512-cHSeu70rTtubt2DYia+VDGNTC1m84Xyuk5eNTjmOpMLECaJnWnzCv6kR84EZp7rG+MVZalJG+4ecX2GaTbU3cQ==}
+
+  '@vue/devtools-kit@7.2.0':
+    resolution: {integrity: sha512-Kx+U0QiQg/g714euYKfnCdhTcOycSlH1oyTE57D0sAmisdsRCNLfXcnnIwcFY2jdCpuz9DNbuE0VWQuYF5zAZQ==}
+    peerDependencies:
+      vue: ^3.0.0
+
+  '@vue/devtools-shared@7.2.0':
+    resolution: {integrity: sha512-gVr3IjKjU7axNvclRgICgy1gq/TDnF1hhBAEox+l5mMXZiTIFVIm1zpcIPssc0HxMDgzy+lXqOVsY4DGyZ+ZeA==}
+
  '@vue/language-core@1.8.27':
    resolution: {integrity: sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==}
    peerDependencies:
@@ -1988,12 +1990,6 @@ packages:
    peerDependencies:
      vue: 3.4.25

-  '@vue/shared@3.4.23':
-    resolution: {integrity: sha512-wBQ0gvf+SMwsCQOyusNw/GoXPV47WGd1xB5A1Pgzy0sQ3Bi5r5xm3n+92y3gCnB3MWqnRDdvfkRGxhKtbBRNgg==}
-
-  '@vue/shared@3.4.24':
-    resolution: {integrity: sha512-BW4tajrJBM9AGAknnyEw5tO2xTmnqgup0VTnDAMcxYmqOX0RG0b9aSUGAbEKolD91tdwpA6oCwbltoJoNzpItw==}
-
  '@vue/shared@3.4.25':
    resolution: {integrity: sha512-k0yappJ77g2+KNrIaF0FFnzwLvUBLUYr8VOwz+/6vLsmItFp51AcxLL7Ey3iPd7BIRyWPOcqUjMnm7OkahXllA==}

@@ -2296,6 +2292,10 @@ packages:
  balanced-match@2.0.0:
    resolution: {integrity: sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==}

+  base64-arraybuffer@1.0.2:
+    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
+    engines: {node: '>= 0.6.0'}
+
  base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}

@@ -2387,6 +2387,10 @@ packages:
    resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==}
    engines: {node: '>=6'}

+  bundle-name@4.1.0:
+    resolution: {integrity: sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==}
+    engines: {node: '>=18'}
+
  bundle-require@4.0.2:
    resolution: {integrity: sha512-jwzPOChofl67PSTW2SGubV9HBQAhhR2i6nskiOThauo9dzwDUgOWQScFVaJkjEfYX+UXiD+LEx8EblQMc2wIag==}
    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
@@ -2805,6 +2809,9 @@ packages:
    resolution: {integrity: sha512-c+N0v6wbKVxTu5gOBBFkr9BEdBWaqqjQeiJ8QvSRIJOf+UxlJh930m8e6/WNeODIK0mYLFkoONrnj16i2EcvfQ==}
    engines: {node: '>=12 || >=16'}

+  css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+
  css-property-sort-order-smacss@2.2.0:
    resolution: {integrity: sha512-nXutswsivIEBOrPo/OZw2KQjFPLvtg68aovJf6Kqrm3L6FmTvvFPaeDrk83hh0+pRJGuP3PeKJwMS0E6DFipdQ==}

@@ -2968,6 +2975,14 @@ packages:
    resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==}
    engines: {node: '>=0.10.0'}

+  default-browser-id@5.0.0:
+    resolution: {integrity: sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==}
+    engines: {node: '>=18'}
+
+  default-browser@5.2.1:
+    resolution: {integrity: sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==}
+    engines: {node: '>=18'}
+
  define-data-property@1.1.4:
    resolution: {integrity: sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==}
    engines: {node: '>= 0.4'}
@@ -2976,6 +2991,10 @@ packages:
    resolution: {integrity: sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==}
    engines: {node: '>=8'}

+  define-lazy-prop@3.0.0:
+    resolution: {integrity: sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==}
+    engines: {node: '>=12'}
+
  define-properties@1.2.1:
    resolution: {integrity: sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==}
    engines: {node: '>= 0.4'}
@@ -3209,6 +3228,9 @@ packages:
  error-ex@1.3.2:
    resolution: {integrity: sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==}

+  error-stack-parser-es@0.1.4:
+    resolution: {integrity: sha512-l0uy0kAoo6toCgVOYaAayqtPa2a1L15efxUMEnQebKwLQX2X0OpS6wMMQdc4juJXmxd9i40DuaUHq+mjIya9TQ==}
+
  es-abstract@1.23.3:
    resolution: {integrity: sha512-e+HfNH61Bj1X9/jLc5v1owaLYuHdeHHSQlkhCBiTK8rBvKaULl/beGMxwrMXjpYrv4pz22BlY570vVePA2ho4A==}
    engines: {node: '>= 0.4'}
@@ -3951,6 +3973,10 @@ packages:
    resolution: {integrity: sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==}
    engines: {node: '>=8'}

+  html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+
  htmlparser2@3.10.1:
    resolution: {integrity: sha512-IgieNijUMbkDovyoKObU1DUhm1iwNYE/fuifEoEHfd1oZKZDaONBSkal7Y01shxsM49R4XaMdGez3WnF9UfiCQ==}

@@ -4140,6 +4166,11 @@ packages:
    engines: {node: '>=8'}
    hasBin: true

+  is-docker@3.0.0:
+    resolution: {integrity: sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==}
+    engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0}
+    hasBin: true
+
  is-extendable@0.1.1:
    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
    engines: {node: '>=0.10.0'}
@@ -4176,6 +4207,11 @@ packages:
    resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==}
    engines: {node: '>=0.10.0'}

+  is-inside-container@1.0.0:
+    resolution: {integrity: sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==}
+    engines: {node: '>=14.16'}
+    hasBin: true
+
  is-module@1.0.0:
    resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==}

@@ -4278,6 +4314,10 @@ packages:
    resolution: {integrity: sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==}
    engines: {node: '>=8'}

+  is-wsl@3.1.0:
+    resolution: {integrity: sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==}
+    engines: {node: '>=16'}
+
  isarray@0.0.1:
    resolution: {integrity: sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==}

@@ -4828,10 +4868,6 @@ packages:
  magic-string@0.30.10:
    resolution: {integrity: sha512-iIRwTIf0QKV3UAnYK4PU8uiEc4SRh5jX0mwpIwETPpHdhVM4f53RSwS/vXvN1JhGX+Cs7B8qIq3d6AH49O5fAQ==}

-  magic-string@0.30.9:
-    resolution: {integrity: sha512-S1+hd+dIrC8EZqKyT9DstTH/0Z+f76kmmvZnkfQVmOpDEF9iVgdYif3Q/pIWHmCoo59bQVGW0kVL3e2nl+9+Sw==}
-    engines: {node: '>=12'}
-
  make-dir@2.1.0:
    resolution: {integrity: sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==}
    engines: {node: '>=6'}
@@ -4947,6 +4983,9 @@ packages:
    resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
    engines: {node: '>=16 || 14 >=14.17'}

+  mitt@3.0.1:
+    resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
+
  mixin-deep@1.3.2:
    resolution: {integrity: sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==}
    engines: {node: '>=0.10.0'}
@@ -5185,6 +5224,10 @@ packages:
  only@0.0.2:
    resolution: {integrity: sha512-Fvw+Jemq5fjjyWz6CpKx6w9s7xxqo3+JCyM0WXWeCSOboZ8ABkyvP8ID4CZuChA/wxSx+XSJmdOm8rGVyJ1hdQ==}

+  open@10.1.0:
+    resolution: {integrity: sha512-mnkeQ1qP5Ue2wd+aivTD3NHd/lZ96Lu0jgf0pwktLPtx6cTZiH7tyeGRRHs0zX0rbrahXPnXlUnbeXyaBBuIaw==}
+    engines: {node: '>=18'}
+
  open@8.4.2:
    resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==}
    engines: {node: '>=12'}
@@ -5914,6 +5957,10 @@ packages:
    engines: {node: '>=18.0.0', npm: '>=8.0.0'}
    hasBin: true

+  run-applescript@7.0.0:
+    resolution: {integrity: sha512-9by4Ij99JUr/MCFBUkDKLWK3G9HVXmabKz9U5MlIAIuvuzkiOicRYs8XJLxX+xahD+mLiiCYDqF9dKAgtzKP1A==}
+    engines: {node: '>=18'}
+
  run-parallel@1.2.0:
    resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}

@@ -6144,6 +6191,10 @@ packages:
  spdx-license-ids@3.0.17:
    resolution: {integrity: sha512-sh8PWc/ftMqAAdFiBu6Fy6JUOYjqDJBJvIhpfDMyHrr0Rbp5liZqd4TjtQ/RgfLjKFZb+LMx5hpml5qOWy0qvg==}

+  speakingurl@14.0.1:
+    resolution: {integrity: sha512-1POYv7uv2gXoyGFpBCmpDVSNV74IfsWlDW216UPjbWufNf+bSU6GdbDsxdcxtfwb4xlI3yxzOTKClUosxARYrQ==}
+    engines: {node: '>=0.10.0'}
+
  split-string@3.1.0:
    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
    engines: {node: '>=0.10.0'}
@@ -6445,6 +6496,9 @@ packages:
    resolution: {integrity: sha512-te/NtwBwfiNRLf9Ijqx3T0nlqZiQ2XrrtBvu+cLL8ZRrGkO0NHTug8MYFKyoSrv/sHTaSKfilUkizV6XhxMJ3g==}
    engines: {node: '>=8'}

+  text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+
  text-table@0.2.0:
    resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}

@@ -6797,6 +6851,9 @@ packages:
    resolution: {integrity: sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==}
    engines: {node: '>= 0.4.0'}

+  utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+
  uuid@3.4.0:
    resolution: {integrity: sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==}
    deprecated: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
@@ -6827,6 +6884,11 @@ packages:
  vditor@3.10.4:
    resolution: {integrity: sha512-NWaMom0buUvRjOCaK/jKeJEVfZNmfTgblK4+pxBoeTdiCYn5yWokcGYMh9GzHIvt5gy6FiQFc1VQvytIwyeIwA==}

+  vite-hot-client@0.2.3:
+    resolution: {integrity: sha512-rOGAV7rUlUHX89fP2p2v0A2WWvV3QMX2UYq0fRqsWSvFvev4atHWqjwGoKaZT1VTKyLGk533ecu3eyd0o59CAg==}
+    peerDependencies:
+      vite: ^2.6.0 || ^3.0.0 || ^4.0.0 || ^5.0.0-0
+
  vite-plugin-compression@0.5.1:
    resolution: {integrity: sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==}
    peerDependencies:
@@ -6847,6 +6909,16 @@ packages:
    peerDependencies:
      vite: '>=2.0.0'

+  vite-plugin-inspect@0.8.4:
+    resolution: {integrity: sha512-G0N3rjfw+AiiwnGw50KlObIHYWfulVwaCBUBLh2xTW9G1eM9ocE5olXkEYUbwyTmX+azM8duubi+9w5awdCz+g==}
+    engines: {node: '>=14'}
+    peerDependencies:
+      '@nuxt/kit': '*'
+      vite: ^3.1.0 || ^4.0.0 || ^5.0.0-0
+    peerDependenciesMeta:
+      '@nuxt/kit':
+        optional: true
+
  vite-plugin-mock@2.9.8:
    resolution: {integrity: sha512-YTQM5Sn7t+/DNOwTkr+W26QGTCk1PrDkhGHslTJ90lIPJhJtDTwuSkEYMAuLP9TcVQ/qExTFx/x/GE3kxJ05sw==}
    engines: {node: '>=12.0.0'}
@@ -6865,8 +6937,14 @@ packages:
    peerDependencies:
      vite: '>=2.0.0'

-  vite-plugin-vue-inspector@5.0.1:
-    resolution: {integrity: sha512-R93P8iFa6BPODhc/aOtO04A8FFMMyFIfm8ZVSmN+8vU1TgwsHya734APGpX4fVHSPX2aVwYyiezXBUYQ0Opsqw==}
+  vite-plugin-vue-devtools@7.2.0:
+    resolution: {integrity: sha512-bFWwx/YF9M+aXTjDo0/6DrC7+WCzLg7wAmFoQA3Gd7cv5WV4u65hHSZN8bq0zhgHqtYQZdWnp0L2z6JNCwcIGg==}
+    engines: {node: '>=v14.21.3'}
+    peerDependencies:
+      vite: ^3.1.0 || ^4.0.0-0 || ^5.0.0-0
+
+  vite-plugin-vue-inspector@5.1.0:
+    resolution: {integrity: sha512-yIw9dvBz9nQW7DPfbJtUVW6JTnt67hqTPRnTwT2CZWMqDvISyQHRjgKl32nlMh1DRH+92533Sv6t59pWMLUCWA==}
    peerDependencies:
      vite: ^3.0.0-0 || ^4.0.0-0 || ^5.0.0-0

@@ -9020,22 +9098,6 @@ snapshots:
      '@babel/parser': 7.24.4
      '@vue/compiler-sfc': 3.4.25

-  '@vue/compiler-core@3.4.23':
-    dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.23
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.0
-
-  '@vue/compiler-core@3.4.24':
-    dependencies:
-      '@babel/parser': 7.24.4
-      '@vue/shared': 3.4.24
-      entities: 4.5.0
-      estree-walker: 2.0.2
-      source-map-js: 1.2.0
-
  '@vue/compiler-core@3.4.25':
    dependencies:
      '@babel/parser': 7.24.4
@@ -9044,16 +9106,6 @@ snapshots:
      estree-walker: 2.0.2
      source-map-js: 1.2.0

-  '@vue/compiler-dom@3.4.23':
-    dependencies:
-      '@vue/compiler-core': 3.4.23
-      '@vue/shared': 3.4.23
-
-  '@vue/compiler-dom@3.4.24':
-    dependencies:
-      '@vue/compiler-core': 3.4.24
-      '@vue/shared': 3.4.24
-
  '@vue/compiler-dom@3.4.25':
    dependencies:
      '@vue/compiler-core': 3.4.25
@@ -9078,11 +9130,36 @@ snapshots:

  '@vue/devtools-api@6.6.1': {}

+  '@vue/devtools-core@7.2.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))(vue@3.4.25(typescript@5.4.5))':
+    dependencies:
+      '@vue/devtools-kit': 7.2.0(vue@3.4.25(typescript@5.4.5))
+      '@vue/devtools-shared': 7.2.0
+      mitt: 3.0.1
+      nanoid: 3.3.7
+      pathe: 1.1.2
+      vite-hot-client: 0.2.3(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))
+    transitivePeerDependencies:
+      - vite
+      - vue
+
+  '@vue/devtools-kit@7.2.0(vue@3.4.25(typescript@5.4.5))':
+    dependencies:
+      '@vue/devtools-shared': 7.2.0
+      hookable: 5.5.3
+      mitt: 3.0.1
+      perfect-debounce: 1.0.0
+      speakingurl: 14.0.1
+      vue: 3.4.25(typescript@5.4.5)
+
+  '@vue/devtools-shared@7.2.0':
+    dependencies:
+      rfdc: 1.3.1
+
  '@vue/language-core@1.8.27(typescript@5.4.5)':
    dependencies:
      '@volar/language-core': 1.11.1
      '@volar/source-map': 1.11.1
-      '@vue/compiler-dom': 3.4.24
+      '@vue/compiler-dom': 3.4.25
      '@vue/shared': 3.4.25
      computeds: 0.0.1
      minimatch: 9.0.4
@@ -9095,7 +9172,7 @@ snapshots:
  '@vue/language-core@2.0.14(typescript@5.4.5)':
    dependencies:
      '@volar/language-core': 2.2.0-alpha.10
-      '@vue/compiler-dom': 3.4.24
+      '@vue/compiler-dom': 3.4.25
      '@vue/shared': 3.4.25
      computeds: 0.0.1
      minimatch: 9.0.4
@@ -9125,10 +9202,6 @@ snapshots:
      '@vue/shared': 3.4.25
      vue: 3.4.25(typescript@5.4.5)

-  '@vue/shared@3.4.23': {}
-
-  '@vue/shared@3.4.24': {}
-
  '@vue/shared@3.4.25': {}

  '@vue/test-utils@2.4.5':
@@ -9507,6 +9580,8 @@ snapshots:

  balanced-match@2.0.0: {}

+  base64-arraybuffer@1.0.2: {}
+
  base64-js@1.5.1: {}

  base@0.11.2:
@@ -9604,6 +9679,10 @@ snapshots:

  builtin-modules@3.3.0: {}

+  bundle-name@4.1.0:
+    dependencies:
+      run-applescript: 7.0.0
+
  bundle-require@4.0.2(esbuild@0.19.12):
    dependencies:
      esbuild: 0.19.12
@@ -10031,6 +10110,10 @@ snapshots:

  css-functions-list@3.2.2: {}

+  css-line-break@2.1.0:
+    dependencies:
+      utrie: 1.0.2
+
  css-property-sort-order-smacss@2.2.0: {}

  css-select@4.3.0:
@@ -10198,6 +10281,13 @@ snapshots:

  deepmerge@4.3.1: {}

+  default-browser-id@5.0.0: {}
+
+  default-browser@5.2.1:
+    dependencies:
+      bundle-name: 4.1.0
+      default-browser-id: 5.0.0
+
  define-data-property@1.1.4:
    dependencies:
      es-define-property: 1.0.0
@@ -10206,6 +10296,8 @@ snapshots:

  define-lazy-prop@2.0.0: {}

+  define-lazy-prop@3.0.0: {}
+
  define-properties@1.2.1:
    dependencies:
      define-data-property: 1.1.4
@@ -10420,6 +10512,8 @@ snapshots:
    dependencies:
      is-arrayish: 0.2.1

+  error-stack-parser-es@0.1.4: {}
+
  es-abstract@1.23.3:
    dependencies:
      array-buffer-byte-length: 1.0.1
@@ -11313,6 +11407,11 @@ snapshots:

  html-tags@3.3.1: {}

+  html2canvas@1.4.1:
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
+
  htmlparser2@3.10.1:
    dependencies:
      domelementtype: 1.3.1
@@ -11515,6 +11614,8 @@ snapshots:

  is-docker@2.2.1: {}

+  is-docker@3.0.0: {}
+
  is-extendable@0.1.1: {}

  is-extendable@1.0.1:
@@ -11541,6 +11642,10 @@ snapshots:
    dependencies:
      is-extglob: 2.1.1

+  is-inside-container@1.0.0:
+    dependencies:
+      is-docker: 3.0.0
+
  is-module@1.0.0: {}

  is-negative-zero@2.0.3: {}
@@ -11620,6 +11725,10 @@ snapshots:
    dependencies:
      is-docker: 2.2.1

+  is-wsl@3.1.0:
+    dependencies:
+      is-inside-container: 1.0.0
+
  isarray@0.0.1: {}

  isarray@1.0.0: {}
@@ -12452,10 +12561,6 @@ snapshots:
    dependencies:
      '@jridgewell/sourcemap-codec': 1.4.15

-  magic-string@0.30.9:
-    dependencies:
-      '@jridgewell/sourcemap-codec': 1.4.15
-
  make-dir@2.1.0:
    dependencies:
      pify: 4.0.1
@@ -12562,6 +12667,8 @@ snapshots:

  minipass@7.0.4: {}

+  mitt@3.0.1: {}
+
  mixin-deep@1.3.2:
    dependencies:
      for-in: 1.0.2
@@ -12818,6 +12925,13 @@ snapshots:

  only@0.0.2: {}

+  open@10.1.0:
+    dependencies:
+      default-browser: 5.2.1
+      define-lazy-prop: 3.0.0
+      is-inside-container: 1.0.0
+      is-wsl: 3.1.0
+
  open@8.4.2:
    dependencies:
      define-lazy-prop: 2.0.0
@@ -13584,6 +13698,8 @@ snapshots:
      '@rollup/rollup-win32-x64-msvc': 4.14.3
      fsevents: 2.3.3

+  run-applescript@7.0.0: {}
+
  run-parallel@1.2.0:
    dependencies:
      queue-microtask: 1.2.3
@@ -13829,6 +13945,8 @@ snapshots:

  spdx-license-ids@3.0.17: {}

+  speakingurl@14.0.1: {}
+
  split-string@3.1.0:
    dependencies:
      extend-shallow: 3.0.2
@@ -14192,6 +14310,10 @@ snapshots:

  text-extensions@2.4.0: {}

+  text-segmentation@1.0.3:
+    dependencies:
+      utrie: 1.0.2
+
  text-table@0.2.0: {}

  thenify-all@1.6.0:
@@ -14469,7 +14591,7 @@ snapshots:
      globby: 13.2.2
      hookable: 5.5.3
      jiti: 1.21.0
-      magic-string: 0.30.9
+      magic-string: 0.30.10
      mkdist: 1.4.0(sass@1.75.0)(typescript@5.4.5)
      mlly: 1.6.1
      pathe: 1.1.2
@@ -14623,6 +14745,10 @@ snapshots:

  utils-merge@1.0.1: {}

+  utrie@1.0.2:
+    dependencies:
+      base64-arraybuffer: 1.0.2
+
  uuid@3.4.0: {}

  uuid@8.3.2: {}
@@ -14648,6 +14774,10 @@ snapshots:
    dependencies:
      diff-match-patch: 1.0.5

+  vite-hot-client@0.2.3(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
+    dependencies:
+      vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)
+
  vite-plugin-compression@0.5.1(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
    dependencies:
      chalk: 4.1.2
@@ -14690,6 +14820,22 @@ snapshots:
      pathe: 0.2.0
      vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)

+  vite-plugin-inspect@0.8.4(rollup@3.29.4)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
+    dependencies:
+      '@antfu/utils': 0.7.7
+      '@rollup/pluginutils': 5.1.0(rollup@3.29.4)
+      debug: 4.3.4
+      error-stack-parser-es: 0.1.4
+      fs-extra: 11.2.0
+      open: 10.1.0
+      perfect-debounce: 1.0.0
+      picocolors: 1.0.0
+      sirv: 2.0.4
+      vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)
+    transitivePeerDependencies:
+      - rollup
+      - supports-color
+
  vite-plugin-mock@2.9.8(mockjs@1.1.0)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
    dependencies:
      '@types/mockjs': 1.0.10
@@ -14729,7 +14875,23 @@ snapshots:
    transitivePeerDependencies:
      - supports-color

-  vite-plugin-vue-inspector@5.0.1(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
+  vite-plugin-vue-devtools@7.2.0(rollup@3.29.4)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))(vue@3.4.25(typescript@5.4.5)):
+    dependencies:
+      '@vue/devtools-core': 7.2.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))(vue@3.4.25(typescript@5.4.5))
+      '@vue/devtools-kit': 7.2.0(vue@3.4.25(typescript@5.4.5))
+      '@vue/devtools-shared': 7.2.0
+      execa: 8.0.1
+      sirv: 2.0.4
+      vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)
+      vite-plugin-inspect: 0.8.4(rollup@3.29.4)(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))
+      vite-plugin-vue-inspector: 5.1.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3))
+    transitivePeerDependencies:
+      - '@nuxt/kit'
+      - rollup
+      - supports-color
+      - vue
+
+  vite-plugin-vue-inspector@5.1.0(vite@5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)):
    dependencies:
      '@babel/core': 7.24.4
      '@babel/plugin-proposal-decorators': 7.24.1(@babel/core@7.24.4)
@@ -14737,7 +14899,7 @@ snapshots:
      '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.24.4)
      '@babel/plugin-transform-typescript': 7.24.4(@babel/core@7.24.4)
      '@vue/babel-plugin-jsx': 1.2.2(@babel/core@7.24.4)
-      '@vue/compiler-dom': 3.4.23
+      '@vue/compiler-dom': 3.4.25
      kolorist: 1.8.0
      magic-string: 0.30.10
      vite: 5.2.10(@types/node@20.12.7)(less@4.2.0)(sass@1.75.0)(terser@5.30.3)
--- a/src/components/Application/src/search/AppSearchModal.vue
+++ b/src/components/Application/src/search/AppSearchModal.vue
@@ -43,7 +43,14 @@
                <Icon :icon="item.icon || 'mdi:form-select'" :size="20" />
              </div>
              <div :class="`${prefixCls}-list__item-text`">
-                {{ item.name }}
+                <!-- 搜索结果包含的字符着色 -->
+                <span
+                  v-for="(each, i) in item.chars"
+                  :key="i"
+                  :class="{ highlight: each.highlight }"
+                >
+                  {{ each.char }}
+                </span>
              </div>
              <div :class="`${prefixCls}-list__item-enter`">
                <Icon icon="ant-design:enter-outlined" :size="20" />
@@ -254,6 +261,13 @@

        &-text {
          flex: 1;
+
+          // 搜索结果包含的字符着色
+          & > span {
+            &.highlight {
+              color: lighten(@primary-color, 20%);
+            }
+          }
        }

        &-enter {
--- a/src/components/Application/src/search/useMenuSearch.ts
+++ b/src/components/Application/src/search/useMenuSearch.ts
@@ -13,6 +13,8 @@ export interface SearchResult {
  name: string;
  path: string;
  icon?: string;
+  // 搜索结果包含的字符着色
+  chars: { char: string; highlight: boolean }[];
 }

 // Translate special characters
@@ -49,7 +51,7 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref, emit: A
  function search(e: ChangeEvent) {
    e?.stopPropagation();
    const key = e.target.value;
-    keyword.value = key.trim();
+    keyword.value = key.trim().toLowerCase();
    if (!key) {
      searchResult.value = [];
      return;
@@ -68,11 +70,85 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref, emit: A
      const { name, path, icon, children, hideMenu, meta } = item;
      if (
        !hideMenu &&
-        reg.test(name?.toLowerCase()) &&
+        reg.test(name?.toLowerCase() ?? '') &&
        (!children?.length || meta?.hideChildrenInMenu)
      ) {
+        const chars: { char: string; highlight: boolean }[] = [];
+
+        // 显示字符串
+        const label = (parent?.name ? `${parent.name} > ${name}` : name) ?? '';
+        const labelChars = label.split('');
+        let labelPointer = 0;
+
+        const keywordChars = keyword.value.split('');
+        const keywordLength = keywordChars.length;
+        let keywordPointer = 0;
+
+        // 用于查找完整关键词的匹配
+        let includePointer = 0;
+
+        // 优先查找完整关键词的匹配
+        if (label.toLowerCase().includes(keyword.value.toLowerCase())) {
+          while (includePointer < labelChars.length) {
+            if (
+              label.toLowerCase().slice(includePointer, includePointer + keywordLength) ===
+              keyword.value.toLowerCase()
+            ) {
+              chars.push(
+                ...label
+                  .substring(labelPointer, includePointer)
+                  .split('')
+                  .map((v) => ({
+                    char: v,
+                    highlight: false,
+                  })),
+              );
+              chars.push(
+                ...label
+                  .slice(includePointer, includePointer + keywordLength)
+                  .split('')
+                  .map((v) => ({
+                    char: v,
+                    highlight: true,
+                  })),
+              );
+              includePointer += keywordLength;
+              labelPointer = includePointer;
+            } else {
+              includePointer++;
+            }
+          }
+        }
+
+        // 查找满足关键词顺序的匹配
+        while (labelPointer < labelChars.length) {
+          keywordPointer = 0;
+          while (keywordPointer < keywordChars.length) {
+            if (keywordChars[keywordPointer] !== void 0 && labelChars[labelPointer] !== void 0) {
+              if (
+                keywordChars[keywordPointer].toLowerCase() ===
+                labelChars[labelPointer].toLowerCase()
+              ) {
+                chars.push({
+                  char: labelChars[labelPointer],
+                  highlight: true,
+                });
+                keywordPointer++;
+              } else {
+                chars.push({
+                  char: labelChars[labelPointer],
+                  highlight: false,
+                });
+              }
+            } else {
+              keywordPointer++;
+            }
+            labelPointer++;
+          }
+        }
        ret.push({
-          name: parent?.name ? `${parent.name} > ${name}` : name,
+          name: label,
+          chars,
          path,
          icon,
        });
@@ -81,7 +157,36 @@ export function useMenuSearch(refs: Ref<HTMLElement[]>, scrollWrap: Ref, emit: A
        ret.push(...handlerSearchResult(children, reg, item));
      }
    });
-    return ret;
+
+    // 排序
+    return ret.sort((a, b) => {
+      if (
+        a.name.toLowerCase().includes(keyword.value.toLowerCase()) &&
+        b.name.toLowerCase().includes(keyword.value.toLowerCase())
+      ) {
+        // 两者都存在完整关键词的匹配
+
+        // 匹配数量
+        const ca =
+          a.name.toLowerCase().match(new RegExp(keyword.value.toLowerCase(), 'g'))?.length ?? 0;
+        const cb =
+          b.name.toLowerCase().match(new RegExp(keyword.value.toLowerCase(), 'g'))?.length ?? 0;
+
+        // 匹配数量越多的优先显示，数量相同的按字符串排序
+        return ca === cb ? a.name.toLowerCase().localeCompare(b.name.toLowerCase()) : cb - ca;
+      } else {
+        if (a.name.toLowerCase().includes(keyword.value.toLowerCase())) {
+          // 完整关键词的匹配优先
+          return -1;
+        } else if (b.name.toLowerCase().includes(keyword.value.toLowerCase())) {
+          // 完整关键词的匹配优先
+          return 1;
+        } else {
+          // 按字符串排序
+          return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+        }
+      }
+    });
  }

  // Activate when the mouse moves to a certain line
--- a/src/components/CodeEditor/src/CodeEditor.vue
+++ b/src/components/CodeEditor/src/CodeEditor.vue
@@ -6,6 +6,7 @@
      :mode="mode"
      :readonly="readonly"
      :bordered="bordered"
+      :config="config"
    />
  </div>
 </template>
@@ -14,6 +15,7 @@
  import CodeMirrorEditor from './codemirror/CodeMirror.vue';
  import { isString } from '@/utils/is';
  import { MODE } from './typing';
+  import type { EditorConfiguration } from 'codemirror';

  const props = defineProps({
    value: { type: [Object, String] as PropType<Record<string, any> | string> },
@@ -28,6 +30,7 @@
    readonly: { type: Boolean },
    autoFormat: { type: Boolean, default: true },
    bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: () => {} },
  });

  const emit = defineEmits(['change', 'update:value', 'format-error']);
--- a/src/components/CodeEditor/src/codemirror/CodeMirror.vue
+++ b/src/components/CodeEditor/src/codemirror/CodeMirror.vue
@@ -22,15 +22,22 @@
  import { useDebounceFn } from '@vueuse/core';
  import { useAppStore } from '@/store/modules/app';
  import CodeMirror from 'codemirror';
-  import { MODE } from './../typing';
+  import type { EditorConfiguration } from 'codemirror';
+  import { MODE, parserDynamicImport } from './../typing';
  // css
-  import './codemirror.css';
+  import 'codemirror/lib/codemirror.css';
  import 'codemirror/theme/idea.css';
  import 'codemirror/theme/material-palenight.css';
-  // modes
-  import 'codemirror/mode/javascript/javascript';
-  import 'codemirror/mode/css/css';
-  import 'codemirror/mode/htmlmixed/htmlmixed';
+
+  // 代码段折叠功能
+  import 'codemirror/addon/fold/foldgutter.css';
+  import 'codemirror/addon/fold/foldcode.js';
+  import 'codemirror/addon/fold/foldgutter';
+  import 'codemirror/addon/fold/brace-fold';
+  import 'codemirror/addon/fold/comment-fold';
+  import 'codemirror/addon/fold/markdown-fold';
+  import 'codemirror/addon/fold/xml-fold';
+  import 'codemirror/addon/fold/indent-fold';

  const props = defineProps({
    mode: {
@@ -44,6 +51,7 @@
    value: { type: String, default: '' },
    readonly: { type: Boolean, default: false },
    bordered: { type: Boolean, default: false },
+    config: { type: Object as PropType<EditorConfiguration>, default: () => {} },
  });

  const emit = defineEmits(['change']);
@@ -66,7 +74,8 @@
    { flush: 'post' },
  );

-  watchEffect(() => {
+  watchEffect(async () => {
+    await parserDynamicImport(props.mode)();
    editor?.setOption('mode', props.mode);
  });

@@ -96,7 +105,7 @@
      autoCloseBrackets: true,
      autoCloseTags: true,
      foldGutter: true,
-      gutters: ['CodeMirror-linenumbers'],
+      gutters: ['CodeMirror-lint-markers', 'CodeMirror-linenumbers', 'CodeMirror-foldgutter'],
    };

    editor = CodeMirror(el.value!, {
@@ -108,6 +117,7 @@
      lineWrapping: true,
      lineNumbers: true,
      ...addonOptions,
+      ...props.config,
    });
    editor?.setValue(props.value);
    setTheme();
--- a/src/components/CodeEditor/src/codemirror/codemirror.css
+++ b/src/components/CodeEditor/src/codemirror/codemirror.css
@@ -1,529 +0,0 @@
-/* BASICS */
-
-.CodeMirror {
-  --base: #545281;
-  --comment: hsl(210deg 25% 60%);
-  --keyword: #af4ab1;
-  --variable: #0055d1;
-  --function: #c25205;
-  --string: #2ba46d;
-  --number: #c25205;
-  --tags: #d00;
-  --qualifier: #ff6032;
-  --important: var(--string);
-
-  position: relative;
-  height: auto;
-  height: 100%;
-  overflow: hidden;
-  font-family: var(--font-code);
-  background: white;
-  direction: ltr;
-}
-
-/* PADDING */
-
-.CodeMirror-lines {
-  min-height: 1px; /* prevents collapsing before first draw */
-  padding: 4px 0; /* Vertical padding around content */
-  cursor: text;
-}
-
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  background-color: white; /* The little square between H and V scrollbars */
-}
-
-/* GUTTER */
-
-.CodeMirror-gutters {
-  position: absolute;
-  top: 0;
-  left: 0;
-  z-index: 3;
-  min-height: 100%;
-  white-space: nowrap;
-  background-color: transparent;
-  border-right: 1px solid #ddd;
-}
-
-.CodeMirror-linenumber {
-  min-width: 20px;
-  padding: 0 3px 0 5px;
-  color: var(--comment);
-  text-align: right;
-  white-space: nowrap;
-  opacity: 0.6;
-}
-
-.CodeMirror-guttermarker {
-  color: black;
-}
-
-.CodeMirror-guttermarker-subtle {
-  color: #999;
-}
-
-/* FOLD GUTTER */
-
-.CodeMirror-foldmarker {
-  font-family: arial;
-  line-height: 0.3;
-  color: #414141;
-  text-shadow:
-    #f96 1px 1px 2px,
-    #f96 -1px -1px 2px,
-    #f96 1px -1px 2px,
-    #f96 -1px 1px 2px;
-  cursor: pointer;
-}
-
-.CodeMirror-foldgutter {
-  width: 0.7em;
-}
-
-.CodeMirror-foldgutter-open,
-.CodeMirror-foldgutter-folded {
-  cursor: pointer;
-}
-
-.CodeMirror-foldgutter-open::after,
-.CodeMirror-foldgutter-folded::after {
-  position: relative;
-  top: -0.1em;
-  display: inline-block;
-  font-size: 0.8em;
-  content: '>';
-  opacity: 0.8;
-  transform: rotate(90deg);
-  transition: transform 0.2s;
-}
-
-.CodeMirror-foldgutter-folded::after {
-  transform: none;
-}
-
-/* CURSOR */
-
-.CodeMirror-cursor {
-  position: absolute;
-  width: 0;
-  pointer-events: none;
-  border-right: none;
-  border-left: 1px solid black;
-}
-
-/* Shown when moving in bi-directional text */
-.CodeMirror div.CodeMirror-secondarycursor {
-  border-left: 1px solid silver;
-}
-
-.cm-fat-cursor .CodeMirror-cursor {
-  width: auto;
-  background: #7e7;
-  border: 0 !important;
-}
-
-.cm-fat-cursor div.CodeMirror-cursors {
-  z-index: 1;
-}
-
-.cm-fat-cursor-mark {
-  background-color: rgb(20 255 20 / 50%);
-  animation: blink 1.06s steps(1) infinite;
-}
-
-.cm-animate-fat-cursor {
-  width: auto;
-  background-color: #7e7;
-  border: 0;
-  animation: blink 1.06s steps(1) infinite;
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-@keyframes blink {
-  50% {
-    background-color: transparent;
-  }
-}
-
-.cm-tab {
-  display: inline-block;
-  text-decoration: inherit;
-}
-
-.CodeMirror-rulers {
-  position: absolute;
-  top: -50px;
-  right: 0;
-  bottom: -20px;
-  left: 0;
-  overflow: hidden;
-}
-
-.CodeMirror-ruler {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  border-left: 1px solid #ccc;
-}
-
-/* DEFAULT THEME */
-.cm-s-default.CodeMirror {
-  background-color: transparent;
-}
-
-.cm-s-default .cm-header {
-  color: blue;
-}
-
-.cm-s-default .cm-quote {
-  color: #090;
-}
-
-.cm-negative {
-  color: #d44;
-}
-
-.cm-positive {
-  color: #292;
-}
-
-.cm-header,
-.cm-strong {
-  font-weight: bold;
-}
-
-.cm-em {
-  font-style: italic;
-}
-
-.cm-link {
-  text-decoration: underline;
-}
-
-.cm-strikethrough {
-  text-decoration: line-through;
-}
-
-.cm-s-default .cm-atom,
-.cm-s-default .cm-def,
-.cm-s-default .cm-property,
-.cm-s-default .cm-variable-2,
-.cm-s-default .cm-variable-3,
-.cm-s-default .cm-punctuation {
-  color: var(--base);
-}
-
-.cm-s-default .cm-hr,
-.cm-s-default .cm-comment {
-  color: var(--comment);
-}
-
-.cm-s-default .cm-attribute,
-.cm-s-default .cm-keyword {
-  color: var(--keyword);
-}
-
-.cm-s-default .cm-variable {
-  color: var(--variable);
-}
-
-.cm-s-default .cm-bracket,
-.cm-s-default .cm-tag {
-  color: var(--tags);
-}
-
-.cm-s-default .cm-number {
-  color: var(--number);
-}
-
-.cm-s-default .cm-string,
-.cm-s-default .cm-string-2 {
-  color: var(--string);
-}
-
-.cm-s-default .cm-type {
-  color: #085;
-}
-
-.cm-s-default .cm-meta {
-  color: #555;
-}
-
-.cm-s-default .cm-qualifier {
-  color: var(--qualifier);
-}
-
-.cm-s-default .cm-builtin {
-  color: #7539ff;
-}
-
-.cm-s-default .cm-link {
-  color: var(--flash);
-}
-
-.cm-s-default .cm-error {
-  color: #ff008c;
-}
-
-.cm-invalidchar {
-  color: #ff008c;
-}
-
-.CodeMirror-composing {
-  border-bottom: 2px solid;
-}
-
-/* Default styles for common addons */
-
-div.CodeMirror span.CodeMirror-matchingbracket {
-  color: #0b0;
-}
-
-div.CodeMirror span.CodeMirror-nonmatchingbracket {
-  color: #a22;
-}
-
-.CodeMirror-matchingtag {
-  background: rgb(255 150 0 / 30%);
-}
-
-.CodeMirror-activeline-background {
-  background: #e8f2ff;
-}
-
-/* STOP */
-
-/* The rest of this file contains styles related to the mechanics of
-   the editor. You probably shouldn't touch them. */
-
-.CodeMirror-scroll {
-  position: relative;
-  height: 100%;
-  padding-bottom: 30px;
-  margin-right: -30px;
-
-  /* 30px is the magic margin used to hide the element's real scrollbars */
-
-  /* See overflow: hidden in .CodeMirror */
-  margin-bottom: -30px;
-  overflow: scroll !important; /* Things will break if this is overridden */
-  outline: none; /* Prevent dragging from highlighting the element */
-}
-
-.CodeMirror-sizer {
-  position: relative;
-  margin-bottom: 20px !important;
-  border-right: 30px solid transparent;
-}
-
-/* The fake, visible scrollbars. Used to force redraw during scrolling
-   before actual scrolling happens, thus preventing shaking and
-   flickering artifacts. */
-.CodeMirror-vscrollbar,
-.CodeMirror-hscrollbar,
-.CodeMirror-scrollbar-filler,
-.CodeMirror-gutter-filler {
-  position: absolute;
-  z-index: 6;
-  display: none;
-}
-
-.CodeMirror-vscrollbar {
-  top: 0;
-  right: 0;
-  overflow-x: hidden;
-  overflow-y: scroll;
-}
-
-.CodeMirror-hscrollbar {
-  bottom: 0;
-  left: 0;
-  overflow-x: scroll;
-  overflow-y: hidden;
-}
-
-.CodeMirror-scrollbar-filler {
-  right: 0;
-  bottom: 0;
-}
-
-.CodeMirror-gutter-filler {
-  bottom: 0;
-  left: 0;
-}
-
-.CodeMirror-gutter {
-  display: inline-block;
-  height: 100%;
-  margin-bottom: -30px;
-  white-space: normal;
-  vertical-align: top;
-}
-
-.CodeMirror-gutter-wrapper {
-  position: absolute;
-  z-index: 4;
-  background: none !important;
-  border: none !important;
-}
-
-.CodeMirror-gutter-background {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 4;
-}
-
-.CodeMirror-gutter-elt {
-  position: absolute;
-  z-index: 4;
-  cursor: default;
-}
-
-.CodeMirror-gutter-wrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirrorwrapper ::selection {
-  background-color: transparent;
-}
-
-.CodeMirror pre {
-  position: relative;
-  z-index: 2;
-  padding: 0 4px; /* Horizontal padding of content */
-  margin: 0;
-  overflow: visible;
-  font-family: inherit;
-  font-size: inherit;
-  line-height: inherit;
-  color: inherit;
-  word-wrap: normal;
-  white-space: pre;
-  background: transparent;
-  border-width: 0;
-
-  /* Reset some styles that the rest of the page might have set */
-  border-radius: 0;
-  -webkit-tap-highlight-color: transparent;
-  font-variant-ligatures: contextual;
-}
-
-.CodeMirror-wrap pre {
-  word-break: normal;
-  word-wrap: break-word;
-  white-space: pre-wrap;
-}
-
-.CodeMirror-linebackground {
-  position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  z-index: 0;
-}
-
-.CodeMirror-linewidget {
-  position: relative;
-  z-index: 2;
-  padding: 0.1px; /* Force widget margins to stay inside of the container */
-}
-
-.CodeMirror-rtl pre {
-  direction: rtl;
-}
-
-.CodeMirror-code {
-  outline: none;
-}
-
-/* Force content-box sizing for the elements where we expect it */
-.CodeMirror-scroll,
-.CodeMirror-sizer,
-.CodeMirror-gutter,
-.CodeMirror-gutters,
-.CodeMirror-linenumber {
-  box-sizing: content-box;
-}
-
-.CodeMirror-measure {
-  position: absolute;
-  width: 100%;
-  height: 0;
-  overflow: hidden;
-  visibility: hidden;
-}
-
-.CodeMirror-measure pre {
-  position: static;
-}
-
-div.CodeMirror-cursors {
-  position: relative;
-  z-index: 3;
-  visibility: hidden;
-}
-
-div.CodeMirror-dragcursors {
-  visibility: visible;
-}
-
-.CodeMirror-focused div.CodeMirror-cursors {
-  visibility: visible;
-}
-
-.CodeMirror-selected {
-  background: #d9d9d9;
-}
-
-.CodeMirror-focused .CodeMirror-selected {
-  background: #d7d4f0;
-}
-
-.CodeMirror-crosshair {
-  cursor: crosshair;
-}
-
-.CodeMirror-line::selection,
-.CodeMirror-line > span::selection,
-.CodeMirror-line > span > span::selection {
-  background: #d7d4f0;
-}
-
-.cm-searching {
-  background-color: #ffa;
-  background-color: rgb(255 255 0 / 40%);
-}
-
-/* Used to force a border model for a node */
-.cm-force-border {
-  padding-right: 0.1px;
-}
-
-@media print {
-  /* Hide the cursor when printing */
-  .CodeMirror div.CodeMirror-cursors {
-    visibility: hidden;
-  }
-}
-
-/* See issue #2901 */
-.cm-tab-wrap-hack::after {
-  content: '';
-}
-
-/* Help users use markselection to safely style text background */
-span.CodeMirror-selectedtext {
-  background: none;
-}
--- a/src/components/CodeEditor/src/typing.ts
+++ b/src/components/CodeEditor/src/typing.ts
@@ -1,5 +1,247 @@
 export enum MODE {
  JSON = 'application/json',
-  HTML = 'htmlmixed',
-  JS = 'javascript',
+  APL = 'apl',
+  ASCIIARMOR = 'asciiarmor',
+  ASTERISK = 'asterisk',
+  BRAINFUCK = 'brainfuck',
+  CLIKE = 'clike',
+  CLOJURE = 'clojure',
+  CMAKE = 'cmake',
+  COBOL = 'cobol',
+  COFFEESCRIPT = 'coffeescript',
+  COMMONLISP = 'commonlisp',
+  CRYSTAL = 'crystal',
+  CSS = 'css',
+  CYPHER = 'cypher',
+  D = 'd',
+  DART = 'dart',
+  DIFF = 'diff',
+  DJANGO = 'django',
+  DOCKERFILE = 'dockerfile',
+  DTD = 'dtd',
+  DYLAN = 'dylan',
+  EBNF = 'ebnf',
+  ECL = 'ecl',
+  EIFFEL = 'eiffel',
+  ELM = 'elm',
+  ERLANG = 'erlang',
+  FACTOR = 'factor',
+  FCL = 'fcl',
+  FORTH = 'forth',
+  FORTRAN = 'fortran',
+  GAS = 'gas',
+  GFM = 'gfm',
+  GHERKIN = 'gherkin',
+  GO = 'go',
+  GROOVY = 'groovy',
+  HAML = 'haml',
+  HANDLEBARS = 'handlebars',
+  HASKELL = 'haskell',
+  HAXE = 'haxe',
+  HTMLEMBEDDED = 'htmlembedded',
+  HTMLMIXED = 'htmlmixed',
+  HTTP = 'http',
+  IDL = 'idl',
+  JAVASCRIPT = 'javascript',
+  JINJA2 = 'jinja2',
+  JSX = 'jsx',
+  JULIA = 'julia',
+  LIVESCRIPT = 'livescript',
+  LUA = 'lua',
+  MARKDOWN = 'markdown',
+  MATHEMATICA = 'mathematica',
+  MBOX = 'mbox',
+  MIRC = 'mirc',
+  MLLIKE = 'mllike',
+  MODELICA = 'modelica',
+  MSCGEN = 'mscgen',
+  MUMPS = 'mumps',
+  NGINX = 'nginx',
+  NSIS = 'nsis',
+  NTRIPLES = 'ntriples',
+  OCTAVE = 'octave',
+  OZ = 'oz',
+  PASCAL = 'pascal',
+  PEGJS = 'pegjs',
+  PERL = 'perl',
+  PHP = 'php',
+  PIG = 'pig',
+  POWERSHELL = 'powershell',
+  PROPERTIES = 'properties',
+  PROTOBUF = 'protobuf',
+  PUG = 'pug',
+  PUPPET = 'puppet',
+  PYTHON = 'python',
+  Q = 'q',
+  R = 'r',
+  RPM = 'rpm',
+  RST = 'rst',
+  RUBY = 'ruby',
+  RUST = 'rust',
+  SAS = 'sas',
+  SASS = 'sass',
+  SCHEME = 'scheme',
+  SHELL = 'shell',
+  SIEVE = 'sieve',
+  SLIM = 'slim',
+  SMALLTALK = 'smalltalk',
+  SMARTY = 'smarty',
+  SOLR = 'solr',
+  SOY = 'soy',
+  SPARQL = 'sparql',
+  SPREADSHEET = 'spreadsheet',
+  SQL = 'sql',
+  STEX = 'stex',
+  STYLUS = 'stylus',
+  SWIFT = 'swift',
+  TCL = 'tcl',
+  TEXTILE = 'textile',
+  TIDDLYWIKI = 'tiddlywiki',
+  TIKI = 'tiki',
+  TOML = 'toml',
+  TORNADO = 'tornado',
+  TROFF = 'troff',
+  TTCN = 'ttcn',
+  TURTLE = 'turtle',
+  TWIG = 'twig',
+  VB = 'vb',
+  VBSCRIPT = 'vbscript',
+  VELOCITY = 'velocity',
+  VERILOG = 'verilog',
+  VHDL = 'vhdl',
+  VUE = 'vue',
+  WAST = 'wast',
+  WEBIDL = 'webidl',
+  XML = 'xml',
+  XQUERY = 'xquery',
+  YACAS = 'yacas',
+  YAML = 'yaml',
+  Z80 = 'z80',
+}
+/**
+ * @description: DynamicImport codemirror
+ */
+export function parserDynamicImport(str: MODE): () => Promise<any> {
+  const dynamicArray = {
+    // adapt before demo
+    'application/json': async () => await import('codemirror/mode/javascript/javascript'),
+    apl: async () => await import('codemirror/mode/apl/apl'),
+    asciiarmor: async () => await import('codemirror/mode/asciiarmor/asciiarmor'),
+    asterisk: async () => await import('codemirror/mode/asterisk/asterisk'),
+    brainfuck: async () => await import('codemirror/mode/brainfuck/brainfuck'),
+    clike: async () => await import('codemirror/mode/clike/clike'),
+    clojure: async () => await import('codemirror/mode/clojure/clojure'),
+    cmake: async () => await import('codemirror/mode/cmake/cmake'),
+    cobol: async () => await import('codemirror/mode/cobol/cobol'),
+    coffeescript: async () => await import('codemirror/mode/coffeescript/coffeescript'),
+    commonlisp: async () => await import('codemirror/mode/commonlisp/commonlisp'),
+    crystal: async () => await import('codemirror/mode/crystal/crystal'),
+    css: async () => await import('codemirror/mode/css/css'),
+    cypher: async () => await import('codemirror/mode/cypher/cypher'),
+    d: async () => await import('codemirror/mode/d/d'),
+    dart: async () => await import('codemirror/mode/dart/dart'),
+    diff: async () => await import('codemirror/mode/diff/diff'),
+    django: async () => await import('codemirror/mode/django/django'),
+    dockerfile: async () => await import('codemirror/mode/dockerfile/dockerfile'),
+    dtd: async () => await import('codemirror/mode/dtd/dtd'),
+    dylan: async () => await import('codemirror/mode/dylan/dylan'),
+    ebnf: async () => await import('codemirror/mode/ebnf/ebnf'),
+    ecl: async () => await import('codemirror/mode/ecl/ecl'),
+    eiffel: async () => await import('codemirror/mode/eiffel/eiffel'),
+    elm: async () => await import('codemirror/mode/elm/elm'),
+    erlang: async () => await import('codemirror/mode/erlang/erlang'),
+    factor: async () => await import('codemirror/mode/factor/factor'),
+    fcl: async () => await import('codemirror/mode/fcl/fcl'),
+    forth: async () => await import('codemirror/mode/forth/forth'),
+    fortran: async () => await import('codemirror/mode/fortran/fortran'),
+    gas: async () => await import('codemirror/mode/gas/gas'),
+    gfm: async () => await import('codemirror/mode/gfm/gfm'),
+    gherkin: async () => await import('codemirror/mode/gherkin/gherkin'),
+    go: async () => await import('codemirror/mode/go/go'),
+    groovy: async () => await import('codemirror/mode/groovy/groovy'),
+    haml: async () => await import('codemirror/mode/haml/haml'),
+    handlebars: async () => await import('codemirror/mode/handlebars/handlebars'),
+    haskell: async () => await import('codemirror/mode/haskell/haskell'),
+    haxe: async () => await import('codemirror/mode/haxe/haxe'),
+    htmlembedded: async () => await import('codemirror/mode/htmlembedded/htmlembedded'),
+    htmlmixed: async () => await import('codemirror/mode/htmlmixed/htmlmixed'),
+    http: async () => await import('codemirror/mode/http/http'),
+    idl: async () => await import('codemirror/mode/idl/idl'),
+    javascript: async () => await import('codemirror/mode/javascript/javascript'),
+    jinja2: async () => await import('codemirror/mode/jinja2/jinja2'),
+    jsx: async () => await import('codemirror/mode/jsx/jsx'),
+    julia: async () => await import('codemirror/mode/julia/julia'),
+    livescript: async () => await import('codemirror/mode/livescript/livescript'),
+    lua: async () => await import('codemirror/mode/lua/lua'),
+    markdown: async () => await import('codemirror/mode/markdown/markdown'),
+    mathematica: async () => await import('codemirror/mode/mathematica/mathematica'),
+    mbox: async () => await import('codemirror/mode/mbox/mbox'),
+    mirc: async () => await import('codemirror/mode/mirc/mirc'),
+    mllike: async () => await import('codemirror/mode/mllike/mllike'),
+    modelica: async () => await import('codemirror/mode/modelica/modelica'),
+    mscgen: async () => await import('codemirror/mode/mscgen/mscgen'),
+    mumps: async () => await import('codemirror/mode/mumps/mumps'),
+    nginx: async () => await import('codemirror/mode/nginx/nginx'),
+    nsis: async () => await import('codemirror/mode/nsis/nsis'),
+    ntriples: async () => await import('codemirror/mode/ntriples/ntriples'),
+    octave: async () => await import('codemirror/mode/octave/octave'),
+    oz: async () => await import('codemirror/mode/oz/oz'),
+    pascal: async () => await import('codemirror/mode/pascal/pascal'),
+    pegjs: async () => await import('codemirror/mode/pegjs/pegjs'),
+    perl: async () => await import('codemirror/mode/perl/perl'),
+    php: async () => await import('codemirror/mode/php/php'),
+    pig: async () => await import('codemirror/mode/pig/pig'),
+    powershell: async () => await import('codemirror/mode/powershell/powershell'),
+    properties: async () => await import('codemirror/mode/properties/properties'),
+    protobuf: async () => await import('codemirror/mode/protobuf/protobuf'),
+    pug: async () => await import('codemirror/mode/pug/pug'),
+    puppet: async () => await import('codemirror/mode/puppet/puppet'),
+    python: async () => await import('codemirror/mode/python/python'),
+    q: async () => await import('codemirror/mode/q/q'),
+    r: async () => await import('codemirror/mode/r/r'),
+    rpm: async () => await import('codemirror/mode/rpm/rpm'),
+    rst: async () => await import('codemirror/mode/rst/rst'),
+    ruby: async () => await import('codemirror/mode/ruby/ruby'),
+    rust: async () => await import('codemirror/mode/rust/rust'),
+    sas: async () => await import('codemirror/mode/sas/sas'),
+    sass: async () => await import('codemirror/mode/sass/sass'),
+    scheme: async () => await import('codemirror/mode/scheme/scheme'),
+    shell: async () => await import('codemirror/mode/shell/shell'),
+    sieve: async () => await import('codemirror/mode/sieve/sieve'),
+    slim: async () => await import('codemirror/mode/slim/slim'),
+    smalltalk: async () => await import('codemirror/mode/smalltalk/smalltalk'),
+    smarty: async () => await import('codemirror/mode/smarty/smarty'),
+    solr: async () => await import('codemirror/mode/solr/solr'),
+    soy: async () => await import('codemirror/mode/soy/soy'),
+    sparql: async () => await import('codemirror/mode/sparql/sparql'),
+    spreadsheet: async () => await import('codemirror/mode/spreadsheet/spreadsheet'),
+    sql: async () => await import('codemirror/mode/sql/sql'),
+    stex: async () => await import('codemirror/mode/stex/stex'),
+    stylus: async () => await import('codemirror/mode/stylus/stylus'),
+    swift: async () => await import('codemirror/mode/swift/swift'),
+    tcl: async () => await import('codemirror/mode/tcl/tcl'),
+    textile: async () => await import('codemirror/mode/textile/textile'),
+    tiddlywiki: async () => await import('codemirror/mode/tiddlywiki/tiddlywiki'),
+    tiki: async () => await import('codemirror/mode/tiki/tiki'),
+    toml: async () => await import('codemirror/mode/toml/toml'),
+    tornado: async () => await import('codemirror/mode/tornado/tornado'),
+    troff: async () => await import('codemirror/mode/troff/troff'),
+    ttcn: async () => await import('codemirror/mode/ttcn/ttcn'),
+    turtle: async () => await import('codemirror/mode/turtle/turtle'),
+    twig: async () => await import('codemirror/mode/twig/twig'),
+    vb: async () => await import('codemirror/mode/vb/vb'),
+    vbscript: async () => await import('codemirror/mode/vbscript/vbscript'),
+    velocity: async () => await import('codemirror/mode/velocity/velocity'),
+    verilog: async () => await import('codemirror/mode/verilog/verilog'),
+    vhdl: async () => await import('codemirror/mode/vhdl/vhdl'),
+    vue: async () => await import('codemirror/mode/vue/vue'),
+    wast: async () => await import('codemirror/mode/wast/wast'),
+    webidl: async () => await import('codemirror/mode/webidl/webidl'),
+    xml: async () => await import('codemirror/mode/xml/xml'),
+    xquery: async () => await import('codemirror/mode/xquery/xquery'),
+    yacas: async () => await import('codemirror/mode/yacas/yacas'),
+    yaml: async () => await import('codemirror/mode/yaml/yaml'),
+    z80: async () => await import('codemirror/mode/z80/z80'),
+  };
+  return dynamicArray[str];
 }
--- a/src/components/Form/src/BasicForm.vue
+++ b/src/components/Form/src/BasicForm.vue
@@ -64,6 +64,7 @@
  import { useDesign } from '@/hooks/web/useDesign';
  import { cloneDeep } from 'lodash-es';
  import { TableActionType } from '@/components/Table';
+  import { isFunction } from '@/utils/is';

  defineOptions({ name: 'BasicForm' });

@@ -130,6 +131,9 @@
        component,
        componentProps = {},
        isHandleDateDefaultValue = true,
+        field,
+        isHandleDefaultValue = true,
+        valueFormat,
      } = schema;
      // handle date type
      if (
@@ -161,6 +165,21 @@
          schema.defaultValue = def;
        }
      }
+
+      // handle schema.valueFormat
+      if (
+        isHandleDefaultValue &&
+        defaultValue &&
+        component &&
+        isFunction(valueFormat)
+      ) {
+        schema.defaultValue = valueFormat({
+          value: defaultValue,
+          schema,
+          model: formModel,
+          field,
+        });
+      }
    }
    if (unref(getProps).showAdvancedButton) {
      return schemas.filter(
@@ -207,6 +226,7 @@
    removeSchemaByField,
    resetFields,
    scrollToField,
+    resetDefaultField,
  } = useFormEvents({
    emit,
    getProps,
@@ -305,6 +325,7 @@
    validate,
    submit: handleSubmit,
    scrollToField: scrollToField,
+    resetDefaultField,
  };

  const getFormActionBindProps = computed(
@@ -337,11 +358,20 @@
      //   margin-bottom: 20px;
      // }

-      &.suffix-item {
+      &.suffix-item,
+      &.prefix-item {
        .ant-form-item-children {
          display: flex;
        }

+        .prefix {
+          display: inline-flex;
+          align-items: center;
+          margin-top: 1px;
+          padding-right: 6px;
+          line-height: 1;
+        }
+
        .suffix {
          display: inline-flex;
          align-items: center;
--- a/src/components/Form/src/components/FormItem.vue
+++ b/src/components/Form/src/components/FormItem.vue
@@ -277,6 +277,7 @@
          field,
          changeEvent = 'change',
          valueField,
+          valueFormat,
        } = props.schema;

        const isCheck = component && ['Switch', 'Checkbox'].includes(component);
@@ -286,9 +287,12 @@
        const on = {
          [eventKey]: (...args: Nullable<Recordable<any>>[]) => {
            const [e] = args;
-
+            
            const target = e ? e.target : null;
-            const value = target ? (isCheck ? target.checked : target.value) : e;
+            let value = target ? (isCheck ? target.checked : target.value) : e;
+            if(isFunction(valueFormat)){
+              value = valueFormat({...unref(getValues),value});
+            }
            props.setFormModel(field, value, props.schema);

            if (propsData[eventKey]) {
@@ -367,7 +371,7 @@
      }

      function renderItem() {
-        const { itemProps, slot, render, field, suffix, component } = props.schema;
+        const { itemProps, slot, render, field, suffix, component, prefix } = props.schema;
        const { labelCol, wrapperCol } = unref(itemLabelWidthProp);
        const { colon } = props.formProps;
        const opts = { disabled: unref(getDisable), readonly: unref(getReadonly) };
@@ -383,7 +387,10 @@
              labelCol={labelCol}
              wrapperCol={wrapperCol}
              name={field}
-              class={{ 'suffix-item': !!suffix }}
+              class={{
+                'suffix-item': !!suffix,
+                'prefix-item': !!prefix,
+              }}
            >
              <BasicTitle {...unref(getComponentsProps)}>{renderLabelHelpMessage()}</BasicTitle>
            </Form.Item>
@@ -400,6 +407,8 @@
          const showSuffix = !!suffix;
          const getSuffix = isFunction(suffix) ? suffix(unref(getValues)) : suffix;

+          const showPrefix = !!prefix;
+          const getPrefix = isFunction(prefix) ? prefix(unref(getValues)) : prefix;
          // TODO 自定义组件验证会出现问题，因此这里框架默认将自定义组件设置手动触发验证，如果其他组件还有此问题请手动设置autoLink=false
          if (component && NO_AUTO_LINK_COMPONENTS.includes(component)) {
            props.schema &&
@@ -413,7 +422,10 @@
            <Form.Item
              name={field}
              colon={colon}
-              class={{ 'suffix-item': showSuffix }}
+              class={{
+                'suffix-item': showSuffix,
+                'prefix-item': showPrefix,
+              }}
              {...(itemProps as Recordable<any>)}
              label={renderLabelHelpMessage()}
              rules={handleRules()}
@@ -421,6 +433,7 @@
              wrapperCol={wrapperCol}
            >
              <div style="display:flex">
+                {showPrefix && <span class="prefix">{getPrefix}</span>}
                <div style="flex:1;">{getContent()}</div>
                {showSuffix && <span class="suffix">{getSuffix}</span>}
              </div>
--- a/src/components/Form/src/helper.ts
+++ b/src/components/Form/src/helper.ts
@@ -32,7 +32,7 @@ export function createPlaceholderMessage(component: ComponentType) {
 const DATE_TYPE = ['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'];

 function genType() {
-  return [...DATE_TYPE, 'RangePicker'];
+  return [...DATE_TYPE, 'RangePicker',"TimeRangePicker"];
 }

 export function setComponentRuleType(
@@ -45,7 +45,7 @@ export function setComponentRuleType(
  }
  if (['DatePicker', 'MonthPicker', 'WeekPicker', 'TimePicker'].includes(component)) {
    rule.type = valueFormat ? 'string' : 'object';
-  } else if (['RangePicker', 'Upload', 'CheckboxGroup', 'TimePicker'].includes(component)) {
+  } else if (['RangePicker', 'Upload', 'CheckboxGroup'].includes(component)) {
    rule.type = 'array';
  } else if (['InputNumber'].includes(component)) {
    rule.type = 'number';
--- a/src/components/Form/src/hooks/useAdvanced.ts
+++ b/src/components/Form/src/hooks/useAdvanced.ts
@@ -120,24 +120,18 @@ export default function ({
    const { baseColProps = {} } = unref(getProps);

    for (const schema of unref(getSchema)) {
-      const { show, colProps } = schema;
+      const { show, ifShow, colProps } = schema;
+      const renderCallbackParams = {
+        schema: schema,
+        model: formModel,
+        field: schema.field,
+        values: { ...unref(defaultValueRef), ...formModel },
+      };
      let isShow = true;
-
-      if (isBoolean(show)) {
-        isShow = show;
-      }
-
-      if (isFunction(show)) {
-        isShow = show({
-          schema: schema,
-          model: formModel,
-          field: schema.field,
-          values: {
-            ...unref(defaultValueRef),
-            ...formModel,
-          },
-        });
-      }
+      isShow && isBoolean(ifShow) && (isShow = ifShow);
+      isShow && isFunction(ifShow) && (isShow = ifShow(renderCallbackParams));
+      isShow && isBoolean(show) && (isShow = show);
+      isShow && isFunction(show) && (isShow = show(renderCallbackParams));

      if (isShow && (colProps || baseColProps)) {
        const { itemColSum: sum, isAdvanced } = getAdvanced(
--- a/src/components/Form/src/hooks/useForm.ts
+++ b/src/components/Form/src/hooks/useForm.ts
@@ -78,9 +78,13 @@ export function useForm(props?: Props): UseFormReturnType {
      form.clearValidate(name);
    },

-    resetFields: async () => {
-      getForm().then(async (form) => {
-        await form.resetFields();
+    resetFields: () => {
+      // 修复表单重置后，页面变化了，但是由于异步问题导致表单内部的状态没有及时同步
+      return new Promise((resolve) => {
+        getForm().then(async (form) => {
+          await form.resetFields();
+          resolve();
+        });
      });
    },

@@ -121,6 +125,9 @@ export function useForm(props?: Props): UseFormReturnType {
      const form = await getForm();
      return form.validateFields(nameList);
    },
+    resetDefaultField: async (nameList?: NamePath[]) => {
+      unref(formRef)?.resetDefaultField(nameList);
+    },
  };

  return [register, methods];
--- a/src/components/Form/src/hooks/useFormEvents.ts
+++ b/src/components/Form/src/hooks/useFormEvents.ts
@@ -2,11 +2,11 @@ import type { ComputedRef, Ref } from 'vue';
 import type { FormProps, FormSchemaInner as FormSchema, FormActionType } from '../types/form';
 import type { NamePath } from 'ant-design-vue/lib/form/interface';
 import { unref, toRaw, nextTick } from 'vue';
-import { isArray, isFunction, isObject, isString, isDef, isNil } from '@/utils/is';
+import { isArray, isFunction, isObject, isString, isNil } from '@/utils/is';
 import { deepMerge } from '@/utils';
 import { dateItemType, defaultValueComponents, isIncludeSimpleComponents } from '../helper';
 import { dateUtil } from '@/utils/dateUtil';
-import { cloneDeep, has, uniqBy, get } from 'lodash-es';
+import { cloneDeep, has, uniqBy, get, set } from 'lodash-es';
 import { error } from '@/utils/log';

 interface UseFormActionContext {
@@ -20,6 +20,23 @@ interface UseFormActionContext {
  handleFormValues: Fn;
 }

+function tryConstructArray(field: string, values: Recordable = {}): any[] | undefined {
+  const pattern = /^\[(.+)\]$/;
+  if (pattern.test(field)) {
+    const match = field.match(pattern);
+    if (match && match[1]) {
+      const keys = match[1].split(',');
+      if (!keys.length) {
+        return undefined;
+      }
+      const result = [];
+      keys.forEach((k, index) => {
+        set(result, index, values[k.trim()]);
+      });
+      return result.filter(Boolean).length ? result : undefined;
+    }
+  }
+}
 export function useFormEvents({
  emit,
  getProps,
@@ -83,37 +100,66 @@ export function useFormEvents({
        });
      }

-      const constructValue = get(value, key);
+      let constructValue;
      const setDateFieldValue = (v) => {
        return v ? (_props?.valueFormat ? v : dateUtil(v)) : null;
      };

-      // 0| '' is allow
-      if (hasKey || !!constructValue) {
-        const fieldValue = constructValue || value;
-        // time type
-        if (itemIsDateType(key)) {
+      // Adapt date component
+      if (itemIsDateComponent(schema?.component)) {
+        constructValue = tryConstructArray(key, values);
+        if (constructValue) {
+          const fieldValue = constructValue || value;
          if (Array.isArray(fieldValue)) {
            const arr: any[] = [];
            for (const ele of fieldValue) {
              arr.push(setDateFieldValue(ele));
            }
            unref(formModel)[key] = arr;
+            validKeys.push(key);
          } else {
            unref(formModel)[key] = setDateFieldValue(fieldValue);
+            validKeys.push(key);
          }
-        } else {
-          unref(formModel)[key] = fieldValue;
        }
+      }
+
+      // Adapt common component
+      if (hasKey) {
+        constructValue = get(value, key);
+        const fieldValue = constructValue || value;
+        unref(formModel)[key] = fieldValue;
        if (_props?.onChange) {
          _props?.onChange(fieldValue);
        }
        validKeys.push(key);
      } else {
        // key not exist
-        if (isDef(get(defaultValueRef.value, key))) {
-          unref(formModel)[key] = cloneDeep(unref(get(defaultValueRef.value, key)));
-        }
+        // refer:https://github.com/vbenjs/vue-vben-admin/issues/3795
+      }
+    });
+    validateFields(validKeys).catch((_) => {});
+  }
+
+  /**
+   * @description: Set form default value
+   */
+  function resetDefaultField(nameList?: NamePath[]) {
+    if (!Array.isArray(nameList)) {
+      return;
+    }
+    if (Array.isArray(nameList) && nameList.length === 0) {
+      return;
+    }
+    const validKeys: string[] = [];
+    const keys = Object.keys(unref(formModel));
+    if (!keys) {
+      return;
+    }
+    nameList.forEach((key: any) => {
+      if (keys.includes(key)) {
+        validKeys.push(key);
+        unref(formModel)[key] = cloneDeep(unref(get(defaultValueRef.value, key)));
      }
    });
    validateFields(validKeys).catch((_) => {});
@@ -128,9 +174,9 @@ export function useFormEvents({
      return;
    }

-    let fieldList: string[] = isString(fields) ? [fields] : fields;
+    let fieldList = (isString(fields) ? [fields] : fields) as string[];
    if (isString(fields)) {
-      fieldList = [fields];
+      fieldList = [fields as string];
    }
    for (const field of fieldList) {
      _removeSchemaByField(field, schemaList);
@@ -273,10 +319,8 @@ export function useFormEvents({
  /**
   * @description: Is it time
   */
-  function itemIsDateType(key: string) {
-    return unref(getSchema).some((item) => {
-      return item.field === key && item.component ? dateItemType.includes(item.component) : false;
-    });
+  function itemIsDateComponent(key: string) {
+    return dateItemType.includes(key);
  }

  async function validateFields(nameList?: NamePath[] | undefined) {
@@ -359,6 +403,7 @@ export function useFormEvents({
    resetFields,
    setFieldsValue,
    scrollToField,
+    resetDefaultField,
  };
 }

@@ -370,7 +415,7 @@ function getDefaultValue(
  let defaultValue = cloneDeep(defaultValueRef.value[key]);
  const isInput = checkIsInput(schema);
  if (isInput) {
-    return defaultValue || undefined;
+    return !isNil(defaultValue) ? defaultValue : undefined;
  }
  if (!defaultValue && schema && checkIsRangeSlider(schema)) {
    defaultValue = [0, 0];
--- a/src/components/Form/src/hooks/useFormValues.ts
+++ b/src/components/Form/src/hooks/useFormValues.ts
@@ -135,7 +135,7 @@ export function useFormValues({
    const schemas = unref(getSchema);
    const obj: Recordable = {};
    schemas.forEach((item) => {
-      const { defaultValue, defaultValueObj } = item;
+      const { defaultValue, defaultValueObj, componentProps = {} } = item;
      const fieldKeys = Object.keys(defaultValueObj || {});
      if (fieldKeys.length) {
        fieldKeys.forEach((field) => {
@@ -152,6 +152,12 @@ export function useFormValues({
          formModel[item.field] = defaultValue;
        }
      }
+      if (!isNil(componentProps?.defaultValue)) {
+        obj[item.field] = componentProps?.defaultValue;
+        if (formModel[item.field] === undefined) {
+          formModel[item.field] = componentProps?.defaultValue;
+        }
+      }
    });
    defaultValueRef.value = cloneDeep(obj);
  }
--- a/src/components/Form/src/types/form.ts
+++ b/src/components/Form/src/types/form.ts
@@ -41,6 +41,7 @@ export interface FormActionType {
  validateFields: (nameList?: NamePath[]) => Promise<any>;
  validate: <T = Recordable>(nameList?: NamePath[] | false) => Promise<T>;
  scrollToField: (name: NamePath, options?: ScrollOptions) => Promise<void>;
+  resetDefaultField: (name?: NamePath[]) => void;
 }

 export type RegisterFn = (formInstance: FormActionType) => void;
@@ -166,8 +167,16 @@ interface BaseFormSchema<T extends ComponentType = any> {
  // Required
  required?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

-  suffix?: string | number | ((values: RenderCallbackParams) => string | number);
-
+  suffix?:
+    | string
+    | number
+    | VNode
+    | ((renderCallbackParams: RenderCallbackParams) => string | VNode | number);
+  prefix?:
+    | string
+    | number
+    | VNode
+    | ((renderCallbackParams: RenderCallbackParams) => string | VNode | number);
  // Validation rules
  rules?: Rule[];
  // Check whether the information is added to the label
@@ -188,6 +197,9 @@ interface BaseFormSchema<T extends ComponentType = any> {
  // 是否自动处理与时间相关组件的默认值
  isHandleDateDefaultValue?: boolean;

+  // 是否使用valueFormat自动处理默认值
+  isHandleDefaultValue?: boolean;
+
  isAdvanced?: boolean;

  // Matching details components
@@ -223,6 +235,8 @@ interface BaseFormSchema<T extends ComponentType = any> {
  dynamicReadonly?: boolean | ((renderCallbackParams: RenderCallbackParams) => boolean);

  dynamicRules?: (renderCallbackParams: RenderCallbackParams) => Rule[];
+
+  valueFormat?: (arg: Partial<RenderCallbackParams> & { value: any }) => any;
 }
 export interface ComponentFormSchema<T extends ComponentType = any> extends BaseFormSchema<T> {
  // render component
--- a/src/components/Loading/src/createLoading.ts
+++ b/src/components/Loading/src/createLoading.ts
@@ -19,13 +19,13 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen

  vm = createVNode(LoadingWrap);

+  let container: Nullable<HTMLElement> = null;
  if (wait) {
-    // TODO fix https://github.com/anncwb/vue-vben-admin/issues/438
    setTimeout(() => {
-      render(vm, document.createElement('div'));
+      render(vm, (container = document.createElement('div')));
    }, 0);
  } else {
-    render(vm, document.createElement('div'));
+    render(vm, (container = document.createElement('div')));
  }

  function close() {
@@ -41,6 +41,11 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen
    target.appendChild(vm.el as HTMLElement);
  }

+  function destory() {
+    container && render(null, container);
+    container = vm = null;
+  }
+
  if (target) {
    open(target);
  }
@@ -48,6 +53,7 @@ export function createLoading(props?: Partial<LoadingProps>, target?: HTMLElemen
    vm,
    close,
    open,
+    destory,
    setTip: (tip: string) => {
      data.tip = tip;
    },
--- a/src/components/Loading/src/useLoading.ts
+++ b/src/components/Loading/src/useLoading.ts
@@ -1,7 +1,8 @@
 import { unref } from 'vue';
+import type { Ref } from 'vue';
+import { tryOnUnmounted } from '@vueuse/core';
 import { createLoading } from './createLoading';
 import type { LoadingProps } from './typing';
-import type { Ref } from 'vue';

 export interface UseLoadingOptions {
  target?: any;
@@ -45,5 +46,9 @@ export function useLoading(
    instance.setTip(tip);
  };

+  tryOnUnmounted(() => {
+    instance.destory();
+  });
+
  return [open, close, setTip];
 }
--- a/src/components/Table/src/hooks/useDataSource.ts
+++ b/src/components/Table/src/hooks/useDataSource.ts
@@ -114,32 +114,40 @@ export function useDataSource(
    return unref(getAutoCreateKey) ? ROW_KEY : rowKey;
  });

-  const getDataSourceRef = computed(() => {
-    const dataSource = unref(dataSourceRef);
-    if (!dataSource || dataSource.length === 0) {
-      return unref(dataSourceRef);
-    }
-    if (unref(getAutoCreateKey)) {
-      const firstItem = dataSource[0];
-      const lastItem = dataSource[dataSource.length - 1];
+  const getDataSourceRef: Ref<Recordable<any>[]> = ref([]);

-      if (firstItem && lastItem) {
-        if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
-          const data = cloneDeep(unref(dataSourceRef));
-          data.forEach((item) => {
-            if (!item[ROW_KEY]) {
-              item[ROW_KEY] = buildUUID();
-            }
-            if (item.children && item.children.length) {
-              setTableKey(item.children);
-            }
-          });
-          dataSourceRef.value = data;
+  watch(
+    () => dataSourceRef.value,
+    () => {
+      const dataSource = unref(dataSourceRef);
+      if (!dataSource || dataSource.length === 0) {
+        getDataSourceRef.value = unref(dataSourceRef);
+      }
+      if (unref(getAutoCreateKey)) {
+        const firstItem = dataSource[0];
+        const lastItem = dataSource[dataSource.length - 1];
+
+        if (firstItem && lastItem) {
+          if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
+            const data = cloneDeep(unref(dataSourceRef));
+            data.forEach((item) => {
+              if (!item[ROW_KEY]) {
+                item[ROW_KEY] = buildUUID();
+              }
+              if (item.children && item.children.length) {
+                setTableKey(item.children);
+              }
+            });
+            dataSourceRef.value = data;
+          }
        }
      }
-    }
-    return unref(dataSourceRef);
-  });
+      getDataSourceRef.value = unref(dataSourceRef);
+    },
+    {
+      deep: true,
+    },
+  );

  async function updateTableData(index: number, key: Key, value: any) {
    const record = dataSourceRef.value[index];
@@ -351,7 +359,7 @@ export function useDataSource(
  });

  return {
-    getDataSourceRef,
+    getDataSourceRef: computed(() => getDataSourceRef.value),
    getDataSource,
    getRawDataSource,
    searchInfoRef,
--- a/src/components/Upload/src/BasicUpload.vue
+++ b/src/components/Upload/src/BasicUpload.vue
@@ -54,10 +54,11 @@
  import { uploadContainerProps } from './props';
  import { omit } from 'lodash-es';
  import { useI18n } from '@/hooks/web/useI18n';
-  import { isArray } from '@/utils/is';
+  import { isArray, isObject, isString } from '@/utils/is';
  import UploadModal from './components/UploadModal.vue';
  import UploadPreviewModal from './components/UploadPreviewModal.vue';
-
+  import { BaseFileItem } from './types/typing';
+  import { buildUUID } from '@/utils/uuid';
  defineOptions({ name: 'BasicUpload' });

  const props = defineProps(uploadContainerProps);
@@ -72,7 +73,7 @@
  //   预览modal
  const [registerPreviewModal, { openModal: openPreviewModal }] = useModal();

-  const fileList = ref<string[]>([]);
+  const fileList = ref<BaseFileItem[] | any[]>([]);

  const showPreview = computed(() => {
    const { emptyHidePreview } = props;
@@ -84,27 +85,64 @@
    const value = { ...attrs, ...props };
    return omit(value, 'onChange');
  });
-
+  function getValue(valueKey="url") {
+    const list = (fileList.value || []).map((item: any) => {
+      return item[valueKey];
+    });
+    return list;
+  }
+  function genFileListByUrls(urls: string[]) {
+    const list = urls.map((e) => {
+      return {
+        uid: buildUUID(),
+        url: e,
+      };
+    });
+    return list;
+  }
  watch(
    () => props.value,
-    (value = []) => {
-      fileList.value = isArray(value) ? value : [];
+    (v = []) => {
+      let values: string[] = [];
+      if (v) {
+        if (isArray(v)) {
+          values = v;
+        } else if (typeof v == 'string') {
+          values.push(v);
+        }
+        fileList.value = values.map((item,i) => {
+          if (item && isString(item)) {
+            return {
+              uid: buildUUID(),
+              url: item,
+            };
+          } else if (item && isObject(item)) {
+            return item;
+          } else {
+            return;
+          }
+        }) as any;
+      }
+      emit('update:value', values);
+      emit('change', values);
    },
    { immediate: true },
  );

  // 上传modal保存操作
-  function handleChange(urls: string[]) {
-    fileList.value = [...unref(fileList), ...(urls || [])];
-    emit('update:value', fileList.value);
-    emit('change', fileList.value);
+  function handleChange(urls: string[],valueKey:string) {
+    fileList.value = [...unref(fileList), ...(genFileListByUrls(urls) || [])];
+    const values = getValue(valueKey);
+    emit('update:value', values);
+    emit('change', values);
  }

  // 预览modal保存操作
-  function handlePreviewChange(urls: string[]) {
-    fileList.value = [...(urls || [])];
-    emit('update:value', fileList.value);
-    emit('change', fileList.value);
+  function handlePreviewChange(fileItems: string[],valueKey:string) {
+    fileList.value = [...(fileItems || [])];
+    const values = getValue(valueKey);
+    emit('update:value', values);
+    emit('change', values);
  }

  function handleDelete(record: Recordable<any>) {
--- a/src/components/Upload/src/components/ImageUpload.vue
+++ b/src/components/Upload/src/components/ImageUpload.vue
@@ -9,6 +9,7 @@
      :maxCount="maxNumber"
      :before-upload="beforeUpload"
      :custom-request="customRequest"
+      :disabled="disabled"
      @preview="handlePreview"
      @remove="handleRemove"
    >
--- a/src/components/Upload/src/components/UploadModal.vue
+++ b/src/components/Upload/src/components/UploadModal.vue
@@ -71,7 +71,7 @@
  const props = defineProps({
    ...basicProps,
    previewFileList: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<string[] | any[]>,
      default: () => [],
    },
  });
--- a/src/components/Upload/src/components/UploadPreviewModal.vue
+++ b/src/components/Upload/src/components/UploadPreviewModal.vue
@@ -14,15 +14,15 @@
  import { watch, ref } from 'vue';
  import FileList from './FileList.vue';
  import { BasicModal, useModalInner } from '@/components/Modal';
-  import { previewProps } from '../props';
-  import { FileBasicColumn, PreviewFileItem } from '../types/typing';
+  import { handleFnKey, previewProps } from '../props';
+  import { BaseFileItem, FileBasicColumn, PreviewFileItem } from '../types/typing';
  import { downloadByUrl } from '@/utils/file/download';
  import { createPreviewColumns, createPreviewActionColumn } from './data';
  import { useI18n } from '@/hooks/web/useI18n';
  import { isArray, isFunction } from '@/utils/is';
  import { BasicColumn } from '@/components/Table';
  import { useMessage } from '@/hooks/web/useMessage';
-
+  import { buildUUID } from '@/utils/uuid';
  const { createMessage } = useMessage();

  const props = defineProps(previewProps);
@@ -35,7 +35,7 @@
  const [register] = useModalInner();
  const { t } = useI18n();

-  const fileListRef = ref<PreviewFileItem[] | Array<any>>([]);
+  const fileListRef = ref<BaseFileItem[] | Array<any>>([]);
  watch(
    () => props.previewColumns,
    () => {
@@ -64,14 +64,15 @@
      fileListRef.value = value
        .filter((item) => !!item)
        .map((item) => {
-          if (typeof item != 'string') {
-            console.error('return value should be string');
+          if (typeof item != 'object') {
+            console.error('return value should be object');
            return;
          }
          return {
-            url: item,
-            type: item.split('.').pop() || '',
-            name: item.split('/').pop() || '',
+            uid: item?.uid,
+            url: item?.url,
+            type: item?.url?.split('.').pop() || '',
+            name: item?.url?.split('/').pop() || '',
          };
        });
    },
@@ -79,28 +80,26 @@
  );

  // 删除
-  function handleRemove(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
-    const index = fileListRef.value.findIndex((item) => item[urlKey] === record[urlKey]);
+  function handleRemove(obj: Record<handleFnKey, any>) {
+    let { record = {}, valueKey = 'url', uidKey = 'uid' } = obj;
+    const index = fileListRef.value.findIndex((item) => item[uidKey] === record[uidKey]);
    if (index !== -1) {
      const removed = fileListRef.value.splice(index, 1);
-      emit('delete', removed[0][urlKey]);
-      emit(
-        'list-change',
-        fileListRef.value.map((item) => item[urlKey]),
-      );
+      emit('delete', removed[0][uidKey]);
+      emit('list-change', fileListRef.value, valueKey);
    }
  }
  // 添加
-  function handleAdd(record: PreviewFileItem | Record<string, any>, urlKey = 'url') {
+  function handleAdd(obj: Record<handleFnKey, any>) {
+    let { record = {}, valueKey = 'url', uidKey = 'uid' } = obj;
    const { maxNumber } = props;
    if (fileListRef.value.length + fileListRef.value.length > maxNumber) {
      return createMessage.warning(t('component.upload.maxNumber', [maxNumber]));
    }
+    record[uidKey] = record[uidKey] ?? buildUUID();
+    record[valueKey] = record[valueKey];
    fileListRef.value = [...fileListRef.value, record];
-    emit(
-      'list-change',
-      fileListRef.value.map((item) => item[urlKey]),
-    );
+    emit('list-change', fileListRef.value, valueKey);
  }
  // 下载
  function handleDownload(record: PreviewFileItem) {
--- a/src/components/Upload/src/components/data.tsx
+++ b/src/components/Upload/src/components/data.tsx
@@ -5,6 +5,7 @@ import { Progress, Tag } from 'ant-design-vue';
 import TableAction from '@/components/Table/src/components/TableAction.vue';
 import ThumbUrl from './ThumbUrl.vue';
 import { useI18n } from '@/hooks/web/useI18n';
+import { previewColumnsFnType } from '../props';

 const { t } = useI18n();

@@ -81,7 +82,11 @@ export function createActionColumn(handleRemove: Function): FileBasicColumn {
        {
          label: t('component.upload.del'),
          color: 'error',
-          onClick: handleRemove.bind(null, record),
+          onClick: handleRemove.bind(null, {
+            record,
+            uidKey: 'uid',
+            valueKey: 'url',
+          }),
        },
      ];
      return <TableAction actions={actions} outside={true} />;
@@ -112,7 +117,7 @@ export function createPreviewActionColumn({
  handleRemove,
  handleDownload,
 }: {
-  handleRemove: Fn;
+  handleRemove: previewColumnsFnType['handleRemove'];
  handleDownload: Fn;
 }): BasicColumn {
  return {
@@ -125,7 +130,11 @@ export function createPreviewActionColumn({
        {
          label: t('component.upload.del'),
          color: 'error',
-          onClick: handleRemove.bind(null, record),
+          onClick: handleRemove.bind(null, {
+            record,
+            uidKey: 'uid',
+            valueKey: 'url',
+          }),
        },
        {
          label: t('component.upload.download'),
--- a/src/components/Upload/src/props.ts
+++ b/src/components/Upload/src/props.ts
@@ -1,5 +1,5 @@
 import type { PropType } from 'vue';
-import { FileBasicColumn } from './types/typing';
+import { BaseFileItem, FileBasicColumn } from './types/typing';

 import type { Options } from 'sortablejs';

@@ -14,9 +14,10 @@ type SortableOptions = Merge<
    // ...可扩展
  }
 >;
-type previewColumnsFnType = {
-  handleRemove: (record: Record<string, any>, key: string) => any;
-  handleAdd: (record: Record<string, any>, key: string) => any;
+export type handleFnKey = "record" | "valueKey" | "uidKey"
+export type previewColumnsFnType = {
+  handleRemove: (record: Record<handleFnKey, any>) => any;
+  handleAdd: (record: Record<handleFnKey, any>) => any;
 };
 export const previewType = {
  previewColumns: {
@@ -26,7 +27,7 @@ export const previewType = {
    required: false,
  },
  beforePreviewData: {
-    type: Function as PropType<(arg: string[]) => Recordable<any>>,
+    type: Function as PropType<(arg: BaseFileItem[] | any) => Recordable<any>>,
    default: null,
    required: false,
  },
@@ -112,7 +113,7 @@ export const uploadContainerProps = {

 export const previewProps = {
  value: {
-    type: Array as PropType<string[]>,
+    type: Array as PropType<BaseFileItem[] | any[]>,
    default: () => [],
  },
  maxNumber: {
--- a/src/components/Upload/src/types/typing.ts
+++ b/src/components/Upload/src/types/typing.ts
@@ -20,6 +20,11 @@ export interface FileItem {
  uuid: string;
 }

+export interface BaseFileItem {
+  uid: string | number;
+  url: string;
+  name?: string;
+}
 export interface PreviewFileItem {
  url: string;
  name: string;
--- a/src/directives/loading.ts
+++ b/src/directives/loading.ts
@@ -28,7 +28,7 @@ const loadingDirective: Directive = {
    }
  },
  unmounted(el) {
-    el?.instance?.close();
+    el?.instance?.destory();
  },
 };

--- a/src/layouts/default/header/components/Breadcrumb.vue
+++ b/src/layouts/default/header/components/Breadcrumb.vue
@@ -91,7 +91,7 @@

    const breadcrumbList = filterItem(matched);

-    if (currentRoute.value.meta?.currentActiveMenu) {
+    if (currentRoute.value.meta?.currentActiveMenu && !currentRoute.value.meta?.hideBreadcrumb) {
      breadcrumbList.push({
        ...currentRoute.value,
        name: currentRoute.value.meta?.title || currentRoute.value.name,
@@ -131,7 +131,6 @@
  }

  function handleClick(route) {
-    console.log(route);
    const { children, redirect, meta } = route;

    if (children?.length && !redirect) {
--- a/src/locales/lang/en/routes/demo.json
+++ b/src/locales/lang/en/routes/demo.json
@@ -37,7 +37,7 @@
  },
  "editor": {
    "editor": "Editor",
-    "jsonEditor": "Json editor",
+    "codeEditor": "Code editor",
    "markdown": "Markdown editor",
    "tinymce": "Rich text",
    "tinymceBasic": "Basic",
@@ -53,6 +53,7 @@
  "feat": {
    "feat": "Page Function",
    "icon": "Icon",
+    "screenShot": "Screen Shot",
    "tabs": "Tabs",
    "tabDetail": "Tab Detail",
    "sessionTimeout": "Session Timeout",
@@ -176,4 +177,4 @@
    "resizeParentHeightTable": "resizeParentHeightTable",
    "vxeTable": "VxeTable"
  }
-}
+}
--- a/src/locales/lang/zh-CN/routes/demo.json
+++ b/src/locales/lang/zh-CN/routes/demo.json
@@ -37,7 +37,7 @@
  },
  "editor": {
    "editor": "编辑器",
-    "jsonEditor": "Json编辑器",
+    "codeEditor": "代码编辑器",
    "markdown": "markdown编辑器",
    "tinymce": "富文本",
    "tinymceBasic": "基础使用",
@@ -53,6 +53,7 @@
  "feat": {
    "feat": "功能",
    "icon": "图标",
+    "screenShot": "截图",
    "sessionTimeout": "登录过期",
    "tabs": "标签页操作",
    "tabDetail": "标签详情页",
@@ -175,4 +176,4 @@
    "resizeParentHeightTable": "继承父元素高度",
    "vxeTable": "VxeTable"
  }
-}
+}
--- a/src/router/routes/modules/demo/comp.ts
+++ b/src/router/routes/modules/demo/comp.ts
@@ -345,12 +345,30 @@ const comp: AppRouteModule = {
      },
      children: [
        {
-          path: 'json',
-          component: () => import('@/views/demo/editor/json/index.vue'),
-          name: 'JsonEditorDemo',
+          path: 'code',
+          component: () => import('@/views/demo/editor/code/index.vue'),
+          name: 'codeEditorDemo',
          meta: {
-            title: t('routes.demo.editor.jsonEditor'),
+            title: t('routes.demo.editor.codeEditor'),
          },
+          children: [
+            {
+              path: 'code',
+              name: 'codeBasicDemo',
+              component: () => import('@/views/demo/editor/code/index.vue'),
+              meta: {
+                title: t('routes.demo.editor.tinymceBasic'),
+              },
+            },
+            {
+              path: 'editor',
+              name: 'codeEditorBasicDemo',
+              component: () => import('@/views/demo/editor/code/Editor.vue'),
+              meta: {
+                title: t('routes.demo.editor.tinymceForm'),
+              },
+            },
+          ],
        },
        {
          path: 'markdown',
--- a/src/router/routes/modules/demo/feat.ts
+++ b/src/router/routes/modules/demo/feat.ts
@@ -23,6 +23,14 @@ const feat: AppRouteModule = {
        title: t('routes.demo.feat.icon'),
      },
    },
+    {
+      path: 'screenshot',
+      name: 'Screenshot',
+      component: () => import('@/views/demo/feat/screenshot/index.vue'),
+      meta: {
+        title: t('routes.demo.feat.screenShot'),
+      },
+    },
    {
      path: 'ws',
      name: 'WebSocket',
--- a/src/router/routes/modules/demo/flow.ts
+++ b/src/router/routes/modules/demo/flow.ts
@@ -3,7 +3,7 @@ import type { AppRouteModule } from '@/router/types';
 import { LAYOUT } from '@/router/constant';
 import { t } from '@/hooks/web/useI18n';

-const charts: AppRouteModule = {
+const flow: AppRouteModule = {
  path: '/flow',
  name: 'FlowDemo',
  component: LAYOUT,
@@ -25,4 +25,4 @@ const charts: AppRouteModule = {
  ],
 };

-export default charts;
+export default flow;
--- a/src/router/routes/modules/demo/level.ts
+++ b/src/router/routes/modules/demo/level.ts
@@ -3,7 +3,7 @@ import type { AppRouteModule } from '@/router/types';
 import { getParentLayout, LAYOUT } from '@/router/constant';
 import { t } from '@/hooks/web/useI18n';

-const permission: AppRouteModule = {
+const level: AppRouteModule = {
  path: '/level',
  name: 'Level',
  component: LAYOUT,
@@ -65,4 +65,4 @@ const permission: AppRouteModule = {
  ],
 };

-export default permission;
+export default level;
--- a/src/store/modules/multipleTab.ts
+++ b/src/store/modules/multipleTab.ts
@@ -134,7 +134,7 @@ export const useMultipleTabStore = defineStore({
      // Existing pages, do not add tabs repeatedly
      const tabHasExits = this.tabList.some((tab, index) => {
        updateIndex = index;
-        return (tab.fullPath || tab.path) === (fullPath || path);
+        return decodeURIComponent(tab.fullPath || tab.path) === decodeURIComponent(fullPath || path);
      });

      // If the tab already exists, perform the update operation
--- a/src/views/demo/comp/upload/Upload4.vue
+++ b/src/views/demo/comp/upload/Upload4.vue
@@ -106,10 +106,14 @@
                      type: 'primary',
                      style: 'margin:4px',
                      onclick: () => {
-                        handleAdd(
-                          { url6: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png' },
-                          'url6',
-                        );
+                        handleAdd({
+                          record: {
+                            id6: new Date().getTime(),
+                            url6: 'https://vebn.oss-cn-beijing.aliyuncs.com/vben/logo.png',
+                          },
+                          uidKey: 'id6',
+                          valueKey: 'url6',
+                        });
                      },
                    },
                    () => '点我新增',
@@ -119,7 +123,11 @@
                    {
                      danger: true,
                      onclick: () => {
-                        handleRemove({ url6: record.url6 }, 'url6');
+                        handleRemove({
+                          record: { url6: record.url6 },
+                          uidKey: 'url6',
+                          valueKey: 'url6',
+                        });
                      },
                    },
                    () => '点我删除',
@@ -133,14 +141,15 @@
          let data = arg
            .filter((item) => !!item)
            .map((item) => {
-              if (typeof item !== 'string') {
-                console.error('return value should be string');
+              if (typeof item !== 'object') {
+                console.error('return value should be object');
                return;
              }
              return {
-                url6: item,
-                type6: item.split('.').pop() || '',
-                name6: item.split('/').pop() || '',
+                uid: item?.uid,
+                url6: item?.url,
+                type6: item?.url?.split('.').pop() || '',
+                name6: item?.url?.split('/').pop() || '',
              };
            });
          return data;
--- a/src/views/demo/editor/code/Editor.vue
+++ b/src/views/demo/editor/code/Editor.vue
@@ -0,0 +1,85 @@
+<template>
+  <PageWrapper title="代码编辑器组件嵌入Form示例">
+    <CollapseContainer title="代码编辑器组件">
+      <BasicForm
+        :labelWidth="100"
+        :schemas="schemas"
+        :actionColOptions="{ span: 24 }"
+        :baseColProps="{ span: 24 }"
+        @submit="handleSubmit"
+      />
+    </CollapseContainer>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { h } from 'vue';
+  import { BasicForm, FormSchema } from '@/components/Form';
+  import { CollapseContainer } from '@/components/Container';
+  import { useMessage } from '@/hooks/web/useMessage';
+  import { PageWrapper } from '@/components/Page';
+  import { CodeEditor, MODE } from '@/components/CodeEditor';
+
+  const schemas: FormSchema[] = [
+    {
+      field: 'title',
+      component: 'Input',
+      label: 'title',
+      defaultValue: '标题',
+      rules: [{ required: true }],
+    },
+    {
+      field: 'JSON',
+      component: 'Input',
+      label: 'JSON',
+      defaultValue: `{
+        "name":"BeJson",
+        "url":"http://www.xxx.com",
+        "page":88,
+        "isNonProfit":true,"
+        address:{ 
+            "street":"科技园路.",
+            "city":"江苏苏州",
+            "country":"中国"
+        },
+}`,
+      rules: [{ required: true, trigger: 'blur' }],
+      render: ({ model, field }) => {
+        return h(CodeEditor, {
+          value: model[field],
+          mode: MODE.JSON,
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+          config: {
+            tabSize: 10,
+          },
+        });
+      },
+    },
+    {
+      field: 'PYTHON',
+      component: 'Input',
+      label: 'PYTHON',
+      defaultValue: `def functionname( parameters ):
+   "函数_文档字符串"
+   function_suite
+   return [expression]`,
+      rules: [{ required: true, trigger: 'blur' }],
+      render: ({ model, field }) => {
+        return h(CodeEditor, {
+          value: model[field],
+          mode: MODE.PYTHON,
+          onChange: (value: string) => {
+            model[field] = value;
+          },
+        });
+      },
+    },
+  ];
+  const { createMessage } = useMessage();
+
+  function handleSubmit(values: any) {
+    console.log('click search,values:', values);
+    createMessage.success('click search,values:' + JSON.stringify(values));
+  }
+</script>
--- a/src/views/demo/editor/code/index.vue
+++ b/src/views/demo/editor/code/index.vue
@@ -66,11 +66,11 @@
      value.value = jsonData;
      return;
    }
-    if (mode === MODE.HTML) {
+    if (mode === MODE.HTMLMIXED) {
      value.value = htmlData;
      return;
    }
-    if (mode === MODE.JS) {
+    if (mode === MODE.JAVASCRIPT) {
      value.value = jsData;
      return;
    }
--- a/src/views/demo/feat/screenshot/index.vue
+++ b/src/views/demo/feat/screenshot/index.vue
@@ -0,0 +1,49 @@
+<template>
+  <PageWrapper title="截图示例">
+    <Row :gutter="24">
+      <Col :span="3">
+        <Card title="截图">
+          <a-button type="primary" @click="screenShot">点击截图</a-button>
+          <div class="mt-8" v-show="open">
+            <a-button type="primary" @click="Dele">点击删除</a-button>
+          </div>
+        </Card>
+      </Col>
+      <Col :span="21">
+        <Card title="截图内容" v-show="open">
+          <div ref="picture"></div>
+        </Card>
+      </Col>
+    </Row>
+  </PageWrapper>
+</template>
+<script lang="ts" setup>
+  import { PageWrapper } from '@/components/Page';
+  import html2canvas from 'html2canvas';
+  import { ref } from 'vue';
+  import { Card, Col, Row } from 'ant-design-vue';
+
+  const picture = ref();
+  const open = ref(false);
+  function screenShot() {
+    if (open.value) {
+      return;
+    }
+    html2canvas(document.body, {
+      backgroundColor: '#ffffff',
+      allowTaint: true, //开启跨域
+      useCORS: true,
+      scrollY: 0,
+      scrollX: 0,
+    }).then(function (canvas) {
+      canvas.style.width = '100%';
+      canvas.style.height = '100%';
+      picture.value.appendChild(canvas);
+      open.value = true;
+    });
+  }
+  function Dele() {
+    picture.value.innerHTML = '';
+    open.value = false;
+  }
+</script>
--- a/src/views/demo/form/RuleForm.vue
+++ b/src/views/demo/form/RuleForm.vue
@@ -18,7 +18,8 @@
  import { useMessage } from '@/hooks/web/useMessage';
  import { PageWrapper } from '@/components/Page';
  import { isAccountExist } from '@/api/demo/system';
-
+  import dayjs from "dayjs"
+  
  const schemas: FormSchema[] = [
    {
      field: 'field1',
@@ -235,7 +236,7 @@
      field5: ['1'],
      field7: '1',
      field33: '2020-12-12',
-      field3: '2020-12-12',
+      field3: dayjs('2020-12-12',"YYYY-MM-DD"),
    });
  }

--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,5 +1,4 @@
 import { defineApplicationConfig } from '@vben/vite-config';
-import Inspector from 'vite-plugin-vue-inspector';

 export default defineApplicationConfig({
  overrides: {
@@ -37,10 +36,5 @@ export default defineApplicationConfig({
        clientFiles: ['./index.html', './src/{views,components}/*'],
      },
    },
-    plugins: [
-      Inspector({
-        openInEditorHost: 'http://localhost:5173',
-      }),
-    ],
  },
 });
Author	SHA1	Message	Date
invalid w	2dcd733e16	chore: release 2.11.5	2024-05-31 09:57:10 +08:00
xachary	d5fed8a47c	perf(menu->search): highlight match chars when search menu (#3880 ) * fix: state mutations in computed getters should be avoided * fix: type about getDataSourceRef * perf(menu search): highlight match chars when search menu	2024-05-31 09:55:27 +08:00
xachary	a6086f4cc8	chore(build): keep same hash for the same files (#3878 ) * fix: state mutations in computed getters should be avoided * fix: type about getDataSourceRef * chore(build): keep same hash for the same files	2024-05-31 09:54:41 +08:00
Electrolux	d9cdf3f034	chore(upload): use uid && fix handleDelete (#3872 ) * chore(upload): 重构组件，添加key作为标识 * fix(upload): 显式传入handleDelete * update case	2024-05-31 09:54:05 +08:00
Electrolux	0bc01d8528	feat(form): add valueFormat for schema (#3873 )	2024-05-31 09:53:50 +08:00
Jun	5d36b1a560	fix: 修复表单重置后，页面变化了，但是由于异步问题导致表单内部的状态没有及时同步 (#3882 )	2024-05-29 21:56:56 +08:00
No name	c89417f523	fix(loading): useLoading is not working as expected (#3877 ) * fix(loading): useLoading is not working as expected * chore: remove comment --------- Co-authored-by: likui628 <90845831+likui628@users.noreply.github.com>	2024-05-28 09:14:55 +08:00
Electrolux	dcba0ca837	perf(form->util): duplicate judge (#3865 )	2024-05-23 21:59:44 +08:00
Arlo	e69dd1e223	feat: add devtools plugin instead of inspector plugin (#3856 )	2024-05-23 08:25:43 +08:00
xachary	fee808198e	fix(useDataSource): state mutations in computed getters should be avoided (#3859 ) * fix: state mutations in computed getters should be avoided * fix: type about getDataSourceRef	2024-05-23 08:20:41 +08:00
zhang	cfdb09fe5b	style: format code style (#3857 ) * first commit * style: format code style * style: format code	2024-05-22 22:40:56 +08:00
Electrolux	821238ea04	update case (#3858 )	2024-05-22 22:40:23 +08:00
wangjinchuan108	bcd98ee067	fix(Loading): 处理v-loading指令和useLoading的内存泄露 (#3861 ) Co-authored-by: jinchuanwang <1085296443@qq.com>	2024-05-22 22:39:51 +08:00
No name	144cdd4680	fix(Application): search menu now correctly lowercases input keys (#3842 )	2024-05-14 14:07:57 +08:00
Kyun Wong	1fee161786	fix: 路由参数存在非英文字符的情况下会生成一个新的tab 而非返回原有tab (#3832 )	2024-05-14 10:52:44 +08:00
Electrolux	265627fcc8	feat(BasicForm): add prefix slot for schema (#3840 )	2024-05-13 18:29:42 +08:00
李吉磊(Leo)	223562eab5	chore(docs): update git url (#3839 )	2024-05-13 10:54:32 +08:00
zhang	22052f10f9	fix(BasicForm): when value is 0 or false resetFields is not work (#3828 ) * fix(BasicForm): when value is 0 or false resetFields is not work * fix(BasicForm): when value is 0 or false resetFields is not work	2024-05-11 06:56:36 +08:00
zzy-jonay	478802b426	fix(BasicForm): 修复FormSchema中使用ifShow隐藏字段时，默认表单查询重置按钮位置偏移量计算问题 (#3830 )	2024-05-10 17:51:50 +08:00
tors	5a2d74249e	feat(Demo): add ScreenShot page demo (#3826 )	2024-05-10 17:30:52 +08:00
Electrolux	0ee721183b	feat(codeEditor): add type and config && add use case (#3829 ) * chore(codeEditor): add type and config && add use case * type(codeEditor): perf the config * fix annotate * fix annotate	2024-05-10 16:37:22 +08:00
zhang	b66a0def98	fix(Breadcrumb): if hideBreadcrumb is true and hidden (#3821 )	2024-05-09 09:16:20 +08:00
tors	679a23332f	chore: Rename the default export name (#3820 )	2024-05-09 09:15:58 +08:00
Electrolux	7538c57db7	fix(BasicForm): setFieldsValue not work in form when use date comp (#3819 ) * fix(BasicForm): setFieldsValue not work in form when use date comp * fix(BasicForm): add lost time component	2024-05-09 09:12:36 +08:00
Electrolux	88e77dbf99	perf(BasicForm): fix invaild defaultValue && split-setdefault-setvalue (#3815 )	2024-05-08 14:05:54 +08:00
Electrolux	4348d21da8	fix(imgUpload): disabled not effect in the form (#3809 )	2024-05-06 14:57:26 +08:00