mirror of
https://github.com/pure-admin/vue-pure-admin.git
synced 2025-06-08 01:17:23 +08:00
Merge branch 'main' into feat/form
This commit is contained in:
xiaoxian521
commit
1b844af0ee
@ -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`
|
||||
@ -168,7 +174,7 @@ You are very welcome to join！[Raise an issue](https://github.com/pure-admin/vu
|
||||
|
||||
Thank you very much for your in-depth understanding of the source code and your outstanding contributions to the `pure-admin` organization ❤️
|
||||
|
||||
| **Contributor** | **SpecificCode** |
|
||||
| **Contributor** | **SpecificCode** |
|
||||
| :---------------------------------------------: | :------------------------------------------------------------------------------: |
|
||||
| [hb0730](https://github.com/hb0730) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=hb0730) |
|
||||
| [o-cc](https://github.com/o-cc) | [代码](https://github.com/pure-admin/vue-pure-admin/commits?author=o-cc) |
|
||||
|
||||
@ -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>
|
||||
|
||||
## 精简版本（实际项目开发请用精简版本，提供 `非国际化` 、`国际化` 两个版本选择）
|
||||
|
||||
|
||||
@ -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"
|
||||
];
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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 文字提示
|
||||
|
||||
@ -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",
|
||||
|
||||
163
pnpm-lock.yaml
generated
163
pnpm-lock.yaml
generated
@ -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:
|
||||
|
||||
@ -25,7 +25,7 @@
|
||||
"ResponsiveStorageNameSpace": "responsive-",
|
||||
"MenuSearchHistory": 6,
|
||||
"MapConfigure": {
|
||||
"amapKey": "97b3248d1553172e81f168cf94ea667e",
|
||||
"amapKey": "adc139d56406f3844c8f1cf1c6b65c41",
|
||||
"options": {
|
||||
"resizeEnable": true,
|
||||
"center": [113.6401, 34.72468],
|
||||
|
||||
1
public/sponsors/aitools.svg
Normal file
1
public/sponsors/aitools.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 80 KiB |
@ -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);
|
||||
|
||||
@ -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 {
|
||||
|
||||
@ -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"
|
||||
|
||||
@ -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");
|
||||
|
||||
102
src/plugins/vxeTable.ts
Normal file
102
src/plugins/vxeTable.ts
Normal file
@ -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);
|
||||
}
|
||||
@ -1,30 +1,34 @@
|
||||
// 完整版菜单比较多，将 rank 抽离出来，在此方便维护
|
||||
|
||||
const home = 0, // 平台规定只有 home 路由的 rank 才能为 0 ，所以后端在返回 rank 的时候需要从非 0 开始
|
||||
components = 1,
|
||||
able = 2,
|
||||
table = 3,
|
||||
form = 4,
|
||||
list = 5,
|
||||
result = 6,
|
||||
error = 7,
|
||||
frame = 8,
|
||||
nested = 9,
|
||||
permission = 10,
|
||||
system = 11,
|
||||
monitor = 12,
|
||||
tabs = 13,
|
||||
about = 14,
|
||||
editor = 15,
|
||||
flowchart = 16,
|
||||
formdesign = 17,
|
||||
board = 18,
|
||||
ppt = 19,
|
||||
guide = 20,
|
||||
menuoverflow = 21;
|
||||
vueflow = 1,
|
||||
ganttastic = 2,
|
||||
components = 3,
|
||||
able = 4,
|
||||
table = 5,
|
||||
form = 6,
|
||||
list = 7,
|
||||
result = 8,
|
||||
error = 9,
|
||||
frame = 10,
|
||||
nested = 11,
|
||||
permission = 12,
|
||||
system = 13,
|
||||
monitor = 14,
|
||||
tabs = 15,
|
||||
about = 16,
|
||||
editor = 17,
|
||||
flowchart = 18,
|
||||
formdesign = 19,
|
||||
board = 20,
|
||||
ppt = 21,
|
||||
guide = 22,
|
||||
menuoverflow = 23;
|
||||
|
||||
export {
|
||||
home,
|
||||
vueflow,
|
||||
ganttastic,
|
||||
components,
|
||||
able,
|
||||
table,
|
||||
|
||||
@ -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",
|
||||
|
||||
23
src/router/modules/ganttastic.ts
Normal file
23
src/router/modules/ganttastic.ts
Normal file
@ -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;
|
||||
@ -2,38 +2,47 @@ import { $t } from "@/plugins/i18n";
|
||||
import { table } from "@/router/enums";
|
||||
|
||||
export default {
|
||||
path: "/pure-table",
|
||||
redirect: "/pure-table/index",
|
||||
path: "/table",
|
||||
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;
|
||||
|
||||
22
src/router/modules/vueflow.ts
Normal file
22
src/router/modules/vueflow.ts
Normal file
@ -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;
|
||||
@ -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,
|
||||
|
||||
35
src/views/able/verify.vue
Normal file
35
src/views/able/verify.vue
Normal file
@ -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>
|
||||
@ -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 />
|
||||
|
||||
170
src/views/ganttastic/index.vue
Normal file
170
src/views/ganttastic/index.vue
Normal file
@ -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>
|
||||
@ -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 = [
|
||||
{
|
||||
|
Before Width: | Height: | Size: 1.1 KiB After Width: | Height: | Size: 1.1 KiB |
@ -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 = [
|
||||
{
|
||||
@ -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 = [
|
||||
{
|
||||
66
src/views/table/virtual.vue
Normal file
66
src/views/table/virtual.vue
Normal file
@ -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>
|
||||
20
src/views/table/virtual/list.tsx
Normal file
20
src/views/table/virtual/list.tsx
Normal file
@ -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
|
||||
}
|
||||
];
|
||||
35
src/views/table/virtual/list.vue
Normal file
35
src/views/table/virtual/list.vue
Normal file
@ -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>
|
||||
16287
src/views/table/virtual/tree.json
Normal file
16287
src/views/table/virtual/tree.json
Normal file
File diff suppressed because it is too large
Load Diff
56
src/views/table/virtual/treeList.vue
Normal file
56
src/views/table/virtual/treeList.vue
Normal file
@ -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>
|
||||
214
src/views/vue-flow/layouting/animationEdge.vue
Normal file
214
src/views/vue-flow/layouting/animationEdge.vue
Normal file
@ -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>
|
||||
85
src/views/vue-flow/layouting/icon.vue
Normal file
85
src/views/vue-flow/layouting/icon.vue
Normal file
@ -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>
|
||||
212
src/views/vue-flow/layouting/index.vue
Normal file
212
src/views/vue-flow/layouting/index.vue
Normal file
@ -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>
|
||||
76
src/views/vue-flow/layouting/initialElements.ts
Normal file
76
src/views/vue-flow/layouting/initialElements.ts
Normal file
@ -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 }
|
||||
];
|
||||
145
src/views/vue-flow/layouting/processNode.vue
Normal file
145
src/views/vue-flow/layouting/processNode.vue
Normal file
@ -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>
|
||||
52
src/views/vue-flow/layouting/useLayout.ts
Normal file
52
src/views/vue-flow/layouting/useLayout.ts
Normal file
@ -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 };
|
||||
}
|
||||
181
src/views/vue-flow/layouting/useRunProcess.ts
Normal file
181
src/views/vue-flow/layouting/useRunProcess.ts
Normal file
@ -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);
|
||||
});
|
||||
}
|
||||
50
src/views/vue-flow/layouting/useShuffle.ts
Normal file
50
src/views/vue-flow/layouting/useShuffle.ts
Normal file
@ -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;
|
||||
};
|
||||
}
|
||||
1
types/shims-vue.d.ts
vendored
1
types/shims-vue.d.ts
vendored
@ -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";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user