Merge branch 'main' into feat/form

README.en-US.md

@@ -10,6 +10,12 @@
 
 `vue-pure-admin` is an open source, free and out-of-the-box middle and backend management system template. Completely adopts `ECMAScript` module (`ESM`) specifications to write and organize code, using the latest `Vue3`, `Vite`, `Element-Plus`, `TypeScript`, `Pinia`, `Tailwindcss` and other mainstream technologies develop
 
+## Sponsors
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>
+
 ## Thin version (offering non-internationalized and internationalized versions)
 
 The simplified version is based on the shelf extracted from [vue-pure-admin](https://github.com/pure-admin/vue-pure-admin), which contains main functions and is more suitable for actual project development. The packaged size is introduced globally [element-plus](https://element-plus.org) is still below `2.3MB`, and the full version of the code will be permanently synchronized. After enabling `brotli` compression and `cdn` to replace the local library mode, the package size is less than `350kb`

README.md

@@ -8,7 +8,14 @@
 
 ## 简介
 
-`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+`vue-pure-admin` 是一款开源免费且开箱即用的中后台管理系统模版。完全采用 `ECMAScript` 模块（`ESM`）规范来编写和组织代码，使用了最新的 `Vue3`、
+`Vite`、`Element-Plus`、`TypeScript`、`Pinia`、`Tailwindcss` 等主流技术开发
+
+## 赞助商
+
+<a class="logo" href="https://ai-tools.cn/resume/start" target="_blank" rel="sponsored noopener">
+  <img src="./public/sponsors/aitools.svg" alt="aitools">
+</a>
 
 ## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）
 

build/optimize.ts

@@ -16,6 +16,7 @@ const include = [
   "qrcode",
   "intro.js",
   "vue-i18n",
+  "vxe-table",
   "vue-types",
   "js-cookie",
   "vue-tippy",
@@ -44,6 +45,7 @@ const include = [
   "@amap/amap-jsapi-loader",
   "el-table-infinite-scroll",
   "vue-waterfall-plugin-next",
+  "@infectoone/vue-ganttastic",
   "@wangeditor/editor-for-vue",
   "vuedraggable/src/vuedraggable"
 ];

locales/en.yaml

@@ -26,6 +26,7 @@ menus:
   hshome: Home
   hslogin: Login
   hsempty: Empty Page
+  hstable: Table
   hssysManagement: System Manage
   hsUser: User Manage
   hsRole: Role Manage
@@ -70,6 +71,7 @@ menus:
   hsTag: Tag
   hsStatistic: Statistic
   hsCollapse: Collapse
+  hsGanttastic: Gantt Chart
   hsProgress: Progress
   hsUpload: File Upload
   hsCheckCard: CheckCard
@@ -92,6 +94,7 @@ menus:
   hsWavesurfer: Audio Visualization
   hsRipple: Ripple
   hsOptimize: Debounce、Throttle、Copy、Longpress Directives
+  hsVerify: Captcha
   hsWatermark: Water Mark
   hsPrint: Print
   hsDownload: Download
@@ -132,6 +135,7 @@ menus:
   hsPureTableBase: Base Usage
   hsPureTableHigh: High Usage
   hsPureTableEdit: Edit Usage
+  hsVxeTable: Virtual Usage
   hsboard: Paint Board
   hsMenuoverflow: Menu Overflow Show Tooltip Text
   hsChildMenuoverflow: Child Menu Overflow Show Tooltip Text

locales/zh-CN.yaml

@@ -26,6 +26,7 @@ menus:
   hshome: 首页
   hslogin: 登录
   hsempty: 无Layout页
+  hstable: 表格
   hssysManagement: 系统管理
   hsUser: 用户管理
   hsRole: 角色管理
@@ -70,6 +71,7 @@ menus:
   hsTag: 标签
   hsStatistic: 统计组件
   hsCollapse: 折叠面板
+  hsGanttastic: 甘特图
   hsProgress: 进度条
   hsUpload: 文件上传
   hsCheckCard: 多选卡片
@@ -92,6 +94,7 @@ menus:
   hsWavesurfer: 音频可视化
   hsRipple: 波纹(Ripple)
   hsOptimize: 防抖、截流、复制、长按指令
+  hsVerify: 图形验证码
   hsWatermark: 水印
   hsPrint: 打印
   hsDownload: 下载
@@ -132,6 +135,7 @@ menus:
   hsPureTableBase: 基础用法
   hsPureTableHigh: 高级用法
   hsPureTableEdit: 可编辑用法
+  hsVxeTable: 虚拟滚动
   hsboard: 艺术画板
   hsMenuoverflow: 目录超出显示 Tooltip 文字提示
   hsChildMenuoverflow: 菜单超出显示 Tooltip 文字提示

package.json

@@ -50,11 +50,14 @@
   "dependencies": {
     "@amap/amap-jsapi-loader": "^1.0.1",
     "@howdyjs/mouse-menu": "^2.1.3",
+    "@infectoone/vue-ganttastic": "^2.3.1",
     "@logicflow/core": "^1.2.22",
     "@logicflow/extension": "^1.2.22",
     "@pureadmin/descriptions": "^1.2.1",
     "@pureadmin/table": "^3.1.2",
     "@pureadmin/utils": "^2.4.7",
+    "@vue-flow/background": "^1.3.0",
+    "@vue-flow/core": "^1.33.4",
     "@vueuse/core": "^10.9.0",
     "@vueuse/motion": "^2.1.0",
     "@wangeditor/editor": "^5.1.23",
@@ -98,7 +101,9 @@
     "vue-virtual-scroller": "2.0.0-beta.8",
     "vue-waterfall-plugin-next": "^2.4.3",
     "vue3-danmaku": "^1.6.0",
+    "vue3-puzzle-vcode": "^1.1.7",
     "vuedraggable": "^4.1.0",
+    "vxe-table": "^4.5.21",
     "wavesurfer.js": "^7.7.5",
     "xgplayer": "^3.0.14",
     "xlsx": "^0.18.5"
@@ -114,6 +119,7 @@
     "@iconify/vue": "^4.1.1",
     "@intlify/unplugin-vue-i18n": "^2.0.0",
     "@pureadmin/theme": "^3.2.0",
+    "@types/dagre": "^0.7.52",
     "@types/gradient-string": "^1.1.5",
     "@types/intro.js": "^5.1.5",
     "@types/js-cookie": "^3.0.6",
@@ -130,6 +136,7 @@
     "boxen": "^7.1.1",
     "cloc": "^2.11.0",
     "cssnano": "^6.1.0",
+    "dagre": "^0.8.5",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-define-config": "^2.1.0",

pnpm-lock.yaml

@@ -11,6 +11,9 @@ dependencies:
   '@howdyjs/mouse-menu':
     specifier: ^2.1.3
     version: 2.1.3(vue@3.4.21)
+  '@infectoone/vue-ganttastic':
+    specifier: ^2.3.1
+    version: 2.3.1(dayjs@1.11.10)(vue@3.4.21)
   '@logicflow/core':
     specifier: ^1.2.22
     version: 1.2.22
@@ -26,6 +29,12 @@ dependencies:
   '@pureadmin/utils':
     specifier: ^2.4.7
     version: 2.4.7(echarts@5.5.0)(vue@3.4.21)
+  '@vue-flow/background':
+    specifier: ^1.3.0
+    version: 1.3.0(@vue-flow/core@1.33.4)(vue@3.4.21)
+  '@vue-flow/core':
+    specifier: ^1.33.4
+    version: 1.33.4(vue@3.4.21)
   '@vueuse/core':
     specifier: ^10.9.0
     version: 10.9.0(vue@3.4.21)
@@ -155,9 +164,15 @@ dependencies:
   vue3-danmaku:
     specifier: ^1.6.0
     version: 1.6.0(vue@3.4.21)
+  vue3-puzzle-vcode:
+    specifier: ^1.1.7
+    version: 1.1.7
   vuedraggable:
     specifier: ^4.1.0
     version: 4.1.0(vue@3.4.21)
+  vxe-table:
+    specifier: ^4.5.21
+    version: 4.5.21(vue@3.4.21)(xe-utils@3.5.22)
   wavesurfer.js:
     specifier: ^7.7.5
     version: 7.7.5
@@ -199,6 +214,9 @@ devDependencies:
   '@pureadmin/theme':
     specifier: ^3.2.0
     version: 3.2.0
+  '@types/dagre':
+    specifier: ^0.7.52
+    version: 0.7.52
   '@types/gradient-string':
     specifier: ^1.1.5
     version: 1.1.5
@@ -247,6 +265,9 @@ devDependencies:
   cssnano:
     specifier: ^6.1.0
     version: 6.1.0(postcss@8.4.35)
+  dagre:
+    specifier: ^0.8.5
+    version: 0.8.5
   eslint:
     specifier: ^8.57.0
     version: 8.57.0
@@ -1306,6 +1327,19 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: true
 
+  /@infectoone/vue-ganttastic@2.3.1(dayjs@1.11.10)(vue@3.4.21):
+    resolution: {integrity: sha512-2P53V2N3SagJhqDMogcfpm50qIhqxEINufJBdWUGGZutnEquLg4CQThHysJsNZ11tght8TUPlBM10wHnZAMGiQ==}
+    peerDependencies:
+      dayjs: ^1.11.5
+      vue: ^3.2.40
+    dependencies:
+      '@vueuse/core': 9.13.0(vue@3.4.21)
+      dayjs: 1.11.10
+      vue: 3.4.21(typescript@5.4.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /@intlify/bundle-utils@7.5.1(vue-i18n@9.10.1):
     resolution: {integrity: sha512-UovJl10oBIlmYEcWw+VIHdKY5Uv5sdPG0b/b6bOYxGLln3UwB75+2dlc0F3Fsa0RhoznQ5Rp589/BZpABpE4Xw==}
     engines: {node: '>= 14.16'}
@@ -2025,6 +2059,10 @@ packages:
       '@types/node': 20.11.27
     dev: true
 
+  /@types/dagre@0.7.52:
+    resolution: {integrity: sha512-XKJdy+OClLk3hketHi9Qg6gTfe1F3y+UFnHxKA2rn9Dw+oXa4Gb378Ztz9HlMgZKSxpPmn4BNVh9wgkpvrK1uw==}
+    dev: true
+
   /@types/estree@1.0.5:
     resolution: {integrity: sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==}
 
@@ -2374,6 +2412,30 @@ packages:
       path-browserify: 1.0.1
     dev: true
 
+  /@vue-flow/background@1.3.0(@vue-flow/core@1.33.4)(vue@3.4.21):
+    resolution: {integrity: sha512-fu/8s9wzSOQIitnSTI10XT3bzTtagh4h8EF2SWwtlDklOZjAaKy75lqv4htHa3wigy/r4LGCOGwLw3Pk88/AxA==}
+    peerDependencies:
+      '@vue-flow/core': ^1.23.0
+      vue: ^3.3.0
+    dependencies:
+      '@vue-flow/core': 1.33.4(vue@3.4.21)
+      vue: 3.4.21(typescript@5.4.2)
+    dev: false
+
+  /@vue-flow/core@1.33.4(vue@3.4.21):
+    resolution: {integrity: sha512-ryoamKfQ5pgtdv//Gjpyc4nsawMOwfI2jVzOPvZ92VQs78L4lidiWD7UybqeEkrGw6UPue1CGlzoy/4KlOWcSg==}
+    peerDependencies:
+      vue: ^3.3.0
+    dependencies:
+      '@vueuse/core': 10.9.0(vue@3.4.21)
+      d3-drag: 3.0.0
+      d3-selection: 3.0.0
+      d3-zoom: 3.0.0
+      vue: 3.4.21(typescript@5.4.2)
+    transitivePeerDependencies:
+      - '@vue/composition-api'
+    dev: false
+
   /@vue/babel-helper-vue-transform-on@1.2.2:
     resolution: {integrity: sha512-nOttamHUR3YzdEqdM/XXDyCSdxMA9VizUKoroLX6yTyRtggzQMHXcmwh8a7ZErcJttIBIc9s68a1B8GZ+Dmvsw==}
     dev: true
@@ -3857,6 +3919,71 @@ packages:
   /csstype@3.1.3:
     resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==}
 
+  /d3-color@3.1.0:
+    resolution: {integrity: sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-dispatch@3.0.1:
+    resolution: {integrity: sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-drag@3.0.0:
+    resolution: {integrity: sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-selection: 3.0.0
+    dev: false
+
+  /d3-ease@3.0.1:
+    resolution: {integrity: sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-interpolate@3.0.1:
+    resolution: {integrity: sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-color: 3.1.0
+    dev: false
+
+  /d3-selection@3.0.0:
+    resolution: {integrity: sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-timer@3.0.1:
+    resolution: {integrity: sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==}
+    engines: {node: '>=12'}
+    dev: false
+
+  /d3-transition@3.0.1(d3-selection@3.0.0):
+    resolution: {integrity: sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==}
+    engines: {node: '>=12'}
+    peerDependencies:
+      d3-selection: 2 - 3
+    dependencies:
+      d3-color: 3.1.0
+      d3-dispatch: 3.0.1
+      d3-ease: 3.0.1
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-timer: 3.0.1
+    dev: false
+
+  /d3-zoom@3.0.0:
+    resolution: {integrity: sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==}
+    engines: {node: '>=12'}
+    dependencies:
+      d3-dispatch: 3.0.1
+      d3-drag: 3.0.0
+      d3-interpolate: 3.0.1
+      d3-selection: 3.0.0
+      d3-transition: 3.0.1(d3-selection@3.0.0)
+    dev: false
+
   /d@1.0.2:
     resolution: {integrity: sha512-MOqHvMWF9/9MX6nza0KgvFH4HpMU0EF5uUDXqX/BtxtU8NfB0QzRtJ8Oe/6SuS4kbhyzVJwjd97EA4PKrzJ8bw==}
     engines: {node: '>=0.12'}
@@ -3865,6 +3992,13 @@ packages:
       type: 2.7.2
     dev: false
 
+  /dagre@0.8.5:
+    resolution: {integrity: sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==}
+    dependencies:
+      graphlib: 2.1.8
+      lodash: 4.17.21
+    dev: true
+
   /danmu.js@1.1.13:
     resolution: {integrity: sha512-knFd0/cB2HA4FFWiA7eB2suc5vCvoHdqio33FyyCSfP7C+1A+zQcTvnvwfxaZhrxsGj4qaQI2I8XiTqedRaVmg==}
     dependencies:
@@ -4035,6 +4169,10 @@ packages:
       entities: 4.5.0
     dev: true
 
+  /dom-zindex@1.0.1:
+    resolution: {integrity: sha512-M/MERVDZ8hguvjl6MAlLWSLYLS7PzEyXaTb5gEeJ+SF+e9iUC0sdvlzqe91MMDHBoy+nqw7wKcUOrDSyvMCrRg==}
+    dev: false
+
   /dom7@3.0.0:
     resolution: {integrity: sha512-oNlcUdHsC4zb7Msx7JN3K0Nro1dzJ48knvBOnDPKJ2GV9wl1i5vydJZUSyOfrkKFDZEud/jBsTk92S/VGSAe/g==}
     dependencies:
@@ -4968,6 +5106,12 @@ packages:
     resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==}
     dev: true
 
+  /graphlib@2.1.8:
+    resolution: {integrity: sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==}
+    dependencies:
+      lodash: 4.17.21
+    dev: true
+
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -9097,6 +9241,10 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /vue3-puzzle-vcode@1.1.7:
+    resolution: {integrity: sha512-mW780dz7HKjrElnE60CeYSeHGidKBKHoMjTDYfqF21330rTkFOsfDK1FQKZ22MktgMtTEoS/imfpEDlM1cxY/g==}
+    dev: false
+
   /vue@3.4.21(typescript@5.4.2):
     resolution: {integrity: sha512-5hjyV/jLEIKD/jYl4cavMcnzKwjMKohureP8ejn3hhEjwhWIhWeuzL2kJAjzl/WyVsgPY56Sy4Z40C3lVshxXA==}
     peerDependencies:
@@ -9121,6 +9269,17 @@ packages:
       vue: 3.4.21(typescript@5.4.2)
     dev: false
 
+  /vxe-table@4.5.21(vue@3.4.21)(xe-utils@3.5.22):
+    resolution: {integrity: sha512-yp+BNGCy61lk7ayf0LI3UNcR2fRmipGSiIAh3lNOIdyW1nAobf/GwIx3rXghjzFb0a6NNJeYxv2NM+gwXxtmww==}
+    peerDependencies:
+      vue: ^3.2.28
+      xe-utils: ^3.5.0
+    dependencies:
+      dom-zindex: 1.0.1
+      vue: 3.4.21(typescript@5.4.2)
+      xe-utils: 3.5.22
+    dev: false
+
   /w3c-hr-time@1.0.2:
     resolution: {integrity: sha512-z8P5DvDNjKDoFIHK7q8r8lackT6l+jo/Ye3HOle7l9nICP9lf1Ci25fy9vHd0JOWewkIFzXIEig3TdKT7JQ5fQ==}
     deprecated: Use your platform's native performance.now() and performance.timeOrigin.
@@ -9311,6 +9470,10 @@ packages:
         optional: true
     dev: false
 
+  /xe-utils@3.5.22:
+    resolution: {integrity: sha512-rhWuM2fVXsdrqUtyjRAsYTDLvVzYSSZqg/uCRyDqcw96AweB1AWsnTJZyl9g68ejnP0xhxfSoNBSrIcOeX1yxA==}
+    dev: false
+
   /xgplayer-subtitles@3.0.14(core-js@3.36.1):
     resolution: {integrity: sha512-w6H1h+g3kOI477kv2QBRMZe3M/1dHLXttHBwq4LwKTPGVQ19fLIDGwkfn+HeKwe1ocGDaaq96bS+l+BadnP9TA==}
     peerDependencies:

public/platform-config.json

@@ -25,7 +25,7 @@
   "ResponsiveStorageNameSpace": "responsive-",
   "MenuSearchHistory": 6,
   "MapConfigure": {
-    "amapKey": "97b3248d1553172e81f168cf94ea667e",
+    "amapKey": "adc139d56406f3844c8f1cf1c6b65c41",
     "options": {
       "resizeEnable": true,
       "center": [113.6401, 34.72468],

src/components/ReIcon/src/offlineIcon.ts

@@ -31,6 +31,7 @@ import Links from "@iconify-icons/ri/links-fill";
 import Search from "@iconify-icons/ri/search-line";
 import FlUser from "@iconify-icons/ri/admin-line";
 import Setting from "@iconify-icons/ri/settings-3-line";
+import BarChart from "@iconify-icons/ri/bar-chart-horizontal-line";
 import LoginLog from "@iconify-icons/ri/window-line";
 import Artboard from "@iconify-icons/ri/artboard-line";
 import SystemLog from "@iconify-icons/ri/file-search-line";
@@ -53,6 +54,7 @@ addIcon("ri:table-line", Table);
 addIcon("ri:search-line", Search);
 addIcon("ri:admin-line", FlUser);
 addIcon("ri:settings-3-line", Setting);
+addIcon("ri:bar-chart-horizontal-line", BarChart);
 addIcon("ri:window-line", LoginLog);
 addIcon("ri:file-search-line", SystemLog);
 addIcon("ri:artboard-line", Artboard);

src/components/ReSegmented/src/index.css

@@ -8,6 +8,21 @@
   border-radius: 2px;
 }
 
+.pure-segmented-block {
+  display: flex;
+}
+
+.pure-segmented-block .pure-segmented-item {
+  flex: 1;
+  min-width: 0;
+}
+
+.pure-segmented-block .pure-segmented-item > .pure-segmented-item-label > span {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .pure-segmented-group {
   position: relative;
   display: flex;
@@ -67,6 +82,7 @@
 .pure-segmented-item-label {
   display: flex;
   align-items: center;
+  justify-content: center;
 }
 
 .pure-segmented-item-icon svg {

src/components/ReSegmented/src/index.tsx

@@ -10,7 +10,12 @@ import {
 } from "vue";
 import type { OptionsType } from "./type";
 import { useRenderIcon } from "@/components/ReIcon/src/hooks";
-import { isFunction, isNumber, useDark } from "@pureadmin/utils";
+import {
+  isFunction,
+  isNumber,
+  useDark,
+  useResizeObserver
+} from "@pureadmin/utils";
 
 const props = {
   options: {
@@ -22,6 +27,11 @@ const props = {
     type: undefined,
     require: false,
     default: "0"
+  },
+  /** 将宽度调整为父元素宽度	 */
+  block: {
+    type: Boolean,
+    default: false
   }
 };
 
@@ -77,6 +87,14 @@ export default defineComponent({
       });
     }
 
+    if (props.block) {
+      useResizeObserver(".pure-segmented", () => {
+        nextTick(() => {
+          handleInit(curIndex.value);
+        });
+      });
+    }
+
     watch(
       () => curIndex.value,
       index => {
@@ -148,7 +166,9 @@ export default defineComponent({
     };
 
     return () => (
-      <div class="pure-segmented">
+      <div
+        class={["pure-segmented", props.block ? "pure-segmented-block" : ""]}
+      >
         <div class="pure-segmented-group">
           <div
             class="pure-segmented-item-selected"

src/main.ts

@@ -6,6 +6,7 @@ import { getPlatformConfig } from "./config";
 import { MotionPlugin } from "@vueuse/motion";
 import { useEcharts } from "@/plugins/echarts";
 import { createApp, type Directive } from "vue";
+import { useVxeTable } from "@/plugins/vxeTable";
 import { useElementPlus } from "@/plugins/elementPlus";
 import { injectResponsiveStorage } from "@/utils/responsive";
 
@@ -61,6 +62,7 @@ getPlatformConfig(app).then(async config => {
     .use(useI18n)
     .use(useElementPlus)
     .use(Table)
+    .use(useVxeTable)
     .use(PureDescriptions)
     .use(useEcharts);
   app.mount("#app");

src/plugins/vxeTable.ts

@@ -0,0 +1,102 @@
+import "vxe-table/lib/style.css";
+// import "xe-utils";
+// import XEUtils from "xe-utils";
+import type { App } from "vue";
+// import { i18n } from "@/plugins/i18n";
+// import zh from "vxe-table/lib/locale/lang/zh-CN";
+// import en from "vxe-table/lib/locale/lang/en-US";
+
+import {
+  // 全局对象
+  VXETable,
+  // 表格功能
+  // Filter,
+  // Edit,
+  // Menu,
+  // Export,
+  // Keyboard,
+  // Validator,
+  // 可选组件
+  Icon,
+  Column,
+  // Colgroup,
+  // Grid,
+  // Tooltip,
+  // Toolbar,
+  // Pager,
+  // Form,
+  // FormItem,
+  // FormGather,
+  // Checkbox,
+  // CheckboxGroup,
+  // Radio,
+  // RadioGroup,
+  // RadioButton,
+  // Switch,
+  // Input,
+  // Select,
+  // Optgroup,
+  // Option,
+  // Textarea,
+  // Button,
+  // Modal,
+  // List,
+  // Pulldown,
+  // 表格
+  Table
+} from "vxe-table";
+
+// 全局默认参数
+VXETable.config({
+  // i18n: (key, args) => {
+  //   return unref(i18n.global.locale) === "zh"
+  //     ? XEUtils.toFormatString(XEUtils.get(zh, key), args)
+  //     : XEUtils.toFormatString(XEUtils.get(en, key), args);
+  // },
+  // translate(key) {
+  //   const NAMESPACED = ["el.", "buttons."];
+  //   if (key && NAMESPACED.findIndex(v => key.includes(v)) !== -1) {
+  //     return i18n.global.t.call(i18n.global.locale, key);
+  //   }
+  //   return key;
+  // }
+});
+
+export function useVxeTable(app: App) {
+  // 表格功能
+  // app.use(Filter)
+  // .use(Edit)
+  // .use(Menu)
+  // .use(Export)
+  // .use(Keyboard)
+  // .use(Validator)
+  // 可选组件
+  app
+    .use(Icon)
+    .use(Column)
+    // .use(Colgroup)
+    // .use(Grid)
+    // .use(Tooltip)
+    // .use(Toolbar)
+    // .use(Pager)
+    // .use(Form)
+    // .use(FormItem)
+    // .use(FormGather)
+    // .use(Checkbox)
+    // .use(CheckboxGroup)
+    // .use(Radio)
+    // .use(RadioGroup)
+    // .use(RadioButton)
+    // .use(Switch)
+    // .use(Input)
+    // .use(Select)
+    // .use(Optgroup)
+    // .use(Option)
+    // .use(Textarea)
+    // .use(Button)
+    // .use(Modal)
+    // .use(List)
+    // .use(Pulldown)
+    // 安装表格
+    .use(Table);
+}

src/router/enums.ts

@@ -1,30 +1,34 @@
 // 完整版菜单比较多，将 rank 抽离出来，在此方便维护
 
 const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
-  components = 1,
+  vueflow = 1,
-  able = 2,
+  ganttastic = 2,
-  table = 3,
+  components = 3,
-  form = 4,
+  able = 4,
-  list = 5,
+  table = 5,
-  result = 6,
+  form = 6,
-  error = 7,
+  list = 7,
-  frame = 8,
+  result = 8,
-  nested = 9,
+  error = 9,
-  permission = 10,
+  frame = 10,
-  system = 11,
+  nested = 11,
-  monitor = 12,
+  permission = 12,
-  tabs = 13,
+  system = 13,
-  about = 14,
+  monitor = 14,
-  editor = 15,
+  tabs = 15,
-  flowchart = 16,
+  about = 16,
-  formdesign = 17,
+  editor = 17,
-  board = 18,
+  flowchart = 18,
-  ppt = 19,
+  formdesign = 19,
-  guide = 20,
+  board = 20,
-  menuoverflow = 21;
+  ppt = 21,
+  guide = 22,
+  menuoverflow = 23;
 
 export {
   home,
+  vueflow,
+  ganttastic,
   components,
   able,
   table,

src/router/modules/able.ts

@@ -10,6 +10,15 @@ export default {
     rank: able
   },
   children: [
+    {
+      path: "/able/verify",
+      name: "Verify",
+      component: () => import("@/views/able/verify.vue"),
+      meta: {
+        title: $t("menus.hsVerify"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    },
     {
       path: "/able/watermark",
       name: "WaterMark",

src/router/modules/ganttastic.ts

@@ -0,0 +1,23 @@
+import { $t } from "@/plugins/i18n";
+import { ganttastic } from "@/router/enums";
+
+export default {
+  path: "/ganttastic",
+  redirect: "/ganttastic/index",
+  meta: {
+    icon: "ri:bar-chart-horizontal-line",
+    title: $t("menus.hsGanttastic"),
+    rank: ganttastic
+  },
+  children: [
+    {
+      path: "/ganttastic/index",
+      name: "Ganttastic",
+      component: () => import("@/views/ganttastic/index.vue"),
+      meta: {
+        title: $t("menus.hsGanttastic"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/router/modules/table.ts

@@ -2,38 +2,47 @@ import { $t } from "@/plugins/i18n";
 import { table } from "@/router/enums";
 
 export default {
-  path: "/pure-table",
+  path: "/table",
-  redirect: "/pure-table/index",
+  redirect: "/table/index",
   meta: {
     icon: "ri:table-line",
-    title: "pure-admin-table",
+    title: $t("menus.hstable"),
     rank: table
   },
   children: [
     {
-      path: "/pure-table/index",
+      path: "/table/index",
       name: "PureTable",
-      component: () => import("@/views/pure-table/index.vue"),
+      component: () => import("@/views/table/index.vue"),
       meta: {
         title: $t("menus.hsPureTableBase")
       }
     },
     {
-      path: "/pure-table/high",
+      path: "/table/high",
       name: "PureTableHigh",
-      component: () => import("@/views/pure-table/high.vue"),
+      component: () => import("@/views/table/high.vue"),
       meta: {
         title: $t("menus.hsPureTableHigh")
       }
     },
     {
-      path: "/pure-table/edit",
+      path: "/table/edit",
       name: "PureTableEdit",
-      component: () => import("@/views/pure-table/edit.vue"),
+      component: () => import("@/views/table/edit.vue"),
       meta: {
         title: $t("menus.hsPureTableEdit"),
         extraIcon: "IF-pure-iconfont-new svg"
       }
+    },
+    {
+      path: "/table/virtual",
+      name: "VxeTable",
+      component: () => import("@/views/table/virtual.vue"),
+      meta: {
+        title: $t("menus.hsVxeTable"),
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
     }
   ]
 } satisfies RouteConfigsTable;

src/router/modules/vueflow.ts

@@ -0,0 +1,22 @@
+import { vueflow } from "@/router/enums";
+
+export default {
+  path: "/vue-flow",
+  redirect: "/vue-flow/index",
+  meta: {
+    icon: "ep:set-up",
+    title: "vue-flow",
+    rank: vueflow
+  },
+  children: [
+    {
+      path: "/vue-flow/index",
+      name: "VueFlow",
+      component: () => import("@/views/vue-flow/layouting/index.vue"),
+      meta: {
+        title: "vue-flow",
+        extraIcon: "IF-pure-iconfont-new svg"
+      }
+    }
+  ]
+} satisfies RouteConfigsTable;

src/style/dark.scss

@@ -14,6 +14,67 @@ html.dark {
   /* switch关闭状态下的color 需要时可取用 */
   --pure-switch-off-color: #ffffff3f;
 
+  /* vxe-table */
+  --vxe-form-background-color: #151515;
+  --vxe-toolbar-background-color: #151515;
+  --vxe-pager-background-color: #151515;
+  --vxe-button-default-background-color: color.adjust(#151515, $lightness: 15%);
+  --vxe-table-header-background-color: color.adjust(#151515, $lightness: 5%);
+  --vxe-font-color: color.adjust(#c9d1d9, $lightness: -12%);
+  --vxe-table-header-font-color: #c9d1d9;
+  --vxe-table-footer-font-color: #c9d1d9;
+  --vxe-table-body-background-color: #151515;
+  --vxe-table-footer-background-color: #151515;
+  --vxe-table-row-striped-background-color: #1e1e1e;
+  --vxe-table-border-color: #303030;
+  --vxe-table-row-hover-background-color: #1e1e1e;
+  --vxe-table-row-hover-striped-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: -10%
+  );
+  --vxe-table-row-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-hover-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-hover-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-column-current-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-row-checkbox-checked-background-color: fade(#1e1e1e, 15%);
+  --vxe-table-row-hover-checkbox-checked-background-color: fade(#1e1e1e, 20%);
+  --vxe-table-menu-background-color: color.adjust(#303133, $lightness: 10%);
+  --vxe-table-filter-panel-background-color: color.adjust(
+    #151515,
+    $lightness: 5%
+  );
+  --vxe-grid-maximize-background-color: #151515;
+  --vxe-pager-perfect-background-color: #151515;
+  --vxe-pager-perfect-button-background-color: color.adjust(
+    #151515,
+    $lightness: 15%
+  );
+  --vxe-input-background-color: #151515;
+  --vxe-input-border-color: #303030;
+  --vxe-select-panel-background-color: #151515;
+  --vxe-table-popup-border-color: #303030;
+  --vxe-select-option-hover-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+  --vxe-pulldown-panel-background-color: #151515;
+  --vxe-table-fixed-left-scrolling-box-shadow: 8px 0px 10px -5px #43464c;
+  --vxe-table-fixed-right-scrolling-box-shadow: -8px 0px 10px -5px #43464c;
+  --vxe-loading-background-color: rgb(0 0 0 / 50%);
+  --vxe-tooltip-dark-background-color: color.adjust(#303133, $lightness: 25%);
+  --vxe-modal-header-background-color: #1e1e1e;
+  --vxe-modal-body-background-color: #303133;
+  --vxe-modal-border-color: #303030;
+  --vxe-toolbar-panel-background-color: #151515;
+  --vxe-input-disabled-color: color.adjust(#1e1e1e, $lightness: 20%);
+  --vxe-input-disabled-background-color: color.adjust(#1e1e1e, $lightness: 25%);
+  --vxe-checkbox-icon-background-color: color.adjust(#1e1e1e, $lightness: 15%);
+  --vxe-checkbox-checked-icon-border-color: #303030;
+  --vxe-checkbox-indeterminate-icon-background-color: color.adjust(
+    #1e1e1e,
+    $lightness: 15%
+  );
+
   .navbar,
   .tags-view,
   .contextmenu,

src/views/able/verify.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import Vcode from "vue3-puzzle-vcode";
+
+const isShow = ref(true);
+
+function onSuccess() {
+  console.log("验证成功");
+}
+
+function onFail() {
+  console.log("验证失败");
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="font-medium">
+        拼图人机验证、右滑拼图验证（
+        <el-link
+          href="https://github.com/javaLuo/vue-puzzle-vcode/tree/vue3"
+          target="_blank"
+          style="margin: 0 5px 4px 0; font-size: 16px"
+        >
+          github地址
+        </el-link>
+        ）
+      </div>
+    </template>
+    <div class="bg-[rgba(15,23,42,0.2)] p-6 w-[360px]">
+      <Vcode :show="isShow" type="inside" @fail="onFail" @success="onSuccess" />
+    </div>
+  </el-card>
+</template>

src/views/components/segmented.vue

@@ -75,6 +75,26 @@ const optionsDisabled: Array<OptionsType> = [
   }
 ];
 
+/** block */
+const optionsBlock: Array<OptionsType> = [
+  {
+    label: "周一"
+  },
+  {
+    label: "周二"
+  },
+  {
+    label: "周三"
+  },
+  {
+    label: "周四"
+  },
+  {
+    label: "周五喜悦，收尾归档，周末倒计时",
+    tip: "周五喜悦，收尾归档，周末倒计时"
+  }
+];
+
 /** 可设置图标 */
 const optionsIcon: Array<OptionsType> = [
   {
@@ -198,6 +218,9 @@ function onChange({ index, option }) {
       <p class="mb-2">禁用</p>
       <Segmented :options="optionsDisabled" />
       <el-divider />
+      <p class="mb-2">block 属性(将宽度调整为父元素宽度)</p>
+      <Segmented :options="optionsBlock" block />
+      <el-divider />
       <p class="mb-2">可设置图标</p>
       <Segmented :options="optionsIcon" />
       <el-divider />

src/views/ganttastic/index.vue

@@ -0,0 +1,170 @@
+<script setup lang="ts">
+import { ref } from "vue";
+// https://zunnzunn.github.io/vue-ganttastic/introduction.html
+import { GGanttChart, GGanttRow } from "@infectoone/vue-ganttastic";
+
+const context = ref([
+  [
+    {
+      week: "星期一",
+      beginDate: "06:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "0",
+        hasHandles: true,
+        label: "需求收集和分析  负责人：小张",
+        style: {
+          background: "#e96560"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期二",
+      beginDate: "09:00",
+      endDate: "18:00",
+      ganttBarConfig: {
+        id: "1",
+        hasHandles: true,
+        label: "系统设计  负责人：小强",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期三",
+      beginDate: "07:00",
+      endDate: "20:00",
+      ganttBarConfig: {
+        id: "2",
+        hasHandles: true,
+        label: "编码实现  负责人：老李",
+        style: {
+          background: "#77d6fa"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期四",
+      beginDate: "06:00",
+      endDate: "21:00",
+      ganttBarConfig: {
+        id: "3",
+        hasHandles: true,
+        label: "编码实现  负责人：小明",
+        style: {
+          color: "#fff",
+          background: "#1b2a47"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期五",
+      beginDate: "05:00",
+      endDate: "19:00",
+      ganttBarConfig: {
+        id: "4",
+        hasHandles: true,
+        label: "内部测试  负责人：小雪",
+        style: {
+          background: "#5ccfa3"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期六",
+      beginDate: "10:00",
+      endDate: "22:00",
+      ganttBarConfig: {
+        id: "5",
+        hasHandles: true,
+        label: "系统优化和文档整理  负责人：小欣",
+        style: {
+          background: "#f8bc45"
+        }
+      }
+    }
+  ],
+  [
+    {
+      week: "星期天",
+      beginDate: "04:00",
+      endDate: "23:59",
+      ganttBarConfig: {
+        id: "6",
+        immobile: false,
+        hasHandles: false,
+        label: "部署和上线  负责人：老王",
+        style: {
+          background: "#f3953d"
+        }
+      }
+    }
+  ]
+]);
+
+function getWeekRange() {
+  const today = new Date();
+  const dayOfWeek = today.getDay();
+
+  const startDate = new Date(today);
+  startDate.setDate(today.getDate() - dayOfWeek + 1);
+
+  const endDate = new Date(startDate);
+  endDate.setDate(startDate.getDate() + 6);
+
+  const formatDate = date => {
+    const year = date.getFullYear();
+    const month = String(date.getMonth() + 1).padStart(2, "0");
+    const day = String(date.getDate()).padStart(2, "0");
+    return `${year}-${month}-${day}`;
+  };
+
+  const currentWeekStart = formatDate(startDate);
+  const currentWeekEnd = formatDate(endDate);
+
+  return {
+    currentWeekStart,
+    currentWeekEnd
+  };
+}
+
+const weekRangeInChina = getWeekRange();
+</script>
+
+<template>
+  <g-gantt-chart
+    chart-start="00:00"
+    chart-end="23:59"
+    precision="hour"
+    date-format="HH:mm"
+    bar-start="beginDate"
+    bar-end="endDate"
+    grid
+  >
+    <template #upper-timeunit>
+      <h1>
+        {{
+          `${weekRangeInChina.currentWeekStart} / ${weekRangeInChina.currentWeekEnd}`
+        }}
+      </h1>
+    </template>
+    <g-gantt-row
+      v-for="(item, index) in context"
+      :key="index"
+      :bars="item"
+      :label="item[0].week"
+      highlight-on-hover
+    />
+  </g-gantt-chart>
+</template>

src/views/table/base/list.tsx

@@ -22,7 +22,7 @@ import NestProp from "./nestProp.vue";
 import ImgPreview from "./imgPreview.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/base/${val}.vue`;
+  `代码位置：src/views/table/base/${val}.vue`;
 
 export const list = [
   {

src/views/table/edit/list.tsx

@@ -3,7 +3,7 @@ import Demo2 from "./demo2/index.vue";
 import Demo3 from "./demo3/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/edit/${val}/index.vue`;
+  `代码位置：src/views/table/edit/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/high/list.tsx

@@ -10,7 +10,7 @@ import Echarts from "./echarts/index.vue";
 import TableSelect from "./table-select/index.vue";
 
 const rendContent = (val: string) =>
-  `代码位置：src/views/pure-table/high/${val}/index.vue`;
+  `代码位置：src/views/table/high/${val}/index.vue`;
 
 export const list = [
   {

src/views/table/virtual.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { list } from "./virtual/list";
+
+defineOptions({
+  name: "VxeTable"
+});
+
+const selected = ref(0);
+
+function tabClick({ index }) {
+  selected.value = index;
+}
+</script>
+
+<template>
+  <el-card shadow="never">
+    <template #header>
+      <div class="card-header">
+        <span class="font-medium">
+          虚拟滚动采用
+          <el-link
+            href="https://vxetable.cn/#/table/scroll/scroll"
+            target="_blank"
+            style="margin: 0 4px 5px; font-size: 16px"
+          >
+            vxe-table
+          </el-link>
+        </span>
+      </div>
+    </template>
+
+    <el-tabs @tab-click="tabClick">
+      <template v-for="(item, index) of list" :key="item.key">
+        <el-tab-pane :lazy="true">
+          <template #label>
+            <el-tooltip
+              :content="`（第 ${index + 1} 个示例）${item.content}`"
+              placement="top-end"
+            >
+              <span>{{ item.title }}</span>
+            </el-tooltip>
+          </template>
+          <component :is="item.component" v-if="selected == index" />
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </el-card>
+</template>
+
+<style scoped>
+:deep(.el-tabs__nav-wrap)::after {
+  height: 1px;
+}
+
+:deep(.el-tabs__nav-next),
+:deep(.el-tabs__nav-prev) {
+  font-size: 16px;
+  color: var(--el-text-color-primary);
+}
+
+:deep(.el-tabs__nav-next.is-disabled),
+:deep(.el-tabs__nav-prev.is-disabled) {
+  opacity: 0.5;
+}
+</style>

src/views/table/virtual/list.tsx

@@ -0,0 +1,20 @@
+import List from "./list.vue";
+import TreeList from "./treeList.vue";
+
+const rendContent = (val: string) =>
+  `代码位置：src/views/table/virtual/${val}.vue`;
+
+export const list = [
+  {
+    key: "list",
+    content: rendContent("list"),
+    title: "虚拟列表",
+    component: List
+  },
+  {
+    key: "treeList",
+    content: rendContent("treeList"),
+    title: "虚拟树",
+    component: TreeList
+  }
+];

src/views/table/virtual/list.vue

@@ -0,0 +1,35 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+
+const tableData = ref([]);
+
+setTimeout(() => {
+  // 模拟数据
+  const mockList = [];
+  for (let index = 0; index < 500; index++) {
+    mockList.push({
+      id: index,
+      name: "Test" + index,
+      role: "Developer",
+      sex: "男"
+    });
+  }
+  tableData.value = mockList;
+}, 100);
+</script>
+
+<template>
+  <vxe-table
+    border
+    show-overflow
+    height="500"
+    :row-config="{ isHover: true }"
+    :data="tableData"
+    :scroll-y="{ enabled: true }"
+  >
+    <vxe-column type="seq" title="序号" width="100" />
+    <vxe-column field="name" title="名称" sortable />
+    <vxe-column field="role" title="角色" />
+    <vxe-column field="sex" title="性别" />
+  </vxe-table>
+</template>

src/views/table/virtual/treeList.vue

@@ -0,0 +1,56 @@
+<script lang="ts" setup>
+import { ref } from "vue";
+import treeList from "./tree.json";
+
+const tableRef = ref();
+
+const loading = ref(false);
+const tableData = ref([]);
+
+const loadList = () => {
+  loading.value = true;
+  setTimeout(() => {
+    tableData.value = treeList;
+    loading.value = false;
+  }, 200);
+};
+
+const expandAllEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.setAllTreeExpand(true);
+  }
+};
+
+const claseExpandEvent = () => {
+  const $table = tableRef.value;
+  if ($table) {
+    $table.clearTreeExpand();
+  }
+};
+
+loadList();
+</script>
+
+<template>
+  <div>
+    <div class="mb-4">
+      <el-button @click="expandAllEvent">展开所有</el-button>
+      <el-button @click="claseExpandEvent">收起所有</el-button>
+    </div>
+
+    <vxe-table
+      ref="tableRef"
+      show-overflow
+      height="500"
+      :loading="loading"
+      :tree-config="{ transform: true }"
+      :scroll-y="{ enabled: true, gt: 20 }"
+      :data="tableData"
+    >
+      <vxe-column type="seq" title="序号" width="200" tree-node />
+      <vxe-column field="id" title="Id" />
+      <vxe-column field="name" title="地点" />
+    </vxe-table>
+  </div>
+</template>

src/views/vue-flow/layouting/animationEdge.vue

@@ -0,0 +1,214 @@
+<script lang="ts" setup>
+import { computed, nextTick, ref, toRef, watch } from "vue";
+import { TransitionPresets, executeTransition } from "@vueuse/core";
+import {
+  Position,
+  BaseEdge,
+  useVueFlow,
+  useNodesData,
+  getSmoothStepPath,
+  EdgeLabelRenderer
+} from "@vue-flow/core";
+
+const props = defineProps({
+  id: {
+    type: String,
+    required: true
+  },
+  source: {
+    type: String,
+    required: true
+  },
+  target: {
+    type: String,
+    required: true
+  },
+  sourceX: {
+    type: Number,
+    required: true
+  },
+  sourceY: {
+    type: Number,
+    required: true
+  },
+  targetX: {
+    type: Number,
+    required: true
+  },
+  targetY: {
+    type: Number,
+    required: true
+  },
+  sourcePosition: {
+    type: String,
+    default: Position.Right
+  },
+  targetPosition: {
+    type: String,
+    default: Position.Left
+  }
+});
+
+const { findEdge } = useVueFlow();
+
+const nodesData = useNodesData([props.target, props.source]);
+
+const edgePoint = ref(0);
+
+const edgeRef = ref();
+
+const labelPosition = ref({ x: 0, y: 0 });
+
+const currentLength = ref(0);
+
+const targetNodeData = toRef(() => nodesData.value[0].data);
+
+const sourceNodeData = toRef(() => nodesData.value[1].data);
+
+const isFinished = toRef(() => sourceNodeData.value.isFinished);
+
+const isCancelled = toRef(() => targetNodeData.value.isCancelled);
+
+const isAnimating = ref(false);
+
+const edgeColor = toRef(() => {
+  if (targetNodeData.value.hasError) {
+    return "#f87171";
+  }
+
+  if (targetNodeData.value.isFinished) {
+    return "#42B983";
+  }
+
+  if (targetNodeData.value.isCancelled || targetNodeData.value.isSkipped) {
+    return "#fbbf24";
+  }
+
+  if (targetNodeData.value.isRunning || isAnimating.value) {
+    return "#2563eb";
+  }
+
+  return "#6b7280";
+});
+
+// @ts-expect-error
+const path = computed(() => getSmoothStepPath(props));
+
+watch(isCancelled, isCancelled => {
+  if (isCancelled) {
+    reset();
+  }
+});
+
+watch(isAnimating, isAnimating => {
+  const edge = findEdge(props.id);
+
+  if (edge) {
+    edge.data = {
+      ...edge.data,
+      isAnimating
+    };
+  }
+});
+
+watch(edgePoint, point => {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl || point === 0 || !isAnimating.value) {
+    return;
+  }
+
+  const nextLength = pathEl.getTotalLength();
+
+  if (currentLength.value !== nextLength) {
+    runAnimation();
+    return;
+  }
+
+  labelPosition.value = pathEl.getPointAtLength(point);
+});
+
+watch(isFinished, isFinished => {
+  if (isFinished) {
+    runAnimation();
+  }
+});
+
+async function runAnimation() {
+  const pathEl = edgeRef.value?.pathEl;
+
+  if (!pathEl) {
+    return;
+  }
+
+  const totalLength = pathEl.getTotalLength();
+
+  const from = edgePoint.value || 0;
+
+  labelPosition.value = pathEl.getPointAtLength(from);
+
+  isAnimating.value = true;
+
+  if (currentLength.value !== totalLength) {
+    currentLength.value = totalLength;
+  }
+
+  await executeTransition(edgePoint, from, totalLength, {
+    transition: TransitionPresets.easeInOutCubic,
+    duration: Math.max(1500, totalLength / 2),
+    abort: () => !isAnimating.value
+  });
+
+  reset();
+}
+
+function reset() {
+  nextTick(() => {
+    edgePoint.value = 0;
+    currentLength.value = 0;
+    labelPosition.value = { x: 0, y: 0 };
+    isAnimating.value = false;
+  });
+}
+</script>
+
+<template>
+  <BaseEdge
+    :id="id"
+    ref="edgeRef"
+    :path="path[0]"
+    :style="{ stroke: edgeColor }"
+  />
+
+  <EdgeLabelRenderer v-if="isAnimating">
+    <div
+      :style="{
+        transform: `translate(-50%, -50%) translate(${labelPosition.x}px,${labelPosition.y}px)`
+      }"
+      class="nodrag nopan animated-edge-label"
+    >
+      <span class="truck">
+        <span class="box">📦</span>
+        🚚
+      </span>
+    </div>
+  </EdgeLabelRenderer>
+</template>
+
+<style scoped>
+.animated-edge-label {
+  position: absolute;
+  z-index: 100;
+}
+
+.truck {
+  position: relative;
+  display: inline-block;
+  transform: scaleX(-1);
+}
+
+.box {
+  position: absolute;
+  top: -10px;
+}
+</style>

src/views/vue-flow/layouting/icon.vue

@@ -0,0 +1,85 @@
+<script lang="ts" setup>
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+});
+</script>
+
+<template>
+  <svg
+    v-if="name === 'play'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M8 5v14l11-7z" fill="currentColor" />
+  </svg>
+
+  <svg
+    v-else-if="name === 'stop'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M8 16h8V8H8zm4 6q-2.075 0-3.9-.788t-3.175-2.137q-1.35-1.35-2.137-3.175T2 12q0-2.075.788-3.9t2.137-3.175q1.35-1.35 3.175-2.137T12 2q2.075 0 3.9.788t3.175 2.137q1.35 1.35 2.138 3.175T22 12q0 2.075-.788 3.9t-2.137 3.175q-1.35 1.35-3.175 2.138T12 22"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'horizontal'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M2,12 L22,12" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L2,12 L7,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M17,7 L22,12 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'vertical'"
+    viewBox="0 0 24 24"
+    height="24"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M12,2 L12,22" stroke="currentColor" stroke-width="2" />
+    <path
+      d="M7,7 L12,2 L17,7"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+    <path
+      d="M7,17 L12,22 L17,17"
+      stroke="currentColor"
+      stroke-width="2"
+      fill="none"
+    />
+  </svg>
+
+  <svg
+    v-else-if="name === 'shuffle'"
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    height="24"
+  >
+    <path
+      fill="currentColor"
+      d="M14 20v-2h2.6l-3.175-3.175L14.85 13.4L18 16.55V14h2v6zm-8.6 0L4 18.6L16.6 6H14V4h6v6h-2V7.4zm3.775-9.425L4 5.4L5.4 4l5.175 5.175z"
+    />
+  </svg>
+</template>

src/views/vue-flow/layouting/index.vue

@@ -0,0 +1,212 @@
+<script lang="ts" setup>
+import "@vue-flow/core/dist/style.css";
+import "@vue-flow/core/dist/theme-default.css";
+import Icon from "./icon.vue";
+import { nextTick, ref } from "vue";
+import { useLayout } from "./useLayout";
+import { useShuffle } from "./useShuffle";
+import ProcessNode from "./processNode.vue";
+import { useRunProcess } from "./useRunProcess";
+import AnimationEdge from "./animationEdge.vue";
+import { Background } from "@vue-flow/background";
+import { Panel, VueFlow, useVueFlow } from "@vue-flow/core";
+import { initialEdges, initialNodes } from "./initialElements";
+
+const nodes = ref(initialNodes);
+
+const edges = ref(initialEdges);
+
+const cancelOnError = ref(true);
+
+const shuffle = useShuffle();
+
+const { graph, layout, previousDirection } = useLayout();
+
+// @ts-expect-error
+const { run, stop, reset, isRunning } = useRunProcess({ graph, cancelOnError });
+
+const { fitView } = useVueFlow();
+
+async function shuffleGraph() {
+  await stop();
+
+  reset(nodes.value);
+
+  edges.value = shuffle(nodes.value);
+
+  nextTick(() => {
+    layoutGraph(previousDirection.value);
+  });
+}
+
+async function layoutGraph(direction) {
+  await stop();
+
+  reset(nodes.value);
+
+  nodes.value = layout(nodes.value, edges.value, direction);
+
+  nextTick(() => {
+    fitView();
+    run(nodes.value);
+  });
+}
+</script>
+
+<template>
+  <div class="layout-flow">
+    <VueFlow
+      :nodes="nodes"
+      :edges="edges"
+      @nodes-initialized="layoutGraph('LR')"
+    >
+      <template #node-process="props">
+        <ProcessNode
+          :data="props.data"
+          :source-position="props.sourcePosition"
+          :target-position="props.targetPosition"
+        />
+      </template>
+
+      <template #edge-animation="edgeProps">
+        <AnimationEdge
+          :id="edgeProps.id"
+          :source="edgeProps.source"
+          :target="edgeProps.target"
+          :source-x="edgeProps.sourceX"
+          :source-y="edgeProps.sourceY"
+          :targetX="edgeProps.targetX"
+          :targetY="edgeProps.targetY"
+          :source-position="edgeProps.sourcePosition"
+          :target-position="edgeProps.targetPosition"
+        />
+      </template>
+
+      <Background />
+
+      <Panel class="process-panel" position="top-left">
+        <div class="layout-panel">
+          <button v-if="isRunning" class="stop-btn" title="stop" @click="stop">
+            <Icon name="stop" />
+            <span class="spinner" />
+          </button>
+          <button v-else title="start" @click="run(nodes)">
+            <Icon name="play" />
+          </button>
+
+          <button title="set horizontal layout" @click="layoutGraph('LR')">
+            <Icon name="horizontal" />
+          </button>
+
+          <button title="set vertical layout" @click="layoutGraph('TB')">
+            <Icon name="vertical" />
+          </button>
+
+          <button title="shuffle graph" @click="shuffleGraph">
+            <Icon name="shuffle" />
+          </button>
+        </div>
+
+        <!-- <div class="checkbox-panel">
+          <label>Cancel on error</label>
+          <input v-model="cancelOnError" type="checkbox" />
+        </div> -->
+      </Panel>
+    </VueFlow>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+*,
+::before,
+::after {
+  box-sizing: content-box;
+}
+
+.main-content {
+  margin: 0 !important;
+}
+
+.layout-flow {
+  width: 100%;
+  height: 100%;
+}
+
+.process-panel,
+.layout-panel {
+  display: flex;
+  gap: 10px;
+}
+
+.process-panel {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  background-color: #2d3748;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+
+.process-panel button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 40px;
+  height: 40px;
+  font-size: 16px;
+  color: white;
+  cursor: pointer;
+  background-color: #4a5568;
+  border: none;
+  border-radius: 8px;
+  box-shadow: 0 0 10px rgb(0 0 0 / 50%);
+}
+
+/* .checkbox-panel {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+} */
+
+.process-panel button:hover,
+.layout-panel button:hover {
+  background-color: #2563eb;
+  transition: background-color 0.2s;
+}
+
+.process-panel label {
+  font-size: 12px;
+  color: white;
+}
+
+.stop-btn svg {
+  display: none;
+}
+
+.stop-btn:hover svg {
+  display: block;
+}
+
+.stop-btn:hover .spinner {
+  display: none;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 3px solid #f3f3f3;
+  border-top: 3px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+</style>

src/views/vue-flow/layouting/initialElements.ts

@@ -0,0 +1,76 @@
+import type { Edge, Node } from "@vue-flow/core";
+
+const position = { x: 0, y: 0 };
+const nodeType = "process";
+const edgeType = "animation";
+
+export const initialNodes: Node[] = [
+  {
+    id: "1",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2a",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2b",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2c",
+    position,
+    type: nodeType
+  },
+  {
+    id: "2d",
+    position,
+    type: nodeType
+  },
+  {
+    id: "3",
+    position,
+    type: nodeType
+  },
+  {
+    id: "4",
+    position,
+    type: nodeType
+  },
+  {
+    id: "5",
+    position,
+    type: nodeType
+  },
+  {
+    id: "6",
+    position,
+    type: nodeType
+  },
+  {
+    id: "7",
+    position,
+    type: nodeType
+  }
+];
+
+export const initialEdges: Edge[] = [
+  { id: "e1-2", source: "1", target: "2", type: edgeType, animated: true },
+  { id: "e1-3", source: "1", target: "3", type: edgeType, animated: true },
+  { id: "e2-2a", source: "2", target: "2a", type: edgeType, animated: true },
+  { id: "e2-2b", source: "2", target: "2b", type: edgeType, animated: true },
+  { id: "e2-2c", source: "2", target: "2c", type: edgeType, animated: true },
+  { id: "e2c-2d", source: "2c", target: "2d", type: edgeType, animated: true },
+  { id: "e3-7", source: "3", target: "4", type: edgeType, animated: true },
+  { id: "e4-5", source: "4", target: "5", type: edgeType, animated: true },
+  { id: "e5-6", source: "5", target: "6", type: edgeType, animated: true },
+  { id: "e5-7", source: "5", target: "7", type: edgeType, animated: true }
+];

src/views/vue-flow/layouting/processNode.vue

@@ -0,0 +1,145 @@
+<script lang="ts" setup>
+import { toRef } from "vue";
+import { Handle, useHandleConnections } from "@vue-flow/core";
+
+const props = defineProps({
+  data: {
+    type: Object,
+    required: true
+  },
+  sourcePosition: {
+    type: String
+  },
+  targetPosition: {
+    type: String
+  }
+});
+
+const sourceConnections = useHandleConnections({
+  type: "target"
+});
+
+const targetConnections = useHandleConnections({
+  type: "source"
+});
+
+const isSender = toRef(() => sourceConnections.value.length <= 0);
+
+const isReceiver = toRef(() => targetConnections.value.length <= 0);
+
+const bgColor = toRef(() => {
+  if (isSender.value) {
+    return "#2563eb";
+  }
+
+  if (props.data.hasError) {
+    return "#f87171";
+  }
+
+  if (props.data.isFinished) {
+    return "#42B983";
+  }
+
+  if (props.data.isCancelled) {
+    return "#fbbf24";
+  }
+
+  return "#4b5563";
+});
+
+const processLabel = toRef(() => {
+  if (props.data.hasError) {
+    return "❌";
+  }
+
+  if (props.data.isSkipped) {
+    return "🚧";
+  }
+
+  if (props.data.isCancelled) {
+    return "🚫";
+  }
+
+  if (isSender.value) {
+    return "📦";
+  }
+
+  if (props.data.isFinished) {
+    return "😎";
+  }
+
+  return "🏠";
+});
+</script>
+
+<template>
+  <div
+    class="process-node"
+    :style="{
+      backgroundColor: bgColor,
+      boxShadow: data.isRunning ? '0 0 10px rgba(0, 0, 0, 0.5)' : ''
+    }"
+  >
+    <Handle v-if="!isSender" type="target" :position="targetPosition as any">
+      <span
+        v-if="
+          !data.isRunning &&
+          !data.isFinished &&
+          !data.isCancelled &&
+          !data.isSkipped &&
+          !data.hasError
+        "
+        >📥
+      </span>
+    </Handle>
+    <Handle
+      v-if="!isReceiver"
+      type="source"
+      :position="sourcePosition as any"
+    />
+
+    <div v-if="!isSender && data.isRunning" class="spinner" />
+    <span v-else>
+      {{ processLabel }}
+    </span>
+  </div>
+</template>
+
+<style scoped>
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.process-node {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  padding: 10px;
+  border-radius: 99px;
+}
+
+.process-node .vue-flow__handle {
+  width: unset;
+  height: unset;
+  font-size: 12px;
+  background: transparent;
+  border: none;
+}
+
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 1px solid #f3f3f3;
+  border-top: 1px solid #2563eb;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+</style>

src/views/vue-flow/layouting/useLayout.ts

@@ -0,0 +1,52 @@
+import dagre from "dagre";
+import { ref } from "vue";
+import { Position, useVueFlow } from "@vue-flow/core";
+
+export function useLayout() {
+  const { findNode } = useVueFlow();
+
+  const graph = ref(new dagre.graphlib.Graph());
+
+  const previousDirection = ref("LR");
+
+  function layout(nodes, edges, direction) {
+    const dagreGraph = new dagre.graphlib.Graph();
+
+    graph.value = dagreGraph;
+
+    dagreGraph.setDefaultEdgeLabel(() => ({}));
+
+    const isHorizontal = direction === "LR";
+    dagreGraph.setGraph({ rankdir: direction });
+
+    previousDirection.value = direction;
+
+    for (const node of nodes) {
+      const graphNode = findNode(node.id);
+
+      dagreGraph.setNode(node.id, {
+        width: graphNode.dimensions.width || 150,
+        height: graphNode.dimensions.height || 50
+      });
+    }
+
+    for (const edge of edges) {
+      dagreGraph.setEdge(edge.source, edge.target);
+    }
+
+    dagre.layout(dagreGraph);
+
+    return nodes.map(node => {
+      const nodeWithPosition = dagreGraph.node(node.id);
+
+      return {
+        ...node,
+        targetPosition: isHorizontal ? Position.Left : Position.Top,
+        sourcePosition: isHorizontal ? Position.Right : Position.Bottom,
+        position: { x: nodeWithPosition.x, y: nodeWithPosition.y }
+      };
+    });
+  }
+
+  return { graph, layout, previousDirection };
+}

src/views/vue-flow/layouting/useRunProcess.ts

@@ -0,0 +1,181 @@
+import { ref, toRef, toValue } from "vue";
+import { useVueFlow } from "@vue-flow/core";
+
+export function useRunProcess({ graph: dagreGraph, cancelOnError = true }) {
+  const { updateNodeData, getConnectedEdges } = useVueFlow();
+
+  const graph = toRef(() => toValue(dagreGraph));
+
+  const isRunning = ref(false);
+
+  const executedNodes = new Set();
+
+  const runningTasks = new Map();
+
+  const upcomingTasks = new Set();
+
+  async function runNode(node, isStart = false) {
+    if (executedNodes.has(node.id)) {
+      return;
+    }
+
+    upcomingTasks.add(node.id);
+
+    const incomers = getConnectedEdges(node.id).filter(
+      connection => connection.target === node.id
+    );
+
+    await Promise.all(
+      incomers.map(incomer => until(() => !incomer.data.isAnimating))
+    );
+
+    upcomingTasks.clear();
+
+    if (!isRunning.value) {
+      return;
+    }
+
+    executedNodes.add(node.id);
+
+    updateNodeData(node.id, {
+      isRunning: true,
+      isFinished: false,
+      hasError: false,
+      isCancelled: false
+    });
+
+    const delay = Math.floor(Math.random() * 2000) + 1000;
+
+    return new Promise(resolve => {
+      const timeout = setTimeout(
+        async () => {
+          const children = graph.value.successors(node.id);
+
+          const willThrowError = Math.random() < 0.15;
+
+          if (!isStart && willThrowError) {
+            updateNodeData(node.id, { isRunning: false, hasError: true });
+
+            if (toValue(cancelOnError)) {
+              await skipDescendants(node.id);
+              runningTasks.delete(node.id);
+
+              // @ts-expect-error
+              resolve();
+              return;
+            }
+          }
+
+          updateNodeData(node.id, { isRunning: false, isFinished: true });
+
+          runningTasks.delete(node.id);
+
+          if (children.length > 0) {
+            await Promise.all(children.map(id => runNode({ id })));
+          }
+
+          // @ts-expect-error
+          resolve();
+        },
+        isStart ? 0 : delay
+      );
+
+      runningTasks.set(node.id, timeout);
+    });
+  }
+
+  async function run(nodes) {
+    if (isRunning.value) {
+      return;
+    }
+
+    reset(nodes);
+
+    isRunning.value = true;
+
+    const startingNodes = nodes.filter(
+      node => graph.value.predecessors(node.id)?.length === 0
+    );
+
+    await Promise.all(startingNodes.map(node => runNode(node, true)));
+
+    clear();
+  }
+
+  function reset(nodes) {
+    clear();
+
+    for (const node of nodes) {
+      updateNodeData(node.id, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: false
+      });
+    }
+  }
+
+  async function skipDescendants(nodeId) {
+    const children = graph.value.successors(nodeId);
+
+    for (const child of children) {
+      updateNodeData(child, { isRunning: false, isSkipped: true });
+      await skipDescendants(child);
+    }
+  }
+
+  async function stop() {
+    isRunning.value = false;
+
+    for (const nodeId of upcomingTasks) {
+      clearTimeout(runningTasks.get(nodeId));
+      runningTasks.delete(nodeId);
+      // @ts-expect-error
+      updateNodeData(nodeId, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: true
+      });
+      await skipDescendants(nodeId);
+    }
+
+    for (const [nodeId, task] of runningTasks) {
+      clearTimeout(task);
+      runningTasks.delete(nodeId);
+      updateNodeData(nodeId, {
+        isRunning: false,
+        isFinished: false,
+        hasError: false,
+        isSkipped: false,
+        isCancelled: true
+      });
+      await skipDescendants(nodeId);
+    }
+
+    executedNodes.clear();
+    upcomingTasks.clear();
+  }
+
+  function clear() {
+    isRunning.value = false;
+    executedNodes.clear();
+    runningTasks.clear();
+  }
+
+  return { run, stop, reset, isRunning };
+}
+
+async function until(condition) {
+  return new Promise(resolve => {
+    const interval = setInterval(() => {
+      if (condition()) {
+        clearInterval(interval);
+        // @ts-expect-error
+        resolve();
+      }
+    }, 100);
+  });
+}

src/views/vue-flow/layouting/useShuffle.ts

@@ -0,0 +1,50 @@
+function shuffleArray(array) {
+  for (let i = array.length - 1; i > 0; i--) {
+    const j = Math.floor(Math.random() * (i + 1));
+    [array[i], array[j]] = [array[j], array[i]];
+  }
+}
+
+function generatePossibleEdges(nodes) {
+  const possibleEdges = [];
+
+  for (const sourceNode of nodes) {
+    for (const targetNode of nodes) {
+      if (sourceNode.id !== targetNode.id) {
+        const edgeId = `e${sourceNode.id}-${targetNode.id}`;
+        possibleEdges.push({
+          id: edgeId,
+          source: sourceNode.id,
+          target: targetNode.id,
+          type: "animation",
+          animated: true
+        });
+      }
+    }
+  }
+
+  return possibleEdges;
+}
+
+export function useShuffle() {
+  return nodes => {
+    const possibleEdges = generatePossibleEdges(nodes);
+    shuffleArray(possibleEdges);
+
+    const usedNodes = new Set();
+    const newEdges = [];
+
+    for (const edge of possibleEdges) {
+      if (
+        !usedNodes.has(edge.target) &&
+        (usedNodes.size === 0 || usedNodes.has(edge.source))
+      ) {
+        newEdges.push(edge);
+        usedNodes.add(edge.source);
+        usedNodes.add(edge.target);
+      }
+    }
+
+    return newEdges;
+  };
+}

types/shims-vue.d.ts

@@ -9,6 +9,7 @@ declare module "*.scss" {
   export default scss;
 }
 
+declare module "vue3-puzzle-vcode";
 declare module "vue-virtual-scroller";
 declare module "vuedraggable/src/vuedraggable";
 declare module "element-plus/dist/locale/en.mjs";