Commit 24e0a776 by 高源

栅格拖拽实现

parent aa518835
<!doctype html> <!doctype html>
<html lang="zh-cmn-Hans"> <html lang="zh-cmn-Hans">
<head> <head>
<meta name="buildTime" content="2025-03-17 14:02:13"> <meta name="buildTime" content="2025-03-18 11:10:53">
<meta charset="UTF-8" /> <meta charset="UTF-8" />
<link rel="icon" href="/favicon.svg" /> <link rel="icon" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="color-scheme" content="light dark" /> <meta name="color-scheme" content="light dark" />
<title>VueDashboard</title> <title>VueDashboard</title>
<script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-vhyBwSMe.js"></script> <script type="module" crossorigin src="/Content/VueDashboardUi/VueDashboard1/assets/index-CXO-yZSS.js"></script>
<link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-9k_B1ZU8.css"> <link rel="stylesheet" crossorigin href="/Content/VueDashboardUi/VueDashboard1/assets/index-9k_B1ZU8.css">
</head> </head>
<body> <body>
......
...@@ -65,6 +65,7 @@ ...@@ -65,6 +65,7 @@
"tailwind-merge": "2.4.0", "tailwind-merge": "2.4.0",
"vue": "3.4.35", "vue": "3.4.35",
"vue-draggable-plus": "0.5.2", "vue-draggable-plus": "0.5.2",
"vue-grid-layout": "3.0.0-beta1",
"vue-i18n": "9.13.1", "vue-i18n": "9.13.1",
"vue-router": "4.4.1", "vue-router": "4.4.1",
"vue3-sfc-loader": "^0.9.5" "vue3-sfc-loader": "^0.9.5"
......
...@@ -62,6 +62,9 @@ importers: ...@@ -62,6 +62,9 @@ importers:
vue-draggable-plus: vue-draggable-plus:
specifier: 0.5.2 specifier: 0.5.2
version: 0.5.2(@types/sortablejs@1.15.8) version: 0.5.2(@types/sortablejs@1.15.8)
vue-grid-layout:
specifier: 3.0.0-beta1
version: 3.0.0-beta1(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.5.4)
vue-i18n: vue-i18n:
specifier: 9.13.1 specifier: 9.13.1
version: 9.13.1(vue@3.4.35(typescript@5.5.4)) version: 9.13.1(vue@3.4.35(typescript@5.5.4))
...@@ -928,6 +931,79 @@ packages: ...@@ -928,6 +931,79 @@ packages:
peerDependencies: peerDependencies:
vue: '>=3' vue: '>=3'
'@interactjs/actions@1.10.27':
resolution: {integrity: sha512-FCRg5KwB+stkPcAMx/Cn0fgGP6p4LyMX9S/Upcn/W+hpYme31bPi54PCqmOebzz6myTthN6zFf9jMyLOqtI/gg==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/auto-scroll@1.10.27':
resolution: {integrity: sha512-zPg5TnVsZv+9Hnt4qnbxLvBMf+rIWHkoJVoSETEbLNaj90C8hIyr0pVwukSUySSgDhCgQ7np0f3pg4INLq9beQ==}
peerDependencies:
'@interactjs/utils': 1.10.27
'@interactjs/auto-start@1.10.27':
resolution: {integrity: sha512-ECLBO/nxmaF1knncJKIE5F7la3KKRgEkn0Cu2JTPOYj9xy/LpfYElo3wkRHsodgOqF651nR70GK2/IzPR2lO9A==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/core@1.10.27':
resolution: {integrity: sha512-SliUr/3ZbLAdED8LokzYzWHWMdCB5Cq+UnpXuRy+BIod1j97m4IUFf/D1iIKUBBjBcucgXbz28z96WnenVCB7Q==}
peerDependencies:
'@interactjs/utils': 1.10.27
'@interactjs/dev-tools@1.10.27':
resolution: {integrity: sha512-YolmBwRaKH1gWbvyLeV3m5QSwtD38lOZnCBA87PCAlcd9PQAC2gb03fEPeEyD336bE20oLB8f0WZt4Wre+afiw==}
peerDependencies:
'@interactjs/modifiers': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/inertia@1.10.27':
resolution: {integrity: sha512-S/SVj/M0D+wWWPVXHcXN/YUWOK51LFJsEA+CTgVnFhlSU04+1FUvNLwilCZcHgECu1RJxZNKDwZysDATg+r8jQ==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/modifiers': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/interact@1.10.27':
resolution: {integrity: sha512-XdH3A2UUzjEFGGJgFuJlhiz99tE8jB8xNh/DmnoMuL6uOQPxNA+sWRnzEVjG0+zY2P3/dbhEpi4Cn3FLPzydwA==}
'@interactjs/interactjs@1.10.27':
resolution: {integrity: sha512-UwhfUZMZVXUY72efPABuKSBz1sUY+r+49v8t6Ku9o5Jq76AKg9mwmdGszIlOn3ppnFDDjvtzK/8TL+Sbd0EQEA==}
'@interactjs/modifiers@1.10.27':
resolution: {integrity: sha512-ei/qfoQ+9/8k6WzNzdNqHI6cWkIV576N4Ap16r5CoqOWwhA6Xzj3OMHf1g0t1O4eSq2HdJsVJn3eLNfw9HsbeQ==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/offset@1.10.27':
resolution: {integrity: sha512-AezsLiuK+Qv4jXdYuRa65HJ2pMFMZPlqiAep6ZRLwhP9HE7O75c0EAm+gfx+dpPrHNHs6J9LaiKSZl+B+A2qAw==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/pointer-events@1.10.27':
resolution: {integrity: sha512-Yo5SS6PhWfC93gHNxnwwW0wvebo5hSYJKGaSnAHO4f9Lh25yibecMnmPBmiEfWVcdMboK/kXrme43mHQaRegVg==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/reflow@1.10.27':
resolution: {integrity: sha512-Msm0QdYFr40oSsPFxyCR3dHN/pQx34k7QSkdN1uIsUn/drrm+YSFvrvVOu99DFOwr7gTThr5vNe06Sz4vubTSA==}
peerDependencies:
'@interactjs/core': 1.10.27
'@interactjs/utils': 1.10.27
'@interactjs/snappers@1.10.27':
resolution: {integrity: sha512-HZLZ0XSi6HI08OmTv/HKG6AltQoaKAALLQ+KDW92utj3XSgw7oren0KsWUKPhaPg3Av7R1jFQd08s+uafqIlLw==}
peerDependencies:
'@interactjs/utils': 1.10.27
'@interactjs/utils@1.10.27':
resolution: {integrity: sha512-+qfLOio2OxQqg1cXSnRaCl+N8MQDQLDS9w+aOGxH8YLAhIMyt7Asxx/46//sT8orgsi16pmlBPtngPHT9s8zKw==}
'@intlify/core-base@9.13.1': '@intlify/core-base@9.13.1':
resolution: {integrity: sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==} resolution: {integrity: sha512-+bcQRkJO9pcX8d0gel9ZNfrzU22sZFSA0WVhfXrf5jdJOS24a+Bp8pozuS9sBI9Hk/tGz83pgKfmqcn/Ci7/8w==}
engines: {node: '>= 16'} engines: {node: '>= 16'}
...@@ -1614,6 +1690,9 @@ packages: ...@@ -1614,6 +1690,9 @@ packages:
resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==} resolution: {integrity: sha512-5T6P4xPgpp0YDFvSWwEZ4NoE3aM4QBQXDzmVbraCkFj8zHM+mba8SyqB5DbZWyR7mYHo6Y7BdQo3MoA4m0TeQg==}
engines: {node: '>=0.10.0'} engines: {node: '>=0.10.0'}
batch-processor@1.0.0:
resolution: {integrity: sha512-xoLQD8gmmR32MeuBHgH0Tzd5PuSZx71ZsbhVxOCRbgktZEPe4SQy7s9Z50uPp0F/f7iw2XmkHN2xkgbMfckMDA==}
big.js@5.2.2: big.js@5.2.2:
resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==} resolution: {integrity: sha512-vyL2OymJxmarO8gxMr0mhChsO9QGwhynfuu4+MHTAW6czfq9humCB7rKpUjDd9YUiDPU4mzpyupFSvOClAwbmQ==}
...@@ -2251,6 +2330,9 @@ packages: ...@@ -2251,6 +2330,9 @@ packages:
electron-to-chromium@1.5.64: electron-to-chromium@1.5.64:
resolution: {integrity: sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==} resolution: {integrity: sha512-IXEuxU+5ClW2IGEYFC2T7szbyVgehupCWQe5GNh+H065CD6U6IFN0s4KeAMFGNmQolRU4IV7zGBWSYMmZ8uuqQ==}
element-resize-detector@1.2.4:
resolution: {integrity: sha512-Fl5Ftk6WwXE0wqCgNoseKWndjzZlDCwuPTcoVZfCP9R3EHQF8qUtr3YUPNETegRBOKqQKPW3n4kiIWngGi8tKg==}
emoji-regex@10.3.0: emoji-regex@10.3.0:
resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==} resolution: {integrity: sha512-QpLs9D9v9kArv4lfDEgg1X/gN5XLnf/A6l9cs8SPZLRZR3ZkY9+kwIQTxm+fsSej5UMYGE8fdoaZVIBlqG0XTw==}
...@@ -3425,6 +3507,9 @@ packages: ...@@ -3425,6 +3507,9 @@ packages:
resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==} resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
engines: {node: '>= 8'} engines: {node: '>= 8'}
mitt@2.1.0:
resolution: {integrity: sha512-ILj2TpLiysu2wkBbWjAmww7TkZb65aiQO+DkVdUTBpBXq+MHYiETENkKFMtsJZX1Lf4pe4QOrTSjIfUwN5lRdg==}
mitt@3.0.1: mitt@3.0.1:
resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==} resolution: {integrity: sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==}
...@@ -4602,6 +4687,9 @@ packages: ...@@ -4602,6 +4687,9 @@ packages:
peerDependencies: peerDependencies:
eslint: '>=6.0.0' eslint: '>=6.0.0'
vue-grid-layout@3.0.0-beta1:
resolution: {integrity: sha512-MsW0yfYNtnAO/uDhfZvkP6effxSJxvhAFbIL37x6Rn3vW9xf0WHVefKaSbQMLpSq3mXnR6ut0pg2Cd5lqIIZzg==}
vue-i18n@9.13.1: vue-i18n@9.13.1:
resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==} resolution: {integrity: sha512-mh0GIxx0wPtPlcB1q4k277y0iKgo25xmDPWioVVYanjPufDBpvu5ySTjP5wOrSvlYQ2m1xI+CFhGdauv/61uQg==}
engines: {node: '>= 16'} engines: {node: '>= 16'}
...@@ -5360,6 +5448,108 @@ snapshots: ...@@ -5360,6 +5448,108 @@ snapshots:
'@iconify/types': 2.0.0 '@iconify/types': 2.0.0
vue: 3.4.35(typescript@5.5.4) vue: 3.4.35(typescript@5.5.4)
'@interactjs/actions@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/auto-scroll@1.10.27(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/auto-start@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/core@1.10.27(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/utils': 1.10.27
'@interactjs/dev-tools@1.10.27(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.5.4)':
dependencies:
'@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
vue: 3.4.35(typescript@5.5.4)
transitivePeerDependencies:
- typescript
'@interactjs/inertia@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/offset': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/interact@1.10.27':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
'@interactjs/interactjs@1.10.27(typescript@5.5.4)':
dependencies:
'@interactjs/actions': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/auto-scroll': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/auto-start': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/dev-tools': 1.10.27(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.5.4)
'@interactjs/inertia': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/interact': 1.10.27
'@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/offset': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/pointer-events': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/reflow': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
transitivePeerDependencies:
- typescript
'@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/snappers': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/offset@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/pointer-events@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/reflow@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/core': 1.10.27(@interactjs/utils@1.10.27)
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/snappers@1.10.27(@interactjs/utils@1.10.27)':
dependencies:
'@interactjs/utils': 1.10.27
optionalDependencies:
'@interactjs/interact': 1.10.27
'@interactjs/utils@1.10.27': {}
'@intlify/core-base@9.13.1': '@intlify/core-base@9.13.1':
dependencies: dependencies:
'@intlify/message-compiler': 9.13.1 '@intlify/message-compiler': 9.13.1
...@@ -6261,6 +6451,8 @@ snapshots: ...@@ -6261,6 +6451,8 @@ snapshots:
mixin-deep: 1.3.2 mixin-deep: 1.3.2
pascalcase: 0.1.1 pascalcase: 0.1.1
batch-processor@1.0.0: {}
big.js@5.2.2: {} big.js@5.2.2: {}
binary-extensions@2.3.0: {} binary-extensions@2.3.0: {}
...@@ -6766,6 +6958,10 @@ snapshots: ...@@ -6766,6 +6958,10 @@ snapshots:
electron-to-chromium@1.5.64: electron-to-chromium@1.5.64:
optional: true optional: true
element-resize-detector@1.2.4:
dependencies:
batch-processor: 1.0.0
emoji-regex@10.3.0: {} emoji-regex@10.3.0: {}
emoji-regex@8.0.0: {} emoji-regex@8.0.0: {}
...@@ -8174,6 +8370,8 @@ snapshots: ...@@ -8174,6 +8370,8 @@ snapshots:
minipass: 3.3.6 minipass: 3.3.6
yallist: 4.0.0 yallist: 4.0.0
mitt@2.1.0: {}
mitt@3.0.1: {} mitt@3.0.1: {}
mixin-deep@1.3.2: mixin-deep@1.3.2:
...@@ -9461,6 +9659,20 @@ snapshots: ...@@ -9461,6 +9659,20 @@ snapshots:
transitivePeerDependencies: transitivePeerDependencies:
- supports-color - supports-color
vue-grid-layout@3.0.0-beta1(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.5.4):
dependencies:
'@interactjs/actions': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/auto-start': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
'@interactjs/dev-tools': 1.10.27(@interactjs/modifiers@1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)(typescript@5.5.4)
'@interactjs/interactjs': 1.10.27(typescript@5.5.4)
'@interactjs/modifiers': 1.10.27(@interactjs/core@1.10.27(@interactjs/utils@1.10.27))(@interactjs/utils@1.10.27)
element-resize-detector: 1.2.4
mitt: 2.1.0
transitivePeerDependencies:
- '@interactjs/core'
- '@interactjs/utils'
- typescript
vue-i18n@9.13.1(vue@3.4.35(typescript@5.5.4)): vue-i18n@9.13.1(vue@3.4.35(typescript@5.5.4)):
dependencies: dependencies:
'@intlify/core-base': 9.13.1 '@intlify/core-base': 9.13.1
......
import { createApp } from 'vue'; import { createApp } from 'vue';
import VueGridLayout from 'vue-grid-layout';
import './plugins/assets'; import './plugins/assets';
import { localStg } from '@/utils/storage'; import { localStg } from '@/utils/storage';
// main.js or main.ts // main.js or main.ts
...@@ -62,6 +63,8 @@ async function setupApp() { ...@@ -62,6 +63,8 @@ async function setupApp() {
// 启动计时器 // 启动计时器
startInactivityTimer(app); startInactivityTimer(app);
app.use(VueGridLayout);
app.mount('#app'); app.mount('#app');
} }
......
declare module 'vue-grid-layout' {
import { Plugin } from 'vue';
export const GridLayout: any;
export const GridItem: any;
const VueGridLayout: Plugin;
export default VueGridLayout;
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment