release: update 3.3.0

* feat: 用户登录使用mock api, 可以使用test用户登录

* Update permission.ts

.env.staging

@@ -0,0 +1,14 @@
+# 预发布也需要生产环境的行为
+# https://cn.vitejs.dev/guide/env-and-mode.html#modes
+NODE_ENV=production
+
+VITE_PUBLIC_PATH = /
+
+# 线上环境路由历史模式
+VITE_ROUTER_HISTORY = "hash"
+
+# 线上环境后端地址
+VITE_PROXY_DOMAIN_REAL = ""
+
+# 是否为打包后的文件提供传统浏览器兼容性支持 支持 true 不支持 false
+VITE_LEGACY = false

.vscode/extensions.json

@@ -1,6 +1,5 @@
 {
   "recommendations": [
-    "voorjaar.windicss-intellisense",
     "vscode-icons-team.vscode-icons",
     "davidanson.vscode-markdownlint",
     "stylelint.vscode-stylelint",
@@ -10,6 +9,7 @@
     "lokalise.i18n-ally",
     "mikestead.dotenv",
     "eamodio.gitlens",
-    "antfu.iconify"
+    "antfu.iconify",
+    "antfu.unocss"
   ]
 }

CHANGELOG.en_US.md

@@ -1,3 +1,40 @@
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- Add user management page demo
+- Add role management page demo
+- Add department management page demo
+- Add card list page demo
+- Integrated form designer
+- Added `PPT` demo
+- Added anti-shake interception demo in the function menu
+- Upgrade `wangeditorV5` (and support internationalization and custom themes)
+- Integrate `tauri` version
+- Added barcode function
+- Added QR code function
+- Use the `Cascader` cascade selector in `element-plus` to write a three-level and two-level linkage demo of Chinese provinces and cities
+- Integrate `Swiper` plugin
+- Routing supports passing `component`, representing the component path
+- Added pre-release packaging mode
+- Add [hooks] to close a tag (https://github.com/xiaoxian521/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ refactor
+
+- Refactored the landing page to be more inclined to the actual business scenario
+- Use `unocss` instead of `windicss`, `unocss` has better performance in development environment, no memory leaks, and `api` is compatible with `windicss`
+
+### 🍏 Perf
+
+- Optimized the style of the `split-pane` component for the platform
+- Optimize internationalization, no longer pass the `i18n` field in the route, the platform automatically reads the files in the `locales` folder of the root directory for internationalization matching
+- Optimized icon selector
+- Optimize `layout` to display user information [commit](https://github.com/xiaoxian521/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- Fix route initialization problem (Cannot access 'constantRoutes' before initialization)
+
 # 3.2.0 (2022-3-22)
 
 ### 🎫 Feat

CHANGELOG.md

@@ -1,3 +1,40 @@
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- Add user management page demo
+- Add role management page demo
+- Add department management page demo
+- Add card list page demo
+- Integrated form designer
+- Added `PPT` demo
+- Added anti-shake interception demo in the function menu
+- Upgrade `wangeditorV5` (and support internationalization and custom themes)
+- Integrate `tauri` version
+- Added barcode function
+- Added QR code function
+- Use the `Cascader` cascade selector in `element-plus` to write a three-level and two-level linkage demo of Chinese provinces and cities
+- Integrate `Swiper` plugin
+- Routing supports passing `component`, representing the component path
+- Added pre-release packaging mode
+- Add [hooks] to close a tag (https://github.com/xiaoxian521/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ refactor
+
+- Refactored the landing page to be more inclined to the actual business scenario
+- Use `unocss` instead of `windicss`, `unocss` has better performance in development environment, no memory leaks, and `api` is compatible with `windicss`
+
+### 🍏 Perf
+
+- Optimized the style of the `split-pane` component for the platform
+- Optimize internationalization, no longer pass the `i18n` field in the route, the platform automatically reads the files in the `locales` folder of the root directory for internationalization matching
+- Optimized icon selector
+- Optimize `layout` to display user information [commit](https://github.com/xiaoxian521/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- Fix route initialization problem (Cannot access 'constantRoutes' before initialization)
+
 # 3.2.0 (2022-3-22)
 
 ### 🎫 Feat

CHANGELOG.zh_CN.md

@@ -1,3 +1,40 @@
+# 3.3.0 (2022-5-11)
+
+### 🎫 Feat
+
+- 添加用户管理页面 demo
+- 添加角色管理页面 demo
+- 添加部门管理页面 demo
+- 添加卡片列表页面 demo
+- 集成表单设计器
+- 新增`PPT`demo
+- 在功能菜单中新增防抖截流 demo
+- 升级`wangeditorV5`（并支持国际化和自定义主题）
+- 集成`tauri`版本
+- 新增条形码功能
+- 新增二维码功能
+- 使用`element-plus`中的`Cascader`级联选择器编写中国省市区三级、二级联动 demo
+- 集成`Swiper`插件
+- 路由支持传`component`，代表组件路径
+- 添加预发布打包模式
+- 添加关闭某个标签的[hooks](https://github.com/xiaoxian521/vue-pure-admin/commit/5e8723a031923e79f507e5a17151d3bd88a51523)
+
+### ✔️ refactor
+
+- 重构登陆页，更偏向实际业务场景
+- 使用`unocss`替换`windicss`，`unocss`开发环境下性能更好，没有内存泄露，而且`api`使用上兼容`windicss`
+
+### 🍏 Perf
+
+- 优化平台的`split-pane`组件样式
+- 优化国际化，路由不再传`i18n`字段，平台自动读取根目录`locales`文件夹下文件进行国际化匹配
+- 优化图标选择器
+- 优化`layout`显示用户信息[commit](https://github.com/xiaoxian521/vue-pure-admin/commit/56f9dc85e7fbe0637605c43577c794de9f8968aa)
+
+### 🐞 Bug fixes
+
+- 修复路由初始化问题（Cannot access 'constantRoutes' before initialization）
+
 # 3.2.0 (2022-3-22)
 
 ### 🎫 Feat

README.en-US.md

@@ -23,6 +23,10 @@ vue-pure-admin is a free and open source middle and back-end template. Using the
 
 - [Click Watch Thin](https://github.com/xiaoxian521/pure-admin-thin)
 
+## Tauri
+
+- [Click Watch Tauri](https://github.com/xiaoxian521/tauri-pure-admin)
+
 ## Preview
 
 - [vue-pure-admin](https://vue-pure-admin.vercel.app)
@@ -116,7 +120,7 @@ Support modern browsers, not IE
 
 ## Maintainer
 
-[xiaoxian521](https://github.com/xiaoxian521)
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
 ## Donate
 

README.md

@@ -23,6 +23,10 @@ vue-pure-admin 是一个免费开源的中后台模版。使用了最新的`vue3
 
 - [点我查看精简版](https://github.com/xiaoxian521/pure-admin-thin)
 
+## Tauri 版
+
+- [点我查看 Tauri 版](https://github.com/xiaoxian521/tauri-pure-admin)
+
 ## 预览
 
 - [vue-pure-admin](https://vue-pure-admin.vercel.app)
@@ -116,7 +120,7 @@ pnpm build
 
 ## 维护者
 
-[xiaoxian521](https://github.com/xiaoxian521)
+[xiaoxian521](https://github.com/xiaoxian521)、[Ten-K](https://github.com/Ten-K)
 
 ## 捐赠
 

build/plugins.ts

@@ -1,18 +1,16 @@
 import { resolve } from "path";
+import Unocss from "unocss/vite";
 import vue from "@vitejs/plugin-vue";
 import { viteBuildInfo } from "./info";
 import svgLoader from "vite-svg-loader";
 import legacy from "@vitejs/plugin-legacy";
 import vueJsx from "@vitejs/plugin-vue-jsx";
-import WindiCSS from "vite-plugin-windicss";
 import { viteMockServe } from "vite-plugin-mock";
-import liveReload from "vite-plugin-live-reload";
-import styleImport from "vite-plugin-style-import";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
-import ElementPlus from "unplugin-element-plus/vite";
 import { visualizer } from "rollup-plugin-visualizer";
 import removeConsole from "vite-plugin-remove-console";
 import themePreprocessorPlugin from "@pureadmin/theme";
+import { genScssMultipleScopeVars } from "/@/layout/theme";
 
 export function getPluginsList(command, VITE_LEGACY) {
   const prodMock = true;
@@ -27,84 +25,26 @@ export function getPluginsList(command, VITE_LEGACY) {
     }),
     // jsx、tsx语法支持
     vueJsx(),
-    WindiCSS(),
+    Unocss(),
     // 线上环境删除console
     removeConsole(),
     viteBuildInfo(),
-    // 修改layout文件夹下的文件时自动重载浏览器 解决 https://github.com/xiaoxian521/vue-pure-admin/issues/170
-    liveReload(["src/layout/**/*", "src/router/**/*"]),
     // 自定义主题
     themePreprocessorPlugin({
       scss: {
-        multipleScopeVars: [
-          {
-            scopeName: "layout-theme-default",
-            path: "src/layout/theme/default-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-light",
-            path: "src/layout/theme/light-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-dusk",
-            path: "src/layout/theme/dusk-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-volcano",
-            path: "src/layout/theme/volcano-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-yellow",
-            path: "src/layout/theme/yellow-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-mingQing",
-            path: "src/layout/theme/mingQing-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-auroraGreen",
-            path: "src/layout/theme/auroraGreen-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-pink",
-            path: "src/layout/theme/pink-vars.scss"
-          },
-          {
-            scopeName: "layout-theme-saucePurple",
-            path: "src/layout/theme/saucePurple-vars.scss"
-          }
-        ],
-        // 默认取 multipleScopeVars[0].scopeName
-        defaultScopeName: "",
+        multipleScopeVars: genScssMultipleScopeVars(),
         // 在生产模式是否抽取独立的主题css文件，extract为true以下属性有效
         extract: true,
-        // 独立主题css文件的输出路径，默认取 viteConfig.build.assetsDir 相对于 (viteConfig.build.outDir)
-        outputDir: "",
         // 会选取defaultScopeName对应的主题css文件在html添加link
         themeLinkTagId: "head",
         // "head"||"head-prepend" || "body" ||"body-prepend"
         themeLinkTagInjectTo: "head",
         // 是否对抽取的css文件内对应scopeName的权重类名移除
-        removeCssScopeName: false,
-        // 可以自定义css文件名称的函数
-        customThemeCssFileName: scopeName => scopeName
+        removeCssScopeName: false
       }
     }),
     // svg组件化支持
     svgLoader(),
-    // 按需加载vxe-table
-    styleImport({
-      libs: [
-        {
-          libraryName: "vxe-table",
-          esModule: true,
-          ensureStyleFile: true,
-          resolveComponent: name => `vxe-table/es/${name}`,
-          resolveStyle: name => `vxe-table/es/${name}/style.css`
-        }
-      ]
-    }),
-    ElementPlus({}),
     // mock支持
     viteMockServe({
       mockPath: "mock",
@@ -114,7 +54,7 @@ export function getPluginsList(command, VITE_LEGACY) {
           import { setupProdMockServer } from './mockProdServer';
           setupProdMockServer();
         `,
-      logger: true
+      logger: false
     }),
     // 是否为打包后的文件提供传统浏览器兼容性支持
     VITE_LEGACY

locales/en.yaml

@@ -22,8 +22,10 @@ menus:
   hshome: Home
   hslogin: Login
   hssysManagement: System Manage
-  hsBaseinfo: Base Info
+  hsUser: User Manage
   hsDict: Dict Manage
+  hsRole: Role Manage
+  hsDept: Dept Manage
   hseditor: Editor
   hserror: Error Page
   hsfourZeroFour: "404"
@@ -72,3 +74,13 @@ menus:
   hsAntTabs: Imitate Antdv Tabs
   hsAntAnchor: Imitate Antdv Anchor
   hsAntTreeSelect: Imitate Antdv TreeSelector
+  hsList: List Page
+  hsListCard: Card List Page
+  hsDebounce: Debounce & Throttle
+  hsFormDesign: Form Design
+  hsBarcode: Barcode
+  hsQrcode: Qrcode
+  hsCascader: Area Cascader
+  hsSwiper: Swiper Plugin
+status:
+  hsLoad: Loading...

locales/zh-CN.yaml

@@ -22,8 +22,10 @@ menus:
   hshome: 首页
   hslogin: 登陆
   hssysManagement: 系统管理
-  hsBaseinfo: 基础信息
+  hsUser: 用户管理
   hsDict: 字典管理
+  hsRole: 角色管理
+  hsDept: 部门管理
   hseditor: 编辑器
   hserror: 错误页面
   hsfourZeroFour: "404"
@@ -72,3 +74,13 @@ menus:
   hsAntTabs: 仿antdv标签页
   hsAntAnchor: 仿antdv锚点
   hsAntTreeSelect: 仿antdv树型选择器
+  hsList: 列表页
+  hsListCard: 卡片列表页
+  hsDebounce: 防抖节流
+  hsFormDesign: 表单设计器
+  hsBarcode: 条形码
+  hsQrcode: 二维码
+  hsCascader: 区域级联选择器
+  hsSwiper: Swiper插件
+status:
+  hsLoad: 加载中...

mock/asyncRoutes.ts

@@ -8,24 +8,40 @@ const systemRouter = {
   meta: {
     icon: "setting",
     title: "menus.hssysManagement",
-    i18n: true,
-    rank: 6
+    rank: 11
   },
   children: [
     {
       path: "/system/user/index",
       name: "user",
       meta: {
-        title: "menus.hsBaseinfo",
-        i18n: true
+        icon: "flUser",
+        title: "menus.hsUser"
       }
     },
     {
-      path: "/system/dict/index",
+      path: "/system/role/index",
+      name: "role",
+      meta: {
+        icon: "role",
+        title: "menus.hsRole"
+      }
+    },
+    {
+      path: "/system/dept/index",
+      name: "dept",
+      meta: {
+        icon: "dept",
+        title: "menus.hsDept"
+      }
+    },
+    {
+      path: "/system/dict",
+      component: "/system/dict/index",
       name: "dict",
       meta: {
+        icon: "dict",
         title: "menus.hsDict",
-        i18n: true,
         keepAlive: true
       }
     }
@@ -38,7 +54,6 @@ const permissionRouter = {
   meta: {
     title: "menus.permission",
     icon: "lollipop",
-    i18n: true,
     rank: 7
   },
   children: [
@@ -46,8 +61,7 @@ const permissionRouter = {
       path: "/permission/page/index",
       name: "permissionPage",
       meta: {
-        title: "menus.permissionPage",
-        i18n: true
+        title: "menus.permissionPage"
       }
     },
     {
@@ -55,7 +69,6 @@ const permissionRouter = {
       name: "permissionButton",
       meta: {
         title: "menus.permissionButton",
-        i18n: true,
         authority: []
       }
     }
@@ -68,7 +81,6 @@ const frameRouter = {
   meta: {
     icon: "monitor",
     title: "menus.hsExternalPage",
-    i18n: true,
     rank: 10
   },
   children: [
@@ -76,7 +88,6 @@ const frameRouter = {
       path: "/iframe/pure",
       name: "reFramePure",
       meta: {
-        i18n: true,
         title: "menus.hsPureDocument",
         frameSrc: "https://pure-admin-doc.vercel.app"
       }
@@ -85,17 +96,15 @@ const frameRouter = {
       path: "/external",
       name: "https://pure-admin-doc.vercel.app",
       meta: {
-        title: "menus.externalLink",
-        i18n: true
+        title: "menus.externalLink"
       }
     },
     {
       path: "/iframe/ep",
       name: "reFrameEp",
       meta: {
-        i18n: true,
         title: "menus.hsEpDocument",
-        frameSrc: "https://element-plus.gitee.io/zh-CN/"
+        frameSrc: "https://element-plus.org/zh-CN/"
       }
     }
   ]
@@ -107,16 +116,14 @@ const tabsRouter = {
   meta: {
     icon: "IF-team-icontabs",
     title: "menus.hstabs",
-    i18n: true,
-    rank: 12
+    rank: 13
   },
   children: [
     {
       path: "/tabs/index",
       name: "reTabs",
       meta: {
-        title: "menus.hstabs",
-        i18n: true
+        title: "menus.hstabs"
       }
     },
     {
@@ -125,7 +132,6 @@ const tabsRouter = {
       meta: {
         title: "",
         showLink: false,
-        i18n: false,
         dynamicLevel: 3,
         refreshRedirect: "/tabs/index"
       }

mock/echarts.ts

@@ -1,23 +0,0 @@
-import { MockMethod } from "vite-plugin-mock";
-
-// http://mockjs.com/examples.html#Object
-const echartsList = () => {
-  const result = [];
-  for (let index = 0; index < 200; index++) {
-    result.push(["@date", Math.floor(Math.random() * 300)]);
-  }
-  return result;
-};
-
-export default [
-  {
-    url: "/getEchartsInfo",
-    method: "get",
-    response: () => {
-      return {
-        code: 0,
-        info: echartsList()
-      };
-    }
-  }
-] as MockMethod[];

mock/list.ts

@@ -0,0 +1,455 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/getCardList",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              index: 1,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 2,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 3,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 4,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 5,
+              isSetup: true,
+              type: 3,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 6,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 7,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 8,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 9,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 10,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 11,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 12,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 13,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 14,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 15,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 16,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 17,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 18,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "云数据库",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 19,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 20,
+              isSetup: true,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 21,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 22,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 23,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 24,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "人脸识别",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 25,
+              isSetup: false,
+              type: 5,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 26,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 27,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 28,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 29,
+              isSetup: false,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 30,
+              isSetup: true,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 31,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 32,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 33,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 34,
+              isSetup: false,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 35,
+              isSetup: false,
+              type: 1,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "云数据库",
+              description:
+                "基于腾讯优图强大的面部分析技术，提供包括人脸检测与分析、五官定位、人脸搜索、人脸比对、人脸"
+            },
+            {
+              index: 36,
+              isSetup: false,
+              type: 4,
+              banner:
+                "https://tdesign.gtimg.com/tdesign-pro/face-recognition.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 37,
+              isSetup: true,
+              type: 5,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "CVM",
+              description:
+                "云数据库MySQL为用户提供安全可靠，性能卓越、易于维护的企业级云数据库服务。"
+            },
+            {
+              index: 38,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "云数据库",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 39,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "人脸识别",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 40,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "CVM",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 41,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 42,
+              isSetup: true,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 43,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-db.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 44,
+              isSetup: true,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/t-sec.jpg",
+              name: "SSL证书",
+              description:
+                "云硬盘为您提供用于CVM的持久性数据块级存储服务。云硬盘中的数据自动地可用区内以多副本冗"
+            },
+            {
+              index: 45,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 46,
+              isSetup: true,
+              type: 2,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            },
+            {
+              index: 47,
+              isSetup: false,
+              type: 4,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/cloud-server.jpg",
+              name: "SSL证书",
+              description:
+                "腾讯安全云防火墙产品，是腾讯云安全团队结合云原生的优势，自主研发的SaaS化防火墙产品，无需客无需客无需客无需客无需客无需客无需客"
+            },
+            {
+              index: 48,
+              isSetup: false,
+              type: 3,
+              banner: "https://tdesign.gtimg.com/tdesign-pro/ssl.jpg",
+              name: "T-Sec 云防火墙",
+              description:
+                "SSL证书又叫服务器证书，腾讯云为您提供证书的一站式服务，包括免费、付费证书的申请、管理及部"
+            }
+          ]
+        }
+      };
+    }
+  }
+] as MockMethod[];

mock/system.ts

@@ -0,0 +1,288 @@
+import { MockMethod } from "vite-plugin-mock";
+
+export default [
+  {
+    url: "/role",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              createTime: 1609837428000,
+              updateTime: 1645477701000,
+              creator: "admin",
+              updater: "",
+              deleted: false,
+              tenantId: 1,
+              id: 1,
+              name: "超级管理员",
+              code: "super_admin",
+              sort: 1,
+              status: 0,
+              type: 1,
+              remark: "超级管理员",
+              dataScope: 1,
+              dataScopeDeptIds: null
+            },
+            {
+              createTime: 1609837428000,
+              updateTime: 1645477700000,
+              creator: "admin",
+              updater: "",
+              deleted: false,
+              tenantId: 1,
+              id: 2,
+              name: "普通角色",
+              code: "common",
+              sort: 2,
+              status: 0,
+              type: 1,
+              remark: "普通角色",
+              dataScope: 2,
+              dataScopeDeptIds: null
+            },
+            {
+              createTime: 1609912175000,
+              updateTime: 1647698441000,
+              creator: "",
+              updater: "1",
+              deleted: false,
+              tenantId: 1,
+              id: 101,
+              name: "测试账号",
+              code: "test",
+              sort: 0,
+              status: 0,
+              type: 2,
+              remark: "132",
+              dataScope: 1,
+              dataScopeDeptIds: []
+            }
+          ],
+          total: 3
+        }
+      };
+    }
+  },
+  {
+    url: "/dept",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: [
+          {
+            name: "杭州总公司",
+            type: 1, // 1 公司 2 分公司 3 部门
+            parentId: 0,
+            sort: 0,
+            leaderUserId: 1,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 100,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "郑州分公司",
+            type: 2,
+            parentId: 100,
+            sort: 1,
+            leaderUserId: 104,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 101,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "研发部门",
+            type: 3,
+            parentId: 101,
+            sort: 1,
+            leaderUserId: 104,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 103,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "市场部门",
+            type: 3,
+            parentId: 102,
+            sort: 1,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 108,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "深圳分公司",
+            type: 2,
+            parentId: 100,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 102,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "市场部门",
+            type: 3,
+            parentId: 101,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 1,
+            id: 104,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "财务部门",
+            type: 3,
+            parentId: 102,
+            sort: 2,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 109,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "测试部门",
+            type: 3,
+            parentId: 101,
+            sort: 3,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 105,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "财务部门",
+            type: 3,
+            parentId: 101,
+            sort: 4,
+            leaderUserId: 103,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 1,
+            id: 106,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          },
+          {
+            name: "运维部门",
+            type: 3,
+            parentId: 101,
+            sort: 5,
+            leaderUserId: null,
+            phone: "15888888888",
+            email: "ry@qq.com",
+            status: 0,
+            id: 107,
+            createTime: 1609837427000,
+            remark: "备注、备注、备注、备注、备注、备注、备注"
+          }
+        ]
+      };
+    }
+  },
+  {
+    url: "/user",
+    method: "post",
+    response: () => {
+      return {
+        code: 0,
+        data: {
+          list: [
+            {
+              username: "admin",
+              nickname: "admin",
+              remark: "管理员",
+              deptId: 103,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 1,
+              status: 0,
+              createTime: 1609837427000,
+              dept: {
+                id: 103,
+                name: "研发部门"
+              }
+            },
+            {
+              username: "pure",
+              nickname: "pure",
+              remark: "不要吓我",
+              deptId: 104,
+              postIds: [1],
+              mobile: "15888888888",
+              sex: 0,
+              id: 100,
+              status: 1,
+              createTime: 1609981637000,
+              dept: {
+                id: 104,
+                name: "市场部门"
+              }
+            },
+            {
+              username: "小姐姐",
+              nickname: "girl",
+              remark: null,
+              deptId: 106,
+              postIds: null,
+              mobile: "15888888888",
+              sex: 1,
+              id: 103,
+              status: 1,
+              createTime: 1610553035000,
+              dept: {
+                id: 106,
+                name: "财务部门"
+              }
+            },
+            {
+              username: "小哥哥",
+              nickname: "boy",
+              remark: null,
+              deptId: 107,
+              postIds: [],
+              mobile: "15888888888",
+              sex: 0,
+              id: 104,
+              status: 0,
+              createTime: 1611166433000,
+              dept: {
+                id: 107,
+                name: "运维部门"
+              }
+            }
+          ],
+          total: 4
+        }
+      };
+    }
+  }
+] as MockMethod[];

package.json

@@ -6,6 +6,7 @@
     "dev": "cross-env --max_old_space_size=4096 vite",
     "serve": "pnpm dev",
     "build": "rimraf dist && cross-env vite build",
+    "build:staging": "rimraf dist && cross-env vite build --mode staging",
     "report": "rimraf dist && cross-env vite build",
     "deploy": "bash deploy.sh",
     "preview": "vite preview",
@@ -27,23 +28,27 @@
   ],
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
-    "@ctrl/tinycolor": "^3.4.0",
-    "@logicflow/core": "0.7.1",
-    "@logicflow/extension": "0.7.1",
-    "@pureadmin/components": "^1.0.2",
-    "@vueuse/core": "^8.0.0",
-    "@vueuse/motion": "^2.0.0-beta.9",
-    "@vueuse/shared": "^8.0.0",
+    "@ctrl/tinycolor": "^3.4.1",
+    "@logicflow/core": "^1.1.15",
+    "@logicflow/extension": "^1.1.15",
+    "@pureadmin/components": "^1.0.6",
+    "@vueuse/core": "^8.4.2",
+    "@vueuse/motion": "^2.0.0-beta.12",
+    "@vueuse/shared": "^8.4.2",
+    "@wangeditor/editor": "^5.0.1",
+    "@wangeditor/editor-for-vue": "^5.1.10",
     "animate.css": "^4.1.1",
-    "axios": "^0.26.1",
+    "axios": "^0.27.1",
+    "china-area-data": "^5.0.1",
     "cropperjs": "^1.5.12",
     "css-color-function": "^1.3.3",
-    "dayjs": "^1.11.0",
+    "dayjs": "^1.11.2",
     "driver.js": "^0.9.8",
-    "echarts": "^5.3.0",
-    "element-plus": "^2.1.4",
+    "echarts": "^5.3.2",
+    "element-plus": "2.1.11",
     "element-resize-detector": "^1.2.3",
     "js-cookie": "^3.0.1",
+    "jsbarcode": "^3.11.5",
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "lodash-unified": "^1.0.2",
@@ -51,33 +56,39 @@
     "mockjs": "^1.1.0",
     "nprogress": "^0.2.0",
     "path": "^0.12.7",
-    "pinia": "^2.0.12",
+    "pinia": "^2.0.14",
+    "qrcode": "^1.5.0",
     "qs": "^6.10.1",
     "resize-observer-polyfill": "^1.5.1",
     "responsive-storage": "^1.0.11",
     "rgb-hex": "^4.0.0",
+    "swiper": "^8.1.4",
     "v-contextmenu": "3.0.0",
-    "vue": "^3.2.31",
-    "vue-i18n": "^9.2.0-beta.32",
+    "vue": "^3.2.33",
+    "vue-form-create2": "^1.2.8",
+    "vue-i18n": "^9.2.0-beta.35",
     "vue-json-pretty": "^2.0.2",
-    "vue-router": "^4.0.14",
+    "vue-router": "^4.0.15",
     "vue-types": "^4.1.1",
     "vuedraggable": "4.1.0",
-    "vxe-table": "^4.2.0",
-    "wangeditor": "^4.7.12",
+    "vxe-table": "^4.2.3",
     "xe-utils": "^3.5.4",
-    "xgplayer": "^2.31.4"
+    "xgplayer": "^2.31.6"
   },
   "devDependencies": {
     "@commitlint/cli": "13.1.0",
     "@commitlint/config-conventional": "13.1.0",
-    "@iconify-icons/ep": "^1.1.3",
-    "@iconify-icons/fa": "^1.1.1",
-    "@iconify-icons/fa-solid": "^1.1.2",
-    "@iconify-icons/ri": "^1.1.1",
-    "@iconify/vue": "^3.1.4",
-    "@intlify/vite-plugin-vue-i18n": "^3.3.1",
-    "@pureadmin/theme": "^0.0.1",
+    "@iconify-icons/carbon": "^1.2.4",
+    "@iconify-icons/ep": "^1.2.4",
+    "@iconify-icons/fa": "^1.2.2",
+    "@iconify-icons/fa-solid": "^1.2.2",
+    "@iconify-icons/fluent": "^1.2.5",
+    "@iconify-icons/mdi": "^1.2.8",
+    "@iconify-icons/ri": "^1.2.1",
+    "@iconify-icons/uil": "^1.2.1",
+    "@iconify/vue": "^3.2.1",
+    "@intlify/vite-plugin-vue-i18n": "^3.4.0",
+    "@pureadmin/theme": "^1.1.0",
     "@types/element-resize-detector": "1.1.3",
     "@types/js-cookie": "^3.0.1",
     "@types/lodash": "^4.14.180",
@@ -85,15 +96,16 @@
     "@types/mockjs": "1.0.3",
     "@types/node": "14.14.14",
     "@types/nprogress": "0.2.0",
+    "@types/qrcode": "^1.4.2",
     "@types/qs": "^6.9.7",
     "@typescript-eslint/eslint-plugin": "^5.10.2",
     "@typescript-eslint/parser": "^5.10.2",
-    "@vitejs/plugin-legacy": "^1.7.1",
-    "@vitejs/plugin-vue": "^2.2.4",
-    "@vitejs/plugin-vue-jsx": "^1.3.8",
+    "@vitejs/plugin-legacy": "^1.8.2",
+    "@vitejs/plugin-vue": "^2.3.2",
+    "@vitejs/plugin-vue-jsx": "^1.3.10",
     "@vue/eslint-config-prettier": "^7.0.0",
     "@vue/eslint-config-typescript": "^10.0.0",
-    "autoprefixer": "^10.4.2",
+    "autoprefixer": "^10.4.5",
     "cross-env": "7.0.3",
     "eslint": "^8.8.0",
     "eslint-plugin-prettier": "^4.0.0",
@@ -111,24 +123,20 @@
     "rimraf": "3.0.2",
     "rollup": "^2.70.1",
     "rollup-plugin-visualizer": "^5.6.0",
-    "sass": "^1.49.9",
+    "sass": "^1.51.0",
     "stylelint": "^14.3.0",
     "stylelint-config-html": "^1.0.0",
     "stylelint-config-prettier": "^9.0.3",
     "stylelint-config-recommended": "^6.0.0",
     "stylelint-config-standard": "^24.0.0",
     "stylelint-order": "^5.0.0",
-    "typescript": "^4.6.2",
-    "unplugin-element-plus": "^0.3.1",
-    "vite": "^2.9.0-beta.4",
-    "vite-plugin-live-reload": "^2.1.0",
+    "typescript": "^4.6.3",
+    "unocss": "^0.33.2",
+    "vite": "^2.9.6",
     "vite-plugin-mock": "^2.9.6",
-    "vite-plugin-remove-console": "^0.0.6",
-    "vite-plugin-style-import": "1.4.1",
-    "vite-plugin-windicss": "^1.8.3",
-    "vite-svg-loader": "2.2.0",
-    "vue-eslint-parser": "^8.2.0",
-    "windicss": "^3.5.1"
+    "vite-plugin-remove-console": "^0.0.7",
+    "vite-svg-loader": "^3.3.0",
+    "vue-eslint-parser": "^8.2.0"
   },
   "repository": "git@github.com:xiaoxian521/vue-pure-admin.git",
   "author": "xiaoxian521",

src/api/list.ts

@@ -0,0 +1,12 @@
+import { http } from "../utils/http";
+
+interface postType extends Promise<any> {
+  data?: object;
+  code?: number;
+  msg?: string;
+}
+
+// 卡片列表
+export const getCardList = (data?: object): postType => {
+  return http.request("post", "/getCardList", { data });
+};

src/api/mock.ts

@@ -4,8 +4,3 @@ import { http } from "../utils/http";
 export const mapJson = (params?: object) => {
   return http.request("get", "/getMapInfo", { params });
 };
-
-// echarts数据
-export const echartsJson = (params?: object) => {
-  return http.request("get", "/getEchartsInfo", { params });
-};

src/api/system.ts

@@ -0,0 +1,22 @@
+import { http } from "../utils/http";
+
+interface ResponseType extends Promise<any> {
+  data?: object;
+  code?: number;
+  msg?: string;
+}
+
+// 获取用户管理列表
+export const getUserList = (data?: object): ResponseType => {
+  return http.request("post", "/user", { data });
+};
+
+// 获取角色管理列表
+export const getRoleList = (data?: object): ResponseType => {
+  return http.request("post", "/role", { data });
+};
+
+// 获取部门管理列表
+export const getDeptList = (data?: object): ResponseType => {
+  return http.request("post", "/dept", { data });
+};

src/assets/svg/calendar.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-calendar" data-v-7be81122=""><path fill="currentColor" d="M10 3H6V1.5H5V3H3a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V4a1 1 0 00-1-1h-2V1.5h-1V3zM5 5h1V4h4v1h1V4h2v2H3V4h2v1zM3 7h10v6H3V7z" fillOpacity="0.9"></path></svg>

src/assets/svg/laptop.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-laptop" data-v-7be81122=""><path fill="currentColor" d="M2.5 12a1 1 0 01-1-1V4a1 1 0 011-1h11a1 1 0 011 1v7a1 1 0 01-1 1h-11zm0-1h11V4h-11v7zM15 13H1v1h14v-1z" fillOpacity="0.9"></path></svg>

src/assets/svg/service.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-service" data-v-7be81122=""><path fill="currentColor" d="M2.52 6.37a5.5 5.5 0 0110.98.13v4c0 .05 0 .1-.02.15A4.5 4.5 0 019 14.7H8v-1h1a3.5 3.5 0 003.4-2.7h-1.9a.5.5 0 01-.5-.5v-4c0-.28.22-.5.5-.5h1.93a4.5 4.5 0 00-8.86 0H5.5c.28 0 .5.22.5.5v4a.5.5 0 01-.5.5H3a.5.5 0 01-.5-.5v-4c0-.04 0-.09.02-.13zM12.5 7H11v3h1.5V7zm-9 0v3H5V7H3.5z" fillOpacity="0.9"></path></svg>

src/assets/svg/shop.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-shop" data-v-7be81122=""><path fill="currentColor" d="M8 1a2.5 2.5 0 00-2.5 2.5V5h-2a.5.5 0 00-.5.5v9c0 .28.22.5.5.5h9a.5.5 0 00.5-.5v-9a.5.5 0 00-.5-.5h-2V3.5A2.5 2.5 0 008 1zm1.5 5v2h1V6H12v8H4V6h1.5v2h1V6h3zm0-1h-3V3.5a1.5 1.5 0 113 0V5z" fillOpacity="0.9"></path></svg>

src/assets/svg/user_avatar.svg

@@ -0,0 +1 @@
+<svg fill="none" viewBox="0 0 16 16" width="1em" height="1em" class="t-icon t-icon-user-avatar" data-v-7be81122=""><path fill="currentColor" d="M8 10.5c1.24 0 2.42.31 3.5.88v1.12h1v-1.14a.94.94 0 00-.49-.84 8.48 8.48 0 00-8.02 0 .94.94 0 00-.49.84v1.14h1v-1.12A7.47 7.47 0 018 10.5zM10.5 6a2.5 2.5 0 11-5 0 2.5 2.5 0 015 0zm-1 0a1.5 1.5 0 10-3 0 1.5 1.5 0 003 0z"></path><path fill="currentColor" d="M2.5 1.5a1 1 0 00-1 1v11a1 1 0 001 1h11a1 1 0 001-1v-11a1 1 0 00-1-1h-11zm11 1v11h-11v-11h11z"></path></svg>

src/components/ReBarcode/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reBarcode from "./src/index.vue";
+
+export const ReBarcode = Object.assign(reBarcode, {
+  install(app: App) {
+    app.component(reBarcode.name, reBarcode);
+  }
+});
+
+export default ReBarcode;

src/components/ReBarcode/src/index.vue

@@ -0,0 +1,44 @@
+<script lang="ts">
+export default {
+  name: "ReBarcode"
+};
+</script>
+
+<script setup lang="ts">
+import JsBarcode from "jsbarcode";
+import { ref, onMounted } from "vue";
+
+const props = defineProps({
+  tag: {
+    type: String,
+    default: "canvas"
+  },
+  text: {
+    type: String,
+    default: null
+  },
+  // 完整配置 https://github.com/lindell/JsBarcode/wiki/Options
+  options: {
+    type: Object,
+    default() {
+      return {};
+    }
+  },
+  // type 相当于 options.format，如果 type 和 options.format 同时存在，type 值优先；
+  type: {
+    type: String,
+    default: "CODE128"
+  }
+});
+
+const wrapEl = ref(null);
+
+onMounted(() => {
+  const opt = { ...props.options, format: props.type };
+  JsBarcode(wrapEl.value, props.text, opt);
+});
+</script>
+
+<template>
+  <component :is="tag" ref="wrapEl" />
+</template>

src/components/ReCard/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reCard from "./src/index.vue";
+
+export const ReCard = Object.assign(reCard, {
+  install(app: App) {
+    app.component(reCard.name, reCard);
+  }
+});
+
+export default ReCard;

src/components/ReCard/src/index.vue

@@ -0,0 +1,177 @@
+<script lang="ts">
+export default {
+  name: "ReCard"
+};
+</script>
+
+<script setup lang="ts">
+import { computed, PropType } from "vue";
+import shopIcon from "/@/assets/svg/shop.svg?component";
+import laptopIcon from "/@/assets/svg/laptop.svg?component";
+import serviceIcon from "/@/assets/svg/service.svg?component";
+import calendarIcon from "/@/assets/svg/calendar.svg?component";
+import userAvatarIcon from "/@/assets/svg/user_avatar.svg?component";
+
+export interface CardProductType {
+  type: number;
+  isSetup: boolean;
+  description: string;
+  name: string;
+}
+
+const props = defineProps({
+  product: {
+    type: Object as PropType<CardProductType>
+  }
+});
+
+const emit = defineEmits(["manage-product", "delete-item"]);
+
+const handleClickManage = (product: CardProductType) => {
+  emit("manage-product", product);
+};
+
+const handleClickDelete = (product: CardProductType) => {
+  emit("delete-item", product);
+};
+
+const cardClass = computed(() => [
+  "list-card-item",
+  { "list-card-item__disabled": !props.product.isSetup }
+]);
+
+const cardLogoClass = computed(() => [
+  "list-card-item_detail--logo",
+  { "list-card-item_detail--logo__disabled": !props.product.isSetup }
+]);
+</script>
+
+<template>
+  <div :class="cardClass">
+    <div class="list-card-item_detail">
+      <el-row justify="space-between">
+        <div :class="cardLogoClass">
+          <shopIcon v-if="product.type === 1" />
+          <calendarIcon v-if="product.type === 2" />
+          <serviceIcon v-if="product.type === 3" />
+          <userAvatarIcon v-if="product.type === 4" />
+          <laptopIcon v-if="product.type === 5" />
+        </div>
+        <div class="list-card-item_detail--operation">
+          <el-tag
+            :color="product.isSetup ? '#00a870' : '#eee'"
+            effect="dark"
+            class="mx-1 list-card-item_detail--operation--tag"
+          >
+            {{ product.isSetup ? "已启用" : "已停用" }}
+          </el-tag>
+          <el-dropdown
+            trigger="click"
+            :disabled="!product.isSetup"
+            max-height="2"
+          >
+            <IconifyIconOffline icon="more-vertical" class="icon-more" />
+            <template #dropdown>
+              <el-dropdown-menu :disabled="!product.isSetup">
+                <el-dropdown-item @click="handleClickManage(product)"
+                  >管理</el-dropdown-item
+                >
+                <el-dropdown-item @click="handleClickDelete(product)"
+                  >删除</el-dropdown-item
+                >
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+        </div>
+      </el-row>
+      <p class="list-card-item_detail--name">{{ product.name }}</p>
+      <p class="list-card-item_detail--desc">{{ product.description }}</p>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss">
+$text-color-disabled: rgba(0, 0, 0, 0.26);
+
+.list-card-item {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 12px;
+  border-radius: 3px;
+  overflow: hidden;
+  cursor: pointer;
+  color: rgba(0, 0, 0, 0.6);
+
+  &_detail {
+    flex: 1;
+    background: #fff;
+    padding: 24px 32px;
+    min-height: 140px;
+
+    &--logo {
+      width: 56px;
+      height: 56px;
+      border-radius: 50%;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      background: #e0ebff;
+      font-size: 32px;
+      color: #0052d9;
+
+      &__disabled {
+        color: #a1c4ff;
+      }
+    }
+
+    &--operation {
+      display: flex;
+      height: 100%;
+
+      &--tag {
+        border: 0;
+      }
+    }
+
+    .icon-more {
+      font-size: 24px;
+      color: rgba(36, 36, 36, 1);
+    }
+
+    &--name {
+      margin: 24px 0 8px 0;
+      font-size: 16px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.9);
+    }
+
+    &--desc {
+      font-size: 12px;
+      line-height: 20px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      margin-bottom: 24px;
+      height: 40px;
+    }
+  }
+
+  &__disabled {
+    color: $text-color-disabled;
+
+    .icon-more {
+      color: $text-color-disabled;
+    }
+
+    .list-card-item_detail--name {
+      color: $text-color-disabled;
+    }
+
+    .list-card-item_detail--operation--tag {
+      color: #bababa;
+    }
+  }
+}
+</style>

src/components/ReFlowChart/src/Control.vue

@@ -24,36 +24,43 @@ let titleLists = ref([
   {
     icon: "icon-zoom-out-hs",
     text: "缩小",
+    size: "18",
     disabled: false
   },
   {
     icon: "icon-enlarge-hs",
     text: "放大",
+    size: "18",
     disabled: false
   },
   {
     icon: "icon-full-screen-hs",
     text: "适应",
+    size: "15",
     disabled: false
   },
   {
     icon: "icon-previous-hs",
     text: "上一步",
+    size: "15",
     disabled: true
   },
   {
     icon: "icon-next-step-hs",
     text: "下一步",
+    size: "17",
     disabled: true
   },
   {
     icon: "icon-download-hs",
     text: "下载图片",
+    size: "17",
     disabled: false
   },
   {
     icon: "icon-watch-hs",
     text: "查看数据",
+    size: "17",
     disabled: false
   }
 ]);
@@ -95,21 +102,29 @@ onMounted(() => {
         v-for="(item, key) in titleLists"
         :key="key"
         :title="item.text"
-        :style="{ background: focusIndex === key ? '#ccc' : '' }"
         @mouseenter.prevent="onEnter(key)"
         @mouseleave.prevent="focusIndex = -1"
       >
-        <button
-          :ref="'controlButton' + key"
-          :disabled="item.disabled"
-          :style="{
-            cursor: item.disabled === false ? 'pointer' : 'not-allowed'
-          }"
-          @click="onControl(item, key)"
+        <el-tooltip
+          :content="item.text"
+          :visible="focusIndex === key"
+          placement="right"
         >
-          <span :class="'iconfont ' + item.icon" />
-          <p>{{ item.text }}</p>
-        </button>
+          <button
+            :ref="'controlButton' + key"
+            :disabled="item.disabled"
+            :style="{
+              cursor: item.disabled === false ? 'pointer' : 'not-allowed',
+              color: item.disabled === false ? '' : '#00000040'
+            }"
+            @click="onControl(item, key)"
+          >
+            <span
+              :class="'iconfont ' + item.icon"
+              :style="{ fontSize: `${item.size}px` }"
+            />
+          </button>
+        </el-tooltip>
       </li>
     </ul>
   </div>
@@ -119,36 +134,16 @@ onMounted(() => {
 @import "./assets/iconfont/iconfont.css";
 
 .control-container {
-  position: absolute;
-  right: 20px;
   background: hsla(0, 0%, 100%, 0.8);
   box-shadow: 0 1px 4px rgb(0 0 0 / 20%);
 }
 
-.iconfont {
-  font-size: 18px;
-}
-
-.control-container p {
-  margin: 0;
-  font-size: 12px;
-}
-
-.control-container ul {
-  display: flex;
-  justify-content: space-around;
-  align-items: center;
-  margin: 2px;
-}
-
 .control-container ul li {
-  width: 60px;
+  margin: 10px;
   text-align: center;
 }
 
-.control-container ul li button {
-  border: none;
-  background-color: transparent;
-  outline: none;
+.control-container ul li span:hover {
+  color: var(--el-color-primary);
 }
 </style>

src/components/ReFlowChart/src/NodePanel.vue

@@ -54,9 +54,8 @@ const nodeDragNode = item => {
 <style scoped>
 .node-panel {
   position: absolute;
-  top: 100px;
-  left: 50px;
-  width: 70px;
+  top: 10px;
+  width: 60px;
   padding: 20px 10px;
   background-color: white;
   box-shadow: 0 0 10px 1px rgb(228, 224, 219);

src/components/ReIcon/src/iconifyIconOffline.ts

@@ -18,16 +18,19 @@ import Close from "@iconify-icons/ep/close";
 import CloseBold from "@iconify-icons/ep/close-bold";
 import Bell from "@iconify-icons/ep/bell";
 import Guide from "@iconify-icons/ep/guide";
-import User from "@iconify-icons/ep/user";
 import Iphone from "@iconify-icons/ep/iphone";
 import Location from "@iconify-icons/ep/location";
 import Tickets from "@iconify-icons/ep/tickets";
 import OfficeBuilding from "@iconify-icons/ep/office-building";
 import Notebook from "@iconify-icons/ep/notebook";
 import Rank from "@iconify-icons/ep/rank";
-import videoPlay from "@iconify-icons/ep/video-play";
+import VideoPlay from "@iconify-icons/ep/video-play";
 import Monitor from "@iconify-icons/ep/monitor";
 import Search from "@iconify-icons/ep/search";
+import Refresh from "@iconify-icons/ep/refresh";
+import EditPen from "@iconify-icons/ep/edit-pen";
+import Delete from "@iconify-icons/ep/delete";
+import More from "@iconify-icons/ep/more-filled";
 addIcon("check", Check);
 addIcon("menu", Menu);
 addIcon("home-filled", HomeFilled);
@@ -44,50 +47,103 @@ addIcon("close", Close);
 addIcon("close-bold", CloseBold);
 addIcon("bell", Bell);
 addIcon("guide", Guide);
-addIcon("user", User);
 addIcon("iphone", Iphone);
 addIcon("location", Location);
 addIcon("tickets", Tickets);
 addIcon("office-building", OfficeBuilding);
 addIcon("notebook", Notebook);
-addIcon("video-play", videoPlay);
+addIcon("video-play", VideoPlay);
 addIcon("rank", Rank);
 addIcon("monitor", Monitor);
 addIcon("search", Search);
+addIcon("refresh", Refresh);
+addIcon("edits", EditPen);
+addIcon("delete", Delete);
+addIcon("more", More);
 
 // remixicon
-import arrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
-import arrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
-import logoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
-import nodeTree from "@iconify-icons/ri/node-tree";
-import ubuntuFill from "@iconify-icons/ri/ubuntu-fill";
-import questionLine from "@iconify-icons/ri/question-line";
-import checkboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
-import informationLine from "@iconify-icons/ri/information-line";
-import closeCircleLine from "@iconify-icons/ri/close-circle-line";
-import arrowUpLine from "@iconify-icons/ri/arrow-up-line";
-import arrowDownLine from "@iconify-icons/ri/arrow-down-line";
-import bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
-addIcon("arrow-right-s-line", arrowRightSLine);
-addIcon("arrow-left-s-line", arrowLeftSLine);
-addIcon("logout-circle-r-line", logoutCircleRLine);
-addIcon("node-tree", nodeTree);
-addIcon("ubuntu-fill", ubuntuFill);
-addIcon("question-line", questionLine);
-addIcon("checkbox-circle-line", checkboxCircleLine);
-addIcon("information-line", informationLine);
-addIcon("close-circle-line", closeCircleLine);
-addIcon("arrow-up-line", arrowUpLine);
-addIcon("arrow-down-line", arrowDownLine);
-addIcon("bookmark-2-line", bookmark2Line);
+import ArrowRightSLine from "@iconify-icons/ri/arrow-right-s-line";
+import ArrowLeftSLine from "@iconify-icons/ri/arrow-left-s-line";
+import LogoutCircleRLine from "@iconify-icons/ri/logout-circle-r-line";
+import NodeTree from "@iconify-icons/ri/node-tree";
+import UbuntuFill from "@iconify-icons/ri/ubuntu-fill";
+import QuestionLine from "@iconify-icons/ri/question-line";
+import CheckboxCircleLine from "@iconify-icons/ri/checkbox-circle-line";
+import InformationLine from "@iconify-icons/ri/information-line";
+import CloseCircleLine from "@iconify-icons/ri/close-circle-line";
+import ArrowUpLine from "@iconify-icons/ri/arrow-up-line";
+import ArrowDownLine from "@iconify-icons/ri/arrow-down-line";
+import Bookmark2Line from "@iconify-icons/ri/bookmark-2-line";
+import AddFill from "@iconify-icons/ri/add-circle-line";
+import ListCheck from "@iconify-icons/ri/list-check";
+import More2Fill from "@iconify-icons/ri/more-2-fill";
+import Database from "@iconify-icons/ri/database-2-line";
+import Dict from "@iconify-icons/ri/git-repository-line";
+import Card from "@iconify-icons/ri/bank-card-line";
+import Reset from "@iconify-icons/ri/restart-line";
+import Dept from "@iconify-icons/ri/git-branch-line";
+import Password from "@iconify-icons/ri/lock-password-line";
+import Ppt from "@iconify-icons/ri/file-ppt-2-line";
+import TerminalWindowLine from "@iconify-icons/ri/terminal-window-line";
+import User from "@iconify-icons/ri/user-3-fill";
+import Lock from "@iconify-icons/ri/lock-fill";
+addIcon("arrow-right-s-line", ArrowRightSLine);
+addIcon("arrow-left-s-line", ArrowLeftSLine);
+addIcon("logout-circle-r-line", LogoutCircleRLine);
+addIcon("node-tree", NodeTree);
+addIcon("ubuntu-fill", UbuntuFill);
+addIcon("question-line", QuestionLine);
+addIcon("checkbox-circle-line", CheckboxCircleLine);
+addIcon("information-line", InformationLine);
+addIcon("close-circle-line", CloseCircleLine);
+addIcon("arrow-up-line", ArrowUpLine);
+addIcon("arrow-down-line", ArrowDownLine);
+addIcon("bookmark-2-line", Bookmark2Line);
+addIcon("add", AddFill);
+addIcon("list-check", ListCheck);
+addIcon("more-vertical", More2Fill);
+addIcon("database", Database);
+addIcon("dict", Dict);
+addIcon("card", Card);
+addIcon("reset", Reset);
+addIcon("dept", Dept);
+addIcon("password", Password);
+addIcon("ppt", Ppt);
+addIcon("terminal-window-line", TerminalWindowLine);
+addIcon("user", User);
+addIcon("lock", Lock);
 
 // Font Awesome 4
-import faUser from "@iconify-icons/fa/user";
-import faLock from "@iconify-icons/fa/lock";
-import faSignOut from "@iconify-icons/fa/sign-out";
-addIcon("fa-user", faUser);
-addIcon("fa-lock", faLock);
-addIcon("fa-sign-out", faSignOut);
+import FaUser from "@iconify-icons/fa/user";
+import FaLock from "@iconify-icons/fa/lock";
+import FaSignOut from "@iconify-icons/fa/sign-out";
+addIcon("fa-user", FaUser);
+addIcon("fa-lock", FaLock);
+addIcon("fa-sign-out", FaSignOut);
+
+// Unicons
+import Import from "@iconify-icons/uil/import";
+import Export from "@iconify-icons/uil/export";
+import ArrowsShrinkV from "@iconify-icons/uil/arrows-shrink-v";
+addIcon("import", Import);
+addIcon("export", Export);
+addIcon("density", ArrowsShrinkV);
+
+// fluent
+import Role from "@iconify-icons/fluent/people-swap-28-filled";
+import FlUser from "@iconify-icons/fluent/person-12-filled";
+addIcon("role", Role);
+addIcon("flUser", FlUser);
+
+// Material Design Icons
+import Expand from "@iconify-icons/mdi/arrow-expand-down";
+import UnExpand from "@iconify-icons/mdi/arrow-expand-right";
+addIcon("expand", Expand);
+addIcon("unExpand", UnExpand);
+
+// carbon
+import LocationCompany from "@iconify-icons/carbon/location-company";
+addIcon("location-company", LocationCompany);
 
 // Iconify Icon在Vue里离线使用（用于内网环境）https://docs.iconify.design/icon-components/vue/offline.html
 export default defineComponent({

src/components/ReIcon/src/iconifyIconOnline.ts

@@ -9,11 +9,6 @@ export default defineComponent({
     icon: {
       type: String,
       default: ""
-    },
-    // default element plus icon
-    type: {
-      type: String,
-      default: "ep:"
     }
   },
   render() {
@@ -21,7 +16,7 @@ export default defineComponent({
     return h(
       IconifyIcon,
       {
-        icon: `${this.type}${this.icon}`,
+        icon: `${this.icon}`,
         ...attrs
       },
       {

src/components/ReIcon/src/select.vue

@@ -1,10 +1,19 @@
 <script setup lang="ts">
 import { cloneDeep } from "lodash-unified";
-import { ref, computed, CSSProperties } from "vue";
+import { ref, computed, CSSProperties, toRef, watch } from "vue";
 import { IconJson } from "/@/components/ReIcon/data";
 type ParameterCSSProperties = (item?: string) => CSSProperties | undefined;
 
-let inputValue = ref("ep:add-location");
+const props = defineProps({
+  modelValue: {
+    require: false,
+    type: String
+  }
+});
+const emit = defineEmits<{ (e: "update:modelValue", v: string) }>();
+
+let visible = ref(false);
+let inputValue = toRef(props, "modelValue");
 let iconList = ref(IconJson);
 let icon = ref("add-location");
 let currentActiveType = ref("ep:");
@@ -35,15 +44,15 @@ let tabsList = [
 let pageList = computed(() => {
   if (currentPage.value === 1) {
     return copyIconList[currentActiveType.value]
-      .slice(currentPage.value - 1, pageSize.value)
-      .filter(v => v.includes(filterValue.value));
+      .filter(v => v.includes(filterValue.value))
+      .slice(currentPage.value - 1, pageSize.value);
   } else {
     return copyIconList[currentActiveType.value]
+      .filter(v => v.includes(filterValue.value))
       .slice(
         pageSize.value * (currentPage.value - 1),
         pageSize.value * (currentPage.value - 1) + pageSize.value
-      )
-      .filter(v => v.includes(filterValue.value));
+      );
   }
 });
 
@@ -51,7 +60,8 @@ const iconItemStyle = computed((): ParameterCSSProperties => {
   return item => {
     if (inputValue.value === currentActiveType.value + item) {
       return {
-        borderColor: "var(--el-color-primary)"
+        borderColor: "var(--el-color-primary)",
+        color: "var(--el-color-primary)"
       };
     }
   };
@@ -60,31 +70,68 @@ const iconItemStyle = computed((): ParameterCSSProperties => {
 function handleClick({ props }) {
   currentPage.value = 1;
   currentActiveType.value = props.name;
-  inputValue.value =
-    currentActiveType.value + iconList.value[currentActiveType.value][0];
+  emit(
+    "update:modelValue",
+    currentActiveType.value + iconList.value[currentActiveType.value][0]
+  );
   icon.value = iconList.value[currentActiveType.value][0];
 }
 
 function onChangeIcon(item) {
-  inputValue.value = currentActiveType.value + item;
   icon.value = item;
+  emit("update:modelValue", currentActiveType.value + item);
+  visible.value = false;
 }
 
 function onCurrentChange(page) {
   currentPage.value = page;
 }
+
+watch(
+  () => {
+    return props.modelValue;
+  },
+  () => {
+    if (props.modelValue) {
+      currentActiveType.value = props.modelValue.substring(
+        0,
+        props.modelValue.indexOf(":") + 1
+      );
+      icon.value = props.modelValue.substring(
+        props.modelValue.indexOf(":") + 1
+      );
+    }
+  }
+);
+watch(
+  () => {
+    return filterValue.value;
+  },
+  () => {
+    currentPage.value = 1;
+  }
+);
 </script>
 
 <template>
   <div class="selector w-350px">
     <el-input v-model="inputValue" disabled>
       <template #append>
-        <el-popover :width="350" trigger="click" popper-class="pure-popper">
+        <el-popover
+          :width="350"
+          trigger="click"
+          popper-class="pure-popper"
+          :popper-options="{
+            placement: 'auto'
+          }"
+          :visible="visible"
+        >
           <template #reference>
             <div
               class="w-40px h-32px cursor-pointer flex justify-center items-center"
+              @click="visible = !visible"
             >
-              <IconifyIconOnline :icon="icon" :type="currentActiveType" />
+              <IconifyIconOnline :icon="currentActiveType + icon" />
             </div>
           </template>
 
@@ -114,7 +161,7 @@ function onCurrentChange(page) {
                     :style="iconItemStyle(item)"
                     @click="onChangeIcon(item)"
                   >
-                    <IconifyIconOnline :icon="item" :type="currentActiveType" />
+                    <IconifyIconOnline :icon="currentActiveType + item" />
                   </li>
                 </ul>
               </el-scrollbar>
@@ -150,6 +197,9 @@ function onCurrentChange(page) {
 .icon-item {
   &:hover {
     border-color: var(--el-color-primary);
+    color: var(--el-color-primary);
+    transition: all 0.4s;
+    transform: scaleX(1.05);
   }
 }
 

src/components/ReImageVerify/index.ts

@@ -0,0 +1,12 @@
+import { App } from "vue";
+import reImageVerify from "./src/index.vue";
+
+export const ReImageVerify = Object.assign(reImageVerify, {
+  install(app: App) {
+    app.component(reImageVerify.name, reImageVerify);
+  }
+});
+
+export default {
+  ReImageVerify
+};

src/components/ReImageVerify/src/hooks.ts

@@ -0,0 +1,85 @@
+import { ref, onMounted } from "vue";
+
+/**
+ * 绘制图形验证码
+ * @param width - 图形宽度
+ * @param height - 图形高度
+ */
+export const useImageVerify = (width = 120, 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 + 15, 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;
+}

src/components/ReImageVerify/src/index.vue

@@ -0,0 +1,48 @@
+<script lang="ts">
+export default {
+  name: "ReImageVerify"
+};
+</script>
+
+<script setup lang="ts">
+import { watch } from "vue";
+import { useImageVerify } from "./hooks";
+
+interface Props {
+  code?: string;
+}
+
+interface Emits {
+  (e: "update:code", code: string): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  code: ""
+});
+
+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>
+
+<template>
+  <canvas
+    ref="domRef"
+    width="120"
+    height="40"
+    class="cursor-pointer"
+    @click="getImgCode"
+  />
+</template>

src/components/ReQrcode/index.ts

@@ -0,0 +1,10 @@
+import { App } from "vue";
+import reQrcode from "./src/index";
+
+export const ReQrcode = Object.assign(reQrcode, {
+  install(app: App) {
+    app.component(reQrcode.name, reQrcode);
+  }
+});
+
+export default ReQrcode;

src/components/ReQrcode/src/index.scss

@@ -0,0 +1,8 @@
+.qrcode {
+  &--disabled {
+    background: rgba(255, 255, 255, 0.95);
+    & > div {
+      transform: translate(-50%, -50%);
+    }
+  }
+}

src/components/ReQrcode/src/index.tsx

@@ -0,0 +1,262 @@
+import {
+  ref,
+  unref,
+  watch,
+  nextTick,
+  computed,
+  PropType,
+  defineComponent
+} from "vue";
+import "./index.scss";
+import { isString } from "/@/utils/is";
+import { cloneDeep } from "lodash-unified";
+import { propTypes } from "/@/utils/propTypes";
+import { IconifyIconOffline } from "../../ReIcon";
+import QRCode, { QRCodeRenderersOptions } from "qrcode";
+
+interface QrcodeLogo {
+  src?: string;
+  logoSize?: number;
+  bgColor?: string;
+  borderSize?: number;
+  crossOrigin?: string;
+  borderRadius?: number;
+  logoRadius?: number;
+}
+
+const props = {
+  // img 或者 canvas,img不支持logo嵌套
+  tag: propTypes.string
+    .validate((v: string) => ["canvas", "img"].includes(v))
+    .def("canvas"),
+  // 二维码内容
+  text: {
+    type: [String, Array] as PropType<string | Recordable[]>,
+    default: null
+  },
+  // qrcode.js配置项
+  options: {
+    type: Object as PropType<QRCodeRenderersOptions>,
+    default: (): QRCodeRenderersOptions => ({})
+  },
+  // 宽度
+  width: propTypes.number.def(200),
+  // logo
+  logo: {
+    type: [String, Object] as PropType<Partial<QrcodeLogo> | string>,
+    default: (): QrcodeLogo | string => ""
+  },
+  // 是否过期
+  disabled: propTypes.bool.def(false),
+  // 过期提示内容
+  disabledText: propTypes.string.def("")
+};
+
+export default defineComponent({
+  name: "ReQrcode",
+  props,
+  emits: ["done", "click", "disabled-click"],
+  setup(props, { emit }) {
+    const { toCanvas, toDataURL } = QRCode;
+    const loading = ref(true);
+    const wrapRef = ref<Nullable<HTMLCanvasElement | HTMLImageElement>>(null);
+    const renderText = computed(() => String(props.text));
+    const wrapStyle = computed(() => {
+      return {
+        width: props.width + "px",
+        height: props.width + "px"
+      };
+    });
+    const initQrcode = async () => {
+      await nextTick();
+      const options = cloneDeep(props.options || {});
+      if (props.tag === "canvas") {
+        // 容错率，默认对内容少的二维码采用高容错率，内容多的二维码采用低容错率
+        options.errorCorrectionLevel =
+          options.errorCorrectionLevel ||
+          getErrorCorrectionLevel(unref(renderText));
+        const _width: number = await getOriginWidth(unref(renderText), options);
+        options.scale =
+          props.width === 0 ? undefined : (props.width / _width) * 4;
+        const canvasRef: HTMLCanvasElement = await toCanvas(
+          unref(wrapRef) as HTMLCanvasElement,
+          unref(renderText),
+          options
+        );
+        if (props.logo) {
+          const url = await createLogoCode(canvasRef);
+          emit("done", url);
+          loading.value = false;
+        } else {
+          emit("done", canvasRef.toDataURL());
+          loading.value = false;
+        }
+      } else {
+        const url = await toDataURL(renderText.value, {
+          errorCorrectionLevel: "H",
+          width: props.width,
+          ...options
+        });
+        (unref(wrapRef) as HTMLImageElement).src = url;
+        emit("done", url);
+        loading.value = false;
+      }
+    };
+    watch(
+      () => renderText.value,
+      val => {
+        if (!val) return;
+        initQrcode();
+      },
+      {
+        deep: true,
+        immediate: true
+      }
+    );
+    const createLogoCode = (canvasRef: HTMLCanvasElement) => {
+      const canvasWidth = canvasRef.width;
+      const logoOptions: QrcodeLogo = Object.assign(
+        {
+          logoSize: 0.15,
+          bgColor: "#ffffff",
+          borderSize: 0.05,
+          crossOrigin: "anonymous",
+          borderRadius: 8,
+          logoRadius: 0
+        },
+        isString(props.logo) ? {} : props.logo
+      );
+      const {
+        logoSize = 0.15,
+        bgColor = "#ffffff",
+        borderSize = 0.05,
+        crossOrigin = "anonymous",
+        borderRadius = 8,
+        logoRadius = 0
+      } = logoOptions;
+      const logoSrc = isString(props.logo) ? props.logo : props.logo.src;
+      const logoWidth = canvasWidth * logoSize;
+      const logoXY = (canvasWidth * (1 - logoSize)) / 2;
+      const logoBgWidth = canvasWidth * (logoSize + borderSize);
+      const logoBgXY = (canvasWidth * (1 - logoSize - borderSize)) / 2;
+      const ctx = canvasRef.getContext("2d");
+      if (!ctx) return;
+      // logo 底色
+      canvasRoundRect(ctx)(
+        logoBgXY,
+        logoBgXY,
+        logoBgWidth,
+        logoBgWidth,
+        borderRadius
+      );
+      ctx.fillStyle = bgColor;
+      ctx.fill();
+      // logo
+      const image = new Image();
+      if (crossOrigin || logoRadius) {
+        image.setAttribute("crossOrigin", crossOrigin);
+      }
+      (image as any).src = logoSrc;
+      // 使用image绘制可以避免某些跨域情况
+      const drawLogoWithImage = (image: HTMLImageElement) => {
+        ctx.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+      };
+      // 使用canvas绘制以获得更多的功能
+      const drawLogoWithCanvas = (image: HTMLImageElement) => {
+        const canvasImage = document.createElement("canvas");
+        canvasImage.width = logoXY + logoWidth;
+        canvasImage.height = logoXY + logoWidth;
+        const imageCanvas = canvasImage.getContext("2d");
+        if (!imageCanvas || !ctx) return;
+        imageCanvas.drawImage(image, logoXY, logoXY, logoWidth, logoWidth);
+        canvasRoundRect(ctx)(logoXY, logoXY, logoWidth, logoWidth, logoRadius);
+        if (!ctx) return;
+        const fillStyle = ctx.createPattern(canvasImage, "no-repeat");
+        if (fillStyle) {
+          ctx.fillStyle = fillStyle;
+          ctx.fill();
+        }
+      };
+      // 将 logo绘制到 canvas上
+      return new Promise((resolve: any) => {
+        image.onload = () => {
+          logoRadius ? drawLogoWithCanvas(image) : drawLogoWithImage(image);
+          resolve(canvasRef.toDataURL());
+        };
+      });
+    };
+    // 得到原QrCode的大小，以便缩放得到正确的QrCode大小
+    const getOriginWidth = async (
+      content: string,
+      options: QRCodeRenderersOptions
+    ) => {
+      const _canvas = document.createElement("canvas");
+      await toCanvas(_canvas, content, options);
+      return _canvas.width;
+    };
+    // 对于内容少的QrCode，增大容错率
+    const getErrorCorrectionLevel = (content: string) => {
+      if (content.length > 36) {
+        return "M";
+      } else if (content.length > 16) {
+        return "Q";
+      } else {
+        return "H";
+      }
+    };
+    // 用于绘制圆角
+    const canvasRoundRect = (ctx: CanvasRenderingContext2D) => {
+      return (x: number, y: number, w: number, h: number, r: number) => {
+        const minSize = Math.min(w, h);
+        if (r > minSize / 2) {
+          r = minSize / 2;
+        }
+        ctx.beginPath();
+        ctx.moveTo(x + r, y);
+        ctx.arcTo(x + w, y, x + w, y + h, r);
+        ctx.arcTo(x + w, y + h, x, y + h, r);
+        ctx.arcTo(x, y + h, x, y, r);
+        ctx.arcTo(x, y, x + w, y, r);
+        ctx.closePath();
+        return ctx;
+      };
+    };
+    const clickCode = () => {
+      emit("click");
+    };
+    const disabledClick = () => {
+      emit("disabled-click");
+    };
+    return () => (
+      <>
+        <div
+          v-loading={unref(loading)}
+          class="qrcode relative inline-block"
+          style={unref(wrapStyle)}
+        >
+          {props.tag === "canvas" ? (
+            <canvas ref={wrapRef} onClick={clickCode}></canvas>
+          ) : (
+            <img ref={wrapRef} onClick={clickCode}></img>
+          )}
+          {props.disabled && (
+            <div
+              class="qrcode--disabled absolute top-0 left-0 flex w-full h-full items-center justify-center"
+              onClick={disabledClick}
+            >
+              <div class="absolute top-[50%] left-[50%] font-bold">
+                <IconifyIconOffline
+                  class="cursor-pointer outline-none"
+                  icon="refresh-right"
+                  width="30"
+                  color="var(--el-color-primary)"
+                />
+                <div>{props.disabledText}</div>
+              </div>
+            </div>
+          )}
+        </div>
+      </>
+    );
+  }
+});

src/components/ReSplitPane/iconfont/iconfont.css

@@ -0,0 +1,22 @@
+@font-face {
+  font-family: "iconfont"; /* Project id 3268330 */
+  src: url("iconfont.woff2?t=1647939915215") format("woff2"),
+    url("iconfont.woff?t=1647939915215") format("woff"),
+    url("iconfont.ttf?t=1647939915215") format("truetype");
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-size: 16px;
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-tuozhuai1:before {
+  content: "\e647";
+}
+
+.icon-tuozhuai1-copy:before {
+  content: "\eda3";
+}

src/components/ReSplitPane/iconfont/iconfont.js

@@ -0,0 +1,66 @@
+!(function (e) {
+  var t,
+    n,
+    c,
+    o,
+    s,
+    i =
+      '<svg><symbol id="icon-tuozhuai1" viewBox="0 0 1024 1024"><path d="M576 896c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m256-192c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z m-256 0c0-35.2 28.8-64 64-64s64 28.8 64 64-28.8 64-64 64-64-28.8-64-64z" fill="#2c2c2c" ></path></symbol><symbol id="icon-tuozhuai1-copy" viewBox="0 0 1024 1024"><path d="M128 576c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256.00000001c35.2 0 64 28.8 64 63.99999999s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-63.99999999z m0-256.00000001c35.2 0 64 28.8 64 64s-28.8 64-64 63.99999999-64-28.8-64-63.99999999 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m192 256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z m0-256c35.2 0 64 28.8 64 64s-28.8 64-64 64-64-28.8-64-64 28.8-64 64-64z" fill="#2c2c2c" ></path></symbol></svg>',
+    d = (d = document.getElementsByTagName("script"))[
+      d.length - 1
+    ].getAttribute("data-injectcss"),
+    m = function (e, t) {
+      t.parentNode.insertBefore(e, t);
+    };
+  if (d && !e.__iconfont__svg__cssinject__) {
+    e.__iconfont__svg__cssinject__ = !0;
+    try {
+      document.write(
+        "<style>.svgfont {display: inline-block;width: 1em;height: 1em;fill: currentColor;vertical-align: -0.1em;font-size:16px;}</style>"
+      );
+    } catch (e) {
+      console && console.log(e);
+    }
+  }
+  function l() {
+    s || ((s = !0), c());
+  }
+  function a() {
+    try {
+      o.documentElement.doScroll("left");
+    } catch (e) {
+      return void setTimeout(a, 50);
+    }
+    l();
+  }
+  (t = function () {
+    var e,
+      t = document.createElement("div");
+    (t.innerHTML = i),
+      (i = null),
+      (t = t.getElementsByTagName("svg")[0]) &&
+        (t.setAttribute("aria-hidden", "true"),
+        (t.style.position = "absolute"),
+        (t.style.width = 0),
+        (t.style.height = 0),
+        (t.style.overflow = "hidden"),
+        // eslint-disable-next-line no-self-assign
+        (t = t),
+        (e = document.body).firstChild ? m(t, e.firstChild) : e.appendChild(t));
+  }),
+    document.addEventListener
+      ? ~["complete", "loaded", "interactive"].indexOf(document.readyState)
+        ? setTimeout(t, 0)
+        : ((n = function () {
+            document.removeEventListener("DOMContentLoaded", n, !1), t();
+          }),
+          document.addEventListener("DOMContentLoaded", n, !1))
+      : document.attachEvent &&
+        ((c = t),
+        (o = e.document),
+        (s = !1),
+        a(),
+        (o.onreadystatechange = function () {
+          "complete" == o.readyState && ((o.onreadystatechange = null), l());
+        }));
+})(window);

src/components/ReSplitPane/iconfont/iconfont.json

@@ -0,0 +1,23 @@
+{
+  "id": "3268330",
+  "name": "split",
+  "font_family": "iconfont",
+  "css_prefix_text": "icon-",
+  "description": "",
+  "glyphs": [
+    {
+      "icon_id": "22378774",
+      "name": "拖拽",
+      "font_class": "tuozhuai1",
+      "unicode": "e647",
+      "unicode_decimal": 58951
+    },
+    {
+      "icon_id": "23570521",
+      "name": "拖拽",
+      "font_class": "tuozhuai1-copy",
+      "unicode": "eda3",
+      "unicode_decimal": 60835
+    }
+  ]
+}

src/components/ReSplitPane/index.tsx

@@ -35,16 +35,12 @@ export default defineComponent({
       props.splitSet?.split
     ]);
 
-    const userSelect = computed(() => {
-      return active.value ? "none" : "";
-    });
-
     const cursor = computed(() => {
       return active.value
         ? props.splitSet?.split === "vertical"
-          ? "col-resize"
-          : "row-resize"
-        : "";
+          ? { cursor: "col-resize" }
+          : { cursor: "row-resize" }
+        : { cursor: "default" };
     });
 
     const onClick = (): void => {
@@ -109,7 +105,7 @@ export default defineComponent({
       <>
         <div
           class="vue-splitter-container clearfix"
-          style={(unref(cursor), unref(userSelect))}
+          style={unref(cursor)}
           onMouseup={() => onMouseUp()}
           onMousemove={() => onMouseMove(event)}
         >

src/components/ReSplitPane/resizer.css

@@ -1,3 +1,5 @@
+@import "./iconfont/iconfont.css";
+
 .splitter-pane-resizer {
   box-sizing: border-box;
   background: #000;
@@ -9,19 +11,37 @@
 }
 
 .splitter-pane-resizer.horizontal {
-  height: 11px;
-  margin: -5px 0;
-  border-top: 5px solid rgb(255 255 255 / 0%);
-  border-bottom: 5px solid rgb(255 255 255 / 0%);
-  cursor: row-resize;
+  height: 6px;
   width: 100%;
+  background: #e5e6eb;
+  cursor: row-resize;
+}
+
+.splitter-pane-resizer.horizontal:before {
+  content: "\eda3";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
 }
 
 .splitter-pane-resizer.vertical {
-  width: 11px;
+  width: 6px;
   height: 100%;
-  margin-left: -5px;
-  border-left: 5px solid rgb(255 255 255 / 0%);
-  border-right: 5px solid rgb(255 255 255 / 0%);
+  background: #e5e6eb;
   cursor: col-resize;
 }
+
+.splitter-pane-resizer.vertical:before {
+  content: "\e647";
+  font-family: "iconfont";
+  font-size: 13px;
+  color: #000;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}

src/components/ReTable/README.md

@@ -0,0 +1,16 @@
+## 一款基于`element-plus`表格封装的`table-crud`组件库，采用`tsx`语法编写，通过一些灵活的配置项即可实现增删改查
+
+### wait todo
+
+- 搜索组件
+- 表格组件
+- 弹框组件
+- form 组件
+
+### completed
+
+- 操作栏组件
+
+目前只完成了操作栏组件，后续有时间慢慢完善对应组件，因为作者比较忙，暂无具体计划完成时间，忘谅解，当然非常欢迎 pr，等这些组件全部完成后，我会单独抽离成`npm`包的形式发布。
+
+注意：该组件库为了快速成型，内部依赖了`unocss`。

src/components/ReTable/index.ts

@@ -0,0 +1,8 @@
+import { App } from "vue";
+import epTableProBar from "./src/bar";
+
+export const EpTableProBar = Object.assign(epTableProBar, {
+  install(app: App) {
+    app.component(epTableProBar.name, epTableProBar);
+  }
+});

src/components/ReTable/src/bar.tsx

@@ -0,0 +1,216 @@
+import { emitter } from "/@/utils/mitt";
+import { IconifyIconOffline } from "../../ReIcon";
+import { defineComponent, ref, computed, PropType } from "vue";
+import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
+
+export const loadingSvg = `
+  <path class="path" d="
+    M 30 15
+    L 28 17
+    M 25.61 25.61
+    A 15 15, 0, 0, 1, 15 30
+    A 15 15, 0, 1, 1, 27.99 7.5
+    L 15 15
+  "
+    style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+  />
+`;
+
+const props = {
+  // 头部最左边的标题
+  title: {
+    type: String,
+    default: "列表"
+  },
+  // 表格数据
+  dataList: {
+    type: Array,
+    default: () => {
+      return [];
+    }
+  },
+  // 对于树形表格，如果想启用展开和折叠功能，传入当前表格的ref即可
+  tableRef: {
+    type: Object as PropType<any>,
+    default() {
+      return {};
+    }
+  },
+  // 是否显示加载动画，默认false 不加载
+  loading: {
+    type: Boolean,
+    default: false
+  }
+};
+
+export default defineComponent({
+  name: "epTableProBar",
+  props,
+  emits: ["refresh"],
+  setup(props, { emit, slots, attrs }) {
+    const buttonRef = ref();
+    const checkList = ref([]);
+    const currentWidth = ref(0);
+    const size = ref("default");
+    const isExpandAll = ref(true);
+
+    const getDropdownItemStyle = computed(() => {
+      return s => {
+        return {
+          background:
+            s === size.value ? useEpThemeStoreHook().epThemeColor : "",
+          color: s === size.value ? "#f4f4f5" : "#000"
+        };
+      };
+    });
+
+    function onExpand() {
+      isExpandAll.value = !isExpandAll.value;
+      toggleRowExpansionAll(props.dataList, isExpandAll.value);
+    }
+
+    function toggleRowExpansionAll(data, isExpansion) {
+      data.forEach(item => {
+        props.tableRef.toggleRowExpansion(item, isExpansion);
+        if (item.children !== undefined && item.children !== null) {
+          toggleRowExpansionAll(item.children, isExpansion);
+        }
+      });
+    }
+
+    // 监听容器
+    emitter.on("resize", ({ detail }) => {
+      const { width } = detail;
+      currentWidth.value = width;
+    });
+
+    const dropdown = {
+      dropdown: () => (
+        <el-dropdown-menu class="translation">
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("large")}
+            onClick={() => (size.value = "large")}
+          >
+            松散
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("default")}
+            onClick={() => (size.value = "default")}
+          >
+            默认
+          </el-dropdown-item>
+          <el-dropdown-item
+            style={getDropdownItemStyle.value("small")}
+            onClick={() => (size.value = "small")}
+          >
+            紧凑
+          </el-dropdown-item>
+        </el-dropdown-menu>
+      )
+    };
+
+    const reference = {
+      reference: () => (
+        <IconifyIconOffline
+          class="cursor-pointer outline-none"
+          icon="setting"
+          width="16"
+          color="#606266"
+          onMouseover={e => (buttonRef.value = e.currentTarget)}
+        />
+      )
+    };
+
+    return () => (
+      <>
+        <div
+          {...attrs}
+          class="w-99/100 mt-6 p-2 bg-white"
+          v-loading={props.loading}
+          element-loading-svg={loadingSvg}
+          element-loading-svg-view-box="-10, -10, 50, 50"
+        >
+          <div class="flex justify-between w-full h-60px p-4">
+            <p class="font-bold">
+              {currentWidth.value > 390 ? props.title : "列表"}
+            </p>
+            <div class="flex items-center justify-around">
+              <div class="flex mr-4">{slots?.buttons()}</div>
+              {props.tableRef?.size ? (
+                <>
+                  <el-tooltip
+                    effect="dark"
+                    content={isExpandAll.value ? "折叠" : "展开"}
+                    placement="top"
+                  >
+                    <IconifyIconOffline
+                      class="cursor-pointer outline-none"
+                      icon={isExpandAll.value ? "unExpand" : "expand"}
+                      width="16"
+                      color="#606266"
+                      onClick={() => onExpand()}
+                    />
+                  </el-tooltip>
+                  <el-divider direction="vertical" />
+                </>
+              ) : undefined}
+              <el-tooltip effect="dark" content="刷新" placement="top">
+                <IconifyIconOffline
+                  class="cursor-pointer outline-none"
+                  icon="refresh-right"
+                  width="16"
+                  color="#606266"
+                  onClick={() => emit("refresh")}
+                />
+              </el-tooltip>
+              <el-divider direction="vertical" />
+
+              <el-tooltip effect="dark" content="密度" placement="top">
+                <el-dropdown v-slots={dropdown} trigger="click">
+                  <IconifyIconOffline
+                    class="cursor-pointer outline-none"
+                    icon="density"
+                    width="16"
+                    color="#606266"
+                  />
+                </el-dropdown>
+              </el-tooltip>
+              <el-divider direction="vertical" />
+
+              <el-popover v-slots={reference} width="200" trigger="click">
+                <el-checkbox-group v-model={checkList.value}>
+                  <el-checkbox label="序号列" />
+                  <el-checkbox label="勾选列" />
+                </el-checkbox-group>
+              </el-popover>
+            </div>
+
+            <el-tooltip
+              popper-options={{
+                modifiers: [
+                  {
+                    name: "computeStyles",
+                    options: {
+                      adaptive: false,
+                      enabled: false
+                    }
+                  }
+                ]
+              }}
+              placement="top"
+              virtual-ref={buttonRef.value}
+              virtual-triggering
+              trigger="hover"
+              content="列设置"
+            />
+          </div>
+          {props.dataList.length > 0 ? (
+            slots.default({ size: size.value, checkList: checkList.value })
+          ) : (
+            <el-empty description="暂无数据" />
+          )}
+        </div>
+      </>
+    );
+  }
+});

src/layout/components/navbar.vue

@@ -23,14 +23,19 @@ const {
   changeTitle,
   toggleSideBar,
   pureApp,
-  usename,
-  getDropdownItemStyle
+  username,
+  avatarsStyle,
+  getDropdownItemStyle,
+  changeWangeditorLanguage
 } = useNav();
 
 watch(
   () => locale.value,
   () => {
     changeTitle(route.meta);
+    locale.value === "en"
+      ? changeWangeditorLanguage(locale.value)
+      : changeWangeditorLanguage("zh-CN");
   }
 );
 
@@ -93,8 +98,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">
@@ -169,7 +174,6 @@ function translationEn() {
     }
 
     .el-dropdown-link {
-      width: 100px;
       height: 48px;
       padding: 10px;
       display: flex;

src/layout/components/panel/index.vue

@@ -54,7 +54,7 @@ emitter.on("openPanel", () => {
 
 .right-panel {
   width: 100%;
-  max-width: 300px;
+  max-width: 315px;
   height: 100vh;
   position: fixed;
   top: 0;
@@ -105,8 +105,8 @@ emitter.on("openPanel", () => {
 
 .right-panel-items {
   margin-top: 60px;
-  height: 100vh;
-  overflow: auto;
+  height: calc(100vh - 60px);
+  overflow-y: auto;
 }
 
 .project-configuration {

src/layout/components/search/components/SearchModal.vue

@@ -68,7 +68,7 @@ function search() {
   resultOptions.value = flatMenusData.filter(
     menu =>
       keyword.value &&
-      transformI18n(menu.meta?.title, menu.meta?.i18n)
+      transformI18n(menu.meta?.title)
         .toLocaleLowerCase()
         .includes(keyword.value.toLocaleLowerCase().trim())
   );

src/layout/components/setting/index.vue

@@ -9,7 +9,6 @@ import {
   useCssModule,
   getCurrentInstance
 } from "vue";
-import rgbHex from "rgb-hex";
 import { find } from "lodash-unified";
 import { getConfig } from "/@/config";
 import { useRouter } from "vue-router";
@@ -40,23 +39,23 @@ const instanceConfig =
 
 let themeColors = ref<Array<themeColorsType>>([
   // 道奇蓝（默认）
-  { rgb: "27, 42, 71", themeColor: "default" },
+  { color: "#1b2a47", themeColor: "default" },
   // 亮白色
-  { rgb: "255, 255, 255", themeColor: "light" },
+  { color: "#ffffff", themeColor: "light" },
   // 猩红色
-  { rgb: "245, 34, 45", themeColor: "dusk" },
+  { color: "#f5222d", themeColor: "dusk" },
   // 橙红色
-  { rgb: "250, 84, 28", themeColor: "volcano" },
+  { color: "#fa541c", themeColor: "volcano" },
   // 金色
-  { rgb: "250, 219, 20", themeColor: "yellow" },
+  { color: "#fadb14", themeColor: "yellow" },
   // 绿宝石
-  { rgb: "19, 194, 194", themeColor: "mingQing" },
+  { color: "#13c2c2", themeColor: "mingQing" },
   // 酸橙绿
-  { rgb: "82, 196, 26", themeColor: "auroraGreen" },
+  { color: "#52c41a", themeColor: "auroraGreen" },
   // 深粉色
-  { rgb: "235, 47, 150", themeColor: "pink" },
+  { color: "#eb2f96", themeColor: "pink" },
   // 深紫罗兰色
-  { rgb: "114, 46, 209", themeColor: "saucePurple" }
+  { color: "#722ed1", themeColor: "saucePurple" }
 ]);
 
 const verticalRef = templateRef<HTMLElement | null>("verticalRef", null);
@@ -97,8 +96,8 @@ const settings = reactive({
 });
 
 const getThemeColorStyle = computed(() => {
-  return rgb => {
-    return { background: `rgb(${rgb})` };
+  return color => {
+    return { background: color };
   };
 });
 
@@ -158,8 +157,7 @@ function onReset() {
       parentPath: "/",
       meta: {
         title: "menus.hshome",
-        icon: "home-filled",
-        i18n: true
+        icon: "home-filled"
       }
     }
   ]);
@@ -187,6 +185,8 @@ function setFalse(Doms): any {
 }
 
 watch(instance, ({ layout }) => {
+  // 设置wangeditorV5主题色
+  body.style.setProperty("--w-e-toolbar-active-color", layout["epThemeColor"]);
   switch (layout["layout"]) {
     case "vertical":
       toggleClass(true, isSelect, unref(verticalRef));
@@ -261,13 +261,13 @@ function setLayoutThemeColor(theme: string) {
     setEpThemeColor(getConfig().EpThemeColor);
   } else {
     const colors = find(themeColors.value, { themeColor: theme });
-    const color = "#" + rgbHex(colors.rgb);
-    setEpThemeColor(color);
+    setEpThemeColor(colors.color);
   }
 }
 
 // 设置ep主题色
 const setEpThemeColor = (color: string) => {
+  // @ts-expect-error
   writeNewStyle(createNewStyle(color));
   useEpThemeStoreHook().setEpThemeColor(color);
   body.style.setProperty("--el-color-primary-active", shadeBgColor(color));
@@ -300,7 +300,7 @@ nextTick(() => {
   settings.weakVal &&
     document.querySelector("html")?.setAttribute("class", "html-weakness");
   settings.tabsVal && tagsChange();
-
+  // @ts-expect-error
   writeNewStyle(createNewStyle(epThemeColor.value));
   dataThemeChange();
 });
@@ -359,7 +359,7 @@ nextTick(() => {
       <li
         v-for="(item, index) in themeColors"
         :key="index"
-        :style="getThemeColorStyle(item.rgb)"
+        :style="getThemeColorStyle(item.color)"
         @click="setLayoutThemeColor(item.themeColor)"
       >
         <el-icon

src/layout/components/sidebar/breadCrumb.vue

@@ -65,7 +65,7 @@ const getBreadcrumb = (): void => {
       {
         path: "/welcome",
         parentPath: "/",
-        meta: { title: "menus.hshome", i18n: true }
+        meta: { title: "menus.hshome" }
       } as unknown as RouteLocationMatched
     ].concat(matched);
   }
@@ -104,10 +104,10 @@ const handleLink = (item: RouteLocationMatched): any => {
         <span
           v-if="item.redirect === 'noRedirect' || index == levelList.length - 1"
           class="no-redirect"
-          >{{ transformI18n(item.meta.title, item.meta.i18n) }}</span
+          >{{ transformI18n(item.meta.title) }}</span
         >
         <a v-else @click.prevent="handleLink(item)">
-          {{ transformI18n(item.meta.title, item.meta.i18n) }}
+          {{ transformI18n(item.meta.title) }}
         </a>
       </el-breadcrumb-item>
     </transition-group>

src/layout/components/sidebar/horizontal.vue

@@ -29,8 +29,10 @@ const {
   changeTitle,
   handleResize,
   menuSelect,
-  usename,
-  getDropdownItemStyle
+  username,
+  avatarsStyle,
+  getDropdownItemStyle,
+  changeWangeditorLanguage
 } = useNav();
 
 onMounted(() => {
@@ -43,6 +45,9 @@ watch(
   () => locale.value,
   () => {
     changeTitle(route.meta);
+    locale.value === "en"
+      ? changeWangeditorLanguage(locale.value)
+      : changeWangeditorLanguage("zh-CN");
   }
 );
 
@@ -121,8 +126,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/mixNav.vue

@@ -32,8 +32,10 @@ const {
   menuSelect,
   resolvePath,
   pureApp,
-  usename,
-  getDropdownItemStyle
+  username,
+  avatarsStyle,
+  getDropdownItemStyle,
+  changeWangeditorLanguage
 } = useNav();
 
 let defaultActive = ref(null);
@@ -59,6 +61,9 @@ watch(
   () => locale.value,
   () => {
     changeTitle(route.meta);
+    locale.value === "en"
+      ? changeWangeditorLanguage(locale.value)
+      : changeWangeditorLanguage("zh-CN");
   }
 );
 
@@ -122,7 +127,7 @@ function translationEn() {
           <div v-show="route.meta.icon" :class="['el-icon', route.meta.icon]">
             <component :is="useRenderIcon(route.meta && route.meta.icon)" />
           </div>
-          <span>{{ transformI18n(route.meta.title, route.meta.i18n) }}</span>
+          <span>{{ transformI18n(route.meta.title) }}</span>
           <FontIcon
             v-if="route.meta.extraIcon"
             width="30px"
@@ -166,8 +171,8 @@ function translationEn() {
       <!-- 退出登陆 -->
       <el-dropdown trigger="click">
         <span class="el-dropdown-link">
-          <img :src="avatars" />
-          <p>{{ usename }}</p>
+          <img v-if="avatars" :src="avatars" :style="avatarsStyle" />
+          <p v-if="username">{{ username }}</p>
         </span>
         <template #dropdown>
           <el-dropdown-menu class="logout">

src/layout/components/sidebar/sidebarItem.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 import path from "path";
 import { useNav } from "../../hooks/nav";
 import { childrenType } from "../../types";
 import { transformI18n } from "/@/plugins/i18n";
 import { useAppStoreHook } from "/@/store/modules/app";
 import { useRenderIcon } from "/@/components/ReIcon/src/hooks";
+import { ref, PropType, nextTick, computed, CSSProperties } from "vue";
 
 const { pureApp } = useNav();
 const menuMode = ["vertical", "mix"].includes(pureApp.layout);
@@ -148,7 +148,7 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       :style="getNoDropdownStyle"
     >
-      <div class="el-icon" v-show="props.item.meta.icon">
+      <div class="sub-menu-icon" v-show="props.item.meta.icon">
         <component
           :is="
             useRenderIcon(
@@ -167,13 +167,13 @@ function resolvePath(routePath) {
         :style="getDivStyle"
       >
         <span :style="getMenuTextStyle">
-          {{ transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n) }}
+          {{ transformI18n(onlyOneChild.meta.title) }}
         </span>
       </div>
       <template #title>
         <div :style="getDivStyle">
           <span v-if="!menuMode">{{
-            transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
+            transformI18n(onlyOneChild.meta.title)
           }}</span>
           <el-tooltip
             v-else
@@ -182,18 +182,14 @@ function resolvePath(routePath) {
             :disabled="!onlyOneChild.showTooltip"
           >
             <template #content>
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
             </template>
             <span
               ref="menuTextRef"
               :style="getMenuTextStyle"
               @mouseover="hoverMenu(onlyOneChild)"
             >
-              {{
-                transformI18n(onlyOneChild.meta.title, onlyOneChild.meta.i18n)
-              }}
+              {{ transformI18n(onlyOneChild.meta.title) }}
             </span>
           </el-tooltip>
           <FontIcon
@@ -216,17 +212,12 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <div
-        v-show="props.item.meta.icon"
-        :class="['el-icon', props.item.meta.icon]"
-      >
+      <div v-show="props.item.meta.icon" class="sub-menu-icon">
         <component
           :is="useRenderIcon(props.item.meta && props.item.meta.icon)"
         />
       </div>
-      <span v-if="!menuMode">{{
-        transformI18n(props.item.meta.title, props.item.meta.i18n)
-      }}</span>
+      <span v-if="!menuMode">{{ transformI18n(props.item.meta.title) }}</span>
       <el-tooltip
         v-else
         placement="top"
@@ -234,7 +225,7 @@ function resolvePath(routePath) {
         :disabled="!pureApp.sidebar.opened || !props.item.showTooltip"
       >
         <template #content>
-          {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+          {{ transformI18n(props.item.meta.title) }}
         </template>
         <div
           ref="menuTextRef"
@@ -242,7 +233,7 @@ function resolvePath(routePath) {
           @mouseover="hoverMenu(props.item)"
         >
           <span :style="getSpanStyle">
-            {{ transformI18n(props.item.meta.title, props.item.meta.i18n) }}
+            {{ transformI18n(props.item.meta.title) }}
           </span>
         </div>
       </el-tooltip>

src/layout/components/tag/index.vue

@@ -3,6 +3,7 @@ import {
   ref,
   watch,
   unref,
+  toRaw,
   reactive,
   nextTick,
   computed,
@@ -318,7 +319,6 @@ function deleteDynamicTag(obj: any, current: any, tag?: string) {
           parentPath: "/",
           meta: {
             title: "menus.hshome",
-            i18n: true,
             icon: "home-filled"
           }
         },
@@ -662,7 +662,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           @click="tagOnClick(item)"
         >
           <router-link :to="item.path"
-            >{{ transformI18n(item.meta.title, item.meta.i18n) }}
+            >{{ transformI18n(item.meta.title) }}
           </router-link>
           <span
             v-if="
@@ -702,7 +702,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
           style="display: flex; align-items: center"
         >
           <li v-if="item.show" @click="selectTag(key, item)">
-            <component :is="item.icon" :key="key" />
+            <component :is="toRaw(item.icon)" :key="key" />
             {{ t(item.text) }}
           </li>
         </div>
@@ -736,7 +736,7 @@ const getContextMenuStyle = computed((): CSSProperties => {
                 :disabled="item.disabled"
               >
                 <component
-                  :is="item.icon"
+                  :is="toRaw(item.icon)"
                   :key="key"
                   style="margin-right: 6px"
                 />

src/layout/frameView.vue

@@ -1,12 +1,19 @@
 <template>
-  <div class="frame" v-loading="loading">
+  <div
+    class="frame"
+    v-loading="loading"
+    :element-loading-text="t('status.hsLoad')"
+  >
     <iframe :src="frameSrc" class="frame-iframe" ref="frameRef" />
   </div>
 </template>
+
 <script lang="ts" setup>
+import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
 import { ref, unref, onMounted, nextTick } from "vue";
 
+const { t } = useI18n();
 const loading = ref(false);
 const currentRoute = useRoute();
 const frameSrc = ref<string>("");
@@ -45,7 +52,7 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 .frame {
-  height: 100vh;
+  height: calc(100vh - 88px);
   z-index: 998;
 
   .frame-iframe {
@@ -58,6 +65,6 @@ onMounted(() => {
 }
 
 .main-content {
-  margin: 0 !important;
+  margin: 2px 0 0 !important;
 }
 </style>

src/layout/hooks/nav.ts

@@ -3,16 +3,19 @@ import { router } from "/@/router";
 import { getConfig } from "/@/config";
 import { emitter } from "/@/utils/mitt";
 import { routeMetaType } from "../types";
+import { remainingPaths } from "/@/router";
 import { transformI18n } from "/@/plugins/i18n";
 import { storageSession } from "/@/utils/storage";
 import { useAppStoreHook } from "/@/store/modules/app";
-import { remainingPaths } from "/@/router/modules/index";
+import { i18nChangeLanguage } from "@wangeditor/editor";
 import { useEpThemeStoreHook } from "/@/store/modules/epTheme";
 
+const errorInfo = "当前路由配置不正确，请检查配置";
+
 export function useNav() {
   const pureApp = useAppStoreHook();
   // 用户名
-  const usename: string = storageSession.getItem("info")?.username;
+  const username: string = storageSession.getItem("info")?.username;
 
   // 设置国际化选中后的样式
   const getDropdownItemStyle = computed(() => {
@@ -24,6 +27,10 @@ export function useNav() {
     };
   });
 
+  const avatarsStyle = computed(() => {
+    return username ? { marginRight: "10px" } : "";
+  });
+
   const isCollapse = computed(() => {
     return !pureApp.getSidebarStatus;
   });
@@ -31,9 +38,8 @@ export function useNav() {
   // 动态title
   function changeTitle(meta: routeMetaType) {
     const Title = getConfig().Title;
-    if (Title)
-      document.title = `${transformI18n(meta.title, meta.i18n)} | ${Title}`;
-    else document.title = transformI18n(meta.title, meta.i18n);
+    if (Title) document.title = `${transformI18n(meta.title)} | ${Title}`;
+    else document.title = transformI18n(meta.title);
   }
 
   // 退出登录
@@ -59,6 +65,7 @@ export function useNav() {
   }
 
   function resolvePath(route) {
+    if (!route.children) return console.error(errorInfo);
     const httpReg = /^http(s?):\/\//;
     const routeChildPath = route.children[0]?.path;
     if (httpReg.test(routeChildPath)) {
@@ -77,6 +84,7 @@ export function useNav() {
     }
     // 找到当前路由的信息
     function findCurrentRoute(indexPath: string, routes) {
+      if (!routes) return console.error(errorInfo);
       return routes.map(item => {
         if (item.path === indexPath) {
           if (item.redirect) {
@@ -101,6 +109,15 @@ export function useNav() {
     return remainingPaths.includes(path);
   }
 
+  /**
+   * 切换wangEditorV5国际化
+   * @param language string 可选值 en、zh-CN
+   * @returns void
+   */
+  function changeWangeditorLanguage(language: string): void {
+    i18nChangeLanguage(language);
+  }
+
   return {
     logout,
     backHome,
@@ -112,7 +129,9 @@ export function useNav() {
     resolvePath,
     isCollapse,
     pureApp,
-    usename,
-    getDropdownItemStyle
+    username,
+    avatarsStyle,
+    getDropdownItemStyle,
+    changeWangeditorLanguage
   };
 }

src/layout/theme/auroraGreen-vars.scss

@@ -1,11 +0,0 @@
-/* 酸橙绿 */
-$subMenuActiveText: #fff;
-$menuBg: #0b1e15;
-$menuHover: #60ac80;
-$subMenuBg: #000;
-$subMenuActiveBg: #60ac80;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #112f21;
-$menuTitleHover: #fff;
-$menuActiveBefore: #60ac80;

src/layout/theme/default-vars.scss

@@ -1,29 +0,0 @@
-/**
- * 道奇蓝（默认）
- * 此scss变量文件作为multipleScopeVars去编译时，会自动移除!default以达到变量提升
- * 同时此scss变量文件作为默认主题变量文件，被其他.scss通过 @import 时，必需 !default
-*/
-
-/* 菜单选中后字体样式 */
-$subMenuActiveText: #fff !default;
-
-/* 菜单背景 */
-$menuBg: #001529 !default;
-
-/* 鼠标覆盖到菜单时的背景 */
-$menuHover: #4091f7 !default;
-
-/* 子菜单背景 */
-$subMenuBg: #0f0303 !default;
-
-/* 有无子集的激活菜单背景 */
-$subMenuActiveBg: #4091f7 !default;
-$navTextColor: #fff !default;
-$menuText: rgb(254 254 254 / 65%) !default;
-
-/* logo背景颜色 */
-$sidebarLogo: #002140 !default;
-
-/* 鼠标覆盖到菜单时的字体颜色 */
-$menuTitleHover: #fff !default;
-$menuActiveBefore: #4091f7 !default;

src/layout/theme/dusk-vars.scss

@@ -1,11 +0,0 @@
-/* 猩红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2a0608;
-$menuHover: #e13c39;
-$subMenuBg: #000;
-$subMenuActiveBg: #e13c39;
-$navTextColor: red;
-$menuText: rgb(254 254 254 / 65.1%);
-$sidebarLogo: #42090c;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e13c39;

src/layout/theme/element-plus.ts

@@ -26,7 +26,9 @@ export const writeNewStyle = (newStyle: string): void => {
 };
 
 // 根据主题色，生成最新的样式表
-export const createNewStyle = (primaryStyle: string): string => {
+export const createNewStyle = (
+  primaryStyle: Record<string, any>
+): Record<string, any> => {
   // 根据主色生成色值表
   const colors = createColors(primaryStyle);
   // 在当前ep的默认样式表中标记需要替换的色值
@@ -41,7 +43,9 @@ export const createNewStyle = (primaryStyle: string): string => {
   return cssText;
 };
 
-export const createColors = (primary: string) => {
+export const createColors = (
+  primary: Record<string, any>
+): Record<string, any> => {
   if (!primary) return;
   const colors = {
     primary
@@ -53,7 +57,7 @@ export const createColors = (primary: string) => {
   return colors;
 };
 
-const getStyleTemplate = (data: string): string => {
+const getStyleTemplate = (data: Record<string, any>): Record<string, any> => {
   const colorMap = {
     "#3a8ee6": "shade-1",
     "#409eff": "primary",

src/layout/theme/index.ts

@@ -0,0 +1,136 @@
+const themeColors = {
+  default: {
+    color: "#409EFF",
+    subMenuActiveText: "#fff",
+    menuBg: "#001529",
+    menuHover: "#4091f7",
+    subMenuBg: "#0f0303",
+    subMenuActiveBg: "#4091f7",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#002140",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#4091f7"
+  },
+  light: {
+    color: "#409EFF",
+    subMenuActiveText: "#409eff",
+    menuBg: "#fff",
+    menuHover: "#e0ebf6",
+    subMenuBg: "#fff",
+    subMenuActiveBg: "#e0ebf6",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#fff",
+    menuTitleHover: "#000",
+    menuActiveBefore: "#4091f7"
+  },
+  dusk: {
+    color: "#f5222d",
+    subMenuActiveText: "#fff",
+    menuBg: "#2a0608",
+    menuHover: "#e13c39",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#e13c39",
+    navTextColor: "#red",
+    menuText: "rgb(254 254 254 / 65.1%)",
+    sidebarLogo: "#42090c",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e13c39"
+  },
+  volcano: {
+    color: "#fa541c",
+    subMenuActiveText: "#fff",
+    menuBg: "#2b0e05",
+    menuHover: "#e85f33",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#e85f33",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#441708",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#e85f33"
+  },
+  yellow: {
+    color: "#fadb14",
+    subMenuActiveText: "#d25f00",
+    menuBg: "#2b2503",
+    menuHover: "#f6da4d",
+    subMenuBg: "#0f0603",
+    subMenuActiveBg: "#f6da4d",
+    navTextColor: "#fff",
+    menuText: "rgb(254 254 254 / 65%)",
+    sidebarLogo: "#443b05",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#f6da4d"
+  },
+  mingQing: {
+    color: "#13c2c2",
+    subMenuActiveText: "#fff",
+    menuBg: "#032121",
+    menuHover: "#59bfc1",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#59bfc1",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#053434",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#59bfc1"
+  },
+  auroraGreen: {
+    color: "#52c41a",
+    subMenuActiveText: "#fff",
+    menuBg: "#0b1e15",
+    menuHover: "#60ac80",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#60ac80",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#112f21",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#60ac80"
+  },
+  pink: {
+    color: "#eb2f96",
+    subMenuActiveText: "#fff",
+    menuBg: "#28081a",
+    menuHover: "#d84493",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#d84493",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#3f0d29",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#d84493"
+  },
+  saucePurple: {
+    color: "#722ed1",
+    subMenuActiveText: "#fff",
+    menuBg: "#130824",
+    menuHover: "#693ac9",
+    subMenuBg: "#000",
+    subMenuActiveBg: "#693ac9",
+    navTextColor: "#7a80b4",
+    menuText: "#7a80b4",
+    sidebarLogo: "#1f0c38",
+    menuTitleHover: "#fff",
+    menuActiveBefore: "#693ac9"
+  }
+};
+
+type MultipleScopeVarsItem = {
+  scopeName: string;
+  path: string;
+  varsContent: string;
+};
+
+export function genScssMultipleScopeVars(): MultipleScopeVarsItem[] {
+  const result = [] as MultipleScopeVarsItem[];
+  Object.keys(themeColors).forEach(key => {
+    result.push({
+      scopeName: `layout-theme-${key}`,
+      varsContent: `$primary-color: ${themeColors[key].color} !default;$vxe-primary-color: $primary-color;$subMenuActiveText: ${themeColors[key].subMenuActiveText} !default;$menuBg: ${themeColors[key].menuBg} !default;$menuHover: ${themeColors[key].menuHover} !default;$subMenuBg: ${themeColors[key].subMenuBg} !default;$subMenuActiveBg: ${themeColors[key].subMenuActiveBg} !default;$navTextColor: ${themeColors[key].navTextColor} !default;$menuText: ${themeColors[key].menuText} !default;$sidebarLogo: ${themeColors[key].sidebarLogo} !default;$menuTitleHover: ${themeColors[key].menuTitleHover} !default;$menuActiveBefore: ${themeColors[key].menuActiveBefore} !default;`
+    } as MultipleScopeVarsItem);
+  });
+  return result;
+}

src/layout/theme/light-vars.scss

@@ -1,11 +0,0 @@
-/* 亮白色 */
-$subMenuActiveText: #409eff;
-$menuBg: #fff;
-$menuHover: #e0ebf6;
-$subMenuBg: #fff;
-$subMenuActiveBg: #e0ebf6;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #fff;
-$menuTitleHover: #000;
-$menuActiveBefore: #4091f7;

src/layout/theme/mingQing-vars.scss

@@ -1,11 +0,0 @@
-/* 绿宝石 */
-$subMenuActiveText: #fff;
-$menuBg: #032121;
-$menuHover: #59bfc1;
-$subMenuBg: #000;
-$subMenuActiveBg: #59bfc1;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #053434;
-$menuTitleHover: #fff;
-$menuActiveBefore: #59bfc1;

src/layout/theme/pink-vars.scss

@@ -1,11 +0,0 @@
-/* 深粉色 */
-$subMenuActiveText: #fff;
-$menuBg: #28081a;
-$menuHover: #d84493;
-$subMenuBg: #000;
-$subMenuActiveBg: #d84493;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #3f0d29;
-$menuTitleHover: #fff;
-$menuActiveBefore: #d84493;

src/layout/theme/saucePurple-vars.scss

@@ -1,11 +0,0 @@
-/* 深紫罗兰色 */
-$subMenuActiveText: #fff;
-$menuBg: #130824;
-$menuHover: #693ac9;
-$subMenuBg: #000;
-$subMenuActiveBg: #693ac9;
-$navTextColor: #7a80b4;
-$menuText: #7a80b4;
-$sidebarLogo: #1f0c38;
-$menuTitleHover: #fff;
-$menuActiveBefore: #693ac9;

src/layout/theme/volcano-vars.scss

@@ -1,11 +0,0 @@
-/* 橙红色 */
-$subMenuActiveText: #fff;
-$menuBg: #2b0e05;
-$menuHover: #e85f33;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #e85f33;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #441708;
-$menuTitleHover: #fff;
-$menuActiveBefore: #e85f33;

src/layout/theme/yellow-vars.scss

@@ -1,11 +0,0 @@
-/* 金色 */
-$subMenuActiveText: #d25f00;
-$menuBg: #2b2503;
-$menuHover: #f6da4d;
-$subMenuBg: #0f0603;
-$subMenuActiveBg: #f6da4d;
-$navTextColor: #fff;
-$menuText: rgb(254 254 254 / 65%);
-$sidebarLogo: #443b05;
-$menuTitleHover: #fff;
-$menuActiveBefore: #f6da4d;

src/layout/types.ts

@@ -5,7 +5,6 @@ export const routerArrays: Array<RouteConfigs> = [
     parentPath: "/",
     meta: {
       title: "menus.hshome",
-      i18n: true,
       icon: "home-filled"
     }
   }
@@ -79,7 +78,7 @@ export type childrenType = {
 };
 
 export type themeColorsType = {
-  rgb: string;
+  color: string;
   themeColor: string;
 };
 

src/main.ts

@@ -1,18 +1,21 @@
 import App from "./App.vue";
 import router from "./router";
 import { setupStore } from "/@/store";
+import ElementPlus from "element-plus";
 import { getServerConfig } from "./config";
 import { createApp, Directive } from "vue";
 import { useI18n } from "../src/plugins/i18n";
 import { MotionPlugin } from "@vueuse/motion";
 import { useTable } from "../src/plugins/vxe-table";
-import { useElementPlus } from "../src/plugins/element-plus";
 import { injectResponsiveStorage } from "/@/utils/storage/responsive";
 
+import "uno.css";
 import "animate.css";
-import "virtual:windi.css";
+// 引入重置样式
+import "./style/reset.scss";
 // 导入公共样式
 import "./style/index.scss";
+import "element-plus/dist/index.css";
 import "@pureadmin/components/dist/index.css";
 import "@pureadmin/components/dist/theme.css";
 // 导入字体图标
@@ -43,6 +46,6 @@ getServerConfig(app).then(async config => {
   await router.isReady();
   injectResponsiveStorage(app, config);
   setupStore(app);
-  app.use(MotionPlugin).use(useI18n).use(useElementPlus).use(useTable);
+  app.use(MotionPlugin).use(useI18n).use(ElementPlus).use(useTable);
   app.mount("#app");
 });

src/mockProdServer.ts

@@ -1,9 +1,11 @@
 import { createProdMockServer } from "vite-plugin-mock/es/createProdMockServer";
-import mapMock from "../mock/map";
-import echartsMock from "../mock/echarts";
-import asyncRoutesMock from "../mock/asyncRoutes";
 
-export const mockModules = [...mapMock, ...echartsMock, ...asyncRoutesMock];
+const modules = import.meta.globEager("../mock/*.ts");
+const mockModules = [];
+
+Object.keys(modules).forEach(key => {
+  mockModules.push(...modules[key].default);
+});
 
 export function setupProdMockServer() {
   createProdMockServer(mockModules);

src/plugins/element-plus/index.ts

@@ -56,6 +56,9 @@ import {
   ElStep,
   ElTree,
   ElTreeV2,
+  ElPopconfirm,
+  ElCheckbox,
+  ElCheckboxGroup,
   // 指令
   ElLoading,
   ElInfiniteScroll
@@ -110,6 +113,9 @@ const components = [
   ElCollapseItem,
   ElTree,
   ElTreeV2,
+  ElPopconfirm,
+  ElCheckbox,
+  ElCheckboxGroup,
   ElTable,
   ElTableColumn,
   ElLink,

src/plugins/i18n.ts

@@ -30,15 +30,11 @@ export const localesConfigs = {
 };
 
 /**
- * 国际化转换工具函数
+ * 国际化转换工具函数（自动读取根目录locales文件夹下文件进行国际化匹配）
  * @param message message
- * @param isI18n  如果true,获取对应的消息,否则返回本身
- * @returns message
+ * @returns 转化后的message
  */
-export function transformI18n(
-  message: string | unknown | object = "",
-  isI18n: boolean | unknown = false
-) {
+export function transformI18n(message: any = "") {
   if (!message) {
     return "";
   }
@@ -50,7 +46,11 @@ export function transformI18n(
     return message[locale?.value];
   }
 
-  if (isI18n) {
+  const key = message.match(/(\S*)\./)?.[1];
+  if (key && Object.keys(siphonI18n("zh-CN")).includes(key)) {
+    return i18n.global.t.call(i18n.global.locale, message);
+  } else if (!key && Object.keys(siphonI18n("zh-CN")).includes(message)) {
+    // 兼容非嵌套形式的国际化写法
     return i18n.global.t.call(i18n.global.locale, message);
   } else {
     return message;

src/plugins/vxe-table/index.scss

@@ -0,0 +1,6 @@
+@import "vxe-table/styles/variable.scss";
+@import "vxe-table/styles/modules.scss";
+
+i {
+  border-color: initial;
+}

src/plugins/vxe-table/index.ts

@@ -1,4 +1,5 @@
 import "xe-utils";
+import "./index.scss";
 import XEUtils from "xe-utils";
 import { App, unref } from "vue";
 import { i18n } from "/@/plugins/i18n";

src/router/index.ts

@@ -3,22 +3,78 @@ import { getConfig } from "/@/config";
 import { toRouteType } from "./types";
 import { openLink } from "/@/utils/link";
 import NProgress from "/@/utils/progress";
-import { constantRoutes } from "./modules";
 import { findIndex } from "lodash-unified";
 import { transformI18n } from "/@/plugins/i18n";
-import remainingRouter from "./modules/remaining";
 import { storageSession } from "/@/utils/storage";
+import { buildHierarchyTree } from "/@/utils/tree";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 import { usePermissionStoreHook } from "/@/store/modules/permission";
-import { Router, RouteMeta, createRouter, RouteRecordName } from "vue-router";
 import {
+  Router,
+  RouteMeta,
+  createRouter,
+  RouteRecordRaw,
+  RouteComponent,
+  RouteRecordName
+} from "vue-router";
+import {
+  ascending,
   initRouter,
   getHistoryMode,
   getParentPaths,
   findRouteByPath,
-  handleAliveRoute
+  handleAliveRoute,
+  formatTwoStageRoutes,
+  formatFlatteningRoutes
 } from "./utils";
 
+import pptRouter from "./modules/ppt";
+import homeRouter from "./modules/home";
+import ableRouter from "./modules/able";
+import listRouter from "./modules/list";
+import aboutRouter from "./modules/about";
+import errorRouter from "./modules/error";
+import guideRouter from "./modules/guide";
+import resultRouter from "./modules/result";
+import editorRouter from "./modules/editor";
+import nestedRouter from "./modules/nested";
+import flowChartRouter from "./modules/flowchart";
+import remainingRouter from "./modules/remaining";
+import componentsRouter from "./modules/components";
+import formDesignRouter from "./modules/formdesign";
+
+// 原始静态路由（未做任何处理）
+const routes = [
+  pptRouter,
+  homeRouter,
+  ableRouter,
+  listRouter,
+  aboutRouter,
+  errorRouter,
+  guideRouter,
+  resultRouter,
+  nestedRouter,
+  editorRouter,
+  flowChartRouter,
+  componentsRouter,
+  formDesignRouter
+];
+
+// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
+export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
+  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
+);
+
+// 用于渲染菜单，保持原始层级
+export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
+  ...remainingRouter
+);
+
+// 不参与菜单的路由
+export const remainingPaths = Object.keys(remainingRouter).map(v => {
+  return remainingRouter[v].path;
+});
+
 // 创建路由实例
 export const router: Router = createRouter({
   history: getHistoryMode(),
@@ -59,11 +115,8 @@ router.beforeEach((to: toRouteType, _from, next) => {
       if (!item.meta.title) return "";
       const Title = getConfig().Title;
       if (Title)
-        document.title = `${transformI18n(
-          item.meta.title,
-          item.meta?.i18n
-        )} | ${Title}`;
-      else document.title = transformI18n(item.meta.title, item.meta?.i18n);
+        document.title = `${transformI18n(item.meta.title)} | ${Title}`;
+      else document.title = transformI18n(item.meta.title);
     });
   if (name) {
     if (_from?.name) {

src/router/modules/able.ts

@@ -8,8 +8,7 @@ const ableRouter = {
   meta: {
     icon: "ubuntu-fill",
     title: $t("menus.hsAble"),
-    i18n: true,
-    rank: 3
+    rank: 4
   },
   children: [
     {
@@ -17,8 +16,7 @@ const ableRouter = {
       name: "reWatermark",
       component: () => import("/@/views/able/watermark.vue"),
       meta: {
-        title: $t("menus.hsWatermark"),
-        i18n: true
+        title: $t("menus.hsWatermark")
       }
     },
     {
@@ -26,8 +24,7 @@ const ableRouter = {
       name: "rePrint",
       component: () => import("/@/views/able/print.vue"),
       meta: {
-        title: $t("menus.hsPrint"),
-        i18n: true
+        title: $t("menus.hsPrint")
       }
     },
     {
@@ -35,8 +32,7 @@ const ableRouter = {
       name: "reIconSelect",
       component: () => import("/@/views/able/icon-select.vue"),
       meta: {
-        title: $t("menus.hsIconSelect"),
-        i18n: true
+        title: $t("menus.hsIconSelect")
       }
     },
     {
@@ -44,8 +40,7 @@ const ableRouter = {
       name: "reTimeline",
       component: () => import("/@/views/able/timeline.vue"),
       meta: {
-        title: $t("menus.hsTimeline"),
-        i18n: true
+        title: $t("menus.hsTimeline")
       }
     },
     {
@@ -53,8 +48,7 @@ const ableRouter = {
       name: "reMenuTree",
       component: () => import("/@/views/able/menu-tree.vue"),
       meta: {
-        title: $t("menus.hsMenuTree"),
-        i18n: true
+        title: $t("menus.hsMenuTree")
       }
     },
     {
@@ -62,8 +56,7 @@ const ableRouter = {
       name: "reLineTree",
       component: () => import("/@/views/able/line-tree.vue"),
       meta: {
-        title: $t("menus.hsLineTree"),
-        i18n: true
+        title: $t("menus.hsLineTree")
       }
     },
     {
@@ -71,8 +64,7 @@ const ableRouter = {
       name: "reAntTabs",
       component: () => import("/@/views/able/ant-tabs.vue"),
       meta: {
-        title: $t("menus.hsAntTabs"),
-        i18n: true
+        title: $t("menus.hsAntTabs")
       }
     },
     {
@@ -80,8 +72,7 @@ const ableRouter = {
       name: "reAntAnchor",
       component: () => import("/@/views/able/ant-anchor.vue"),
       meta: {
-        title: $t("menus.hsAntAnchor"),
-        i18n: true
+        title: $t("menus.hsAntAnchor")
       }
     },
     {
@@ -89,8 +80,47 @@ const ableRouter = {
       name: "reAntTreeSelect",
       component: () => import("/@/views/able/ant-treeSelect.vue"),
       meta: {
-        title: $t("menus.hsAntTreeSelect"),
-        i18n: true
+        title: $t("menus.hsAntTreeSelect")
+      }
+    },
+    {
+      path: "/able/debounce",
+      name: "reDebounce",
+      component: () => import("/@/views/able/debounce.vue"),
+      meta: {
+        title: $t("menus.hsDebounce")
+      }
+    },
+    {
+      path: "/able/barcode",
+      name: "reBarcode",
+      component: () => import("/@/views/able/barcode.vue"),
+      meta: {
+        title: $t("menus.hsBarcode")
+      }
+    },
+    {
+      path: "/able/qrcode",
+      name: "reQrcode",
+      component: () => import("/@/views/able/qrcode.vue"),
+      meta: {
+        title: $t("menus.hsQrcode")
+      }
+    },
+    {
+      path: "/able/cascader",
+      name: "reCascader",
+      component: () => import("/@/views/able/cascader.vue"),
+      meta: {
+        title: $t("menus.hsCascader")
+      }
+    },
+    {
+      path: "/able/swiper",
+      name: "reSwiper",
+      component: () => import("/@/views/able/swiper.vue"),
+      meta: {
+        title: $t("menus.hsSwiper")
       }
     }
   ]

src/router/modules/about.ts

@@ -8,8 +8,7 @@ const aboutRouter = {
   meta: {
     icon: "question-line",
     title: $t("menus.hsAbout"),
-    i18n: true,
-    rank: 14
+    rank: 15
   },
   children: [
     {
@@ -17,8 +16,7 @@ const aboutRouter = {
       name: "reAbout",
       component: () => import("/@/views/about/index.vue"),
       meta: {
-        title: $t("menus.hsAbout"),
-        i18n: true
+        title: $t("menus.hsAbout")
       }
     }
   ]

src/router/modules/components.ts

@@ -8,8 +8,7 @@ const componentsRouter = {
   meta: {
     icon: "menu",
     title: $t("menus.hscomponents"),
-    i18n: true,
-    rank: 4
+    rank: 5
   },
   children: [
     {
@@ -17,8 +16,7 @@ const componentsRouter = {
       name: "video",
       component: () => import("/@/views/components/video/index.vue"),
       meta: {
-        title: $t("menus.hsvideo"),
-        i18n: true
+        title: $t("menus.hsvideo")
       }
     },
     {
@@ -28,7 +26,6 @@ const componentsRouter = {
       meta: {
         title: $t("menus.hsmap"),
         keepAlive: true,
-        i18n: true,
         transition: {
           name: "fade"
         }
@@ -40,7 +37,6 @@ const componentsRouter = {
       component: () => import("/@/views/components/draggable/index.vue"),
       meta: {
         title: $t("menus.hsdraggable"),
-        i18n: true,
         transition: {
           enterTransition: "animate__zoomIn",
           leaveTransition: "animate__zoomOut"
@@ -54,7 +50,6 @@ const componentsRouter = {
       component: () => import("/@/views/components/split-pane/index.vue"),
       meta: {
         title: $t("menus.hssplitPane"),
-        i18n: true,
         extraIcon: {
           svg: true,
           name: "team-iconxinpinrenqiwang"
@@ -66,8 +61,7 @@ const componentsRouter = {
       name: "button",
       component: () => import("/@/views/components/button/index.vue"),
       meta: {
-        title: $t("menus.hsbutton"),
-        i18n: true
+        title: $t("menus.hsbutton")
       }
     },
     {
@@ -75,8 +69,7 @@ const componentsRouter = {
       name: "cropping",
       component: () => import("/@/views/components/cropping/index.vue"),
       meta: {
-        title: $t("menus.hscropping"),
-        i18n: true
+        title: $t("menus.hscropping")
       }
     },
     {
@@ -84,8 +77,7 @@ const componentsRouter = {
       name: "countTo",
       component: () => import("/@/views/components/count-to/index.vue"),
       meta: {
-        title: $t("menus.hscountTo"),
-        i18n: true
+        title: $t("menus.hscountTo")
       }
     },
     {
@@ -93,8 +85,7 @@ const componentsRouter = {
       name: "selector",
       component: () => import("/@/views/components/selector/index.vue"),
       meta: {
-        title: $t("menus.hsselector"),
-        i18n: true
+        title: $t("menus.hsselector")
       }
     },
     {
@@ -102,8 +93,7 @@ const componentsRouter = {
       name: "seamlessScroll",
       component: () => import("/@/views/components/seamless-scroll/index.vue"),
       meta: {
-        title: $t("menus.hsseamless"),
-        i18n: true
+        title: $t("menus.hsseamless")
       }
     },
     {
@@ -111,8 +101,7 @@ const componentsRouter = {
       name: "contextmenu",
       component: () => import("/@/views/components/contextmenu/index.vue"),
       meta: {
-        title: $t("menus.hscontextmenu"),
-        i18n: true
+        title: $t("menus.hscontextmenu")
       }
     }
   ]

src/router/modules/editor.ts

@@ -8,7 +8,6 @@ const editorRouter = {
   meta: {
     icon: "edit",
     title: $t("menus.hseditor"),
-    i18n: true,
     rank: 2
   },
   children: [
@@ -18,12 +17,7 @@ const editorRouter = {
       component: () => import("/@/views/editor/index.vue"),
       meta: {
         title: $t("menus.hseditor"),
-        i18n: true,
-        keepAlive: true,
-        extraIcon: {
-          svg: true,
-          name: "team-iconxinpin"
-        }
+        keepAlive: true
       }
     }
   ]

src/router/modules/error.ts

@@ -8,7 +8,6 @@ const errorRouter = {
   meta: {
     icon: "information-line",
     title: $t("menus.hserror"),
-    i18n: true,
     rank: 9
   },
   children: [
@@ -17,8 +16,7 @@ const errorRouter = {
       name: "403",
       component: () => import("/@/views/error/403.vue"),
       meta: {
-        title: $t("menus.hsfourZeroOne"),
-        i18n: true
+        title: $t("menus.hsfourZeroOne")
       }
     },
     {
@@ -26,8 +24,7 @@ const errorRouter = {
       name: "404",
       component: () => import("/@/views/error/404.vue"),
       meta: {
-        title: $t("menus.hsfourZeroFour"),
-        i18n: true
+        title: $t("menus.hsfourZeroFour")
       }
     },
     {
@@ -35,8 +32,7 @@ const errorRouter = {
       name: "500",
       component: () => import("/@/views/error/500.vue"),
       meta: {
-        title: $t("menus.hsFive"),
-        i18n: true
+        title: $t("menus.hsFive")
       }
     }
   ]

src/router/modules/flowchart.ts

@@ -8,7 +8,6 @@ const flowChartRouter = {
   meta: {
     icon: "set-up",
     title: $t("menus.hsflowChart"),
-    i18n: true,
     rank: 1
   },
   children: [
@@ -17,8 +16,7 @@ const flowChartRouter = {
       name: "flowChart",
       component: () => import("/@/views/flow-chart/index.vue"),
       meta: {
-        title: $t("menus.hsflowChart"),
-        i18n: true
+        title: $t("menus.hsflowChart")
       }
     }
   ]

src/router/modules/formdesign.ts

@@ -0,0 +1,25 @@
+import { $t } from "/@/plugins/i18n";
+const Layout = () => import("/@/layout/index.vue");
+
+const formDesignRouter = {
+  path: "/formDesign",
+  component: Layout,
+  redirect: "/formDesign/index",
+  meta: {
+    icon: "terminal-window-line",
+    title: $t("menus.hsFormDesign"),
+    rank: 2
+  },
+  children: [
+    {
+      path: "/formDesign/index",
+      name: "formDesign",
+      component: () => import("/@/views/form-design/index.vue"),
+      meta: {
+        title: $t("menus.hsFormDesign")
+      }
+    }
+  ]
+};
+
+export default formDesignRouter;

src/router/modules/guide.ts

@@ -8,8 +8,7 @@ const guideRouter = {
   meta: {
     icon: "guide",
     title: $t("menus.hsguide"),
-    i18n: true,
-    rank: 13
+    rank: 14
   },
   children: [
     {
@@ -17,8 +16,7 @@ const guideRouter = {
       name: "reGuide",
       component: () => import("/@/views/guide/index.vue"),
       meta: {
-        title: $t("menus.hsguide"),
-        i18n: true
+        title: $t("menus.hsguide")
       }
     }
   ]

src/router/modules/home.ts

@@ -9,7 +9,6 @@ const homeRouter = {
   meta: {
     icon: "home-filled",
     title: $t("menus.hshome"),
-    i18n: true,
     rank: 0
   },
   children: [
@@ -18,8 +17,7 @@ const homeRouter = {
       name: "welcome",
       component: () => import("/@/views/welcome.vue"),
       meta: {
-        title: $t("menus.hshome"),
-        i18n: true
+        title: $t("menus.hshome")
       }
     }
   ]

src/router/modules/index.ts

@@ -1,49 +0,0 @@
-// 静态路由
-import about from "./about";
-import homeRouter from "./home";
-import ableRouter from "./able";
-import errorRouter from "./error";
-import guideRouter from "./guide";
-import resultRouter from "./result";
-import editorRouter from "./editor";
-import nestedRouter from "./nested";
-import flowChartRouter from "./flowchart";
-import remainingRouter from "./remaining";
-import componentsRouter from "./components";
-import { RouteRecordRaw, RouteComponent } from "vue-router";
-
-import {
-  ascending,
-  formatTwoStageRoutes,
-  formatFlatteningRoutes
-} from "../utils";
-import { buildHierarchyTree } from "/@/utils/tree";
-
-// 原始静态路由（未做任何处理）
-const routes = [
-  about,
-  homeRouter,
-  ableRouter,
-  errorRouter,
-  guideRouter,
-  resultRouter,
-  nestedRouter,
-  editorRouter,
-  flowChartRouter,
-  componentsRouter
-];
-
-// 导出处理后的静态路由（三级及以上的路由全部拍成二级）
-export const constantRoutes: Array<RouteRecordRaw> = formatTwoStageRoutes(
-  formatFlatteningRoutes(buildHierarchyTree(ascending(routes)))
-);
-
-// 用于渲染菜单，保持原始层级
-export const constantMenus: Array<RouteComponent> = ascending(routes).concat(
-  ...remainingRouter
-);
-
-// 不参与菜单的路由
-export const remainingPaths = Object.keys(remainingRouter).map(v => {
-  return remainingRouter[v].path;
-});

src/router/modules/list.ts

@@ -0,0 +1,27 @@
+import { $t } from "/@/plugins/i18n";
+const Layout = () => import("/@/layout/index.vue");
+
+const ableRouter = {
+  path: "/list",
+  component: Layout,
+  redirect: "/list/card",
+  meta: {
+    icon: "list-check",
+    title: $t("menus.hsList"),
+    rank: 12
+  },
+  children: [
+    {
+      path: "/list/card",
+      name: "listCard",
+      component: () => import("/@/views/list/card/index.vue"),
+      meta: {
+        icon: "card",
+        title: $t("menus.hsListCard"),
+        showParent: true
+      }
+    }
+  ]
+};
+
+export default ableRouter;

src/router/modules/nested.ts

@@ -8,15 +8,13 @@ const nestedRouter = {
   meta: {
     title: $t("menus.hsmenus"),
     icon: "histogram",
-    i18n: true,
-    rank: 11
+    rank: 6
   },
   children: [
     {
       path: "/nested/menu1",
       meta: {
         title: $t("menus.hsmenu1"),
-        i18n: true,
         keepAlive: true
       },
       redirect: "/nested/menu1/menu1-1",
@@ -27,7 +25,6 @@ const nestedRouter = {
           name: "Menu1-1",
           meta: {
             title: $t("menus.hsmenu1-1"),
-            i18n: true,
             keepAlive: true
           }
         },
@@ -36,7 +33,6 @@ const nestedRouter = {
           redirect: "/nested/menu1/menu1-2/menu1-2-1",
           meta: {
             title: $t("menus.hsmenu1-2"),
-            i18n: true,
             keepAlive: true
           },
           children: [
@@ -47,7 +43,6 @@ const nestedRouter = {
               name: "Menu1-2-1",
               meta: {
                 title: $t("menus.hsmenu1-2-1"),
-                i18n: true,
                 keepAlive: true
               }
             },
@@ -59,7 +54,6 @@ const nestedRouter = {
               meta: {
                 title: $t("menus.hsmenu1-2-2"),
                 keepAlive: true,
-                i18n: true,
                 extraIcon: {
                   svg: true,
                   name: "team-iconxinpinrenqiwang"
@@ -74,7 +68,6 @@ const nestedRouter = {
           name: "Menu1-3",
           meta: {
             title: $t("menus.hsmenu1-3"),
-            i18n: true,
             keepAlive: true
           }
         }
@@ -86,7 +79,6 @@ const nestedRouter = {
       component: () => import("/@/views/nested/menu2/index.vue"),
       meta: {
         title: $t("menus.hsmenu2"),
-        i18n: true,
         keepAlive: true
       }
     }

src/router/modules/ppt.ts

@@ -0,0 +1,30 @@
+const Layout = () => import("/@/layout/index.vue");
+const IFrame = () => import("/@/layout/frameView.vue");
+
+const pptRouter = {
+  path: "/ppt",
+  component: Layout,
+  redirect: "/ppt/index",
+  meta: {
+    icon: "ppt",
+    title: "PPT",
+    rank: 3
+  },
+  children: [
+    {
+      path: "/ppt/index",
+      name: "reFrameppt",
+      component: IFrame,
+      meta: {
+        title: "PPT",
+        frameSrc: "https://pipipi-pikachu.github.io/PPTist/",
+        extraIcon: {
+          svg: true,
+          name: "team-iconxinpin"
+        }
+      }
+    }
+  ]
+};
+
+export default pptRouter;

src/router/modules/remaining.ts

@@ -5,11 +5,10 @@ const remainingRouter = [
   {
     path: "/login",
     name: "login",
-    component: () => import("/@/views/login.vue"),
+    component: () => import("/@/views/login/index.vue"),
     meta: {
       title: $t("menus.hslogin"),
       showLink: false,
-      i18n: true,
       rank: 101
     }
   },
@@ -19,7 +18,6 @@ const remainingRouter = [
     meta: {
       icon: "home-filled",
       title: $t("menus.hshome"),
-      i18n: true,
       showLink: false,
       rank: 104
     },

src/router/modules/result.ts

@@ -8,7 +8,6 @@ const resultRouter = {
   meta: {
     icon: "checkbox-circle-line",
     title: $t("menus.hsResult"),
-    i18n: true,
     rank: 8
   },
   children: [
@@ -17,8 +16,7 @@ const resultRouter = {
       name: "reSuccess",
       component: () => import("/@/views/result/success.vue"),
       meta: {
-        title: $t("menus.hsSuccess"),
-        i18n: true
+        title: $t("menus.hsSuccess")
       }
     },
     {
@@ -26,8 +24,7 @@ const resultRouter = {
       name: "reFail",
       component: () => import("/@/views/result/fail.vue"),
       meta: {
-        title: $t("menus.hsFail"),
-        i18n: true
+        title: $t("menus.hsFail")
       }
     }
   ]

src/router/utils.ts

@@ -234,7 +234,11 @@ function addAsyncRoutes(arrRoutes: Array<RouteRecordRaw>) {
     } else if (v.meta?.frameSrc) {
       v.component = IFrame;
     } else {
-      const index = modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
+      // 对后端传component组件路径和不传做兼容（如果后端传component组件路径，那么path可以随便写，如果不传，component组件路径会根path保持一致）
+      const index = v?.component
+        ? // @ts-expect-error
+          modulesRoutesKeys.findIndex(ev => ev.includes(v.component))
+        : modulesRoutesKeys.findIndex(ev => ev.includes(v.path));
       v.component = modulesRoutes[modulesRoutesKeys[index]];
     }
     if (v.children) {

src/store/modules/multiTags.ts

@@ -17,8 +17,7 @@ export const useMultiTagsStore = defineStore({
             parentPath: "/",
             meta: {
               title: "menus.hshome",
-              icon: "home-filled",
-              i18n: true
+              icon: "home-filled"
             }
           }
         ],
@@ -89,7 +88,13 @@ export const useMultiTagsStore = defineStore({
           }
           break;
         case "splice":
-          this.multiTags.splice(position?.startIndex, position?.length);
+          if (!position) {
+            const index = this.multiTags.findIndex(v => v.path === value);
+            if (index === -1) return;
+            this.multiTags.splice(index, 1);
+          } else {
+            this.multiTags.splice(position?.startIndex, position?.length);
+          }
           this.tagsCache(this.multiTags);
           return this.multiTags;
         case "slice":

src/store/modules/permission.ts

@@ -1,9 +1,9 @@
 import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { cacheType } from "./types";
+import { constantMenus } from "/@/router";
 import { cloneDeep } from "lodash-unified";
 import { RouteConfigs } from "/@/layout/types";
-import { constantMenus } from "/@/router/modules";
 import { ascending, filterTree } from "/@/router/utils";
 
 export const usePermissionStore = defineStore({

src/store/modules/types.ts

@@ -38,4 +38,6 @@ export type setType = {
 export type userType = {
   token: string;
   name?: string;
+  verifyCode?: string;
+  currentPage?: number;
 };

src/store/modules/user.ts

@@ -2,8 +2,8 @@ import { defineStore } from "pinia";
 import { store } from "/@/store";
 import { userType } from "./types";
 import { router } from "/@/router";
+import { storageSession } from "/@/utils/storage";
 import { getLogin, refreshToken } from "/@/api/user";
-import { storageLocal, storageSession } from "/@/utils/storage";
 import { getToken, setToken, removeToken } from "/@/utils/auth";
 import { useMultiTagsStoreHook } from "/@/store/modules/multiTags";
 
@@ -22,7 +22,11 @@ export const useUserStore = defineStore({
   id: "pure-user",
   state: (): userType => ({
     token,
-    name
+    name,
+    // 前端生成的验证码（按实际需求替换）
+    verifyCode: "",
+    // 登陆显示组件判断 0：登陆 1：手机登陆 2：二维码登陆 3：注册 4：忘记密码，默认0：登陆
+    currentPage: 0
   }),
   actions: {
     SET_TOKEN(token) {
@@ -31,6 +35,12 @@ export const useUserStore = defineStore({
     SET_NAME(name) {
       this.name = name;
     },
+    SET_VERIFYCODE(verifyCode) {
+      this.verifyCode = verifyCode;
+    },
+    SET_CURRENTPAGE(value) {
+      this.currentPage = value;
+    },
     // 登入
     async loginByUsername(data) {
       return new Promise<void>((resolve, reject) => {
@@ -51,7 +61,6 @@ export const useUserStore = defineStore({
       this.token = "";
       this.name = "";
       removeToken();
-      storageLocal.clear();
       storageSession.clear();
       useMultiTagsStoreHook().handleTags("equal", [
         {
@@ -59,8 +68,7 @@ export const useUserStore = defineStore({
           parentPath: "/",
           meta: {
             title: "menus.hshome",
-            icon: "home-filled",
-            i18n: true
+            icon: "home-filled"
           }
         }
       ]);