Merge pull request #227 from fast-crud/for-pr

feat(projects): integration fast-crud
refactor(components): resolve conflict
2025-10-15 22:33:40 +08:00 · 2023-05-22 22:12:05 +08:00 · 2023-05-22 12:22:13 +08:00 · 2023-05-22 12:12:11 +08:00 · 2023-05-15 17:41:17 +08:00
165 changed files with 15037 additions and 2946 deletions
--- a/.env
+++ b/.env
@@ -10,7 +10,7 @@ VITE_APP_DESC=SoybeanAdmin是一个中后台管理系统模版
 VITE_AUTH_ROUTE_MODE=static

 # 路由首页(根路由重定向), 用于static模式的权限路由，dynamic模式取决于后端返回的路由首页
-VITE_ROUTE_HOME_PATH=/multi-menu/first/second
+VITE_ROUTE_HOME_PATH=/dashboard/analysis

 # iconify图标作为组件的前缀
 VITE_ICON_PREFFIX=icon
--- a/.env.development
+++ b/.env.development
@@ -1,2 +1 @@
 VITE_HTTP_PROXY=Y
-VITE_SOYBEAN_ROUTE_PLUGIN=Y
--- a/.env.production
+++ b/.env.production
@@ -1 +1,10 @@
+VITE_VISUALIZER=N
+
+VITE_COMPRESS=N
+
+# gzip | brotliCompress | deflate | deflateRaw
+VITE_COMPRESS_TYPE=gzip
+
+VITE_PWA=N
+
 VITE_PROD_MOCK=Y
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -1,25 +1,27 @@
 name: Release
+on:
+  push:
+    tags:
+      - "v*.**"

 permissions:
  contents: write

-on:
-  push:
-    tags:
-      - "v*"
-
 jobs:
  release:
+    name: Build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
        with:
          fetch-depth: 0

-      - uses: actions/setup-node@v3
+      - name: Setup Node.js
+        uses: actions/setup-node@v3
        with:
          node-version: 16.x

-      - run: npx githublogen
+      - name: Create github releases
+        run: npx changelogithub
        env:
          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
--- a/.npmrc
+++ b/.npmrc
@@ -1,2 +1,4 @@
 registry=https://registry.npmmirror.com/
 shamefully-hoist=true
+strict-peer-dependencies=false
+auto-install-peers=true
--- a/.vscode/launch.json
+++ b/.vscode/launch.json
@@ -7,14 +7,6 @@
      "name": "Vue debugger",
      "url": "http://localhost:3200",
      "webRoot": "${workspaceFolder}"
-    },
-    {
-      "type": "node",
-      "request": "launch",
-      "name": "TS debugger",
-      "skipFiles": ["<node_internals>/**"],
-      "runtimeArgs": ["--loader", "tsx"],
-      "program": "${relativeFile}"
    }
  ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,272 @@
+# Changelog
+
+All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
+
+### [0.9.9](https://github.com/honghuangdc/soybean-admin/compare/v0.9.8...v0.9.9) (2023-03-13)
+
+
+### Features
+
+* **hooks:** add useNaiveTable ([cc13fcc](https://github.com/honghuangdc/soybean-admin/commit/cc13fcc8aaaf667902d69350ad0de3cc16c261ab))
+* **projects:** custom unocss colors support opacity ([488e6e3](https://github.com/honghuangdc/soybean-admin/commit/488e6e32045d995361b898ef3d384dafcb069008))
+* **projects:** new layout,tab and add update theme settings ([912c353](https://github.com/honghuangdc/soybean-admin/commit/912c3531c5d7a3ab30e15d39bed98ca9b20131ab))
+
+
+### Bug Fixes
+
+* **components:** 修复iconSelect选择器点击事件失效 ([7e505f9](https://github.com/honghuangdc/soybean-admin/commit/7e505f9b96f5380b6c27b4c2ee2ab0698c4eedc4))
+* **components:** 页面跳转被拦截, 则会出现 tab 页签与页面不一致的问题 ([bd5dd2c](https://github.com/honghuangdc/soybean-admin/commit/bd5dd2cf28a0943721c397d70c53fe3988a4f81a))
+* **components:** refresh cached routes ([b0f98e4](https://github.com/honghuangdc/soybean-admin/commit/b0f98e4bfac31751dd39a7dec203277db813694b))
+* **projects:** fix eslint svg cause incorrect icon render ([0b5afda](https://github.com/honghuangdc/soybean-admin/commit/0b5afda287a0eea57daa8d35409297e2cbf6d578))
+* **projects:** fix github bug-report ([f73e3f6](https://github.com/honghuangdc/soybean-admin/commit/f73e3f648decf5632fe5193e825b1f912c5f6153))
+* **projects:** fix pwa logo ([bf2f617](https://github.com/honghuangdc/soybean-admin/commit/bf2f6172554337450c4a300b8bdb580d3e25ad45))
+* **projects:** not only `/login` claim dynamic path scenario , but also others , eg:/user/1 ([6059891](https://github.com/honghuangdc/soybean-admin/commit/60598915561f1bad6ffba0dc102f0a776be52f0d))
+* **projects:** sortRoutes recursively ([9188941](https://github.com/honghuangdc/soybean-admin/commit/918894147ab739b4592e8c76378246e28c46491a))
+* **projects:** the length of routes children list should greater than 0 ([e1afc10](https://github.com/honghuangdc/soybean-admin/commit/e1afc10b80243a5d8d270a351a37a0a2d159f167))
+* **utils:** make AxiosRequestConfig optional for request.handleDelete() ([4a6fec8](https://github.com/honghuangdc/soybean-admin/commit/4a6fec8af0b44b546f81ec41d7a5947371e189b2))
+
+### [0.9.8](https://github.com/honghuangdc/soybean-admin/compare/v0.9.7...v0.9.8) (2023-01-15)
+
+
+### Features
+
+* 新增 affix 属性，用于将其固定在tab卡 ([e772ff0](https://github.com/honghuangdc/soybean-admin/commit/e772ff05fb6ef513bd37cd9b1e245ea72f0ad6d2))
+* **projects:** add compress script [添加压缩命令] ([be6d431](https://github.com/honghuangdc/soybean-admin/commit/be6d431485a5688bd1ed567e11c1ca35ab9259b0))
+* **projects:** add generate logo script ([25daa23](https://github.com/honghuangdc/soybean-admin/commit/25daa236064c9a76677dbf16bc6d9717b1e0040f))
+* **projects:** add new route plugin @soybeanjs/vite-plugin-vue-page-route [集成新的路由插件] ([3131e00](https://github.com/honghuangdc/soybean-admin/commit/3131e00f0f4a66756f547892a8d312cde3aaf868))
+* **projects:** add script about generating png logo from [添加根据svg生成png图标的命令] ([70aeefe](https://github.com/honghuangdc/soybean-admin/commit/70aeefea02fcc13c152ee9d7a1197381bac724b9))
+* setting 页面新增 是否显示footer的开关 ([d064f62](https://github.com/honghuangdc/soybean-admin/commit/d064f6285a6d1616d7606f1390d5f01819b258bb))
+
+
+### Bug Fixes
+
+* **components:** 修复路由在path中包含重复路单词径菜单时，被激活会错误展开 ([264da00](https://github.com/honghuangdc/soybean-admin/commit/264da00e5d2cd8139907c2ac11a046649d942f4b))
+* count can't display when endValue is 0. ([0282feb](https://github.com/honghuangdc/soybean-admin/commit/0282feb1730724ba66c2e57ab354099afa074e81))
+* **projects:** 修复动态路由模式下路由不排序的问题 ([58b27c9](https://github.com/honghuangdc/soybean-admin/commit/58b27c96932ba89b362138a6056a82c25a7be282))
+* **projects:** 修复tabs在static路由模式下可以关闭首页 ([7211a17](https://github.com/honghuangdc/soybean-admin/commit/7211a17a8158b01a1f6dd6c83591f86d76633de0))
+* **projects:** add router-page.d.ts to git [将router-page.d.ts添加git提交] ([7a58035](https://github.com/honghuangdc/soybean-admin/commit/7a5803551419f65ca55ba797b49273b3a0dc6067))
+* **projects:** fix login success message [修复登录成功的消息提示] ([810398a](https://github.com/honghuangdc/soybean-admin/commit/810398abb882613f82ba385e8a7666cf8b86d92d))
+* **projects:** fix router when the dynamic routes api was failed [修复当动态路由接口失败后路由异常问题] ([f2b580f](https://github.com/honghuangdc/soybean-admin/commit/f2b580fc067e81202238bf8079a13ff014b0b329))
+* **projects:** fix vite-pwa plugin config ([94098d0](https://github.com/honghuangdc/soybean-admin/commit/94098d02e8cec12e3c9f9331ece154b65d1c9150))
+* remove height limit h-360px ([b5c570a](https://github.com/honghuangdc/soybean-admin/commit/b5c570adf55fd235dcec49bc20837623b1d5d3c4))
+* set password attributes ([a9a3703](https://github.com/honghuangdc/soybean-admin/commit/a9a37036d58274385a779e6460f7be281dafdcaf))
+
+### [0.9.7](https://github.com/honghuangdc/soybean-admin/compare/v0.9.6...v0.9.7) (2022-11-07)
+
+
+### Features
+
+* **projects:** 全局搜索菜单及消息通知适配移动端 ([97e2ffd](https://github.com/honghuangdc/soybean-admin/commit/97e2ffddf4ac047133dc016a91ac07556e562d29))
+* **projects:** 实现用户管理页面 ([472f93b](https://github.com/honghuangdc/soybean-admin/commit/472f93bfc111e8ca94adef823b8cc12e4f8cd2c6))
+* **projects:** 适配移动端，修复Tab关闭图标的bug ([296b154](https://github.com/honghuangdc/soybean-admin/commit/296b154be5dfe410b3cfca9afaeeaf9c47de3e0c)), closes [#87](https://github.com/honghuangdc/soybean-admin/issues/87) [#106](https://github.com/honghuangdc/soybean-admin/issues/106) [#109](https://github.com/honghuangdc/soybean-admin/issues/109) [#111](https://github.com/honghuangdc/soybean-admin/issues/111)
+* **projects:** 添加请求适配adapter层应用的示例页面 ([8d11a6a](https://github.com/honghuangdc/soybean-admin/commit/8d11a6affcfa37344011a6aaf3d6e005546f0e61))
+* **projects:** 添加生产的主题配置缓存 ([718c362](https://github.com/honghuangdc/soybean-admin/commit/718c36263e451a39bca6da6c33657a09515ffbcc))
+* **projects:** 添加系统管理的页面 ([c33b5eb](https://github.com/honghuangdc/soybean-admin/commit/c33b5ebfefbb3ae507141bd2e9414231fd1512d4))
+* **projects:** 添加组件名称，调整vue文件里面的类型声明位置 ([f64bc91](https://github.com/honghuangdc/soybean-admin/commit/f64bc91ce285c7a9806ed0f6ae970d9b598fd0cb))
+* **projects:** 添加provide、inject上下文示例 ([a444731](https://github.com/honghuangdc/soybean-admin/commit/a444731e9eef43022930c3550dcfc058e70a2941))
+* **projects:** 系统消息组件代码优化 ([9518372](https://github.com/honghuangdc/soybean-admin/commit/9518372fe0431d4e08a5f40d1b2982691fbb4107))
+* **projects:** 增加返回顶部功能 ([894b0f1](https://github.com/honghuangdc/soybean-admin/commit/894b0f1c182a36ad1774a8144bf50dd4e0b62a46))
+* **projects:** 增加系统消息组件 ([afa0134](https://github.com/honghuangdc/soybean-admin/commit/afa0134fdd63c253e102bc129e275d16ca25508e))
+* **projects:** add constant route page without login status[添加未登录可访问的固定路由示例页面] ([78efd77](https://github.com/honghuangdc/soybean-admin/commit/78efd7793a241811065caf56edf7e68aea58bc8c))
+* **projects:** add pinia setup syntax example: setup-store[添加setup syntax的pinia示例setup-store] ([82c4b09](https://github.com/honghuangdc/soybean-admin/commit/82c4b09b9411390f97c2d10bb211c66ed9656b63))
+* **projects:** import i18n [引入i18n] ([b632b7f](https://github.com/honghuangdc/soybean-admin/commit/b632b7ffed5c6d6ec15c23c8cce030bf669c554f))
+* **projects:** new router system [新的路由系统] ([c7b6a3f](https://github.com/honghuangdc/soybean-admin/commit/c7b6a3fbecd1ba051833e4e47b75a06935f212c8))
+* **projects:** refactor icon system, unify icon usage [重构图标系统，统一图标用法] ([811f820](https://github.com/honghuangdc/soybean-admin/commit/811f820644053606e50624c2f184f9669f3eff7e))
+* **projects:** support constant route without login status[支持未登录状态下访问自定义的固定路由] ([a539112](https://github.com/honghuangdc/soybean-admin/commit/a539112a0f53183ee073d4eb9034ef48209fe30c))
+* **projects:** useNaiveTable函数：类型部分 ([02992dc](https://github.com/honghuangdc/soybean-admin/commit/02992dc02d105cbfcebbea397438c68db1fa8177))
+* **tabs:** 多页签增加关闭所有 ([8237adb](https://github.com/honghuangdc/soybean-admin/commit/8237adb9c0b187911df37d6d99fd84718bc3ea8f))
+
+
+### Bug Fixes
+
+* **deps:** decrease @types/node version to fix TS type error [降低@types/node版本修复TS的类型错误] ([149d22a](https://github.com/honghuangdc/soybean-admin/commit/149d22a4a491ca5fc6c52375046e9f1cb86ee76d))
+* **projects:** 修复多个后端服务时的本地代理 ([2aba58c](https://github.com/honghuangdc/soybean-admin/commit/2aba58c973e5d0ea975443a8b22c9d94283d4fb9))
+* **projects:** 修复构建后mockjs对xhr的影响问题 ([7757285](https://github.com/honghuangdc/soybean-admin/commit/77572855c3f7161697f42e6da36771c15707f0ab))
+* **projects:** 修复图标的TS类型 ([dbd6760](https://github.com/honghuangdc/soybean-admin/commit/dbd676095b42aaebc783d5c89478306a453195a5))
+* **projects:** 修复eslint规则 ([d7f5bf3](https://github.com/honghuangdc/soybean-admin/commit/d7f5bf3373e7884b8dc2c696a2c36e9cf27ad64b))
+* **projects:** 修复import.meta.env的TS类型 ([1994262](https://github.com/honghuangdc/soybean-admin/commit/19942625d58e673126db5249488555de71d18457))
+* **projects:** 修复tab不显示路由首页的问题 ([a792bb5](https://github.com/honghuangdc/soybean-admin/commit/a792bb5cb3c388ba3b93e17bab8f42d23cd5df4a))
+* **projects:** 修复TS类型问题 ([16dce9a](https://github.com/honghuangdc/soybean-admin/commit/16dce9a4ce4d3aa822d70f6e5199eb9c86e33ad9))
+* **projects:** add iconify json ([8a1ec93](https://github.com/honghuangdc/soybean-admin/commit/8a1ec938e7a26728919024e9f5b7b0af2b270aba))
+* **svg-icon:** 自定义图标在Dropdown组件下hover状态无法显示图标 ([0523f08](https://github.com/honghuangdc/soybean-admin/commit/0523f0838246041bfc09130e21369bd777f63682))
+* **utils:** 修复iconifyRender ([c37d0ac](https://github.com/honghuangdc/soybean-admin/commit/c37d0ac7887a3451b8558fc4aa6c05ed3b0ef74f))
+
+### [0.9.6](https://github.com/honghuangdc/soybean-admin/compare/v0.9.5...v0.9.6) (2022-06-15)
+
+
+### Features
+
+* **projects:** 本地svg动态渲染图标 ([c3c975e](https://github.com/honghuangdc/soybean-admin/commit/c3c975ee1142987b7ded0107bf91d0080d5651fe)), closes [#61](https://github.com/honghuangdc/soybean-admin/issues/61)
+* **projects:** 上下结构，菜单支持横向滚动 ([808051b](https://github.com/honghuangdc/soybean-admin/commit/808051b29dd682e1cbcf0e211774efb9cc12713a))
+* **projects:** 新增Antv G2图表示例 ([2d64a2e](https://github.com/honghuangdc/soybean-admin/commit/2d64a2e57c8d83c8d06f210eeefef8f31b3abeb9))
+* **projects:** 增加设置当前Tab页签名称功能 ([487213b](https://github.com/honghuangdc/soybean-admin/commit/487213b64853765e2bd186474e4607572624a33e))
+
+
+### Bug Fixes
+
+* **projects:** 设置tab标题导致meta属性丢失 ([efcfa57](https://github.com/honghuangdc/soybean-admin/commit/efcfa576d52a7eab644f3b4c65af153442887fab))
+* **projects:** 修复顶部菜单的位置失效问题 ([4ee0d94](https://github.com/honghuangdc/soybean-admin/commit/4ee0d94f1bde83c788fc0dcb084402359c04fb1b))
+
+### [0.9.5](https://github.com/honghuangdc/soybean-admin/compare/v0.9.4...v0.9.5) (2022-06-06)
+
+
+### Features
+
+* **projects:** 支持同一路由根据不同query和hash同时显示不同Tab ([4122685](https://github.com/honghuangdc/soybean-admin/commit/4122685803f8a0a485682d16cec74e27945adc47)), closes [#64](https://github.com/honghuangdc/soybean-admin/issues/64)
+* **projects:** 动态路由根路由重定向只需取决于后端返回的路由首页 ([434ab1c](https://github.com/honghuangdc/soybean-admin/commit/434ab1c560b260f8a19895405eb1d3c3313052d7))
+* **projects:** 补充更多的ECharts示例 ([c776249](https://github.com/honghuangdc/soybean-admin/commit/c7762490def77695bedf179ffc63e3e95d15e14d))
+* **projects:** 添加百度地图、升级依赖 ([39854a4](https://github.com/honghuangdc/soybean-admin/commit/39854a492b9cce71e0c7ed52af9985cb4abd6a97))
+* **projects:** 添加插件页面：图表 ([0a46ea0](https://github.com/honghuangdc/soybean-admin/commit/0a46ea08443f6b879434e925d440cf07e9494fcb))
+* **projects:** 添加自动跟随系统主题设置 ([ba07b69](https://github.com/honghuangdc/soybean-admin/commit/ba07b695dd9dc5d3f8ebf57d0f2e69d624994962))
+* **projects:** 添加antv g2图表示例 ([44b022a](https://github.com/honghuangdc/soybean-admin/commit/44b022aefd7dbb4c34886814cf04767450dec026))
+* **projects:** 引入echarts替换antvG2plot ([e7ad086](https://github.com/honghuangdc/soybean-admin/commit/e7ad08685e8ac52a8906fc94e656192275f9764c))
+* **route:** 路由meta新增activeMenu属性 ([ebd16a4](https://github.com/honghuangdc/soybean-admin/commit/ebd16a4d1ab1a95a27838a2d4f20cc1d1e7309ae))
+
+
+### Bug Fixes
+
+* **projects:** 修复@antv/g2生产环境报错 ([4558c24](https://github.com/honghuangdc/soybean-admin/commit/4558c24d1c1e1faa3326650fc16e6baf384509ac))
+* **projects:** 修复插件不存在的错误提示 ([7165282](https://github.com/honghuangdc/soybean-admin/commit/716528206e9f63e873607d0afd59d83f6984e3fe))
+* **projects:** 修复权限切换路由数据未更新的问题 ([60f9125](https://github.com/honghuangdc/soybean-admin/commit/60f912508b0e685957fb22ef0ed1f83272847263))
+* **projects:** 修复页面切换时导致的溢出滚动条 ([e023306](https://github.com/honghuangdc/soybean-admin/commit/e0233061d3bca236b4c4bb462ce00f7ca186b9fa))
+* **route:** 当为左侧混合菜单时activeMenu无效情况 ([3e4f9e2](https://github.com/honghuangdc/soybean-admin/commit/3e4f9e282442073447c5c24c33d65bc6130978ee))
+
+### [0.9.4](https://github.com/honghuangdc/soybean-admin/compare/v0.9.3...v0.9.4) (2022-04-28)
+
+
+### Features
+
+* **layouts:** 添加侧边栏/头部的反转模式来增加对比度 ([861c8b9](https://github.com/honghuangdc/soybean-admin/commit/861c8b9852e0097a1f6b79ac2c10d19add123bde))
+* **layouts:** 添加侧边栏/头部的反转模式来增加对比度 ([3c8dd77](https://github.com/honghuangdc/soybean-admin/commit/3c8dd772f89d2b656a42c4f7164e581acdb2b1a5))
+* **projects:** 插件方式按需引入naiveUI ([6bed9ea](https://github.com/honghuangdc/soybean-admin/commit/6bed9ead38af6d58f6cd9e520db848ae5cbfa4db))
+* **projects:** 登录页背景图片位置适配移动端 ([24010d0](https://github.com/honghuangdc/soybean-admin/commit/24010d05fb1ff51cb5e5d94ffe310206a9638711))
+* **projects:** 登录页面适配移动端 ([ec0776e](https://github.com/honghuangdc/soybean-admin/commit/ec0776e268cd3d1031e9ecd794abce271a675793))
+* **projects:** 权限完善及权限示例页面 ([807448a](https://github.com/honghuangdc/soybean-admin/commit/807448aec5b041535fe4fbac90eca1138b2f439c))
+* **projects:** 添加请求适配器的请求示例 ([bed4292](https://github.com/honghuangdc/soybean-admin/commit/bed4292ed380e77ac428ab057abc42eceb72af53))
+* **projects:** 新增静态路由 ([ca2dfa6](https://github.com/honghuangdc/soybean-admin/commit/ca2dfa6185aa7a4e58184bcfef2a1246a52f88fd))
+* **projects:** 引入unocss替换windicss ([c9d3e5a](https://github.com/honghuangdc/soybean-admin/commit/c9d3e5a3fdf59179dcfc122ab8369c492ea7832e))
+* **projects:** HTML lang 修改为 zh-cmn-Hans ([b9c5c34](https://github.com/honghuangdc/soybean-admin/commit/b9c5c349790b1e83a7acd1f2c53a86c9221944ff))
+* **projects:** HTML lang 修改为 zh-cmn-Hans ([dbeb595](https://github.com/honghuangdc/soybean-admin/commit/dbeb595c0b9fc11e7d166a7684af37cc971f1a11))
+* **projects:** mock添加权限过滤 ([7f4350a](https://github.com/honghuangdc/soybean-admin/commit/7f4350aeb673dab59192584177a897aacebe4b28))
+
+
+### Bug Fixes
+
+* **projects:** 去除从环境文件引入端口号导致的错误 ([2d6d179](https://github.com/honghuangdc/soybean-admin/commit/2d6d179d669ea71cca3fe97ac840e4856bff4051))
+* **projects:** 全局搜索弹窗弹出时动画闪屏问题 ([bb1bbf2](https://github.com/honghuangdc/soybean-admin/commit/bb1bbf272438f4ed440735118c6a9ec04c7d109f))
+* **projects:** 添加.npmrc修复无法获取自动引入的全局组件声明类型 ([e8488e4](https://github.com/honghuangdc/soybean-admin/commit/e8488e4d5237e5e03ec07ff07d03115389d5b1ef))
+* **projects:** 添加获取路由组件文件未找到时的错误提示 ([219f87f](https://github.com/honghuangdc/soybean-admin/commit/219f87f46758f328f26697f66d8583f49c0d41de))
+* **projects:** 修复获取vite环境变量的方式 ([46e1ae7](https://github.com/honghuangdc/soybean-admin/commit/46e1ae7825b2b204ce3cdd63b3c64f39bff096d0))
+* **projects:** 修复路由守卫的动态路由逻辑 ([e6c26fc](https://github.com/honghuangdc/soybean-admin/commit/e6c26fcb4ae085f9fd7d7eb9183ddba020d0b5da))
+* **projects:** 修复样式 ([e899914](https://github.com/honghuangdc/soybean-admin/commit/e8999144266761b3b701442975c3c00251240d53))
+* **projects:** 修复在新版vite下环境变量获取不到的问题 ([3fb13ca](https://github.com/honghuangdc/soybean-admin/commit/3fb13ca9e710549d2ddeb774fe08fabd27d5ae11))
+* **projects:** 修复vite alias ([cd7ca8f](https://github.com/honghuangdc/soybean-admin/commit/cd7ca8f4c77ac8c753b753ba698a9573d6c37bf9))
+
+### [0.9.3](https://github.com/honghuangdc/soybean-admin/compare/v0.9.2...v0.9.3) (2022-03-12)
+
+
+### Features
+
+* **components:** svgIcon,添加type,调整size方案 ([ce4e039](https://github.com/honghuangdc/soybean-admin/commit/ce4e039f48001b47a2933e807f5410a9573781b9))
+* **projects:** 引入soybean-admin-tab、去除vite-plugin-svg-icons，用unplugin-icons实现自定义svg的iconify写法、代码优化 ([a1a57a1](https://github.com/honghuangdc/soybean-admin/commit/a1a57a185ce5004888ca4e1611973665ee46980b))
+* **projects:** 新增子菜单图标和多页签图标 ([f5c56c3](https://github.com/honghuangdc/soybean-admin/commit/f5c56c355ce41157b20ed0a10272a28e6d8b2b49))
+* **projects:** 新增自定义svg图标动态渲染 ([f83c7b5](https://github.com/honghuangdc/soybean-admin/commit/f83c7b59b893ab6e210188e92c4177b3d01392ce))
+* **projects:** 添加naiveUI按需引入 ([a810ef8](https://github.com/honghuangdc/soybean-admin/commit/a810ef85b19e4b74f3ddb3c69d17c050e556ee90))
+* **projects:** 添加SvgIcon,配置vite plugin ([378d55a](https://github.com/honghuangdc/soybean-admin/commit/378d55ac0e11cdf115ce3cb8e281d60f7fc4ff7a))
+* **projects:** 添加全局组件自动引入注册 ([f5a043b](https://github.com/honghuangdc/soybean-admin/commit/f5a043b11a403927828ae922bdae411a4e5ae3c6))
+* **projects:** 添加网络代理 ([094dca9](https://github.com/honghuangdc/soybean-admin/commit/094dca961f608404352ac360f44496423d88dae8))
+* **projects:** 重构项目的TS类型架构，去除interface文件夹 ([8191490](https://github.com/honghuangdc/soybean-admin/commit/8191490f39fc011096edd77c3156eb4fe33d4e1c))
+
+
+### Bug Fixes
+
+* **components:** 修复组件LoadingEmptyWrapper适应暗黑模式 ([811b15e](https://github.com/honghuangdc/soybean-admin/commit/811b15e672c9d69e9c5789eb11ab2db7bd729f37))
+* **components:** 组件LoadingEmptyWrapper添加背景颜色动画过渡 ([7add5c2](https://github.com/honghuangdc/soybean-admin/commit/7add5c2edfcabadb77084179d464b849d880d5e6))
+* **projects:** 修复 BASE_URL 没有生效的问题 ([72d7dcf](https://github.com/honghuangdc/soybean-admin/commit/72d7dcfa5ee8dc6f3601f4d65c6aca9ad2cc5d5c))
+* **projects:** 修复页面切换动画开关不生效 ([9d4ed61](https://github.com/honghuangdc/soybean-admin/commit/9d4ed617fb80095e521d8063718283459711118f))
+* **projects:** 修复页面切换动画无变化 ([c4546bd](https://github.com/honghuangdc/soybean-admin/commit/c4546bdfa303f1e89c0d7ddd46b54e4ec5170096))
+
+### [0.9.2](https://github.com/honghuangdc/soybean-admin/compare/v0.9.1...v0.9.2) (2022-02-11)
+
+
+### Features
+
+* **projects:** 迁移全局搜索菜单功能 ([554d7fd](https://github.com/honghuangdc/soybean-admin/commit/554d7fd6114b9cf6df571c3cb02f4cb0cc6dcfd4))
+
+
+### Bug Fixes
+
+* **components:** 修复Tab在移动端设备无法点击的问题 ([2c9660f](https://github.com/honghuangdc/soybean-admin/commit/2c9660fdbf9a84e980db0aff5cd0aed0f75963ca))
+* **projects:** 修复分析页和工作台的布局问题 ([e93b94c](https://github.com/honghuangdc/soybean-admin/commit/e93b94cb2435a130bb1d94a703328af342cd24c9))
+* **projects:** 修复项目配置拷贝功能 ([a7a269d](https://github.com/honghuangdc/soybean-admin/commit/a7a269d6a61ccd25883e6bb69639d39e0260587d))
+* **projects:** vite配置修复 ([facc00e](https://github.com/honghuangdc/soybean-admin/commit/facc00e8b4998dc8bd338e3b63a652b4bfe2ed3e))
+
+### [0.9.1](https://github.com/honghuangdc/soybean-admin/compare/v0.1.3...v0.9.1) (2022-01-23)
+
+
+### Features
+
+* **projects:** 新版重构完成 ([68b4230](https://github.com/honghuangdc/soybean-admin/commit/68b42304d5964246775c7a82dcc1406c5db7a4e4))
+
+### [0.1.3](https://github.com/honghuangdc/soybean-admin/compare/v0.1.2...v0.1.3) (2022-01-23)
+
+
+### Bug Fixes
+
+* **projects:** 修复未登录时会调用获取用户路由的接口 ([21bab1f](https://github.com/honghuangdc/soybean-admin/commit/21bab1f7c30611fe59dc91c7a73050ccb49a4658))
+* **projects:** 修复路由守卫的动态路由逻辑 ([b61b0ce](https://github.com/honghuangdc/soybean-admin/commit/b61b0ce25fdcbaf29ca64cbcc467e12faa947625))
+
+### [0.1.2](https://github.com/honghuangdc/soybean-admin/compare/v0.1.1...v0.1.2) (2022-01-21)
+
+
+### Features
+
+* **projects:** 添加缓存主题色 ([3709297](https://github.com/honghuangdc/soybean-admin/commit/37092974d37b2e661d4cbf9d27c89b5e99119cd7))
+* **projects:** 添加页面缓存、记录在tab中的缓存页面的滚动条位置 ([1d63a83](https://github.com/honghuangdc/soybean-admin/commit/1d63a838226df4f48e7f2a15b5a05d4b496d3c69))
+
+### [0.1.1](https://github.com/honghuangdc/soybean-admin/compare/v0.0.5...v0.1.1) (2022-01-20)
+
+
+### Features
+
+* **projects:** theme store完成 ([bf020a8](https://github.com/honghuangdc/soybean-admin/commit/bf020a82580e6b1fbda1cc1e0bd6176770434884))
+* **projects:** 主题配置抽屉: 迁移其他功能 ([6d132c5](https://github.com/honghuangdc/soybean-admin/commit/6d132c59770e925cfc61217dcefa5b4d937604df))
+* **projects:** 主题配置抽屉：迁移暗黑模式、布局模式、添加颜色选择面板 ([912bfdf](https://github.com/honghuangdc/soybean-admin/commit/912bfdf4390ab624d3f8e343be88e8c1cf7ab5b6))
+* **projects:** 创建自定义布局组件SoybeanLayout ([0653fb1](https://github.com/honghuangdc/soybean-admin/commit/0653fb144fe9d49f24ef4fe6e4a58de6de342b78))
+* **projects:** 初始化加载效果：应用主题颜色 ([035fa11](https://github.com/honghuangdc/soybean-admin/commit/035fa114c9fd638cf467e6a73a8e4c558f503deb))
+* **projects:** 图标选择器增加扩展树形 ([041012b](https://github.com/honghuangdc/soybean-admin/commit/041012b3ee04d960c1e38895839225613f7af377))
+* **projects:** 增加Icon选择器组件 ([9472b51](https://github.com/honghuangdc/soybean-admin/commit/9472b51811f419e9139de81c73f2c71d170700c2))
+* **projects:** 增加全局搜索菜单功能 ([b9ce691](https://github.com/honghuangdc/soybean-admin/commit/b9ce69130b12712013228326f883e2d973e4e46a))
+* **projects:** 增加项目文档外链 ([1901a0b](https://github.com/honghuangdc/soybean-admin/commit/1901a0bfb7bfa516dfda552675397ddec96b8d4b))
+* **projects:** 多级路由的所有子路由转换成二级路由 ([85b55bb](https://github.com/honghuangdc/soybean-admin/commit/85b55bb37a0a06e2645b96ed81aefe463127121a))
+* **projects:** 引入mockjs ([9bc682d](https://github.com/honghuangdc/soybean-admin/commit/9bc682dae878c084e38a0e2c9a4a2de171023c48))
+* **projects:** 新增BasicLayout布局 ([006467a](https://github.com/honghuangdc/soybean-admin/commit/006467a0626f427da3f516d90c15bf1e1eef0e55))
+* **projects:** 添加cryptojs，对本地缓存数据进行加密 ([7a0648d](https://github.com/honghuangdc/soybean-admin/commit/7a0648dba55a98f61f4d81696307d86c82a1d34d))
+* **projects:** 添加NaiveProvider组件 ([c804b21](https://github.com/honghuangdc/soybean-admin/commit/c804b21ceb92133c6ea7cc64c87521cc164e40ce))
+* **projects:** 添加侧边菜单 ([e25afe2](https://github.com/honghuangdc/soybean-admin/commit/e25afe2fadfe86b9330ee02190a4e40b8321714c))
+* **projects:** 添加头部折叠按钮 ([a090d39](https://github.com/honghuangdc/soybean-admin/commit/a090d398fc071e246b92d0da80883cf5cbedba0e))
+* **projects:** 添加常用组件、composables函数 ([230a50a](https://github.com/honghuangdc/soybean-admin/commit/230a50a4cf4d2ebb62b19d6324234243cf6b2f0d))
+* **projects:** 添加抽屉 ([10e4d81](https://github.com/honghuangdc/soybean-admin/commit/10e4d81bd6a0b35d8cfb4f7a1e981f8ef6ab87cc))
+* **projects:** 添加表格页面示例 ([51c744c](https://github.com/honghuangdc/soybean-admin/commit/51c744c8e2c8ed9691e92e35b6a88582f22c30d8))
+* **projects:** 添加路由跳转浏览器新标签 ([987cef3](https://github.com/honghuangdc/soybean-admin/commit/987cef336338987f2e6f0d5aba8f6d4602b297ca))
+* **projects:** 登录页面开始迁移 ([f5a36a0](https://github.com/honghuangdc/soybean-admin/commit/f5a36a05cb626ec62115283f1d2c534b2a787bdd))
+* **projects:** 细节完善 ([cc290ac](https://github.com/honghuangdc/soybean-admin/commit/cc290accc29282e9ba655356e2695b6ca4b23605))
+* **projects:** 细节完善、迁移页面 ([ce531ce](https://github.com/honghuangdc/soybean-admin/commit/ce531ce5dda0b4a1024aa6bd3d68835b59760d57))
+* **projects:** 菜单搜索增加大小写转换 ([2907868](https://github.com/honghuangdc/soybean-admin/commit/29078689b0652cf4ae852c93d8601a157579adcc))
+* **projects:** 请求拦截器添加刷新token ([839b82b](https://github.com/honghuangdc/soybean-admin/commit/839b82ba8b052b02e24bcfe6da54160609a4fd4b))
+* **projects:** 路由页面跳转权限完成 ([0d2a562](https://github.com/honghuangdc/soybean-admin/commit/0d2a5629e89c73a32d6c79f04b51543e1513e006))
+* **projects:** 迁移多页签 ([28efbdb](https://github.com/honghuangdc/soybean-admin/commit/28efbdbc70733d22011a0eee084d35711429d188))
+* **projects:** 迁移登录完成 ([b93b80c](https://github.com/honghuangdc/soybean-admin/commit/b93b80cb4b35268dfb6a09517a2494af24748dac))
+* **projects:** 集成naiveUI主题配置，将css vars添加至html ([2c19684](https://github.com/honghuangdc/soybean-admin/commit/2c196841bd8527d7acccefe6a7545e0a49d532f7))
+* **projects:** 面包屑 ([09c7658](https://github.com/honghuangdc/soybean-admin/commit/09c7658c21c7dda461dbb528e85b638b5a7dfacd))
+
+
+### Bug Fixes
+
+* **deps:** 降低vite版本 ([c9c5ca9](https://github.com/honghuangdc/soybean-admin/commit/c9c5ca9989eddb084f2706155473123c5dcfc334))
+* **projects:** 修复redirect-not-found子路由 ([5bfb819](https://github.com/honghuangdc/soybean-admin/commit/5bfb8199b463d9ca6430577b5c493c0b78967aa9))
+* **projects:** 修复vertical-mix布局、重构初始化的loading ([579e074](https://github.com/honghuangdc/soybean-admin/commit/579e07400e1b9a52934ed808a37c8579a41e8e74))
+* **projects:** 修复网络请求错误空信息的提示 ([ff9216b](https://github.com/honghuangdc/soybean-admin/commit/ff9216b621aaef0a8203386fa1c3ca5477a2edea))
+* **projects:** 修复面包屑数据 ([28b5d22](https://github.com/honghuangdc/soybean-admin/commit/28b5d224010a28669ad3a1919fc49f6e2dc808cd))
+* **projects:** 去除Layout组件冗余代码 ([0e783bc](https://github.com/honghuangdc/soybean-admin/commit/0e783bcf7be0b3a083fe950adfb0afc72b510f97))
+* **projects:** 请求相关细节修复 ([2ad1ad3](https://github.com/honghuangdc/soybean-admin/commit/2ad1ad32b8410d84902a33d825032c282ca6df86))
--- a/16
+++ b/16
@@ -0,0 +1,16 @@
+ImageTag ?=v0.9.6
+SoybeanAdminImg ?= soybeanjs/soybean-admin:$(ImageTag)
+
+VERSION=$(shell git rev-parse --short HEAD)
+
+soybean-admin: soybean-admin-build soybean-admin-push
+
+soybean-admin-build:
+	docker build --build-arg version=$(VERSION) -t ${SoybeanAdminImg} -f docker/Dockerfile .
+
+soybean-admin-push:
+	docker push ${SoybeanAdminImg}
+
+# run tauri app:
+run:
+	pnpm tauri dev
--- a/README.md
+++ b/README.md
@@ -19,19 +19,6 @@
 - **权限路由**：提供前端静态和后端动态两种路由模式，基于 mock 的动态路由能快速实现后端动态路由
 - **请求函数**：基于 axios 的完善的请求函数封装，提供 Promise 和 hooks 两种请求函数，加入请求结果数据转换的适配器

-## SoybeanJS 工具库
-
- [@soybeanjs/cli](https://github.com/soybeanjs/cli): SoybeanJS 命令行工具，包含发布、git 和依赖等相关的实用命令
- [@soybeanjs/changelog](https://github.com/soybeanjs/changelog): 根据 git tags 和 commits 生成 changelog [示例](./CHANGELOG.md)
- [eslint-config-soybeanjs](https://github.com/soybeanjs/eslint-config): SoybeanJS 的 eslint 预设配置
- [@soybeanjs/materials](https://github.com/soybeanjs/materials): SoybeanJS 的物料仓库
- [@soybeanjs/vite-plugin-vue-page-route](https://github.com/soybeanjs/vite-plugin-vue-page-route): SoybeanAdmin 的路由插件
-
-## 基于 SoybeanAdmin 二次开发的项目
-
- [electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的 mock。
- [T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH 客户端。
-
 ## 在线预览

 - [Soybean Admin 预览地址](https://soybean.pro/)
@@ -42,12 +29,12 @@

 ## 代码仓库

-| 仓库           | github 地址                                                                   | gitee 镜像                                                                   | 预览                                                      |
-| -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | --------------------------------------------------------- |
-| soybean-admin  | [github](https://github.com/honghuangdc/soybean-admin)                        | [gitee](https://gitee.com/honghuangdc/soybean-admin)                         | [预览](https://soybean.pro/)                              |
-| tauri 版       | [tauri 版](https://github.com/honghuangdc/soybean-admin/tree/tauri)           | [tauri 版](https://gitee.com/honghuangdc/soybean-admin/tree/tauri)           |                                                           |
-| 精简版         | [精简版](https://github.com/honghuangdc/soybean-admin/tree/thin)              | [精简版](https://gitee.com/honghuangdc/soybean-admin/tree/thin)              |                                                           |
-| 集成 fast-crud | [集成 fast-crud](https://github.com/honghuangdc/soybean-admin/tree/fast-crud) | [集成 fast-crud](https://gitee.com/honghuangdc/soybean-admin/tree/fast-crud) | [预览](http://fast-crud.docmirror.cn/soybean/#/crud/demo) |
+- [github](https://github.com/honghuangdc/soybean-admin)
+- [tauri 版](https://github.com/honghuangdc/soybean-admin/tree/tauri)
+- [精简版](https://github.com/honghuangdc/soybean-admin/tree/thin)
+- [gitee](https://gitee.com/honghuangdc/soybean-admin)
+- [tauri 版](https://gitee.com/honghuangdc/soybean-admin/tree/tauri)
+- [精简版](https://gitee.com/honghuangdc/soybean-admin/tree/thin)

 ## 更新日志

@@ -67,15 +54,13 @@

 ![](https://s2.loli.net/2022/05/16/rSnNHLdpuvkKxWq.png)

-![](https://s2.loli.net/2023/06/07/O39EKNa675FZIuS.png)
-
 ![](https://s2.loli.net/2022/05/18/Mt6YZqmDxO8v4uR.png)

-![](https://s2.loli.net/2023/06/07/zhmWnFlPTfDpot8.png)
+![](https://s2.loli.net/2022/05/16/ktH5dcG3fuFOoKA.png)

 ![](https://s2.loli.net/2022/05/16/VPl6Ru1iCAhLcS4.png)

-![](https://s2.loli.net/2023/06/07/n6Dy1HXBvuPc9oT.png)
+![](https://s2.loli.net/2022/05/16/bRlAKuHW7ZVh9DT.png)

 ![](https://s2.loli.net/2022/06/07/rY8TyAftM5dxspv.png)

@@ -83,12 +68,6 @@

 ![](https://s2.loli.net/2022/06/07/rRSG6mEZpujOACT.png)

-<div align="center">
-	<img style="width:380px;margin-right:18px;border:1px solid #dedede;" src="https://s2.loli.net/2023/06/07/A5Nonc9vI6pB1lr.png" />
-	&nbsp;
-	<img style="width:380px;border:1px solid #dedede;" src="https://s2.loli.net/2023/06/07/VwBjqEhTke3OxXF.png" />
-</div>
-
 ## 安装使用

 - 环境配置
@@ -140,6 +119,10 @@ docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6

 项目已用 simple-git-hooks 代替了 husky, 旧版本用了 husky，执行 pnpm soy init-git-hooks 进行初始化配置

+## 基于 SoybeanAdmin 二次开发的项目
+[electron-mock-admin](https://github.com/lixin59/electron-mock-api): 一个 Mock Api 管理系统，帮助前端开发伙伴快速实现接口的mock。
+[T-Shell](https://github.com/TheBlindM/T-Shell): 是一个可配置命令提示的终端模拟器和 SSH客户端。
+
 ## 浏览器支持

 本地开发推荐使用`Chrome 90+` 浏览器
@@ -159,13 +142,17 @@ docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6
 `Soybean Admin` 是完全开源免费的项目，在帮助开发者更方便地进行中大型管理系统开发，同时也提供微信和 QQ 交流群，使用问题欢迎在群内提问。

  <div style="display:flex;">
+  	<!-- <div style="padding-right:24px;">
+  		<p>微信交流群</p>
+      <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybeanjs-wechat0503.jpeg" style="width:200px" />
+  	</div> -->
  	<div style="padding-right:24px;">
  		<p>QQ交流群</p>
-      <img src="https://i.loli.net/2021/11/24/1J6REWXiHomU2kM.jpg" style="width:200px" />
+      <img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/qq-soybean-admin.jpg" style="width:200px" />
  	</div>
 		<div>
 			<p>添加本人微信，欢迎来技术交流，业务咨询</p>
-			<img src="https://s2.loli.net/2023/06/07/sVyCUFBvzQ9f5b7.jpg" style="width:200px" />
+			<img src="https://soybeanjs-1300612522.cos.ap-guangzhou.myqcloud.com/uPic/soybeanjs.jpeg" style="width:180px" />
 		</div>
  </div>

@@ -177,4 +164,4 @@ docker run --name soybean -p 80:80 -d soybeanjs/soybean-admin:v0.9.6

 ## License

-本项目基于[MIT © Soybean-2021](./LICENSE) 协议，仅供参考学习，商用时请保留作者的版权信息，作者不对软件做担保和负责。
+[MIT © Soybean-2021](./LICENSE)
--- a/build/config/define.ts
+++ b/build/config/define.ts
@@ -0,0 +1,8 @@
+import dayjs from 'dayjs';
+
+/** 项目构建时间 */
+const PROJECT_BUILD_TIME = JSON.stringify(dayjs().format('YYYY-MM-DD HH:mm:ss'));
+
+export const viteDefine = {
+  PROJECT_BUILD_TIME
+};
--- a/build/config/index.ts
+++ b/build/config/index.ts
@@ -1 +1,2 @@
+export * from './define';
 export * from './proxy';
--- a/build/plugins/compress.ts
+++ b/build/plugins/compress.ts
@@ -0,0 +1,6 @@
+import ViteCompression from 'vite-plugin-compression';
+
+export default (viteEnv: ImportMetaEnv) => {
+  const { VITE_COMPRESS_TYPE = 'gzip' } = viteEnv;
+  return ViteCompression({ algorithm: VITE_COMPRESS_TYPE });
+};
--- a/build/plugins/index.ts
+++ b/build/plugins/index.ts
@@ -2,10 +2,13 @@ import type { PluginOption } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import vueJsx from '@vitejs/plugin-vue-jsx';
 import unocss from '@unocss/vite';
-import VueDevtools from 'vite-plugin-vue-devtools';
+import progress from 'vite-plugin-progress';
 import pageRoute from '@soybeanjs/vite-plugin-vue-page-route';
 import unplugin from './unplugin';
 import mock from './mock';
+import visualizer from './visualizer';
+import compress from './compress';
+import pwa from './pwa';

 /**
 * vite插件
@@ -19,14 +22,21 @@ export function setupVitePlugins(viteEnv: ImportMetaEnv): (PluginOption | Plugin
      }
    }),
    vueJsx(),
-    VueDevtools(),
    ...unplugin(viteEnv),
    unocss(),
-    mock(viteEnv)
+    mock(viteEnv),
+    progress(),
+    pageRoute()
  ];

-  if (viteEnv.VITE_SOYBEAN_ROUTE_PLUGIN === 'Y') {
-    plugins.push(pageRoute());
+  if (viteEnv.VITE_VISUALIZER === 'Y') {
+    plugins.push(visualizer as PluginOption);
+  }
+  if (viteEnv.VITE_COMPRESS === 'Y') {
+    plugins.push(compress(viteEnv));
+  }
+  if (viteEnv.VITE_PWA === 'Y' || viteEnv.VITE_VERCEL === 'Y') {
+    plugins.push(pwa());
  }

  return plugins;
--- a/build/plugins/pwa.ts
+++ b/build/plugins/pwa.ts
@@ -0,0 +1,31 @@
+import { VitePWA } from 'vite-plugin-pwa';
+
+export default function setupVitePwa() {
+  return VitePWA({
+    registerType: 'autoUpdate',
+    includeAssets: ['favicon.ico'],
+    manifest: {
+      name: 'SoybeanAdmin',
+      short_name: 'SoybeanAdmin',
+      theme_color: '#fff',
+      icons: [
+        {
+          src: '/logo.png',
+          sizes: '192x192',
+          type: 'image/png'
+        },
+        {
+          src: '/logo.png',
+          sizes: '512x512',
+          type: 'image/png'
+        },
+        {
+          src: '/logo.png',
+          sizes: '512x512',
+          type: 'image/png',
+          purpose: 'any maskable'
+        }
+      ]
+    }
+  });
+}
--- a/build/plugins/visualizer.ts
+++ b/build/plugins/visualizer.ts
@@ -0,0 +1,7 @@
+import { visualizer } from 'rollup-plugin-visualizer';
+
+export default visualizer({
+  gzipSize: true,
+  brotliSize: true,
+  open: true
+});
--- a/changelogithub.config.json
+++ b/changelogithub.config.json
@@ -0,0 +1,21 @@
+{
+  "types": {
+    "feat": { "title": "🚀 Features" },
+    "perf": { "title": "🔥 Performance" },
+    "fix": { "title": "🩹 Fixes" },
+    "refactor": { "title": "💅 Refactors" },
+    "docs": { "title": "📖 Documentation" },
+    "types": { "title": "🌊 Types" },
+    "chore": { "title": "🏡 Chore" },
+    "test": { "title": "🧪 Tests" },
+    "style": { "title": "🎨 Styles" },
+    "ci": { "title": "🤖 CI" }
+  },
+  "scopeMap": {},
+  "titles": {
+    "breakingChanges": "🚨 Breaking Changes"
+  },
+  "contributors": true,
+  "capitalize": true,
+  "group": true
+}
--- a/docker/.dockerignore
+++ b/docker/.dockerignore
@@ -0,0 +1,32 @@
+node_modules
+.DS_Store
+dist
+.npmrc
+.cache
+
+tests/server/static
+tests/server/static/upload
+
+.local
+# local env files
+.env.local
+.env.*.local
+.eslintcache
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+# .vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
+yarn.lock
+pnpm-lock.yaml
+/vite-profile.cpuprofile
--- a/docker/Dockerfile
+++ b/docker/Dockerfile
@@ -0,0 +1,24 @@
+FROM node:16.17.0 as builder
+
+ENV WORKDIR=/soybean-admin
+
+WORKDIR $WORKDIR
+
+COPY ./ $WORKDIR/
+
+ARG version
+ENV COMMITID=$version
+
+RUN npm i -g pnpm
+
+RUN pnpm install
+RUN pnpm build
+
+FROM nginx:alpine as prod
+
+RUN mkdir /soybean
+
+COPY --from=builder /soybean-admin/dist /soybean-admin
+COPY --from=builder /soybean-admin/docker/nginx.conf /etc/nginx/nginx.conf
+
+EXPOSE 80
--- a/docker/nginx.conf
+++ b/docker/nginx.conf
@@ -0,0 +1,54 @@
+user  nginx;
+worker_processes  1;
+error_log  /var/log/nginx/error.log warn;
+pid        /var/run/nginx.pid;
+
+events {
+  worker_connections  1024;
+}
+
+http {
+  include       /etc/nginx/mime.types;
+  default_type  application/octet-stream;
+  log_format  main  '$remote_addr - $remote_user [$time_local] "$request" '
+                    '$status $body_bytes_sent "$http_referer" '
+                    '"$http_user_agent" "$http_x_forwarded_for"';
+  access_log  /var/log/nginx/access.log  main;
+  sendfile        on;
+  keepalive_timeout  65;
+
+  server {
+    listen       80;
+    server_name  localhost;
+
+    location / {
+      # 不缓存html，防止程序更新后缓存继续生效
+      if ($request_filename ~* .*\.(?:htm|html)$) {
+        add_header Cache-Control "private, no-store, no-cache, must-revalidate, proxy-revalidate";
+        access_log on;
+      }
+      root   /soybean-admin/;
+      index  index.html index.htm;
+      try_files $uri $uri/ /index.html;
+    }
+
+    # location /soybean/soybean-webserver/v1 {
+    #     proxy_set_header Host $host;
+    #     proxy_set_header X-Real-IP $remote_addr;
+    #     proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
+    #     proxy_set_header REMOTE-HOST $remote_addr;
+
+    #     # 后台接口地址
+    #     proxy_pass http://192.168.1.99:30597/v1;
+    #     proxy_redirect default;
+    #     add_header Access-Control-Allow-Origin *;
+    #     add_header Access-Control-Allow-Headers X-Requested-With;
+    #     add_header Access-Control-Allow-Methods GET,POST,OPTIONS;
+    # }
+
+    error_page   500 502 503 504  /50x.html;
+    location = /50x.html {
+      root   /usr/share/nginx/html;
+    }
+  }
+}
--- a/mock/api/crud/base.ts
+++ b/mock/api/crud/base.ts
@@ -0,0 +1,295 @@
+export type ListItem = {
+  id?: number;
+  children?: ListItem[];
+  [key: string]: any;
+};
+export type BaseMockOptions = { name: string; copyTimes?: number; list: ListItem[]; idGenerator: number };
+type CopyListParams = { originList: ListItem[]; newList: ListItem[]; options: BaseMockOptions; parentId?: number };
+
+function copyList(props: CopyListParams) {
+  const { originList, newList, options, parentId } = props;
+  for (const item of originList) {
+    const newItem: ListItem = { ...item, parentId };
+    newItem.id = options.idGenerator;
+    options.idGenerator += 1;
+    newList.push(newItem);
+    if (item.children) {
+      newItem.children = [];
+      copyList({
+        originList: item.children,
+        newList: newItem.children,
+        options,
+        parentId: newItem.id
+      });
+    }
+  }
+}
+
+function delById(req: Service.MockOption, list: any[]) {
+  for (let i = 0; i < list.length; i += 1) {
+    const item = list[i];
+    if (item.id === parseInt(req.query.id, 10)) {
+      list.splice(i, 1);
+      break;
+    }
+    if (item.children && item.children.length > 0) {
+      delById(req, item.children);
+    }
+  }
+}
+
+function findById(id: number, list: ListItem[]): any {
+  for (const item of list) {
+    if (item.id === id) {
+      return item;
+    }
+    if (item.children && item.children.length > 0) {
+      const sub = findById(id, item.children);
+      if (sub !== null && sub !== undefined) {
+        return sub;
+      }
+    }
+  }
+  return null;
+}
+
+function matchWithArrayCondition(value: any[], item: ListItem, key: string) {
+  if (value.length === 0) {
+    return true;
+  }
+  let matched = false;
+  for (const i of value) {
+    if (item[key] instanceof Array) {
+      for (const j of item[key]) {
+        if (i === j) {
+          matched = true;
+          break;
+        }
+      }
+      if (matched) {
+        break;
+      }
+    } else if (item[key] === i || (typeof item[key] === 'string' && item[key].indexOf(`${i}`) >= 0)) {
+      matched = true;
+      break;
+    }
+    if (matched) {
+      break;
+    }
+  }
+  return matched;
+}
+
+function matchWithObjectCondition(value: any, item: ListItem, key: string) {
+  let matched = true;
+  for (const key2 of Object.keys(value)) {
+    const v = value[key2];
+    if (v && item[key] && v !== item[key][key2]) {
+      matched = false;
+      break;
+    }
+  }
+  return matched;
+}
+
+function searchFromList(list: ListItem[], query: any) {
+  const filter = (item: ListItem) => {
+    let allFound = true; // 是否所有条件都符合
+    for (const key of Object.keys(query)) {
+      const value = query[key];
+      if (value === undefined || value === null || value === '') {
+        // no nothing
+      } else if (value instanceof Array) {
+        // 如果条件中的value是数组的话，只要查到一个就行
+        const matched = matchWithArrayCondition(value, item, key);
+        if (!matched) {
+          allFound = false;
+        }
+      } else if (value instanceof Object) {
+        // 如果条件中的value是对象的话，需要每个key都匹配
+        const matched = matchWithObjectCondition(value, item, key);
+        if (!matched) {
+          allFound = false;
+        }
+      } else if (item[key] !== value) {
+        allFound = false;
+      }
+    }
+    return allFound;
+  };
+  return list.filter(filter);
+}
+
+export default {
+  buildMock(options: BaseMockOptions) {
+    const name = options.name;
+    if (!options.copyTimes) {
+      options.copyTimes = 29;
+    }
+    const list: any[] = [];
+    for (let i = 0; i < options.copyTimes; i += 1) {
+      copyList({
+        originList: options.list,
+        newList: list,
+        options
+      });
+    }
+    options.list = list;
+    return [
+      {
+        path: `/mock/${name}/page`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          let data = [...list];
+          let limit = 20;
+          let offset = 0;
+          for (const item of list) {
+            if (item.children && item.children.length === 0) {
+              item.hasChildren = false;
+              item.lazy = false;
+            }
+          }
+          let orderAsc: any;
+          let orderProp: any;
+          if (req && req.body) {
+            const { page, query } = req.body;
+            if (page.limit) {
+              limit = parseInt(page.limit, 10);
+            }
+            if (page.offset) {
+              offset = parseInt(page.offset, 10);
+            }
+            if (Object.keys(query).length > 0) {
+              data = searchFromList(list, query);
+            }
+          }
+
+          const start = offset;
+          let end = offset + limit;
+          if (data.length < end) {
+            end = data.length;
+          }
+
+          if (orderProp) {
+            // 排序
+            data.sort((a, b) => {
+              let ret = 0;
+              if (a[orderProp] > b[orderProp]) {
+                ret = 1;
+              } else if (a[orderProp] < b[orderProp]) {
+                ret = -1;
+              }
+              return orderAsc ? ret : -ret;
+            });
+          }
+
+          const records = data.slice(start, end);
+          const lastOffset = data.length - (data.length % limit);
+          if (offset > lastOffset) {
+            offset = lastOffset;
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: {
+              records,
+              total: data.length,
+              limit,
+              offset
+            }
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/get`,
+        method: 'get',
+        handle(req: Service.MockOption) {
+          let id = req.query.id;
+          id = parseInt(id, 10);
+          let current = null;
+          for (const item of list) {
+            if (item.id === id) {
+              current = item;
+              break;
+            }
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: current
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/add`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          req.body.id = options.idGenerator;
+          options.idGenerator += 1;
+          list.unshift(req.body);
+          return {
+            code: 200,
+            message: 'success',
+            data: req.body.id
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/update`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          const item = findById(req.body.id, list);
+          if (item) {
+            Object.assign(item, req.body);
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/delete`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          delById(req, list);
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/batchDelete`,
+        method: 'post',
+        handle(req: Service.MockOption) {
+          const ids = req.body.ids;
+          for (let i = list.length - 1; i >= 0; i -= 1) {
+            const item = list[i];
+            if (ids.indexOf(item.id) >= 0) {
+              list.splice(i, 1);
+            }
+          }
+          return {
+            code: 200,
+            message: 'success',
+            data: null
+          };
+        }
+      },
+      {
+        path: `/mock/${name}/all`,
+        method: 'post',
+        handle() {
+          return {
+            code: 200,
+            message: 'success',
+            data: list
+          };
+        }
+      }
+    ];
+  }
+};
--- a/mock/api/crud/index.ts
+++ b/mock/api/crud/index.ts
@@ -0,0 +1,5 @@
+import demo from './modules/demo';
+import headerGroup from './modules/header-group';
+
+const crudApis = [...demo, ...headerGroup];
+export default crudApis;
--- a/mock/api/crud/modules/demo.ts
+++ b/mock/api/crud/modules/demo.ts
@@ -0,0 +1,56 @@
+import type { MethodType, MockMethod } from 'vite-plugin-mock';
+import type { BaseMockOptions } from '../base';
+import mockBase from '../base';
+import MockOption = Service.MockOption;
+
+const options: BaseMockOptions = {
+  name: 'crud/demo',
+  idGenerator: 0,
+  list: [
+    {
+      select: '1',
+      text: '文本测试',
+      copyable: '文本可复制',
+      avatar: 'http://greper.handsfree.work/extends/avatar.jpg',
+      richtext: '富文本',
+      datetime: '2023-01-30 11:11:11'
+    },
+    {
+      select: '2'
+    },
+    {
+      select: '0'
+    }
+  ]
+};
+const mockedApis = mockBase.buildMock(options);
+
+const apis: MockMethod[] = [
+  {
+    url: `/mock/${options.name}/dict`,
+    method: 'get',
+    response: () => {
+      return {
+        code: 200,
+        message: '',
+        data: [
+          { value: '0', label: '关', color: 'warning' },
+          { value: '1', label: '开', color: 'success' },
+          { value: '2', label: '停' }
+        ]
+      };
+    }
+  }
+];
+
+for (const mockedApi of mockedApis) {
+  apis.push({
+    url: mockedApi.path,
+    method: mockedApi.method as MethodType,
+    response: (request: MockOption) => {
+      return mockedApi.handle(request);
+    }
+  });
+}
+
+export default apis;
--- a/mock/api/crud/modules/header-group.ts
+++ b/mock/api/crud/modules/header-group.ts
@@ -0,0 +1,46 @@
+import type { MethodType, MockMethod } from 'vite-plugin-mock';
+import type { BaseMockOptions } from '../base';
+import mockBase from '../base';
+import MockOption = Service.MockOption;
+
+const options: BaseMockOptions = {
+  name: 'crud/header-group',
+  idGenerator: 0,
+  list: [
+    {
+      name: '张三',
+      age: 18,
+      province: '广东省',
+      city: '深圳市',
+      county: '南山区',
+      street: '粤海街道'
+    },
+    {
+      name: '李四',
+      age: 26,
+      province: '浙江省',
+      city: '杭州市',
+      county: '西湖区',
+      street: '西湖街道'
+    },
+    {
+      name: '王五',
+      age: 24
+    }
+  ]
+};
+const mockedApis = mockBase.buildMock(options);
+
+const apis: MockMethod[] = [];
+
+for (const mockedApi of mockedApis) {
+  apis.push({
+    url: mockedApi.path,
+    method: mockedApi.method as MethodType,
+    response: (request: MockOption) => {
+      return mockedApi.handle(request);
+    }
+  });
+}
+
+export default apis;
--- a/mock/api/index.ts
+++ b/mock/api/index.ts
@@ -1,4 +1,6 @@
 import auth from './auth';
 import route from './route';
+import management from './management';
+import crud from './crud';

-export default [...auth, ...route];
+export default [...auth, ...route, ...management, ...crud];
--- a/mock/api/management.ts
+++ b/mock/api/management.ts
@@ -0,0 +1,33 @@
+import { mock } from 'mockjs';
+import type { MockMethod } from 'vite-plugin-mock';
+
+const apis: MockMethod[] = [
+  {
+    url: '/mock/getAllUserList',
+    method: 'post',
+    response: (): Service.MockServiceResult<ApiUserManagement.User[]> => {
+      const data = mock({
+        'list|1000': [
+          {
+            id: '@id',
+            userName: '@cname',
+            'age|18-56': 56,
+            'gender|1': ['0', '1', null],
+            phone:
+              /^[1](([3][0-9])|([4][01456789])|([5][012356789])|([6][2567])|([7][0-8])|([8][0-9])|([9][012356789]))[0-9]{8}$/,
+            'email|1': ['@email("qq.com")', null],
+            'userStatus|1': ['1', '2', '3', '4', null]
+          }
+        ]
+      });
+
+      return {
+        code: 200,
+        message: 'ok',
+        data: data.list
+      };
+    }
+  }
+];
+
+export default apis;
--- a/mock/api/route.ts
+++ b/mock/api/route.ts
@@ -8,7 +8,7 @@ const apis: MockMethod[] = [
    response: (options: Service.MockOption): Service.MockServiceResult => {
      const { userId = undefined } = options.body;

-      const routeHomeName: AuthRoute.LastDegreeRouteKey = 'multi-menu_first_second';
+      const routeHomeName: AuthRoute.LastDegreeRouteKey = 'dashboard_analysis';

      const role = userModel.find(item => item.userId === userId)?.userRole || 'user';

--- a/mock/model/route.ts
+++ b/mock/model/route.ts
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "soybean-admin",
-  "version": "0.10.3",
+  "version": "0.9.9",
  "description": "A fresh and elegant admin template, based on Vue3、Vite3、TypeScript、NaiveUI and UnoCSS. 一个基于Vue3、Vite3、TypeScript、NaiveUI and UnoCSS的清新优雅的中后台模版。",
  "author": {
    "name": "Soybean",
@@ -44,65 +44,98 @@
    "build:vercel": "cross-env VITE_HASH_ROUTE=Y VITE_VERCEL=Y vite build",
    "preview": "vite preview",
    "typecheck": "vue-tsc --noEmit --skipLibCheck",
-    "lint": "eslint . --fix",
-    "format": "soy prettier-write",
+    "lint": "eslint . --fix --ext .js,.jsx,.mjs,.json,.ts,.tsx,.vue",
+    "format": "soy prettier-format",
    "commit": "soy git-commit",
    "cleanup": "soy cleanup",
-    "update-pkg": "soy ncu",
+    "update-pkg": "soy update-pkg",
    "tsx": "tsx",
-    "logo": "tsx ./scripts/logo.ts"
+    "logo": "tsx ./scripts/logo.ts",
+    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
+    "release": "standard-version",
+    "prepare": "soy init-git-hooks"
  },
  "dependencies": {
-    "@better-scroll/core": "2.5.1",
-    "@soybeanjs/vue-materials": "0.2.0",
-    "@vueuse/core": "10.1.2",
+    "@ant-design/icons-vue": "^6.1.0",
+    "@fast-crud/fast-crud": "^1.13.6",
+    "@fast-crud/fast-extends": "^1.13.6",
+    "@fast-crud/ui-naive": "^1.13.6",
+    "@fast-crud/ui-interface": "^1.13.6",
+    "@antv/data-set": "^0.11.8",
+    "@antv/g2": "^4.2.10",
+    "@better-scroll/core": "^2.5.1",
+    "@soybeanjs/vue-materials": "^0.1.9",
+    "@vueuse/core": "^10.1.2",
    "axios": "1.4.0",
-    "clipboard": "2.0.11",
-    "colord": "2.9.3",
-    "crypto-js": "4.1.1",
-    "dayjs": "1.11.8",
-    "form-data": "4.0.0",
-    "lodash-es": "4.17.21",
+    "clipboard": "^2.0.11",
+    "colord": "^2.9.3",
+    "crypto-js": "^4.1.1",
+    "dayjs": "^1.11.7",
+    "echarts": "^5.4.2",
+    "form-data": "^4.0.0",
+    "lodash-es": "^4.17.21",
    "naive-ui": "2.34.4",
-    "pinia": "2.1.4",
-    "qs": "6.11.2",
-    "ua-parser-js": "1.0.35",
+    "pinia": "^2.1.3",
+    "print-js": "^1.6.0",
+    "qs": "^6.11.2",
+    "swiper": "^9.3.2",
+    "ua-parser-js": "^1.0.35",
+    "vditor": "^3.9.2",
    "vue": "3.3.4",
-    "vue-i18n": "9.2.2",
-    "vue-router": "4.2.2"
+    "vue-i18n": "^9.2.2",
+    "vue-router": "^4.2.1",
+    "vuedraggable": "^4.1.0",
+    "wangeditor": "^4.7.15",
+    "xgplayer": "^3.0.2"
  },
  "devDependencies": {
-    "@iconify/json": "2.2.78",
-    "@iconify/vue": "4.1.1",
-    "@soybeanjs/cli": "0.6.2",
-    "@soybeanjs/vite-plugin-vue-page-route": "0.0.5",
-    "@types/crypto-js": "4.1.1",
-    "@types/node": "20.3.1",
-    "@types/qs": "6.9.7",
-    "@types/ua-parser-js": "0.7.36",
-    "@unocss/preset-uno": "0.53.1",
-    "@unocss/transformer-directives": "0.53.1",
-    "@unocss/vite": "0.53.1",
-    "@vitejs/plugin-vue": "4.2.3",
-    "@vitejs/plugin-vue-jsx": "3.0.1",
-    "cross-env": "7.0.3",
-    "eslint": "8.42.0",
-    "eslint-config-soybeanjs": "0.4.9",
-    "mockjs": "1.1.0",
-    "sass": "1.63.4",
-    "tsx": "3.12.7",
-    "typescript": "5.1.3",
-    "unplugin-icons": "0.16.3",
-    "unplugin-vue-components": "0.25.1",
-    "vite": "4.3.9",
+    "@amap/amap-jsapi-types": "^0.0.13",
+    "@iconify/json": "^2.2.67",
+    "@iconify/vue": "^4.1.1",
+    "@soybeanjs/cli": "^0.1.9",
+    "@soybeanjs/vite-plugin-vue-page-route": "^0.0.5",
+    "@types/bmapgl": "^0.0.7",
+    "@types/crypto-js": "^4.1.1",
+    "@types/node": "20.2.1",
+    "@types/qs": "^6.9.7",
+    "@types/ua-parser-js": "^0.7.36",
+    "@unocss/preset-uno": "^0.52.0",
+    "@unocss/transformer-directives": "^0.52.0",
+    "@unocss/vite": "^0.52.0",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "conventional-changelog": "^3.1.25",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.41.0",
+    "eslint-config-soybeanjs": "^0.3.7",
+    "lint-staged": "13.2.2",
+    "mockjs": "^1.1.0",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "sass": "^1.62.1",
+    "simple-git-hooks": "^2.8.1",
+    "standard-version": "^9.5.0",
+    "tsx": "^3.12.7",
+    "typescript": "5.0.4",
+    "unplugin-icons": "^0.16.1",
+    "unplugin-vue-components": "0.24.1",
+    "vite": "^4.3.8",
+    "vite-plugin-compression": "^0.5.1",
    "vite-plugin-mock": "2.9.8",
-    "vite-plugin-svg-icons": "2.0.1",
-    "vite-plugin-vue-devtools": "0.2.0",
+    "vite-plugin-progress": "^0.0.7",
+    "vite-plugin-pwa": "^0.15.0",
+    "vite-plugin-svg-icons": "^2.0.1",
    "vue-tsc": "1.6.5"
  },
  "pnpm": {
    "patchedDependencies": {
      "mockjs@1.1.0": "patches/mockjs@1.1.0.patch"
    }
+  },
+  "simple-git-hooks": {
+    "commit-msg": "pnpm soy git-commit-verify",
+    "pre-commit": "pnpm typecheck && pnpm lint-staged"
+  },
+  "lint-staged": {
+    "*.{js,jsx,mjs,json,ts,tsx,vue}": "eslint . --fix"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/src/App.vue
+++ b/src/App.vue
@@ -7,20 +7,34 @@
    class="h-full"
  >
    <naive-provider>
-      <router-view />
+      <fs-ui-context>
+        <router-view />
+      </fs-ui-context>
    </naive-provider>
  </n-config-provider>
 </template>

 <script setup lang="ts">
+import { watch } from 'vue';
+import { useRoute } from 'vue-router';
 import { dateZhCN, zhCN } from 'naive-ui';
+import { useI18n } from 'vue-i18n';
 import { subscribeStore, useThemeStore } from '@/store';
 import { useGlobalEvents } from '@/composables';

 const theme = useThemeStore();
+const { locale, t } = useI18n();
+const route = useRoute();

 subscribeStore();
 useGlobalEvents();
+
+watch(
+  () => locale.value,
+  () => {
+    document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
+  }
+);
 </script>

 <style scoped></style>
--- a/src/components/custom/count-to.vue
+++ b/src/components/custom/count-to.vue
@@ -0,0 +1,116 @@
+<template>
+  <span>{{ value }}</span>
+</template>
+<script lang="ts" setup>
+import { computed, onMounted, ref, watch, watchEffect } from 'vue';
+import { TransitionPresets, useTransition } from '@vueuse/core';
+import { isNumber } from '@/utils';
+
+defineOptions({ name: 'CountTo' });
+
+type TansitionKey = keyof typeof TransitionPresets;
+
+interface Props {
+  /** 初始值 */
+  startValue?: number;
+  /** 结束值 */
+  endValue?: number;
+  /** 动画时长 */
+  duration?: number;
+  /** 自动动画 */
+  autoplay?: boolean;
+  /** 进制 */
+  decimals?: number;
+  /** 前缀 */
+  prefix?: string;
+  /** 后缀 */
+  suffix?: string;
+  /** 分割符号 */
+  separator?: string;
+  /** 小数点 */
+  decimal?: string;
+  /** 使用缓冲动画函数 */
+  useEasing?: boolean;
+  /** 缓冲动画函数类型 */
+  transition?: TansitionKey;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  startValue: 0,
+  endValue: 2021,
+  duration: 1500,
+  autoplay: true,
+  decimals: 0,
+  prefix: '',
+  suffix: '',
+  separator: ',',
+  decimal: '.',
+  useEasing: true,
+  transition: 'linear'
+});
+
+interface Emits {
+  (e: 'on-started'): void;
+  (e: 'on-finished'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const source = ref(props.startValue);
+let outputValue = useTransition(source);
+const value = computed(() => formatNumber(outputValue.value));
+const disabled = ref(false);
+
+function run() {
+  outputValue = useTransition(source, {
+    disabled,
+    duration: props.duration,
+    onStarted: () => emit('on-started'),
+    onFinished: () => emit('on-finished'),
+    ...(props.useEasing ? { transition: TransitionPresets[props.transition] } : {})
+  });
+}
+
+function start() {
+  run();
+  source.value = props.endValue;
+}
+
+function formatNumber(num: number | string) {
+  if (num !== 0 && !num) {
+    return '';
+  }
+  const { decimals, decimal, separator, suffix, prefix } = props;
+  let number = Number(num).toFixed(decimals);
+  number = String(number);
+
+  const x = number.split('.');
+  let x1 = x[0];
+  const x2 = x.length > 1 ? decimal + x[1] : '';
+  const rgx = /(\d+)(\d{3})/;
+  if (separator && !isNumber(separator)) {
+    while (rgx.test(x1)) {
+      x1 = x1.replace(rgx, `$1${separator}$2`);
+    }
+  }
+  return prefix + x1 + x2 + suffix;
+}
+
+watch([() => props.startValue, () => props.endValue], () => {
+  if (props.autoplay) {
+    start();
+  }
+});
+
+watchEffect(() => {
+  source.value = props.startValue;
+});
+
+onMounted(() => {
+  if (props.autoplay) {
+    start();
+  }
+});
+</script>
+
+<style scoped></style>
--- a/src/components/custom/github-link.vue
+++ b/src/components/custom/github-link.vue
@@ -0,0 +1,17 @@
+<template>
+  <web-site-link label="github地址：" :link="link" />
+</template>
+
+<script setup lang="ts">
+import WebSiteLink from './web-site-link.vue';
+
+defineOptions({ name: 'GithubLink' });
+
+interface Props {
+  /** github链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+<style scoped></style>
--- a/src/components/custom/icon-select.vue
+++ b/src/components/custom/icon-select.vue
@@ -0,0 +1,77 @@
+<template>
+  <n-popover placement="bottom-end" trigger="click">
+    <template #trigger>
+      <n-input v-model:value="modelValue" readonly placeholder="点击选择图标">
+        <template #suffix>
+          <svg-icon :icon="selectedIcon" class="text-30px p-5px" />
+        </template>
+      </n-input>
+    </template>
+    <template #header>
+      <n-input v-model:value="searchValue" placeholder="搜索图标"></n-input>
+    </template>
+    <div v-if="iconsList.length > 0" class="grid grid-cols-9 h-auto overflow-auto">
+      <span v-for="iconItem in iconsList" :key="iconItem" @click="handleChange(iconItem)">
+        <svg-icon
+          :icon="iconItem"
+          class="border-1px border-#d9d9d9 text-30px m-2px p-5px cursor-pointer"
+          :class="{ 'border-primary': modelValue === iconItem }"
+        />
+      </span>
+    </div>
+    <n-empty v-else class="w-306px" description="你什么也找不到" />
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+defineOptions({ name: 'IconSelect' });
+
+interface Props {
+  /** 选中的图标 */
+  value: string;
+  /** 图标列表 */
+  icons: string[];
+  /** 未选中图标 */
+  emptyIcon?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  emptyIcon: 'mdi:apps'
+});
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const modelValue = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+const selectedIcon = computed(() => modelValue.value || props.emptyIcon);
+
+const searchValue = ref('');
+
+const iconsList = computed(() => props.icons.filter(v => v.includes(searchValue.value)));
+
+function handleChange(iconItem: string) {
+  modelValue.value = iconItem;
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.n-input-wrapper) {
+  padding-right: 0;
+}
+:deep(.n-input__suffix) {
+  border: 1px solid #d9d9d9;
+}
+</style>
--- a/src/components/custom/image-verify.vue
+++ b/src/components/custom/image-verify.vue
@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <canvas ref="domRef" width="152" height="40" class="cursor-pointer" @click="getImgCode"></canvas>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { useImageVerify } from '@/hooks';
+
+defineOptions({ name: 'ImageVerify' });
+
+interface Props {
+  code?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ''
+});
+
+interface Emits {
+  (e: 'update:code', code: string): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { domRef, imgCode, setImgCode, getImgCode } = useImageVerify();
+
+watch(
+  () => props.code,
+  newValue => {
+    setImgCode(newValue);
+  }
+);
+watch(imgCode, newValue => {
+  emit('update:code', newValue);
+});
+
+defineExpose({ getImgCode });
+</script>
+
+<style scoped></style>
--- a/src/components/custom/web-site-link.vue
+++ b/src/components/custom/web-site-link.vue
@@ -0,0 +1,23 @@
+<template>
+  <p>
+    <span>{{ label }}</span>
+    <a class="text-blue-500" :href="link" target="_blank">
+      {{ link }}
+    </a>
+  </p>
+</template>
+
+<script setup lang="ts">
+defineOptions({ name: 'WebSiteLink' });
+
+interface Props {
+  /** 网址名称 */
+  label: string;
+  /** 网址链接 */
+  link: string;
+}
+
+defineProps<Props>();
+</script>
+
+<style scoped></style>
--- a/src/composables/echarts.ts
+++ b/src/composables/echarts.ts
@@ -0,0 +1,174 @@
+import { nextTick, effectScope, onScopeDispose, ref, watch } from 'vue';
+import type { ComputedRef, Ref } from 'vue';
+import * as echarts from 'echarts/core';
+import { BarChart, GaugeChart, LineChart, PictorialBarChart, PieChart, RadarChart, ScatterChart } from 'echarts/charts';
+import type {
+  BarSeriesOption,
+  GaugeSeriesOption,
+  LineSeriesOption,
+  PictorialBarSeriesOption,
+  PieSeriesOption,
+  RadarSeriesOption,
+  ScatterSeriesOption
+} from 'echarts/charts';
+import {
+  DatasetComponent,
+  GridComponent,
+  LegendComponent,
+  TitleComponent,
+  ToolboxComponent,
+  TooltipComponent,
+  TransformComponent
+} from 'echarts/components';
+import type {
+  DatasetComponentOption,
+  GridComponentOption,
+  LegendComponentOption,
+  TitleComponentOption,
+  ToolboxComponentOption,
+  TooltipComponentOption
+} from 'echarts/components';
+import { LabelLayout, UniversalTransition } from 'echarts/features';
+import { CanvasRenderer } from 'echarts/renderers';
+import { useElementSize } from '@vueuse/core';
+import { useThemeStore } from '@/store';
+
+export type ECOption = echarts.ComposeOption<
+  | BarSeriesOption
+  | LineSeriesOption
+  | PieSeriesOption
+  | ScatterSeriesOption
+  | PictorialBarSeriesOption
+  | RadarSeriesOption
+  | GaugeSeriesOption
+  | TitleComponentOption
+  | LegendComponentOption
+  | TooltipComponentOption
+  | GridComponentOption
+  | ToolboxComponentOption
+  | DatasetComponentOption
+>;
+
+echarts.use([
+  TitleComponent,
+  LegendComponent,
+  TooltipComponent,
+  GridComponent,
+  DatasetComponent,
+  TransformComponent,
+  ToolboxComponent,
+  BarChart,
+  LineChart,
+  PieChart,
+  ScatterChart,
+  PictorialBarChart,
+  RadarChart,
+  GaugeChart,
+  LabelLayout,
+  UniversalTransition,
+  CanvasRenderer
+]);
+
+/**
+ * Echarts hooks函数
+ * @param options - 图表配置
+ * @param renderFun - 图表渲染函数(例如：图表监听函数)
+ * @description 按需引入图表组件，没注册的组件需要先引入
+ */
+export function useEcharts(
+  options: Ref<ECOption> | ComputedRef<ECOption>,
+  renderFun?: (chartInstance: echarts.ECharts) => void
+) {
+  const theme = useThemeStore();
+
+  const domRef = ref<HTMLElement>();
+
+  const initialSize = { width: 0, height: 0 };
+  const { width, height } = useElementSize(domRef, initialSize);
+
+  let chart: echarts.ECharts | null = null;
+
+  function canRender() {
+    return initialSize.width > 0 && initialSize.height > 0;
+  }
+
+  function isRendered() {
+    return Boolean(domRef.value && chart);
+  }
+
+  function update(updateOptions: ECOption) {
+    if (isRendered()) {
+      chart?.clear();
+      chart!.setOption({ ...updateOptions, backgroundColor: 'transparent' });
+    }
+  }
+
+  async function render() {
+    if (domRef.value) {
+      const chartTheme = theme.darkMode ? 'dark' : 'light';
+      await nextTick();
+      chart = echarts.init(domRef.value, chartTheme);
+      if (renderFun) {
+        renderFun(chart);
+      }
+      update(options.value);
+    }
+  }
+
+  function resize() {
+    chart?.resize();
+  }
+
+  function destroy() {
+    chart?.dispose();
+  }
+
+  function updateTheme() {
+    destroy();
+    render();
+  }
+
+  const scope = effectScope();
+
+  scope.run(() => {
+    watch([width, height], ([newWidth, newHeight]) => {
+      initialSize.width = newWidth;
+      initialSize.height = newHeight;
+      if (newWidth === 0 && newHeight === 0) {
+        // 节点被删除 将chart置为空
+        chart = null;
+      }
+      if (canRender()) {
+        if (!isRendered()) {
+          render();
+        } else {
+          resize();
+        }
+      }
+    });
+
+    watch(
+      options,
+      newValue => {
+        update(newValue);
+      },
+      { deep: true }
+    );
+
+    watch(
+      () => theme.darkMode,
+      () => {
+        updateTheme();
+      }
+    );
+  });
+
+  onScopeDispose(() => {
+    destroy();
+    scope.stop();
+  });
+
+  return {
+    domRef
+  };
+}
--- a/src/composables/events.ts
+++ b/src/composables/events.ts
@@ -1,34 +1,14 @@
-import { effectScope, onScopeDispose, watch } from 'vue';
-import { useRoute } from 'vue-router';
 import { useEventListener } from '@vueuse/core';
-import { useI18n } from 'vue-i18n';
 import { useTabStore, useThemeStore } from '@/store';

 /** 全局事件 */
 export function useGlobalEvents() {
  const theme = useThemeStore();
  const tab = useTabStore();
-  const route = useRoute();
-  const { locale, t } = useI18n();
-  const scope = effectScope();

  /** 页面离开时缓存多页签数据 */
  useEventListener(window, 'beforeunload', () => {
    theme.cacheThemeSettings();
    tab.cacheTabRoutes();
  });
-
-  scope.run(() => {
-    // 国际化切换时更新浏览器标签文本
-    watch(
-      () => locale.value,
-      () => {
-        document.title = route.meta.i18nTitle ? t(route.meta.i18nTitle) : route.meta.title;
-      }
-    );
-  });
-
-  onScopeDispose(() => {
-    scope.stop();
-  });
 }
--- a/src/composables/icon.ts
+++ b/src/composables/icon.ts
@@ -1,5 +1,5 @@
 import { h } from 'vue';
-import SvgIcon from '@/components/custom/svg-icon.vue';
+import SvgIcon from '~/src/components/custom/svg-icon.vue';

 /**
 * 图标渲染
@@ -48,7 +48,7 @@ export const useIconRender = () => {
    }

    if (!icon && !localIcon) {
-      throw Error('没有传递图标名称，请确保给icon或localIcon传递有效值!');
+      window.console.warn('没有传递图标名称，请确保给icon或localIcon传递有效值!');
    }

    return () => h(SvgIcon, { icon, localIcon, style });
--- a/src/composables/index.ts
+++ b/src/composables/index.ts
@@ -2,4 +2,5 @@ export * from './system';
 export * from './router';
 export * from './layout';
 export * from './events';
+export * from './echarts';
 export * from './icon';
--- a/src/composables/layout.ts
+++ b/src/composables/layout.ts
@@ -1,4 +1,4 @@
-import { computed, watch } from 'vue';
+import { computed } from 'vue';
 import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 import { useAppStore, useThemeStore } from '@/store';

@@ -63,16 +63,6 @@ export function useBasicLayout() {
    return w;
  });

-  watch(
-    isMobile,
-    newValue => {
-      if (newValue) {
-        app.setSiderCollapse(true);
-      }
-    },
-    { immediate: true }
-  );
-
  return {
    mode,
    isMobile,
--- a/src/config/index.ts
+++ b/src/config/index.ts
@@ -1,2 +1,3 @@
 export * from './service';
 export * from './regexp';
+export * from './map-sdk';
--- a/src/config/map-sdk.ts
+++ b/src/config/map-sdk.ts
@@ -0,0 +1,8 @@
+/** 百度地图sdk地址 */
+export const BAIDU_MAP_SDK_URL = `https://api.map.baidu.com/getscript?v=3.0&ak=KSezYymXPth1DIGILRX3oYN9PxbOQQmU&services=&t=20210201100830&s=1`;
+
+/** 高德地图sdk地址 */
+export const GAODE_MAP_SDK_URL = 'https://webapi.amap.com/maps?v=2.0&key=e7bd02bd504062087e6563daf4d6721d';
+
+/** 腾讯地图sdk地址 */
+export const TENCENT_MAP_SDK_URL = 'https://map.qq.com/api/gljs?v=1.exp&key=A6DBZ-KXPLW-JKSRY-ONZF4-CPHY3-K6BL7';
--- a/src/constants/_shared.ts
+++ b/src/constants/_shared.ts
@@ -1,6 +0,0 @@
-export function transformObjectToOption<T extends object>(obj: T) {
-  return Object.entries(obj).map(([value, label]) => ({
-    value,
-    label
-  })) as Common.OptionWithKey<keyof T>[];
-}
--- a/src/constants/business.ts
+++ b/src/constants/business.ts
@@ -1,5 +1,3 @@
-import { transformObjectToOption } from './_shared';
-
 export const loginModuleLabels: Record<UnionKey.LoginModule, string> = {
  'pwd-login': '账密登录',
  'code-login': '手机验证码登录',
@@ -13,4 +11,35 @@ export const userRoleLabels: Record<Auth.RoleType, string> = {
  admin: '管理员',
  user: '普通用户'
 };
-export const userRoleOptions = transformObjectToOption(userRoleLabels);
+
+export const userRoleOptions: Common.OptionWithKey<Auth.RoleType>[] = [
+  { value: 'super', label: userRoleLabels.super },
+  { value: 'admin', label: userRoleLabels.admin },
+  { value: 'user', label: userRoleLabels.user }
+];
+
+/** 用户性别 */
+export const genderLabels: Record<UserManagement.GenderKey, string> = {
+  0: '女',
+  1: '男'
+};
+
+export const genderOptions: Common.OptionWithKey<UserManagement.GenderKey>[] = [
+  { value: '0', label: genderLabels['0'] },
+  { value: '1', label: genderLabels['1'] }
+];
+
+/** 用户状态 */
+export const userStatusLabels: Record<UserManagement.UserStatusKey, string> = {
+  1: '启用',
+  2: '禁用',
+  3: '冻结',
+  4: '软删除'
+};
+
+export const userStatusOptions: Common.OptionWithKey<UserManagement.UserStatusKey>[] = [
+  { value: '1', label: userStatusLabels['1'] },
+  { value: '2', label: userStatusLabels['2'] },
+  { value: '3', label: userStatusLabels['3'] },
+  { value: '4', label: userStatusLabels['4'] }
+];
--- a/src/constants/system.ts
+++ b/src/constants/system.ts
@@ -1,31 +1,81 @@
-import { transformObjectToOption } from './_shared';
-
 export const themeLayoutModeLabels: Record<UnionKey.ThemeLayoutMode, string> = {
  vertical: '左侧菜单模式',
  horizontal: '顶部菜单模式',
  'vertical-mix': '左侧菜单混合模式',
  'horizontal-mix': '顶部菜单混合模式'
 };
-export const themeLayoutModeOptions = transformObjectToOption(themeLayoutModeLabels);
+
+export const themeLayoutModeOptions: Common.OptionWithKey<UnionKey.ThemeLayoutMode>[] = [
+  {
+    value: 'vertical',
+    label: themeLayoutModeLabels.vertical
+  },
+  {
+    value: 'horizontal',
+    label: themeLayoutModeLabels.horizontal
+  },
+  {
+    value: 'vertical-mix',
+    label: themeLayoutModeLabels['vertical-mix']
+  },
+  {
+    value: 'horizontal-mix',
+    label: themeLayoutModeLabels['horizontal-mix']
+  }
+];

 export const themeScrollModeLabels: Record<UnionKey.ThemeScrollMode, string> = {
  wrapper: '外层滚动',
  content: '主体滚动'
 };
-export const themeScrollModeOptions = transformObjectToOption(themeScrollModeLabels);
+
+export const themeScrollModeOptions: Common.OptionWithKey<UnionKey.ThemeScrollMode>[] = [
+  {
+    value: 'wrapper',
+    label: themeScrollModeLabels.wrapper
+  },
+  {
+    value: 'content',
+    label: themeScrollModeLabels.content
+  }
+];

 export const themeTabModeLabels: Record<UnionKey.ThemeTabMode, string> = {
  chrome: '谷歌风格',
  button: '按钮风格'
 };
-export const themeTabModeOptions = transformObjectToOption(themeTabModeLabels);
+
+export const themeTabModeOptions: Common.OptionWithKey<UnionKey.ThemeTabMode>[] = [
+  {
+    value: 'chrome',
+    label: themeTabModeLabels.chrome
+  },
+  {
+    value: 'button',
+    label: themeTabModeLabels.button
+  }
+];

 export const themeHorizontalMenuPositionLabels: Record<UnionKey.ThemeHorizontalMenuPosition, string> = {
  'flex-start': '居左',
  center: '居中',
  'flex-end': '居右'
 };
-export const themeHorizontalMenuPositionOptions = transformObjectToOption(themeHorizontalMenuPositionLabels);
+
+export const themeHorizontalMenuPositionOptions: Common.OptionWithKey<UnionKey.ThemeHorizontalMenuPosition>[] = [
+  {
+    value: 'flex-start',
+    label: themeHorizontalMenuPositionLabels['flex-start']
+  },
+  {
+    value: 'center',
+    label: themeHorizontalMenuPositionLabels.center
+  },
+  {
+    value: 'flex-end',
+    label: themeHorizontalMenuPositionLabels['flex-end']
+  }
+];

 export const themeAnimateModeLabels: Record<UnionKey.ThemeAnimateMode, string> = {
  'zoom-fade': '渐变',
@@ -35,4 +85,30 @@ export const themeAnimateModeLabels: Record<UnionKey.ThemeAnimateMode, string> =
  'fade-bottom': '底部消退',
  'fade-scale': '缩放消退'
 };
-export const themeAnimateModeOptions = transformObjectToOption(themeAnimateModeLabels);
+
+export const themeAnimateModeOptions: Common.OptionWithKey<UnionKey.ThemeAnimateMode>[] = [
+  {
+    value: 'zoom-fade',
+    label: themeAnimateModeLabels['zoom-fade']
+  },
+  {
+    value: 'zoom-out',
+    label: themeAnimateModeLabels['zoom-out']
+  },
+  {
+    value: 'fade-slide',
+    label: themeAnimateModeLabels['fade-slide']
+  },
+  {
+    value: 'fade',
+    label: themeAnimateModeLabels.fade
+  },
+  {
+    value: 'fade-bottom',
+    label: themeAnimateModeLabels['fade-bottom']
+  },
+  {
+    value: 'fade-scale',
+    label: themeAnimateModeLabels['fade-scale']
+  }
+];
--- a/src/hooks/business/index.ts
+++ b/src/hooks/business/index.ts
@@ -1,4 +1,5 @@
 import useCountDown from './use-count-down';
 import useSmsCode from './use-sms-code';
+import useImageVerify from './use-image-verify';

-export { useCountDown, useSmsCode };
+export { useCountDown, useSmsCode, useImageVerify };
--- a/src/hooks/business/use-image-verify.ts
+++ b/src/hooks/business/use-image-verify.ts
@@ -0,0 +1,87 @@
+import { onMounted, ref } from 'vue';
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export default function useImageVerify(width = 152, height = 40) {
+  const domRef = ref<HTMLCanvasElement>();
+  const imgCode = ref('');
+
+  function setImgCode(code: string) {
+    imgCode.value = code;
+  }
+
+  function getImgCode() {
+    if (!domRef.value) return;
+    imgCode.value = draw(domRef.value, width, height);
+  }
+
+  onMounted(() => {
+    getImgCode();
+  });
+
+  return {
+    domRef,
+    imgCode,
+    setImgCode,
+    getImgCode
+  };
+}
+
+function randomNum(min: number, max: number) {
+  const num = Math.floor(Math.random() * (max - min) + min);
+  return num;
+}
+
+function randomColor(min: number, max: number) {
+  const r = randomNum(min, max);
+  const g = randomNum(min, max);
+  const b = randomNum(min, max);
+  return `rgb(${r},${g},${b})`;
+}
+
+function draw(dom: HTMLCanvasElement, width: number, height: number) {
+  let imgCode = '';
+
+  const NUMBER_STRING = '0123456789';
+
+  const ctx = dom.getContext('2d');
+  if (!ctx) return imgCode;
+
+  ctx.fillStyle = randomColor(180, 230);
+  ctx.fillRect(0, 0, width, height);
+
+  for (let i = 0; i < 4; i += 1) {
+    const text = NUMBER_STRING[randomNum(0, NUMBER_STRING.length)];
+    imgCode += text;
+    const fontSize = randomNum(18, 41);
+    const deg = randomNum(-30, 30);
+    ctx.font = `${fontSize}px Simhei`;
+    ctx.textBaseline = 'top';
+    ctx.fillStyle = randomColor(80, 150);
+    ctx.save();
+    ctx.translate(30 * i + 23, 15);
+    ctx.rotate((deg * Math.PI) / 180);
+    ctx.fillText(text, -15 + 5, -15);
+    ctx.restore();
+  }
+  for (let i = 0; i < 5; i += 1) {
+    ctx.beginPath();
+    ctx.moveTo(randomNum(0, width), randomNum(0, height));
+    ctx.lineTo(randomNum(0, width), randomNum(0, height));
+    ctx.strokeStyle = randomColor(180, 230);
+    ctx.closePath();
+    ctx.stroke();
+  }
+  for (let i = 0; i < 41; i += 1) {
+    ctx.beginPath();
+    ctx.arc(randomNum(0, width), randomNum(0, height), 1, 0, 2 * Math.PI);
+    ctx.closePath();
+    ctx.fillStyle = randomColor(150, 200);
+    ctx.fill();
+  }
+
+  return imgCode;
+}
--- a/src/hooks/business/use-table.ts
+++ b/src/hooks/business/use-table.ts
@@ -0,0 +1,151 @@
+import { ref, reactive } from 'vue';
+import type { Ref } from 'vue';
+import type { DataTableBaseColumn, DataTableSelectionColumn, DataTableExpandColumn, PaginationProps } from 'naive-ui';
+import type { TableColumnGroup, InternalRowData } from 'naive-ui/es/data-table/src/interface';
+import { useLoadingEmpty } from '../common';
+
+/**
+ * 表格分页参数
+ */
+type PaginationParams = Pick<PaginationProps, 'page' | 'pageSize'>;
+
+/**
+ * 表格请求接口的参数
+ */
+type ApiParams = Record<string, unknown> & PaginationParams;
+
+/**
+ * 表格请求接口的结果
+ * @description 这里用属性list来表示后端接口返回的表格数据
+ */
+type ApiData<TableData = Record<string, unknown>> = Record<string, unknown> & { list: TableData[] };
+
+/**
+ * 表格接口的请求函数
+ */
+type ApiFn<Params = ApiParams, TableData = Record<string, unknown>> = (
+  params: Params
+) => Promise<Service.RequestResult<ApiData<TableData>>>;
+
+/**
+ * 表格接口请求后转换后的数据
+ */
+type TransformedTableData<TableData = Record<string, unknown>> = {
+  data: TableData[];
+  pageNum: number;
+  pageSize: number;
+  total: number;
+};
+
+/**
+ * 表格的列
+ */
+type DataTableColumn<T = InternalRowData> =
+  | (Omit<TableColumnGroup<T>, 'key'> & { key: keyof T })
+  | (Omit<DataTableBaseColumn<T>, 'key'> & { key: keyof T })
+  | DataTableSelectionColumn<T>
+  | DataTableExpandColumn<T>;
+
+/**
+ * 表格数据转换器
+ * @description 将不同接口的表格数据转换成统一的类型
+ */
+type Transformer<TableData = Record<string, unknown>> = (
+  apiData: ApiData<TableData>
+) => TransformedTableData<TableData>;
+
+type TableParams<TableData = Record<string, unknown>, Params = ApiParams> = {
+  apiFn: ApiFn<Params, TableData>;
+  apiParams: Params;
+  transformer: Transformer<TableData>;
+  columns: DataTableColumn<TableData>[];
+  pagination?: PaginationProps;
+};
+
+export function useTable<TableData extends Record<string, unknown>, Params extends ApiParams>(
+  params: TableParams<TableData, Params>,
+  immediate = true
+) {
+  const { loading, startLoading, endLoading, empty, setEmpty } = useLoadingEmpty();
+  const data: Ref<TableData[]> = ref([]);
+
+  function updateData(update: TableData[]) {
+    data.value = update;
+  }
+
+  let dataSource: TableData[] = [];
+  function setDataSource(source: TableData[]) {
+    dataSource = source;
+  }
+
+  function resetData() {
+    data.value = dataSource;
+  }
+
+  const columns = ref(params.columns) as Ref<DataTableColumn<TableData>[]>;
+
+  const pagination = reactive({
+    ...getPagination(params.pagination),
+    onChange: (page: number) => {
+      pagination.page = page;
+    },
+    onUpdatePageSize: (pageSize: number) => {
+      pagination.pageSize = pageSize;
+      pagination.page = 1;
+    }
+  }) as PaginationProps;
+
+  function updatePagination(update: Partial<PaginationProps>) {
+    Object.assign(pagination, update);
+  }
+
+  async function getData() {
+    const apiParams: Params = { ...params.apiParams };
+    apiParams.page = apiParams.page || pagination.page;
+    apiParams.pageSize = apiParams.pageSize || pagination.pageSize;
+
+    startLoading();
+    const { data: apiData } = await params.apiFn(apiParams);
+
+    if (apiData) {
+      const transformedData = params.transformer(apiData);
+
+      updateData(transformedData.data);
+
+      setDataSource(transformedData.data);
+
+      setEmpty(transformedData.data.length === 0);
+
+      updatePagination({ page: transformedData.pageNum, pageSize: transformedData.pageSize });
+    }
+
+    endLoading();
+  }
+
+  if (immediate) {
+    getData();
+  }
+
+  return {
+    data,
+    columns,
+    loading,
+    empty,
+    pagination,
+    getData,
+    updateData,
+    resetData
+  };
+}
+
+function getPagination(pagination?: Partial<PaginationProps>) {
+  const defaultPagination: Partial<PaginationProps> = {
+    page: 1,
+    pageSize: 10,
+    showSizePicker: true,
+    pageSizes: [10, 15, 20, 25, 30]
+  };
+  Object.assign(defaultPagination, pagination);
+
+  return defaultPagination;
+}
--- a/src/layouts/basic-layout/index.vue
+++ b/src/layouts/basic-layout/index.vue
@@ -1,7 +1,6 @@
 <template>
  <admin-layout
    :mode="mode"
-    :is-mobile="isMobile"
    :scroll-mode="theme.scrollMode"
    :scroll-el-id="app.scrollElId"
    :full-content="app.contentFull"
@@ -17,7 +16,6 @@
    :footer-visible="theme.footer.visible"
    :fixed-footer="theme.footer.fixed"
    :right-footer="theme.footer.right"
-    @click-mobile-sider-mask="app.setSiderCollapse(true)"
  >
    <template #header>
      <global-header v-bind="headerProps" />
@@ -48,7 +46,7 @@ defineOptions({ name: 'BasicLayout' });
 const app = useAppStore();
 const theme = useThemeStore();

-const { mode, isMobile, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
+const { mode, headerProps, siderVisible, siderWidth, siderCollapsedWidth } = useBasicLayout();
 </script>

 <style lang="scss">
--- a/src/layouts/common/global-header/components/github-site.vue
+++ b/src/layouts/common/global-header/components/github-site.vue
@@ -0,0 +1,23 @@
+<template>
+  <hover-container
+    tooltip-content="github"
+    class="w-40px h-full"
+    :inverted="theme.header.inverted"
+    @click="handleClickLink"
+  >
+    <icon-mdi-github class="text-20px" />
+  </hover-container>
+</template>
+
+<script lang="ts" setup>
+import { useThemeStore } from '@/store';
+
+defineOptions({ name: 'GithubSite' });
+
+const theme = useThemeStore();
+function handleClickLink() {
+  window.open('https://github.com/honghuangdc/soybean-admin', '_blank');
+}
+</script>
+
+<style scoped></style>
--- a/src/layouts/common/global-header/components/global-breadcrumb.vue
+++ b/src/layouts/common/global-header/components/global-breadcrumb.vue
@@ -9,7 +9,7 @@
              v-if="theme.header.crumb.showIcon"
              class="inline-block align-text-bottom mr-4px text-16px"
            />
-            <span>{{ breadcrumb.label }}</span>
+            <span>{{ breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label }}</span>
          </span>
        </n-dropdown>
        <template v-else>
@@ -19,9 +19,9 @@
            class="inline-block align-text-bottom mr-4px text-16px"
            :class="{ 'text-#BBBBBB': theme.header.inverted }"
          />
-          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">
-            {{ breadcrumb.label }}
-          </span>
+          <span :class="{ 'text-#BBBBBB': theme.header.inverted }">{{
+            breadcrumb.i18nTitle ? t(breadcrumb.i18nTitle) : breadcrumb.label
+          }}</span>
        </template>
      </n-breadcrumb-item>
    </template>
@@ -45,13 +45,7 @@ const routeStore = useRouteStore();
 const { routerPush } = useRouterPush();

 const breadcrumbs = computed(() =>
-  getBreadcrumbByRouteKey(route.name as string, routeStore.menus as App.GlobalMenuOption[], routePath('root')).map(
-    item => ({
-      ...item,
-      label: item.i18nTitle ? t(item.i18nTitle) : item.label,
-      options: item.options?.map(oItem => ({ ...oItem, label: oItem.i18nTitle ? t(oItem.i18nTitle) : oItem.label }))
-    })
-  )
+  getBreadcrumbByRouteKey(route.name as string, routeStore.menus as App.GlobalMenuOption[], routePath('root'))
 );

 function dropdownSelect(key: string) {
--- a/src/layouts/common/global-header/components/index.ts
+++ b/src/layouts/common/global-header/components/index.ts
@@ -1,10 +1,23 @@
 import MenuCollapse from './menu-collapse.vue';
 import GlobalBreadcrumb from './global-breadcrumb.vue';
 import HeaderMenu from './header-menu.vue';
+import GithubSite from './github-site.vue';
 import FullScreen from './full-screen.vue';
 import ThemeMode from './theme-mode.vue';
 import UserAvatar from './user-avatar.vue';
+import SystemMessage from './system-message.vue';
 import SettingButton from './setting-button.vue';
 import ToggleLang from './toggle-lang.vue';

-export { MenuCollapse, GlobalBreadcrumb, HeaderMenu, FullScreen, ThemeMode, UserAvatar, SettingButton, ToggleLang };
+export {
+  MenuCollapse,
+  GlobalBreadcrumb,
+  HeaderMenu,
+  GithubSite,
+  FullScreen,
+  ThemeMode,
+  UserAvatar,
+  SystemMessage,
+  SettingButton,
+  ToggleLang
+};
--- a/src/layouts/common/global-header/components/message-list.vue
+++ b/src/layouts/common/global-header/components/message-list.vue
@@ -0,0 +1,57 @@
+<template>
+  <n-scrollbar class="max-h-360px">
+    <n-list>
+      <n-list-item
+        v-for="(item, index) in list"
+        :key="item.id"
+        class="hover:bg-#f6f6f6 dark:hover:bg-dark cursor-pointer"
+        @click="handleRead(index)"
+      >
+        <n-thing class="px-15px" :class="{ 'opacity-30': item.isRead }">
+          <template #avatar>
+            <n-avatar v-if="item.avatar" :src="item.avatar" />
+            <svg-icon v-else class="text-34px text-primary" :icon="item.icon" :local-icon="item.svgIcon" />
+          </template>
+          <template #header>
+            <n-ellipsis :line-clamp="1">
+              {{ item.title }}
+              <template #tooltip>
+                {{ item.title }}
+              </template>
+            </n-ellipsis>
+          </template>
+          <template v-if="item.tagTitle" #header-extra>
+            <n-tag v-bind="item.tagProps" size="small">{{ item.tagTitle }}</n-tag>
+          </template>
+          <template #description>
+            <n-ellipsis v-if="item.description" :line-clamp="2">
+              {{ item.description }}
+            </n-ellipsis>
+            <p>{{ item.date }}</p>
+          </template>
+        </n-thing>
+      </n-list-item>
+    </n-list>
+  </n-scrollbar>
+</template>
+<script lang="ts" setup>
+defineOptions({ name: 'MessageList' });
+
+interface Props {
+  list?: App.MessageList[];
+}
+
+withDefaults(defineProps<Props>(), {
+  list: () => []
+});
+
+interface Emits {
+  (e: 'read', val: number): void;
+}
+
+const emit = defineEmits<Emits>();
+
+function handleRead(index: number) {
+  emit('read', index);
+}
+</script>
--- a/src/layouts/common/global-header/components/system-message.vue
+++ b/src/layouts/common/global-header/components/system-message.vue
@@ -0,0 +1,217 @@
+<template>
+  <n-popover class="!p-0" trigger="click" placement="bottom">
+    <template #trigger>
+      <hover-container tooltip-content="消息通知" :inverted="theme.header.inverted" class="relative w-40px h-full">
+        <icon-clarity:notification-line class="text-18px" />
+        <n-badge
+          :value="count"
+          :max="99"
+          :class="[count < 10 ? '-right-2px' : '-right-10px']"
+          class="absolute top-10px"
+        />
+      </hover-container>
+    </template>
+    <n-tabs
+      v-model:value="currentTab"
+      :class="[isMobile ? 'w-276px' : 'w-360px']"
+      type="line"
+      justify-content="space-evenly"
+    >
+      <n-tab-pane v-for="(item, index) in tabData" :key="item.key" :name="index">
+        <template #tab>
+          <div class="flex-x-center items-center" :class="[isMobile ? 'w-92px' : 'w-120px']">
+            <span class="mr-5px">{{ item.name }}</span>
+            <n-badge
+              v-bind="item.badgeProps"
+              :value="item.list.filter(message => !message.isRead).length"
+              :max="99"
+              show-zero
+            />
+          </div>
+        </template>
+        <loading-empty-wrapper
+          class="h-360px"
+          :loading="loading"
+          :empty="item.list.length === 0"
+          placeholder-class="bg-$n-color transition-background-color duration-300 ease-in-out"
+        >
+          <message-list :list="item.list" @read="handleRead" />
+        </loading-empty-wrapper>
+      </n-tab-pane>
+    </n-tabs>
+    <div v-if="showAction" class="flex border-t border-$n-divider-color cursor-pointer">
+      <div class="flex-1 text-center py-10px" @click="handleClear">清空</div>
+      <div class="flex-1 text-center py-10px border-l border-$n-divider-color" @click="handleAllRead">全部已读</div>
+      <div class="flex-1 text-center py-10px border-l border-$n-divider-color" @click="handleLoadMore">查看更多</div>
+    </div>
+  </n-popover>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+import { useThemeStore } from '@/store';
+import { useBasicLayout } from '@/composables';
+import { useBoolean } from '@/hooks';
+import MessageList from './message-list.vue';
+
+defineOptions({ name: 'SystemMessage' });
+
+const theme = useThemeStore();
+const { isMobile } = useBasicLayout();
+const { bool: loading, setBool: setLoading } = useBoolean();
+
+const currentTab = ref(0);
+
+const tabData = ref<App.MessageTab[]>([
+  {
+    key: 1,
+    name: '通知',
+    badgeProps: { type: 'warning' },
+    list: [
+      { id: 1, icon: 'ri:message-3-line', title: '你收到了5条新消息', date: '2022-06-17' },
+      { id: 4, icon: 'ri:message-3-line', title: 'Soybean Admin 1.0.0 版本正在筹备中', date: '2022-06-17' },
+      { id: 2, icon: 'ri:message-3-line', title: 'Soybean Admin 0.9.6 版本发布了', date: '2022-06-16' },
+      { id: 3, icon: 'ri:message-3-line', title: 'Soybean Admin 0.9.5 版本发布了', date: '2022-06-07' },
+      {
+        id: 5,
+        icon: 'ri:message-3-line',
+        title: '测试超长标题测试超长标题测试超长标题测试超长标题测试超长标题测试超长标题测试超长标题测试超长标题',
+        date: '2022-06-17'
+      }
+    ]
+  },
+  {
+    key: 2,
+    name: '消息',
+    badgeProps: { type: 'error' },
+    list: [
+      {
+        id: 1,
+        title: '项目动态',
+        svgIcon: 'avatar',
+        description: 'Soybean 刚才把工作台页面随便写了一些，凑合能看了！',
+        date: '2021-11-07 22:45:32'
+      },
+      {
+        id: 2,
+        title: '项目动态',
+        svgIcon: 'avatar',
+        description: 'Soybean 正在忙于为soybean-admin写项目说明文档！',
+        date: '2021-11-03 20:33:31'
+      },
+      {
+        id: 3,
+        title: '项目动态',
+        svgIcon: 'avatar',
+        description: 'Soybean 准备为soybean-admin 1.0的发布做充分的准备工作！',
+        date: '2021-10-31 22:43:12'
+      },
+      {
+        id: 4,
+        title: '项目动态',
+        svgIcon: 'avatar',
+        description: '@yanbowe 向soybean-admin提交了一个bug，多标签栏不会自适应。',
+        date: '2021-10-27 10:24:54'
+      },
+      {
+        id: 5,
+        title: '项目动态',
+        svgIcon: 'avatar',
+        description: 'Soybean 在2021年5月28日创建了开源项目soybean-admin！',
+        date: '2021-05-28 22:22:22'
+      }
+    ]
+  },
+  {
+    key: 3,
+    name: '待办',
+    badgeProps: { type: 'info' },
+    list: [
+      {
+        id: 1,
+        icon: 'ri:calendar-todo-line',
+        title: '缓存主题配置',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      },
+      {
+        id: 2,
+        icon: 'ri:calendar-todo-line',
+        title: '添加锁屏组件、全局Iframe组件',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      },
+      {
+        id: 3,
+        icon: 'ri:calendar-todo-line',
+        title: '示例页面完善',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      },
+      {
+        id: 4,
+        icon: 'ri:calendar-todo-line',
+        title: '表单、表格示例',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      },
+      {
+        id: 5,
+        icon: 'ri:calendar-todo-line',
+        title: '性能优化(优化递归函数)',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      },
+      {
+        id: 6,
+        icon: 'ri:calendar-todo-line',
+        title: '精简版(新分支thin)',
+        description: '任务正在计划中',
+        date: '2022-06-17',
+        tagTitle: '未开始',
+        tagProps: { type: 'default' }
+      }
+    ]
+  }
+]);
+
+const count = computed(() => {
+  return tabData.value.reduce((acc, cur) => {
+    return acc + cur.list.filter(item => !item.isRead).length;
+  }, 0);
+});
+
+const showAction = computed(() => tabData.value[currentTab.value].list.length > 0);
+
+function handleRead(index: number) {
+  tabData.value[currentTab.value].list[index].isRead = true;
+}
+
+function handleAllRead() {
+  tabData.value[currentTab.value].list.forEach(item => Object.assign(item, { isRead: true }));
+}
+
+function handleClear() {
+  tabData.value[currentTab.value].list = [];
+}
+
+function handleLoadMore() {
+  const { list } = tabData.value[currentTab.value];
+  setLoading(true);
+  setTimeout(() => {
+    list.push(...tabData.value[currentTab.value].list);
+    setLoading(false);
+  }, 1000);
+}
+</script>
+<style scoped></style>
--- a/src/layouts/common/global-header/components/toggle-lang.vue
+++ b/src/layouts/common/global-header/components/toggle-lang.vue
@@ -1,5 +1,5 @@
 <template>
-  <hover-container class="w-40px h-full" :inverted="theme.header.inverted">
+  <hover-container class="w-40px h-full">
    <n-dropdown :options="options" trigger="hover" :value="language" @select="handleSelect">
      <icon-cil:language class="text-18px outline-transparent" />
    </n-dropdown>
@@ -9,10 +9,8 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useThemeStore } from '@/store';
 import { localStg } from '@/utils';

-const theme = useThemeStore();
 const { locale } = useI18n();

 const language = ref<I18nType.langType>(localStg.get('lang') || 'zh-CN');
@@ -24,10 +22,6 @@ const options = [
  {
    label: 'English',
    key: 'en'
-  },
-  {
-    label: 'ភាសាខ្មែរ',
-    key: 'km-KH'
  }
 ];
 const handleSelect = (key: string) => {
--- a/src/layouts/common/global-header/index.vue
+++ b/src/layouts/common/global-header/index.vue
@@ -7,9 +7,12 @@
    </div>
    <header-menu v-else />
    <div class="flex justify-end h-full">
+      <global-search />
+      <github-site />
      <full-screen />
      <theme-mode />
      <toggle-lang />
+      <system-message />
      <setting-button v-if="showButton" />
      <user-avatar />
    </div>
@@ -20,12 +23,15 @@
 import { useThemeStore } from '@/store';
 import { useBasicLayout } from '@/composables';
 import GlobalLogo from '../global-logo/index.vue';
+import GlobalSearch from '../global-search/index.vue';
 import {
  FullScreen,
+  GithubSite,
  GlobalBreadcrumb,
  HeaderMenu,
  MenuCollapse,
  SettingButton,
+  SystemMessage,
  ThemeMode,
  UserAvatar,
  ToggleLang
--- a/src/layouts/common/global-search/components/index.ts
+++ b/src/layouts/common/global-search/components/index.ts
@@ -0,0 +1,3 @@
+import SearchModal from './search-modal.vue';
+
+export { SearchModal };
--- a/src/layouts/common/global-search/components/search-footer.vue
+++ b/src/layouts/common/global-search/components/search-footer.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="px-24px h-44px flex-y-center">
+    <span class="mr-14px flex-y-center">
+      <icon-mdi-keyboard-return class="icon text-20px p-2px mr-6px" />
+      <span>确认</span>
+    </span>
+    <span class="mr-14px flex-y-center">
+      <icon-mdi-arrow-up-thin class="icon text-20px p-2px mr-5px" />
+      <icon-mdi-arrow-down-thin class="icon text-20px p-2px mr-6px" />
+      <span>切换</span>
+    </span>
+    <span class="flex-y-center">
+      <icon-mdi-keyboard-esc class="icon text-20px p-2px mr-6px" />
+      <span>关闭</span>
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineOptions({ name: 'SearchFooter' });
+</script>
+
+<style lang="scss" scoped>
+.icon {
+  box-shadow: inset 0 -2px #cdcde6, inset 0 0 1px 1px #fff, 0 1px 2px 1px #1e235a66;
+}
+</style>
--- a/src/layouts/common/global-search/components/search-modal.vue
+++ b/src/layouts/common/global-search/components/search-modal.vue
@@ -0,0 +1,147 @@
+<template>
+  <n-modal
+    v-model:show="show"
+    :segmented="{ footer: 'soft' }"
+    :closable="false"
+    preset="card"
+    footer-style="padding: 0; margin: 0"
+    class="fixed left-0 right-0"
+    :class="[isMobile ? 'wh-full top-0px rounded-0' : 'w-630px top-50px']"
+    @after-leave="handleClose"
+  >
+    <n-input-group>
+      <n-input ref="inputRef" v-model:value="keyword" clearable placeholder="请输入关键词搜索" @input="handleSearch">
+        <template #prefix>
+          <icon-uil-search class="text-15px text-#c2c2c2" />
+        </template>
+      </n-input>
+      <n-button v-if="isMobile" type="primary" ghost @click="handleClose">取消</n-button>
+    </n-input-group>
+
+    <div class="mt-20px">
+      <n-empty v-if="resultOptions.length === 0" description="暂无搜索结果" />
+      <search-result v-else v-model:value="activePath" :options="resultOptions" @enter="handleEnter" />
+    </div>
+    <template #footer>
+      <search-footer v-if="!isMobile" />
+    </template>
+  </n-modal>
+</template>
+
+<script lang="ts" setup>
+import { computed, nextTick, ref, shallowRef, watch } from 'vue';
+import { useRouter } from 'vue-router';
+import { onKeyStroke, useDebounceFn } from '@vueuse/core';
+import { useRouteStore } from '@/store';
+import { useBasicLayout } from '@/composables';
+import SearchResult from './search-result.vue';
+import SearchFooter from './search-footer.vue';
+
+defineOptions({ name: 'SearchModal' });
+
+interface Props {
+  /** 弹窗显隐 */
+  value: boolean;
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'update:value', val: boolean): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const { isMobile } = useBasicLayout();
+const router = useRouter();
+const routeStore = useRouteStore();
+
+const keyword = ref('');
+const activePath = ref('');
+const resultOptions = shallowRef<AuthRoute.Route[]>([]);
+const inputRef = ref<HTMLInputElement>();
+
+const handleSearch = useDebounceFn(search, 300);
+
+const show = computed({
+  get() {
+    return props.value;
+  },
+  set(val: boolean) {
+    emit('update:value', val);
+  }
+});
+
+watch(show, async val => {
+  if (val) {
+    /** 自动聚焦 */
+    await nextTick();
+    inputRef.value?.focus();
+  }
+});
+
+/** 查询 */
+function search() {
+  resultOptions.value = routeStore.searchMenus.filter(
+    menu => keyword.value && menu.meta?.title.toLocaleLowerCase().includes(keyword.value.toLocaleLowerCase().trim())
+  );
+  if (resultOptions.value?.length > 0) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = '';
+  }
+}
+
+function handleClose() {
+  show.value = false;
+  /** 延时处理防止用户看到某些操作 */
+  setTimeout(() => {
+    resultOptions.value = [];
+    keyword.value = '';
+  }, 200);
+}
+
+/** key up */
+function handleUp() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index === 0) {
+    activePath.value = resultOptions.value[length - 1].path;
+  } else {
+    activePath.value = resultOptions.value[index - 1].path;
+  }
+}
+
+/** key down */
+function handleDown() {
+  const { length } = resultOptions.value;
+  if (length === 0) return;
+  const index = resultOptions.value.findIndex(item => item.path === activePath.value);
+  if (index + 1 === length) {
+    activePath.value = resultOptions.value[0].path;
+  } else {
+    activePath.value = resultOptions.value[index + 1].path;
+  }
+}
+
+/** key enter */
+function handleEnter() {
+  const { length } = resultOptions.value;
+  if (length === 0 || activePath.value === '') return;
+  const routeItem = resultOptions.value.find(item => item.path === activePath.value);
+  if (routeItem?.meta?.href) {
+    window.open(activePath.value, '__blank');
+  } else {
+    router.push(activePath.value);
+    handleClose();
+  }
+}
+
+onKeyStroke('Escape', handleClose);
+onKeyStroke('Enter', handleEnter);
+onKeyStroke('ArrowUp', handleUp);
+onKeyStroke('ArrowDown', handleDown);
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/layouts/common/global-search/components/search-result.vue
+++ b/src/layouts/common/global-search/components/search-result.vue
@@ -0,0 +1,64 @@
+<template>
+  <n-scrollbar>
+    <div class="pb-12px">
+      <template v-for="item in options" :key="item.path">
+        <div
+          class="bg-#e5e7eb dark:bg-dark h-56px mt-8px px-14px rounded-4px cursor-pointer flex-y-center justify-between"
+          :style="{
+            background: item.path === active ? theme.themeColor : '',
+            color: item.path === active ? '#fff' : ''
+          }"
+          @click="handleTo"
+          @mouseenter="handleMouse(item)"
+        >
+          <svg-icon :icon="item.meta.icon" :local-icon="item.meta.localIcon" />
+          <span class="flex-1 ml-5px">{{ item.meta?.title }}</span>
+          <icon-ant-design-enter-outlined class="icon text-20px p-2px mr-3px" />
+        </div>
+      </template>
+    </div>
+  </n-scrollbar>
+</template>
+
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useThemeStore } from '@/store';
+
+defineOptions({ name: 'SearchResult' });
+
+interface Props {
+  value: string;
+  options: AuthRoute.Route[];
+}
+
+const props = defineProps<Props>();
+
+interface Emits {
+  (e: 'update:value', val: string): void;
+  (e: 'enter'): void;
+}
+
+const emit = defineEmits<Emits>();
+
+const theme = useThemeStore();
+
+const active = computed({
+  get() {
+    return props.value;
+  },
+  set(val: string) {
+    emit('update:value', val);
+  }
+});
+
+/** 鼠标移入 */
+async function handleMouse(item: AuthRoute.Route) {
+  active.value = item.path;
+}
+
+function handleTo() {
+  emit('enter');
+}
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/layouts/common/global-search/index.vue
+++ b/src/layouts/common/global-search/index.vue
@@ -0,0 +1,30 @@
+<template>
+  <div>
+    <hover-container
+      class="w-40px h-full"
+      tooltip-content="搜索"
+      :inverted="theme.header.inverted"
+      @click="handleSearch"
+    >
+      <icon-uil-search class="text-20px" />
+    </hover-container>
+    <search-modal v-model:value="show" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { useThemeStore } from '@/store';
+import { useBoolean } from '@/hooks';
+import { SearchModal } from './components';
+
+defineOptions({ name: 'GlobalSearch' });
+
+const { bool: show, toggle } = useBoolean();
+const theme = useThemeStore();
+
+function handleSearch() {
+  toggle();
+}
+</script>
+
+<style lang="scss" scoped></style>
--- a/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-detail.vue
+++ b/src/layouts/common/global-sider/components/vertical-mix-sider/components/mix-menu-detail.vue
@@ -6,7 +6,7 @@
    >
      <component :is="icon" :class="[isMini ? 'text-16px' : 'text-20px']" />
      <p
-        class="w-full text-center ellipsis-text text-12px transition-height duration-300 ease-in-out"
+        class="text-12px overflow-hidden transition-height duration-300 ease-in-out"
        :class="[isMini ? 'h-0 pt-0' : 'h-24px pt-4px']"
      >
        {{ label }}
--- a/src/layouts/common/global-sider/components/vertical-mix-sider/index.vue
+++ b/src/layouts/common/global-sider/components/vertical-mix-sider/index.vue
@@ -1,6 +1,6 @@
 <template>
  <dark-mode-container class="flex h-full" :inverted="theme.sider.inverted" @mouseleave="resetFirstDegreeMenus">
-    <div class="flex-1-hidden flex-col-stretch h-full">
+    <div class="flex-1 flex-col-stretch h-full">
      <global-logo :show-title="false" :style="{ height: theme.header.height + 'px' }" />
      <n-scrollbar class="flex-1-hidden">
        <mix-menu-detail
--- a/src/layouts/common/global-tab/components/tab-detail/index.vue
+++ b/src/layouts/common/global-tab/components/tab-detail/index.vue
@@ -1,6 +1,6 @@
 <template>
  <div ref="tabRef" class="flex h-full pr-18px" :class="[isChromeMode ? 'items-end' : 'items-center gap-12px']">
-    <PageTab
+    <AdminTab
      v-for="item in tab.tabs"
      :key="item.fullPath"
      :mode="theme.tab.mode"
@@ -20,7 +20,7 @@
        />
      </template>
      {{ item.meta.i18nTitle ? t(item.meta.i18nTitle) : item.meta.title }}
-    </PageTab>
+    </AdminTab>
  </div>
  <context-menu
    :visible="dropdown.visible"
@@ -34,7 +34,7 @@

 <script setup lang="ts">
 import { computed, nextTick, reactive, ref, watch } from 'vue';
-import { PageTab } from '@soybeanjs/vue-materials';
+import { AdminTab } from '@soybeanjs/vue-materials';
 import { useTabStore, useThemeStore } from '@/store';
 import { t } from '@/locales';
 import { ContextMenu } from './components';
--- a/src/locales/lang/en.ts
+++ b/src/locales/lang/en.ts
@@ -7,7 +7,7 @@ const locale: LocaleMessages<I18nType.Schema> = {
    },
    routes: {
      dashboard: {
-        _value: 'Dashboard',
+        dashboard: 'Dashboard',
        analysis: 'Analysis',
        workbench: 'Workbench'
      },
--- a/src/locales/lang/index.ts
+++ b/src/locales/lang/index.ts
@@ -1,11 +1,9 @@
 import zhCN from './zh-cn';
 import en from './en';
-import kmKH from './km-KH';

 const locales = {
  'zh-CN': zhCN,
-  en,
-  'km-KH': kmKH
+  en
 };

 export type LocaleKey = keyof typeof locales;
--- a/src/locales/lang/km-KH.ts
+++ b/src/locales/lang/km-KH.ts
@@ -1,85 +0,0 @@
-import type { LocaleMessages } from 'vue-i18n';
-
-const locale: LocaleMessages<I18nType.Schema> = {
-  message: {
-    system: {
-      title: 'ប្រព័ន្ធគ្រប់គ្រង'
-    },
-    routes: {
-      dashboard: {
-        _value: 'ផ្ទាំងទិន្នន័យ',
-        analysis: 'ផ្ទាំងវិភាគ',
-        workbench: 'ផ្ទាំងការងារ'
-      },
-      document: {
-        _value: 'ឯកសារ',
-        vue: 'ឯកសារ Vue',
-        vite: 'ឯកសារ Vite',
-        naive: 'ឯកសារ NaiveUI',
-        project: 'ឯកសារគម្រោង',
-        'project-link': 'ឯកសារគម្រោង(href)'
-      },
-      component: {
-        _value: 'សមាសភាគ',
-        button: 'ប៊ូតុង',
-        card: 'កាត',
-        table: 'តារាង'
-      },
-      plugin: {
-        _value: 'មុខងារជំនួយ',
-        charts: {
-          _value: 'តារាង Chart',
-          echarts: 'តារាង ECharts',
-          antv: 'AntV'
-        },
-        copy: 'ចម្លង',
-        editor: {
-          _value: 'កែប្រែ',
-          quill: 'Quill',
-          markdown: 'Markdown'
-        },
-        icon: 'អាយខន',
-        map: 'ផែនទី',
-        print: 'បោះពុម្ភ',
-        swiper: 'Swiper',
-        video: 'វីដេអូ'
-      },
-      'auth-demo': {
-        _value: 'ឌីមូ Auth',
-        permission: 'បិទ/បើកការអនុញ្ញាត',
-        super: 'Super Auth'
-      },
-      function: {
-        _value: 'មុខងារ',
-        tab: 'ថេបប្រព័ន្ធ'
-      },
-      exception: {
-        _value: 'ករណីពិេសស',
-        403: '403',
-        404: '404',
-        500: '500'
-      },
-      'multi-menu': {
-        _value: 'ម៉ឺនុយពហុដឺក្រេ',
-        first: {
-          _value: 'ដឺក្រេទី១',
-          second: 'ដែក្រេទី២',
-          'second-new': {
-            _value: 'ដឺក្រេទី២មានអនុក្រោម',
-            third: 'ដឺក្រេទី៣'
-          }
-        }
-      },
-      management: {
-        _value: 'ការគ្រប់គ្រងប្រព័ន្ធ',
-        auth: 'Auth',
-        role: 'សិទ្ធី',
-        route: 'ផ្លូវប្រព័ន្ធ',
-        user: 'អ្នកប្រើប្រាស់'
-      },
-      about: 'អំពីប្រព័ន្ធ'
-    }
-  }
-};
-
-export default locale;
--- a/src/locales/lang/zh-cn.ts
+++ b/src/locales/lang/zh-cn.ts
@@ -7,7 +7,7 @@ const locale: LocaleMessages<I18nType.Schema> = {
    },
    routes: {
      dashboard: {
-        _value: '仪表盘',
+        dashboard: '仪表盘',
        analysis: '分析页',
        workbench: '工作台'
      },
--- a/src/main.ts
+++ b/src/main.ts
@@ -3,7 +3,7 @@ import App from './App.vue';
 import AppLoading from './components/common/app-loading.vue';
 import { setupDirectives } from './directives';
 import { setupRouter } from './router';
-import { setupAssets } from './plugins';
+import { setupAssets, setupFastCrud } from './plugins';
 import { setupStore } from './store';
 import { setupI18n } from './locales';

@@ -29,7 +29,7 @@ async function setupApp() {

  setupI18n(app);

-  appLoading.unmount();
+  setupFastCrud(app);

  // mount app
  app.mount('#app');
--- a/src/plugins/assets.ts
+++ b/src/plugins/assets.ts
@@ -1,5 +1,8 @@
 import 'uno.css';
 import '@soybeanjs/vue-materials/dist/style.css';
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/pagination';
 import 'virtual:svg-icons-register';
 import '../styles/css/global.css';

--- a/src/plugins/fast-crud/common.scss
+++ b/src/plugins/fast-crud/common.scss
@@ -0,0 +1,11 @@
+html:root {
+	--baseColor: #fff;
+}
+/* 深色模式 */
+html.dark:root {
+	--baseColor: #000;
+}
+
+.fs-container {
+	background-color: var(--baseColor);
+}
--- a/src/plugins/fast-crud/index.tsx
+++ b/src/plugins/fast-crud/index.tsx
@@ -0,0 +1,171 @@
+import type { App } from 'vue';
+import type { FsSetupOptions, PageQuery } from '@fast-crud/fast-crud';
+// eslint-disable-next-line import/order
+import { FastCrud } from '@fast-crud/fast-crud';
+import '@fast-crud/fast-crud/dist/style.css';
+import './common.scss';
+
+import type { FsUploaderOptions } from '@fast-crud/fast-extends';
+import {
+  FsExtendsCopyable,
+  FsExtendsEditor,
+  FsExtendsJson,
+  FsExtendsTime,
+  FsExtendsUploader
+} from '@fast-crud/fast-extends';
+import '@fast-crud/fast-extends/dist/style.css';
+import UiNaive from '@fast-crud/ui-naive';
+import axios from 'axios';
+import type { VueI18n } from 'vue-i18n';
+import { mockRequest, request } from '@/service/request';
+import { setupNaive } from '@/plugins/fast-crud/naive';
+
+/**
+ *  fast-crud的安装方法
+ *  注意：在App.vue中，需要用fs-ui-context组件包裹RouterView，让fs-crud拥有message、notification、dialog的能力
+ * @param app
+ * @param options
+ */
+export type FsSetupOpts = {
+  i18n?: VueI18n;
+};
+function install(app: App, options: FsSetupOpts = {}) {
+  // 安装naive ui 常用组件
+  setupNaive(app);
+  app.use(UiNaive);
+  app.use(FastCrud, {
+    i18n: options.i18n,
+    async dictRequest(context: { url: string }) {
+      const url = context.url;
+      let res: Service.SuccessResult | Service.FailedResult;
+      if (url && url.startsWith('/mock')) {
+        // 如果是crud开头的dict请求视为mock
+        res = await mockRequest.get(url.replace('/mock', ''));
+      } else {
+        res = await request.get(url);
+      }
+      res = res || {};
+      return res.data || [];
+    },
+    /**
+     * useCrud时会被执行
+     */
+    commonOptions() {
+      return {
+        table: {
+          size: 'small',
+          pagination: false
+        },
+        search: {
+          options: {
+            size: 'medium'
+          }
+        },
+        rowHandle: {
+          buttons: {
+            view: { text: null, icon: 'EyeOutlined', size: 'small' },
+            edit: { text: null, icon: 'EditOutlined', size: 'small' },
+            remove: { type: 'error', text: null, icon: 'DeleteOutlined', size: 'small' }
+          },
+          dropdown: {
+            more: { size: 'small' }
+          }
+        },
+        request: {
+          // 查询参数转换
+          transformQuery: (query: PageQuery) => {
+            const { page, form, sort } = query;
+            const limit = page.pageSize;
+            const currentPage = page.currentPage ?? 1;
+            const offset = limit * (currentPage - 1);
+
+            return {
+              page: {
+                limit,
+                offset
+              },
+              query: form,
+              sort: sort || {}
+            };
+          },
+          // page请求结果转换
+          transformRes: originPageRes => {
+            const { res } = originPageRes;
+            const pageSize = res.limit;
+            let currentPage = res.offset / pageSize;
+            if (res.offset % pageSize === 0) {
+              currentPage += 1;
+            }
+            return { currentPage, pageSize, ...res };
+          }
+        },
+        form: {
+          display: 'flex', // 表单布局
+          labelWidth: '120px' // 表单label宽度
+        }
+      };
+      // 从 useCrud({permission}) 里获取permission参数，去设置各个按钮的权限
+      // const crudPermission = useCrudPermission(context);
+      // return crudPermission.merge(opts);
+    }
+  } as FsSetupOptions);
+
+  // fast-extends里面的扩展组件均为异步组件，只有在使用时才会被加载，并不会影响首页加载速度
+  // 安装editor
+  app.use(FsExtendsEditor, {
+    // 编辑器的公共配置
+    wangEditor: {}
+  });
+  app.use(FsExtendsJson);
+  app.use(FsExtendsCopyable);
+  // 安装uploader 公共参数
+  const uploaderOptions: FsUploaderOptions = {
+    defaultType: 'form',
+    form: {
+      action: 'http://www.docmirror.cn:7070/api/upload/form/upload',
+      name: 'file',
+      withCredentials: false,
+      uploadRequest: async props => {
+        const { action, file, onProgress } = props;
+        const data = new FormData();
+        data.append('file', file);
+        const res = await axios.post(action, data, {
+          headers: {
+            'Content-Type': 'multipart/form-data'
+          },
+          timeout: 60000,
+          onUploadProgress(progress) {
+            onProgress({ percent: Math.round((progress.loaded / progress.total!) * 100) });
+          }
+        });
+        // 上传完成后的结果，一般返回个url 或者key,具体看你的后台返回啥
+        return res.data.data;
+      },
+      async successHandle(ret: string) {
+        // 上传完成后的结果处理， 此处应转换格式为{url:xxx,key:xxx}
+        return {
+          url: `http://www.docmirror.cn:7070${ret}`,
+          key: ret.replace('/api/upload/form/download?key=', '')
+        };
+      }
+    }
+  };
+  app.use(FsExtendsUploader, uploaderOptions);
+
+  // 安装editor
+  app.use(FsExtendsEditor, {
+    // 编辑器的公共配置
+    wangEditor: {}
+  });
+  app.use(FsExtendsJson);
+  app.use(FsExtendsTime);
+  app.use(FsExtendsCopyable);
+}
+
+export default {
+  install
+};
+
+export function setupFastCrud(app: App<Element>, options: FsSetupOpts = {}) {
+  install(app, options);
+}
--- a/src/plugins/fast-crud/naive.ts
+++ b/src/plugins/fast-crud/naive.ts
@@ -0,0 +1,59 @@
+import type { App } from 'vue';
+import * as NaiveUI from 'naive-ui';
+
+const naive = NaiveUI.create({
+  components: [
+    NaiveUI.NInput,
+    NaiveUI.NButton,
+    NaiveUI.NForm,
+    NaiveUI.NFormItem,
+    NaiveUI.NCheckboxGroup,
+    NaiveUI.NCheckbox,
+    NaiveUI.NIcon,
+    NaiveUI.NDropdown,
+    NaiveUI.NTooltip,
+    NaiveUI.NTabs,
+    NaiveUI.NTabPane,
+    NaiveUI.NCard,
+    NaiveUI.NRow,
+    NaiveUI.NCol,
+    NaiveUI.NDrawer,
+    NaiveUI.NDrawerContent,
+    NaiveUI.NDivider,
+    NaiveUI.NSwitch,
+    NaiveUI.NBadge,
+    NaiveUI.NAlert,
+    NaiveUI.NTag,
+    NaiveUI.NProgress,
+    NaiveUI.NDatePicker,
+    NaiveUI.NGrid,
+    NaiveUI.NGridItem,
+    NaiveUI.NDataTable,
+    NaiveUI.NPagination,
+    NaiveUI.NSelect,
+    NaiveUI.NRadioGroup,
+    NaiveUI.NRadio,
+    NaiveUI.NInputGroup,
+    NaiveUI.NTable,
+    NaiveUI.NInputNumber,
+    NaiveUI.NLoadingBarProvider,
+    NaiveUI.NModal,
+    NaiveUI.NUpload,
+    NaiveUI.NTree,
+    NaiveUI.NSpin,
+    NaiveUI.NTimePicker,
+
+    // add by fs
+    NaiveUI.NCascader,
+    NaiveUI.NRadioButton,
+    NaiveUI.NTreeSelect,
+    NaiveUI.NImageGroup,
+    NaiveUI.NImage,
+    NaiveUI.NCollapse,
+    NaiveUI.NCollapseItem
+  ]
+});
+
+export function setupNaive(app: App<Element>) {
+  app.use(naive);
+}
--- a/src/plugins/index.ts
+++ b/src/plugins/index.ts
@@ -1,3 +1,5 @@
+import { setupFastCrud } from '@/plugins/fast-crud';
 import setupAssets from './assets';

+export { setupFastCrud };
 export { setupAssets };
--- a/src/router/modules/about.ts
+++ b/src/router/modules/about.ts
@@ -0,0 +1,17 @@
+const about1: AuthRoute.Route = {
+  name: 'about',
+  path: '/about',
+  component: 'self',
+  meta: {
+    title: '关于',
+    i18nTitle: 'message.routes.about',
+    requiresAuth: true,
+    keepAlive: true,
+    singleLayout: 'basic',
+    permissions: ['super', 'admin', 'user'],
+    icon: 'fluent:book-information-24-regular',
+    order: 10
+  }
+};
+
+export default about1;
--- a/src/router/modules/auth-demo.ts
+++ b/src/router/modules/auth-demo.ts
@@ -0,0 +1,38 @@
+const authDemo: AuthRoute.Route = {
+  name: 'auth-demo',
+  path: '/auth-demo',
+  component: 'basic',
+  children: [
+    {
+      name: 'auth-demo_permission',
+      path: '/auth-demo/permission',
+      component: 'self',
+      meta: {
+        title: '权限切换',
+        i18nTitle: 'message.routes.auth-demo.permission',
+        requiresAuth: true,
+        icon: 'ic:round-construction'
+      }
+    },
+    {
+      name: 'auth-demo_super',
+      path: '/auth-demo/super',
+      component: 'self',
+      meta: {
+        title: '超级管理员可见',
+        i18nTitle: 'message.routes.auth-demo.super',
+        requiresAuth: true,
+        permissions: ['super'],
+        icon: 'ic:round-supervisor-account'
+      }
+    }
+  ],
+  meta: {
+    title: '权限示例',
+    i18nTitle: 'message.routes.auth-demo._value',
+    icon: 'ic:baseline-security',
+    order: 5
+  }
+};
+
+export default authDemo;
--- a/src/router/modules/component.ts
+++ b/src/router/modules/component.ts
@@ -0,0 +1,48 @@
+const component: AuthRoute.Route = {
+  name: 'component',
+  path: '/component',
+  component: 'basic',
+  children: [
+    {
+      name: 'component_button',
+      path: '/component/button',
+      component: 'self',
+      meta: {
+        title: '按钮',
+        i18nTitle: 'message.routes.component.button',
+        requiresAuth: true,
+        icon: 'mdi:button-cursor'
+      }
+    },
+    {
+      name: 'component_card',
+      path: '/component/card',
+      component: 'self',
+      meta: {
+        title: '卡片',
+        i18nTitle: 'message.routes.component.card',
+        requiresAuth: true,
+        icon: 'mdi:card-outline'
+      }
+    },
+    {
+      name: 'component_table',
+      path: '/component/table',
+      component: 'self',
+      meta: {
+        title: '表格',
+        i18nTitle: 'message.routes.component.table',
+        requiresAuth: true,
+        icon: 'mdi:table-large'
+      }
+    }
+  ],
+  meta: {
+    title: '组件示例',
+    i18nTitle: 'message.routes.component._value',
+    icon: 'cib:app-store',
+    order: 3
+  }
+};
+
+export default component;
--- a/src/router/modules/crud.ts
+++ b/src/router/modules/crud.ts
@@ -0,0 +1,45 @@
+const component: any = {
+  name: 'crud',
+  path: '/crud',
+  component: 'basic',
+  meta: {
+    title: 'CRUD示例',
+    requiresAuth: true,
+    icon: 'mdi:table-large',
+    order: 4
+  },
+  children: [
+    {
+      name: 'crud_demo',
+      path: '/crud/demo',
+      component: 'self',
+      meta: {
+        title: '基本示例',
+        requiresAuth: true,
+        icon: 'mdi:button-cursor'
+      }
+    },
+    {
+      name: 'crud_header_group',
+      path: '/crud/header_group',
+      component: 'self',
+      meta: {
+        title: '多级表头',
+        requiresAuth: true,
+        icon: 'mdi:button-cursor'
+      }
+    },
+    {
+      name: 'crud_doc',
+      path: '/crud/doc',
+      component: 'self',
+      meta: {
+        title: 'FastCrud文档',
+        requiresAuth: true,
+        icon: 'logos:vue'
+      }
+    }
+  ]
+};
+
+export default component;
--- a/src/router/modules/dashboard.ts
+++ b/src/router/modules/dashboard.ts
@@ -0,0 +1,37 @@
+const dashboard: AuthRoute.Route = {
+  name: 'dashboard',
+  path: '/dashboard',
+  component: 'basic',
+  children: [
+    {
+      name: 'dashboard_analysis',
+      path: '/dashboard/analysis',
+      component: 'self',
+      meta: {
+        title: '分析页',
+        requiresAuth: true,
+        icon: 'icon-park-outline:analysis',
+        i18nTitle: 'message.routes.dashboard.analysis'
+      }
+    },
+    {
+      name: 'dashboard_workbench',
+      path: '/dashboard/workbench',
+      component: 'self',
+      meta: {
+        title: '工作台',
+        requiresAuth: true,
+        icon: 'icon-park-outline:workbench',
+        i18nTitle: 'message.routes.dashboard.workbench'
+      }
+    }
+  ],
+  meta: {
+    title: '仪表盘',
+    icon: 'mdi:monitor-dashboard',
+    order: 1,
+    i18nTitle: 'message.routes.dashboard.dashboard'
+  }
+};
+
+export default dashboard;
--- a/src/router/modules/document.ts
+++ b/src/router/modules/document.ts
@@ -0,0 +1,70 @@
+const document: AuthRoute.Route = {
+  name: 'document',
+  path: '/document',
+  component: 'basic',
+  children: [
+    {
+      name: 'document_vue',
+      path: '/document/vue',
+      component: 'self',
+      meta: {
+        title: 'vue文档',
+        i18nTitle: 'message.routes.document.vue',
+        requiresAuth: true,
+        icon: 'logos:vue'
+      }
+    },
+    {
+      name: 'document_vite',
+      path: '/document/vite',
+      component: 'self',
+      meta: {
+        title: 'vite文档',
+        i18nTitle: 'message.routes.document.vite',
+        requiresAuth: true,
+        icon: 'logos:vitejs'
+      }
+    },
+    {
+      name: 'document_naive',
+      path: '/document/naive',
+      component: 'self',
+      meta: {
+        title: 'naive文档',
+        i18nTitle: 'message.routes.document.naive',
+        requiresAuth: true,
+        icon: 'logos:naiveui'
+      }
+    },
+    {
+      name: 'document_project',
+      path: '/document/project',
+      component: 'self',
+      meta: {
+        title: '项目文档',
+        i18nTitle: 'message.routes.document.project',
+        requiresAuth: true,
+        localIcon: 'logo'
+      }
+    },
+    {
+      name: 'document_project-link',
+      path: '/document/project-link',
+      meta: {
+        title: '项目文档(外链)',
+        i18nTitle: 'message.routes.document.project-link',
+        requiresAuth: true,
+        localIcon: 'logo',
+        href: 'https://docs.soybean.pro/'
+      }
+    }
+  ],
+  meta: {
+    title: '文档',
+    i18nTitle: 'message.routes.document._value',
+    icon: 'mdi:file-document-multiple-outline',
+    order: 2
+  }
+};
+
+export default document;
--- a/src/router/modules/exception.ts
+++ b/src/router/modules/exception.ts
@@ -0,0 +1,48 @@
+const exception: AuthRoute.Route = {
+  name: 'exception',
+  path: '/exception',
+  component: 'basic',
+  children: [
+    {
+      name: 'exception_403',
+      path: '/exception/403',
+      component: 'self',
+      meta: {
+        title: '异常页403',
+        i18nTitle: 'message.routes.exception.403',
+        requiresAuth: true,
+        icon: 'ic:baseline-block'
+      }
+    },
+    {
+      name: 'exception_404',
+      path: '/exception/404',
+      component: 'self',
+      meta: {
+        title: '异常页404',
+        i18nTitle: 'message.routes.exception.404',
+        requiresAuth: true,
+        icon: 'ic:baseline-web-asset-off'
+      }
+    },
+    {
+      name: 'exception_500',
+      path: '/exception/500',
+      component: 'self',
+      meta: {
+        title: '异常页500',
+        i18nTitle: 'message.routes.exception.500',
+        requiresAuth: true,
+        icon: 'ic:baseline-wifi-off'
+      }
+    }
+  ],
+  meta: {
+    i18nTitle: 'message.routes.exception._value',
+    title: '异常页',
+    icon: 'ant-design:exception-outlined',
+    order: 7
+  }
+};
+
+export default exception;
--- a/src/router/modules/function.ts
+++ b/src/router/modules/function.ts
@@ -0,0 +1,51 @@
+const functionRoute: AuthRoute.Route = {
+  name: 'function',
+  path: '/function',
+  component: 'basic',
+  children: [
+    {
+      name: 'function_tab',
+      path: '/function/tab',
+      component: 'self',
+      meta: {
+        title: 'Tab',
+        i18nTitle: 'message.routes.function.tab',
+        requiresAuth: true,
+        icon: 'ic:round-tab'
+      }
+    },
+    {
+      name: 'function_tab-detail',
+      path: '/function/tab-detail',
+      component: 'self',
+      meta: {
+        title: 'Tab Detail',
+        requiresAuth: true,
+        hide: true,
+        activeMenu: 'function_tab',
+        icon: 'ic:round-tab'
+      }
+    },
+    {
+      name: 'function_tab-multi-detail',
+      path: '/function/tab-multi-detail',
+      component: 'self',
+      meta: {
+        title: 'Tab Multi Detail',
+        requiresAuth: true,
+        hide: true,
+        multiTab: true,
+        activeMenu: 'function_tab',
+        icon: 'ic:round-tab'
+      }
+    }
+  ],
+  meta: {
+    title: '功能',
+    i18nTitle: 'message.routes.function._value',
+    icon: 'icon-park-outline:all-application',
+    order: 6
+  }
+};
+
+export default functionRoute;
--- a/src/router/modules/management.ts
+++ b/src/router/modules/management.ts
@@ -0,0 +1,59 @@
+const management: AuthRoute.Route = {
+  name: 'management',
+  path: '/management',
+  component: 'basic',
+  children: [
+    {
+      name: 'management_auth',
+      path: '/management/auth',
+      component: 'self',
+      meta: {
+        title: '权限管理',
+        i18nTitle: 'message.routes.management.auth',
+        requiresAuth: true,
+        icon: 'ic:baseline-security'
+      }
+    },
+    {
+      name: 'management_role',
+      path: '/management/role',
+      component: 'self',
+      meta: {
+        title: '角色管理',
+        i18nTitle: 'message.routes.management.role',
+        requiresAuth: true,
+        icon: 'carbon:user-role'
+      }
+    },
+    {
+      name: 'management_user',
+      path: '/management/user',
+      component: 'self',
+      meta: {
+        title: '用户管理',
+        i18nTitle: 'message.routes.management.user',
+        requiresAuth: true,
+        icon: 'ic:round-manage-accounts'
+      }
+    },
+    {
+      name: 'management_route',
+      path: '/management/route',
+      component: 'self',
+      meta: {
+        title: '路由管理',
+        i18nTitle: 'message.routes.management.route',
+        requiresAuth: true,
+        icon: 'material-symbols:route'
+      }
+    }
+  ],
+  meta: {
+    title: '系统管理',
+    i18nTitle: 'message.routes.management._value',
+    icon: 'carbon:cloud-service-management',
+    order: 9
+  }
+};
+
+export default management;
--- a/src/router/modules/plugin.ts
+++ b/src/router/modules/plugin.ts
@@ -0,0 +1,149 @@
+const plugin: AuthRoute.Route = {
+  name: 'plugin',
+  path: '/plugin',
+  component: 'basic',
+  children: [
+    {
+      name: 'plugin_charts',
+      path: '/plugin/charts',
+      component: 'multi',
+      children: [
+        {
+          name: 'plugin_charts_echarts',
+          path: '/plugin/charts/echarts',
+          component: 'self',
+          meta: {
+            title: 'ECharts',
+            i18nTitle: 'message.routes.plugin.charts.echarts',
+            requiresAuth: true,
+            icon: 'simple-icons:apacheecharts'
+          }
+        },
+        {
+          name: 'plugin_charts_antv',
+          path: '/plugin/charts/antv',
+          component: 'self',
+          meta: {
+            title: 'AntV',
+            i18nTitle: 'message.routes.plugin.charts.antv',
+            requiresAuth: true,
+            icon: 'simple-icons:antdesign'
+          }
+        }
+      ],
+      meta: {
+        title: '图表',
+        i18nTitle: 'message.routes.plugin.charts._value',
+        icon: 'mdi:chart-areaspline'
+      }
+    },
+    {
+      name: 'plugin_map',
+      path: '/plugin/map',
+      component: 'self',
+      meta: {
+        title: '地图',
+        i18nTitle: 'message.routes.plugin.map',
+        requiresAuth: true,
+        icon: 'mdi:map'
+      }
+    },
+    {
+      name: 'plugin_video',
+      path: '/plugin/video',
+      component: 'self',
+      meta: {
+        title: '视频',
+        i18nTitle: 'message.routes.plugin.video',
+        requiresAuth: true,
+        icon: 'mdi:video'
+      }
+    },
+    {
+      name: 'plugin_editor',
+      path: '/plugin/editor',
+      component: 'multi',
+      children: [
+        {
+          name: 'plugin_editor_quill',
+          path: '/plugin/editor/quill',
+          component: 'self',
+          meta: {
+            title: '富文本编辑器',
+            i18nTitle: 'message.routes.plugin.editor.quill',
+            requiresAuth: true,
+            icon: 'mdi:file-document-edit-outline'
+          }
+        },
+        {
+          name: 'plugin_editor_markdown',
+          path: '/plugin/editor/markdown',
+          component: 'self',
+          meta: {
+            title: 'markdown编辑器',
+            i18nTitle: 'message.routes.plugin.editor.markdown',
+            requiresAuth: true,
+            icon: 'ri:markdown-line'
+          }
+        }
+      ],
+      meta: {
+        title: '编辑器',
+        i18nTitle: 'message.routes.plugin.editor._value',
+        icon: 'icon-park-outline:editor'
+      }
+    },
+    {
+      name: 'plugin_swiper',
+      path: '/plugin/swiper',
+      component: 'self',
+      meta: {
+        title: 'Swiper插件',
+        i18nTitle: 'message.routes.plugin.swiper',
+        requiresAuth: true,
+        icon: 'simple-icons:swiper'
+      }
+    },
+    {
+      name: 'plugin_copy',
+      path: '/plugin/copy',
+      component: 'self',
+      meta: {
+        title: '剪贴板',
+        i18nTitle: 'message.routes.plugin.copy',
+        requiresAuth: true,
+        icon: 'mdi:clipboard-outline'
+      }
+    },
+    {
+      name: 'plugin_icon',
+      path: '/plugin/icon',
+      component: 'self',
+      meta: {
+        title: '图标',
+        i18nTitle: 'message.routes.plugin.icon',
+        requiresAuth: true,
+        localIcon: 'custom-icon'
+      }
+    },
+    {
+      name: 'plugin_print',
+      path: '/plugin/print',
+      component: 'self',
+      meta: {
+        title: '打印',
+        i18nTitle: 'message.routes.plugin.print',
+        requiresAuth: true,
+        icon: 'mdi:printer'
+      }
+    }
+  ],
+  meta: {
+    title: '插件示例',
+    i18nTitle: 'message.routes.plugin._value',
+    icon: 'clarity:plugin-line',
+    order: 4
+  }
+};
+
+export default plugin;
--- a/src/service/api/index.ts
+++ b/src/service/api/index.ts
@@ -1 +1,2 @@
 export * from './auth';
+export * from './management';
--- a/src/service/api/management.adapter.ts
+++ b/src/service/api/management.adapter.ts
@@ -0,0 +1,13 @@
+export function adapterOfFetchUserList(data: ApiUserManagement.User[] | null): UserManagement.User[] {
+  if (!data) return [];
+
+  return data.map((item, index) => {
+    const user: UserManagement.User = {
+      index: index + 1,
+      key: item.id,
+      ...item
+    };
+
+    return user;
+  });
+}
--- a/src/service/api/management.ts
+++ b/src/service/api/management.ts
@@ -0,0 +1,9 @@
+import { adapter } from '@/utils';
+import { mockRequest } from '../request';
+import { adapterOfFetchUserList } from './management.adapter';
+
+/** 获取用户列表 */
+export const fetchUserList = async () => {
+  const data = await mockRequest.post<ApiUserManagement.User[] | null>('/getAllUserList');
+  return adapter(adapterOfFetchUserList, data);
+};
--- a/src/store/modules/app/index.ts
+++ b/src/store/modules/app/index.ts
@@ -1,6 +1,6 @@
 import { nextTick } from 'vue';
 import { defineStore } from 'pinia';
-import { LAYOUT_SCROLL_EL_ID } from '@soybeanjs/vue-materials';
+import { SCROLL_EL_ID } from '@soybeanjs/vue-materials';

 interface AppState {
  /** 滚动元素的id */
@@ -21,7 +21,7 @@ interface AppState {

 export const useAppStore = defineStore('app-store', {
  state: (): AppState => ({
-    scrollElId: LAYOUT_SCROLL_EL_ID,
+    scrollElId: SCROLL_EL_ID,
    contentFull: false,
    disableMainXScroll: false,
    reloadFlag: true,
--- a/src/typings/api.d.ts
+++ b/src/typings/api.d.ts
@@ -21,3 +21,32 @@ declare namespace ApiRoute {
    home: AuthRoute.AllRouteKey;
  }
 }
+
+declare namespace ApiUserManagement {
+  interface User {
+    /** 用户id */
+    id: string;
+    /** 用户名 */
+    userName: string | null;
+    /** 用户年龄 */
+    age: number | null;
+    /**
+     * 用户性别
+     * - 0: 女
+     * - 1: 男
+     */
+    gender: '0' | '1' | null;
+    /** 用户手机号码 */
+    phone: string;
+    /** 用户邮箱 */
+    email: string | null;
+    /**
+     * 用户状态
+     * - 1: 启用
+     * - 2: 禁用
+     * - 3: 冻结
+     * - 4: 软删除
+     */
+    userStatus: '1' | '2' | '3' | '4' | null;
+  }
+}
--- a/src/typings/business.d.ts
+++ b/src/typings/business.d.ts
@@ -18,3 +18,28 @@ declare namespace Auth {
    userRole: RoleType;
  }
 }
+
+declare namespace UserManagement {
+  interface User extends ApiUserManagement.User {
+    /** 序号 */
+    index: number;
+    /** 表格的key（id） */
+    key: string;
+  }
+
+  /**
+   * 用户性别
+   * - 0: 女
+   * - 1: 男
+   */
+  type GenderKey = NonNullable<User['gender']>;
+
+  /**
+   * 用户状态
+   * - 1: 启用
+   * - 2: 禁用
+   * - 3: 冻结
+   * - 4: 软删除
+   */
+  type UserStatusKey = NonNullable<User['userStatus']>;
+}
--- a/src/typings/env.d.ts
+++ b/src/typings/env.d.ts
@@ -66,8 +66,6 @@ interface ImportMetaEnv {
  readonly VITE_PROD_MOCK?: 'Y' | 'N';
  /** hash路由模式 */
  readonly VITE_HASH_ROUTE?: 'Y' | 'N';
-  /** 是否应用自动生成路由的插件 */
-  readonly VITE_SOYBEAN_ROUTE_PLUGIN?: 'Y' | 'N';
  /** 是否是部署的vercel */
  readonly VITE_VERCEL?: 'Y' | 'N';
 }
--- a/src/typings/global.d.ts
+++ b/src/typings/global.d.ts
@@ -16,3 +16,6 @@ declare namespace Common {
  /** 选项数据 */
  type OptionWithKey<K> = { value: K; label: string };
 }
+
+/** 构建时间 */
+declare const PROJECT_BUILD_TIME: string;
--- a/src/typings/naive-ui.d.ts
+++ b/src/typings/naive-ui.d.ts
@@ -0,0 +1,3 @@
+declare namespace NaiveUI {
+  type ThemeColor = 'default' | 'error' | 'primary' | 'info' | 'success' | 'warning';
+}
--- a/src/typings/package.d.ts
+++ b/src/typings/package.d.ts
@@ -0,0 +1,15 @@
+/// <reference types="@amap/amap-jsapi-types" />
+/// <reference types="bmapgl" />
+
+declare namespace BMap {
+  class Map extends BMapGL.Map {}
+  class Point extends BMapGL.Point {}
+}
+
+declare const TMap: any;
+
+declare module 'unplugin-vue-define-options/vite' {
+  const plugin: (options?: import('unplugin-vue-define-options/dist/unplugin.d-59ddef99').B) => import('vite').Plugin;
+
+  export default plugin;
+}
--- a/src/typings/page-route.d.ts
+++ b/src/typings/page-route.d.ts
@@ -22,11 +22,60 @@ declare namespace PageRoute {
    | 'constant-page'
    | 'login'
    | 'not-found'
+    | 'about'
+    | 'auth-demo'
+    | 'auth-demo_permission'
+    | 'auth-demo_super'
+    | 'component'
+    | 'component_button'
+    | 'component_card'
+    | 'component_table'
+    | 'crud'
+    | 'crud_demo'
+    | 'crud_doc'
+    | 'crud_header'
+    | 'crud_header_group'
+    | 'crud_source'
+    | 'dashboard'
+    | 'dashboard_analysis'
+    | 'dashboard_workbench'
+    | 'document'
+    | 'document_naive'
+    | 'document_project-link'
+    | 'document_project'
+    | 'document_vite'
+    | 'document_vue'
+    | 'exception'
+    | 'exception_403'
+    | 'exception_404'
+    | 'exception_500'
+    | 'function'
+    | 'function_tab-detail'
+    | 'function_tab-multi-detail'
+    | 'function_tab'
+    | 'management'
+    | 'management_auth'
+    | 'management_role'
+    | 'management_route'
+    | 'management_user'
    | 'multi-menu'
    | 'multi-menu_first'
    | 'multi-menu_first_second-new'
    | 'multi-menu_first_second-new_third'
-    | 'multi-menu_first_second';
+    | 'multi-menu_first_second'
+    | 'plugin'
+    | 'plugin_charts'
+    | 'plugin_charts_antv'
+    | 'plugin_charts_echarts'
+    | 'plugin_copy'
+    | 'plugin_editor'
+    | 'plugin_editor_markdown'
+    | 'plugin_editor_quill'
+    | 'plugin_icon'
+    | 'plugin_map'
+    | 'plugin_print'
+    | 'plugin_swiper'
+    | 'plugin_video';

  /**
   * last degree route key, which has the page file
@@ -40,7 +89,44 @@ declare namespace PageRoute {
    | 'constant-page'
    | 'login'
    | 'not-found'
+    | 'about'
+    | 'auth-demo_permission'
+    | 'auth-demo_super'
+    | 'component_button'
+    | 'component_card'
+    | 'component_table'
+    | 'crud_demo'
+    | 'crud_doc'
+    | 'crud_header_group'
+    | 'crud_source'
+    | 'dashboard_analysis'
+    | 'dashboard_workbench'
+    | 'document_naive'
+    | 'document_project-link'
+    | 'document_project'
+    | 'document_vite'
+    | 'document_vue'
+    | 'exception_403'
+    | 'exception_404'
+    | 'exception_500'
+    | 'function_tab-detail'
+    | 'function_tab-multi-detail'
+    | 'function_tab'
+    | 'management_auth'
+    | 'management_role'
+    | 'management_route'
+    | 'management_user'
    | 'multi-menu_first_second-new_third'
    | 'multi-menu_first_second'
+    | 'plugin_charts_antv'
+    | 'plugin_charts_echarts'
+    | 'plugin_copy'
+    | 'plugin_editor_markdown'
+    | 'plugin_editor_quill'
+    | 'plugin_icon'
+    | 'plugin_map'
+    | 'plugin_print'
+    | 'plugin_swiper'
+    | 'plugin_video'
  >;
 }
--- a/src/typings/system.d.ts
+++ b/src/typings/system.d.ts
@@ -254,7 +254,7 @@ declare namespace App {
    hasChildren: boolean;
    icon?: import('vue').Component;
    i18nTitle?: string;
-    options?: (import('naive-ui/es/dropdown/src/interface').DropdownMixedOption & { i18nTitle?: string })[];
+    options?: import('naive-ui/es/dropdown/src/interface').DropdownMixedOption[];
  };

  /** 多页签Tab的路由 */
@@ -302,7 +302,7 @@ declare namespace App {
 }

 declare namespace I18nType {
-  type langType = 'en' | 'zh-CN' | 'km-KH';
+  type langType = 'en' | 'zh-CN';

  interface Schema {
    system: {
@@ -310,7 +310,7 @@ declare namespace I18nType {
    };
    routes: {
      dashboard: {
-        _value: string;
+        dashboard: string;
        analysis: string;
        workbench: string;
      };
--- a/src/views/about/components/dev-dependency.vue
+++ b/src/views/about/components/dev-dependency.vue
@@ -0,0 +1,19 @@
+<template>
+  <n-card title="开发环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in devDependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { pkgJson } from './model';
+
+defineOptions({ name: 'DevDependency' });
+
+const { devDependencies } = pkgJson;
+</script>
+
+<style scoped></style>
--- a/src/views/about/components/index.ts
+++ b/src/views/about/components/index.ts
@@ -0,0 +1,6 @@
+import ProjectIntroduction from './project-introduction.vue';
+import ProjectInfo from './project-info.vue';
+import ProDependency from './pro-dependency.vue';
+import DevDependency from './dev-dependency.vue';
+
+export { ProjectIntroduction, ProjectInfo, ProDependency, DevDependency };
--- a/src/views/about/components/model.ts
+++ b/src/views/about/components/model.ts
@@ -0,0 +1,39 @@
+import pkg from '~/package.json';
+
+/** npm依赖包版本信息 */
+export interface PkgVersionInfo {
+  name: string;
+  version: string;
+}
+
+interface Package {
+  name: string;
+  version: string;
+  dependencies: Record<string, string>;
+  devDependencies: Record<string, string>;
+  [key: string]: any;
+}
+
+interface PkgJson {
+  name: string;
+  version: string;
+  dependencies: PkgVersionInfo[];
+  devDependencies: PkgVersionInfo[];
+}
+
+const pkgWithType = pkg as Package;
+
+function transformVersionData(tuple: [string, string]): PkgVersionInfo {
+  const [name, version] = tuple;
+  return {
+    name,
+    version
+  };
+}
+
+export const pkgJson: PkgJson = {
+  name: pkgWithType.name,
+  version: pkgWithType.version,
+  dependencies: Object.entries(pkgWithType.dependencies).map(item => transformVersionData(item)),
+  devDependencies: Object.entries(pkgWithType.devDependencies).map(item => transformVersionData(item))
+};
--- a/src/views/about/components/pro-dependency.vue
+++ b/src/views/about/components/pro-dependency.vue
@@ -0,0 +1,19 @@
+<template>
+  <n-card title="生产环境依赖" :bordered="false" size="small" class="rounded-16px shadow-sm">
+    <n-descriptions label-placement="left" bordered size="small">
+      <n-descriptions-item v-for="item in dependencies" :key="item.name" :label="item.name">
+        {{ item.version }}
+      </n-descriptions-item>
+    </n-descriptions>
+  </n-card>
+</template>
+
+<script setup lang="ts">
+import { pkgJson } from './model';
+
+defineOptions({ name: 'ProDependency' });
+
+const { dependencies } = pkgJson;
+</script>
+
+<style scoped></style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Soybean	032dbc6815	Merge pull request #227 from fast-crud/for-pr feat(projects): integration fast-crud	2023-05-22 22:12:05 +08:00
xiaojunnuo	3c33f89ec1	refactor(components): resolve conflict	2023-05-22 12:22:13 +08:00
xiaojunnuo	f7090d3dbc	perf(projects): 优化any	2023-05-22 12:12:11 +08:00
xiaojunnuo	59af204a4c	feat(projects): integration fast-crud	2023-05-15 17:41:17 +08:00