From 4c62e2eddadb41895c06943c6495231b8172913a Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 14 Mar 2024 13:06:39 +0000
Subject: [PATCH 01/23] feat: create pinia

---
 package-lock.json  |  51 +++
 package.json       |   1 +
 src/store/pinia.ts |   0
 yarn.lock          | 956 ++++++++++++++++++---------------------------
 4 files changed, 443 insertions(+), 565 deletions(-)
 create mode 100644 src/store/pinia.ts

diff --git a/package-lock.json b/package-lock.json
index 9ff4481..ecc7179 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25,6 +25,7 @@
         "moveable-helper": "^0.4.0",
         "nanoid": "^3.1.23",
         "normalize.css": "^8.0.1",
+        "pinia": "^2.1.7",
         "qr-code-styling": "^1.6.0-rc.1",
         "selecto": "^1.13.0",
         "throttle-debounce": "^3.0.1",
@@ -3276,6 +3277,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
diff --git a/package.json b/package.json
index 6d7970f..12b5210 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "moveable-helper": "^0.4.0",
     "nanoid": "^3.1.23",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.1.7",
     "qr-code-styling": "^1.6.0-rc.1",
     "selecto": "^1.13.0",
     "throttle-debounce": "^3.0.1",
diff --git a/src/store/pinia.ts b/src/store/pinia.ts
new file mode 100644
index 0000000..e69de29
diff --git a/yarn.lock b/yarn.lock
index bfd7ef0..8f690ef 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4,195 +4,85 @@
 
 "@aashutoshrathi/word-wrap@^1.2.3":
   version "1.2.6"
-  resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
+  resolved "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
 "@babel/parser@^7.23.9":
   version "7.24.0"
-  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz#26a3d1ff49031c53a97d03b604375f028746a9ac"
+  resolved "https://registry.npmjs.org/@babel/parser/-/parser-7.24.0.tgz"
   integrity sha512-QuP/FxEAzMSjXygs8v4N9dvdXzEHN4W1oF3PxuWAtPo08UdM17u89RDMgjLn/mlc56iM0HlLmVkO/wgR+rDgHg==
 
 "@cfcs/core@^0.0.6":
   version "0.0.6"
-  resolved "https://registry.npmjs.org/@cfcs/core/-/core-0.0.6.tgz#9f8499dcd2ad29fd96d8fa72055411cd4a249121"
+  resolved "https://registry.npmjs.org/@cfcs/core/-/core-0.0.6.tgz"
   integrity sha512-FxfJMwoLB8MEMConeXUCqtMGqxdtePQxRBOiGip9ULcYYam3WfCgoY6xdnMaSkYvRvmosp5iuG+TiPofm65+Pw==
   dependencies:
     "@egjs/component" "^3.0.2"
 
 "@cfcs/core@^0.1.0":
   version "0.1.0"
-  resolved "https://registry.npmjs.org/@cfcs/core/-/core-0.1.0.tgz#64346f7634b46de6e9b1d4c195743b9b8e603162"
+  resolved "https://registry.npmjs.org/@cfcs/core/-/core-0.1.0.tgz"
   integrity sha512-kvYX0RpL45XTHJ5sW7teNbKeAa7pK3nNqaJPoFfZDPTIBJOkTtRD3QhkBG+O3Hu69a8xeMoPvF6y/RtJ6JUOdA==
   dependencies:
     "@egjs/component" "^3.0.4"
 
 "@ctrl/tinycolor@^3.4.1":
   version "3.6.1"
-  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz#b6c75a56a1947cc916ea058772d666a2c8932f31"
+  resolved "https://registry.npmjs.org/@ctrl/tinycolor/-/tinycolor-3.6.1.tgz"
   integrity sha512-SITSV6aIXsuVNV3f3O0f2n/cgyEDWoSqtZMYiAmcsYHydcKrOz3gUxB/iXd/Qf08+IZX4KpgNbvUdMBmWz+kcA==
 
 "@daybrush/utils@^1.0.0", "@daybrush/utils@^1.1.1", "@daybrush/utils@^1.10.2", "@daybrush/utils@^1.13.0", "@daybrush/utils@^1.4.0", "@daybrush/utils@^1.6.0", "@daybrush/utils@^1.7.1":
   version "1.13.0"
-  resolved "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz#ea70a60864130da476406fdd1d465e3068aea0ff"
+  resolved "https://registry.npmjs.org/@daybrush/utils/-/utils-1.13.0.tgz"
   integrity sha512-ALK12C6SQNNHw1enXK+UO8bdyQ+jaWNQ1Af7Z3FNxeAwjYhQT7do+TRE4RASAJ3ObaS2+TJ7TXR3oz2Gzbw0PQ==
 
 "@egjs/agent@^2.2.1":
   version "2.4.3"
-  resolved "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz#6d44e2fb1ff7bab242c07f82732fe60305ac6f06"
+  resolved "https://registry.npmjs.org/@egjs/agent/-/agent-2.4.3.tgz"
   integrity sha512-XvksSENe8wPeFlEVouvrOhKdx8HMniJ3by7sro2uPF3M6QqWwjzVcmvwoPtdjiX8O1lfRoLhQMp1a7NGlVTdIA==
 
 "@egjs/children-differ@^1.0.1":
   version "1.0.1"
-  resolved "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz#5465fa80671d5ca3564ebe912f48b05b3e8a14fd"
+  resolved "https://registry.npmjs.org/@egjs/children-differ/-/children-differ-1.0.1.tgz"
   integrity sha512-DRvyqMf+CPCOzAopQKHtW+X8iN6Hy6SFol+/7zCUiE5y4P/OB8JP8FtU4NxtZwtafvSL4faD5KoQYPj3JHzPFQ==
   dependencies:
     "@egjs/list-differ" "^1.0.0"
 
 "@egjs/component@^3.0.2", "@egjs/component@^3.0.4":
   version "3.0.5"
-  resolved "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz#2dc86e835d5dc5055cdf46c7cd794eb45330e1b6"
+  resolved "https://registry.npmjs.org/@egjs/component/-/component-3.0.5.tgz"
   integrity sha512-cLcGizTrrUNA2EYE3MBmEDt2tQv1joVP1Q3oDisZ5nw0MZDx2kcgEXM+/kZpfa/PAkFvYVhRUZwytIQWoN3V/w==
 
 "@egjs/list-differ@^1.0.0":
   version "1.0.1"
-  resolved "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz#5772b0f8b87973bb67827f6c7d7df8d7f64a22eb"
+  resolved "https://registry.npmjs.org/@egjs/list-differ/-/list-differ-1.0.1.tgz"
   integrity sha512-OTFTDQcWS+1ZREOdCWuk5hCBgYO4OsD30lXcOCyVOAjXMhgL5rBRDnt/otb6Nz8CzU0L/igdcaQBDLWc4t9gvg==
 
 "@element-plus/icons-vue@^2.3.1":
   version "2.3.1"
-  resolved "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz#1f635ad5fdd5c85ed936481525570e82b5a8307a"
+  resolved "https://registry.npmjs.org/@element-plus/icons-vue/-/icons-vue-2.3.1.tgz"
   integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
 
-"@esbuild/aix-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.19.12.tgz#d1bc06aedb6936b3b6d313bf809a5a40387d2b7f"
-  integrity sha512-bmoCYyWdEL3wDQIVbcyzRyeKLgk2WtWLTWz1ZIAZF/EGbNOwSA6ew3PftJ1PqMiOOGu0OyFMzG53L0zqIpPeNA==
-
-"@esbuild/android-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/android-arm64/-/android-arm64-0.19.12.tgz#7ad65a36cfdb7e0d429c353e00f680d737c2aed4"
-  integrity sha512-P0UVNGIienjZv3f5zq0DP3Nt2IE/3plFzuaS96vihvD0Hd6H/q4WXUGpCxD/E8YrSXfNyRPbpTq+T8ZQioSuPA==
-
-"@esbuild/android-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/android-arm/-/android-arm-0.19.12.tgz#b0c26536f37776162ca8bde25e42040c203f2824"
-  integrity sha512-qg/Lj1mu3CdQlDEEiWrlC4eaPZ1KztwGJ9B6J+/6G+/4ewxJg7gqj8eVYWvao1bXrqGiW2rsBZFSX3q2lcW05w==
-
-"@esbuild/android-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/android-x64/-/android-x64-0.19.12.tgz#cb13e2211282012194d89bf3bfe7721273473b3d"
-  integrity sha512-3k7ZoUW6Q6YqhdhIaq/WZ7HwBpnFBlW905Fa4s4qWJyiNOgT1dOqDiVAQFwBH7gBRZr17gLrlFCRzF6jFh7Kew==
-
-"@esbuild/darwin-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-arm64/-/darwin-arm64-0.19.12.tgz#cbee41e988020d4b516e9d9e44dd29200996275e"
-  integrity sha512-B6IeSgZgtEzGC42jsI+YYu9Z3HKRxp8ZT3cqhvliEHovq8HSX2YX8lNocDn79gCKJXOSaEot9MVYky7AKjCs8g==
-
 "@esbuild/darwin-x64@0.19.12":
   version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz#e37d9633246d52aecf491ee916ece709f9d5f4cd"
+  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz"
   integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
 
-"@esbuild/freebsd-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/freebsd-arm64/-/freebsd-arm64-0.19.12.tgz#1ee4d8b682ed363b08af74d1ea2b2b4dbba76487"
-  integrity sha512-4aRvFIXmwAcDBw9AueDQ2YnGmz5L6obe5kmPT8Vd+/+x/JMVKCgdcRwH6APrbpNXsPz+K653Qg8HB/oXvXVukA==
-
-"@esbuild/freebsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/freebsd-x64/-/freebsd-x64-0.19.12.tgz#37a693553d42ff77cd7126764b535fb6cc28a11c"
-  integrity sha512-EYoXZ4d8xtBoVN7CEwWY2IN4ho76xjYXqSXMNccFSx2lgqOG/1TBPW0yPx1bJZk94qu3tX0fycJeeQsKovA8gg==
-
-"@esbuild/linux-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-arm64/-/linux-arm64-0.19.12.tgz#be9b145985ec6c57470e0e051d887b09dddb2d4b"
-  integrity sha512-EoTjyYyLuVPfdPLsGVVVC8a0p1BFFvtpQDB/YLEhaXyf/5bczaGeN15QkR+O4S5LeJ92Tqotve7i1jn35qwvdA==
-
-"@esbuild/linux-arm@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-arm/-/linux-arm-0.19.12.tgz#207ecd982a8db95f7b5279207d0ff2331acf5eef"
-  integrity sha512-J5jPms//KhSNv+LO1S1TX1UWp1ucM6N6XuL6ITdKWElCu8wXP72l9MM0zDTzzeikVyqFE6U8YAV9/tFyj0ti+w==
-
-"@esbuild/linux-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-ia32/-/linux-ia32-0.19.12.tgz#d0d86b5ca1562523dc284a6723293a52d5860601"
-  integrity sha512-Thsa42rrP1+UIGaWz47uydHSBOgTUnwBwNq59khgIwktK6x60Hivfbux9iNR0eHCHzOLjLMLfUMLCypBkZXMHA==
-
-"@esbuild/linux-loong64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.19.12.tgz#9a37f87fec4b8408e682b528391fa22afd952299"
-  integrity sha512-LiXdXA0s3IqRRjm6rV6XaWATScKAXjI4R4LoDlvO7+yQqFdlr1Bax62sRwkVvRIrwXxvtYEHHI4dm50jAXkuAA==
-
-"@esbuild/linux-mips64el@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-mips64el/-/linux-mips64el-0.19.12.tgz#4ddebd4e6eeba20b509d8e74c8e30d8ace0b89ec"
-  integrity sha512-fEnAuj5VGTanfJ07ff0gOA6IPsvrVHLVb6Lyd1g2/ed67oU1eFzL0r9WL7ZzscD+/N6i3dWumGE1Un4f7Amf+w==
-
-"@esbuild/linux-ppc64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-ppc64/-/linux-ppc64-0.19.12.tgz#adb67dadb73656849f63cd522f5ecb351dd8dee8"
-  integrity sha512-nYJA2/QPimDQOh1rKWedNOe3Gfc8PabU7HT3iXWtNUbRzXS9+vgB0Fjaqr//XNbd82mCxHzik2qotuI89cfixg==
-
-"@esbuild/linux-riscv64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-riscv64/-/linux-riscv64-0.19.12.tgz#11bc0698bf0a2abf8727f1c7ace2112612c15adf"
-  integrity sha512-2MueBrlPQCw5dVJJpQdUYgeqIzDQgw3QtiAHUC4RBz9FXPrskyyU3VI1hw7C0BSKB9OduwSJ79FTCqtGMWqJHg==
-
-"@esbuild/linux-s390x@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-s390x/-/linux-s390x-0.19.12.tgz#e86fb8ffba7c5c92ba91fc3b27ed5a70196c3cc8"
-  integrity sha512-+Pil1Nv3Umes4m3AZKqA2anfhJiVmNCYkPchwFJNEJN5QxmTs1uzyy4TvmDrCRNT2ApwSari7ZIgrPeUx4UZDg==
-
-"@esbuild/linux-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/linux-x64/-/linux-x64-0.19.12.tgz#5f37cfdc705aea687dfe5dfbec086a05acfe9c78"
-  integrity sha512-B71g1QpxfwBvNrfyJdVDexenDIt1CiDN1TIXLbhOw0KhJzE78KIFGX6OJ9MrtC0oOqMWf+0xop4qEU8JrJTwCg==
-
-"@esbuild/netbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/netbsd-x64/-/netbsd-x64-0.19.12.tgz#29da566a75324e0d0dd7e47519ba2f7ef168657b"
-  integrity sha512-3ltjQ7n1owJgFbuC61Oj++XhtzmymoCihNFgT84UAmJnxJfm4sYCiSLTXZtE00VWYpPMYc+ZQmB6xbSdVh0JWA==
-
-"@esbuild/openbsd-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/openbsd-x64/-/openbsd-x64-0.19.12.tgz#306c0acbdb5a99c95be98bdd1d47c916e7dc3ff0"
-  integrity sha512-RbrfTB9SWsr0kWmb9srfF+L933uMDdu9BIzdA7os2t0TXhCRjrQyCeOt6wVxr79CKD4c+p+YhCj31HBkYcXebw==
-
-"@esbuild/sunos-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/sunos-x64/-/sunos-x64-0.19.12.tgz#0933eaab9af8b9b2c930236f62aae3fc593faf30"
-  integrity sha512-HKjJwRrW8uWtCQnQOz9qcU3mUZhTUQvi56Q8DPTLLB+DawoiQdjsYq+j+D3s9I8VFtDr+F9CjgXKKC4ss89IeA==
-
-"@esbuild/win32-arm64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/win32-arm64/-/win32-arm64-0.19.12.tgz#773bdbaa1971b36db2f6560088639ccd1e6773ae"
-  integrity sha512-URgtR1dJnmGvX864pn1B2YUYNzjmXkuJOIqG2HdU62MVS4EHpU2946OZoTMnRUHklGtJdJZ33QfzdjGACXhn1A==
-
-"@esbuild/win32-ia32@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/win32-ia32/-/win32-ia32-0.19.12.tgz#000516cad06354cc84a73f0943a4aa690ef6fd67"
-  integrity sha512-+ZOE6pUkMOJfmxmBZElNOx72NKpIa/HFOMGzu8fqzQJ5kgf6aTGrcJaFsNiVMH4JKpMipyK+7k0n2UXN7a8YKQ==
-
-"@esbuild/win32-x64@0.19.12":
-  version "0.19.12"
-  resolved "https://registry.npmjs.org/@esbuild/win32-x64/-/win32-x64-0.19.12.tgz#c57c8afbb4054a3ab8317591a0b7320360b444ae"
-  integrity sha512-T1QyPSDCyMXaO3pzBkF96E8xMkiRYbUEZADd29SyPGabqxMViNoii+NcK7eWJAEoU6RZyEm5lVSIjTmcdoB9HA==
-
 "@eslint-community/eslint-utils@^4.2.0", "@eslint-community/eslint-utils@^4.4.0":
   version "4.4.0"
-  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59"
+  resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz"
   integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA==
   dependencies:
     eslint-visitor-keys "^3.3.0"
 
 "@eslint-community/regexpp@^4.5.1", "@eslint-community/regexpp@^4.6.1":
   version "4.10.0"
-  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz#548f6de556857c8bb73bbee70c35dc82a2e74d63"
+  resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.10.0.tgz"
   integrity sha512-Cu96Sd2By9mCNTx2iyKOmq10v22jUVQv0lQnlGNy16oE9589yE+QADPbrMGCkA51cKZSg3Pu/aTJVTGfL/qjUA==
 
 "@eslint/eslintrc@^2.1.4":
   version "2.1.4"
-  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz#388a269f0f25c1b6adc317b5a2c55714894c70ad"
+  resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.1.4.tgz"
   integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
   dependencies:
     ajv "^6.12.4"
@@ -207,19 +97,19 @@
 
 "@eslint/js@8.57.0":
   version "8.57.0"
-  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz#a5417ae8427873f1dd08b70b3574b453e67b5f7f"
+  resolved "https://registry.npmjs.org/@eslint/js/-/js-8.57.0.tgz"
   integrity sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==
 
 "@floating-ui/core@^1.0.0":
   version "1.6.0"
-  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz#fa41b87812a16bf123122bf945946bae3fdf7fc1"
+  resolved "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.0.tgz"
   integrity sha512-PcF++MykgmTj3CIyOQbKA/hDzOAiqI3mhuoN44WRCopIs1sgoDoU4oty4Jtqaj/y3oDU6fnVSm4QG0a3t5i0+g==
   dependencies:
     "@floating-ui/utils" "^0.2.1"
 
 "@floating-ui/dom@^1.0.1":
   version "1.6.3"
-  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz#954e46c1dd3ad48e49db9ada7218b0985cee75ef"
+  resolved "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.3.tgz"
   integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
   dependencies:
     "@floating-ui/core" "^1.0.0"
@@ -227,12 +117,12 @@
 
 "@floating-ui/utils@^0.2.0", "@floating-ui/utils@^0.2.1":
   version "0.2.1"
-  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz#16308cea045f0fc777b6ff20a9f25474dd8293d2"
+  resolved "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz"
   integrity sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==
 
 "@humanwhocodes/config-array@^0.11.14":
   version "0.11.14"
-  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz#d78e481a039f7566ecc9660b4ea7fe6b1fec442b"
+  resolved "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz"
   integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
   dependencies:
     "@humanwhocodes/object-schema" "^2.0.2"
@@ -241,17 +131,17 @@
 
 "@humanwhocodes/module-importer@^1.0.1":
   version "1.0.1"
-  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz#af5b2691a22b44be847b0ca81641c5fb6ad0172c"
+  resolved "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz"
   integrity sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==
 
 "@humanwhocodes/object-schema@^2.0.2":
   version "2.0.2"
-  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz#d9fae00a2d5cb40f92cfe64b47ad749fbc38f917"
+  resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-2.0.2.tgz"
   integrity sha512-6EwiSjwWYP7pTckG6I5eyFANjPhmPjUX9JRLUSfNPC7FX7zK9gyZAfUEaECL6ALTpGX5AjnBq3C9XmVWPitNpw==
 
 "@jridgewell/gen-mapping@^0.3.0":
   version "0.3.5"
-  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz#dcce6aff74bdf6dad1a95802b69b04a2fcb1fb36"
+  resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.5.tgz"
   integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
   dependencies:
     "@jridgewell/set-array" "^1.2.1"
@@ -260,17 +150,17 @@
 
 "@jridgewell/resolve-uri@^3.1.0":
   version "3.1.2"
-  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz#7a0ee601f60f99a20c7c7c5ff0c80388c1189bd6"
+  resolved "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz"
   integrity sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==
 
 "@jridgewell/set-array@^1.2.1":
   version "1.2.1"
-  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz#558fb6472ed16a4c850b889530e6b36438c49280"
+  resolved "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.2.1.tgz"
   integrity sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==
 
 "@jridgewell/source-map@^0.3.3":
   version "0.3.5"
-  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz#a3bb4d5c6825aab0d281268f47f6ad5853431e91"
+  resolved "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.5.tgz"
   integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
   dependencies:
     "@jridgewell/gen-mapping" "^0.3.0"
@@ -278,12 +168,12 @@
 
 "@jridgewell/sourcemap-codec@^1.4.10", "@jridgewell/sourcemap-codec@^1.4.14", "@jridgewell/sourcemap-codec@^1.4.15":
   version "1.4.15"
-  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz#d7c6e6755c78567a951e04ab52ef0fd26de59f32"
+  resolved "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.15.tgz"
   integrity sha512-eF2rxCRulEKXHTRiDrDy6erMYWqNw4LPdQ8UQA4huuxaQsVeRPFl2oM8oDGxMFhJUWZf9McpLtJasDDZb/Bpeg==
 
 "@jridgewell/trace-mapping@^0.3.24", "@jridgewell/trace-mapping@^0.3.9":
   version "0.3.25"
-  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz#15f190e98895f3fc23276ee14bc76b675c2e50f0"
+  resolved "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.25.tgz"
   integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.1.0"
@@ -291,121 +181,59 @@
 
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
+  resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"
   integrity sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==
   dependencies:
     "@nodelib/fs.stat" "2.0.5"
     run-parallel "^1.1.9"
 
-"@nodelib/fs.stat@2.0.5", "@nodelib/fs.stat@^2.0.2":
+"@nodelib/fs.stat@^2.0.2", "@nodelib/fs.stat@2.0.5":
   version "2.0.5"
-  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz#5bd262af94e9d25bd1e71b05deed44876a222e8b"
+  resolved "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz"
   integrity sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==
 
 "@nodelib/fs.walk@^1.2.3", "@nodelib/fs.walk@^1.2.8":
   version "1.2.8"
-  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz#e95737e8bb6746ddedf69c556953494f196fe69a"
+  resolved "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz"
   integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
   dependencies:
     "@nodelib/fs.scandir" "2.1.5"
     fastq "^1.6.0"
 
-"@palxp/color-picker@^1.5.5":
+"@palxp/color-picker@file:/Users/yzm/Desktop/Desktop/openSource/poster-design/packages/color-picker":
   version "1.5.5"
-  resolved "https://registry.npmjs.org/@palxp/color-picker/-/color-picker-1.5.5.tgz#96df913d6cbb764bd4c25c9777d2587c897a621b"
-  integrity sha512-RBxUax11xWInQXPauDyGj/dDSgRkJQrvgsEi7lvMCFgE1a3g3J9G0nwsswNuzZFx04wEsGkDRfukg7lIAHCzTg==
+  resolved "file:packages/color-picker"
   dependencies:
     throttle-debounce "^5.0.0"
 
-"@palxp/image-extraction@^1.2.4":
+"@palxp/image-extraction@file:/Users/yzm/Desktop/Desktop/openSource/poster-design/packages/image-extraction":
   version "1.2.4"
-  resolved "https://registry.npmjs.org/@palxp/image-extraction/-/image-extraction-1.2.4.tgz#b963538cd269b20f1fefc8d2f059695794f346ca"
-  integrity sha512-HRq2IwanJFlex0vn8y2hjXjwUaF3hG6hT59dATMuTPqMPmlWhjZzjmnAwdQw/VwU4uh5med1fLvYHE54Zgqwqw==
+  resolved "file:packages/image-extraction"
   dependencies:
     throttle-debounce "^5.0.0"
 
 "@popperjs/core@npm:@sxzz/popperjs-es@^2.11.7":
   version "2.11.7"
-  resolved "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz#a7f69e3665d3da9b115f9e71671dae1b97e13671"
+  resolved "https://registry.npmjs.org/@sxzz/popperjs-es/-/popperjs-es-2.11.7.tgz"
   integrity sha512-Ccy0NlLkzr0Ex2FKvh2X+OyERHXJ88XJ1MXtsI9y9fGexlaXaVTPzBCRBwIxFkORuOb+uBqeu+RqnpgYTEZRUQ==
 
 "@rollup/pluginutils@^5.0.2":
   version "5.1.0"
-  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz#7e53eddc8c7f483a4ad0b94afb1f7f5fd3c771e0"
+  resolved "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.1.0.tgz"
   integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
   dependencies:
     "@types/estree" "^1.0.0"
     estree-walker "^2.0.2"
     picomatch "^2.3.1"
 
-"@rollup/rollup-android-arm-eabi@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm-eabi/-/rollup-android-arm-eabi-4.12.1.tgz#11aaa02a933864b87f0b31cf2b755734e1f22787"
-  integrity sha512-iU2Sya8hNn1LhsYyf0N+L4Gf9Qc+9eBTJJJsaOGUp+7x4n2M9dxTt8UvhJl3oeftSjblSlpCfvjA/IfP3g5VjQ==
-
-"@rollup/rollup-android-arm64@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-android-arm64/-/rollup-android-arm64-4.12.1.tgz#b1e606fb4b46b38dc32bf010d513449462d669e9"
-  integrity sha512-wlzcWiH2Ir7rdMELxFE5vuM7D6TsOcJ2Yw0c3vaBR3VOsJFVTx9xvwnAvhgU5Ii8Gd6+I11qNHwndDscIm0HXg==
-
-"@rollup/rollup-darwin-arm64@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-arm64/-/rollup-darwin-arm64-4.12.1.tgz#dc21df1be9402671a8b6b15a93dd5953c68ec114"
-  integrity sha512-YRXa1+aZIFN5BaImK+84B3uNK8C6+ynKLPgvn29X9s0LTVCByp54TB7tdSMHDR7GTV39bz1lOmlLDuedgTwwHg==
-
 "@rollup/rollup-darwin-x64@4.12.1":
   version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz#397dcc4427d774f29b9954676893574ac563bf0b"
+  resolved "https://registry.npmjs.org/@rollup/rollup-darwin-x64/-/rollup-darwin-x64-4.12.1.tgz"
   integrity sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==
 
-"@rollup/rollup-linux-arm-gnueabihf@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm-gnueabihf/-/rollup-linux-arm-gnueabihf-4.12.1.tgz#d851fd49d617e7792e7cde8e5a95ca51ea520fe5"
-  integrity sha512-uBkwaI+gBUlIe+EfbNnY5xNyXuhZbDSx2nzzW8tRMjUmpScd6lCQYKY2V9BATHtv5Ef2OBq6SChEP8h+/cxifQ==
-
-"@rollup/rollup-linux-arm64-gnu@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-gnu/-/rollup-linux-arm64-gnu-4.12.1.tgz#e41a271ae51f79ffee6fb2b5597cc81b4ef66ad9"
-  integrity sha512-0bK9aG1kIg0Su7OcFTlexkVeNZ5IzEsnz1ept87a0TUgZ6HplSgkJAnFpEVRW7GRcikT4GlPV0pbtVedOaXHQQ==
-
-"@rollup/rollup-linux-arm64-musl@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-arm64-musl/-/rollup-linux-arm64-musl-4.12.1.tgz#d3b4cd6ef18d0aa7103129755e0c535701624fac"
-  integrity sha512-qB6AFRXuP8bdkBI4D7UPUbE7OQf7u5OL+R94JE42Z2Qjmyj74FtDdLGeriRyBDhm4rQSvqAGCGC01b8Fu2LthQ==
-
-"@rollup/rollup-linux-riscv64-gnu@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-riscv64-gnu/-/rollup-linux-riscv64-gnu-4.12.1.tgz#215101b2bb768cce2f2227145b8dd5c3c716c259"
-  integrity sha512-sHig3LaGlpNgDj5o8uPEoGs98RII8HpNIqFtAI8/pYABO8i0nb1QzT0JDoXF/pxzqO+FkxvwkHZo9k0NJYDedg==
-
-"@rollup/rollup-linux-x64-gnu@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-gnu/-/rollup-linux-x64-gnu-4.12.1.tgz#34a12fa305e167105eab70dbf577cd41e5199709"
-  integrity sha512-nD3YcUv6jBJbBNFvSbp0IV66+ba/1teuBcu+fBBPZ33sidxitc6ErhON3JNavaH8HlswhWMC3s5rgZpM4MtPqQ==
-
-"@rollup/rollup-linux-x64-musl@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-linux-x64-musl/-/rollup-linux-x64-musl-4.12.1.tgz#3f000b5a92a32b844e385e1166979c87882930a3"
-  integrity sha512-7/XVZqgBby2qp/cO0TQ8uJK+9xnSdJ9ct6gSDdEr4MfABrjTyrW6Bau7HQ73a2a5tPB7hno49A0y1jhWGDN9OQ==
-
-"@rollup/rollup-win32-arm64-msvc@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-win32-arm64-msvc/-/rollup-win32-arm64-msvc-4.12.1.tgz#27977d91f5059645ebb3b7fbf4429982de2278d3"
-  integrity sha512-CYc64bnICG42UPL7TrhIwsJW4QcKkIt9gGlj21gq3VV0LL6XNb1yAdHVp1pIi9gkts9gGcT3OfUYHjGP7ETAiw==
-
-"@rollup/rollup-win32-ia32-msvc@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-win32-ia32-msvc/-/rollup-win32-ia32-msvc-4.12.1.tgz#0d252acd5af0274209c74374867ee8b949843d75"
-  integrity sha512-LN+vnlZ9g0qlHGlS920GR4zFCqAwbv2lULrR29yGaWP9u7wF5L7GqWu9Ah6/kFZPXPUkpdZwd//TNR+9XC9hvA==
-
-"@rollup/rollup-win32-x64-msvc@4.12.1":
-  version "4.12.1"
-  resolved "https://registry.npmjs.org/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.12.1.tgz#cd8d175e001c212d5ac71c7827ef1d5c5e14494c"
-  integrity sha512-n+vkrSyphvmU0qkQ6QBNXCGr2mKjhP08mPRM/Xp5Ck2FV4NrHU+y6axzDeixUrCBHVUS51TZhjqrKBBsHLKb2Q==
-
 "@scena/dragscroll@^1.0.1", "@scena/dragscroll@^1.4.0":
   version "1.4.0"
-  resolved "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.4.0.tgz#220b2430c16119cd3e70044ee533a5b9a43cffd7"
+  resolved "https://registry.npmjs.org/@scena/dragscroll/-/dragscroll-1.4.0.tgz"
   integrity sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==
   dependencies:
     "@daybrush/utils" "^1.6.0"
@@ -413,14 +241,14 @@
 
 "@scena/event-emitter@^1.0.2", "@scena/event-emitter@^1.0.3", "@scena/event-emitter@^1.0.4", "@scena/event-emitter@^1.0.5":
   version "1.0.5"
-  resolved "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz#047e3acef93cf238d7ce3a8cc5a12ec6bd9c3bb1"
+  resolved "https://registry.npmjs.org/@scena/event-emitter/-/event-emitter-1.0.5.tgz"
   integrity sha512-AzY4OTb0+7ynefmWFQ6hxDdk0CySAq/D4efljfhtRHCOP7MBF9zUfhKG3TJiroVjASqVgkRJFdenS8ArZo6Olg==
   dependencies:
     "@daybrush/utils" "^1.1.1"
 
 "@scena/guides@^0.18.1":
   version "0.18.2"
-  resolved "https://registry.npmjs.org/@scena/guides/-/guides-0.18.2.tgz#2352f9c21927aee71c549c481b0203b0ab7f1696"
+  resolved "https://registry.npmjs.org/@scena/guides/-/guides-0.18.2.tgz"
   integrity sha512-ALfSx9flvhvP8zrc3Zl5HeZA+vnTmzzRC/rtfLnlDIa+HRXl3k1IuXOdHs+fsPZL+mpjbWDo1dVZjn+uY+95AA==
   dependencies:
     "@scena/event-emitter" "^1.0.4"
@@ -429,14 +257,14 @@
 
 "@scena/matrix@^1.0.0", "@scena/matrix@^1.1.1":
   version "1.1.1"
-  resolved "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz#5297f71825c72e2c2c8f802f924f482ed200c43c"
+  resolved "https://registry.npmjs.org/@scena/matrix/-/matrix-1.1.1.tgz"
   integrity sha512-JVKBhN0tm2Srl+Yt+Ywqu0oLgLcdemDQlD1OxmN9jaCTwaFPZ7tY8n6dhVgMEaR9qcR7r+kAlMXnSfNyYdE+Vg==
   dependencies:
     "@daybrush/utils" "^1.4.0"
 
 "@scena/react-guides@~0.17.1":
   version "0.17.1"
-  resolved "https://registry.npmjs.org/@scena/react-guides/-/react-guides-0.17.1.tgz#d5f7b5004852505f6579c3360485052b3d3b9b6c"
+  resolved "https://registry.npmjs.org/@scena/react-guides/-/react-guides-0.17.1.tgz"
   integrity sha512-qmVKDw681kdsLvirevHPQ9jQy7aenQDy8VNsMdFgsak9GS/GcZz6wBT8lqp6otmQ5oEFjS7+4ZyFsH3tpMiDSQ==
   dependencies:
     "@daybrush/utils" "^1.4.0"
@@ -448,71 +276,64 @@
 
 "@scena/react-ruler@^0.9.1", "@scena/react-ruler@~0.9.1":
   version "0.9.1"
-  resolved "https://registry.npmjs.org/@scena/react-ruler/-/react-ruler-0.9.1.tgz#4e1af4b6fcee894246970e9ae27f6cf0e4e4359e"
+  resolved "https://registry.npmjs.org/@scena/react-ruler/-/react-ruler-0.9.1.tgz"
   integrity sha512-OO3KvUWrY1Wi9JL8uVVf7BLM4UyqEWFkJ0CHVcAWmbKWyDaOCWi4cnqb0s7mOtb57jftylUM56U1vaXdQ+51OQ==
   dependencies:
     "@daybrush/utils" "^1.6.0"
     framework-utils "^1.1.0"
 
-"@types/cropperjs@^1.3.0":
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz#44b804ec991e5fb8b878917ac51067f76c92a377"
-  integrity sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==
-  dependencies:
-    cropperjs "*"
-
-"@types/estree@1.0.5", "@types/estree@^1.0.0":
+"@types/estree@^1.0.0", "@types/estree@1.0.5":
   version "1.0.5"
-  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz#a6ce3e556e00fd9895dd872dd172ad0d4bd687f4"
+  resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
   integrity sha512-/kYRxGDLWzHOB7q+wtSUQlFrtcdUccpfy+X+9iMBpHK8QLLhx2wIPYuS5DYtR9Wa/YlZAbIovy7qVdB1Aq6Lyw==
 
 "@types/fontfaceobserver@^2.1.3":
   version "2.1.3"
-  resolved "https://registry.npmjs.org/@types/fontfaceobserver/-/fontfaceobserver-2.1.3.tgz#2c735284b71dde89afab441bff05ebad4a636e04"
+  resolved "https://registry.npmjs.org/@types/fontfaceobserver/-/fontfaceobserver-2.1.3.tgz"
   integrity sha512-AewfFg9iUfoUZ4EfKxhBaEuzY2TUS+Hm0vXWMPcJRY7C4wC9XtW20lPVYHTcWVZYq1uthCEa5APl7RAX7jr2Xg==
 
 "@types/json-schema@^7.0.12":
   version "7.0.15"
-  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz#596a1747233694d50f6ad8a7869fcb6f56cf5841"
+  resolved "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz"
   integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
 
-"@types/lodash-es@^4.17.6":
+"@types/lodash-es@*", "@types/lodash-es@^4.17.6":
   version "4.17.12"
-  resolved "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz#65f6d1e5f80539aa7cfbfc962de5def0cf4f341b"
+  resolved "https://registry.npmjs.org/@types/lodash-es/-/lodash-es-4.17.12.tgz"
   integrity sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==
   dependencies:
     "@types/lodash" "*"
 
 "@types/lodash@*", "@types/lodash@^4.14.182":
   version "4.14.202"
-  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz#f09dbd2fb082d507178b2f2a5c7e74bd72ff98f8"
+  resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.202.tgz"
   integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
 
-"@types/node@^20.11.24":
+"@types/node@^18.0.0 || >=20.0.0", "@types/node@^20.11.24":
   version "20.11.25"
-  resolved "https://registry.npmjs.org/@types/node/-/node-20.11.25.tgz#0f50d62f274e54dd7a49f7704cc16bfbcccaf49f"
+  resolved "https://registry.npmjs.org/@types/node/-/node-20.11.25.tgz"
   integrity sha512-TBHyJxk2b7HceLVGFcpAUjsa5zIdsPWlR6XHfyGzd0SFu+/NFgQgMAl96MSDZgQDvJAvV6BKsFOrt6zIL09JDw==
   dependencies:
     undici-types "~5.26.4"
 
 "@types/semver@^7.5.0":
   version "7.5.8"
-  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
+  resolved "https://registry.npmjs.org/@types/semver/-/semver-7.5.8.tgz"
   integrity sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==
 
 "@types/throttle-debounce@^2.1.0":
   version "2.1.0"
-  resolved "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz#1c3df624bfc4b62f992d3012b84c56d41eab3776"
+  resolved "https://registry.npmjs.org/@types/throttle-debounce/-/throttle-debounce-2.1.0.tgz"
   integrity sha512-5eQEtSCoESnh2FsiLTxE121IiE60hnMqcb435fShf4bpLRjEu1Eoekht23y6zXS9Ts3l+Szu3TARnTsA0GkOkQ==
 
 "@types/web-bluetooth@^0.0.16":
   version "0.0.16"
-  resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz#1d12873a8e49567371f2a75fe3e7f7edca6662d8"
+  resolved "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz"
   integrity sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ==
 
 "@typescript-eslint/eslint-plugin@^7.1.0":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz#dd71fc5c7ecec745ca26ece506d84d203a205c0e"
+  resolved "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-7.1.1.tgz"
   integrity sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw==
   dependencies:
     "@eslint-community/regexpp" "^4.5.1"
@@ -527,9 +348,9 @@
     semver "^7.5.4"
     ts-api-utils "^1.0.1"
 
-"@typescript-eslint/parser@^7.1.1":
+"@typescript-eslint/parser@^7.0.0", "@typescript-eslint/parser@^7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.1.1.tgz#6a9d0a5c9ccdf5dbd3cb8c949728c64e24e07d1f"
+  resolved "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-7.1.1.tgz"
   integrity sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ==
   dependencies:
     "@typescript-eslint/scope-manager" "7.1.1"
@@ -540,7 +361,7 @@
 
 "@typescript-eslint/scope-manager@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz#9e301803ff8e21a74f50c6f89a4baccad9a48f93"
+  resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-7.1.1.tgz"
   integrity sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA==
   dependencies:
     "@typescript-eslint/types" "7.1.1"
@@ -548,7 +369,7 @@
 
 "@typescript-eslint/type-utils@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz#aee820d5bedd39b83c18585a526cc520ddb7a226"
+  resolved "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-7.1.1.tgz"
   integrity sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g==
   dependencies:
     "@typescript-eslint/typescript-estree" "7.1.1"
@@ -558,12 +379,12 @@
 
 "@typescript-eslint/types@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.1.1.tgz#ca33ba7cf58224fb46a84fea62593c2c53cd795f"
+  resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-7.1.1.tgz"
   integrity sha512-KhewzrlRMrgeKm1U9bh2z5aoL4s7K3tK5DwHDn8MHv0yQfWFz/0ZR6trrIHHa5CsF83j/GgHqzdbzCXJ3crx0Q==
 
 "@typescript-eslint/typescript-estree@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz#09c54af0151a1b05d0875c0fc7fe2ec7a2476ece"
+  resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-7.1.1.tgz"
   integrity sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw==
   dependencies:
     "@typescript-eslint/types" "7.1.1"
@@ -577,7 +398,7 @@
 
 "@typescript-eslint/utils@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.1.1.tgz#bdeeb789eee4af5d3fb5400a69566d4dbf97ff3b"
+  resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-7.1.1.tgz"
   integrity sha512-thOXM89xA03xAE0lW7alstvnyoBUbBX38YtY+zAUcpRPcq9EIhXPuJ0YTv948MbzmKh6e1AUszn5cBFK49Umqg==
   dependencies:
     "@eslint-community/eslint-utils" "^4.4.0"
@@ -590,7 +411,7 @@
 
 "@typescript-eslint/visitor-keys@7.1.1":
   version "7.1.1"
-  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz#e6538a58c9b157f03bcbb29e3b6a92fe39a6ab0d"
+  resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-7.1.1.tgz"
   integrity sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ==
   dependencies:
     "@typescript-eslint/types" "7.1.1"
@@ -598,31 +419,31 @@
 
 "@ungap/structured-clone@^1.2.0":
   version "1.2.0"
-  resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
+  resolved "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
 "@vitejs/plugin-vue@^5.0.4":
   version "5.0.4"
-  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz#508d6a0f2440f86945835d903fcc0d95d1bb8a37"
+  resolved "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-5.0.4.tgz"
   integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
 
-"@volar/language-core@1.11.1", "@volar/language-core@~1.11.1":
+"@volar/language-core@~1.11.1", "@volar/language-core@1.11.1":
   version "1.11.1"
-  resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz#ecdf12ea8dc35fb8549e517991abcbf449a5ad4f"
+  resolved "https://registry.npmjs.org/@volar/language-core/-/language-core-1.11.1.tgz"
   integrity sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==
   dependencies:
     "@volar/source-map" "1.11.1"
 
-"@volar/source-map@1.11.1", "@volar/source-map@~1.11.1":
+"@volar/source-map@~1.11.1", "@volar/source-map@1.11.1":
   version "1.11.1"
-  resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz#535b0328d9e2b7a91dff846cab4058e191f4452f"
+  resolved "https://registry.npmjs.org/@volar/source-map/-/source-map-1.11.1.tgz"
   integrity sha512-hJnOnwZ4+WT5iupLRnuzbULZ42L7BWWPMmruzwtLhJfpDVoZLjNBxHDi2sY2bgZXCKlpU5XcsMFoYrsQmPhfZg==
   dependencies:
     muggle-string "^0.3.1"
 
 "@volar/typescript@~1.11.1":
   version "1.11.1"
-  resolved "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz#ba86c6f326d88e249c7f5cfe4b765be3946fd627"
+  resolved "https://registry.npmjs.org/@volar/typescript/-/typescript-1.11.1.tgz"
   integrity sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==
   dependencies:
     "@volar/language-core" "1.11.1"
@@ -630,7 +451,7 @@
 
 "@vue/compiler-core@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.19.tgz#3161b1ede69da00f3ce8155dfab907a3eaa0515e"
+  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.19.tgz"
   integrity sha512-gj81785z0JNzRcU0Mq98E56e4ltO1yf8k5PQ+tV/7YHnbZkrM0fyFyuttnN8ngJZjbpofWE/m4qjKBiLl8Ju4w==
   dependencies:
     "@babel/parser" "^7.23.9"
@@ -639,36 +460,17 @@
     estree-walker "^2.0.2"
     source-map-js "^1.0.2"
 
-"@vue/compiler-core@3.4.21":
-  version "3.4.21"
-  resolved "https://registry.npmjs.org/@vue/compiler-core/-/compiler-core-3.4.21.tgz#868b7085378fc24e58c9aed14c8d62110a62be1a"
-  integrity sha512-MjXawxZf2SbZszLPYxaFCjxfibYrzr3eYbKxwpLR9EQN+oaziSu3qKVbwBERj1IFIB8OLUewxB5m/BFzi613og==
-  dependencies:
-    "@babel/parser" "^7.23.9"
-    "@vue/shared" "3.4.21"
-    entities "^4.5.0"
-    estree-walker "^2.0.2"
-    source-map-js "^1.0.2"
-
-"@vue/compiler-dom@3.4.19":
+"@vue/compiler-dom@^3.3.0", "@vue/compiler-dom@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz#2457e57e978f431e3b5fd11fc50a3e92d5816f9a"
+  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.19.tgz"
   integrity sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==
   dependencies:
     "@vue/compiler-core" "3.4.19"
     "@vue/shared" "3.4.19"
 
-"@vue/compiler-dom@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.npmjs.org/@vue/compiler-dom/-/compiler-dom-3.4.21.tgz#0077c355e2008207283a5a87d510330d22546803"
-  integrity sha512-IZC6FKowtT1sl0CR5DpXSiEB5ayw75oT2bma1BEhV7RRR1+cfwLrxc2Z8Zq/RGFzJ8w5r9QtCOvTjQgdn0IKmA==
-  dependencies:
-    "@vue/compiler-core" "3.4.21"
-    "@vue/shared" "3.4.21"
-
 "@vue/compiler-sfc@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz#33b238ded6d63e51f6a7048b742626f6007df129"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz"
   integrity sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==
   dependencies:
     "@babel/parser" "^7.23.9"
@@ -683,20 +485,20 @@
 
 "@vue/compiler-ssr@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz#1f8ee06005ebbaa354f8783fad84e9f7ea4a69c2"
+  resolved "https://registry.npmjs.org/@vue/compiler-ssr/-/compiler-ssr-3.4.19.tgz"
   integrity sha512-P0PLKC4+u4OMJ8sinba/5Z/iDT84uMRRlrWzadgLA69opCpI1gG4N55qDSC+dedwq2fJtzmGald05LWR5TFfLw==
   dependencies:
     "@vue/compiler-dom" "3.4.19"
     "@vue/shared" "3.4.19"
 
-"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.1":
+"@vue/devtools-api@^6.0.0-beta.11", "@vue/devtools-api@^6.5.0", "@vue/devtools-api@^6.5.1":
   version "6.6.1"
-  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz#7c14346383751d9f6ad4bea0963245b30220ef83"
+  resolved "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.6.1.tgz"
   integrity sha512-LgPscpE3Vs0x96PzSSB4IGVSZXZBZHpfxs+ZA1d+VEPwHdOXowy/Y2CsvCAIFrf+ssVU1pD1jidj505EpUnfbA==
 
 "@vue/language-core@1.8.27":
   version "1.8.27"
-  resolved "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz#2ca6892cb524e024a44e554e4c55d7a23e72263f"
+  resolved "https://registry.npmjs.org/@vue/language-core/-/language-core-1.8.27.tgz"
   integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
   dependencies:
     "@volar/language-core" "~1.11.1"
@@ -711,14 +513,14 @@
 
 "@vue/reactivity@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.19.tgz#8cf335d97d07881d8184cb23289289dc18b03f60"
+  resolved "https://registry.npmjs.org/@vue/reactivity/-/reactivity-3.4.19.tgz"
   integrity sha512-+VcwrQvLZgEclGZRHx4O2XhyEEcKaBi50WbxdVItEezUf4fqRh838Ix6amWTdX0CNb/b6t3Gkz3eOebfcSt+UA==
   dependencies:
     "@vue/shared" "3.4.19"
 
 "@vue/runtime-core@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.19.tgz#ef10357fdf3afdf68523b55424541000105e2aeb"
+  resolved "https://registry.npmjs.org/@vue/runtime-core/-/runtime-core-3.4.19.tgz"
   integrity sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==
   dependencies:
     "@vue/reactivity" "3.4.19"
@@ -726,7 +528,7 @@
 
 "@vue/runtime-dom@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz#079141e31d9f47515b9595f29843d51011f88739"
+  resolved "https://registry.npmjs.org/@vue/runtime-dom/-/runtime-dom-3.4.19.tgz"
   integrity sha512-IyZzIDqfNCF0OyZOauL+F4yzjMPN2rPd8nhqPP2N1lBn3kYqJpPHHru+83Rkvo2lHz5mW+rEeIMEF9qY3PB94g==
   dependencies:
     "@vue/runtime-core" "3.4.19"
@@ -735,25 +537,20 @@
 
 "@vue/server-renderer@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.19.tgz#e6f8ff5268d0758766ca9835375218924d5f0eb6"
+  resolved "https://registry.npmjs.org/@vue/server-renderer/-/server-renderer-3.4.19.tgz"
   integrity sha512-eAj2p0c429RZyyhtMRnttjcSToch+kTWxFPHlzGMkR28ZbF1PDlTcmGmlDxccBuqNd9iOQ7xPRPAGgPVj+YpQw==
   dependencies:
     "@vue/compiler-ssr" "3.4.19"
     "@vue/shared" "3.4.19"
 
-"@vue/shared@3.4.19":
+"@vue/shared@^3.3.0", "@vue/shared@3.4.19":
   version "3.4.19"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz#28105147811bcf1e6612bf1c9ab0c6d91ada019c"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz"
   integrity sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==
 
-"@vue/shared@3.4.21", "@vue/shared@^3.3.0":
-  version "3.4.21"
-  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.21.tgz#de526a9059d0a599f0b429af7037cd0c3ed7d5a1"
-  integrity sha512-PuJe7vDIi6VYSinuEbUIQgMIRZGgM8e4R+G+/dQTk0X1NEdvgvvgv7m+rfmDH1gZzyA1OjjoWskvHlfRNfQf3g==
-
 "@vueuse/core@^9.1.0":
   version "9.13.0"
-  resolved "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz#2f69e66d1905c1e4eebc249a01759cf88ea00cf4"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz"
   integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
   dependencies:
     "@types/web-bluetooth" "^0.0.16"
@@ -763,39 +560,39 @@
 
 "@vueuse/metadata@9.13.0":
   version "9.13.0"
-  resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz#bc25a6cdad1b1a93c36ce30191124da6520539ff"
+  resolved "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz"
   integrity sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==
 
 "@vueuse/shared@9.13.0":
   version "9.13.0"
-  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz#089ff4cc4e2e7a4015e57a8f32e4b39d096353b9"
+  resolved "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz"
   integrity sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==
   dependencies:
     vue-demi "*"
 
 "@webtoon/psd@^0.4.0":
   version "0.4.0"
-  resolved "https://registry.npmjs.org/@webtoon/psd/-/psd-0.4.0.tgz#855cb6541a67ce8add4be5d0c5b8e9eb0193cc8f"
+  resolved "https://registry.npmjs.org/@webtoon/psd/-/psd-0.4.0.tgz"
   integrity sha512-ztriE8oFOamRrV9opBURDy+JMiyhur2//vOXsC5CgdnYCB0L1Lnaag4NzP8N+NFCj7uNz9JRYtPmAbQMSDLIsQ==
 
 acorn-jsx@^5.2.0, acorn-jsx@^5.3.2:
   version "5.3.2"
-  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz#7ed5bb55908b3b2f1bc55c6af1653bada7f07937"
+  resolved "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz"
   integrity sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==
 
+"acorn@^6.0.0 || ^7.0.0 || ^8.0.0", acorn@^8.11.3, acorn@^8.8.2, acorn@^8.9.0:
+  version "8.11.3"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz"
+  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
+
 acorn@^7.1.1:
   version "7.4.1"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz#feaed255973d2e77555b83dbc08851a6c63520fa"
+  resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.1.tgz"
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
-acorn@^8.11.3, acorn@^8.8.2, acorn@^8.9.0:
-  version "8.11.3"
-  resolved "https://registry.npmjs.org/acorn/-/acorn-8.11.3.tgz#71e0b14e13a4ec160724b38fb7b0f233b1b81d7a"
-  integrity sha512-Y9rRfJG5jcKOE0CLisYbojUjIrIEE7AGMzA/Sm4BslANhbS+cDMpgBdcPT91oJ7OuJ9hYJBx59RjbhxVnrF8Xg==
-
 ajv@^6.12.4:
   version "6.12.6"
-  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
   integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
   dependencies:
     fast-deep-equal "^3.1.1"
@@ -805,19 +602,19 @@ ajv@^6.12.4:
 
 ansi-regex@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz#082cb2c89c9fe8659a311a53bd6a4dc5301db304"
+  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz"
   integrity sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==
 
 ansi-styles@^4.1.0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz#edd803628ae71c04c85ae7a0906edad34b648937"
+  resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz"
   integrity sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==
   dependencies:
     color-convert "^2.0.1"
 
 anymatch@~3.1.2:
   version "3.1.3"
-  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
+  resolved "https://registry.npmjs.org/anymatch/-/anymatch-3.1.3.tgz"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
   dependencies:
     normalize-path "^3.0.0"
@@ -825,22 +622,22 @@ anymatch@~3.1.2:
 
 argparse@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz#246f50f3ca78a3240f6c997e8a9bd1eac49e4b38"
+  resolved "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz"
   integrity sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==
 
 array-union@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz#b798420adbeb1de828d84acd8a2e23d3efe85e8d"
+  resolved "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz"
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
 async-validator@^4.2.5:
   version "4.2.5"
-  resolved "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz#c96ea3332a521699d0afaaceed510a54656c6339"
+  resolved "https://registry.npmjs.org/async-validator/-/async-validator-4.2.5.tgz"
   integrity sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg==
 
 autoprefixer@^10.3.1:
   version "10.4.18"
-  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz#fcb171a3b017be7cb5d8b7a825f5aacbf2045163"
+  resolved "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.18.tgz"
   integrity sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==
   dependencies:
     browserslist "^4.23.0"
@@ -852,29 +649,29 @@ autoprefixer@^10.3.1:
 
 axios@^0.21.1:
   version "0.21.4"
-  resolved "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  resolved "https://registry.npmjs.org/axios/-/axios-0.21.4.tgz"
   integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
   dependencies:
     follow-redirects "^1.14.0"
 
 balanced-match@^1.0.0:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz#e83e3a7e3f300b34cb9d87f615fa0cbf357690ee"
+  resolved "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz"
   integrity sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==
 
 base64-arraybuffer@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz#1c37589a7c4b0746e34bd1feb951da2df01c1bdc"
+  resolved "https://registry.npmjs.org/base64-arraybuffer/-/base64-arraybuffer-1.0.2.tgz"
   integrity sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==
 
 binary-extensions@^2.0.0:
   version "2.2.0"
-  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  resolved "https://registry.npmjs.org/binary-extensions/-/binary-extensions-2.2.0.tgz"
   integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz"
   integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
   dependencies:
     balanced-match "^1.0.0"
@@ -882,21 +679,21 @@ brace-expansion@^1.1.7:
 
 brace-expansion@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  resolved "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.1.tgz"
   integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
   dependencies:
     balanced-match "^1.0.0"
 
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
+  resolved "https://registry.npmjs.org/braces/-/braces-3.0.2.tgz"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
   dependencies:
     fill-range "^7.0.1"
 
-browserslist@^4.23.0:
+browserslist@^4.23.0, "browserslist@>= 4.21.0":
   version "4.23.0"
-  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz#8f3acc2bbe73af7213399430890f86c63a5674ab"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz"
   integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
   dependencies:
     caniuse-lite "^1.0.30001587"
@@ -906,22 +703,22 @@ browserslist@^4.23.0:
 
 buffer-from@^1.0.0:
   version "1.1.2"
-  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz#2b146a6fd72e80b4f55d255f35ed59a3a9a41bd5"
+  resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
 callsites@^3.0.0:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
+  resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
 caniuse-lite@^1.0.30001587, caniuse-lite@^1.0.30001591:
   version "1.0.30001596"
-  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz#da06b79c3d9c3d9958eb307aa832ac68ead79bee"
+  resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001596.tgz"
   integrity sha512-zpkZ+kEr6We7w63ORkoJ2pOfBwBkY/bJrG/UZ90qNb45Isblu8wzDgevEOrRL1r9dWayHjYiiyCMEXPn4DweGQ==
 
 chalk@^4.0.0, chalk@^4.1.2:
   version "4.1.2"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
+  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
   dependencies:
     ansi-styles "^4.1.0"
@@ -929,7 +726,7 @@ chalk@^4.0.0, chalk@^4.1.2:
 
 chokidar@^3.6.0:
   version "3.6.0"
-  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz#197c6cc669ef2a8dc5e7b4d97ee4e092c3eb0d5b"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
   integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
   dependencies:
     anymatch "~3.1.2"
@@ -944,58 +741,53 @@ chokidar@^3.6.0:
 
 color-convert@^2.0.1:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz#72d3a68d598c9bdb3af2ad1e84f21d896abd4de3"
+  resolved "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz"
   integrity sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==
   dependencies:
     color-name "~1.1.4"
 
 color-name@~1.1.4:
   version "1.1.4"
-  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
+  resolved "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
 commander@^2.20.0:
   version "2.20.3"
-  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
+  resolved "https://registry.npmjs.org/commander/-/commander-2.20.3.tgz"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
 
 computeds@^0.0.1:
   version "0.0.1"
-  resolved "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz#215b08a4ba3e08a11ff6eee5d6d8d7166a97ce2e"
+  resolved "https://registry.npmjs.org/computeds/-/computeds-0.0.1.tgz"
   integrity sha512-7CEBgcMjVmitjYo5q8JTJVra6X5mQ20uTThdK+0kR7UEaDrAWEQcRiBtWJzga4eRpP6afNwwLsX2SET2JhVB1Q==
 
 concat-map@0.0.1:
   version "0.0.1"
-  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
+  resolved "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz"
   integrity sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==
 
 copy-anything@^2.0.1:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz#092454ea9584a7b7ad5573062b2a87f5900fc480"
+  resolved "https://registry.npmjs.org/copy-anything/-/copy-anything-2.0.6.tgz"
   integrity sha512-1j20GZTsvKNkc4BY3NpMOM8tt///wY3FpIzozTOFO2ffuZcV61nojHXVKIy3WM+7ADCy5FVhdZYHYDdgTU0yJw==
   dependencies:
     is-what "^3.14.1"
 
 core-js@^3.6.5:
   version "3.36.0"
-  resolved "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz#e752fa0b0b462a0787d56e9d73f80b0f7c0dde68"
+  resolved "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz"
   integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
 
-cropperjs@*:
-  version "1.6.1"
-  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz#fd132021d93b824b1b0f2c2c3b763419fb792d89"
-  integrity sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==
-
 cross-env@^7.0.3:
   version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
   integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
   dependencies:
     cross-spawn "^7.0.1"
 
 cross-spawn@^7.0.1, cross-spawn@^7.0.2:
   version "7.0.3"
-  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz#f73a85b9d5d41d045551c177e2882d4ac85728a6"
+  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
   dependencies:
     path-key "^3.1.0"
@@ -1004,21 +796,21 @@ cross-spawn@^7.0.1, cross-spawn@^7.0.2:
 
 css-line-break@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz#bfef660dfa6f5397ea54116bb3cb4873edbc4fa0"
+  resolved "https://registry.npmjs.org/css-line-break/-/css-line-break-2.1.0.tgz"
   integrity sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==
   dependencies:
     utrie "^1.0.2"
 
 css-styled@^1.0.0, css-styled@^1.0.6, css-styled@^1.0.8, css-styled@~1.0.1, css-styled@~1.0.8:
   version "1.0.8"
-  resolved "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz#c9c05dc4abdef5571033090bfb8cfc5e19429974"
+  resolved "https://registry.npmjs.org/css-styled/-/css-styled-1.0.8.tgz"
   integrity sha512-tCpP7kLRI8dI95rCh3Syl7I+v7PP+2JYOzWkl0bUEoSbJM+u8ITbutjlQVf0NC2/g4ULROJPi16sfwDIO8/84g==
   dependencies:
     "@daybrush/utils" "^1.13.0"
 
 css-to-mat@^1.0.3, css-to-mat@^1.1.1:
   version "1.1.1"
-  resolved "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz#0dd10dcf9ec17df15708c8ff07a74fbd0b9a3fe5"
+  resolved "https://registry.npmjs.org/css-to-mat/-/css-to-mat-1.1.1.tgz"
   integrity sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==
   dependencies:
     "@daybrush/utils" "^1.13.0"
@@ -1026,54 +818,54 @@ css-to-mat@^1.0.3, css-to-mat@^1.1.1:
 
 csstype@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz#d80ff294d114fb0e6ac500fbf85b60137d7eff81"
+  resolved "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz"
   integrity sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==
 
 dayjs@^1.10.7, dayjs@^1.11.3:
   version "1.11.10"
-  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz#68acea85317a6e164457d6d6947564029a6a16a0"
+  resolved "https://registry.npmjs.org/dayjs/-/dayjs-1.11.10.tgz"
   integrity sha512-vjAczensTgRcqDERK0SR2XMwsF/tSvnvlv6VcF2GIhg6Sx4yOIt/irsr1RDJsKiIyBzJDpCoXiWWq28MqH2cnQ==
 
 de-indent@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
+  resolved "https://registry.npmjs.org/de-indent/-/de-indent-1.0.2.tgz"
   integrity sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==
 
 debug@^4.1.1, debug@^4.3.1, debug@^4.3.2, debug@^4.3.3, debug@^4.3.4:
   version "4.3.4"
-  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz#1319f6579357f2338d3337d2cdd4914bb5dcc865"
+  resolved "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz"
   integrity sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==
   dependencies:
     ms "2.1.2"
 
 deep-is@^0.1.3:
   version "0.1.4"
-  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz#a6f2dce612fadd2ef1f519b73551f17e85199831"
+  resolved "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz"
   integrity sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==
 
 dir-glob@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz#56dbf73d992a4a93ba1584f4534063fd2e41717f"
+  resolved "https://registry.npmjs.org/dir-glob/-/dir-glob-3.0.1.tgz"
   integrity sha512-WkrWp9GR4KXfKGYzOLmTuGVi1UWFfws377n9cc55/tb6DuqyF6pcQ5AbiHEshaDpY9v6oaSr2XCDidGmMwdzIA==
   dependencies:
     path-type "^4.0.0"
 
 doctrine@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz#addebead72a6574db783639dc87a121773973961"
+  resolved "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz"
   integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
   dependencies:
     esutils "^2.0.2"
 
 electron-to-chromium@^1.4.668:
-  version "1.4.695"
-  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.695.tgz#1753f4017e8d7e72a1ce5058c0fc66c8b67bab8e"
-  integrity sha512-eMijZmeqPtm774pCZIOrfUHMs/7ls++W1sLhxwqgu8KQ8E2WmMtzwyqOMt0XXUJ3HTIPfuwlfwF+I5cwnfItBA==
+  version "1.4.699"
+  resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.699.tgz"
+  integrity sha512-I7q3BbQi6e4tJJN5CRcyvxhK0iJb34TV8eJQcgh+fR2fQ8miMgZcEInckCo1U9exDHbfz7DLDnFn8oqH/VcRKw==
 
 element-plus@^2.3.7:
-  version "2.6.0"
-  resolved "https://registry.npmjs.org/element-plus/-/element-plus-2.6.0.tgz#bba8707780ee4612f8fc05f397e2b8b71510ec62"
-  integrity sha512-MP+N48P+diyndR+GjY+0VOrUmFnajD4U0CkrXIMzmeRmq4+dwi0bdzVo587v4wDo9Hs+ggviyacqm3NS8JYVqw==
+  version "2.6.1"
+  resolved "https://registry.npmjs.org/element-plus/-/element-plus-2.6.1.tgz"
+  integrity sha512-6VRpLjwtIVdtUuITJPPKtpOH1NM6nuAkRE3q5O4Lrx0N1bYMhTkiqb2Jy7zfQuDPbOIkkF2OABTzegpNnzgsnQ==
   dependencies:
     "@ctrl/tinycolor" "^3.4.1"
     "@element-plus/icons-vue" "^2.3.1"
@@ -1093,24 +885,24 @@ element-plus@^2.3.7:
 
 entities@^4.5.0:
   version "4.5.0"
-  resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz#5d268ea5e7113ec74c4d033b79ea5a35a488fb48"
+  resolved "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz"
   integrity sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==
 
 errno@^0.1.1:
   version "0.1.8"
-  resolved "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz#8bb3e9c7d463be4976ff888f76b4809ebc2e811f"
+  resolved "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz"
   integrity sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==
   dependencies:
     prr "~1.0.1"
 
 es-module-lexer@^1.3.0:
   version "1.4.1"
-  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz#41ea21b43908fe6a287ffcbe4300f790555331f5"
+  resolved "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-1.4.1.tgz"
   integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==
 
 esbuild@^0.19.3:
   version "0.19.12"
-  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz#dc82ee5dc79e82f5a5c3b4323a2a641827db3e04"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz"
   integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
   optionalDependencies:
     "@esbuild/aix-ppc64" "0.19.12"
@@ -1139,27 +931,27 @@ esbuild@^0.19.3:
 
 escalade@^3.1.1:
   version "3.1.2"
-  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz#54076e9ab29ea5bf3d8f1ed62acffbb88272df27"
+  resolved "https://registry.npmjs.org/escalade/-/escalade-3.1.2.tgz"
   integrity sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==
 
 escape-html@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
+  resolved "https://registry.npmjs.org/escape-html/-/escape-html-1.0.3.tgz"
   integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz#14ba83a5d373e3d311e5afca29cf5bfad965bf34"
+  resolved "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz"
   integrity sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==
 
 eslint-config-alloy@~4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/eslint-config-alloy/-/eslint-config-alloy-4.1.0.tgz#3d5df5d139fb27797943c36e91945be5b300886e"
+  resolved "https://registry.npmjs.org/eslint-config-alloy/-/eslint-config-alloy-4.1.0.tgz"
   integrity sha512-zpW7rxURMsGyNBaN1z9gISm0NWglNR5BzwrOI3TKocT+30jyi8qBjMJJZoYlKbYHPkdy/DM8O2oGvqgJjKTxNA==
 
 eslint-plugin-vue@^7.12.1:
   version "7.20.0"
-  resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz#98c21885a6bfdf0713c3a92957a5afeaaeed9253"
+  resolved "https://registry.npmjs.org/eslint-plugin-vue/-/eslint-plugin-vue-7.20.0.tgz"
   integrity sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==
   dependencies:
     eslint-utils "^2.1.0"
@@ -1169,7 +961,7 @@ eslint-plugin-vue@^7.12.1:
 
 eslint-scope@^5.1.1:
   version "5.1.1"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz#e786e59a66cb92b3f6c1fb0d508aab174848f48c"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
   integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
   dependencies:
     esrecurse "^4.3.0"
@@ -1177,7 +969,7 @@ eslint-scope@^5.1.1:
 
 eslint-scope@^7.2.2:
   version "7.2.2"
-  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz#deb4f92563390f32006894af62a22dba1c46423f"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz"
   integrity sha512-dOt21O7lTMhDM+X9mB4GX+DZrZtCUJPL/wlcTqxyrx5IvO0IYtILdtrQGQp+8n5S0gwSVmOf9NQrjMOgfQZlIg==
   dependencies:
     esrecurse "^4.3.0"
@@ -1185,24 +977,24 @@ eslint-scope@^7.2.2:
 
 eslint-utils@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz#d2de5e03424e707dc10c74068ddedae708741b27"
+  resolved "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz"
   integrity sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==
   dependencies:
     eslint-visitor-keys "^1.1.0"
 
 eslint-visitor-keys@^1.1.0:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
 eslint-visitor-keys@^3.3.0, eslint-visitor-keys@^3.4.1, eslint-visitor-keys@^3.4.3:
   version "3.4.3"
-  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz#0cd72fe8550e3c2eae156a96a4dddcd1c8ac5800"
+  resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz"
   integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
 
-eslint@^8.56.0:
+"eslint@^6.0.0 || ^7.0.0 || >=8.0.0", "eslint@^6.2.0 || ^7.0.0 || ^8.0.0", eslint@^8.56.0, eslint@>=5.0.0:
   version "8.57.0"
-  resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668"
+  resolved "https://registry.npmjs.org/eslint/-/eslint-8.57.0.tgz"
   integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
   dependencies:
     "@eslint-community/eslint-utils" "^4.2.0"
@@ -1246,7 +1038,7 @@ eslint@^8.56.0:
 
 espree@^6.2.1:
   version "6.2.1"
-  resolved "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz#77fc72e1fd744a2052c20f38a5b575832e82734a"
+  resolved "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz"
   integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
   dependencies:
     acorn "^7.1.1"
@@ -1255,7 +1047,7 @@ espree@^6.2.1:
 
 espree@^9.6.0, espree@^9.6.1:
   version "9.6.1"
-  resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz#a2a17b8e434690a5432f2f8018ce71d331a48c6f"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz"
   integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
   dependencies:
     acorn "^8.9.0"
@@ -1264,46 +1056,46 @@ espree@^9.6.0, espree@^9.6.1:
 
 esquery@^1.4.0, esquery@^1.4.2:
   version "1.5.0"
-  resolved "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz#6ce17738de8577694edd7361c57182ac8cb0db0b"
+  resolved "https://registry.npmjs.org/esquery/-/esquery-1.5.0.tgz"
   integrity sha512-YQLXUplAwJgCydQ78IMJywZCceoqk1oH01OERdSAJc/7U2AylwjhSCLDEtqwg811idIS/9fIU5GjG73IgjKMVg==
   dependencies:
     estraverse "^5.1.0"
 
 esrecurse@^4.3.0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz#7ad7964d679abb28bee72cec63758b1c5d2c9921"
+  resolved "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz"
   integrity sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==
   dependencies:
     estraverse "^5.2.0"
 
 estraverse@^4.1.1:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
 
 estraverse@^5.1.0, estraverse@^5.2.0:
   version "5.3.0"
-  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz#2eea5290702f26ab8fe5370370ff86c965d21123"
+  resolved "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz"
   integrity sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==
 
 estree-walker@^2.0.2:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz#52f010178c2a4c117a7757cfe942adb7d2da4cac"
+  resolved "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz"
   integrity sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==
 
 esutils@^2.0.2:
   version "2.0.3"
-  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz#74d2eb4de0b8da1293711910d50775b9b710ef64"
+  resolved "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz"
   integrity sha512-kVscqXk4OCp68SZ0dkgEKVi6/8ij300KBWTJq32P/dYeWTSwK41WyTxalN1eRmA5Z9UU/LX9D7FWSmV9SAYx6g==
 
 fast-deep-equal@^3.1.1, fast-deep-equal@^3.1.3:
   version "3.1.3"
-  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz#3a7d56b559d6cbc3eb512325244e619a65c6c525"
+  resolved "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-3.1.3.tgz"
   integrity sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==
 
 fast-glob@^3.2.9:
   version "3.3.2"
-  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz#a904501e57cfdd2ffcded45e99a54fef55e46129"
+  resolved "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.2.tgz"
   integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
   dependencies:
     "@nodelib/fs.stat" "^2.0.2"
@@ -1314,38 +1106,38 @@ fast-glob@^3.2.9:
 
 fast-json-stable-stringify@^2.0.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz#874bf69c6f404c2b5d99c481341399fd55892633"
+  resolved "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz"
   integrity sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==
 
 fast-levenshtein@^2.0.6:
   version "2.0.6"
-  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz#3d8a5c66883a16a30ca8643e851f19baa7797917"
+  resolved "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz"
   integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
 
 fastq@^1.6.0:
   version "1.17.1"
-  resolved "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz#2a523f07a4e7b1e81a42b91b8bf2254107753b47"
+  resolved "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz"
   integrity sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==
   dependencies:
     reusify "^1.0.4"
 
 file-entry-cache@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz#211b2dd9659cb0394b073e7323ac3c933d522027"
+  resolved "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz"
   integrity sha512-7Gps/XWymbLk2QLYK4NzpMOrYjMhdIxXuIvy2QBsLE6ljuodKvdkWs/cpyJJ3CVIVpH0Oi1Hvg1ovbMzLdFBBg==
   dependencies:
     flat-cache "^3.0.4"
 
 fill-range@^7.0.1:
   version "7.0.1"
-  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz#1919a6a7c75fe38b2c7c77e5198535da9acdda40"
+  resolved "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz"
   integrity sha512-qOo9F+dMUmC2Lcb4BbVvnKJxTPjCm+RRpe4gDuGrzkL7mEVl/djYSu2OdQ2Pa302N4oqkSg9ir6jaLWJ2USVpQ==
   dependencies:
     to-regex-range "^5.0.1"
 
 find-up@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz#4c92819ecb7083561e4f4a240a86be5198f536fc"
+  resolved "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz"
   integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
   dependencies:
     locate-path "^6.0.0"
@@ -1353,7 +1145,7 @@ find-up@^5.0.0:
 
 flat-cache@^3.0.4:
   version "3.2.0"
-  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz#2c0c2d5040c99b1632771a9d105725c0115363ee"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz"
   integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
   dependencies:
     flatted "^3.2.9"
@@ -1362,32 +1154,32 @@ flat-cache@^3.0.4:
 
 flatted@^3.2.9:
   version "3.3.1"
-  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz#21db470729a6734d4997002f439cb308987f567a"
+  resolved "https://registry.npmjs.org/flatted/-/flatted-3.3.1.tgz"
   integrity sha512-X8cqMLLie7KsNUDSdzeN8FYK9rEt4Dt67OsG/DNGnYTSDBG4uFAJFBnUeiV+zCVAvwFy56IjM9sH51jVaEhNxw==
 
 follow-redirects@^1.14.0:
   version "1.15.5"
-  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz#54d4d6d062c0fa7d9d17feb008461550e3ba8020"
+  resolved "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz"
   integrity sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==
 
 fontfaceobserver@^2.1.0:
   version "2.3.0"
-  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz#5fb392116e75d5024b7ec8e4f2ce92106d1488c8"
+  resolved "https://registry.npmjs.org/fontfaceobserver/-/fontfaceobserver-2.3.0.tgz"
   integrity sha512-6FPvD/IVyT4ZlNe7Wcn5Fb/4ChigpucKYSvD6a+0iMoLn2inpo711eyIcKjmDtE5XNcgAkSH9uN/nfAeZzHEfg==
 
 fraction.js@^4.3.7:
   version "4.3.7"
-  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
+  resolved "https://registry.npmjs.org/fraction.js/-/fraction.js-4.3.7.tgz"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
 framework-utils@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz#a3b528bce838dfd623148847dc92371b09d0da2d"
+  resolved "https://registry.npmjs.org/framework-utils/-/framework-utils-1.1.0.tgz"
   integrity sha512-KAfqli5PwpFJ8o3psRNs8svpMGyCSAe8nmGcjQ0zZBWN2H6dZDnq+ABp3N3hdUmFeMrLtjOCTXD4yplUJIWceg==
 
 fs-extra@^10.0.0:
   version "10.1.0"
-  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  resolved "https://registry.npmjs.org/fs-extra/-/fs-extra-10.1.0.tgz"
   integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
   dependencies:
     graceful-fs "^4.2.0"
@@ -1396,39 +1188,46 @@ fs-extra@^10.0.0:
 
 fs.realpath@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz#1504ad2523158caa40db4a2787cb01411994ea4f"
+  resolved "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz"
   integrity sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==
 
 fsevents@~2.3.2, fsevents@~2.3.3:
   version "2.3.3"
-  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  resolved "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
 gesto@^1.19.4, gesto@^1.2.1, gesto@^1.5.1:
   version "1.19.4"
-  resolved "https://registry.npmjs.org/gesto/-/gesto-1.19.4.tgz#14921ca89e4e70c14307c4d942df04f59eb00749"
+  resolved "https://registry.npmjs.org/gesto/-/gesto-1.19.4.tgz"
   integrity sha512-hfr/0dWwh0Bnbb88s3QVJd1ZRJeOWcgHPPwmiH6NnafDYvhTsxg+SLYu+q/oPNh9JS3V+nlr6fNs8kvPAtcRDQ==
   dependencies:
     "@daybrush/utils" "^1.13.0"
     "@scena/event-emitter" "^1.0.2"
 
-glob-parent@^5.1.2, glob-parent@~5.1.2:
+glob-parent@^5.1.2:
   version "5.1.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
   integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
   dependencies:
     is-glob "^4.0.1"
 
 glob-parent@^6.0.2:
   version "6.0.2"
-  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
   dependencies:
     is-glob "^4.0.3"
 
+glob-parent@~5.1.2:
+  version "5.1.2"
+  resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz"
+  integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==
+  dependencies:
+    is-glob "^4.0.1"
+
 glob@^7.1.3:
   version "7.2.3"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz#b8df0fb802bbfa8e89bd1d938b4e16578ed44f2b"
+  resolved "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz"
   integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
   dependencies:
     fs.realpath "^1.0.0"
@@ -1440,14 +1239,14 @@ glob@^7.1.3:
 
 globals@^13.19.0:
   version "13.24.0"
-  resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz#8432a19d78ce0c1e833949c36adb345400bb1171"
+  resolved "https://registry.npmjs.org/globals/-/globals-13.24.0.tgz"
   integrity sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==
   dependencies:
     type-fest "^0.20.2"
 
 globby@^11.1.0:
   version "11.1.0"
-  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz#bd4be98bb042f83d796f7e3811991fbe82a0d34b"
+  resolved "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz"
   integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
   dependencies:
     array-union "^2.1.0"
@@ -1459,27 +1258,27 @@ globby@^11.1.0:
 
 graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0:
   version "4.2.11"
-  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  resolved "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.11.tgz"
   integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
 
 graphemer@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz#fb2f1d55e0e3a1849aeffc90c4fa0dd53a0e66c6"
+  resolved "https://registry.npmjs.org/graphemer/-/graphemer-1.4.0.tgz"
   integrity sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==
 
 has-flag@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
+  resolved "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
 he@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
+  resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
 html2canvas@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz#7cef1888311b5011d507794a066041b14669a543"
+  resolved "https://registry.npmjs.org/html2canvas/-/html2canvas-1.4.1.tgz"
   integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
   dependencies:
     css-line-break "^2.1.0"
@@ -1487,24 +1286,24 @@ html2canvas@^1.4.1:
 
 iconv-lite@^0.6.3:
   version "0.6.3"
-  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz#a52f80bf38da1952eb5c681790719871a1a72501"
+  resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz"
   integrity sha512-4fCk79wshMdzMp2rH06qWrJE4iolqLhCUH+OiuIgU++RB0+94NlDL81atO7GX55uUKueo0txHNtvEyI6D7WdMw==
   dependencies:
     safer-buffer ">= 2.1.2 < 3.0.0"
 
 ignore@^5.2.0, ignore@^5.2.4:
   version "5.3.1"
-  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz#5073e554cd42c5b33b394375f538b8593e34d4ef"
+  resolved "https://registry.npmjs.org/ignore/-/ignore-5.3.1.tgz"
   integrity sha512-5Fytz/IraMjqpwfd34ke28PTVMjZjJG2MPn5t7OE4eUCUNf8BAa7b5WUS9/Qvr6mwOQS7Mk6vdsMno5he+T8Xw==
 
 image-size@~0.5.0:
   version "0.5.5"
-  resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz#09dfd4ab9d20e29eb1c3e80b8990378df9e3cb9c"
+  resolved "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz"
   integrity sha512-6TDAlDPZxUFCv+fuOkIoXT/V/f3Qbq8e37p+YOiYrUv3v9cc3/6x78VdfPgFVaB9dZYeLUfKgHRebpkm/oP2VQ==
 
 import-fresh@^3.2.1:
   version "3.3.0"
-  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz#37162c25fcb9ebaa2e6e53d5b4d88ce17d9e0c2b"
+  resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
   dependencies:
     parent-module "^1.0.0"
@@ -1512,12 +1311,12 @@ import-fresh@^3.2.1:
 
 imurmurhash@^0.1.4:
   version "0.1.4"
-  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
+  resolved "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz"
   integrity sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==
 
 inflight@^1.0.4:
   version "1.0.6"
-  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz#49bd6331d7d02d0c09bc910a1075ba8165b56df9"
+  resolved "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz"
   integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
   dependencies:
     once "^1.3.0"
@@ -1525,73 +1324,73 @@ inflight@^1.0.4:
 
 inherits@2:
   version "2.0.4"
-  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
+  resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
 
 is-binary-path@~2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz#ea1f7f3b80f064236e83470f86c09c254fb45b09"
+  resolved "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz"
   integrity sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==
   dependencies:
     binary-extensions "^2.0.0"
 
 is-extglob@^2.1.1:
   version "2.1.1"
-  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
+  resolved "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz"
   integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   version "4.0.3"
-  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz#64f61e42cbbb2eec2071a9dac0b28ba1e65d5084"
+  resolved "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz"
   integrity sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==
   dependencies:
     is-extglob "^2.1.1"
 
 is-number@^7.0.0:
   version "7.0.0"
-  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b"
+  resolved "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz"
   integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==
 
 is-path-inside@^3.0.3:
   version "3.0.3"
-  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz#d231362e53a07ff2b0e0ea7fed049161ffd16283"
+  resolved "https://registry.npmjs.org/is-path-inside/-/is-path-inside-3.0.3.tgz"
   integrity sha512-Fd4gABb+ycGAmKou8eMftCupSir5lRxqf4aD/vd0cD2qc4HL07OjCeuHMr8Ro4CoMaeCKDB0/ECBOVWjTwUvPQ==
 
 is-what@^3.14.1:
   version "3.14.1"
-  resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz#e1222f46ddda85dead0fd1c9df131760e77755c1"
+  resolved "https://registry.npmjs.org/is-what/-/is-what-3.14.1.tgz"
   integrity sha512-sNxgpk9793nzSs7bA6JQJGeIuRBQhAaNGG77kzYQgMkrID+lS6SlK07K5LaptscDlSaIgH+GPFzf+d75FVxozA==
 
 isexe@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
+  resolved "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz"
   integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 js-yaml@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz#c1fb65f8f5017901cdd2c951864ba18458a10602"
+  resolved "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz"
   integrity sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==
   dependencies:
     argparse "^2.0.1"
 
 json-buffer@3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz#9338802a30d3b6605fbe0613e094008ca8c05a13"
+  resolved "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz"
   integrity sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==
 
 json-schema-traverse@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz#69f6a87d9513ab8bb8fe63bdb0979c448e684660"
+  resolved "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz"
   integrity sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==
 
 json-stable-stringify-without-jsonify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz#9db7b59496ad3f3cfef30a75142d2d930ad72651"
+  resolved "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz"
   integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
 
 jsonfile@^6.0.1:
   version "6.1.0"
-  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz#bc55b2634793c679ec6403094eb13698a6ec0aae"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
   integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
   dependencies:
     universalify "^2.0.0"
@@ -1600,12 +1399,12 @@ jsonfile@^6.0.1:
 
 keycode@^2.2.0:
   version "2.2.1"
-  resolved "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz#09c23b2be0611d26117ea2501c2c391a01f39eff"
+  resolved "https://registry.npmjs.org/keycode/-/keycode-2.2.1.tgz"
   integrity sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==
 
 keycon@^1.2.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/keycon/-/keycon-1.4.0.tgz#bf2a633f3c3b659ea564045938cff33e584cebd5"
+  resolved "https://registry.npmjs.org/keycon/-/keycon-1.4.0.tgz"
   integrity sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==
   dependencies:
     "@cfcs/core" "^0.0.6"
@@ -1615,14 +1414,14 @@ keycon@^1.2.0:
 
 keyv@^4.5.3:
   version "4.5.4"
-  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz#a879a99e29452f942439f2a405e3af8b31d4de93"
+  resolved "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz"
   integrity sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==
   dependencies:
     json-buffer "3.0.1"
 
-less@^4.1.1:
+less@*, less@^4.1.1:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/less/-/less-4.2.0.tgz#cbefbfaa14a4cd388e2099b2b51f956e1465c450"
+  resolved "https://registry.npmjs.org/less/-/less-4.2.0.tgz"
   integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
   dependencies:
     copy-anything "^2.0.1"
@@ -1639,7 +1438,7 @@ less@^4.1.1:
 
 levn@^0.4.1:
   version "0.4.1"
-  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz#ae4562c007473b932a6200d403268dd2fffc6ade"
+  resolved "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz"
   integrity sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==
   dependencies:
     prelude-ls "^1.2.1"
@@ -1647,48 +1446,48 @@ levn@^0.4.1:
 
 locate-path@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz#55321eb309febbc59c4801d931a72452a681d286"
+  resolved "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz"
   integrity sha512-iPZK6eYjbxRu3uB4/WZ3EsEIMJFMqAoopl3R+zuq0UjcAm/MO6KCweDgPfP3elTztoKP3KtnVHxTn2NHBSDVUw==
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.21:
+lodash-es@*, lodash-es@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  resolved "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
 
 lodash-unified@^1.0.2:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz#80b1eac10ed2eb02ed189f08614a29c27d07c894"
+  resolved "https://registry.npmjs.org/lodash-unified/-/lodash-unified-1.0.3.tgz"
   integrity sha512-WK9qSozxXOD7ZJQlpSqOT+om2ZfcT4yO+03FuzAHD0wF6S0l0090LRPDx3vhTTLZ8cFKpBn+IOcVXK6qOcIlfQ==
 
 lodash.merge@^4.6.2:
   version "4.6.2"
-  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a"
+  resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz"
   integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
 
-lodash@^4.17.21:
+lodash@*, lodash@^4.17.21:
   version "4.17.21"
-  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz#679591c564c3bffaae8454cf0b3df370c3d6911c"
+  resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
 
 lru-cache@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz#6d6fe6570ebd96aaf90fcad1dafa3b2566db3a94"
+  resolved "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz"
   integrity sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==
   dependencies:
     yallist "^4.0.0"
 
 magic-string@^0.30.1, magic-string@^0.30.6:
   version "0.30.8"
-  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz#14e8624246d2bedba70d5462aa99ac9681844613"
+  resolved "https://registry.npmjs.org/magic-string/-/magic-string-0.30.8.tgz"
   integrity sha512-ISQTe55T2ao7XtlAStud6qwYPZjE4GK1S/BeVPus4jrq6JuOnQ00YKQC581RWhR122W7msZV263KzVeLoqidyQ==
   dependencies:
     "@jridgewell/sourcemap-codec" "^1.4.15"
 
 make-dir@^2.1.0:
   version "2.1.0"
-  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz#5f0310e18b8be898cc07009295a30ae41e91e6f5"
+  resolved "https://registry.npmjs.org/make-dir/-/make-dir-2.1.0.tgz"
   integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
   dependencies:
     pify "^4.0.1"
@@ -1696,17 +1495,17 @@ make-dir@^2.1.0:
 
 memoize-one@^6.0.0:
   version "6.0.0"
-  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz#b2591b871ed82948aee4727dc6abceeeac8c1045"
+  resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-6.0.0.tgz"
   integrity sha512-rkpe71W0N0c0Xz6QD0eJETuWAJGnJ9afsl1srmwPrI+yBCkge5EycXXbYRyvL29zZVUWQCY7InPRCv3GDXuZNw==
 
 merge2@^1.3.0, merge2@^1.4.1:
   version "1.4.1"
-  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz#4368892f885e907455a6fd7dc55c0c9d404990ae"
+  resolved "https://registry.npmjs.org/merge2/-/merge2-1.4.1.tgz"
   integrity sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==
 
 micromatch@^4.0.4:
   version "4.0.5"
-  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
+  resolved "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
   dependencies:
     braces "^3.0.2"
@@ -1714,26 +1513,40 @@ micromatch@^4.0.4:
 
 mime@^1.4.1:
   version "1.6.0"
-  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz#32cd9e5c64553bd58d19a568af452acff04981b1"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
   integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
 
-minimatch@9.0.3, minimatch@^9.0.3:
-  version "9.0.3"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz#a6e00c3de44c3a542bfaae70abfc22420a6da825"
-  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
-  dependencies:
-    brace-expansion "^2.0.1"
-
-minimatch@^3.0.5, minimatch@^3.1.1, minimatch@^3.1.2:
+minimatch@^3.0.5:
   version "3.1.2"
-  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz#19cd194bfd3e428f049a70817c038d89ab4be35b"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
   integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^3.1.1:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^3.1.2:
+  version "3.1.2"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz"
+  integrity sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==
+  dependencies:
+    brace-expansion "^1.1.7"
+
+minimatch@^9.0.3, minimatch@9.0.3:
+  version "9.0.3"
+  resolved "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz"
+  integrity sha512-RHiac9mvaRw0x3AYRgDC1CxAP7HTcNrrECeA8YYJeWnpo+2Q5CegtZjaotWTWxDG3UeGA1coE05iH1mPjT/2mg==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 moveable-helper@^0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz#95dbbc20258d827223a715d9d694f5d2f1b14d65"
+  resolved "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz"
   integrity sha512-t1FK9PO187Gn0N6GVZcrQgePjiHmuj8eUhmJjH38LvTMnVVxiHzWYRx6ARFZvSFIIW4yb6BEAv4C99Bsx84nFw==
   dependencies:
     "@daybrush/utils" "^1.0.0"
@@ -1741,7 +1554,7 @@ moveable-helper@^0.4.0:
 
 moveable@^0.26.0:
   version "0.26.0"
-  resolved "https://registry.npmjs.org/moveable/-/moveable-0.26.0.tgz#7ae053290189bccd4740faf4829eb9f36f3a4023"
+  resolved "https://registry.npmjs.org/moveable/-/moveable-0.26.0.tgz"
   integrity sha512-pVwd6IQKn1QaL3KXcUluz+dReDidwQwQ45MoiusbOo/QCdab5+ToOpNyMPVHpN0biuiQzqoO3AKRx5Ob+wt7Hg==
   dependencies:
     "@scena/event-emitter" "^1.0.3"
@@ -1749,27 +1562,27 @@ moveable@^0.26.0:
 
 ms@2.1.2:
   version "2.1.2"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz#d09d1f357b443f493382a8eb3ccd183872ae6009"
+  resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
 muggle-string@^0.3.1:
   version "0.3.1"
-  resolved "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz#e524312eb1728c63dd0b2ac49e3282e6ed85963a"
+  resolved "https://registry.npmjs.org/muggle-string/-/muggle-string-0.3.1.tgz"
   integrity sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==
 
 nanoid@^3.1.23, nanoid@^3.3.7:
   version "3.3.7"
-  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz#d0c301a691bc8d54efa0a2226ccf3fe2fd656bd8"
+  resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz"
   integrity sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==
 
 natural-compare@^1.4.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
+  resolved "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz"
   integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
 
 needle@^3.1.0:
   version "3.3.1"
-  resolved "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz#63f75aec580c2e77e209f3f324e2cdf3d29bd049"
+  resolved "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz"
   integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
   dependencies:
     iconv-lite "^0.6.3"
@@ -1777,39 +1590,39 @@ needle@^3.1.0:
 
 node-releases@^2.0.14:
   version "2.0.14"
-  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz#2ffb053bceb8b2be8495ece1ab6ce600c4461b0b"
+  resolved "https://registry.npmjs.org/node-releases/-/node-releases-2.0.14.tgz"
   integrity sha512-y10wOWt8yZpqXmOgRo77WaHEmhYQYGNA6y421PKsKYWEK8aW+cqAphborZDhqfyKrbZEN92CN1X2KbafY2s7Yw==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz#0dcd69ff23a1c9b11fd0978316644a0388216a65"
+  resolved "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz"
   integrity sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==
 
 normalize-range@^0.1.2:
   version "0.1.2"
-  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz#2d10c06bdfd312ea9777695a4d28439456b75942"
+  resolved "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz"
   integrity sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==
 
 normalize-wheel-es@^1.2.0:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz#0fa2593d619f7245a541652619105ab076acf09e"
+  resolved "https://registry.npmjs.org/normalize-wheel-es/-/normalize-wheel-es-1.2.0.tgz"
   integrity sha512-Wj7+EJQ8mSuXr2iWfnujrimU35R2W4FAErEyTmJoJ7ucwTn2hOUSsRehMb5RSYkxXGTM7Y9QpvPmp++w5ftoJw==
 
 normalize.css@^8.0.1:
   version "8.0.1"
-  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  resolved "https://registry.npmjs.org/normalize.css/-/normalize.css-8.0.1.tgz"
   integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
 
 once@^1.3.0:
   version "1.4.0"
-  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz#583b1aa775961d4b113ac17d9c50baef9dd76bd1"
+  resolved "https://registry.npmjs.org/once/-/once-1.4.0.tgz"
   integrity sha512-lNaJgI+2Q5URQBkccEKHTQOPaXdUxnZZElQTZY0MFUAuaEqe1E+Nyvgdz/aIyNi6Z9MzO5dv1H8n58/GELp3+w==
   dependencies:
     wrappy "1"
 
 optionator@^0.9.3:
   version "0.9.3"
-  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz#007397d44ed1872fdc6ed31360190f81814e2c64"
+  resolved "https://registry.npmjs.org/optionator/-/optionator-0.9.3.tgz"
   integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
   dependencies:
     "@aashutoshrathi/word-wrap" "^1.2.3"
@@ -1821,90 +1634,98 @@ optionator@^0.9.3:
 
 order-map@^0.3.1:
   version "0.3.1"
-  resolved "https://registry.npmjs.org/order-map/-/order-map-0.3.1.tgz#0d519e2ad79c1606eb037d59fb191ab9bd5ce37b"
+  resolved "https://registry.npmjs.org/order-map/-/order-map-0.3.1.tgz"
   integrity sha512-RSuElIGwzPuBLzS9Io7G8fpcnQeudg0XswOyOiwRNLX7lkf+eQ/KUp+kcAP7z7nTOdkrfxhZycyXwzFW75iJ6A==
 
 overlap-area@^1.0.0, overlap-area@^1.1.0:
   version "1.1.0"
-  resolved "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz#1fcaa21bdb9cb1ace973d9aa299ae6b56557a4c2"
+  resolved "https://registry.npmjs.org/overlap-area/-/overlap-area-1.1.0.tgz"
   integrity sha512-3dlJgJCaVeXH0/eZjYVJvQiLVVrPO4U1ZGqlATtx6QGO3b5eNM6+JgUKa7oStBTdYuGTk7gVoABCW6Tp+dhRdw==
   dependencies:
     "@daybrush/utils" "^1.7.1"
 
 p-limit@^3.0.2:
   version "3.1.0"
-  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz#e1daccbe78d0d1388ca18c64fea38e3e57e3706b"
+  resolved "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz"
   integrity sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ==
   dependencies:
     yocto-queue "^0.1.0"
 
 p-locate@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz#83c8315c6785005e3bd021839411c9e110e6d834"
+  resolved "https://registry.npmjs.org/p-locate/-/p-locate-5.0.0.tgz"
   integrity sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw==
   dependencies:
     p-limit "^3.0.2"
 
 parent-module@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz#691d2709e78c79fae3a156622452d00762caaaa2"
+  resolved "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz"
   integrity sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==
   dependencies:
     callsites "^3.0.0"
 
 parse-node-version@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz#e2b5dbede00e7fa9bc363607f53327e8b073189b"
+  resolved "https://registry.npmjs.org/parse-node-version/-/parse-node-version-1.0.1.tgz"
   integrity sha512-3YHlOa/JgH6Mnpr05jP9eDG254US9ek25LyIxZlDItp2iJtwyaXQb57lBYLdT3MowkUFYEV2XXNAYIPlESvJlA==
 
 path-browserify@^1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-1.0.1.tgz"
   integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
 
 path-exists@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  resolved "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz"
   integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
 
 path-is-absolute@^1.0.0:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
+  resolved "https://registry.npmjs.org/path-is-absolute/-/path-is-absolute-1.0.1.tgz"
   integrity sha512-AVbw3UJ2e9bq64vSaS9Am0fje1Pa8pbGqTTsmXfaIiMpnr5DlDhfJOuLj9Sf95ZPVDAUerDfEk88MPmPe7UCQg==
 
 path-key@^3.1.0:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz#581f6ade658cbba65a0d3380de7753295054f375"
+  resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
 path-type@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz#84ed01c0a7ba380afe09d90a8c180dcd9d03043b"
+  resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
 picocolors@^1.0.0:
   version "1.0.0"
-  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
+  resolved "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.3.1:
   version "2.3.1"
-  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"
+  resolved "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz"
   integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
 
 pify@^4.0.1:
   version "4.0.1"
-  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz#4b2cd25c50d598735c50292224fd8c6df41e3231"
+  resolved "https://registry.npmjs.org/pify/-/pify-4.0.1.tgz"
   integrity sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==
 
+pinia@^2.1.7:
+  version "2.1.7"
+  resolved "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz"
+  integrity sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==
+  dependencies:
+    "@vue/devtools-api" "^6.5.0"
+    vue-demi ">=0.14.5"
+
 postcss-value-parser@^4.2.0:
   version "4.2.0"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz"
   integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
 
-postcss@^8.4.33, postcss@^8.4.35:
+postcss@^8.1.0, postcss@^8.4.33, postcss@^8.4.35:
   version "8.4.35"
-  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz#60997775689ce09011edf083a549cea44aabe2f7"
+  resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz"
   integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
   dependencies:
     nanoid "^3.3.7"
@@ -1913,39 +1734,39 @@ postcss@^8.4.33, postcss@^8.4.35:
 
 prelude-ls@^1.2.1:
   version "1.2.1"
-  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
+  resolved "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz"
   integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==
 
 prr@~1.0.1:
   version "1.0.1"
-  resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz#d3fc114ba06995a45ec6893f484ceb1d78f5f476"
+  resolved "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz"
   integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
 
 punycode@^2.1.0:
   version "2.3.1"
-  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz#027422e2faec0b25e1549c3e1bd8309b9133b6e5"
+  resolved "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz"
   integrity sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==
 
 qr-code-styling@^1.6.0-rc.1:
   version "1.6.0-rc.1"
-  resolved "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz#6c89e185fa50cc9135101085c12ae95b06f1b290"
+  resolved "https://registry.npmjs.org/qr-code-styling/-/qr-code-styling-1.6.0-rc.1.tgz"
   integrity sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==
   dependencies:
     qrcode-generator "^1.4.3"
 
 qrcode-generator@^1.4.3:
   version "1.4.4"
-  resolved "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz#63f771224854759329a99048806a53ed278740e7"
+  resolved "https://registry.npmjs.org/qrcode-generator/-/qrcode-generator-1.4.4.tgz"
   integrity sha512-HM7yY8O2ilqhmULxGMpcHSF1EhJJ9yBj8gvDEuZ6M+KGJ0YY2hKpnXvRD+hZPLrDVck3ExIGhmPtSdcjC+guuw==
 
 queue-microtask@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz#4929228bbc724dfac43e0efb058caf7b6cfb6243"
+  resolved "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz"
   integrity sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==
 
 react-compat-css-styled@^1.0.5, react-compat-css-styled@^1.0.6:
   version "1.0.9"
-  resolved "https://registry.npmjs.org/react-compat-css-styled/-/react-compat-css-styled-1.0.9.tgz#70ed3ed8d8000fe01cb5ce15ee7723a094165db1"
+  resolved "https://registry.npmjs.org/react-compat-css-styled/-/react-compat-css-styled-1.0.9.tgz"
   integrity sha512-YpUgTpXU1wR58aPQJVGAWq6QeEFWkafV0qq4Y8KRUwpQJLbJF2GYu5ZQ/kafHGvN3dqQX2e340NlNZ+zbZZv2w==
   dependencies:
     "@daybrush/utils" "^1.0.0"
@@ -1955,7 +1776,7 @@ react-compat-css-styled@^1.0.5, react-compat-css-styled@^1.0.6:
 
 react-compat-guides@~0.15.1:
   version "0.15.1"
-  resolved "https://registry.npmjs.org/react-compat-guides/-/react-compat-guides-0.15.1.tgz#c9c1cee50add0c8e89e324128e754998a20d45f6"
+  resolved "https://registry.npmjs.org/react-compat-guides/-/react-compat-guides-0.15.1.tgz"
   integrity sha512-LkY38uGOuswRPvndwSco8znF+cOJJcXpighekRIdF+KTJ9h/2edI2RzBb0v5EvaG8gCXxGDdKMISTrDdzKnSFQ==
   dependencies:
     "@scena/react-guides" "~0.17.1"
@@ -1964,7 +1785,7 @@ react-compat-guides@~0.15.1:
 
 react-compat-moveable@~0.14.0:
   version "0.14.0"
-  resolved "https://registry.npmjs.org/react-compat-moveable/-/react-compat-moveable-0.14.0.tgz#cfb1ef54a712209bc4dcb677f0115df9be996a4b"
+  resolved "https://registry.npmjs.org/react-compat-moveable/-/react-compat-moveable-0.14.0.tgz"
   integrity sha512-z6julXupdwY1zytfDbXutdfY1wGmP+okoeC8PSb+Yd1Ju3bCTML6MQ6t6uivhqHVCQB+A6m1Ft76LlZmV8opvg==
   dependencies:
     "@daybrush/utils" "^1.6.0"
@@ -1975,14 +1796,14 @@ react-compat-moveable@~0.14.0:
 
 react-compat-ruler@~0.8.1:
   version "0.8.1"
-  resolved "https://registry.npmjs.org/react-compat-ruler/-/react-compat-ruler-0.8.1.tgz#80fe34e04976868240224106dab2ef0ba5d47262"
+  resolved "https://registry.npmjs.org/react-compat-ruler/-/react-compat-ruler-0.8.1.tgz"
   integrity sha512-btq323xPXX2UxrDWzTJFtYmssnammF+ojuUa5lgbMtXf2ZGuXqlwAWCh9yFr6hsz9l646Pg36o67Gy+3XaPaBg==
   dependencies:
     "@scena/react-ruler" "~0.9.1"
 
 react-css-styled@^1.0.1, react-css-styled@^1.0.2:
   version "1.1.9"
-  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz#a7cc948e49f72b2f7fb1393bd85416a8293afab3"
+  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.1.9.tgz"
   integrity sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==
   dependencies:
     css-styled "~1.0.8"
@@ -1990,7 +1811,7 @@ react-css-styled@^1.0.1, react-css-styled@^1.0.2:
 
 react-css-styled@~1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.0.4.tgz#236ce398232dc152084bbf20540df1c971534174"
+  resolved "https://registry.npmjs.org/react-css-styled/-/react-css-styled-1.0.4.tgz"
   integrity sha512-nRske1bAKOCaf7Gf3o76tKQFIYggaW1qH4rutBlitH5lYnRPA7WoAYKrcxqdUPZd00oASg3SvFZSh3Mc1Wvj3w==
   dependencies:
     css-styled "~1.0.1"
@@ -1998,7 +1819,7 @@ react-css-styled@~1.0.4:
 
 react-moveable@~0.29.0:
   version "0.29.0"
-  resolved "https://registry.npmjs.org/react-moveable/-/react-moveable-0.29.0.tgz#851ceae979a46dc103a2420672c1e443e513c8ec"
+  resolved "https://registry.npmjs.org/react-moveable/-/react-moveable-0.29.0.tgz"
   integrity sha512-dZ8jXc8WZQ3nsKsTh7h2h6cm8t0G2qc0Ie0a5DYgXX0N0kSrj0Q9psRTt6fZ5bRdIfonezM5r0Z4paTbbpRypA==
   dependencies:
     "@daybrush/utils" "^1.6.0"
@@ -2014,7 +1835,7 @@ react-moveable@~0.29.0:
 
 react-simple-compat@^1.2.1, react-simple-compat@^1.2.2:
   version "1.2.3"
-  resolved "https://registry.npmjs.org/react-simple-compat/-/react-simple-compat-1.2.3.tgz#26c330d84cb20b2036ff443303ca5250a1e5c674"
+  resolved "https://registry.npmjs.org/react-simple-compat/-/react-simple-compat-1.2.3.tgz"
   integrity sha512-vYepRjSriGRyEmFtSsTQoHWVQRbBMYR4ONATeZtuf8GDY8jWGkc6R4+lIb5rVhPBIkx3ru68bpl+9r8V4YA/nA==
   dependencies:
     "@daybrush/utils" "^1.0.0"
@@ -2022,31 +1843,31 @@ react-simple-compat@^1.2.1, react-simple-compat@^1.2.2:
 
 readdirp@~3.6.0:
   version "3.6.0"
-  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7"
+  resolved "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz"
   integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==
   dependencies:
     picomatch "^2.2.1"
 
 resolve-from@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz#4abcd852ad32dd7baabfe9b40e00a36db5f392e6"
+  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
   integrity sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==
 
 reusify@^1.0.4:
   version "1.0.4"
-  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz#90da382b1e126efc02146e90845a88db12925d76"
+  resolved "https://registry.npmjs.org/reusify/-/reusify-1.0.4.tgz"
   integrity sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==
 
 rimraf@^3.0.2:
   version "3.0.2"
-  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
+  resolved "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz"
   integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
   dependencies:
     glob "^7.1.3"
 
-rollup@^4.2.0:
+rollup@^1.20.0||^2.0.0||^3.0.0||^4.0.0, rollup@^4.2.0:
   version "4.12.1"
-  resolved "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz#0659cb02551cde4c5b210e9bd3af050b5b5b415d"
+  resolved "https://registry.npmjs.org/rollup/-/rollup-4.12.1.tgz"
   integrity sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==
   dependencies:
     "@types/estree" "1.0.5"
@@ -2068,24 +1889,24 @@ rollup@^4.2.0:
 
 run-parallel@^1.1.9:
   version "1.2.0"
-  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz#66d1368da7bdf921eb9d95bd1a9229e7f21a43ee"
+  resolved "https://registry.npmjs.org/run-parallel/-/run-parallel-1.2.0.tgz"
   integrity sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==
   dependencies:
     queue-microtask "^1.2.2"
 
 "safer-buffer@>= 2.1.2 < 3.0.0":
   version "2.1.2"
-  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
+  resolved "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
 sax@^1.2.4:
   version "1.3.0"
-  resolved "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz#a5dbe77db3be05c9d1ee7785dbd3ea9de51593d0"
+  resolved "https://registry.npmjs.org/sax/-/sax-1.3.0.tgz"
   integrity sha512-0s+oAmw9zLl1V1cS9BtZN7JAd0cW5e0QH4W3LWEK6a4LaLEA2OTpGYWDY+6XasBLtz6wkm3u1xRw95mRuJ59WA==
 
 scenejs@^1.4.2:
   version "1.10.3"
-  resolved "https://registry.npmjs.org/scenejs/-/scenejs-1.10.3.tgz#8ace9dab59ecb5db0a8eb2c07268cb30876ad60f"
+  resolved "https://registry.npmjs.org/scenejs/-/scenejs-1.10.3.tgz"
   integrity sha512-o1Xrz5sRMeVOD5R9MizY2tYVPYeRnQNttiNRD7vtfi4j4+su1nuP2R/1yv3jDNol1zFfFHwwh2G0jxyt0SIqUA==
   dependencies:
     "@cfcs/core" "^0.1.0"
@@ -2096,7 +1917,7 @@ scenejs@^1.4.2:
 
 selecto@^1.13.0:
   version "1.26.3"
-  resolved "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz#12f259112b943d395731524e3bb0115da7372212"
+  resolved "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz"
   integrity sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==
   dependencies:
     "@daybrush/utils" "^1.13.0"
@@ -2112,51 +1933,51 @@ selecto@^1.13.0:
 
 semver@^5.6.0:
   version "5.7.2"
-  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz#48d55db737c3287cd4835e17fa13feace1c41ef8"
+  resolved "https://registry.npmjs.org/semver/-/semver-5.7.2.tgz"
   integrity sha512-cBznnQ9KjJqU67B52RMC65CMarK2600WFnbkcaiwWq3xy/5haFJlshgnpjovMVJ+Hff49d8GEn0b87C5pDQ10g==
 
 semver@^6.3.0:
   version "6.3.1"
-  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz#556d2ef8689146e46dcea4bfdd095f3434dffcb4"
+  resolved "https://registry.npmjs.org/semver/-/semver-6.3.1.tgz"
   integrity sha512-BR7VvDCVHO+q2xBEWskxS6DJE1qRnb7DxzUrogb71CWoSficBxYsiAGd+Kl0mmq/MprG9yArRkyrQxTO6XjMzA==
 
 semver@^7.5.4:
   version "7.6.0"
-  resolved "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz#1a46a4db4bffcccd97b743b5005c8325f23d4e2d"
+  resolved "https://registry.npmjs.org/semver/-/semver-7.6.0.tgz"
   integrity sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==
   dependencies:
     lru-cache "^6.0.0"
 
 shebang-command@^2.0.0:
   version "2.0.0"
-  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"
+  resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
   integrity sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==
   dependencies:
     shebang-regex "^3.0.0"
 
 shebang-regex@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
+  resolved "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
 slash@^3.0.0:
   version "3.0.0"
-  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz#6539be870c165adbd5240220dbe361f1bc4d4634"
+  resolved "https://registry.npmjs.org/slash/-/slash-3.0.0.tgz"
   integrity sha512-g9Q1haeby36OSStwb4ntCGGGaKsaVSjQ68fBxoQcutl5fS1vuY18H3wSt3jFyFtrkx+Kz0V1G85A4MyAdDMi2Q==
 
 sortablejs@1.14.0:
   version "1.14.0"
-  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz#6d2e17ccbdb25f464734df621d4f35d4ab35b3d8"
+  resolved "https://registry.npmjs.org/sortablejs/-/sortablejs-1.14.0.tgz"
   integrity sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==
 
 source-map-js@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  resolved "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz"
   integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
 
 source-map-support@~0.5.20:
   version "0.5.21"
-  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz#04fe7c7f9e1ed2d662233c28cb2b35b9f63f6e4f"
+  resolved "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz"
   integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
   dependencies:
     buffer-from "^1.0.0"
@@ -2164,31 +1985,31 @@ source-map-support@~0.5.20:
 
 source-map@^0.6.0, source-map@~0.6.0:
   version "0.6.1"
-  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
+  resolved "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
 strip-ansi@^6.0.1:
   version "6.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
+  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
   dependencies:
     ansi-regex "^5.0.1"
 
 strip-json-comments@^3.1.1:
   version "3.1.1"
-  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"
+  resolved "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz"
   integrity sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==
 
 supports-color@^7.1.0:
   version "7.2.0"
-  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz#1b7dcdcb32b8138801b3e478ba6a51caa89648da"
+  resolved "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz"
   integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
   dependencies:
     has-flag "^4.0.0"
 
-terser@^5.28.1:
+terser@^5.28.1, terser@^5.4.0:
   version "5.29.1"
-  resolved "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz#44e58045b70c09792ba14bfb7b4e14ca8755b9fa"
+  resolved "https://registry.npmjs.org/terser/-/terser-5.29.1.tgz"
   integrity sha512-lZQ/fyaIGxsbGxApKmoPTODIzELy3++mXhS5hOqaAWZjQtpq/hFHAc+rm29NND1rYRxRWKcjuARNwULNXa5RtQ==
   dependencies:
     "@jridgewell/source-map" "^0.3.3"
@@ -2198,73 +2019,73 @@ terser@^5.28.1:
 
 text-segmentation@^1.0.3:
   version "1.0.3"
-  resolved "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz#52a388159efffe746b24a63ba311b6ac9f2d7943"
+  resolved "https://registry.npmjs.org/text-segmentation/-/text-segmentation-1.0.3.tgz"
   integrity sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==
   dependencies:
     utrie "^1.0.2"
 
 text-table@^0.2.0:
   version "0.2.0"
-  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
+  resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==
 
 throttle-debounce@^3.0.1:
   version "3.0.1"
-  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz#32f94d84dfa894f786c9a1f290e7a645b6a19abb"
+  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-3.0.1.tgz"
   integrity sha512-dTEWWNu6JmeVXY0ZYoPuH5cRIwc0MeGbJwah9KUNYSJwommQpCzTySTpEe8Gs1J23aeWEuAobe4Ag7EHVt/LOg==
 
 throttle-debounce@^5.0.0:
   version "5.0.0"
-  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz#a17a4039e82a2ed38a5e7268e4132d6960d41933"
+  resolved "https://registry.npmjs.org/throttle-debounce/-/throttle-debounce-5.0.0.tgz"
   integrity sha512-2iQTSgkkc1Zyk0MeVrt/3BvuOXYPl/R8Z0U2xxo9rjwNciaHDG3R+Lm6dh4EeUci49DanvBnuqI6jshoQQRGEg==
 
 to-regex-range@^5.0.1:
   version "5.0.1"
-  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz#1648c44aae7c8d988a326018ed72f5b4dd0392e4"
+  resolved "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz"
   integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
   dependencies:
     is-number "^7.0.0"
 
 ts-api-utils@^1.0.1:
-  version "1.2.1"
-  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.2.1.tgz#f716c7e027494629485b21c0df6180f4d08f5e8b"
-  integrity sha512-RIYA36cJn2WiH9Hy77hdF9r7oEwxAtB/TS9/S4Qd90Ap4z5FSiin5zEiTL44OII1Y3IIlEvxwxFUVgrHSZ/UpA==
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-1.3.0.tgz"
+  integrity sha512-UQMIo7pb8WRomKR1/+MFVLTroIvDVtMX3K6OUir8ynLyzB8Jeriont2bTAtmNPa1ekAgN7YPDyf6V+ygrdU+eQ==
 
 tslib@^2.3.0:
   version "2.6.2"
-  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz#703ac29425e7b37cd6fd456e92404d46d1f3e4ae"
+  resolved "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz"
   integrity sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==
 
 type-check@^0.4.0, type-check@~0.4.0:
   version "0.4.0"
-  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz#07b8203bfa7056c0657050e3ccd2c37730bab8f1"
+  resolved "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz"
   integrity sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==
   dependencies:
     prelude-ls "^1.2.1"
 
 type-fest@^0.20.2:
   version "0.20.2"
-  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz#1bf207f4b28f91583666cb5fbd327887301cd5f4"
+  resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz"
   integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
 
-typescript@^5.2.2:
+typescript@*, typescript@^5.2.2, typescript@>=4.2.0, typescript@>=4.4.4:
   version "5.4.2"
-  resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz#0ae9cebcfae970718474fe0da2c090cad6577372"
+  resolved "https://registry.npmjs.org/typescript/-/typescript-5.4.2.tgz"
   integrity sha512-+2/g0Fds1ERlP6JsakQQDXjZdZMM+rqpamFZJEKh4kwTIn3iDkgKtby0CeNd5ATNZ4Ry1ax15TMx0W2V+miizQ==
 
 undici-types@~5.26.4:
   version "5.26.5"
-  resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz#bcd539893d00b56e964fd2657a4866b221a65617"
+  resolved "https://registry.npmjs.org/undici-types/-/undici-types-5.26.5.tgz"
   integrity sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==
 
 universalify@^2.0.0:
   version "2.0.1"
-  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz#168efc2180964e6386d061e094df61afe239b18d"
+  resolved "https://registry.npmjs.org/universalify/-/universalify-2.0.1.tgz"
   integrity sha512-gptHNQghINnc/vTGIk0SOFGFNXw7JVrlRUtConJRlvaw6DuX0wO5Jeko9sWrMBhh+PsYAZ7oXAiOnf/UKogyiw==
 
 unplugin-element-plus@^0.7.1:
   version "0.7.2"
-  resolved "https://registry.npmjs.org/unplugin-element-plus/-/unplugin-element-plus-0.7.2.tgz#93408f4c064a102d31d49097144641b3fcc9726c"
+  resolved "https://registry.npmjs.org/unplugin-element-plus/-/unplugin-element-plus-0.7.2.tgz"
   integrity sha512-A73dCu0fIMRodx1OoAZ4JruyAoenzTVFWMdukq3q7xR+vtcAy3B9uO1g3+WJMA1A9hWxo7iO5tVRGaD2lFNlWA==
   dependencies:
     "@rollup/pluginutils" "^5.0.2"
@@ -2273,9 +2094,9 @@ unplugin-element-plus@^0.7.1:
     unplugin "^1.3.2"
 
 unplugin@^1.3.2:
-  version "1.8.3"
-  resolved "https://registry.npmjs.org/unplugin/-/unplugin-1.8.3.tgz#49788aea83c61fdea69aca9923b99a4b41927de3"
-  integrity sha512-ZlLteXGDcyJgsbN2g4sZ3Dw6fpX1O5rjgeaA5MmQhhA2YxnTxsh43f8nDQgFOzcir0iv8GYMjtCV8MtyNnrhEg==
+  version "1.9.0"
+  resolved "https://registry.npmjs.org/unplugin/-/unplugin-1.9.0.tgz"
+  integrity sha512-14PslvMY3gNbXnQtNIRB566Q057L5Fe7f5LDEamxVi0QQVxoz5hrveBwwZLcKyHtZ09ysmipxRRj5Lv+BGz2Iw==
   dependencies:
     acorn "^8.11.3"
     chokidar "^3.6.0"
@@ -2284,7 +2105,7 @@ unplugin@^1.3.2:
 
 update-browserslist-db@^1.0.13:
   version "1.0.13"
-  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz#3c5e4f5c083661bd38ef64b6328c26ed6c8248c4"
+  resolved "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.13.tgz"
   integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
   dependencies:
     escalade "^3.1.1"
@@ -2292,30 +2113,30 @@ update-browserslist-db@^1.0.13:
 
 uri-js@^4.2.2:
   version "4.4.1"
-  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  resolved "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz"
   integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
 utrie@^1.0.2:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz#d42fe44de9bc0119c25de7f564a6ed1b2c87a645"
+  resolved "https://registry.npmjs.org/utrie/-/utrie-1.0.2.tgz"
   integrity sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==
   dependencies:
     base64-arraybuffer "^1.0.2"
 
 vite-plugin-compression@^0.5.1:
   version "0.5.1"
-  resolved "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz#a75b0d8f48357ebb377b65016da9f20885ef39b6"
+  resolved "https://registry.npmjs.org/vite-plugin-compression/-/vite-plugin-compression-0.5.1.tgz"
   integrity sha512-5QJKBDc+gNYVqL/skgFAP81Yuzo9R+EAf19d+EtsMF/i8kFUpNi3J/H01QD3Oo8zBQn+NzoCIFkpPLynoOzaJg==
   dependencies:
     chalk "^4.1.2"
     debug "^4.3.3"
     fs-extra "^10.0.0"
 
-vite@^5.1.4:
+vite@^5.0.0, vite@^5.1.4, vite@>=2.0.0:
   version "5.1.5"
-  resolved "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz#bdbc2b15e8000d9cc5172f059201178f9c9de5fb"
+  resolved "https://registry.npmjs.org/vite/-/vite-5.1.5.tgz"
   integrity sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==
   dependencies:
     esbuild "^0.19.3"
@@ -2326,12 +2147,17 @@ vite@^5.1.4:
 
 vue-demi@*:
   version "0.14.7"
-  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz#8317536b3ef74c5b09f268f7782e70194567d8f2"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
+  integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
+
+vue-demi@>=0.14.5:
+  version "0.14.7"
+  resolved "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz"
   integrity sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==
 
 vue-eslint-parser@^7.10.0:
   version "7.11.0"
-  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz#214b5dea961007fcffb2ee65b8912307628d0daf"
+  resolved "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-7.11.0.tgz"
   integrity sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==
   dependencies:
     debug "^4.1.1"
@@ -2344,14 +2170,14 @@ vue-eslint-parser@^7.10.0:
 
 vue-router@^4.0.0-0:
   version "4.3.0"
-  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz#d5913f27bf68a0a178ee798c3c88be471811a235"
+  resolved "https://registry.npmjs.org/vue-router/-/vue-router-4.3.0.tgz"
   integrity sha512-dqUcs8tUeG+ssgWhcPbjHvazML16Oga5w34uCUmsk7i0BcnskoLGwjpa15fqMr2Fa5JgVBrdL2MEgqz6XZ/6IQ==
   dependencies:
     "@vue/devtools-api" "^6.5.1"
 
 vue-template-compiler@^2.7.14:
   version "2.7.16"
-  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz#c81b2d47753264c77ac03b9966a46637482bb03b"
+  resolved "https://registry.npmjs.org/vue-template-compiler/-/vue-template-compiler-2.7.16.tgz"
   integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
   dependencies:
     de-indent "^1.0.2"
@@ -2359,16 +2185,16 @@ vue-template-compiler@^2.7.14:
 
 vue-tsc@^1.8.27:
   version "1.8.27"
-  resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz#feb2bb1eef9be28017bb9e95e2bbd1ebdd48481c"
+  resolved "https://registry.npmjs.org/vue-tsc/-/vue-tsc-1.8.27.tgz"
   integrity sha512-WesKCAZCRAbmmhuGl3+VrdWItEvfoFIPXOvUJkjULi+x+6G/Dy69yO3TBRJDr9eUlmsNAwVmxsNZxvHKzbkKdg==
   dependencies:
     "@volar/typescript" "~1.11.1"
     "@vue/language-core" "1.8.27"
     semver "^7.5.4"
 
-vue@3.4.19:
+"vue@^2.6.14 || ^3.3.0", "vue@^3.0.0-0 || ^2.6.0", vue@^3.0.1, vue@^3.2.0, vue@^3.2.25, vue@3.4.19:
   version "3.4.19"
-  resolved "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz#f9ae0a44db86628548736ff04152830726a97263"
+  resolved "https://registry.npmjs.org/vue/-/vue-3.4.19.tgz"
   integrity sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==
   dependencies:
     "@vue/compiler-dom" "3.4.19"
@@ -2379,46 +2205,46 @@ vue@3.4.19:
 
 vuedraggable@^4.1.0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz#edece68adb8a4d9e06accff9dfc9040e66852270"
+  resolved "https://registry.npmjs.org/vuedraggable/-/vuedraggable-4.1.0.tgz"
   integrity sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==
   dependencies:
     sortablejs "1.14.0"
 
 vuex@^4.0.0-0:
   version "4.1.0"
-  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz#aa1b3ea5c7385812b074c86faeeec2217872e36c"
+  resolved "https://registry.npmjs.org/vuex/-/vuex-4.1.0.tgz"
   integrity sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==
   dependencies:
     "@vue/devtools-api" "^6.0.0-beta.11"
 
 webpack-sources@^3.2.3:
   version "3.2.3"
-  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
+  resolved "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack-virtual-modules@^0.6.1:
   version "0.6.1"
-  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz#ac6fdb9c5adb8caecd82ec241c9631b7a3681b6f"
+  resolved "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.6.1.tgz"
   integrity sha512-poXpCylU7ExuvZK8z+On3kX+S8o/2dQ/SVYueKA0D4WEMXROXgY8Ez50/bQEUmvoSMMrWcrJqCHuhAbsiwg7Dg==
 
 which@^2.0.1:
   version "2.0.2"
-  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz#7c6a8dd0a636a0327e10b59c9286eee93f3f51b1"
+  resolved "https://registry.npmjs.org/which/-/which-2.0.2.tgz"
   integrity sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==
   dependencies:
     isexe "^2.0.0"
 
 wrappy@1:
   version "1.0.2"
-  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
+  resolved "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz"
   integrity sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==
 
 yallist@^4.0.0:
   version "4.0.0"
-  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz#9bb92790d9c0effec63be73519e11a35019a3a72"
+  resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
 yocto-queue@^0.1.0:
   version "0.1.0"
-  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
+  resolved "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==

From 75358f1c41744fbd3b288cd069ff102a2cb8e3d6 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sun, 17 Mar 2024 16:53:16 +0000
Subject: [PATCH 02/23] rebuilt: base store to pinia

---
 .../modules/panel/wrap/TempListWrap.vue       |  10 +-
 src/store/index.ts                            |   4 +-
 src/store/modules/base/actions.ts             |  29 ++---
 src/store/modules/base/index.ts               | 114 ++++++++++++------
 src/store/modules/base/mutations.ts           |  64 +++++-----
 src/store/modules/base/user.ts                |  58 +++++++++
 src/utils/axios.ts                            |  10 +-
 src/views/components/HeaderOptions.vue        |   5 +-
 8 files changed, 201 insertions(+), 93 deletions(-)
 create mode 100644 src/store/modules/base/user.ts

diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index df968da..320455e 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -32,6 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
+import useUserStore from '@/store/modules/base/user'
 
 type TState = {
   loading: boolean
@@ -52,6 +53,7 @@ const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const userStore = useUserStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -64,8 +66,9 @@ const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHis
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
 const { cate, edit } = route.query
-cate && (pageOptions.cate = (cate as LocationQueryValue) || 1)
-edit && store.commit('managerEdit', true)
+cate && (pageOptions.cate = (cate as LocationQueryValue) ?? 1)
+// edit && store.commit('managerEdit', true)
+edit && userStore.managerEdit(true)
 
 // onMounted(async () => {})
 
@@ -116,7 +119,8 @@ async function selectItem(item: IGetTempListData) {
       return false
     }
   }
-  store.commit('managerEdit', false)
+  // store.commit('managerEdit', false)
+  userStore.managerEdit(false)
   store.commit('setDWidgets', [])
 
   setTempId(item.id)
diff --git a/src/store/index.ts b/src/store/index.ts
index ffbaae9..e43f486 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,10 +1,10 @@
 import { createStore } from 'vuex'
 
-import base from './modules/base'
+// import base from './modules/base'
 import design from './modules/design'
 
 export default createStore({
-  ...base,
+  // ...base,
   modules: {
     design,
   },
diff --git a/src/store/modules/base/actions.ts b/src/store/modules/base/actions.ts
index 656560b..76abb52 100644
--- a/src/store/modules/base/actions.ts
+++ b/src/store/modules/base/actions.ts
@@ -2,18 +2,19 @@
  * 异步操作 store.dispatch() 调用
  */
 
-interface Iprops {
-  commit: (a: any, b: any) => void
-  state: any
-}
+// interface Iprops {
+//   commit: (a: any, b: any) => void
+//   state: any
+// }
 
-export default {
-  hideLoading(props: Iprops, data: Type.Object) {
-    setTimeout(() => {
-      props.commit('loading', false)
-    }, 600)
-  },
-  setFonts(store: Iprops, list: Type.Object) {
-    store.state.fonts = list
-  },
-}
+// export default {
+//   hideLoading(props: Iprops, data: Type.Object) {
+//     setTimeout(() => {
+//       props.commit('loading', false)
+//     }, 600)
+//   },
+//   setFonts(store: Iprops, list: Type.Object) {
+//     store.state.fonts = list
+//   },
+  
+// }
diff --git a/src/store/modules/base/index.ts b/src/store/modules/base/index.ts
index 4a1e8c7..f8e8e95 100644
--- a/src/store/modules/base/index.ts
+++ b/src/store/modules/base/index.ts
@@ -2,48 +2,86 @@
  * @Author: ShawnPhang
  * @Date: 2021-12-16 16:20:16
  * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-28 17:42:25
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-17 15:00:00
  */
-import mutations from './mutations'
-import actions from './actions'
-import _config from '@/config'
 
-const all = {
-  state: {
+import { defineStore } from 'pinia'
+
+// import actions from './actions'
+// import _config from '@/config'
+
+type TStoreBaseState = {
+  loading: boolean | null
+  scroll: boolean
+  /** fonts */
+  fonts: string[]
+  /** 抠图服务 */
+  app: string | null
+}
+
+type TUserAction = {
+  hideLoading: () => void
+  setFonts: (list: string[]) => void
+}
+
+const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
+  state: () => ({
     loading: null,
-    online: true, // 登录状态，
-    user: {
-      name: localStorage.getItem('username'),
-    }, // 储存用户信息
     scroll: true,
-    manager: '', // 是否为管理员模式
-    tempEditing: false, // 管理员是否正在编辑模板
     fonts: [], // 缓存字体列表
     app: null, // 抠图服务
-  },
-  getters: {
-    online: (state: Type.Object) => {
-      return state.online
-    },
-    user: (state: Type.Object) => {
-      return state.user
-    },
-    manager: (state: Type.Object) => {
-      return state.manager
-    },
-    tempEditing: (state: Type.Object) => {
-      return state.tempEditing
-    },
-    fonts: (state: Type.Object) => {
-      return state.fonts
-    },
-  },
-  mutations: {
-    ...mutations,
-  },
+  }),
   actions: {
-    ...actions,
-  },
-}
-export default all
+    /** 隐藏loading */
+    hideLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 600)
+    },
+    setFonts(list: string[]) {
+      this.fonts = list
+    },
+  }
+})
+
+export default useBaseStore
+
+// const all = {
+//   state: {
+//     loading: null,
+//     online: true, // 登录状态，
+//     user: {
+//       name: localStorage.getItem('username'),
+//     }, // 储存用户信息
+//     scroll: true,
+//     manager: '', // 是否为管理员模式
+//     tempEditing: false, // 管理员是否正在编辑模板
+//     fonts: [], // 缓存字体列表
+//     app: null, // 抠图服务
+//   },
+//   getters: {
+//     online: (state: Type.Object) => {
+//       return state.online
+//     },
+//     user: (state: Type.Object) => {
+//       return state.user
+//     },
+//     manager: (state: Type.Object) => {
+//       return state.manager
+//     },
+//     tempEditing: (state: Type.Object) => {
+//       return state.tempEditing
+//     },
+//     fonts: (state: Type.Object) => {
+//       return state.fonts
+//     },
+//   },
+//   mutations: {
+//     ...mutations,
+//   },
+//   actions: {
+//     ...actions,
+//   },
+// }
+
diff --git a/src/store/modules/base/mutations.ts b/src/store/modules/base/mutations.ts
index f506b49..9384472 100644
--- a/src/store/modules/base/mutations.ts
+++ b/src/store/modules/base/mutations.ts
@@ -8,35 +8,35 @@
 
 // import { Toast } from 'vant'
 
-export default {
-  loading(state: Type.Object, data: any) {
-    // Toast.clear();
-    // let msg = ''
-    // if (typeof data === 'string') {
-    //     msg = data
-    // } else {
-    //     Toast.clear();
-    //     return false
-    // }
-    // Toast.loading({
-    //     duration: 0,       // 持续展示 toast
-    //     loadingType: 'spinner',
-    //     message: msg
-    // });
-  },
-  changeRoute(state: Type.Object, from: string) {
-    state.routeFrom = from
-  },
-  changeOnline(state: Type.Object, status: string) {
-    state.online = status
-  },
-  changeUser(state: Type.Object, name: string) {
-    state.user.name = name
-    // state.user = Object.assign({}, state.user)
-    state.user = { ...state.user }
-    localStorage.setItem('username', name)
-  },
-  managerEdit(state: Type.Object, status: string) {
-    state.tempEditing = status
-  },
-}
+// export default {
+//   loading(state: Type.Object, data: any) {
+//     // Toast.clear();
+//     // let msg = ''
+//     // if (typeof data === 'string') {
+//     //     msg = data
+//     // } else {
+//     //     Toast.clear();
+//     //     return false
+//     // }
+//     // Toast.loading({
+//     //     duration: 0,       // 持续展示 toast
+//     //     loadingType: 'spinner',
+//     //     message: msg
+//     // });
+//   },
+//   changeRoute(state: Type.Object, from: string) {
+//     state.routeFrom = from
+//   },
+//   changeOnline(state: Type.Object, status: string) {
+//     state.online = status
+//   },
+//   changeUser(state: Type.Object, name: string) {
+//     state.user.name = name
+//     // state.user = Object.assign({}, state.user)
+//     state.user = { ...state.user }
+//     localStorage.setItem('username', name)
+//   },
+//   managerEdit(state: Type.Object, status: string) {
+//     state.tempEditing = status
+//   },
+// }
diff --git a/src/store/modules/base/user.ts b/src/store/modules/base/user.ts
new file mode 100644
index 0000000..3544ff2
--- /dev/null
+++ b/src/store/modules/base/user.ts
@@ -0,0 +1,58 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: User全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-17 15:00:00
+ */
+
+import { defineStore } from "pinia"
+
+type TUserStoreState = {
+  /** 登录状态 */
+  online: boolean
+  /** 储存用户信息 */
+  user: {
+    name: string | null
+  }
+  /**是否为管理员模式 */
+  manager: string
+  /** 管理员是否正在编辑模板 */
+  tempEditing: boolean
+}
+
+type TUserAction = {
+  /** 修改登录状态 */
+  changeOnline: (state: boolean) => void
+  /** 修改登录用户 */
+  changeUser: (userName: string) => void
+  managerEdit: (status: boolean) => void
+}
+
+const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
+  state: () => ({
+    online: true, // 登录状态，
+    user: {
+      name: localStorage.getItem('username'),
+    }, // 储存用户信息
+    manager: '', // 是否为管理员模式
+    tempEditing: false, // 管理员是否正在编辑模板
+  }),
+  actions: {
+    changeOnline(status: boolean) {
+      this.online = status
+    },
+    changeUser(name: string) {
+      this.user.name = name
+      // state.user = Object.assign({}, state.user)
+      // state.user = { ...state.user }
+      localStorage.setItem('username', name)
+    },
+    managerEdit(status: boolean) {
+      this.tempEditing = status
+    },
+    
+  }
+})
+
+export default useUserStore
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index e654366..4df4d8b 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -6,8 +6,10 @@
  * @LastEditTime: 2024-02-26 17:54:00
  */
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
-import store from '@/store'
+// import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
+import useUserStore from '@/store/modules/base/user';
+import useBaseStore from '@/store/modules/base';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@@ -53,7 +55,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
     }
     if (res.data.code === 401) {
       console.log('登录失效')
-      store.commit('changeOnline', false)
+      useUserStore().changeOnline(false)
+      // store.commit('changeOnline', false)
     }
 
     if (res.data.result && res.data.code === 200) {
@@ -67,7 +70,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
   (error) => {
     // if (error.response.status === 401) {
     // }
-    store.dispatch('hideLoading')
+    useBaseStore().hideLoading()
+    // store.dispatch('hideLoading')
     return Promise.reject(error)
   },
 )
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index 7f7d5ea..0495d08 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -12,7 +12,8 @@
       <span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ state.stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="state.stateBollean" @change="stateChange" />
       <div class="divide__line">|</div>
       <el-button plain type="primary" @click="saveTemp">保存模板</el-button>
-      <el-button @click="$store.commit('managerEdit', false)">取消</el-button>
+      <el-button @click="userStore.managerEdit(false)">取消</el-button>
+      <!-- <el-button @click="$store.commit('managerEdit', false)">取消</el-button> -->
       <div class="divide__line">|</div>
     </template>
     <!-- <el-button @click="draw">绘制(测试)</el-button> -->
@@ -39,6 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import useUserStore from '@/store/modules/base/user'
 
 type TProps = {
   modelValue?: boolean
@@ -60,6 +62,7 @@ const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
 const store = useStore()
+const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
   dPage, dWidgets, tempEditing, dHistory, dPageHistory

From 7835d532b4872eb7d517809b750fadcf5fca3aa5 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sun, 17 Mar 2024 16:58:50 +0000
Subject: [PATCH 03/23] rebuilt: base store to pinia

---
 src/main.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/main.ts b/src/main.ts
index d960b07..4ffcd44 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -13,7 +13,9 @@ import utils from './utils'
 import 'normalize.css/normalize.css'
 import '@/assets/styles/index.less'
 import elementConfig from './utils/widgets/elementConfig'
+import { createPinia } from 'pinia'
 
+const pinia = createPinia()
 const app = createApp(App)
 
 elementConfig.components.forEach((component) => {
@@ -26,6 +28,7 @@ elementConfig.plugins.forEach((plugin) => {
 
 app
   .use(store)
+  .use(pinia)
   .use(router)
   .use(utils)
   .mount('#app')

From a7334b7749578ea8cf1a99a077641fd9055d6352 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Mon, 18 Mar 2024 23:19:29 +0000
Subject: [PATCH 04/23] feat: move pinia to new folder

---
 src/pinia/base/index.ts                   | 50 +++++++++++++++++++++++
 src/{store/modules => pinia}/base/user.ts |  3 +-
 src/pinia/index.ts                        | 15 +++++++
 src/store/modules/base/index.ts           | 41 -------------------
 src/utils/axios.ts                        |  3 +-
 src/views/components/HeaderOptions.vue    |  2 +-
 6 files changed, 69 insertions(+), 45 deletions(-)
 create mode 100644 src/pinia/base/index.ts
 rename src/{store/modules => pinia}/base/user.ts (95%)
 create mode 100644 src/pinia/index.ts

diff --git a/src/pinia/base/index.ts b/src/pinia/base/index.ts
new file mode 100644
index 0000000..e883bef
--- /dev/null
+++ b/src/pinia/base/index.ts
@@ -0,0 +1,50 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: Base全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { defineStore } from 'pinia'
+
+// import actions from './actions'
+// import _config from '@/config'
+
+type TStoreBaseState = {
+  loading: boolean | null
+  scroll: boolean
+  /** fonts */
+  fonts: string[]
+  /** 抠图服务 */
+  app: string | null
+}
+
+type TUserAction = {
+  hideLoading: () => void
+  setFonts: (list: string[]) => void
+}
+
+/** Base全局状态管理 */
+const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
+  state: () => ({
+    loading: null,
+    scroll: true,
+    fonts: [], // 缓存字体列表
+    app: null, // 抠图服务
+  }),
+  actions: {
+    /** 隐藏loading */
+    hideLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 600)
+    },
+    setFonts(list: string[]) {
+      this.fonts = list
+    },
+  }
+})
+
+export default useBaseStore
+
diff --git a/src/store/modules/base/user.ts b/src/pinia/base/user.ts
similarity index 95%
rename from src/store/modules/base/user.ts
rename to src/pinia/base/user.ts
index 3544ff2..23b9d07 100644
--- a/src/store/modules/base/user.ts
+++ b/src/pinia/base/user.ts
@@ -3,7 +3,7 @@
  * @Date: 2024-03-17 15:00:00
  * @Description: User全局状态管理
  * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-17 15:00:00
+ * @LastEditTime: 2024-03-18 21:00:00
  */
 
 import { defineStore } from "pinia"
@@ -29,6 +29,7 @@ type TUserAction = {
   managerEdit: (status: boolean) => void
 }
 
+/** User全局状态管理 */
 const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
   state: () => ({
     online: true, // 登录状态，
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
new file mode 100644
index 0000000..6caeb15
--- /dev/null
+++ b/src/pinia/index.ts
@@ -0,0 +1,15 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: 方法暴露
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import useBaseStore from "./base";
+import useUserStore from "./base/user";
+
+export {
+  useBaseStore,
+  useUserStore,
+}
diff --git a/src/store/modules/base/index.ts b/src/store/modules/base/index.ts
index f8e8e95..6d03977 100644
--- a/src/store/modules/base/index.ts
+++ b/src/store/modules/base/index.ts
@@ -6,47 +6,6 @@
  * @LastEditTime: 2024-03-17 15:00:00
  */
 
-import { defineStore } from 'pinia'
-
-// import actions from './actions'
-// import _config from '@/config'
-
-type TStoreBaseState = {
-  loading: boolean | null
-  scroll: boolean
-  /** fonts */
-  fonts: string[]
-  /** 抠图服务 */
-  app: string | null
-}
-
-type TUserAction = {
-  hideLoading: () => void
-  setFonts: (list: string[]) => void
-}
-
-const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
-  state: () => ({
-    loading: null,
-    scroll: true,
-    fonts: [], // 缓存字体列表
-    app: null, // 抠图服务
-  }),
-  actions: {
-    /** 隐藏loading */
-    hideLoading() {
-      setTimeout(() => {
-        this.loading = false
-      }, 600)
-    },
-    setFonts(list: string[]) {
-      this.fonts = list
-    },
-  }
-})
-
-export default useBaseStore
-
 // const all = {
 //   state: {
 //     loading: null,
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 4df4d8b..8f05b41 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -8,8 +8,7 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
 // import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
-import useUserStore from '@/store/modules/base/user';
-import useBaseStore from '@/store/modules/base';
+import { useBaseStore, useUserStore } from '@/pinia/index';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index e6f4200..d496a01 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import useUserStore from '@/store/modules/base/user'
+import { useUserStore } from '@/pinia/index'
 
 type TProps = {
   modelValue?: boolean

From e106ad3aefdf6fd080751c5fa42da30874e4417d Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 19 Mar 2024 00:11:11 +0000
Subject: [PATCH 05/23] rebuilt: page store using pinia

---
 src/pinia/design/page/index.ts | 82 ++++++++++++++++++++++++++++++++++
 src/pinia/index.ts             |  2 +
 2 files changed, 84 insertions(+)
 create mode 100644 src/pinia/design/page/index.ts

diff --git a/src/pinia/design/page/index.ts b/src/pinia/design/page/index.ts
new file mode 100644
index 0000000..1e78be9
--- /dev/null
+++ b/src/pinia/design/page/index.ts
@@ -0,0 +1,82 @@
+import { defineStore } from 'pinia'
+
+export type TPageStore = {
+  name: string
+  type: string
+  uuid: string
+  left: number
+  top: number
+  /** 画布宽度 */
+  width: number
+  /** 画布高度 */
+  height: number
+  /** 画布背景颜色 */
+  backgroundColor: string
+  /** 画布背景图片 */
+  backgroundImage: string
+  backgroundTransform: {
+    x?: number
+    y?: number
+  }
+  /** 透明度 */
+  opacity: number
+  /** 强制刷新用 */
+  tag: number
+  setting:{
+    label: string
+    parentKey: string
+    value: boolean
+  }[]
+  record: Record<string, any>
+}
+
+type TPageGetter = {
+  dPage(state: TPageStore): TPageStore
+}
+
+type TPageActions = {
+  updatePageData<T extends keyof TPageStore>(data: {
+    key: T
+    value: TPageStore[T]
+    pushHistory: boolean
+  }): void
+}
+
+export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
+  state: () => ({
+    name: '背景页面',
+    type: 'page',
+    uuid: '-1',
+    left: 0,
+    top: 0,
+    width: 1920, // 画布宽度
+    height: 1080, // 画布高度
+    backgroundColor: '#ffffff', // 画布背景颜色
+    backgroundImage: '', // 画布背景图片
+    backgroundTransform: {},
+    opacity: 1, // 透明度
+    tag: 0, // 强制刷新用
+    setting: [
+      {
+        label: '背景颜色',
+        parentKey: 'backgroundColor',
+        value: false,
+      },
+    ],
+    record: {},
+  }),
+  getters: {
+    dPage: (state) => state
+  },
+  actions: {
+    /** 更新Page数据 */
+    updatePageData({ key, value, pushHistory }) {
+      const data = this as TPageStore
+      if (data[key] !== value || pushHistory) {
+        data[key] = value
+        // 画布修改先不压入历史栈，因为替换模板后会重复压栈
+        // store.dispatch('pushHistory', 'updatePageData')
+      }
+    },
+  }
+})
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index 6caeb15..9a52a36 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -8,8 +8,10 @@
 
 import useBaseStore from "./base";
 import useUserStore from "./base/user";
+import usePageStore from "./design/page/index"
 
 export {
   useBaseStore,
   useUserStore,
+  usePageStore,
 }

From 31065621743cdcbe0ee9505d6938da4c09309428 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 19 Mar 2024 11:34:28 +0000
Subject: [PATCH 06/23] rebuilt: dPage store using pinia

---
 src/api/material.ts                           |   1 +
 .../modules/layout/designBoard/index.vue      |   8 +-
 .../modules/layout/zoomControl/index.vue      |   6 +-
 .../modules/panel/wrap/BgImgListWrap.vue      |  30 +-
 .../modules/panel/wrap/CompListWrap.vue       |   4 +-
 .../modules/panel/wrap/GraphListWrap.vue      | 325 ++++++++++--------
 .../modules/panel/wrap/PhotoListWrap.vue      | 201 ++++++-----
 .../modules/panel/wrap/TempListWrap.vue       |   7 +-
 .../modules/panel/wrap/TextListWrap.vue       |   5 +-
 .../modules/panel/wrap/ToolsListWrap.vue      |   4 +-
 .../modules/panel/wrap/UserWrap.vue           |   5 +-
 src/components/modules/widgets/pageStyle.vue  |  20 +-
 src/mixins/methods/handlePaste.ts             |   4 +-
 src/pinia/design/page/index.ts                |  13 +-
 src/pinia/index.ts                            |   2 +-
 src/views/Draw.vue                            |   9 +-
 src/views/Index.vue                           |   8 +-
 src/views/Psd.vue                             |  17 +-
 src/views/components/HeaderOptions.vue        |  13 +-
 src/views/components/UploadTemplate.vue       |   5 +-
 20 files changed, 390 insertions(+), 297 deletions(-)

diff --git a/src/api/material.ts b/src/api/material.ts
index 8765569..7561373 100644
--- a/src/api/material.ts
+++ b/src/api/material.ts
@@ -73,6 +73,7 @@ export const getFontSub = (params: TGetFontSubParam, extra: TGetFontSubExtra = {
 
 type TGetImageListParams = {
   page?: number
+  pageSize?: number
   cate?: number
 }
 
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 749e6c3..2403dcc 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -70,6 +70,8 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -90,10 +92,12 @@ type TSetting = {
 const store = useStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
-  dPaddingTop, dPage, dZoom, dScreen, dWidgets,
+  dPaddingTop, dZoom, dScreen, dWidgets,
   dActiveElement, dSelectWidgets, dAltDown, dDraging,
   dHoverUuid, showRotatable
-} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+} = useSetupMapGetters(['dPaddingTop', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 let _dropIn: string | null = ''
 let _srcCache: string | null = ''
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index cd3518d..deb318a 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -26,6 +26,8 @@ import addMouseWheel from '@/common/methods/addMouseWheel'
 import { OtherList, TZoomData, ZoomList } from './data';
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { usePageStore } from '@/pinia';
 
 const route = useRoute()
 const store = useStore()
@@ -46,7 +48,9 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
+const { dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dScreen', 'zoomScreenChange', 'dZoom'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 watch(
   activezoomIndex,
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index 59f8fea..f703ddb 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/src/components/modules/panel/wrap/BgImgListWrap.vue
@@ -28,6 +28,7 @@ import api from '@/api'
 import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
+import { usePageStore } from '@/pinia';
 
 type TCommonPanelData = {
   color: string
@@ -56,6 +57,8 @@ const { model } = defineProps<TProps>()
 
 
 const store = useStore()
+const pageStore = usePageStore()
+
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -113,28 +116,27 @@ const load = async (init: boolean = false) => {
 }
 
 function setBGcolor(color: string) {
-  store.dispatch('updatePageData', {
-    key: 'backgroundImage',
-    value: '',
+  pageStore.updatePageData({
+    key: "backgroundImage",
+    value: ''
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundColor',
     value: color,
-    pushHistory: true,
+    pushHistory: true
   })
   store.dispatch('selectWidget', {
     uuid: '-1',
   })
 }
 
-// ...mapActions(['selectWidget', 'updatePageData']),
 async function selectItem(item: TGetImageListResult) {
   // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: item.url,
     pushHistory: true,
@@ -142,18 +144,6 @@ async function selectItem(item: TGetImageListResult) {
   store.dispatch('selectWidget', {
     uuid: '-1',
   })
-  // this.updatePageData({
-  //   key: 'backgroundTransform',
-  //   value: {},
-  // })
-  // this.updatePageData({
-  //   key: 'backgroundImage',
-  //   value: item.url,
-  //   pushHistory: true,
-  // })
-  // this.selectWidget({
-  //   uuid: '-1',
-  // })
 }
 
 function dragStart(_: MouseEvent, _item: TGetImageListResult) {
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 270e0be..11d131e 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -60,6 +60,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
+import { usePageStore } from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -88,6 +89,7 @@ const state = reactive<TState>({
   showList: [],
 })
 const store = useStore()
+const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
 onMounted(async () => {
@@ -200,7 +202,7 @@ const selectItem = async (item: TGetCompListResult) => {
   // let group = JSON.parse(tempDetail.data)
   const group: any = await getComponentsData(tempDetail.data)
   let parent: Record<string, any> = { x: 0, y: 0 }
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage
 
   Array.isArray(group) &&
     group.forEach((element) => {
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 490ad35..9f1e3bc 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -7,7 +7,7 @@
 -->
 <template>
   <div class="wrap">
-    <search-header v-model="searchKeyword" type="none" @change="searchChange" />
+    <search-header v-model="state.searchKeyword" type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
     <!-- <div class="types">
       <div v-for="(t, ti) in types" :key="ti + 't'" :style="{ backgroundColor: colors[ti] }" :class="['types__item', { 'types--select': currentType === t.id }]" @click="selectType(t)"></div>
@@ -15,182 +15,209 @@
     <!-- <div class="tags">
       <el-check-tag v-for="(t2, t2i) in sub" :key="t2i + 't2'" :checked="t2.id === currentCheck" class="tags__item" @click="tagsChange(t2.id)">{{ t2.name }}</el-check-tag>
     </div> -->
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
         <div class="list-wrap">
-          <div v-for="(item, i) in showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+          <div v-for="(item, i) in state.showList[index]" :key="i + 'sl'" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
             <el-image class="list__img-thumb" :src="item.thumb" fit="contain" lazy loading="lazy" />
           </div>
         </div>
       </template>
     </classHeader>
 
-    <ul v-if="currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <ul v-if="state.currentCategory" v-infinite-scroll="load" class="infinite-list" :infinite-scroll-distance="150" style="overflow: auto">
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <el-space fill wrap :fillRatio="30" direction="horizontal" class="list">
-        <div v-for="(item, i) in list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
+        <div v-for="(item, i) in state.list" :key="i + 'i'" class="list__item" draggable="false" @mousedown="dragStart($event, item)" @mousemove="mousemove" @mouseup="mouseup" @click.stop="selectItem(item)" @dragstart="dragStart($event, item)">
           <el-image class="list__img" :src="item.thumb" fit="contain" lazy loading="lazy" />
         </div>
       </el-space>
-      <div v-show="loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
-      <div v-show="loadDone" :style="list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
+      <div v-show="state.loading" class="loading"><i class="el-icon-loading" /> 拼命加载中</div>
+      <div v-show="state.loadDone" :style="state.list.length <= 0 ? 'padding-top: 4rem' : ''" class="loading">全部加载完毕</div>
     </ul>
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, toRefs, onMounted, watch } from 'vue'
+<script lang="ts" setup>
+import { reactive, toRefs, onMounted } from 'vue'
 import api from '@/api'
 import wImage from '../../widgets/wImage/wImage.vue'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
-import { mapActions, mapGetters } from 'vuex'
+import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
+import { TGetListData } from '@/api/material'
+import { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
+
+type TProps = {
+  active?: boolean
+}
+
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  sub: []
+  list: TGetListData[]
+  currentType: Number
+  currentCheck:number
+  colors: string[]
+  currentCategory: TCurrentCategory | null
+  types: []
+  showList: TGetListData[][]
+  searchKeyword: string
+}
+
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
 
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 const dragHelper = new DragHelper()
 
-export default defineComponent({
-  components: {},
-  props: ['active'],
-  setup(props) {
-    const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
-    const state: any = reactive({
-      loading: false,
-      loadDone: false,
-      sub: [],
-      list: [],
-      currentType: 2, // 2
-      currentCheck: 0,
-      colors,
-      currentCategory: null,
-      types: [],
-      showList: [],
-      searchKeyword: '',
-    })
-    const pageOptions = { page: 0, pageSize: 20 }
+const props = defineProps<TProps>()
 
-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 2 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.material.getList({
-            cate: iterator.id,
-            pageSize: 3,
-          })
-          state.showList.push(list)
-        }
-      }
-    })
-    // const dragHelper = new DragHelper()
-    // let isDrag = false
-    // let startPoint = { x: 99999, y: 99999 }
-    const mouseup = (e: any) => {
-      e.preventDefault()
-      setTimeout(() => {
-        isDrag = false
-        startPoint = { x: 99999, y: 99999 }
-      }, 10)
-    }
-    const mousemove = (e: any) => {
-      e.preventDefault()
-      if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
-        isDrag = true
-      }
-    }
-
-    const load = async (init: boolean = false) => {
-      if (init) {
-        state.list = []
-        pageOptions.page = 0
-        state.loadDone = false
-      }
-      if (state.loadDone || state.loading) {
-        return
-      }
-      state.loading = true
-      pageOptions.page += 1
-      const list = await api.material.getList({
-        ...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
-      })
-      if (init) {
-        state.list = list?.list
-      } else {
-        state.list = state.list.concat(list?.list)
-      }
-      list?.list.length <= 0 && (state.loadDone = true)
-      setTimeout(() => {
-        state.loading = false
-      }, 100)
-    }
-
-    const searchChange = (e: any) => {
-      state.currentCategory = { name: '搜索结果' }
-      load(true)
-    }
-
-    const selectTypes = (item: any) => {
-      state.currentCategory = item
-      load(true)
-    }
-    const back = () => {
-      state.currentCategory = null
-    }
-
-    return {
-      ...toRefs(state),
-      load,
-      searchChange,
-      selectTypes,
-      back,
-      mouseup,
-      mousemove,
-    }
-  },
-  computed: {
-    ...mapGetters(['dPage']),
-  },
-  methods: {
-    ...mapActions(['addWidget']),
-    async selectItem(item: any) {
-      if (isDrag) {
-        return
-      }
-      this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
-      const img: any = await setImageData(item)
-
-      setting.width = img.width
-      setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      const { width: pW, height: pH } = this.dPage
-      setting.left = pW / 2 - img.width / 2
-      setting.top = pH / 2 - img.height / 2
-      setting.imgUrl = item.url
-      if (item.type === 'svg') {
-        setting.svgUrl = item.url
-        const models = JSON.parse(item.model)
-        for (const key in models) {
-          if (Object.hasOwnProperty.call(models, key)) {
-            setting[key] = models[key]
-          }
-        }
-      }
-      if (item.type === 'mask') {
-        setting.mask = item.url
-      }
-      this.addWidget(setting)
-    },
-    async dragStart(e: any, item: any) {
-      startPoint = { x: e.x, y: e.y }
-      const { width, height, thumb, url } = item
-      const img = await setImageData({ width, height, url: thumb || url })
-      dragHelper.start(e, img.canvasWidth)
-      this.$store.commit('selectItem', { data: { value: item }, type: item.type })
-    },
-  },
+const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
+const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
+  loading: false,
+  loadDone: false,
+  sub: [],
+  list: [],
+  currentType: 2, // 2
+  currentCheck: 0,
+  colors,
+  currentCategory: null,
+  types: [],
+  showList: [],
+  searchKeyword: '',
 })
+const pageOptions = { page: 0, pageSize: 20 }
+
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 2 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.material.getList({
+        cate: iterator.id,
+        pageSize: 3,
+      })
+      state.showList.push(list)
+    }
+  }
+})
+
+// const dragHelper = new DragHelper()
+// let isDrag = false
+// let startPoint = { x: 99999, y: 99999 }
+const mouseup = (e: MouseEvent) => {
+  e.preventDefault()
+  setTimeout(() => {
+    isDrag = false
+    startPoint = { x: 99999, y: 99999 }
+  }, 10)
+}
+
+const mousemove = (e: MouseEvent) => {
+  e.preventDefault()
+  if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
+    isDrag = true
+  }
+}
+
+const load = async (init: boolean = false) => {
+  if (init) {
+    state.list = []
+    pageOptions.page = 0
+    state.loadDone = false
+  }
+  if (state.loadDone || state.loading) {
+    return
+  }
+  state.loading = true
+  pageOptions.page += 1
+  const list = await api.material.getList({
+    ...{ cate: state.currentCategory?.id, search: state.searchKeyword, ...pageOptions },
+  })
+  if (init) {
+    state.list = list?.list
+  } else {
+    state.list = state.list.concat(list?.list)
+  }
+  list?.list.length <= 0 && (state.loadDone = true)
+  setTimeout(() => {
+    state.loading = false
+  }, 100)
+}
+
+const searchChange = (_: Event) => {
+  state.currentCategory = { name: '搜索结果' }
+  load(true)
+}
+
+const selectTypes = (item: TCurrentCategory) => {
+  state.currentCategory = item
+  load(true)
+}
+const back = () => {
+  state.currentCategory = null
+}
+
+defineExpose({
+  load,
+  searchChange,
+  selectTypes,
+  back,
+  mouseup,
+  mousemove,
+})
+
+
+// computed: {
+//   ...mapGetters(['dPage']),
+// }
+// ...mapActions(['addWidget']),
+async function selectItem(item: TGetListData) {
+  if (isDrag) {
+    return
+  }
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // this.$store.commit('setShowMoveable', false)
+  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
+  const img = await setImageData(item)
+
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  const { width: pW, height: pH } = dPage.value
+  setting.left = pW / 2 - img.width / 2
+  setting.top = pH / 2 - img.height / 2
+  setting.imgUrl = item.url
+  if (item.type === 'svg') {
+    setting.svgUrl = item.url
+    const models = JSON.parse(item.model)
+    for (const key in models) {
+      if (Object.hasOwnProperty.call(models, key)) {
+        setting[key] = models[key]
+      }
+    }
+  }
+  if (item.type === 'mask') {
+    setting.mask = item.url
+  }
+  store.dispatch('addWidget', setting)
+}
+async function dragStart(e: MouseEvent, item: TGetListData) {
+  startPoint = { x: e.x, y: e.y }
+  const { width, height, thumb, url } = item
+  const img = await setImageData({ width, height, url: thumb || url })
+  dragHelper.start(e, img.canvasWidth)
+  store.commit('selectItem', { data: { value: item }, type: item.type })
+  // this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+}
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 6462e14..74111c6 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -3,122 +3,137 @@
  * @Date: 2022-02-11 18:48:23
  * @Description: 照片图库 Form:Unsplash无版权图片
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 19:04:39
+ * @LastEditTime: 2024-03-19 10:04:39
 -->
 <template>
   <div class="wrap">
     <search-header type="none" @change="searchChange" />
     <div style="height: 0.5rem" />
-    <classHeader v-show="!currentCategory" :types="types" @select="selectTypes">
+    <classHeader v-show="!state.currentCategory" :types="state.types" @select="selectTypes">
       <template v-slot="{ index }">
-        <photo-list :isShort="true" :listData="showList[index]" @load="getDataList" @drag="dragStart($event, showList[index])" @select="selectImg($event, showList[index])" />
+        <photo-list :isShort="true" :listData="state.showList[index]" @load="getDataList" @drag="dragStart($event, state.showList[index])" @select="selectImg($event, state.showList[index])" />
       </template>
     </classHeader>
-    <div v-if="currentCategory">
-      <classHeader :is-back="true" @back="back">{{ currentCategory.name }}</classHeader>
+    <div v-if="state.currentCategory">
+      <classHeader :is-back="true" @back="back">{{ state.currentCategory.name }}</classHeader>
       <br /><br /><br />
       <div style="margin: 0 1rem; height: 100vh">
-        <photo-list :isDone="loadDone" :listData="recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
+        <photo-list :isDone="state.loadDone" :listData="state.recommendImgList" @load="getDataList" @drag="dragStart" @select="selectImg" />
       </div>
     </div>
   </div>
 </template>
 
-<script>
+<script setup lang="ts">
 // 图片列表
-const NAME = 'img-list-wrap'
+// const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
 import wImage from '../../widgets/wImage/wImage.vue'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
+import { TGetImageListResult } from '@/api/material'
 
-export default {
-  name: NAME,
-  components: {},
-  props: ['active'],
-  setup() {
-    const store = useStore()
-    const state = reactive({
-      recommendImgList: [],
-      loadDone: false,
-      page: 0,
-      currentCategory: null,
-      types: [],
-      showList: [],
-    })
-    const dPage = computed(() => store.getters.dPage)
-    let loading = false
-
-    onMounted(async () => {
-      if (state.types.length <= 0) {
-        const types = await api.material.getKinds({ type: 4 })
-        state.types = types
-        for (const iterator of types) {
-          const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
-          state.showList.push(list)
-        }
-      }
-    })
-
-    const selectImg = async (index, list) => {
-      const item = list ? list[index] : state.recommendImgList[index]
-      store.commit('setShowMoveable', false) // 清理掉上一次的选择
-      let setting = JSON.parse(JSON.stringify(wImage.setting))
-      const img = await setImageData(item) // await getImage(item.url)
-      setting.width = img.width
-      setting.height = img.height // parseInt(100 / item.value.ratio, 10)
-      setting.imgUrl = item.url
-      const { width: pW, height: pH } = dPage
-      setting.left = pW / 2 - img.width / 2
-      setting.top = pH / 2 - img.height / 2
-      store.dispatch('addWidget', setting)
-    }
-
-    const getDataList = async () => {
-      if (state.loadDone || loading) {
-        return
-      }
-      loading = true
-      state.page += 1
-      let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
-      list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
-      setTimeout(() => {
-        loading = false
-      }, 100)
-    }
-
-    const dragStart = (index, list) => {
-      const item = list ? list[index] : state.recommendImgList[index]
-      store.commit('selectItem', { data: { value: item }, type: 'image' })
-    }
-
-    const searchChange = (e) => {
-      console.log(e)
-    }
-
-    const selectTypes = (item) => {
-      state.currentCategory = item
-      getDataList()
-    }
-    const back = () => {
-      state.currentCategory = null
-      state.page = 0
-      state.loadDone = false
-      state.recommendImgList = []
-    }
-
-    return {
-      ...toRefs(state),
-      selectImg,
-      getDataList,
-      dragStart,
-      searchChange,
-      selectTypes,
-      back,
-    }
-  },
+type TProps = {
+  active?: boolean
 }
+
+type TState = {
+  recommendImgList: TGetImageListResult[],
+  loadDone: boolean
+  page: number
+  currentCategory: TCurrentCategory | null,
+  types: [],
+  showList: TGetImageListResult[][],
+}
+
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
+
+const props = defineProps<TProps>()
+const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
+  recommendImgList: [],
+  loadDone: false,
+  page: 0,
+  currentCategory: null,
+  types: [],
+  showList: [],
+})
+let loading = false
+
+onMounted(async () => {
+  if (state.types.length <= 0) {
+    const types = await api.material.getKinds({ type: 4 })
+    state.types = types
+    for (const iterator of types) {
+      const { list } = await api.material.getImagesList({ cate: iterator.id, pageSize: 2 })
+      state.showList.push(list)
+    }
+  }
+})
+
+const selectImg = async (index: number, list: TGetImageListResult[]) => {
+  const item = list ? list[index] : state.recommendImgList[index]
+  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  let setting = JSON.parse(JSON.stringify(wImage.setting))
+  const img = await setImageData(item) // await getImage(item.url)
+  setting.width = img.width
+  setting.height = img.height // parseInt(100 / item.value.ratio, 10)
+  setting.imgUrl = item.url
+  const { width: pW, height: pH } = dPage.value
+  setting.left = pW / 2 - img.width / 2
+  setting.top = pH / 2 - img.height / 2
+  store.dispatch('addWidget', setting)
+}
+
+const getDataList = async () => {
+  if (state.loadDone || loading) {
+    return
+  }
+  loading = true
+  state.page += 1
+  let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory?.id, page: state.page, pageSize: 30 })
+  list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
+  setTimeout(() => {
+    loading = false
+  }, 100)
+}
+
+const dragStart = (index: number, list: TGetImageListResult[]) => {
+  const item = list ? list[index] : state.recommendImgList[index]
+  store.commit('selectItem', { data: { value: item }, type: 'image' })
+}
+
+const searchChange = (e: Event) => {
+  console.log(e)
+}
+
+const selectTypes = (item: TCurrentCategory) => {
+  state.currentCategory = item
+  getDataList()
+}
+
+const back = () => {
+  state.currentCategory = null
+  state.page = 0
+  state.loadDone = false
+  state.recommendImgList = []
+}
+
+defineExpose({
+  selectImg,
+  getDataList,
+  dragStart,
+  searchChange,
+  selectTypes,
+  back,
+})
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index 320455e..543d2a5 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -32,7 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import useUserStore from '@/store/modules/base/user'
+import {usePageStore, useUserStore} from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -54,6 +54,7 @@ const route = useRoute()
 const router = useRouter()
 const store = useStore()
 const userStore = useUserStore()
+const pageStore = usePageStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -135,7 +136,9 @@ async function selectItem(item: IGetTempListData) {
   const { page, widgets } = result
   console.log(widgets)
 
-  store.commit('setDPage', page)
+  pageStore.setDPage(page)
+  // store.commit('setDPage', page)
+  
   store.dispatch('setTemplate', widgets)
   // setTemplate(widgets)
   setTimeout(() => {
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index fa95fcc..9ec2eb1 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -25,9 +25,11 @@
 <script lang="ts" setup>
 // const NAME = 'text-list-wrap'
 
+import { storeToRefs } from 'pinia';
 import wText from '../../widgets/wText/wText.vue'
 
 import { useStore } from 'vuex'
+import { usePageStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -36,6 +38,7 @@ type TBasicTextData = {
 }
 
 const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
 
 
 const selectBasicText = (item: TBasicTextData) => {
@@ -45,7 +48,7 @@ const selectBasicText = (item: TBasicTextData) => {
   setting.width = item.fontSize * setting.text.length
   setting.fontSize = item.fontSize
   setting.fontWeight = item.fontWeight
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
   store.dispatch('addWidget', setting)
diff --git a/src/components/modules/panel/wrap/ToolsListWrap.vue b/src/components/modules/panel/wrap/ToolsListWrap.vue
index 4d0247c..9c8b7c2 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@@ -32,13 +32,15 @@ import { useRoute } from 'vue-router'
 import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 const store = useStore()
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
-const { dPage } = useSetupMapGetters(['dPage'])
+const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
   // this.getDataList()
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 4a3c981..4ade061 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/src/components/modules/panel/wrap/UserWrap.vue
@@ -51,6 +51,8 @@ import imgWaterFall from './components/imgWaterFall.vue'
 import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 type TProps = {
   active?: number
@@ -70,6 +72,7 @@ const props = defineProps<TProps>()
 
 const router = useRouter()
 const store = useStore()
+const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)
 
@@ -164,7 +167,7 @@ const selectImg = async (index: number) => {
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
   setting.imgUrl = item.url
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
   store.dispatch('addWidget', setting)
diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue
index 2996567..03d49db 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@@ -48,6 +48,8 @@ import _dl from '@/common/methods/download'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore } from '@/pinia'
+import { TPageStore } from '@/pinia/design/page'
 
 type TState = {
   activeNames: string[]
@@ -61,6 +63,7 @@ type TState = {
 }
 
 const store = useStore()
+const pageStore = usePageStore()
 const state = reactive<TState>({
   activeNames: ['1', '2', '3', '4'],
   innerElement: {},
@@ -94,7 +97,6 @@ onMounted(() => {
   change()
 })
 
-// ...mapActions(['updatePageData']),
 function colorChange(e: colorChangeData) {
   if (e.mode === '渐变') {
     // setTimeout(() => {
@@ -128,21 +130,17 @@ function changeValue() {
       if (state.ingoreKeys.indexOf(key) !== -1) {
         dActiveElement.value[key] = state.innerElement[key]
       } else {
-        store.dispatch('updatePageData', {
-          key: key,
+        pageStore.updatePageData({
+          key: key as keyof TPageStore,
           value: state.innerElement[key],
         })
-        // updatePageData({
-        //   key: key,
-        //   value: this.innerElement[key],
-        // })
       }
     }
   }
 }
 
-function finish(key: string, value: string | number) {
-  store.dispatch('updatePageData', {
+function finish(key: keyof TPageStore, value: string | number) {
+  pageStore.updatePageData({
     key: key,
     value: value,
     pushHistory: true,
@@ -150,7 +148,7 @@ function finish(key: string, value: string | number) {
 }
 async function uploadImgDone(img: TUploadDoneData) {
   await api.material.addMyPhoto(img)
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
@@ -158,7 +156,7 @@ async function uploadImgDone(img: TUploadDoneData) {
 }
 async function deleteBg() {
   _localTempBG = null
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: '',
     pushHistory: true,
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index 6964524..4c76f02 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -19,9 +19,11 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
+import { usePageStore } from '@/pinia'
 
 export default () => {
   return new Promise<void>((resolve) => {
+    const pageStore = usePageStore()
     navigator.clipboard
       .read()
       .then(async (dataTransfer: any) => {
@@ -47,7 +49,7 @@ export default () => {
             setting.width = width
             setting.height = height
             setting.imgUrl = url
-            const { width: pW, height: pH } = store.getters.dPage
+            const { width: pW, height: pH } = pageStore.dPage
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
             store.dispatch('addWidget', setting)
diff --git a/src/pinia/design/page/index.ts b/src/pinia/design/page/index.ts
index 1e78be9..885486a 100644
--- a/src/pinia/design/page/index.ts
+++ b/src/pinia/design/page/index.ts
@@ -35,11 +35,14 @@ type TPageGetter = {
 }
 
 type TPageActions = {
+  /** 更新Page数据 */
   updatePageData<T extends keyof TPageStore>(data: {
     key: T
     value: TPageStore[T]
-    pushHistory: boolean
+    pushHistory?: boolean
   }): void
+  /** 设置dPage */
+  setDPage(data: TPageStore): void
 }
 
 export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
@@ -78,5 +81,13 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
         // store.dispatch('pushHistory', 'updatePageData')
       }
     },
+    /** 设置dPage */
+    setDPage(data: TPageStore) {
+      const cur = this as Record<string, any>
+      const keys = Object.keys(data) as (keyof TPageStore)[];
+      keys.forEach(val => {
+        cur[val] = data[val]
+      })
+    }
   }
 })
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index 9a52a36..a4ff458 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -1,7 +1,7 @@
 /*
  * @Author: Jeremy Yu
  * @Date: 2024-03-18 21:00:00
- * @Description: 方法暴露
+ * @Description: Store方法export
  * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-18 21:00:00
  */
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index 7eec640..6bd61ce 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -21,6 +21,8 @@ import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 type TState = {
   style: StyleValue
@@ -34,7 +36,9 @@ const state = reactive<TState>({
     left: '0px',
   },
 })
-const { dPage } = useSetupMapGetters(['dPage'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+// const { dPage } = useSetupMapGetters(['dPage'])
 
 onMounted(() => {
   store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
@@ -64,7 +68,8 @@ async function load() {
       store.dispatch('addGroup', content)
       // addGroup(content)
     } else {
-      store.commit('setDPage', content.page)
+      pageStore.setDPage(content.page)
+      // store.commit('setDPage', content.page)
       if (id) {
         store.commit('setDWidgets', widgets)
       } else {
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 64ee6e1..afcd63c 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -73,6 +73,8 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
+import { storeToRefs } from 'pinia'
+import { usePageStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -94,8 +96,10 @@ const beforeUnload = function (e: Event): string {
 !_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
 const {
-  dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+  dActiveElement, dHistoryParams, dCopyElement, dZoom
+} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dZoom'])
+const { dPage } = storeToRefs(usePageStore())
+
 
 const state = reactive<TState>({
   style: {
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 4d12f2e..dee59ea 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -72,6 +72,8 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { processPSD2Page } from '@/utils/plugins/psd'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   isDone: boolean
@@ -92,7 +94,10 @@ const state = reactive<TState>({
 const store = useStore()
 const route = useRoute()
 
-const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
+const { dZoom } = useSetupMapGetters(['dZoom'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+
 const zoomControlRef = ref<typeof zoomControl | null>()
 
 let loading: ReturnType<typeof useLoading> | null = null
@@ -137,14 +142,20 @@ async function loadPSD(file: File) {
     }
 
     const { width, height, background: bg } = data
-    store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+
+    pageStore.setDPage(Object.assign(pageStore.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    // store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    
     await loadDone()
   }, 10)
 }
 
 async function clear() {
   store.commit('setDWidgets', [])
-  store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+
+  pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  
   store.commit('setShowMoveable', false)
   await nextTick()
   state.isDone = false
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index d496a01..0e0a270 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -40,7 +40,8 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useUserStore } from '@/pinia/index'
+import { usePageStore, useUserStore } from '@/pinia/index'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: boolean
@@ -65,8 +66,11 @@ const store = useStore()
 const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
-  dPage, dWidgets, tempEditing, dHistory, dPageHistory
-} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+  dWidgets, tempEditing, dHistory, dPageHistory
+} = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+
 
 const state = reactive<TState>({
   stateBollean: false,
@@ -192,7 +196,8 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
       store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
-      store.commit('setDPage', data.page)
+      pageStore.setDPage(data.page)
+      // store.commit('setDPage', data.page)
       id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 202c61d..7b3c634 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -22,6 +22,8 @@ import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: string
@@ -46,7 +48,8 @@ type TState = {
   loading: false,
 }
 
-const { dPage, dWidgets } = useSetupMapGetters(['dPage', 'dWidgets'])
+const { dWidgets } = useSetupMapGetters(['dWidgets'])
+const { dPage } = storeToRefs(usePageStore())
 
 const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()

From 54b9338e52bd60be780c3baa7918d4f23dfab1af Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 20 Mar 2024 18:08:16 +0000
Subject: [PATCH 07/23] rebuilt: canvas design store to pinia

---
 .../business/save-download/CreateCover.vue    |  14 +-
 .../modules/layout/designBoard/index.vue      |  23 +-
 src/components/modules/layout/lineGuides.vue  |   6 +-
 .../modules/layout/zoomControl/index.vue      |  15 +-
 .../modules/panel/wrap/GraphListWrap.vue      |   5 +-
 .../modules/panel/wrap/PhotoListWrap.vue      |   5 +-
 .../modules/panel/wrap/UserWrap.vue           |   5 +-
 .../modules/widgets/wImage/wImage.vue         | 546 ++++++++++--------
 .../modules/widgets/wImage/wImageSetting.ts   |  67 +++
 .../modules/widgets/wQrcode/wQrcode.vue       |   2 +-
 src/mixins/methods/handlePaste.ts             |   5 +-
 src/pinia/design/canvas/index.ts              |  96 +++
 src/pinia/design/page/index.ts                |   8 +
 src/pinia/index.ts                            |   4 +-
 src/store/modules/design/actions.ts           |  34 +-
 src/store/modules/design/index.ts             |  80 +--
 src/store/modules/design/mutations.ts         |  22 +-
 src/store/pinia.ts                            |   0
 src/views/Index.vue                           |   7 +-
 src/views/Psd.vue                             |  10 +-
 20 files changed, 605 insertions(+), 349 deletions(-)
 create mode 100644 src/components/modules/widgets/wImage/wImageSetting.ts
 create mode 100644 src/pinia/design/canvas/index.ts
 delete mode 100644 src/store/pinia.ts

diff --git a/src/components/business/save-download/CreateCover.vue b/src/components/business/save-download/CreateCover.vue
index a08dd7a..e6b0234 100644
--- a/src/components/business/save-download/CreateCover.vue
+++ b/src/components/business/save-download/CreateCover.vue
@@ -13,11 +13,15 @@
 import { useStore } from 'vuex'
 import html2canvas from 'html2canvas'
 import Qiniu from '@/common/methods/QiNiu'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia';
+import { useCanvasStore } from '@/pinia';
 
 const store = useStore();
 
-const { dZoom } = useSetupMapGetters(['dZoom'])
+// const { dZoom } = useSetupMapGetters(['dZoom'])
+const canvasStore = useCanvasStore()
+const { dZoom } = storeToRefs(canvasStore)
 
 
 // props: ['modelValue'], 
@@ -29,7 +33,8 @@ async function createCover(cb: any) {
   store.dispatch('selectWidget', {
     uuid: '-1',
   })
-  store.dispatch('updateZoom', 100)
+  canvasStore.updateZoom(100)
+  // store.dispatch('updateZoom', 100)
 
   const opts = {
     useCORS: true, // 跨域图片
@@ -51,7 +56,8 @@ async function createCover(cb: any) {
         'image/jpeg',
         0.15,
       )
-      store.dispatch('updateZoom', nowZoom)
+      canvasStore.updateZoom(nowZoom)
+      // store.dispatch('updateZoom', nowZoom)
       clonePage.remove()
     })
   }, 10)
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 2403dcc..d9cd711 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -70,7 +70,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore } from '@/pinia'
+import { useCanvasStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 // 页面设计组件
 type TProps = {
@@ -92,11 +92,12 @@ type TSetting = {
 const store = useStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
-  dPaddingTop, dZoom, dScreen, dWidgets,
+  dWidgets,
   dActiveElement, dSelectWidgets, dAltDown, dDraging,
   dHoverUuid, showRotatable
-} = useSetupMapGetters(['dPaddingTop', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
 const { dPage } = storeToRefs(usePageStore())
+const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
 
 
 let _dropIn: string | null = ''
@@ -188,24 +189,24 @@ async function drop(e: MouseEvent) {
       }
     })
     const half = {
-      x: parent.width ? (parent.width * store.getters.dZoom) / 100 / 2 : 0,
-      y: parent.height ? (parent.height * store.getters.dZoom) / 100 / 2 : 0
+      x: parent.width ? (parent.width * dZoom.value) / 100 / 2 : 0,
+      y: parent.height ? (parent.height * dZoom.value) / 100 / 2 : 0
     }
     componentItem.forEach((element) => {
-      element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
-      element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+      element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
+      element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
     })
     store.dispatch('addGroup', componentItem)
     // addGroup(item)
   }
   // 设置坐标
   const half = { 
-    x: setting.width ? (setting.width * store.getters.dZoom) / 100 / 2 : 0,
-    y: setting.height ? (setting.height * store.getters.dZoom) / 100 / 2 : 0
+    x: setting.width ? (setting.width * dZoom.value) / 100 / 2 : 0,
+    y: setting.height ? (setting.height * dZoom.value) / 100 / 2 : 0
   }
   // const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
-  setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
-  setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+  setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
+  setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
   if (lost && type === 'image') {
     // 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
     const target = await getTarget(eventTarget)
diff --git a/src/components/modules/layout/lineGuides.vue b/src/components/modules/layout/lineGuides.vue
index fd399e3..5f88cc3 100644
--- a/src/components/modules/layout/lineGuides.vue
+++ b/src/components/modules/layout/lineGuides.vue
@@ -13,6 +13,7 @@
 import { watch } from 'vue'
 import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
+import { useCanvasStore } from '@/pinia';
 
 type TProps = {
   show: boolean
@@ -35,6 +36,7 @@ const props = withDefaults(defineProps<TProps>(), {
 })
 
 const store = useStore()
+const canvasStore = useCanvasStore()
 const container = 'page-design' // page-design out-page
 let guidesTop: TGuidesData | null = null
 let guidesLeft: TGuidesData | null = null
@@ -47,7 +49,7 @@ watch(
 )
 
 watch(
-  () => store.getters.dZoom,
+  () => canvasStore.dZoom,
   () => {
     changeScroll()
   },
@@ -113,7 +115,7 @@ function render() {
 
 function changeScroll() {
   if (guidesTop && guidesLeft) {
-    const zoom = store.getters.dZoom / 100
+    const zoom = canvasStore.dZoom / 100
     guidesTop.zoom = zoom
     guidesLeft.zoom = zoom
     if (zoom < 0.9) {
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index deb318a..5ff3161 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -27,7 +27,7 @@ import { OtherList, TZoomData, ZoomList } from './data';
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { usePageStore } from '@/pinia';
+import { useCanvasStore, usePageStore } from '@/pinia';
 
 const route = useRoute()
 const store = useStore()
@@ -48,8 +48,10 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dScreen', 'zoomScreenChange', 'dZoom'])
+const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
+const canvasStore = useCanvasStore()
 const { dPage } = storeToRefs(usePageStore())
+const { dZoom, dScreen } = storeToRefs(canvasStore)
 
 
 watch(
@@ -79,7 +81,8 @@ watch(
     if (realValue === -1) {
       realValue = calcZoom()
     }
-    store.dispatch('updateZoom', realValue)
+    canvasStore.updateZoom(realValue)
+    // store.dispatch('updateZoom', realValue)
     // updateZoom(realValue)
     autoFixTop()
   }
@@ -152,7 +155,8 @@ function changeScreen() {
 function screenChange() {
   // 弹性尺寸即时修改
   if (activezoomIndex.value === zoomList.value.length - 1) {
-    store.dispatch('updateZoom', calcZoom())
+    canvasStore.updateZoom(calcZoom())
+    // store.dispatch('updateZoom', calcZoom())
     // this.updateZoom(this.calcZoom())
     autoFixTop()
   }
@@ -221,7 +225,8 @@ function sub() {
 function mousewheelZoom(down: boolean) {
   const value = Number(dZoom.value.toFixed(0))
   if (down && value <= 1) return
-  store.dispatch('updateZoom', down ? value - 1 : value + 1)
+  canvasStore.updateZoom(down ? value - 1 : value + 1)
+  // store.dispatch('updateZoom', down ? value - 1 : value + 1)
   // updateZoom(down ? value - 1 : value + 1)
   zoom.value.text = (value + '%') as any
   autoFixTop()
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 9f1e3bc..bd0e4f9 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -41,7 +41,8 @@
 <script lang="ts" setup>
 import { reactive, toRefs, onMounted } from 'vue'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -187,7 +188,7 @@ async function selectItem(item: TGetListData) {
   }
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
   // this.$store.commit('setShowMoveable', false)
-  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImage.setting))
+  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
 
   setting.width = img.width
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 74111c6..3ef21cf 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -28,7 +28,8 @@
 // 图片列表
 // const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -81,7 +82,7 @@ onMounted(async () => {
 const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wImage.setting))
+  let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item) // await getImage(item.url)
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 4ade061..7c3652e 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/src/components/modules/panel/wrap/UserWrap.vue
@@ -42,7 +42,8 @@ import { useRouter } from 'vue-router'
 import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
-import wImage from '../../widgets/wImage/wImage.vue'
+// import wImage from '../../widgets/wImage/wImage.vue'
+import wImageSetting from '../../widgets/wImage/wImageSetting'
 import setImageData, { TItem2DataParam } from '@/common/methods/DesignFeatures/setImage'
 import useConfirm from '@/common/methods/confirm'
 import { TGetImageListResult, TMyPhotoResult } from '@/api/material'
@@ -162,7 +163,7 @@ onMounted(() => {
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
   store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  let setting = JSON.parse(JSON.stringify(wImage.setting))
+  let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue
index 5af7235..2391f44 100644
--- a/src/components/modules/widgets/wImage/wImage.vue
+++ b/src/components/modules/widgets/wImage/wImage.vue
@@ -1,10 +1,10 @@
 <template>
   <div
     :id="params.uuid"
-    ref="widget"
+    ref="widgetRef"
     :class="['w-image', { 'layer-lock': params.lock }]"
     :style="{
-      position,
+      position: state.position,
       left: params.left - parent.left + 'px',
       top: params.top - parent.top + 'px',
       width: params.width + 'px',
@@ -12,12 +12,18 @@
       opacity: params.opacity,
     }"
   >
-    <div v-if="cropEdit" :ref="params.uuid + '_ebox'" :style="editBoxStyle" class="svg__edit__wrap">
+    <div
+      v-if="cropEdit"
+      :id="params.uuid + '_ebox'"
+      :ref="params.uuid + '_ebox'"
+      :style="state.editBoxStyle"
+      class="svg__edit__wrap"
+    >
       <img class="edit__model" :src="params.imgUrl" />
     </div>
     <div :style="{ transform: params.flip ? `rotate${params.flip}(180deg)` : undefined, borderRadius: params.radius + 'px', '-webkit-mask-image': `${params.mask ? `url('${params.mask}')` : undefined}` }" :class="['img__box', { mask: params.mask }]">
-      <div v-if="params.isNinePatch" ref="target" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
-      <img v-else ref="target" class="target" style="transform-origin: center" :src="params.imgUrl" />
+      <div v-if="params.isNinePatch" ref="targetRef" class="target" :style="{ border: `${(params.height * params.sliceData.ratio) / 2}px solid transparent`, borderImage: `url('${params.imgUrl}') ${params.sliceData.left} round` }"></div>
+      <img v-else ref="targetRef" class="target" style="transform-origin: center" :src="params.imgUrl" />
     </div>
     <div v-if="isMask" class="drop__mask">
       <div putIn="true" :style="{ fontSize: params.width / 12 + 'px' }" class="drop__btn">拖入</div>
@@ -25,254 +31,304 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件
-const NAME = 'w-image'
-
-import { mapGetters, mapActions } from 'vuex'
+// const NAME = 'w-image'
+import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
+import { mapGetters, mapActions, useStore } from 'vuex'
 import { getMatrix } from '@/common/methods/handleTransform'
+import setting from "./wImageSetting"
 import PointImg from '@/utils/plugins/pointImg'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useRoute } from 'vue-router'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore } from '@/pinia'
 
-export default {
-  name: NAME,
-  setting: {
-    name: '图片',
-    type: NAME,
-    uuid: -1,
-    width: 300,
-    height: 300,
+type TProps = {
+  params: typeof setting
+  parent: {
+    left: number
+    top: number
+  }
+}
+
+type TState = {
+  position: 'absolute' | 'relative', // 'absolute'relative
+  editBoxStyle: CSSProperties,
+  cropWidgetXY: {
+    x: number
+    y: number
+  }
+  holdPosition: {
+    left: number
+    top: number
+  }
+}
+
+const props = defineProps<TProps>()
+const state = reactive<TState>({
+  position: 'absolute', // 'absolute'relative
+  editBoxStyle: {
+    transformOrigin: 'center',
+    transform: '',
+  },
+  cropWidgetXY: {
+    x: 0,
+    y: 0,
+  },
+  holdPosition: {
     left: 0,
     top: 0,
-    zoom: 1,
-    transform: '',
-    radius: 0,
-    opacity: 1,
-    parent: '-1',
-    imgUrl: '',
-    mask: '',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-      dir: 'all',
-    },
-  },
-  props: ['params', 'parent'],
-  data() {
-    return {
-      position: 'absolute', // 'absolute'relative
-      editBoxStyle: {
-        transformOrigin: 'center',
-        transform: '',
-      },
-    }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
-    cropEdit() {
-      return this.params.uuid === this.dCropUuid
-    },
-    tZoom() {
-      return this.params.zoom
-    },
-    isMask() {
-      return this.params.mask && this.dDropOverUuid === this.params.uuid
-    },
-    isDraw() {
-      return this.$route.name === 'Draw'
-    },
-  },
-  watch: {
-    cropEdit(val) {
-      // TODO 移动事件绑定
-      if (val) {
-        document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
-      } else {
-        document.getElementById(this.params.uuid).removeEventListener('mousedown', this.touchstart, false)
-      }
-      this.fixRotate()
-      this.lockOthers()
-    },
-    async tZoom() {
-      await this.$nextTick()
-      this.updateRecord()
-    },
-  },
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
+  }
+})
+const route = useRoute()
+const store = useStore()
+const widgetRef = ref<HTMLElement | null>(null)
+const targetRef = ref<HTMLImageElement | null>(null)
 
-  async mounted() {
-    this.updateRecord()
-    await this.$nextTick()
-    document.addEventListener('mouseup', this.touchend, false)
-    // if (this.params.transformData) {
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-    //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
-    // } else {
-    //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
-    //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-    // }
-    // console.log(this.params, this.params.filter)
-    // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
-    this.$refs.widget.style.transform += this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
-  },
-  beforeUnmount() {
-    document.removeEventListener('mouseup', this.touchend, false)
-  },
-  methods: {
-    ...mapActions(['updateWidgetData']),
-    touchstart(e) {
-      const editBox = this.$refs[this.params.uuid + '_ebox']
-      this.cropWidgetXY = {
-        x: Number(editBox.style.left.replace('px', '')) || 0,
-        y: Number(editBox.style.top.replace('px', '')) || 0,
-      }
-      // 绑定鼠标移动事件
-      document.addEventListener('mousemove', this.handlemousemove, true)
-    },
-    touchend() {
-      // 取消鼠标移动事件
-      document.removeEventListener('mousemove', this.handlemousemove, true)
-      // const left = Number(this.editBoxStyle.left.replace('px', ''))
-      // const flow = (this.params.width * (1 - this.tZoom)) / 2
-      // if (left + flow < 0) {
-      // }
-    },
-    handlemousemove(e) {
-      if (!this.move(e)) {
-        return
-      }
-      e && e.stopPropagation()
-      e && e.preventDefault()
-      const { left, top } = this.move(e)
-      // TODO 触发位置刷新
-      this.holdPosition = { left, top }
-      this.editBoxStyle.left = left + 'px'
-      this.editBoxStyle.top = top + 'px'
-      this.changeFinish(left / this.params.zoom, top / this.params.zoom)
-    },
-    changeFinish(x, y) {
-      this.setTransform('translate', `${x}px, ${y}px`)
-    },
-    move(payload) {
-      if (payload) {
-        const widgetXY = { x: this.cropWidgetXY.x, y: this.cropWidgetXY.y }
-        const dx = Number(payload.pageX) - this.dMouseXY.x
-        const dy = Number(payload.pageY) - this.dMouseXY.y
-        let left = Number(widgetXY.x) + Math.floor((dx * 100) / this.dZoom)
-        let top = Number(widgetXY.y) + Math.floor((dy * 100) / this.dZoom)
-        // TODO: 旋转后计算坐标
-        // const rotate = Number(this.params.rotate.replace('deg', ''))
-        // console.log(Math.sin(rotate), Math.cos(rotate))
-        return { left, top }
-      } else {
-        return this.holdPosition
-      }
-    },
-    updateRecord() {
-      if (this.dActiveElement.uuid === this.params.uuid) {
-        let record = this.dActiveElement.record
-        record.width = this.$refs.widget.offsetWidth
-        record.height = this.$refs.widget.offsetHeight
-      }
-      this.updateZoom()
-      // 获取点位
-      if (!this.isDraw) {
-        const read = new PointImg(this.$refs.target)
-      }
-    },
-    setTransform(attrName, value) {
-      const iof = this.params.transform.indexOf(attrName)
-      let setValue = ''
-      if (iof != -1) {
-        const index = iof + attrName.length
-        const tf = this.params.transform
-        const FRONT = tf.slice(0, index + 1)
-        const half = tf.substring(index + 1)
-        const END = half.substring(half.indexOf(')'))
-        setValue = FRONT + value + END
-      } else {
-        setValue = this.params.transform + ` ${attrName}(${value})`
-      }
-      this.updateWidgetData({
-        uuid: this.params.uuid,
-        key: 'transform',
-        value: setValue,
-        pushHistory: false,
-      })
-      this.params.transform && (this.$refs.target.style.transform = this.params.transform)
-    },
-    setEditBox(attrName, value) {
-      const iof = this.editBoxStyle.transform.indexOf(attrName)
-      let setValue = ''
-      if (iof != -1) {
-        const index = iof + attrName.length
-        const tf = this.editBoxStyle.transform
-        const FRONT = tf.slice(0, index + 1)
-        const half = tf.substring(index + 1)
-        const END = half.substring(half.indexOf(')'))
-        setValue = FRONT + value + END
-      } else {
-        setValue = this.editBoxStyle.transform + ` ${attrName}(${value})`
-      }
-      this.editBoxStyle.transform = setValue
-    },
-    updateZoom() {
-      this.setEditBox('scale', this.params.zoom)
-      this.setTransform('scale', this.params.zoom)
-      // this.$refs.target.style.transform = this.params.transform
-      this.handlemousemove()
-    },
-    fixRotate() {
-      // 裁切时修正角度
-      if (this.rotateTemp) {
-        this.$refs.widget.style.transform = `rotate(${this.rotateTemp})`
-        this.params.flip = this.flipTemp
-        this.rotateTemp = null
-      } else {
-        this.rotateTemp = this.params.rotate
-        this.$refs.widget.style.transform = `rotate(0deg)`
-        this.flipTemp = this.params.flip
-        this.params.flip = null
-      }
-      this.$store.commit('setShowMoveable', false)
-      setTimeout(() => {
-        this.$store.commit('setShowMoveable', true)
-      }, 100)
-    },
-    lockOthers() {
-      // 裁剪时锁定其他图层
-      if (this.locksTemp && this.locksTemp.length > 0) {
-        for (let i = 0; i < this.locksTemp.length; i++) {
-          this.dWidgets[i].lock = this.locksTemp[i]
-        }
-        this.locksTemp = []
-      } else {
-        this.locksTemp = []
-        for (const widget of this.dWidgets) {
-          this.locksTemp.push(widget.lock)
-        }
-        this.dWidgets.forEach((widget) => {
-          widget.uuid != this.params.uuid && (widget.lock = true)
-        })
-      }
-    },
-    // cropDone(e) {
-    //   e.stopPropagation()
-    //   e.preventDefault()
-    //   this.updateWidgetData({
-    //     uuid: this.params.uuid,
-    //     key: 'cropEdit',
-    //     value: false,
-    //     pushHistory: false,
-    //   })
-    // },
-  },
+let rotateTemp: number | null = null
+let flipTemp: string | null = null
+let locksTemp: string[] | null = null
+
+const {
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+const { dZoom } = storeToRefs(useCanvasStore())
+
+// ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
+const cropEdit = computed(() => {
+  return props.params.uuid === dCropUuid.value
+})
+const tZoom = computed(() => {
+  return props.params.zoom
+})
+const isMask = computed(() => {
+  return props.params.mask && dDropOverUuid.value === props.params.uuid
+})
+const isDraw = computed(() => {
+  return route.name === 'Draw'
+})
+
+watch(
+  () => cropEdit.value,
+  (val) => {
+    // TODO 移动事件绑定
+    const el = document.getElementById(`${props.params.uuid}`)
+    if (val) {
+      el?.addEventListener('mousedown', touchstart, false)
+    } else {
+      el?.removeEventListener('mousedown', touchstart, false)
+    }
+    fixRotate()
+    lockOthers()
+  }
+)
+
+watch(
+  () => tZoom.value,
+  async () => {
+    await nextTick()
+    updateRecord()
+  }
+)
+
+onUpdated(() => {
+  updateRecord()
+  store.commit('updateRect')
+})
+
+onMounted(async () => {
+  updateRecord()
+  await nextTick()
+  document.addEventListener('mouseup', touchend, false)
+  // if (this.params.transformData) {
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+  //   this.$refs.widget.style.transform += `matrix(${String(getMatrix(this.params.transformData))})`
+  // } else {
+  //   // this.$refs.widget.style.transform += `scale(${this.params.transformData.a}, ${this.params.transformData.d})`
+  //   this.params.rotate && (this.$refs.widget.style.transform += `rotate(${this.params.rotate})`)
+  // }
+  // console.log(this.params, this.params.filter)
+  // this.$refs.widget.style.filter = 'hue-rotate(100deg) blur(50px)'
+  if (widgetRef.value) {
+    widgetRef.value.style.transform += props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
+  }
+})
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mouseup', touchend, false)
+})
+
+// ...mapActions(['updateWidgetData']),
+function touchstart(e: MouseEvent) {
+  // const editBox = this.$refs[props.params.uuid + '_ebox']
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
+  state.cropWidgetXY = {
+    x: Number(editBox?.style.left.replace('px', '')) || 0,
+    y: Number(editBox?.style.top.replace('px', '')) || 0,
+  }
+  // 绑定鼠标移动事件
+  document.addEventListener('mousemove', handlemousemove, true)
 }
+
+/** 取消鼠标移动事件 */
+function touchend() {
+  document.removeEventListener('mousemove', handlemousemove, true)
+  // const left = Number(this.editBoxStyle.left.replace('px', ''))
+  // const flow = (this.params.width * (1 - this.tZoom)) / 2
+  // if (left + flow < 0) {
+  // }
+}
+
+function handlemousemove(e?: MouseEvent) {
+  if (!move(e)) {
+    return
+  }
+  e && e.stopPropagation()
+  e && e.preventDefault()
+  const { left, top } = move(e)
+  // TODO 触发位置刷新
+  state.holdPosition = { left, top }
+  state.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.top = top + 'px'
+  changeFinish(left / props.params.zoom, top / props.params.zoom)
+}
+
+function changeFinish(x: number, y: number) {
+  setTransform('translate', `${x}px, ${y}px`)
+}
+
+function move(payload?: MouseEvent) {
+  if (payload) {
+    const widgetXY = { x: state.cropWidgetXY.x, y: state.cropWidgetXY.y }
+    const dx = Number(payload.pageX) - dMouseXY.value.x
+    const dy = Number(payload.pageY) - dMouseXY.value.y
+    let left = Number(widgetXY.x) + Math.floor((dx * 100) / dZoom.value)
+    let top = Number(widgetXY.y) + Math.floor((dy * 100) / dZoom.value)
+    // TODO: 旋转后计算坐标
+    // const rotate = Number(this.params.rotate.replace('deg', ''))
+    // console.log(Math.sin(rotate), Math.cos(rotate))
+    return { left, top }
+  } else {
+    return state.holdPosition
+  }
+}
+
+function updateRecord() {
+  if (dActiveElement.value.uuid === props.params.uuid) {
+    let record = dActiveElement.value.record
+    if (widgetRef.value) {
+      record.width = widgetRef.value.offsetWidth
+      record.height = widgetRef.value.offsetHeight
+    }
+  }
+  updateZoom()
+  // 获取点位
+  if (!isDraw.value) {
+    if (targetRef.value) {
+      const read = new PointImg(targetRef.value)
+    }
+  }
+}
+
+function setTransform(attrName: string, value: string | number) {
+  const iof = props.params.transform.indexOf(attrName)
+  let setValue = ''
+  if (iof != -1) {
+    const index = iof + attrName.length
+    const tf = props.params.transform
+    const FRONT = tf.slice(0, index + 1)
+    const half = tf.substring(index + 1)
+    const END = half.substring(half.indexOf(')'))
+    setValue = FRONT + value + END
+  } else {
+    setValue = props.params.transform + ` ${attrName}(${value})`
+  }
+  store.dispatch("updateWidgetData", {
+    uuid: props.params.uuid,
+    key: 'transform',
+    value: setValue,
+    pushHistory: false,
+  })
+  // updateWidgetData({
+  //   uuid: this.params.uuid,
+  //   key: 'transform',
+  //   value: setValue,
+  //   pushHistory: false,
+  // })
+  if (props.params.transform && targetRef.value) {
+    targetRef.value.style.transform = props.params.transform
+  }
+}
+
+function setEditBox(attrName: string, value: string | number) {
+  const iof = state.editBoxStyle.transform?.indexOf(attrName)
+  let setValue = ''
+  if (iof != -1 && iof != undefined) {
+    const index = iof + attrName.length
+    const tf = state.editBoxStyle.transform ?? ''
+    const FRONT = tf.slice(0, index + 1)
+    const half = tf.substring(index + 1)
+    const END = half.substring(half.indexOf(')'))
+    setValue = FRONT + value + END
+  } else {
+    setValue = state.editBoxStyle.transform + ` ${attrName}(${value})`
+  }
+  state.editBoxStyle.transform = setValue
+}
+
+function updateZoom() {
+  setEditBox('scale', props.params.zoom)
+  setTransform('scale', props.params.zoom)
+  // this.$refs.target.style.transform = this.params.transform
+  handlemousemove()
+}
+
+function fixRotate() {
+  // 裁切时修正角度
+  if (rotateTemp) {
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(${rotateTemp})`)
+    props.params.flip = flipTemp
+    rotateTemp = null
+  } else {
+    rotateTemp = props.params.rotate
+    widgetRef.value && (widgetRef.value.style.transform = `rotate(0deg)`)
+    flipTemp = props.params.flip
+    props.params.flip = null
+  }
+  store.commit('setShowMoveable', false)
+  setTimeout(() => {
+    store.commit('setShowMoveable', true)
+  }, 100)
+}
+
+function lockOthers() {
+  // 裁剪时锁定其他图层
+  if (locksTemp && locksTemp.length > 0) {
+    for (let i = 0; i < locksTemp.length; i++) {
+      dWidgets.value[i].lock = locksTemp[i]
+    }
+    locksTemp = []
+  } else {
+    locksTemp = []
+    for (const widget of dWidgets.value) {
+      locksTemp.push(widget.lock)
+    }
+    dWidgets.value.forEach((widget: any) => {
+      widget.uuid != props.params.uuid && (widget.lock = true)
+    })
+  }
+}
+// cropDone(e) {
+//   e.stopPropagation()
+//   e.preventDefault()
+//   this.updateWidgetData({
+//     uuid: this.params.uuid,
+//     key: 'cropEdit',
+//     value: false,
+//     pushHistory: false,
+//   })
+// },
 </script>
 
 <style lang="less" scoped>
diff --git a/src/components/modules/widgets/wImage/wImageSetting.ts b/src/components/modules/widgets/wImage/wImageSetting.ts
new file mode 100644
index 0000000..55d8f26
--- /dev/null
+++ b/src/components/modules/widgets/wImage/wImageSetting.ts
@@ -0,0 +1,67 @@
+export type TImageSetting = {
+  name: string
+  type: string
+  uuid: string
+  width: number
+  height: number
+  left: number
+  top: number
+  zoom: number
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  imgUrl: string
+  mask: string
+  setting: [],
+  rotate: number
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+    dir: string
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: string | null
+  sliceData: {
+    ratio: number
+    left: number
+  }
+}
+
+const setting: TImageSetting = {
+  name: '图片',
+  type: 'w-image',
+  uuid: '-1',
+  width: 300,
+  height: 300,
+  left: 0,
+  top: 0,
+  zoom: 1,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  imgUrl: '',
+  mask: '',
+  setting: [],
+  rotate: 0,
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+    dir: 'all',
+  },
+  lock: false,
+  isNinePatch: false,
+  flip: '',
+  sliceData: {
+    ratio: 0,
+    left: 0,
+  }
+}
+
+export default setting
diff --git a/src/components/modules/widgets/wQrcode/wQrcode.vue b/src/components/modules/widgets/wQrcode/wQrcode.vue
index 8ae37a1..e9396a6 100644
--- a/src/components/modules/widgets/wQrcode/wQrcode.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcode.vue
@@ -62,7 +62,7 @@ const props = defineProps<TProps>()
 const state = reactive<TState>({
   qrCodeOptions: {}
 })
-const { dActiveElement, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
+const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
 const width = computed(() => Number(props.params.width))
 const widgetRef = ref<HTMLElement | null>(null)
 
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index 4c76f02..c3fda90 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -16,7 +16,8 @@ import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
 import { getImage } from '@/common/methods/getImgDetail'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
 import { usePageStore } from '@/pinia'
@@ -45,7 +46,7 @@ export default () => {
             eventBus.emit('refreshUserImages')
             // 添加图片到画布中
             store.commit('setShowMoveable', false) // 清理掉上一次的选择
-            const setting = JSON.parse(JSON.stringify(wImage.setting))
+            const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
             setting.imgUrl = url
diff --git a/src/pinia/design/canvas/index.ts b/src/pinia/design/canvas/index.ts
new file mode 100644
index 0000000..a092089
--- /dev/null
+++ b/src/pinia/design/canvas/index.ts
@@ -0,0 +1,96 @@
+
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: 画布全局配置
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { defineStore } from 'pinia'
+
+type TScreeData = {
+  /** 记录编辑界面的宽度 */
+  width: number
+  /** 记录编辑界面的高度 */
+  height: number
+}
+
+type TGuidelinesData = {
+  verticalGuidelines: number[]
+  horizontalGuidelines: number[]
+}
+
+type TCanvasStore = {
+  /** 画布缩放百分比 */
+  dZoom: number
+  /** 画布垂直居中修正值 */
+  dPaddingTop: number
+  /** 编辑界面 */
+  dScreen: TScreeData
+  /** 标尺辅助线 */
+  guidelines: TGuidelinesData
+}
+
+type TStoreGetter = {
+  dZoom: (state: TCanvasStore) => number
+  dPaddingTop: (state: TCanvasStore) => number
+  dScreen: (state: TCanvasStore) => TScreeData
+  guidelines: (state: TCanvasStore) => TGuidelinesData
+}
+
+type TStoreAction = {
+  /** 更新画布缩放百分比 */
+  updateZoom: (zoom: number) => void
+  /** 更新画布垂直居中修正值 */
+  updatePaddingTop: (num: number) => void
+  /** 更新编辑界面的宽高 */
+  updateScreen: (data: TScreeData) => void
+  /** 修改标尺线 */
+  updateGuidelines: (lines: TGuidelinesData) => void
+}
+
+export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreAction>("canvasStore", {
+  state: () => ({
+    dZoom: 0, // 画布缩放百分比
+    dPaddingTop: 0, // 画布垂直居中修正值
+    dScreen: {
+      width: 0, // 记录编辑界面的宽度
+      height: 0, // 记录编辑界面的高度
+    },
+    // gridSize: {
+    //   width: 0, // 网格小格子的宽度
+    //   height: 0, // 网格小格子的高度
+    // },
+    guidelines: {
+      // moveable 标尺辅助线
+      verticalGuidelines: [],
+      horizontalGuidelines: [],
+    },
+  }),
+  getters: {
+    dZoom: state => state.dZoom,
+    dPaddingTop: state => state.dPaddingTop,
+    dScreen: state => state.dScreen,
+    guidelines: state => state.guidelines
+  },
+  actions: {
+    /** 更新画布缩放百分比 */
+    updateZoom(zoom: number) {
+      this.dZoom = zoom
+    },
+    /** 更新画布垂直居中修正值 */
+    updatePaddingTop(num: number) {
+      this.dPaddingTop = num
+    },
+    /** 更新编辑界面的宽高 */
+    updateScreen({ width, height }: TScreeData) {
+      this.dScreen.width = width
+      this.dScreen.height = height
+    },
+    /** 修改标尺线 */
+    updateGuidelines(lines: TGuidelinesData) {
+      this.guidelines = { ...this.guidelines, ...lines }
+    }
+  }
+})
diff --git a/src/pinia/design/page/index.ts b/src/pinia/design/page/index.ts
index 885486a..d071cb7 100644
--- a/src/pinia/design/page/index.ts
+++ b/src/pinia/design/page/index.ts
@@ -1,3 +1,11 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Page全局配置
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
 import { defineStore } from 'pinia'
 
 export type TPageStore = {
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index a4ff458..d9aee5f 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -8,10 +8,12 @@
 
 import useBaseStore from "./base";
 import useUserStore from "./base/user";
-import usePageStore from "./design/page/index"
+import usePageStore from "./design/page"
+import useCanvasStore from "./design/canvas"
 
 export {
   useBaseStore,
   useUserStore,
   usePageStore,
+  useCanvasStore,
 }
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
index f267e7c..90dffd1 100644
--- a/src/store/modules/design/actions.ts
+++ b/src/store/modules/design/actions.ts
@@ -23,25 +23,29 @@ export default {
     // 激活组件默认为page
     store.state.dActiveElement = store.state.dPage
   },
-  updateZoom(store, zoom) {
-    store.state.dZoom = zoom
-  },
-  updateScreen(store, { width, height }) {
-    store.state.dScreen.width = width
-    store.state.dScreen.height = height
-  },
+  
+  // updateZoom(store, zoom) {
+  //   store.state.dZoom = zoom
+  // },
+  // updateScreen(store, { width, height }) {
+  //   store.state.dScreen.width = width
+  //   store.state.dScreen.height = height
+  // },
+
   // updateGridSize(store, { width, height }) {
   //   store.state.gridSize.width = width
   //   store.state.gridSize.height = height
   // },
-  updatePageData(store, { key, value, pushHistory }) {
-    const page = store.state.dPage
-    if (page[key] !== value || pushHistory) {
-      page[key] = value
-      // 画布修改先不压入历史栈，因为替换模板后会重复压栈
-      // store.dispatch('pushHistory', 'updatePageData')
-    }
-  },
+
+  // updatePageData(store, { key, value, pushHistory }) {
+  //   const page = store.state.dPage
+  //   if (page[key] !== value || pushHistory) {
+  //     page[key] = value
+  //     // 画布修改先不压入历史栈，因为替换模板后会重复压栈
+  //     // store.dispatch('pushHistory', 'updatePageData')
+  //   }
+  // },
+
   updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
     const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
     if (widget && (widget[key] !== value || pushHistory)) {
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index 9bcef04..502677e 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -2,12 +2,12 @@ import mutations from './mutations'
 import actions from './actions'
 const all = {
   state: {
-    dZoom: 0, // 画布缩放百分比
-    dPaddingTop: 0, // 画布垂直居中修正值
-    dScreen: {
-      width: 0, // 记录编辑界面的宽度
-      height: 0, // 记录编辑界面的高度
-    },
+    // dZoom: 0, // 画布缩放百分比
+    // dPaddingTop: 0, // 画布垂直居中修正值
+    // dScreen: {
+    //   width: 0, // 记录编辑界面的宽度
+    //   height: 0, // 记录编辑界面的高度
+    // },
     // gridSize: {
     //   width: 0, // 网格小格子的宽度
     //   height: 0, // 网格小格子的高度
@@ -38,28 +38,28 @@ const all = {
     dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
     dHoverUuid: '-1', // 鼠标在这个图层上
     dDropOverUuid: '', // 拖动时放在哪个图层上
-    dPage: {
-      name: '背景页面',
-      type: 'page',
-      uuid: '-1',
-      left: 0,
-      top: 0,
-      width: 1920, // 画布宽度
-      height: 1080, // 画布高度
-      backgroundColor: '#ffffff', // 画布背景颜色
-      backgroundImage: '', // 画布背景图片
-      backgroundTransform: {},
-      opacity: 1, // 透明度
-      tag: 0, // 强制刷新用
-      setting: [
-        {
-          label: '背景颜色',
-          parentKey: 'backgroundColor',
-          value: false,
-        },
-      ],
-      record: {},
-    },
+    // dPage: {
+    //   name: '背景页面',
+    //   type: 'page',
+    //   uuid: '-1',
+    //   left: 0,
+    //   top: 0,
+    //   width: 1920, // 画布宽度
+    //   height: 1080, // 画布高度
+    //   backgroundColor: '#ffffff', // 画布背景颜色
+    //   backgroundImage: '', // 画布背景图片
+    //   backgroundTransform: {},
+    //   opacity: 1, // 透明度
+    //   tag: 0, // 强制刷新用
+    //   setting: [
+    //     {
+    //       label: '背景颜色',
+    //       parentKey: 'backgroundColor',
+    //       value: false,
+    //     },
+    //   ],
+    //   record: {},
+    // },
     dWidgets: [], // 已使用的组件
     dHistory: [], // 记录历史操作（保存整个画布的json数据）
     dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
@@ -87,15 +87,15 @@ const all = {
     selectItem(state: any) {
       return state.selectItem
     },
-    dZoom(state) {
-      return state.dZoom
-    },
-    dPaddingTop(state: any) {
-      return state.dPaddingTop
-    },
-    dScreen(state) {
-      return state.dScreen
-    },
+    // dZoom(state) {
+    //   return state.dZoom
+    // },
+    // dPaddingTop(state: any) {
+    //   return state.dPaddingTop
+    // },
+    // dScreen(state) {
+    //   return state.dScreen
+    // },
     // gridSize(state) {
     //   return state.gridSize
     // },
@@ -114,9 +114,9 @@ const all = {
     dActiveElement(state) {
       return state.dActiveElement
     },
-    dPage(state) {
-      return state.dPage
-    },
+    // dPage(state) {
+    //   return state.dPage
+    // },
     dWidgets(state) {
       return state.dWidgets
     },
diff --git a/src/store/modules/design/mutations.ts b/src/store/modules/design/mutations.ts
index 6f05307..da65409 100644
--- a/src/store/modules/design/mutations.ts
+++ b/src/store/modules/design/mutations.ts
@@ -13,9 +13,9 @@ interface Iprops {
   state: {}
 }
 export default {
-  updatePaddingTop(state: Type.Object, num: number) {
-    state.dPaddingTop = num
-  },
+  // updatePaddingTop(state: Type.Object, num: number) {
+  //   state.dPaddingTop = num
+  // },
   selectItem(state: Type.Object, { data, type }: any) {
     state.selectItem.data = data
     state.selectItem.type = type
@@ -36,9 +36,11 @@ export default {
   setDWidgets(state: Type.Object, e: any) {
     state.dWidgets = e
   },
-  setDPage(state: Type.Object, e: any) {
-    state.dPage = e
-  },
+
+  // setDPage(state: Type.Object, e: any) {
+  //   state.dPage = e
+  // },
+  
   setShowMoveable(state: Type.Object, show: any) {
     state.showMoveable = show
     // if (!show) {
@@ -61,10 +63,10 @@ export default {
     // 强制触发元素选择
     state.updateSelect = Math.random()
   },
-  updateGuidelines(state: Type.Object, lines: any) {
-    // 修改标尺线
-    state.guidelines = { ...state.guidelines, ...lines }
-  },
+  // updateGuidelines(state: Type.Object, lines: any) {
+  //   // 修改标尺线
+  //   state.guidelines = { ...state.guidelines, ...lines }
+  // },
   setCropUuid(state: Type.Object, uuid: any) {
     // 设置正在裁剪or编辑的组件
     state.dCropUuid = uuid
diff --git a/src/store/pinia.ts b/src/store/pinia.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/views/Index.vue b/src/views/Index.vue
index afcd63c..c5af0ce 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -74,7 +74,7 @@ import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useCanvasStore, usePageStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -96,9 +96,10 @@ const beforeUnload = function (e: Event): string {
 !_config.isDev && window.addEventListener('beforeunload', beforeUnload)
 
 const {
-  dActiveElement, dHistoryParams, dCopyElement, dZoom
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dZoom'])
+  dActiveElement, dHistoryParams, dCopyElement
+} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
 const { dPage } = storeToRefs(usePageStore())
+const { dZoom } = storeToRefs(useCanvasStore())
 
 
 const state = reactive<TState>({
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index dee59ea..233ddcf 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -61,7 +61,8 @@ import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import useLoading from '@/common/methods/loading'
 import uploader from '@/components/common/Uploader/index.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -72,7 +73,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { processPSD2Page } from '@/utils/plugins/psd'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { usePageStore } from '@/pinia'
+import { useCanvasStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -94,9 +95,10 @@ const state = reactive<TState>({
 const store = useStore()
 const route = useRoute()
 
-const { dZoom } = useSetupMapGetters(['dZoom'])
+// const { dZoom } = useSetupMapGetters(['dZoom'])
 const pageStore = usePageStore()
 const { dPage } = storeToRefs(pageStore)
+const { dZoom } = storeToRefs(useCanvasStore())
 
 const zoomControlRef = ref<typeof zoomControl | null>()
 
@@ -131,7 +133,7 @@ async function loadPSD(file: File) {
   setTimeout(async () => {
     const types: any = {
       text: wTextSetting,
-      image: wImage.setting,
+      image: wImageSetting,
     }
     for (let i = 0; i < data.clouds.length; i++) {
       const x: any = data.clouds[i]

From 048351e6984096d670ddc9a059f0eb692bd9e443 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 20 Mar 2024 19:09:19 +0000
Subject: [PATCH 08/23] feat: convert moveable to composition API

---
 src/components/business/moveable/Moveable.vue | 1023 +++++++++--------
 1 file changed, 558 insertions(+), 465 deletions(-)

diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index a87b12d..5c6b997 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -8,491 +8,584 @@
 <template>
   <div id="empty" class="moveable__remove-item zk-moveable-style"></div>
 </template>
-<script lang="ts">
-import { defineComponent, nextTick } from 'vue'
+<script lang="ts" setup>
+import { Events, defineComponent, nextTick, onMounted, watch } from 'vue'
 
-import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
+import Moveable, { EVENTS, OnRotate, WithEventStop } from 'moveable' // PROPERTIES, METHODS,
 import MoveableHelper from 'moveable-helper'
-import { mapGetters, mapActions } from 'vuex'
+import { mapGetters, mapActions, useStore } from 'vuex'
 // import { setTransformAttribute } from '@/common/methods/handleTransform'
 import useSelecto from './Selecto'
+import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore } from '@/pinia'
 
-export default defineComponent({
-  setup() {},
-  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
-  watch: {
-    async dActiveElement(val) {
-      if (!val.record) {
-        return
-      }
-      // 选中非面板 并且不是组合内的元素
-      if (val.uuid != -1) {
-        await nextTick()
-        const target = `[id="${val.uuid}"]`
-        this._target = `[id="${val.uuid}"]`
-        this.moveable.rotatable = true // 选择时会取消旋转
-        // 方向点位设置
-        // this.moveable.renderDirections = val.type === 'w-text' ? ['e', 'se'] : 'w-image' ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : ['nw', 'ne', 'sw', 'se']
-        switch (val.type) {
-          case 'w-text':
-            this.moveable.renderDirections = ['e', 'se']
-            break
-          case 'w-image':
-            this.moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
-            break
-          case 'w-svg':
-            this.moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
-            break
-          default:
-            this.moveable.renderDirections = ['nw', 'ne', 'sw', 'se']
-            break
-        }
-        // // Set Move Auto
-        this.moveable.setState({ target: this._target }, () => {
-          // 当出现mouseevent时进行即刻选中
-          if (this.activeMouseEvent) {
-            this.moveable.dragStart(this.activeMouseEvent)
-            // TODO 使用后销毁mouseevent
-            this.$store.commit('setMouseEvent', null)
-          }
-        })
-        // // End
-        this.$store.commit('setShowMoveable', true)
-        // 参考线设置
-        if (!this.moveable.elementGuidelines.includes(target)) {
-          this.moveable.elementGuidelines.push(target)
-        }
-      } else {
-        this.moveable.target = `[id="empty"]`
-        if (this.moveable.target !== `[id="empty"]`) {
-          setTimeout(() => {
-            this.moveable.target = `[id="empty"]`
-          }, 210)
-        }
-        // feature: 可以遍历来设置参考线，目前先粗暴清空
-        this.moveable.elementGuidelines.length = 0
-      }
-    },
-    showMoveable(val) {
-      if (val) {
-        this.moveable.target = this._target
-      } else {
-        this.moveable.target = `[id="empty"]`
-      }
-    },
-    showRotatable(val) {
-      // TODO: 这里是通过旋转来判断是否可以操作
-      this.moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
-      this.moveable.resizable = val
-      this.moveable.scalable = val
-      document.getElementsByClassName('moveable-rotation')[0].style.display = val ? 'block' : 'none'
-    },
-    updateRect(val) {
-      this.moveable.updateRect()
-    },
-    updateSelect() {
-      const items = this.$store.getters.dSelectWidgets
-      setTimeout(async () => {
-        this.moveable.updateRect()
-        await this.$nextTick()
-        for (let i = 0; i < items.length; i++) {
-          console.log(items[i].uuid)
+const {
+  dSelectWidgets, dActiveElement, activeMouseEvent,
+  showMoveable, showRotatable, dWidgets,
+  updateRect, updateSelect,
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
+const store = useStore()
+const { guidelines } = storeToRefs(useCanvasStore())
 
-          document.getElementById(items[i].uuid)?.classList.add('widget-selected')
-        }
-        this.moveable.renderDirections = []
-        this.moveable.rotatable = false
-        const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
-        console.log(targetCollector)
 
-        this.moveable.target = targetCollector
-        for (let i = 0; i < items.length; i++) {
-          document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
-        }
-      }, 400)
-    },
-    // 选择的元素
-    dSelectWidgets: {
-      handler(items) {
-        const alt = this.$store.getters.dAltDown
-        // if (items.length > 1) {
-        //   console.log('打开组合面板')
-        // }
-        if (alt) {
-          for (let i = 0; i < items.length; i++) {
-            document.getElementById(items[i].uuid)?.classList.add('widget-selected')
-          }
-          this.moveable.renderDirections = []
-          this.moveable.rotatable = false
-          const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
-          // this.moveable.target = `[id="empty"]`
-          this.moveable.target = targetCollector
-          for (let i = 0; i < items.length; i++) {
-            document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
-          }
-        }
-      },
-      deep: true,
-    },
-    // 标尺线
-    guidelines(lines) {
-      console.log(lines)
+// computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
+let _target: string = ""
+let moveable: Moveable | null = null 
+let holdPosition: { left: number, top: number } | null = null 
 
-      this.moveable.verticalGuidelines = lines.verticalGuidelines
-      this.moveable.horizontalGuidelines = lines.horizontalGuidelines
-    },
-  },
-  mounted() {
-    let holdGroupPosition: any = null
-    const moveableOptions: any = {
-      target: document.querySelector(`[id="empty"]`),
-      // container: document.querySelector('#page-design'),
-      zoom: 0.8,
-      draggable: true,
-      clippable: false, // 裁剪
-      throttleDrag: 0,
-      resizable: true,
-      throttleResize: 0,
-      scalable: false,
-      throttleScale: 0,
-      keepRatio: true,
-      rotatable: true,
-      throttleRotate: 0,
-      renderDirections: ['nw', 'ne', 'sw', 'se'], // ['nw', 'ne', 'sw', 'se'] // 'e'
-      pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
-      origin: false,
-      defaultGroupOrigin: '0% 0%',
-      // 样式相关
-      rotationPosition: 'bottom',
-      className: 'zk-moveable-style',
-      // -- 吸附对齐 Start --
-      snappable: true,
-      elementGuidelines: [],
-      verticalGuidelines: [],
-      horizontalGuidelines: [],
-      snapThreshold: 4,
-      isDisplaySnapDigit: true,
-      snapGap: false,
-      snapElement: true,
-      snapVertical: true,
-      snapHorizontal: true,
-      snapCenter: false,
-      snapDigit: 0,
 
-      // snapDirections={{"top":true,"right":true,"bottom":true,"left":true}}
-      //       elementSnapDirections={{}}
-      // -- END --
-      triggerAblesSimultaneously: true,
+let startHL: number = 0
+let startLS: number = 0
+let resetRatio: number = 0
+let resizeTempData: { width: number, height: number } | null = null
+
+watch(
+  () => dActiveElement.value,
+  async (val) => {
+    if (!val.record) {
+      return
     }
-    const moveable = new Moveable(document.body, moveableOptions)
-    this.moveable = moveable
+    if (!moveable) return
+    // 选中非面板 并且不是组合内的元素
+    if (val.uuid != -1) {
+      await nextTick()
+      const target = `[id="${val.uuid}"]`
+      _target = `[id="${val.uuid}"]`
+      moveable.rotatable = true // 选择时会取消旋转
+      // 方向点位设置
+      // this.moveable.renderDirections = val.type === 'w-text' ? ['e', 'se'] : 'w-image' ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : ['nw', 'ne', 'sw', 'se']
+      switch (val.type) {
+        case 'w-text':
+          moveable.renderDirections = ['e', 'se']
+          break
+        case 'w-image':
+          moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
+          break
+        case 'w-svg':
+          moveable.renderDirections = ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se']
+          break
+        default:
+          moveable.renderDirections = ['nw', 'ne', 'sw', 'se']
+          break
+      }
+      // // Set Move Auto
+      moveable.setState({ target: _target }, () => {
+        // 当出现mouseevent时进行即刻选中
+        if (activeMouseEvent.value) {
+          moveable?.dragStart(activeMouseEvent.value)
+          // TODO 使用后销毁mouseevent
+          store.commit('setMouseEvent', null)
+        }
+      })
+      // // End
+      store.commit('setShowMoveable', true)
+      // 参考线设置
+      if (!moveable.elementGuidelines?.includes(target)) {
+        moveable.elementGuidelines?.push(target)
+      }
+    } else {
+      moveable.target = `[id="empty"]`
+      if (moveable.target !== `[id="empty"]`) {
+        setTimeout(() => {
+          if (!moveable) return
+          moveable.target = `[id="empty"]`
+        }, 210)
+      }
+      // feature: 可以遍历来设置参考线，目前先粗暴清空
+      if (moveable.elementGuidelines) {
+        moveable.elementGuidelines.length = 0
+      }
+    }
+  }
+)
 
-    const helper: any = new MoveableHelper()
+watch(
+  () => showMoveable.value,
+  val => {
+    if (!moveable) return
+    if (val) {
+      moveable.target = _target
+    } else {
+      moveable.target = `[id="empty"]`
+    }
+  }
+)
 
-    EVENTS.forEach((event) => {
-      let helperEvent = event.replace(event[0], 'on' + event[0].toUpperCase())
-      // console.log(event)
-      // 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart
-      if (['resizeStart', 'rotate', 'resize'].includes(event)) {
-        moveable.on(event, (...args) => {
-          // this.$emit(event, ...args)
-          helper[helperEvent] && helper[helperEvent](...args)
+watch(
+  () => showRotatable.value,
+  val => {
+    // TODO: 这里是通过旋转来判断是否可以操作
+    if (!moveable) return
+
+    moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
+    moveable.resizable = val
+    moveable.scalable = val
+    const el = document.getElementsByClassName('moveable-rotation')[0] as HTMLElement
+    el.style.display = val ? 'block' : 'none'
+  }
+)
+
+watch(
+  () => updateRect.value,
+  () => {
+    moveable?.updateRect()
+  }
+)
+
+watch(
+  () => updateSelect.value,
+  () => {
+    const items = store.getters.dSelectWidgets
+    setTimeout(async () => {
+      if (!moveable) return
+      moveable.updateRect()
+      await nextTick()
+      for (let i = 0; i < items.length; i++) {
+        console.log(items[i].uuid)
+
+        document.getElementById(items[i].uuid)?.classList.add('widget-selected')
+      }
+      moveable.renderDirections = []
+      moveable.rotatable = false
+      const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
+      console.log(targetCollector)
+
+      moveable.target = targetCollector
+      for (let i = 0; i < items.length; i++) {
+        document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
+      }
+    }, 400)
+  }
+)
+
+/** 选择的元素 */
+watch(
+  () => dSelectWidgets.value,
+  (items) => {
+    if (!moveable) return
+    const alt = store.getters.dAltDown
+    // if (items.length > 1) {
+    //   console.log('打开组合面板')
+    // }
+    if (alt) {
+      for (let i = 0; i < items.length; i++) {
+        document.getElementById(items[i].uuid)?.classList.add('widget-selected')
+      }
+      moveable.renderDirections = []
+      moveable.rotatable = false
+      const targetCollector = [].slice.call(document.querySelectorAll('.widget-selected'))
+      // this.moveable.target = `[id="empty"]`
+      moveable.target = targetCollector
+      for (let i = 0; i < items.length; i++) {
+        document.getElementById(items[i].uuid)?.classList.remove('widget-selected')
+      }
+    }
+  },
+  { deep: true }
+)
+
+/** 标尺线 */
+watch(
+  () => guidelines.value,
+  (lines) => {
+    if (!moveable) return
+    console.log(lines)
+    moveable.verticalGuidelines = lines.verticalGuidelines
+    moveable.horizontalGuidelines = lines.horizontalGuidelines
+  }
+)
+
+onMounted(() => {
+  let holdGroupPosition: Record<string, any> | null = null
+  const moveableOptions: any = {
+    target: document.querySelector(`[id="empty"]`),
+    // container: document.querySelector('#page-design'),
+    zoom: 0.8,
+    draggable: true,
+    clippable: false, // 裁剪
+    throttleDrag: 0,
+    resizable: true,
+    throttleResize: 0,
+    scalable: false,
+    throttleScale: 0,
+    keepRatio: true,
+    rotatable: true,
+    throttleRotate: 0,
+    renderDirections: ['nw', 'ne', 'sw', 'se'], // ['nw', 'ne', 'sw', 'se'] // 'e'
+    pinchable: true, // ["draggable", "resizable", "scalable", "rotatable"]
+    origin: false,
+    defaultGroupOrigin: '0% 0%',
+    // 样式相关
+    rotationPosition: 'bottom',
+    className: 'zk-moveable-style',
+    // -- 吸附对齐 Start --
+    snappable: true,
+    elementGuidelines: [],
+    verticalGuidelines: [],
+    horizontalGuidelines: [],
+    snapThreshold: 4,
+    isDisplaySnapDigit: true,
+    snapGap: false,
+    snapElement: true,
+    snapVertical: true,
+    snapHorizontal: true,
+    snapCenter: false,
+    snapDigit: 0,
+
+    // snapDirections={{"top":true,"right":true,"bottom":true,"left":true}}
+    //       elementSnapDirections={{}}
+    // -- END --
+    triggerAblesSimultaneously: true,
+  }
+  const moveableInstance = new Moveable(document.body, moveableOptions)
+  moveable = moveableInstance
+
+  const helper: any = new MoveableHelper()
+
+  EVENTS.forEach((event) => {
+    let helperEvent = event.replace(event[0], 'on' + event[0].toUpperCase())
+    // console.log(event)
+    // 'resizeStart', 'resize', 'resizeEnd', rotate, onScale, onScaleStart
+    if (['resizeStart', 'rotate', 'resize'].includes(event)) {
+      moveable?.on(event as any, (...args) => {
+        // this.$emit(event, ...args)
+        helper[helperEvent] && helper[helperEvent](...args)
+      })
+    }
+  })
+  /* draggable */
+  let resizeStartWidth = 0
+
+  moveable
+    .on('dragStart', ({ inputEvent, target, stop }) => {
+      if (inputEvent.target.nodeName === 'PRE') {
+        dActiveElement.value.editable && stop()
+      }
+      dActiveElement.value.lock && stop()
+    })
+    .on('drag', ({ target, transform, left, top, inputEvent }) => {
+      // target!.style.transform = transform]
+      target!.style.left = `${left}px`
+      target!.style.top = `${top}px`
+      holdPosition = { left, top }
+    })
+    .on('dragEnd', ({ target, isDrag, inputEvent }) => {
+      // console.log('onDragEnd', inputEvent)
+      // TODO 清理mouseevent
+      store.commit('setMouseEvent', null)
+      inputEvent.stopPropagation()
+      inputEvent.preventDefault()
+      // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
+      if (holdPosition) {
+        store.dispatch('updateWidgetData', {
+          uuid: dActiveElement.value.uuid,
+          key: 'left',
+          value: Number(holdPosition?.left),
         })
+        // this.updateWidgetData({
+        //   uuid: this.dActiveElement.uuid,
+        //   key: 'left',
+        //   value: Number(this.holdPosition?.left),
+        // })
+        store.dispatch('updateWidgetData', {
+          uuid: dActiveElement.value.uuid,
+          key: 'top',
+          value: Number(holdPosition?.top),
+        })
+        // this.updateWidgetData({
+        //   uuid: this.dActiveElement.uuid,
+        //   key: 'top',
+        //   value: Number(this.holdPosition?.top),
+        // })
+        holdPosition = null // important
+        setTimeout(() => {
+          store.dispatch('pushHistory')
+          // this.pushHistory()
+        }, 100)
       }
     })
-    /* draggable */
-    let resizeStartWidth = 0
-
-    moveable
-      .on('dragStart', ({ inputEvent, target, stop }) => {
-        if (inputEvent.target.nodeName === 'PRE') {
-          this.dActiveElement.editable && stop()
-        }
-        this.dActiveElement.lock && stop()
-      })
-      .on('drag', ({ target, transform, left, top, inputEvent }) => {
-        // target!.style.transform = transform]
-        target!.style.left = `${left}px`
-        target!.style.top = `${top}px`
-        this.holdPosition = { left, top }
-      })
-      .on('dragEnd', ({ target, isDrag, inputEvent }) => {
-        // console.log('onDragEnd', inputEvent)
-        // TODO 清理mouseevent
-        this.$store.commit('setMouseEvent', null)
-        inputEvent.stopPropagation()
-        inputEvent.preventDefault()
-        // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
-        if (this.holdPosition) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: 'left',
-            value: Number(this.holdPosition?.left),
-          })
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: 'top',
-            value: Number(this.holdPosition?.top),
-          })
-          this.holdPosition = null // important
-          setTimeout(() => {
-            this.pushHistory()
-          }, 100)
-        }
-      })
-      // .on('keyUp', (e) => {
-      //   moveable.updateRect()
-      // })
-      .on('rotate', ({ target, beforeDist, dist, transform }: any) => {
-        // console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist))
-        // target.style.transform = transform
-        console.log(target.style.transform)
-      })
-      .on('rotateEnd', (e: any) => {
-        const tf = e.target.style.transform
-        const iof = tf.indexOf('rotate')
-        let rotate = ''
-        if (iof != -1) {
-          const index = iof + 'rotate'.length
-          const half = tf.substring(index + 1)
-          rotate = half.slice(0, half.indexOf(')'))
-        }
-        rotate &&
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: 'rotate',
-            value: rotate,
-          })
-      })
-      .on('resizeStart', (args) => {
-        console.log(args.target.style.transform)
-
-        this.moveable.snappable = false
-        if (this.dActiveElement.type === 'w-text') {
-          if (String(args.direction) === '1,0') {
-            moveable.keepRatio = false
-            moveable.scalable = false
-          }
-          if (String(args.direction) === '1,1') {
-            moveable.keepRatio = false
-            resizeStartWidth = args.target.offsetWidth
-            this.startHL = Number(args.target!.style.lineHeight.replace('px', ''))
-            this.startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
-            this.resetRatio = 1
-          }
-        } else if (this.dActiveElement.type === 'w-image' || this.dActiveElement.type === 'w-qrcode' || this.dActiveElement.type === 'w-svg') {
-          const dirs = ['1,0', '0,-1', '-1,0', '0,1']
-          dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
-        }
-      })
-      .on('resize', (args: any) => {
-        const { target, width, height, dist, delta, clientX, clientY, direction } = args
-        console.log(2, args)
-        if (this.dActiveElement.type === 'w-text') {
-          if (String(direction) === '1,1') {
-            this.resetRatio = width / resizeStartWidth
-            target!.style.fontSize = this.dActiveElement.fontSize * this.resetRatio + 'px'
-            target!.style.letterSpacing = this.startLS * this.resetRatio + 'px'
-            target!.style.lineHeight = this.startHL * this.resetRatio + 'px'
-          }
-          target.style.width = width
-          target.style.height = height
-          this.resizeTempData = { width, height }
-          // moveable.updateRect()
-          target.style.backgroundImage = 'none'
-          // moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
-        } else if (this.dActiveElement.type == 'w-image' || this.dActiveElement.type === 'w-qrcode' || this.dActiveElement.type === 'w-svg') {
-          this.resizeTempData = { width, height }
-        } else if (this.dActiveElement.type == 'w-group') {
-          // let record = this.dActiveElement.record
-          // this.dActiveElement.tempScale = width / record.width
-          this.$store.commit('resize', { width: width, height: height })
-          // this.resizeTempData = { width, height }
-          // let record = this.dActiveElement.record
-          // setTransformAttribute(target, 'scale', width / record.width)
-        } else {
-          this.$store.commit('resize', { width: width, height: height })
-        }
-        this.dActiveElement.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${this.dActiveElement.rotate}`))
-      })
-      .on('resizeEnd', (e: any) => {
-        moveable.resizable = true
-        // moveable.scalable = true
-        moveable.snappable = true
-        if (e.lastEvent) {
-          // setTimeout(() => {
-          // if (this.dActiveElement.type === 'w-group') {
-          //   // 临时屏蔽，抖得太严重
-          //   return
-          // }
-          console.log('重置translate', this.dActiveElement)
-          // 转换成位置
-          // if (this.dActiveElement.cache && this.dActiveElement.cache.recordLeft) {
-          //   const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.cache.recordLeft)
-          //   const top = e.lastEvent.drag.translate[1] + Number(this.dActiveElement.cache.recordTop)
-          //   this.dActiveElement.cache = { left, top }
-          // } else {
-          //   const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.left)
-          //   const top = e.lastEvent.drag.translate[1] + Number(this.dActiveElement.top)
-          //   this.dActiveElement.cache = { left, top }
-          // }
-          const left = e.lastEvent.drag.translate[0]
-          const top = e.lastEvent.drag.translate[1]
-          this.updateWidgetMultiple({
-            uuid: this.dActiveElement.uuid,
-            data: [
-              {
-                key: 'left',
-                value: Number(this.dActiveElement.left) + left,
-              },
-              {
-                key: 'top',
-                value: Number(this.dActiveElement.top) + top,
-              },
-            ],
-          })
-          // 重置translate
-          const tf = e.target.style.transform
-          const iof = tf.indexOf('translate')
-          const FRONT = tf.slice(0, iof + 'translate'.length + 1)
-          const half = tf.substring(iof + 'translate'.length + 1)
-          const END = half.substring(half.indexOf(')'))
-          e.target.style.transform = FRONT + '0, 0' + END
-          // this.moveable.updateRect()
-          // }, 10)
-        }
-        if (this.resizeTempData) {
-          this.$store.commit('resize', this.resizeTempData)
-          this.resizeTempData = null
-          setTimeout(async () => {
-            await this.$nextTick()
-            this.moveable.updateRect()
-          }, 10)
-        }
-        try {
-          if (this.dActiveElement.type === 'w-text') {
-            const d = e.direction || e.lastEvent.direction
-            String(d) === '1,1' && (this.dActiveElement.fontSize = this.dActiveElement.fontSize * this.resetRatio)
-          }
-        } catch (err) {}
-        moveable.keepRatio = true
-      })
-      .on('scaleStart', (e) => {
-        if (this.dActiveElement.type === 'w-text') {
-          this.startHL = Number(e.target!.style.lineHeight.replace('px', ''))
-          this.startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
-          this.resetRatio = 1
-        } else {
+    // .on('keyUp', (e) => {
+    //   moveable.updateRect()
+    // })
+    // { target, beforeDist, dist, transform }
+    .on('rotate', ({ target, beforeDist, dist, transform }) => {
+      // console.log('onRotate', Number(this.dActiveElement.rotate) + Number(beforeDist + dist))
+      // target.style.transform = transform
+      
+      console.log(target.style.transform)
+    })
+    .on('rotateEnd', (e) => {
+      const tf = e.target.style.transform
+      const iof = tf.indexOf('rotate')
+      let rotate = ''
+      if (iof != -1) {
+        const index = iof + 'rotate'.length
+        const half = tf.substring(index + 1)
+        rotate = half.slice(0, half.indexOf(')'))
+      }
+      rotate &&
+        store.dispatch("updateWidgetData", {
+          uuid: dActiveElement.value.uuid,
+          key: 'rotate',
+          value: rotate,
+        })
+        // this.updateWidgetData({
+        //   uuid: this.dActiveElement.uuid,
+        //   key: 'rotate',
+        //   value: rotate,
+        // })
+    })
+    .on('resizeStart', (args) => {
+      console.log(args.target.style.transform)
+      if (!moveable) return
+      moveable.snappable = false
+      if (dActiveElement.value.type === 'w-text') {
+        if (String(args.direction) === '1,0') {
+          moveable.keepRatio = false
           moveable.scalable = false
         }
-      })
-      .on('scale', (e) => {
-        moveable.resizable = false
-        const { target, scale, transform } = e
-        this.resetRatio = scale[0]
-        target!.style.transform = transform
-        this.dActiveElement.rotate && (target!.style.transform = target!.style.transform.replace('0deg', this.dActiveElement.rotate))
-      })
-      .on('scaleEnd', (e) => {
-        moveable.resizable = true
-        // moveable.scalable = true
-        moveable.keepRatio = true
-        console.log(e.target.style.transform)
-        try {
-          if (this.dActiveElement.type === 'w-text') {
-            const d = e.direction || e.lastEvent.direction
-            String(d) === '1,1' && (this.dActiveElement.fontSize = this.dActiveElement.fontSize * this.resetRatio)
-          }
-        } catch (err) {}
-      })
-      .on('dragGroup', (e) => {
-        e.inputEvent.stopPropagation()
-        e.inputEvent.preventDefault()
-        holdGroupPosition = {}
-        const events = e.events
-        for (let i = 0; i < events.length; i++) {
-          const ev = events[i]
-          const currentWidget = this.dWidgets.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
-          const left = Number(currentWidget.left) + ev.beforeTranslate[0]
-          // debug -- start --
-          if (i === 1) {
-            console.log(Number(currentWidget.left), ev.beforeTranslate[0])
-          }
-          // debug -- end --
-          const top = Number(currentWidget.top) + ev.beforeTranslate[1]
-          ev.target.style.left = `${left}px`
-          ev.target.style.top = `${top}px`
-          holdGroupPosition[`${ev.target.getAttribute('data-uuid')}`] = { left, top }
+        if (String(args.direction) === '1,1') {
+          moveable.keepRatio = false
+          resizeStartWidth = (args.target as HTMLElement).offsetWidth
+          startHL = Number(args.target!.style.lineHeight.replace('px', ''))
+          startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
+          resetRatio = 1
         }
-      })
-      .on('dragGroupEnd', (e) => {
-        for (const key in holdGroupPosition) {
-          if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
-            const item = holdGroupPosition[key]
-            this.updateWidgetData({
-              uuid: key,
-              key: 'left',
-              value: item.left,
-            })
-            this.updateWidgetData({
-              uuid: key,
-              key: 'top',
-              value: item.top,
-            })
-          }
-        }
-        holdGroupPosition = null
-        // background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
-        // background-size: 12px 1px;
-      })
-      .on('resizeGroupStart', ({ events }: any) => {
-        console.log(events)
-        // events.forEach((ev, i) => {
-        //     const frame = this.frames[i];
-        //     // Set origin if transform-origin use %.
-        //     ev.setOrigin(["%", "%"]);
-
-        //     // If cssSize and offsetSize are different, set cssSize.
-        //     const style = window.getComputedStyle(ev.target);
-        //     const cssWidth = parseFloat(style.width);
-        //     const cssHeight = parseFloat(style.height);
-        //     ev.set([cssWidth, cssHeight]);
-
-        //     // If a drag event has already occurred, there is no dragStart.
-        //     ev.dragStart && ev.dragStart.set(frame.translate);
-        // });
-      })
-      .on('resizeGroup', (e: any) => {
-        // events.forEach(({ target, width, height, drag }, i) => {
-        //     const frame = this.frames[i];
-        //     target.style.width = `${width}px`;
-        //     target.style.height = `${height}px`;
-        //     // get drag event
-        //     frame.translate = drag.beforeTranslate;
-        //     target.style.transform
-        //         = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
-        // });
-      })
-      .on('resizeGroupEnd', ({ targets, isDrag }: any) => {
-        console.log('onResizeGroupEnd', targets, isDrag)
-      })
-
-    // -- 选择功能 Start --
-    useSelecto(this.moveable)
-    // -- 选择功能 END --
-  },
-  async created() {
-    await nextTick()
-    const Ele = document.getElementById('page-design')
-    // 后续可能加个节流 TODO
-    Ele?.addEventListener('scroll', () => {
-      this.moveable.updateRect()
+      } else if (dActiveElement.value.type === 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+        const dirs = ['1,0', '0,-1', '-1,0', '0,1']
+        dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
+      }
     })
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
-  },
+    .on('resize', (args: any) => {
+      const { target, width, height, dist, delta, clientX, clientY, direction } = args
+      console.log(2, args)
+      if (dActiveElement.value.type === 'w-text') {
+        if (String(direction) === '1,1') {
+          resetRatio = width / resizeStartWidth
+          target!.style.fontSize = dActiveElement.value.fontSize * resetRatio + 'px'
+          target!.style.letterSpacing = startLS * resetRatio + 'px'
+          target!.style.lineHeight = startHL * resetRatio + 'px'
+        }
+        target.style.width = width
+        target.style.height = height
+        resizeTempData = { width, height }
+        // moveable.updateRect()
+        target.style.backgroundImage = 'none'
+        // moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
+      } else if (dActiveElement.value.type == 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+        resizeTempData = { width, height }
+      } else if (dActiveElement.value.type == 'w-group') {
+        // let record = this.dActiveElement.record
+        // this.dActiveElement.tempScale = width / record.width
+        store.commit('resize', { width: width, height: height })
+        // this.resizeTempData = { width, height }
+        // let record = this.dActiveElement.record
+        // setTransformAttribute(target, 'scale', width / record.width)
+      } else {
+        store.commit('resize', { width: width, height: height })
+      }
+      dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value.rotate}`))
+    })
+    .on('resizeEnd', (e: any) => {
+      if (!moveable) return
+      moveable.resizable = true
+      // moveable.scalable = true
+      moveable.snappable = true
+      if (e.lastEvent) {
+        // setTimeout(() => {
+        // if (this.dActiveElement.type === 'w-group') {
+        //   // 临时屏蔽，抖得太严重
+        //   return
+        // }
+        console.log('重置translate', dActiveElement.value)
+        // 转换成位置
+        // if (this.dActiveElement.cache && this.dActiveElement.cache.recordLeft) {
+        //   const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.cache.recordLeft)
+        //   const top = e.lastEvent.drag.translate[1] + Number(this.dActiveElement.cache.recordTop)
+        //   this.dActiveElement.cache = { left, top }
+        // } else {
+        //   const left = e.lastEvent.drag.translate[0] + Number(this.dActiveElement.left)
+        //   const top = e.lastEvent.drag.translate[1] + Number(this.dActiveElement.top)
+        //   this.dActiveElement.cache = { left, top }
+        // }
+        const left = e.lastEvent.drag.translate[0]
+        const top = e.lastEvent.drag.translate[1]
+        store.dispatch("updateWidgetMultiple", {
+          uuid: dActiveElement.value.uuid,
+          data: [
+            {
+              key: 'left',
+              value: Number(dActiveElement.value.left) + left,
+            },
+            {
+              key: 'top',
+              value: Number(dActiveElement.value.top) + top,
+            },
+          ],
+        })
+        // this.updateWidgetMultiple({
+        //   uuid: this.dActiveElement.uuid,
+        //   data: [
+        //     {
+        //       key: 'left',
+        //       value: Number(this.dActiveElement.left) + left,
+        //     },
+        //     {
+        //       key: 'top',
+        //       value: Number(this.dActiveElement.top) + top,
+        //     },
+        //   ],
+        // })
+        // 重置translate
+        const tf = e.target.style.transform
+        const iof = tf.indexOf('translate')
+        const FRONT = tf.slice(0, iof + 'translate'.length + 1)
+        const half = tf.substring(iof + 'translate'.length + 1)
+        const END = half.substring(half.indexOf(')'))
+        e.target.style.transform = FRONT + '0, 0' + END
+        // this.moveable.updateRect()
+        // }, 10)
+      }
+      if (resizeTempData) {
+        store.commit('resize', resizeTempData)
+        resizeTempData = null
+        setTimeout(async () => {
+          await nextTick()
+          if (moveable) {
+            moveable.updateRect()
+          }
+        }, 10)
+      }
+      try {
+        if (dActiveElement.value.type === 'w-text') {
+          const d = e.direction || e.lastEvent.direction
+          String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        }
+      } catch (err) {}
+      moveable.keepRatio = true
+    })
+    .on('scaleStart', (e) => {
+      if (dActiveElement.value.type === 'w-text') {
+        startHL = Number(e.target!.style.lineHeight.replace('px', ''))
+        startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
+        resetRatio = 1
+      } else {
+        if (!moveable) return
+        moveable.scalable = false
+      }
+    })
+    .on('scale', (e) => {
+      if (!moveable) return
+      moveable.resizable = false
+      const { target, scale, transform } = e
+      resetRatio = scale[0]
+      target!.style.transform = transform
+      dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
+    })
+    .on('scaleEnd', (e: Record<string, any>) => {
+      if (!moveable) return
+      moveable.resizable = true
+      // moveable.scalable = true
+      moveable.keepRatio = true
+      console.log(e.target.style.transform)
+      try {
+        if (dActiveElement.value.type === 'w-text') {
+          const d = e.direction || e.lastEvent.direction
+          String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        }
+      } catch (err) {}
+    })
+    .on('dragGroup', (e) => {
+      e.inputEvent.stopPropagation()
+      e.inputEvent.preventDefault()
+      holdGroupPosition = {}
+      const events = e.events
+      for (let i = 0; i < events.length; i++) {
+        const ev = events[i]
+        const currentWidget = dWidgets.value.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
+        const left = Number(currentWidget.left) + ev.beforeTranslate[0]
+        // debug -- start --
+        if (i === 1) {
+          console.log(Number(currentWidget.left), ev.beforeTranslate[0])
+        }
+        // debug -- end --
+        const top = Number(currentWidget.top) + ev.beforeTranslate[1]
+        ev.target.style.left = `${left}px`
+        ev.target.style.top = `${top}px`
+        holdGroupPosition[`${ev.target.getAttribute('data-uuid')}`] = { left, top }
+      }
+    })
+    .on('dragGroupEnd', (e) => {
+      for (const key in holdGroupPosition) {
+        if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
+          const item = holdGroupPosition[key]
+          store.dispatch('updateWidgetData', {
+            uuid: key,
+            key: 'left',
+            value: item.left,
+          })
+          store.dispatch("updateWidgetData", {
+            uuid: key,
+            key: 'top',
+            value: item.top,
+          })
+        }
+      }
+      holdGroupPosition = null
+      // background: linear-gradient(to right, #ccc 0%, #ccc 50%, transparent 50%);
+      // background-size: 12px 1px;
+    })
+    .on('resizeGroupStart', ({ events }) => {
+      console.log(events)
+      // events.forEach((ev, i) => {
+      //     const frame = this.frames[i];
+      //     // Set origin if transform-origin use %.
+      //     ev.setOrigin(["%", "%"]);
+
+      //     // If cssSize and offsetSize are different, set cssSize.
+      //     const style = window.getComputedStyle(ev.target);
+      //     const cssWidth = parseFloat(style.width);
+      //     const cssHeight = parseFloat(style.height);
+      //     ev.set([cssWidth, cssHeight]);
+
+      //     // If a drag event has already occurred, there is no dragStart.
+      //     ev.dragStart && ev.dragStart.set(frame.translate);
+      // });
+    })
+    .on('resizeGroup', (e) => {
+      // events.forEach(({ target, width, height, drag }, i) => {
+      //     const frame = this.frames[i];
+      //     target.style.width = `${width}px`;
+      //     target.style.height = `${height}px`;
+      //     // get drag event
+      //     frame.translate = drag.beforeTranslate;
+      //     target.style.transform
+      //         = `translate(${drag.beforeTranslate[0]}px, ${drag.beforeTranslate[1]}px)`;
+      // });
+    })
+    .on('resizeGroupEnd', ({ targets, isDrag }) => {
+      console.log('onResizeGroupEnd', targets, isDrag)
+    })
+
+  // -- 选择功能 Start --
+  useSelecto(moveable)
+  // -- 选择功能 END --
 })
+
+
+async function created() {
+  await nextTick()
+  const Ele = document.getElementById('page-design')
+  // 后续可能加个节流 TODO
+  Ele?.addEventListener('scroll', () => {
+    moveable && (moveable.updateRect())
+  })
+}
+created()
+
+// ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
+
 </script>
 
 <style lang="less">

From 7b93bee1342324c47c2356fc26ffd893b1265a8f Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 21 Mar 2024 09:17:11 +0000
Subject: [PATCH 09/23] rebuilt: control store to pinia

---
 src/pinia/design/control/index.ts     | 56 +++++++++++++++++++++++++++
 src/pinia/design/history/index.ts     | 13 +++++++
 src/store/modules/design/actions.ts   |  6 +--
 src/store/modules/design/index.ts     | 16 ++++----
 src/store/modules/design/mutations.ts | 20 +++++-----
 5 files changed, 90 insertions(+), 21 deletions(-)
 create mode 100644 src/pinia/design/control/index.ts
 create mode 100644 src/pinia/design/history/index.ts

diff --git a/src/pinia/design/control/index.ts b/src/pinia/design/control/index.ts
new file mode 100644
index 0000000..aa2caf3
--- /dev/null
+++ b/src/pinia/design/control/index.ts
@@ -0,0 +1,56 @@
+import { defineStore } from "pinia";
+
+type TControlState = {
+  /** 是否正在移动组件 */
+  dMoving: boolean 
+  /** 是否正在抓取组件 */
+  dDraging: boolean
+  /** 是否正在调整组件宽高 */
+  dResizeing: boolean
+  /** 是否显示参考线 */
+  dShowRefLine: boolean
+  /** 全局控制选择框的显示 */
+  showMoveable: boolean
+  /** 是否显示moveable的旋转按钮 */
+  showRotatable: boolean
+}
+
+type TControlAction = {
+
+}
+
+export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
+  state: () => ({
+    dMoving: false, // 是否正在移动组件
+    dDraging: false, // 是否正在抓取组件
+    dResizeing: false, // 是否正在调整组件宽高
+    dShowRefLine: true, // 是否显示参考线
+    showMoveable: false, // 全局控制选择框的显示
+    showRotatable: true, // 是否显示moveable的旋转按钮
+  }),
+  getters: {},
+  actions: {
+    setdMoving(bool: boolean) {
+      this.dMoving = bool
+    },
+    setDraging(drag: boolean) {
+      this.dDraging = drag
+    },
+    setdResizeing(bool: boolean) {
+      this.dResizeing = bool
+    },
+    showRefLine(show: boolean) {
+      this.dShowRefLine = show
+    },
+    setShowMoveable(show: boolean) {
+      this.showMoveable = show
+      // if (!show) {
+      //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
+      //   state.dActiveElement = state.dPage
+      // }
+    },
+    setShowRotatable(e: boolean) {
+      this.showRotatable = e
+    },
+  }
+})
\ No newline at end of file
diff --git a/src/pinia/design/history/index.ts b/src/pinia/design/history/index.ts
new file mode 100644
index 0000000..031554e
--- /dev/null
+++ b/src/pinia/design/history/index.ts
@@ -0,0 +1,13 @@
+import { defineStore } from "pinia"
+
+
+type THistoryStore = {
+
+}
+
+export default defineStore("historyStore", {
+  state: () => ({
+    
+  })
+})
+
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
index 90dffd1..cf489b6 100644
--- a/src/store/modules/design/actions.ts
+++ b/src/store/modules/design/actions.ts
@@ -544,9 +544,9 @@ export default {
   updateHoverUuid(store, uuid) {
     store.state.dHoverUuid = uuid
   },
-  showRefLine(store, show) {
-    store.state.dShowRefLine = show
-  },
+  // showRefLine(store, show) {
+  //   store.state.dShowRefLine = show
+  // },
   updateAlign(store: any, { align, uuid, group }: any) {
     const widgets = store.state.dWidgets
     const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index 502677e..12fd48a 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -12,11 +12,11 @@ const all = {
     //   width: 0, // 网格小格子的宽度
     //   height: 0, // 网格小格子的高度
     // },
-    guidelines: {
-      // moveable 标尺辅助线
-      verticalGuidelines: [],
-      horizontalGuidelines: [],
-    },
+    // guidelines: {
+    //   // moveable 标尺辅助线
+    //   verticalGuidelines: [],
+    //   horizontalGuidelines: [],
+    // },
     dActiveWidgetXY: {
       x: 0, // 选中组件的横向初始值
       y: 0, // 选中组件的纵向初始值
@@ -165,9 +165,9 @@ const all = {
     dDropOverUuid(state: any) {
       return state.dDropOverUuid
     },
-    guidelines(state: any) {
-      return state.guidelines
-    },
+    // guidelines(state: any) {
+    //   return state.guidelines
+    // },
     dCropUuid(state: any) {
       return state.dCropUuid
     },
diff --git a/src/store/modules/design/mutations.ts b/src/store/modules/design/mutations.ts
index da65409..5b2a290 100644
--- a/src/store/modules/design/mutations.ts
+++ b/src/store/modules/design/mutations.ts
@@ -41,13 +41,13 @@ export default {
   //   state.dPage = e
   // },
   
-  setShowMoveable(state: Type.Object, show: any) {
-    state.showMoveable = show
-    // if (!show) {
-    //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
-    //   state.dActiveElement = state.dPage
-    // }
-  },
+  // setShowMoveable(state: Type.Object, show: any) {
+  //   state.showMoveable = show
+  //   // if (!show) {
+  //   //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
+  //   //   state.dActiveElement = state.dPage
+  //   // }
+  // },
   setShowRotatable(state: Type.Object, e: any) {
     state.showRotatable = e
   },
@@ -71,9 +71,9 @@ export default {
     // 设置正在裁剪or编辑的组件
     state.dCropUuid = uuid
   },
-  setDraging(state: Type.Object, drag: boolean) {
-    state.dDraging = drag
-  },
+  // setDraging(state: Type.Object, drag: boolean) {
+  //   state.dDraging = drag
+  // },
   // setDragInitData(state: Type.Object, data: any) {
   //   state.dDragInitData = data
   // },

From 7dbc09b8fe870a3b430a44e8930d985a0e9fae07 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 21 Mar 2024 15:43:34 +0000
Subject: [PATCH 10/23] rebuilt: control store to pinia

---
 src/components/modules/widgets/wImage/wImageSetting.ts | 1 +
 src/components/modules/widgets/wImage/wImageStyle.vue  | 7 +++++--
 src/pinia/index.ts                                     | 2 ++
 3 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/widgets/wImage/wImageSetting.ts b/src/components/modules/widgets/wImage/wImageSetting.ts
index 55d8f26..2c67740 100644
--- a/src/components/modules/widgets/wImage/wImageSetting.ts
+++ b/src/components/modules/widgets/wImage/wImageSetting.ts
@@ -29,6 +29,7 @@ export type TImageSetting = {
     ratio: number
     left: number
   }
+  cropEdit?: boolean
 }
 
 const setting: TImageSetting = {
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index 36de2e0..65061f9 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -89,6 +89,8 @@ import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import wImageSetting, { TImageSetting } from './wImageSetting'
 import { TGetImageListResult } from '@/api/material'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 type TState = {
   picBoxShow: boolean
@@ -132,8 +134,9 @@ const imageCutoutRef = ref<typeof imageCutout | null>(null)
 
 const store = useStore()
 const {
-  dActiveElement, dMoving, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+  dActiveElement, dWidgets
+} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dMoving } = storeToRefs(useControlStore())
 // computed: {
 //   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
 // },
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index d9aee5f..a4a64d0 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -10,10 +10,12 @@ import useBaseStore from "./base";
 import useUserStore from "./base/user";
 import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
+import useControlStore from './design/control'
 
 export {
   useBaseStore,
   useUserStore,
   usePageStore,
   useCanvasStore,
+  useControlStore
 }

From 1acdabef888e9a42600195a423773f206244d4ea Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 21 Mar 2024 19:24:15 +0000
Subject: [PATCH 11/23] merge: feat-upgrade-vue3 branch

---
 src/common/methods/DesignFeatures/setWidgetData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/methods/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts
index b25ad0b..29d3c0f 100644
--- a/src/common/methods/DesignFeatures/setWidgetData.ts
+++ b/src/common/methods/DesignFeatures/setWidgetData.ts
@@ -12,7 +12,7 @@ import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+import { wSvgSetting } from '@/components/modules/widgets/wSvgSetting'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data

From 1e269ade521745e4f9db1e34557f4f3e6e852a3f Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 26 Mar 2024 14:23:45 +0000
Subject: [PATCH 12/23] fix: wSvgSetting error

---
 src/common/methods/DesignFeatures/setWidgetData.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/common/methods/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts
index 29d3c0f..f962715 100644
--- a/src/common/methods/DesignFeatures/setWidgetData.ts
+++ b/src/common/methods/DesignFeatures/setWidgetData.ts
@@ -12,7 +12,7 @@ import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-import { wSvgSetting } from '@/components/modules/widgets/wSvgSetting'
+import { wSvgSetting } from '@/components/modules/widgets/wSvg/wSvgSetting'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data

From 4b1e9e4108ab90eb7c09bb8bab00c8df8f1f62c6 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 26 Mar 2024 20:05:08 +0000
Subject: [PATCH 13/23] rebuilt: store to pinia control store

---
 .../business/cropper/CropImage/CropImage.vue  |  9 ++++-
 .../business/cropper/CropImage/index.vue      |  8 +++-
 .../image-cutout/ImageCutout/index.vue        |  8 +++-
 src/components/business/moveable/Moveable.vue | 15 ++++---
 .../business/picture-selector/index.vue       |  9 ++++-
 .../modules/layout/designBoard/index.vue      | 22 +++++++---
 src/components/modules/panel/stylePanel.vue   | 10 +++--
 .../modules/panel/wrap/CompListWrap.vue       |  7 +++-
 .../modules/panel/wrap/GraphListWrap.vue      | 10 +++--
 .../modules/panel/wrap/PhotoListWrap.vue      | 10 ++++-
 .../modules/panel/wrap/TempListWrap.vue       | 10 ++++-
 .../modules/panel/wrap/TextListWrap.vue       |  9 ++++-
 .../modules/panel/wrap/ToolsListWrap.vue      |  8 +++-
 .../modules/panel/wrap/UserWrap.vue           | 15 +++++--
 .../modules/settings/colorSelect.vue          |  9 ++++-
 .../modules/widgets/wImage/wImage.vue         | 11 +++--
 .../modules/widgets/wImage/wImageStyle.vue    |  2 +-
 .../modules/widgets/wQrcode/wQrcodeStyle.vue  | 19 +++++++--
 .../modules/widgets/wSvg/wSvgStyle.vue        |  7 +++-
 .../modules/widgets/wText/wTextStyle.vue      |  6 ++-
 src/mixins/methods/handlePaste.ts             | 12 ++++--
 src/mixins/methods/keyCodeOptions.ts          |  5 ++-
 src/pinia/design/control/index.ts             |  7 +++-
 src/store/modules/design/index.ts             | 40 +++++++++----------
 src/views/Psd.vue                             |  8 +++-
 src/views/components/HeaderOptions.vue        | 17 ++++++--
 src/views/components/UploadTemplate.vue       |  8 +++-
 27 files changed, 216 insertions(+), 85 deletions(-)

diff --git a/src/components/business/cropper/CropImage/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue
index de50847..907f00a 100644
--- a/src/components/business/cropper/CropImage/CropImage.vue
+++ b/src/components/business/cropper/CropImage/CropImage.vue
@@ -26,6 +26,8 @@ import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
 import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 export default defineComponent({
   components: { ElDialog },
@@ -36,6 +38,7 @@ export default defineComponent({
       loading: false,
       url: '',
     })
+    const controlStore = useControlStore()
     const dialogVisible = ref(false)
     const imgBox = ref<HTMLImageElement | any>()
     let cropData: any = null
@@ -49,7 +52,8 @@ export default defineComponent({
       item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
       cropData = data
       state.url = item.rawImg
-      store.commit('setShowMoveable', false)
+      // store.commit('setShowMoveable', false)
+      controlStore.setShowMoveable(false)
       dialogVisible.value = true
       await nextTick()
       setEdit()
@@ -86,7 +90,8 @@ export default defineComponent({
     }
     
     const cancel = () => {
-      store.commit('setShowMoveable', true)
+      // store.commit('setShowMoveable', true)
+      controlStore.setShowMoveable(true)
       dialogVisible.value = false
       state.url = ''
       cropData = null
diff --git a/src/components/business/cropper/CropImage/index.vue b/src/components/business/cropper/CropImage/index.vue
index c05c8dc..b188884 100644
--- a/src/components/business/cropper/CropImage/index.vue
+++ b/src/components/business/cropper/CropImage/index.vue
@@ -26,6 +26,7 @@ import { ref, reactive, nextTick, toRefs } from 'vue'
 import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { useControlStore } from '@/pinia'
 
 type TDoneParams = {
   newImg: string,
@@ -41,6 +42,7 @@ type TOpenItem = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const state = reactive({
   loading: false,
   url: '',
@@ -61,7 +63,8 @@ const open = async (item: TOpenItem, data: Cropper.Data) => {
   item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
   cropData = data
   state.url = item.rawImg
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   dialogVisible.value = true
   await nextTick()
   setEdit()
@@ -101,7 +104,8 @@ const ok = () => {
 }
 
 const cancel = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
   dialogVisible.value = false
   state.url = ''
   cropData = null
diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue
index 880020f..3e91bca 100644
--- a/src/components/business/image-cutout/ImageCutout/index.vue
+++ b/src/components/business/image-cutout/ImageCutout/index.vue
@@ -48,6 +48,7 @@ import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
 import ImageExtraction from '../ImageExtraction/index.vue'
 import { selectImageFile, uploadCutPhotoToCloud } from './method'
+import { useControlStore } from '@/pinia'
 
 export type TImageCutoutState = {
     show: boolean;
@@ -62,6 +63,7 @@ export type TImageCutoutState = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const state = reactive<TImageCutoutState>({
   show: false,
   rawImage: '',
@@ -87,7 +89,8 @@ const matting = ref<typeof ImageExtraction | null>(null)
 const open = (file: File) => {
   state.loading = false
   state.show = true
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   nextTick(() => {
     if (file) {
       handleUploaderLoad(file)
@@ -111,7 +114,8 @@ const handleUploaderLoad = (file: File) => {
 }
 
 const handleClose = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const mousemove = (e: MouseEvent) => {
diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index 5c6b997..ddafa77 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -18,18 +18,19 @@ import { mapGetters, mapActions, useStore } from 'vuex'
 import useSelecto from './Selecto'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore } from '@/pinia'
+import { useCanvasStore, useControlStore } from '@/pinia'
 
 const {
   dSelectWidgets, dActiveElement, activeMouseEvent,
-  showMoveable, showRotatable, dWidgets,
+  showRotatable, dWidgets,
   updateRect, updateSelect,
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
 const store = useStore()
+const controlStore = useControlStore()
 const { guidelines } = storeToRefs(useCanvasStore())
-
-
+const { showMoveable } = storeToRefs(controlStore)
 // computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
+
 let _target: string = ""
 let moveable: Moveable | null = null 
 let holdPosition: { left: number, top: number } | null = null 
@@ -79,7 +80,9 @@ watch(
         }
       })
       // // End
-      store.commit('setShowMoveable', true)
+      // controlStore.setShowMoveable(true)
+      controlStore.setShowMoveable(true)
+
       // 参考线设置
       if (!moveable.elementGuidelines?.includes(target)) {
         moveable.elementGuidelines?.push(target)
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index 076501f..c2eb6c0 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -36,6 +36,7 @@ import { useStore } from 'vuex'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
+import { useControlStore } from '@/pinia'
 
 type TEmits = (event: 'select', data: TGetImageListResult) => void
 
@@ -50,6 +51,8 @@ type TState = {
 const emits = defineEmits<TEmits>()
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   dialogVisible: false,
   imgList: [],
@@ -101,11 +104,13 @@ const loadPic = (init?: boolean) => {
 const open = () => {
   state.dialogVisible = true
   load()
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 const close = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const selectImg = (index: number, list: TGetImageListResult[]) => {
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 36482f0..f2be71a 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -70,7 +70,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 // 页面设计组件
 type TProps = {
@@ -90,14 +90,16 @@ type TSetting = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
   dWidgets,
-  dActiveElement, dSelectWidgets, dAltDown, dDraging,
+  dActiveElement, dSelectWidgets, dAltDown,
   dHoverUuid, showRotatable
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'showRotatable'])
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
+const { dDraging } = storeToRefs(useControlStore())
 
 
 let _dropIn: string | null = ''
@@ -159,7 +161,10 @@ async function drop(e: MouseEvent) {
   const dropIn = _dropIn
   _dropIn = ''
   store.dispatch('setDropOver', '-1')
-  store.commit('setShowMoveable', false) // 清理上一次的选择
+
+  // store.commit('setShowMoveable', false) // 清理上一次的选择
+  controlStore.setShowMoveable(false) // 清理上一次的选择
+
   let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
   // e.stopPropagation()
   e.preventDefault()
@@ -215,7 +220,9 @@ async function drop(e: MouseEvent) {
     const uuid = target.getAttribute('data-uuid')
     if (targetType === 'w-mask') {
       // 容器
-      store.commit('setShowMoveable', true) // 恢复选择
+      // store.commit('setShowMoveable', true) // 恢复选择
+      controlStore.setShowMoveable(true) // 恢复选择
+
       const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
@@ -227,7 +234,10 @@ async function drop(e: MouseEvent) {
         const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
         widget.imgUrl = item.value.url
         console.log('加入+', widget)
-        store.commit('setShowMoveable', true) // 恢复选择
+
+        // store.commit('setShowMoveable', true) // 恢复选择
+        controlStore.setShowMoveable(true) // 恢复选择
+
       } else {
         store.dispatch('addWidget', setting) // 正常加入面板
         // addWidget(setting) // 正常加入面板
diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index b6e38fe..f1aa4e8 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -22,11 +22,13 @@
 // const NAME = 'style-panel'
 import { useStore } from 'vuex'
 import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
-import iconItemSelect from '../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useControlStore } from '@/pinia';
 
 const store = useStore();
+const controlStore = useControlStore()
 
 const activeTab = ref(0)
 const iconList = ref<AlignListData[]>(alignIconList)
@@ -51,7 +53,7 @@ function handleCombine() {
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-function alignAction(item: AlignListData) {
+function alignAction(item: TIconItemSelectData) {
   const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
   store.dispatch('getCombined').then((group) => {
     sWidgets.forEach((element: Record<string, any>) => {
@@ -72,7 +74,9 @@ function alignAction(item: AlignListData) {
 }
 function layerChange(newLayer: Record<string, any>[]) {
   store.commit('setDWidgets', newLayer.toReversed())
-  store.commit('setShowMoveable', false)
+
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 </script>
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index bcf42ab..73bace2 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -60,7 +60,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -89,6 +89,7 @@ const state = reactive<TState>({
   showList: [],
 })
 const store = useStore()
+const controlStore = useControlStore()
 const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
@@ -197,7 +198,9 @@ const selectItem = async (item: TGetCompListResult) => {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+  
   tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
   // let group = JSON.parse(tempDetail.data)
   const group: any = await getComponentsData(tempDetail.data)
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 72b7b7a..bc13402 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -48,7 +48,7 @@ import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
 import { TGetListData } from '@/api/material'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -81,7 +81,10 @@ const dragHelper = new DragHelper()
 const props = defineProps<TProps>()
 
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
   loading: false,
@@ -186,8 +189,9 @@ async function selectItem(item: TGetListData) {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  // this.$store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
 
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 3ef21cf..6ed8539 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -34,7 +34,7 @@ import api from '@/api'
 import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
@@ -56,7 +56,10 @@ type TCurrentCategory = {
 }
 
 const props = defineProps<TProps>()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
   recommendImgList: [],
@@ -81,7 +84,10 @@ onMounted(async () => {
 
 const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item) // await getImage(item.url)
   setting.width = img.width
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index 526c2b2..844153a 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -32,7 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {usePageStore, useUserStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore} from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -52,7 +52,10 @@ type TPageOptions = {
 const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const userStore = useUserStore()
 const pageStore = usePageStore()
 const state = reactive<TState>({
@@ -113,7 +116,10 @@ function checkHeight() {
 }
 // ...mapActions(['selectWidget', 'updatePageData', 'setTemplate', 'pushHistory']),
 async function selectItem(item: IGetTempListData) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   if (dHistoryParams.value.length > 0) {
     const isPass = await useConfirm('提示', '使用模板后，当前页面将会被替换，是否继续', 'warning')
     if (!isPass) {
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index 0341ef9..0e7965a 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia';
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
 import { useStore } from 'vuex'
-import { usePageStore } from '@/pinia';
+import { useControlStore, usePageStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -38,11 +38,16 @@ type TBasicTextData = {
 }
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 
 
 const selectBasicText = (item: TBasicTextData) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wTextSetting))
   setting.text = '双击编辑文字' // item.text
   setting.width = item.fontSize * setting.text.length
diff --git a/src/components/modules/panel/wrap/ToolsListWrap.vue b/src/components/modules/panel/wrap/ToolsListWrap.vue
index 9c8b7c2..7c9341e 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@@ -33,9 +33,11 @@ import imageCutout from '@/components/business/image-cutout'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
 const loadDone = ref(false)
@@ -61,7 +63,9 @@ onMounted(() => {
 // }
 
 function addQrcode() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 7c3652e..ab2f6f1 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/src/components/modules/panel/wrap/UserWrap.vue
@@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 
 type TProps = {
   active?: number
@@ -72,7 +72,10 @@ type TState = {
 const props = defineProps<TProps>()
 
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)
@@ -162,7 +165,10 @@ onMounted(() => {
 
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
@@ -180,7 +186,10 @@ type controlImgParam = {
 }
 
 const deleteImg = async ({ i, item }: controlImgParam) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   const isPass = await useConfirm('警告', '删除后不可找回，已引用资源将会失效，请谨慎操作', 'warning')
   if (!isPass) {
     return false
diff --git a/src/components/modules/settings/colorSelect.vue b/src/components/modules/settings/colorSelect.vue
index f2dbc61..c83b23b 100644
--- a/src/components/modules/settings/colorSelect.vue
+++ b/src/components/modules/settings/colorSelect.vue
@@ -19,6 +19,7 @@
 import {reactive, onMounted, watch } from 'vue'
 import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
+import { useControlStore } from '@/pinia';
 
 type TProps = {
   label?: string
@@ -53,6 +54,8 @@ const props = withDefaults(defineProps<TProps>(), {
 const emit = defineEmits<TEmits>()
 
 const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   innerColor: '',
   // colorLength: 0,
@@ -116,11 +119,13 @@ const inputBlur = (color: string) => {
 }
 
 const enter = () => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
 }
 
 const hide = () => {
-  store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  // store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  controlStore.setShowMoveable(true) // 恢复上一次的选择框
 }
 
 
diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue
index 2391f44..68fefb7 100644
--- a/src/components/modules/widgets/wImage/wImage.vue
+++ b/src/components/modules/widgets/wImage/wImage.vue
@@ -42,7 +42,7 @@ import PointImg from '@/utils/plugins/pointImg'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore } from '@/pinia'
+import { useCanvasStore, useControlStore } from '@/pinia'
 
 type TProps = {
   params: typeof setting
@@ -82,7 +82,10 @@ const state = reactive<TState>({
   }
 })
 const route = useRoute()
+
 const store = useStore()
+const controlStore = useControlStore()
+
 const widgetRef = ref<HTMLElement | null>(null)
 const targetRef = ref<HTMLImageElement | null>(null)
 
@@ -296,9 +299,11 @@ function fixRotate() {
     flipTemp = props.params.flip
     props.params.flip = null
   }
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   setTimeout(() => {
-    store.commit('setShowMoveable', true)
+    // store.commit('setShowMoveable', true)
+    controlStore.setShowMoveable(true)
   }, 100)
 }
 
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index b6be58a..a44fce4 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -230,7 +230,7 @@ function finishSliceData(key: string, value: number | number[]) {
   }
 }
 
-function finish(key: string = "", value: number | number[] | string | null = "") {
+function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
   store.dispatch('updateWidgetData', {
     uuid: dActiveElement.value.uuid,
     key: key,
diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
index dbf06ea..660567a 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
@@ -73,6 +73,8 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 type TState = {
   activeNames: string[]
@@ -93,10 +95,15 @@ const state = reactive<TState>({
   alignIconList,
   localization,
 })
+
 const store = useStore()
+const controlStore = useControlStore()
+
+
 const {
-  dActiveElement, dMoving, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+  dActiveElement, dWidgets
+} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dMoving } = storeToRefs(useControlStore())
 // ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
 
 let lastUuid: string | null = null
@@ -213,12 +220,16 @@ async function alignAction(item: TIconItemSelectData) {
 }
 
 async function uploadImgDone(img: TUploadDoneData) {
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+
   await api.material.addMyPhoto(img)
   // this.innerElement.width = img.width
   // this.innerElement.height = img.height * (this.innerElement.width / img.width)
   state.innerElement.url = img.url
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 </script>
 
diff --git a/src/components/modules/widgets/wSvg/wSvgStyle.vue b/src/components/modules/widgets/wSvg/wSvgStyle.vue
index ef269bf..de1beb2 100644
--- a/src/components/modules/widgets/wSvg/wSvgStyle.vue
+++ b/src/components/modules/widgets/wSvg/wSvgStyle.vue
@@ -46,6 +46,8 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useControlStore } from '@/pinia'
 
 type TState = {
   activeNames: string[]
@@ -66,8 +68,9 @@ const state = reactive<TState>({
 })
 const store = useStore()
 const {
-  dActiveElement, dMoving
-} = useSetupMapGetters(['dActiveElement', 'dMoving'])
+  dActiveElement
+} = useSetupMapGetters(['dActiveElement'])
+const { dMoving } = storeToRefs(useControlStore())
 
 // ...mapGetters(['dActiveElement', 'dMoving']),
 
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index d4a6792..ce9c275 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -66,6 +66,8 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
+import { storeToRefs } from 'pinia';
+import { useControlStore } from '@/pinia';
 
 type TState = {
   activeNames: string[],
@@ -99,7 +101,9 @@ const state = reactive<TState>({
   alignIconList,
 })
 const dActiveElement = computed(() => store.getters.dActiveElement)
-const dMoving = computed(() => store.getters.dMoving)
+// const dMoving = computed(() => store.getters.dMoving)
+const { dMoving } = storeToRefs(useControlStore())
+
 // const isDraw = computed(() => route.name === 'Draw')
 
 watch(() => dActiveElement.value, () => {
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index 38f333c..3aa4411 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -20,12 +20,14 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {
     const pageStore = usePageStore()
+    const controlStore = useControlStore()
+
     navigator.clipboard
       .read()
       .then(async (dataTransfer: any) => {
@@ -46,7 +48,9 @@ export default () => {
             // 刷新用户列表
             eventBus.emit('refreshUserImages')
             // 添加图片到画布中
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
             const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
@@ -67,7 +71,9 @@ export default () => {
             }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+            
             const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
             store.dispatch('addWidget', setting)
diff --git a/src/mixins/methods/keyCodeOptions.ts b/src/mixins/methods/keyCodeOptions.ts
index 7bce623..1e2ca73 100644
--- a/src/mixins/methods/keyCodeOptions.ts
+++ b/src/mixins/methods/keyCodeOptions.ts
@@ -5,10 +5,13 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
+import { useControlStore } from '@/pinia'
 import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
   const { f } = params
+  const controlStore = useControlStore()
+
   switch (e.keyCode) {
     case 38:
       udlr('top', -1 * f, e)
@@ -34,7 +37,7 @@ export default function keyCodeOptions(e: any, params: any) {
 
         if (type === 'w-text') {
           // 不在编辑状态则执行删除
-          !editable && store.getters.showMoveable && store.dispatch('deleteWidget')
+          !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
         } else store.dispatch('deleteWidget')
       }
       break
diff --git a/src/pinia/design/control/index.ts b/src/pinia/design/control/index.ts
index aa2caf3..559f06e 100644
--- a/src/pinia/design/control/index.ts
+++ b/src/pinia/design/control/index.ts
@@ -16,7 +16,12 @@ type TControlState = {
 }
 
 type TControlAction = {
-
+  setdMoving: (isMoving: boolean) => void
+  setDraging: (isDraging: boolean) => void
+  setdResizeing: (isResizing: boolean) => void
+  showRefLine: (isRefLine: boolean) => void
+  setShowMoveable: (isShowMoveable: boolean) => void
+  setShowRotatable: (isShowRotatable: boolean) => void
 }
 
 export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index 12fd48a..c688fbc 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -25,10 +25,10 @@ const all = {
       x: 0, // 鼠标按下时的横坐标
       y: 0, // 鼠标按下时的纵坐标
     },
-    dMoving: false, // 是否正在移动组件
-    dDraging: false, // 是否正在抓取组件
-    dResizeing: false, // 是否正在调整组件宽高
-    dShowRefLine: true, // 是否显示参考线
+    // dMoving: false, // 是否正在移动组件
+    // dDraging: false, // 是否正在抓取组件
+    // dResizeing: false, // 是否正在调整组件宽高
+    // dShowRefLine: true, // 是否显示参考线
     dResizeWH: {
       // 初始化调整大小时组件的宽高
       width: 0,
@@ -75,7 +75,7 @@ const all = {
     dGroupJson: {}, // 组合的json数据
     selectItem: { data: null }, // 记录当前选择的元素, data
     activeMouseEvent: null, // 正在活动的鼠标事件
-    showMoveable: false, // 全局控制选择框的显示
+    // showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
     zoomScreenChange: null, // 画布强制刷新适应度
     updateRect: null, // 强制刷新操作框
@@ -105,12 +105,12 @@ const all = {
     dMouseXY(state) {
       return state.dMouseXY
     },
-    dMoving(state) {
-      return state.dMoving
-    },
-    dDraging(state) {
-      return state.dDraging
-    },
+    // dMoving(state) {
+    //   return state.dMoving
+    // },
+    // dDraging(state) {
+    //   return state.dDraging
+    // },
     dActiveElement(state) {
       return state.dActiveElement
     },
@@ -129,12 +129,12 @@ const all = {
     dHoverUuid(state) {
       return state.dHoverUuid
     },
-    dResizeing(state) {
-      return state.dResizeing
-    },
-    dShowRefLine(state) {
-      return state.dShowRefLine
-    },
+    // dResizeing(state) {
+    //   return state.dResizeing
+    // },
+    // dShowRefLine(state) {
+    //   return state.dShowRefLine
+    // },
     dCopyElement(state) {
       return state.dCopyElement
     },
@@ -147,9 +147,9 @@ const all = {
     activeMouseEvent(state: any) {
       return state.activeMouseEvent
     },
-    showMoveable(state: any) {
-      return state.showMoveable
-    },
+    // showMoveable(state: any) {
+    //   return state.showMoveable
+    // },
     showRotatable(state: any) {
       return state.showRotatable
     },
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 233ddcf..af1a81c 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -73,7 +73,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { processPSD2Page } from '@/utils/plugins/psd'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -93,6 +93,8 @@ const state = reactive<TState>({
   cancelText: '',
 })
 const store = useStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
 // const { dZoom } = useSetupMapGetters(['dZoom'])
@@ -158,7 +160,9 @@ async function clear() {
   pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+  
   await nextTick()
   state.isDone = false
 }
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index 0e0a270..4d2d471 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore, useUserStore } from '@/pinia/index'
+import { useControlStore, usePageStore, useUserStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -69,6 +69,8 @@ const {
   dWidgets, tempEditing, dHistory, dPageHistory
 } = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
 const pageStore = usePageStore()
+const controlStore = useControlStore()
+
 const { dPage } = storeToRefs(pageStore)
 
 
@@ -84,7 +86,10 @@ async function save(hasCover: boolean = false) {
   if (dHistory.value.length <= 0) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   // console.log(proxy?.dPage, proxy?.dWidgets)
   const { id, tempid } = route.query
   const cover = hasCover ? await draw() : undefined
@@ -92,7 +97,9 @@ async function save(hasCover: boolean = false) {
   const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
   stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
   !id && router.push({ path: '/home', query: { id: newId }, replace: true })
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
     // 保存模板
@@ -187,7 +194,9 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
     const data = JSON.parse(content)
     state.stateBollean = !!_state
     state.title = title
-    store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    controlStore.setShowMoveable(false)
+    
     // this.$store.commit('setDWidgets', [])
     if (type == 1) {
       // 加载文字组合组件
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 7b3c634..835fae1 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -22,7 +22,7 @@ import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore } from '@/pinia'
+import { useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -56,7 +56,9 @@ const emit = defineEmits<TEmits>()
 
 const route = useRoute()
 const router = useRouter()
+
 const store = useStore()
+const controlStore = useControlStore()
 
 const canvasImage = ref<typeof SaveImage | null>(null)
 const state = reactive<TState>({
@@ -88,7 +90,9 @@ let widgets: { type: string, imgUrl: string }[] = []
 let page: Record<string, any> = {}
 
 async function prepare() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   addition = 0
   lenCount = 0
   widgets = dWidgets.value

From d6b66fe9381b016f0fd5498a8d3dc8a789bc8306 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Tue, 26 Mar 2024 20:09:30 +0000
Subject: [PATCH 14/23] rebuilt: store to pinia control store

---
 src/components/business/moveable/Moveable.vue         | 6 +++---
 src/components/modules/layout/designBoard/index.vue   | 6 +++---
 src/components/modules/widgets/wImage/wImageStyle.vue | 8 ++++++--
 src/store/modules/design/index.ts                     | 8 ++++----
 src/store/modules/design/mutations.ts                 | 6 +++---
 5 files changed, 19 insertions(+), 15 deletions(-)

diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index ddafa77..3f748cf 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -22,13 +22,13 @@ import { useCanvasStore, useControlStore } from '@/pinia'
 
 const {
   dSelectWidgets, dActiveElement, activeMouseEvent,
-  showRotatable, dWidgets,
+  dWidgets,
   updateRect, updateSelect,
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect'])
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
 const store = useStore()
 const controlStore = useControlStore()
 const { guidelines } = storeToRefs(useCanvasStore())
-const { showMoveable } = storeToRefs(controlStore)
+const { showMoveable, showRotatable } = storeToRefs(controlStore)
 // computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
 
 let _target: string = ""
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index f2be71a..c86b748 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -95,11 +95,11 @@ const { pageDesignCanvasId } = defineProps<TProps>()
 const {
   dWidgets,
   dActiveElement, dSelectWidgets, dAltDown,
-  dHoverUuid, showRotatable
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'showRotatable'])
+  dHoverUuid
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown'])
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
-const { dDraging } = storeToRefs(useControlStore())
+const { dDraging, showRotatable } = storeToRefs(useControlStore())
 
 
 let _dropIn: string | null = ''
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index a44fce4..a4ad6d0 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -136,7 +136,8 @@ const store = useStore()
 const {
   dActiveElement, dWidgets
 } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
-const { dMoving } = storeToRefs(useControlStore())
+const controlStore = useControlStore()
+const { dMoving } = storeToRefs(controlStore)
 // computed: {
 //   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
 // },
@@ -319,7 +320,10 @@ function imgCrop(val: boolean) {
   const { left, top } = el.getBoundingClientRect()
   toolBarStyle = { left: left + 'px', top: top + 'px' }
   state.innerElement.cropEdit = val
-  store.commit('setShowRotatable', !val)
+
+  // store.commit('setShowRotatable', !val)
+  controlStore.setShowRotatable(!val)
+  
 }
 
 
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index c688fbc..f27eb3f 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -76,7 +76,7 @@ const all = {
     selectItem: { data: null }, // 记录当前选择的元素, data
     activeMouseEvent: null, // 正在活动的鼠标事件
     // showMoveable: false, // 全局控制选择框的显示
-    showRotatable: true, // 是否显示moveable的旋转按钮
+    // showRotatable: true, // 是否显示moveable的旋转按钮
     zoomScreenChange: null, // 画布强制刷新适应度
     updateRect: null, // 强制刷新操作框
     updateSelect: null, // 强制设置选择元素
@@ -150,9 +150,9 @@ const all = {
     // showMoveable(state: any) {
     //   return state.showMoveable
     // },
-    showRotatable(state: any) {
-      return state.showRotatable
-    },
+    // showRotatable(state: any) {
+    //   return state.showRotatable
+    // },
     zoomScreenChange(state: any) {
       return state.zoomScreenChange
     },
diff --git a/src/store/modules/design/mutations.ts b/src/store/modules/design/mutations.ts
index 5b2a290..867ebbd 100644
--- a/src/store/modules/design/mutations.ts
+++ b/src/store/modules/design/mutations.ts
@@ -48,9 +48,9 @@ export default {
   //   //   state.dActiveElement = state.dPage
   //   // }
   // },
-  setShowRotatable(state: Type.Object, e: any) {
-    state.showRotatable = e
-  },
+  // setShowRotatable(state: Type.Object, e: any) {
+  //   state.showRotatable = e
+  // },
   zoomScreenChange(state: Type.Object, e: any) {
     // 画布尺寸适应度强制刷新
     state.zoomScreenChange = Math.random()

From e367de089a9441cc259f138737be1ea52552eade Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Wed, 27 Mar 2024 22:26:34 +0000
Subject: [PATCH 15/23] Merge: main branch

---
 src/components/business/moveable/Moveable.vue | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index 67bb6a3..6b75966 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -17,17 +17,20 @@ import { mapGetters, mapActions, useStore } from 'vuex'
 // import { setTransformAttribute } from '@/common/methods/handleTransform'
 import useSelecto from './Selecto'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore, useControlStore } from '@/pinia'
 
 const store = useStore()
 //  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
 const {
-  dSelectWidgets, dActiveElement, activeMouseEvent, showMoveable, showRotatable, dWidgets, updateRect, updateSelect, guidelines
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines'])
+  dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets, updateRect, updateSelect
+} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
+const controlStore = useControlStore()
+const { guidelines } = storeToRefs(useCanvasStore())
+const { showMoveable, showRotatable } = storeToRefs(controlStore)
 
 let _target: string | null = null
 
-
-
 watch(
   () => dActiveElement.value,
   async (val) => {

From e90935d37c48af491a59f69581a583b66c95774f Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 28 Mar 2024 13:08:39 +0000
Subject: [PATCH 16/23] rebuilt: history store to pinia

---
 src/common/methods/addMouseWheel.ts           |   4 +-
 src/components/business/moveable/Moveable.vue |   4 +-
 .../business/right-click-menu/RcMenu.vue      |   8 +-
 .../modules/layout/designBoard/index.vue      |   6 +-
 .../modules/panel/wrap/TempListWrap.vue       |   6 +-
 src/mixins/methods/dealWithCtrl.ts            |  14 +-
 src/mixins/move.ts                            |   4 +-
 src/mixins/shortcuts.ts                       |  16 +-
 src/pinia/base/index.ts                       |   4 +-
 src/pinia/base/user.ts                        |   4 +-
 src/pinia/design/canvas/index.ts              |  19 ++-
 src/pinia/design/control/index.ts             |  29 +++-
 .../design/history/actions/handleHistory.ts   |  40 +++++
 .../design/history/actions/pushHistory.ts     |  49 ++++++
 src/pinia/design/history/index.ts             |  77 ++++++++-
 src/pinia/design/page/index.ts                |  25 +--
 src/pinia/design/select/index.ts              |   0
 src/pinia/index.ts                            |   4 +-
 src/store/modules/design/actions.ts           |  58 +++----
 src/store/modules/design/index.ts             |  50 +++---
 .../modules/design/methods/handleHistory.ts   | 154 +++++++++---------
 .../modules/design/methods/pushHistory.ts     | 128 +++++++--------
 src/views/Index.vue                           |  26 +--
 src/views/Psd.vue                             |   8 +-
 src/views/components/HeaderOptions.vue        |   7 +-
 25 files changed, 479 insertions(+), 265 deletions(-)
 create mode 100644 src/pinia/design/history/actions/handleHistory.ts
 create mode 100644 src/pinia/design/history/actions/pushHistory.ts
 create mode 100644 src/pinia/design/select/index.ts

diff --git a/src/common/methods/addMouseWheel.ts b/src/common/methods/addMouseWheel.ts
index 6be1dae..77fd4af 100644
--- a/src/common/methods/addMouseWheel.ts
+++ b/src/common/methods/addMouseWheel.ts
@@ -5,6 +5,7 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
+import { useControlStore } from '@/pinia'
 import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
@@ -14,6 +15,7 @@ type TAddEventObj = {
 
 export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
   const box = typeof el === 'string' ? document.getElementById(el) : el
+  const controlStore = useControlStore()
   if (!box) return;
   addEvent(box, 'mousewheel', (e: any) => {
     const ev = e || window.event
@@ -23,7 +25,7 @@ export default function(el: HTMLElement | string, cb: Function, altLimit: boolea
     // } else {
     //   console.log('鼠标滚轮向上++++++++++')
     // }
-    if ((altLimit && store.getters.dAltDown) || !altLimit) {
+    if ((altLimit && controlStore.dAltDown) || !altLimit) {
       ev.preventDefault()
       cb(down)
     }
diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index 6b75966..6628e2b 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -27,7 +27,7 @@ const {
 } = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
 const controlStore = useControlStore()
 const { guidelines } = storeToRefs(useCanvasStore())
-const { showMoveable, showRotatable } = storeToRefs(controlStore)
+const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
 
 let _target: string | null = null
 
@@ -153,7 +153,7 @@ watch(
   () => dSelectWidgets.value,
   (items) => {
     if (!moveable) return
-    const alt = store.getters.dAltDown
+    const alt = dAltDown.value
     // if (items.length > 1) {
     //   console.log('打开组合面板')
     // }
diff --git a/src/components/business/right-click-menu/RcMenu.vue b/src/components/business/right-click-menu/RcMenu.vue
index 22fdf37..e3890f6 100644
--- a/src/components/business/right-click-menu/RcMenu.vue
+++ b/src/components/business/right-click-menu/RcMenu.vue
@@ -19,6 +19,8 @@ import {
 } from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { storeToRefs } from 'pinia';
+import { useControlStore } from '@/pinia';
 
 const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
@@ -26,7 +28,9 @@ const showMenuBg = ref<boolean>(false)
 const widgetMenu = ref<TWidgetItemData[]>({...widget})
 const pageMenu = ref<TWidgetItemData[]>({...page})
 
-const {dActiveElement, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
+const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+const { dAltDown } = storeToRefs(useControlStore())
+
 
 const styleObj = computed(() => {
   return {
@@ -52,7 +56,7 @@ async function mouseRightClick(e: MouseEvent) {
   if (type) {
     let uuid = target.getAttribute('data-uuid') // 设置选中元素
 
-    if (uuid !== '-1' && !dAltDown) {
+    if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
       if (
         widget.parent !== '-1' && 
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 0fd33e4..f8b2fb0 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -94,12 +94,12 @@ const controlStore = useControlStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
   dWidgets,
-  dActiveElement, dSelectWidgets, dAltDown,
+  dActiveElement, dSelectWidgets,
   dHoverUuid
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown'])
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
-const { dDraging, showRotatable } = storeToRefs(useControlStore())
+const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
 
 
 let _dropIn: string | null = ''
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index 844153a..c3be94c 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -32,7 +32,8 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {useControlStore, usePageStore, useUserStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   loading: boolean
@@ -66,7 +67,8 @@ const state = reactive<TState>({
   searchKeyword: '',
 })
 
-const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHistoryParams'])
+const { tempEditing } = useSetupMapGetters(['tempEditing'])
+const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
 const { cate, edit } = route.query
diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts
index e71e727..6384a76 100644
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/src/mixins/methods/dealWithCtrl.ts
@@ -7,6 +7,7 @@
  */
 import store from '@/store'
 import handlePaste from './handlePaste'
+import { useHistoryStore } from '@/pinia'
 
 export default function dealWithCtrl(e: any, _this: any) {
   switch (e.keyCode) {
@@ -77,13 +78,14 @@ function paste() {
  * 撤销
  */
 function undo(shiftKey: any) {
+  const historyStore = useHistoryStore()
   if (shiftKey) {
-    if (!(store.getters.dHistoryParams.index === store.getters.dHistoryParams.length - 1)) {
-      // this.handleHistory('redo')
-      store.dispatch('handleHistory', 'redo')
+    if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
+      historyStore.handleHistory("redo")
+      // store.dispatch('handleHistory', 'redo')
     }
-  } else if (!(store.getters.dHistoryParams.index === -1 || (store.getters.dHistoryParams === 0 && store.getters.dHistoryParams.length === 10))) {
-    // this.handleHistory('undo')
-    store.dispatch('handleHistory', 'undo')
+  } else if (!(historyStore.dHistoryParams.index === -1 || (historyStore.dHistoryParams.index === 0 && historyStore.dHistoryParams.length === 10))) {
+    historyStore.handleHistory("undo")
+    // store.dispatch('handleHistory', 'undo')
   }
 }
diff --git a/src/mixins/move.ts b/src/mixins/move.ts
index 1897bec..5dfb15b 100644
--- a/src/mixins/move.ts
+++ b/src/mixins/move.ts
@@ -5,6 +5,7 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
+import { useControlStore } from '@/pinia'
 import store from '@/store'
 
 const move = {
@@ -49,7 +50,8 @@ const move = {
 const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
-      if (!store.getters.dAltDown) {
+      const controlStore = useControlStore()
+      if (!controlStore.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
         store.commit('setMouseEvent', e)
diff --git a/src/mixins/shortcuts.ts b/src/mixins/shortcuts.ts
index a54f474..8d35af9 100644
--- a/src/mixins/shortcuts.ts
+++ b/src/mixins/shortcuts.ts
@@ -5,13 +5,14 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-09-19 17:29:06
  */
-import store from '@/store'
+// import store from '@/store'
 // const _this: any = {}
 // _this.dHistoryParams = store.getters.dHistoryParams
 
 import keyCodeOptions from './methods/keyCodeOptions'
 import dealWithCtrl from './methods/dealWithCtrl'
 import { useStore, Store } from 'vuex'
+import { TControlStore } from '@/pinia/design/control'
 
 const ignoreNode = ['INPUT', 'TEXTAREA']
 
@@ -34,7 +35,7 @@ let hadDown = false
 
 const shortcuts = {
   methods: {
-    handleKeydowm(store: Store<any>, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
+    handleKeydowm(store: TControlStore, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
       return (e: any) => {
         const nodeName = e.target.nodeName
         if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
@@ -55,14 +56,16 @@ const shortcuts = {
         //   hadDown = false
         // }
         if (shift || ctrl) {
-          store.dispatch('updateAltDown', true)
+          store.updateAltDown(true)
+          // store.dispatch('updateAltDown', true)
           clearInterval(checkCtrl)
           checkCtrl = setInterval(() => {
             // TODO: 防止组合键导致页面失焦无法操作
             if (!document.hasFocus()) {
               clearInterval(checkCtrl)
               hadDown = false
-              store.dispatch('updateAltDown', false)
+              store.updateAltDown(false)
+              // store.dispatch('updateAltDown', false)
             }
           }, 500)
         }
@@ -114,13 +117,14 @@ const shortcuts = {
         keyCodeOptions(e, { f })
       }
     },
-    handleKeyup(store: Store<any>, checkCtrl: number | undefined) {
+    handleKeyup(store: TControlStore, checkCtrl: number | undefined) {
       return (e: any) => {
         console.log(e)
         clearInterval(checkCtrl)
         hadDown = false
         if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
-          store.dispatch('updateAltDown', false)
+          store.updateAltDown(false)
+          // store.dispatch('updateAltDown', false)
         }
       }
     },
diff --git a/src/pinia/base/index.ts b/src/pinia/base/index.ts
index e883bef..02660e8 100644
--- a/src/pinia/base/index.ts
+++ b/src/pinia/base/index.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
 // import actions from './actions'
 // import _config from '@/config'
@@ -46,5 +46,7 @@ const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base
   }
 })
 
+export type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
+
 export default useBaseStore
 
diff --git a/src/pinia/base/user.ts b/src/pinia/base/user.ts
index 23b9d07..844525f 100644
--- a/src/pinia/base/user.ts
+++ b/src/pinia/base/user.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from "pinia"
+import { Store, defineStore } from "pinia"
 
 type TUserStoreState = {
   /** 登录状态 */
@@ -56,4 +56,6 @@ const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>(
   }
 })
 
+export type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
+
 export default useUserStore
diff --git a/src/pinia/design/canvas/index.ts b/src/pinia/design/canvas/index.ts
index a092089..ca7ebd1 100644
--- a/src/pinia/design/canvas/index.ts
+++ b/src/pinia/design/canvas/index.ts
@@ -7,7 +7,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
 type TScreeData = {
   /** 记录编辑界面的宽度 */
@@ -21,7 +21,7 @@ type TGuidelinesData = {
   horizontalGuidelines: number[]
 }
 
-type TCanvasStore = {
+type TCanvasState = {
   /** 画布缩放百分比 */
   dZoom: number
   /** 画布垂直居中修正值 */
@@ -33,10 +33,10 @@ type TCanvasStore = {
 }
 
 type TStoreGetter = {
-  dZoom: (state: TCanvasStore) => number
-  dPaddingTop: (state: TCanvasStore) => number
-  dScreen: (state: TCanvasStore) => TScreeData
-  guidelines: (state: TCanvasStore) => TGuidelinesData
+  dZoom: (state: TCanvasState) => number
+  dPaddingTop: (state: TCanvasState) => number
+  dScreen: (state: TCanvasState) => TScreeData
+  guidelines: (state: TCanvasState) => TGuidelinesData
 }
 
 type TStoreAction = {
@@ -50,7 +50,8 @@ type TStoreAction = {
   updateGuidelines: (lines: TGuidelinesData) => void
 }
 
-export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreAction>("canvasStore", {
+/** 画布全局设置 */
+const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
   state: () => ({
     dZoom: 0, // 画布缩放百分比
     dPaddingTop: 0, // 画布垂直居中修正值
@@ -94,3 +95,7 @@ export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreActi
     }
   }
 })
+
+export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
+
+export default CanvasStore
diff --git a/src/pinia/design/control/index.ts b/src/pinia/design/control/index.ts
index 559f06e..02ea410 100644
--- a/src/pinia/design/control/index.ts
+++ b/src/pinia/design/control/index.ts
@@ -1,4 +1,13 @@
-import { defineStore } from "pinia";
+
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from "pinia";
 
 type TControlState = {
   /** 是否正在移动组件 */
@@ -13,6 +22,8 @@ type TControlState = {
   showMoveable: boolean
   /** 是否显示moveable的旋转按钮 */
   showRotatable: boolean
+  /** 记录是否按下alt键 / 或ctrl */
+  dAltDown: boolean
 }
 
 type TControlAction = {
@@ -22,9 +33,11 @@ type TControlAction = {
   showRefLine: (isRefLine: boolean) => void
   setShowMoveable: (isShowMoveable: boolean) => void
   setShowRotatable: (isShowRotatable: boolean) => void
+  updateAltDown: (isPressAltDown: boolean) => void
 }
 
-export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
+/** 全局控制配置 */
+const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
   state: () => ({
     dMoving: false, // 是否正在移动组件
     dDraging: false, // 是否正在抓取组件
@@ -32,6 +45,7 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
     dShowRefLine: true, // 是否显示参考线
     showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
+    dAltDown: false, // 记录是否按下alt键 / 或ctrl
   }),
   getters: {},
   actions: {
@@ -57,5 +71,14 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
     setShowRotatable(e: boolean) {
       this.showRotatable = e
     },
+    /** TODO 组合操作 */
+    updateAltDown(e: boolean) {
+      this.dAltDown = e
+      console.log('控制组合按键, 成组功能为: realCombined')
+    }
   }
-})
\ No newline at end of file
+})
+
+export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
+
+export default ControlStore
diff --git a/src/pinia/design/history/actions/handleHistory.ts b/src/pinia/design/history/actions/handleHistory.ts
new file mode 100644
index 0000000..e5e0a42
--- /dev/null
+++ b/src/pinia/design/history/actions/handleHistory.ts
@@ -0,0 +1,40 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
+
+import { useControlStore, usePageStore } from "@/pinia"
+import { THistoryStore } from ".."
+
+export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
+  const pageStore = usePageStore()
+  const controlStore = useControlStore()
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  const history = store.dHistory
+  const pageHistory = store.dPageHistory
+  const historyParams = store.dHistoryParams
+  if (action === 'undo') {
+    historyParams.index -= 1 // 下标向前移1 撤销
+    console.log(historyParams.index)
+    if (historyParams.index > -1) {
+      store.state.dWidgets = JSON.parse(history[historyParams.index])
+      pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
+    }
+  } else if (action === 'redo') {
+    historyParams.index += 1 // 下标向后移1 重做
+    // 如果下标小于历史记录列表长度，直接取出历史记录
+    // if (historyParams.index < historyParams.length) {
+    store.state.dWidgets = JSON.parse(history[historyParams.index])
+    pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
+    // } else {
+    //   // 否则设置下标为列表最后一项
+    //   historyParams.index = historyParams.length - 1
+    //   store.state.dWidgets = JSON.parse(history[historyParams.index])
+    //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
+    // }
+  }
+}
\ No newline at end of file
diff --git a/src/pinia/design/history/actions/pushHistory.ts b/src/pinia/design/history/actions/pushHistory.ts
new file mode 100644
index 0000000..4c192f4
--- /dev/null
+++ b/src/pinia/design/history/actions/pushHistory.ts
@@ -0,0 +1,49 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
+
+import { usePageStore } from "@/pinia"
+import { THistoryStore } from ".."
+
+/** push操作历史记录 */
+export function pushHistory(store: THistoryStore, msg: string) {
+  const pageStore = usePageStore()
+  console.log('history压栈', '来源: ' + msg)
+  // 如果有上一次记录，并且与新纪录相同，那么不继续操作
+  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
+    return
+  }
+  if (store.dHistoryParams.index < history.length - 1) {
+    const index = store.dHistoryParams.index + 1
+    const len = history.length - index
+    store.dHistory.splice(index, len)
+    store.dPageHistory.splice(index, len)
+    store.dHistoryParams.length = history.length
+    store.dHistoryParams.index = history.length - 1
+  }
+  store.dHistory.push(JSON.stringify(store.state.dWidgets))
+  store.dPageHistory.push(JSON.stringify(pageStore.dPage))
+  store.dHistoryParams.index = history.length - 1
+  store.dHistoryParams.length = history.length
+}
+
+/** 添加颜色选择历史记录 */
+export function pushColorToHistory(store: THistoryStore, color: string) {
+  const history = store.dColorHistory
+  // 如果已经存在就提到前面来，避免重复
+  const index = history.indexOf(color)
+  if (index !== -1) {
+    history.splice(index, 1)
+  }
+  // 最多保存3种颜色
+  if (history.length === 4) {
+    history.splice(history.length - 1, 1)
+  }
+  // 把最新的颜色放在头部
+  const head = [color]
+  store.dColorHistory = head.concat(history)
+}
diff --git a/src/pinia/design/history/index.ts b/src/pinia/design/history/index.ts
index 031554e..c4fb9d2 100644
--- a/src/pinia/design/history/index.ts
+++ b/src/pinia/design/history/index.ts
@@ -1,13 +1,78 @@
-import { defineStore } from "pinia"
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
 
+import { Store, defineStore } from "pinia"
+import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
+import handleHistory from "./actions/handleHistory"
 
-type THistoryStore = {
-
+export type THistoryParamData = {
+  index: number
+  length: number
+  maxLength: number
 }
 
-export default defineStore("historyStore", {
+type THistoryState = {
+  /** 记录历史操作（保存整个画布的json数据） */
+  dHistory: string[]
+  /** 记录历史操作对应的激活的组件的uuid */
+  dActiveUuidHistory: string[]
+  /** 记录历史操作对应的page */
+  dPageHistory: string[]
+  dHistoryParams: THistoryParamData,
+  /** 记录历史选择的颜色 */
+  dColorHistory: string[]
+}
+
+type THistoryAction = {
+  /**
+   * 保存操作历史，
+   * 修改数据、移动完成后都会自动保存
+   * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
+   */
+  pushHistory: (msg: string) => void
+  /**
+   * 操作历史记录
+   * action为undo表示撤销
+   * action为redo表示重做
+   */
+  handleHistory: (action: "undo" | "redo") => void
+  pushColorToHistory: (color: string) => void
+}
+
+/** 历史记录Store */
+const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryAction>("historyStore", {
   state: () => ({
-    
-  })
+    dHistory: [],
+    dHistoryParams: {
+      index: -1,
+      length: 0,
+      maxLength: 20,
+    },
+    dActiveUuidHistory: [],
+    dColorHistory: [],
+    dPageHistory: []
+  }),
+
+  actions: {
+    pushHistory(msg) {
+      pushHistory(this, msg)
+    },
+    handleHistory(action) {
+      handleHistory(this, action)
+      // 激活组件默认为page
+      store.state.dActiveElement = store.state.dPage
+    },
+    pushColorToHistory(color) {
+      pushColorToHistory(this, color)
+    }
+  }
 })
 
+export type THistoryStore = Store<"historyStore", THistoryState, {}, THistoryAction>
+
+export default HistoryStore
diff --git a/src/pinia/design/page/index.ts b/src/pinia/design/page/index.ts
index d071cb7..0c18e9f 100644
--- a/src/pinia/design/page/index.ts
+++ b/src/pinia/design/page/index.ts
@@ -6,9 +6,9 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
-export type TPageStore = {
+export type TPageState = {
   name: string
   type: string
   uuid: string
@@ -39,21 +39,22 @@ export type TPageStore = {
 }
 
 type TPageGetter = {
-  dPage(state: TPageStore): TPageStore
+  dPage(state: TPageState): TPageState
 }
 
 type TPageActions = {
   /** 更新Page数据 */
-  updatePageData<T extends keyof TPageStore>(data: {
+  updatePageData<T extends keyof TPageState>(data: {
     key: T
-    value: TPageStore[T]
+    value: TPageState[T]
     pushHistory?: boolean
   }): void
   /** 设置dPage */
-  setDPage(data: TPageStore): void
+  setDPage(data: TPageState): void
 }
 
-export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
+/** 页面全局配置 */
+const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
   state: () => ({
     name: '背景页面',
     type: 'page',
@@ -82,7 +83,7 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
   actions: {
     /** 更新Page数据 */
     updatePageData({ key, value, pushHistory }) {
-      const data = this as TPageStore
+      const data = this as TPageState
       if (data[key] !== value || pushHistory) {
         data[key] = value
         // 画布修改先不压入历史栈，因为替换模板后会重复压栈
@@ -90,12 +91,16 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
       }
     },
     /** 设置dPage */
-    setDPage(data: TPageStore) {
+    setDPage(data: TPageState) {
       const cur = this as Record<string, any>
-      const keys = Object.keys(data) as (keyof TPageStore)[];
+      const keys = Object.keys(data) as (keyof TPageState)[];
       keys.forEach(val => {
         cur[val] = data[val]
       })
     }
   }
 })
+
+export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
+
+export default PageStore
\ No newline at end of file
diff --git a/src/pinia/design/select/index.ts b/src/pinia/design/select/index.ts
new file mode 100644
index 0000000..e69de29
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index a4a64d0..b9e730a 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -11,11 +11,13 @@ import useUserStore from "./base/user";
 import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
 import useControlStore from './design/control'
+import useHistoryStore from './design/history'
 
 export {
   useBaseStore,
   useUserStore,
   usePageStore,
   useCanvasStore,
-  useControlStore
+  useControlStore,
+  useHistoryStore,
 }
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
index 1fd4845..aa8306f 100644
--- a/src/store/modules/design/actions.ts
+++ b/src/store/modules/design/actions.ts
@@ -1,8 +1,8 @@
 // import { nextTick } from 'vue'
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
-import pushHistory from './methods/pushHistory'
-import handleHistory from './methods/handleHistory'
+// import pushHistory from './methods/pushHistory'
+// import handleHistory from './methods/handleHistory'
 
 export default {
   /**
@@ -10,19 +10,19 @@ export default {
    * 修改数据、移动完成后都会自动保存
    * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
    */
-  pushHistory(store: any, msg: string) {
-    pushHistory(store, msg)
-  },
+  // pushHistory(store: any, msg: string) {
+  //   pushHistory(store, msg)
+  // },
   /**
    * 操作历史记录
    * action为undo表示撤销
    * action为redo表示重做
    */
-  handleHistory(store: any, action: any) {
-    handleHistory(store, action)
-    // 激活组件默认为page
-    store.state.dActiveElement = store.state.dPage
-  },
+  // handleHistory(store: any, action: any) {
+  //   handleHistory(store, action)
+  //   // 激活组件默认为page
+  //   store.state.dActiveElement = store.state.dPage
+  // },
   
   // updateZoom(store, zoom) {
   //   store.state.dZoom = zoom
@@ -523,21 +523,21 @@ export default {
     // const tag = store.state.dPage.tag
     // store.state.dPage.tag = tag === 0 ? 0.01 : 0
   },
-  pushColorToHistory(store, color) {
-    const history = store.state.dColorHistory
-    // 如果已经存在就提到前面来，避免重复
-    const index = history.indexOf(color)
-    if (index !== -1) {
-      history.splice(index, 1)
-    }
-    // 最多保存3种颜色
-    if (history.length === 4) {
-      history.splice(history.length - 1, 1)
-    }
-    // 把最新的颜色放在头部
-    const head = [color]
-    store.state.dColorHistory = head.concat(history)
-  },
+  // pushColorToHistory(store, color) {
+  //   const history = store.state.dColorHistory
+  //   // 如果已经存在就提到前面来，避免重复
+  //   const index = history.indexOf(color)
+  //   if (index !== -1) {
+  //     history.splice(index, 1)
+  //   }
+  //   // 最多保存3种颜色
+  //   if (history.length === 4) {
+  //     history.splice(history.length - 1, 1)
+  //   }
+  //   // 把最新的颜色放在头部
+  //   const head = [color]
+  //   store.state.dColorHistory = head.concat(history)
+  // },
   updateHoverUuid(store, uuid) {
     store.state.dHoverUuid = uuid
   },
@@ -614,10 +614,10 @@ export default {
     return page
   },
   // TODO 组合操作
-  updateAltDown(store, value) {
-    store.state.dAltDown = value
-    console.log('控制组合按键, 成组功能为: realCombined')
-  },
+  // updateAltDown(store, value) {
+  //   store.state.dAltDown = value
+  //   console.log('控制组合按键, 成组功能为: realCombined')
+  // },
   realCombined(store: any) {
     const selectWidgets = store.state.dSelectWidgets
     if (selectWidgets.length > 1) {
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index f27eb3f..ec4edd5 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -61,16 +61,16 @@ const all = {
     //   record: {},
     // },
     dWidgets: [], // 已使用的组件
-    dHistory: [], // 记录历史操作（保存整个画布的json数据）
-    dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
-    dPageHistory: [], // 记录历史操作对应的page
-    dHistoryParams: {
-      index: -1,
-      length: 0,
-      maxLength: 20,
-    },
-    dColorHistory: [], // 记录历史选择的颜色
-    dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    // dHistory: [], // 记录历史操作（保存整个画布的json数据）
+    // dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
+    // dPageHistory: [], // 记录历史操作对应的page
+    // dHistoryParams: {
+    //   index: -1,
+    //   length: 0,
+    //   maxLength: 20,
+    // },
+    // dColorHistory: [], // 记录历史选择的颜色
+    // dAltDown: false, // 记录是否按下alt键 / 或ctrl
     dSelectWidgets: [], // 记录多选的组件
     dGroupJson: {}, // 组合的json数据
     selectItem: { data: null }, // 记录当前选择的元素, data
@@ -120,12 +120,12 @@ const all = {
     dWidgets(state) {
       return state.dWidgets
     },
-    dHistoryParams(state) {
-      return state.dHistoryParams
-    },
-    dColorHistory(state) {
-      return state.dColorHistory
-    },
+    // dHistoryParams(state) {
+    //   return state.dHistoryParams
+    // },
+    // dColorHistory(state) {
+    //   return state.dColorHistory
+    // },
     dHoverUuid(state) {
       return state.dHoverUuid
     },
@@ -138,9 +138,9 @@ const all = {
     dCopyElement(state) {
       return state.dCopyElement
     },
-    dAltDown(state) {
-      return state.dAltDown
-    },
+    // dAltDown(state) {
+    //   return state.dAltDown
+    // },
     dSelectWidgets(state) {
       return state.dSelectWidgets
     },
@@ -171,12 +171,12 @@ const all = {
     dCropUuid(state: any) {
       return state.dCropUuid
     },
-    dPageHistory(state: any) {
-      return state.dPageHistory
-    },
-    dHistory(state: any) {
-      return state.dHistory
-    },
+    // dPageHistory(state: any) {
+    //   return state.dPageHistory
+    // },
+    // dHistory(state: any) {
+    //   return state.dHistory
+    // },
     // dDragInitData(state: any) {
     //   return state.dDragInitData
     // },
diff --git a/src/store/modules/design/methods/handleHistory.ts b/src/store/modules/design/methods/handleHistory.ts
index dad278f..b318833 100644
--- a/src/store/modules/design/methods/handleHistory.ts
+++ b/src/store/modules/design/methods/handleHistory.ts
@@ -5,84 +5,84 @@
  * @LastEditors: ShawnPhang
  * @LastEditTime: 2022-03-11 10:13:42
  */
-export default function handleHistory(store: any, action: any) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-  const history = store.state.dHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams
-  if (action === 'undo') {
-    historyParams.index -= 1 // 下标向前移1 撤销
-    console.log(historyParams.index)
-    if (historyParams.index > -1) {
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-    }
-  } else if (action === 'redo') {
-    historyParams.index += 1 // 下标向后移1 重做
-    // 如果下标小于历史记录列表长度，直接取出历史记录
-    // if (historyParams.index < historyParams.length) {
-    store.state.dWidgets = JSON.parse(history[historyParams.index])
-    store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-    // } else {
-    //   // 否则设置下标为列表最后一项
-    //   historyParams.index = historyParams.length - 1
-    //   store.state.dWidgets = JSON.parse(history[historyParams.index])
-    //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-    // }
-  }
-}
+// export default function handleHistory(store: any, action: any) {
+//   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+//   const history = store.state.dHistory
+//   const pageHistory = store.state.dPageHistory
+//   const historyParams = store.state.dHistoryParams
+//   if (action === 'undo') {
+//     historyParams.index -= 1 // 下标向前移1 撤销
+//     console.log(historyParams.index)
+//     if (historyParams.index > -1) {
+//       store.state.dWidgets = JSON.parse(history[historyParams.index])
+//       store.state.dPage = JSON.parse(pageHistory[historyParams.index])
+//     }
+//   } else if (action === 'redo') {
+//     historyParams.index += 1 // 下标向后移1 重做
+//     // 如果下标小于历史记录列表长度，直接取出历史记录
+//     // if (historyParams.index < historyParams.length) {
+//     store.state.dWidgets = JSON.parse(history[historyParams.index])
+//     store.state.dPage = JSON.parse(pageHistory[historyParams.index])
+//     // } else {
+//     //   // 否则设置下标为列表最后一项
+//     //   historyParams.index = historyParams.length - 1
+//     //   store.state.dWidgets = JSON.parse(history[historyParams.index])
+//     //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
+//     // }
+//   }
+// }
 
-function handleHistory_old(store: any, action: any) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-  const history = store.state.dHistory
-  // const uuidHistory = store.state.dActiveUuidHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams
+// function handleHistory_old(store: any, action: any) {
+//   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+//   const history = store.state.dHistory
+//   // const uuidHistory = store.state.dActiveUuidHistory
+//   const pageHistory = store.state.dPageHistory
+//   const historyParams = store.state.dHistoryParams
 
-  // let uuid = '-1'
-  console.log(action, historyParams)
+//   // let uuid = '-1'
+//   console.log(action, historyParams)
 
-  if (action === 'undo') {
-    // 下标向前移1 撤销
-    historyParams.index -= 1
-    // 如果下表大于等于0，直接取出历史记录
-    if (historyParams.index >= 0) {
-      console.log(1, history)
-      console.log(2, pageHistory)
+//   if (action === 'undo') {
+//     // 下标向前移1 撤销
+//     historyParams.index -= 1
+//     // 如果下表大于等于0，直接取出历史记录
+//     if (historyParams.index >= 0) {
+//       console.log(1, history)
+//       console.log(2, pageHistory)
 
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-      // uuid = uuidHistory[historyParams.index]
-    } else if (historyParams.length < 10) {
-      // 否则如果历史记录长度小于10，则设置组件为空
-      historyParams.index = -1
-      store.state.dWidgets = []
-      store.state.dPage = JSON.parse(pageHistory[0])
-    } else {
-      historyParams.index = -1
-    }
-  } else if (action === 'redo') {
-    // 下标向后移1 重做
-    historyParams.index += 1
-    // 如果下标小于历史记录列表长度，直接取出历史记录
-    if (historyParams.index < historyParams.length) {
-      console.log(1, history)
-      console.log(2, pageHistory)
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
-      // uuid = uuidHistory[historyParams.index]
-    } else {
-      // 否则设置下标为列表最后一项
-      historyParams.index = historyParams.length - 1
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-      // uuid = uuidHistory[historyParams.index]
-    }
-  }
-  // 激活组件默认为page
-  // let element = store.state.dPage
-  // if (uuid !== '-1') {
-  //   element = store.state.dWidgets.find((item) => item.uuid === uuid)
-  // }
-  // store.state.dActiveElement = element
-}
+//       store.state.dWidgets = JSON.parse(history[historyParams.index])
+//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
+//       // uuid = uuidHistory[historyParams.index]
+//     } else if (historyParams.length < 10) {
+//       // 否则如果历史记录长度小于10，则设置组件为空
+//       historyParams.index = -1
+//       store.state.dWidgets = []
+//       store.state.dPage = JSON.parse(pageHistory[0])
+//     } else {
+//       historyParams.index = -1
+//     }
+//   } else if (action === 'redo') {
+//     // 下标向后移1 重做
+//     historyParams.index += 1
+//     // 如果下标小于历史记录列表长度，直接取出历史记录
+//     if (historyParams.index < historyParams.length) {
+//       console.log(1, history)
+//       console.log(2, pageHistory)
+//       store.state.dWidgets = JSON.parse(history[historyParams.index])
+//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
+//       // uuid = uuidHistory[historyParams.index]
+//     } else {
+//       // 否则设置下标为列表最后一项
+//       historyParams.index = historyParams.length - 1
+//       store.state.dWidgets = JSON.parse(history[historyParams.index])
+//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
+//       // uuid = uuidHistory[historyParams.index]
+//     }
+//   }
+//   // 激活组件默认为page
+//   // let element = store.state.dPage
+//   // if (uuid !== '-1') {
+//   //   element = store.state.dWidgets.find((item) => item.uuid === uuid)
+//   // }
+//   // store.state.dActiveElement = element
+// }
diff --git a/src/store/modules/design/methods/pushHistory.ts b/src/store/modules/design/methods/pushHistory.ts
index fa58096..c65f200 100644
--- a/src/store/modules/design/methods/pushHistory.ts
+++ b/src/store/modules/design/methods/pushHistory.ts
@@ -5,69 +5,69 @@
  * @LastEditors: ShawnPhang
  * @LastEditTime: 2022-03-11 10:12:50
  */
-export default function pushHistory(store: any, msg: string) {
-  console.log('history压栈', '来源: ' + msg)
-  const history = store.state.dHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams // index = length - 1
-  // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-  if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
-    return
-  }
-  if (historyParams.index < history.length - 1) {
-    const index = historyParams.index + 1
-    const len = history.length - index
-    history.splice(index, len)
-    pageHistory.splice(index, len)
-    historyParams.length = history.length
-    historyParams.index = history.length - 1
-  }
-  history.push(JSON.stringify(store.state.dWidgets))
-  pageHistory.push(JSON.stringify(store.state.dPage))
-  historyParams.index = history.length - 1
-  historyParams.length = history.length
-}
+// export default function pushHistory(store: any, msg: string) {
+//   console.log('history压栈', '来源: ' + msg)
+//   const history = store.state.dHistory
+//   const pageHistory = store.state.dPageHistory
+//   const historyParams = store.state.dHistoryParams // index = length - 1
+//   // 如果有上一次记录，并且与新纪录相同，那么不继续操作
+//   if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
+//     return
+//   }
+//   if (historyParams.index < history.length - 1) {
+//     const index = historyParams.index + 1
+//     const len = history.length - index
+//     history.splice(index, len)
+//     pageHistory.splice(index, len)
+//     historyParams.length = history.length
+//     historyParams.index = history.length - 1
+//   }
+//   history.push(JSON.stringify(store.state.dWidgets))
+//   pageHistory.push(JSON.stringify(store.state.dPage))
+//   historyParams.index = history.length - 1
+//   historyParams.length = history.length
+// }
 
-function pushHistory_old(store: any) {
-  // 历史记录列表
-  const history = store.state.dHistory
-  // 历史激活组件记录列表
-  // const uuidHistory = store.state.dActiveUuidHistory
-  // 历史page记录列表
-  const pageHistory = store.state.dPageHistory
-  // 历史记录列表参数（长度和下标）
-  const historyParams = store.state.dHistoryParams
+// function pushHistory_old(store: any) {
+//   // 历史记录列表
+//   const history = store.state.dHistory
+//   // 历史激活组件记录列表
+//   // const uuidHistory = store.state.dActiveUuidHistory
+//   // 历史page记录列表
+//   const pageHistory = store.state.dPageHistory
+//   // 历史记录列表参数（长度和下标）
+//   const historyParams = store.state.dHistoryParams
 
-  // 下标不等于-1表示已经存在历史操作记录
-  // 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
-  if (historyParams.index < history.length - 1) {
-    const index = historyParams.index + 1
-    const len = history.length - index
-    // 删除下标之后的所有历史记录
-    history.splice(index, len)
-    // 删除下标之后的所有uuid记录
-    // uuidHistory.splice(index, len)
-    // 删除下标之后的所有page记录
-    pageHistory.splice(index + 1, len - 1)
-    historyParams.length = history.length
-  }
-  // 保存当前操作进历史记录
-  if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
-    history.push(JSON.stringify(store.state.dWidgets))
-    // uuidHistory.push(store.state.dActiveElement.uuid)
-    pageHistory.push(JSON.stringify(store.state.dPage))
-    historyParams.index = history.length - 1
-    historyParams.length = history.length
-  }
-  // 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
-  if (history.length > 20) {
-    history.splice(0, 1)
-    // uuidHistory.splice(0, 1)
-    pageHistory.splice(0, 1)
-  }
-  if (pageHistory.length - 1 > history.length) {
-    pageHistory.splice(0, 1)
-  }
-  // historyParams.index = history.length - 1
-  // historyParams.length = history.length
-}
+//   // 下标不等于-1表示已经存在历史操作记录
+//   // 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
+//   if (historyParams.index < history.length - 1) {
+//     const index = historyParams.index + 1
+//     const len = history.length - index
+//     // 删除下标之后的所有历史记录
+//     history.splice(index, len)
+//     // 删除下标之后的所有uuid记录
+//     // uuidHistory.splice(index, len)
+//     // 删除下标之后的所有page记录
+//     pageHistory.splice(index + 1, len - 1)
+//     historyParams.length = history.length
+//   }
+//   // 保存当前操作进历史记录
+//   if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
+//     history.push(JSON.stringify(store.state.dWidgets))
+//     // uuidHistory.push(store.state.dActiveElement.uuid)
+//     pageHistory.push(JSON.stringify(store.state.dPage))
+//     historyParams.index = history.length - 1
+//     historyParams.length = history.length
+//   }
+//   // 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
+//   if (history.length > 20) {
+//     history.splice(0, 1)
+//     // uuidHistory.splice(0, 1)
+//     pageHistory.splice(0, 1)
+//   }
+//   if (pageHistory.length - 1 > history.length) {
+//     pageHistory.splice(0, 1)
+//   }
+//   // historyParams.index = history.length - 1
+//   // historyParams.length = history.length
+// }
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 48ad3df..68dd86c 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -72,7 +72,7 @@ import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -84,10 +84,12 @@ type TState = {
 }
 
 const {
-  dActiveElement, dHistoryParams, dCopyElement
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
+  dActiveElement, dCopyElement
+} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+const historyStore = useHistoryStore()
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom } = storeToRefs(useCanvasStore())
+const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 
 const state = reactive<TState>({
@@ -104,10 +106,11 @@ const state = reactive<TState>({
 const optionsRef = ref<typeof HeaderOptions | null>(null)
 const zoomControlRef = ref<typeof zoomControl | null>(null)
 const store = useStore()
+const controlStore = useControlStore()
 const route = useRoute()
 
 const beforeUnload = function (e: Event): any {
-  if (store.getters.dHistoryParams.length > 0) {
+  if (dHistoryParams.value.length > 0) {
     const confirmationMessage: string = '系统不会自动保存您未修改的内容';
     (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
     return confirmationMessage // Gecko and WebKit
@@ -129,7 +132,7 @@ defineExpose({
 const undoable = computed(() => {
   return !(
     dHistoryParams.value.index === -1 || 
-    (dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
+    (dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
 })
 
 const redoable = computed(() => {
@@ -160,22 +163,23 @@ onMounted(() => {
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadData()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', fixTopBarScroll)
   // window.removeEventListener('click', this.clickListener)
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
     // ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
 
-function handleHistory(data: string) {
-  store.dispatch('handleHistory', data)
+function handleHistory(data: "undo" | "redo") {
+  historyStore.handleHistory(data)
+  // store.dispatch('handleHistory', data)
 }
 
 function changeLineGuides() {
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index af1a81c..776617d 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -187,15 +187,15 @@ let checkCtrl: number | undefined
 
 onMounted(() => {
   const instance = getCurrentInstance()
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadJS()
 })
 
 onBeforeMount(() => {
   const instance = getCurrentInstance()
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
 // ...mapActions(['selectWidget']),
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index 4d2d471..ce1c980 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore, useUserStore } from '@/pinia/index'
+import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -66,12 +66,13 @@ const store = useStore()
 const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
-  dWidgets, tempEditing, dHistory, dPageHistory
-} = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+  dWidgets, tempEditing
+} = useSetupMapGetters(['dWidgets', 'tempEditing'])
 const pageStore = usePageStore()
 const controlStore = useControlStore()
 
 const { dPage } = storeToRefs(pageStore)
+const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
 
 
 const state = reactive<TState>({

From ae875b7bb450260bbd4fe517562d74e0e478762f Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Thu, 28 Mar 2024 17:41:33 +0000
Subject: [PATCH 17/23] rebuilt: store to pinia

---
 src/pinia/design/canvas/index.ts              |    9 +-
 src/pinia/design/control/index.ts             |   34 +-
 src/pinia/design/force/index.ts               |   45 +
 src/pinia/design/group/action/index.ts        |  130 ++
 src/pinia/design/group/index.ts               |   38 +
 .../design/history/actions/pushHistory.ts     |    7 +-
 src/pinia/design/history/index.ts             |    5 +-
 src/pinia/design/select/index.ts              |    0
 src/pinia/design/widget/actions/align.ts      |   90 ++
 src/pinia/design/widget/actions/clone.ts      |   81 +
 src/pinia/design/widget/actions/group.ts      |   36 +
 src/pinia/design/widget/actions/index.ts      |  125 ++
 src/pinia/design/widget/actions/layer.ts      |  104 ++
 src/pinia/design/widget/actions/resize.ts     |  126 ++
 src/pinia/design/widget/actions/select.ts     |  104 ++
 src/pinia/design/widget/actions/template.ts   |   30 +
 src/pinia/design/widget/actions/widget.ts     |  237 +++
 src/pinia/design/widget/getter/index.ts       |   25 +
 src/pinia/design/widget/index.ts              |  174 ++
 src/pinia/index.ts                            |    6 +
 src/store/modules/design/actions.ts           | 1432 ++++++++---------
 src/store/modules/design/index.ts             |  136 +-
 src/store/modules/design/mutations.ts         |   72 +-
 23 files changed, 2220 insertions(+), 826 deletions(-)
 create mode 100644 src/pinia/design/force/index.ts
 create mode 100644 src/pinia/design/group/action/index.ts
 create mode 100644 src/pinia/design/group/index.ts
 delete mode 100644 src/pinia/design/select/index.ts
 create mode 100644 src/pinia/design/widget/actions/align.ts
 create mode 100644 src/pinia/design/widget/actions/clone.ts
 create mode 100644 src/pinia/design/widget/actions/group.ts
 create mode 100644 src/pinia/design/widget/actions/index.ts
 create mode 100644 src/pinia/design/widget/actions/layer.ts
 create mode 100644 src/pinia/design/widget/actions/resize.ts
 create mode 100644 src/pinia/design/widget/actions/select.ts
 create mode 100644 src/pinia/design/widget/actions/template.ts
 create mode 100644 src/pinia/design/widget/actions/widget.ts
 create mode 100644 src/pinia/design/widget/getter/index.ts
 create mode 100644 src/pinia/design/widget/index.ts

diff --git a/src/pinia/design/canvas/index.ts b/src/pinia/design/canvas/index.ts
index ca7ebd1..e0d218c 100644
--- a/src/pinia/design/canvas/index.ts
+++ b/src/pinia/design/canvas/index.ts
@@ -48,6 +48,8 @@ type TStoreAction = {
   updateScreen: (data: TScreeData) => void
   /** 修改标尺线 */
   updateGuidelines: (lines: TGuidelinesData) => void
+  /** 强制重绘画布 */
+  reChangeCanvas: () => void
 }
 
 /** 画布全局设置 */
@@ -92,7 +94,12 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
     /** 修改标尺线 */
     updateGuidelines(lines: TGuidelinesData) {
       this.guidelines = { ...this.guidelines, ...lines }
-    }
+    },
+    /** 强制重绘画布 */
+    reChangeCanvas() {
+      // const tag = this.dPage.tag
+      // this.dPage.tag = tag === 0 ? 0.01 : 0
+    },
   }
 })
 
diff --git a/src/pinia/design/control/index.ts b/src/pinia/design/control/index.ts
index 02ea410..15bd300 100644
--- a/src/pinia/design/control/index.ts
+++ b/src/pinia/design/control/index.ts
@@ -7,6 +7,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
+import { useHistoryStore } from "@/pinia";
 import { Store, defineStore } from "pinia";
 
 type TControlState = {
@@ -24,6 +25,8 @@ type TControlState = {
   showRotatable: boolean
   /** 记录是否按下alt键 / 或ctrl */
   dAltDown: boolean
+  /** 正在编辑or裁剪的组件id */
+  dCropUuid: string
 }
 
 type TControlAction = {
@@ -34,6 +37,12 @@ type TControlAction = {
   setShowMoveable: (isShowMoveable: boolean) => void
   setShowRotatable: (isShowRotatable: boolean) => void
   updateAltDown: (isPressAltDown: boolean) => void
+  /** 组件调整结束 */
+  stopDResize: () => void
+  /** 组件移动结束 */
+  stopDMove: () => void
+  /** 设置正在裁剪or编辑的组件 */
+  setCropUuid: (uuid: string) => void
 }
 
 /** 全局控制配置 */
@@ -46,6 +55,7 @@ const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAct
     showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
     dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    dCropUuid: '-1', // 正在编辑or裁剪的组件id
   }),
   getters: {},
   actions: {
@@ -75,7 +85,29 @@ const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAct
     updateAltDown(e: boolean) {
       this.dAltDown = e
       console.log('控制组合按键, 成组功能为: realCombined')
-    }
+    },
+    /** 组件调整结束 */
+    stopDResize() {
+      if (this.dResizeing) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory('stopDResize')
+        // store.dispatch('pushHistory', 'stopDResize')
+      }
+      this.dResizeing = false
+    },
+    /** 组件移动结束 */
+    stopDMove() {
+      if (this.dMoving) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory("stopDMove")
+        // store.dispatch('pushHistory', 'stopDMove')
+      }
+      this.dMoving = false
+    },
+    setCropUuid(uuid: string) {
+      // 设置正在裁剪or编辑的组件
+      this.dCropUuid = uuid
+    },
   }
 })
 
diff --git a/src/pinia/design/force/index.ts b/src/pinia/design/force/index.ts
new file mode 100644
index 0000000..3206744
--- /dev/null
+++ b/src/pinia/design/force/index.ts
@@ -0,0 +1,45 @@
+import { Store, defineStore } from "pinia";
+
+
+
+type TForceState = {
+  /** 画布强制刷新适应度 */
+  zoomScreenChange: number | null
+  /** 强制刷新操作框 */
+  updateRect: number | null
+  /** 强制设置选择元素 */
+  updateSelect: number | null
+}
+
+type TForceAction = {
+  setZoomScreenChange: () => void
+  setUpdateRect: () => void
+  setUpdateSelect: () => void
+}
+
+const ForceStore = defineStore<"forceStore", TForceState, {}, TForceAction>("forceStore", {
+  state: () => ({
+    zoomScreenChange: null, // 画布强制刷新适应度
+    updateRect: null, // 强制刷新操作框
+    updateSelect: null, // 强制设置选择元素
+  }),
+
+  actions: {
+    setZoomScreenChange() {
+      // 画布尺寸适应度强制刷新
+      this.zoomScreenChange = Math.random()
+    },
+    setUpdateRect() {
+      // 强制刷新操作框
+      this.updateRect = Math.random()
+    },
+    setUpdateSelect() {
+      // 强制触发元素选择
+      this.updateSelect = Math.random()
+    },
+  }
+})
+
+export type TForceStore = Store<"forceStore", TForceState, {}, TForceAction>
+
+export default ForceStore
diff --git a/src/pinia/design/group/action/index.ts b/src/pinia/design/group/action/index.ts
new file mode 100644
index 0000000..94268f0
--- /dev/null
+++ b/src/pinia/design/group/action/index.ts
@@ -0,0 +1,130 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { customAlphabet } from 'nanoid/non-secure'
+import { TGroupStore } from '..'
+import { useHistoryStore, usePageStore, useWidgetStore } from '@/pinia'
+import { TdWidgetData } from '../../widget'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+export function realCombined(store: TGroupStore) {
+  const widgetStore = useWidgetStore()
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+
+  const selectWidgets = widgetStore.dSelectWidgets
+  if (selectWidgets.length > 1) {
+    const widgets = widgetStore.dWidgets
+    const group: TdWidgetData = JSON.parse(JSON.stringify(store.dGroupJson))
+    group.uuid = nanoid()
+    widgets.push(group)
+    let left = Number(pageStore.dPage.width)
+    let top = Number(pageStore.dPage.height)
+    let right = 0
+    let bottom = 0
+    const sortWidgets = [] // 顺序取出元素
+    const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+    for (const w of widgets) {
+      selectkeys.includes(w.uuid) && sortWidgets.push(w)
+    }
+    for (let i = 0; i < sortWidgets.length; ++i) {
+      const uuid = sortWidgets[i].uuid
+      const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+      const widget = { ...widgets[index] } // clone
+      if (widget.isContainer) {
+        widgets.splice(index, 1) // 删除旧组合
+        for (let i = 0; i < widgets.length; i++) {
+          const item = widgets[i]
+          item.parent === widget.uuid && (item.parent = group.uuid)
+          // if (item.parent === widget.uuid) {
+          //   item.parent = group.uuid
+          //   // 重新排列
+          //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
+          //   // widgets.splice(index, 1)
+          //   // widgets.push(item)
+          // }
+        }
+      } else {
+        widget.parent = group.uuid
+        // 重新排列
+        widgets.splice(index, 1)
+        widgets.push(widget)
+      }
+
+      // sortWidgets.push({
+      //   index: index,
+      //   widget: widget,
+      // })
+      left = Math.min(left, widget.left)
+      top = Math.min(top, widget.top)
+      right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
+      bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
+    }
+    // sortWidgets.sort((a, b) => a.index > b.index)
+    // for (let i = 0; i < sortWidgets.length; ++i) {
+    //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
+    //     widgets.splice(index, 1)
+    //     widgets.push(sortWidgets[i].widget)
+    // }
+
+    group.left = Number(left)
+    group.top = Number(top)
+    group.width = Number(right - left)
+    group.height = Number(bottom - top)
+    widgetStore.dActiveElement = group
+    widgetStore.dSelectWidgets = []
+
+    historyStore.pushHistory('realCombined')
+    // store.dispatch('pushHistory', 'realCombined')
+    // store.dispatch('reChangeCanvas')
+  }
+}
+
+export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
+  const widgetStore = useWidgetStore()
+  const pageStore = usePageStore()
+
+  const selectWidgets = widgetStore.dSelectWidgets
+  return new Promise((resolve) => {
+    if (selectWidgets.length > 1) {
+      const widgets = widgetStore.dWidgets
+      const group = JSON.parse(store.dGroupJson)
+      group.uuid = nanoid()
+      // widgets.push(group)
+      let left = pageStore.dPage.width
+      let top = pageStore.dPage.height
+      let right = 0
+      let bottom = 0
+      const sortWidgets = [] // 顺序取出元素
+      const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+      for (const w of widgets) {
+        selectkeys.includes(w.uuid) && sortWidgets.push(w)
+      }
+      for (let i = 0; i < sortWidgets.length; ++i) {
+        const uuid = sortWidgets[i].uuid
+        const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+        const widget = { ...widgets[index] } // clone
+        left = Math.min(left, widget.left)
+        top = Math.min(top, widget.top)
+        right = Math.max(right, Number(widget.width) + Number(widget.left))
+        bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
+      }
+
+      group.left = left
+      group.top = top
+      group.width = right - left
+      group.height = bottom - top
+
+      resolve(group)
+    }
+  })
+}
+
+export function initGroupJson(store: TGroupStore, json: string) {
+  store.dGroupJson = json
+}
diff --git a/src/pinia/design/group/index.ts b/src/pinia/design/group/index.ts
new file mode 100644
index 0000000..a7d4208
--- /dev/null
+++ b/src/pinia/design/group/index.ts
@@ -0,0 +1,38 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { Store, defineStore } from "pinia";
+import { getCombined, initGroupJson, realCombined } from "./action";
+import { TdWidgetData } from "../widget";
+
+type TGroupState = {
+  /** 组合的json数据 */
+  dGroupJson: string
+}
+
+type TGroupAction = {
+  realCombined(): void
+  getCombined(): Promise<TdWidgetData>
+  initGroupJson(data: string): void
+}
+
+const GroupStore = defineStore<"groupStore", TGroupState, {}, TGroupAction>("groupStore", {
+  state: () => ({
+    dGroupJson: "" // 组合的json数据
+  }),
+
+  actions: {
+    realCombined() { realCombined(this) },
+    getCombined() { return getCombined(this) },
+    initGroupJson(data) { initGroupJson(this, data) },
+  }
+})
+
+export type TGroupStore = Store<"groupStore", TGroupState, {}, TGroupAction>
+
+export default GroupStore
diff --git a/src/pinia/design/history/actions/pushHistory.ts b/src/pinia/design/history/actions/pushHistory.ts
index 4c192f4..ce832b6 100644
--- a/src/pinia/design/history/actions/pushHistory.ts
+++ b/src/pinia/design/history/actions/pushHistory.ts
@@ -6,15 +6,16 @@
  * @LastEditTime: 2024-03-27 21:00:00
  */
 
-import { usePageStore } from "@/pinia"
+import { usePageStore, useWidgetStore } from "@/pinia"
 import { THistoryStore } from ".."
 
 /** push操作历史记录 */
 export function pushHistory(store: THistoryStore, msg: string) {
   const pageStore = usePageStore()
+  const selectStore = useWidgetStore()
   console.log('history压栈', '来源: ' + msg)
   // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
+  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(selectStore.dWidgets)) {
     return
   }
   if (store.dHistoryParams.index < history.length - 1) {
@@ -25,7 +26,7 @@ export function pushHistory(store: THistoryStore, msg: string) {
     store.dHistoryParams.length = history.length
     store.dHistoryParams.index = history.length - 1
   }
-  store.dHistory.push(JSON.stringify(store.state.dWidgets))
+  store.dHistory.push(JSON.stringify(selectStore.dWidgets))
   store.dPageHistory.push(JSON.stringify(pageStore.dPage))
   store.dHistoryParams.index = history.length - 1
   store.dHistoryParams.length = history.length
diff --git a/src/pinia/design/history/index.ts b/src/pinia/design/history/index.ts
index c4fb9d2..54843b6 100644
--- a/src/pinia/design/history/index.ts
+++ b/src/pinia/design/history/index.ts
@@ -9,6 +9,7 @@
 import { Store, defineStore } from "pinia"
 import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
 import handleHistory from "./actions/handleHistory"
+import { usePageStore, useWidgetStore } from "@/pinia"
 
 export type THistoryParamData = {
   index: number
@@ -63,9 +64,11 @@ const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryActi
       pushHistory(this, msg)
     },
     handleHistory(action) {
+      const selectStore = useWidgetStore()
+      const pageStore = usePageStore()
       handleHistory(this, action)
       // 激活组件默认为page
-      store.state.dActiveElement = store.state.dPage
+      selectStore.dActiveElement = pageStore.dPage
     },
     pushColorToHistory(color) {
       pushColorToHistory(this, color)
diff --git a/src/pinia/design/select/index.ts b/src/pinia/design/select/index.ts
deleted file mode 100644
index e69de29..0000000
diff --git a/src/pinia/design/widget/actions/align.ts b/src/pinia/design/widget/actions/align.ts
new file mode 100644
index 0000000..8fb9c14
--- /dev/null
+++ b/src/pinia/design/widget/actions/align.ts
@@ -0,0 +1,90 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/pinia"
+import { TWidgetStore, TdWidgetData } from ".."
+
+type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
+
+export type TUpdateAlignData = {
+  align: TAlign
+  uuid: string
+  group: TdWidgetData
+}
+
+export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+
+  const widgets = store.dWidgets
+  const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.dActiveElement
+  let parent = group || pageStore.dPage
+
+  if (!target) return
+
+  if (target.parent !== '-1') {
+    const tmp = widgets.find((item: any) => item.uuid === target.parent)
+    tmp && (parent = tmp)
+  }
+
+  let left = target.left
+  let top = target.top
+  let pw = parent.record.width || parent.width
+  let ph = parent.record.height || parent.height
+
+  if (parent.uuid === '-1') {
+    pw = parent.width
+    ph = parent.height
+  }
+
+  const targetW = target.width
+  const targetH = target.height
+  switch (align) {
+    case 'left':
+      left = parent.left
+      break
+    case 'ch': // 水平居中
+      left = parent.left + pw / 2 - targetW / 2
+      break
+    case 'right':
+      left = parent.left + pw - targetW
+      break
+    case 'top':
+      top = parent.top
+      break
+    case 'cv': // 垂直居中
+      top = parent.top + ph / 2 - targetH / 2
+      break
+    case 'bottom':
+      top = parent.top + ph - targetH
+      break
+  }
+
+  if (target.left !== left || target.top !== top) {
+    if (target.isContainer) {
+      const dLeft = target.left - left
+      const dTop = target.top - top
+      const len = widgets.length
+      for (let i = 0; i < len; ++i) {
+        const widget = widgets[i]
+        if (widget.parent === target.uuid) {
+          widget.left -= dLeft
+          widget.top -= dTop
+        }
+      }
+    }
+    target.left = left
+    target.top = top
+
+    historyStore.pushHistory("updateAlign")
+    // store.dispatch('pushHistory', 'updateAlign')
+    canvasStore.reChangeCanvas()
+    // store.dispatch('reChangeCanvas')
+  }
+}
diff --git a/src/pinia/design/widget/actions/clone.ts b/src/pinia/design/widget/actions/clone.ts
new file mode 100644
index 0000000..e9a1142
--- /dev/null
+++ b/src/pinia/design/widget/actions/clone.ts
@@ -0,0 +1,81 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore } from "@/pinia"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+/** 拷贝组件 */
+export function copyWidget(store: TWidgetStore) {
+  const activeElement = JSON.parse(JSON.stringify(store.dActiveElement))
+  if (activeElement.type === 'page') {
+    return
+  }
+  navigator.clipboard.writeText('') // 清空系统剪贴板内容
+  const container = []
+  const selectWidgets = store.dSelectWidgets
+  if (selectWidgets.length === 0) {
+    const uuid = activeElement.uuid
+    container.push(activeElement)
+    if (activeElement.isContainer) {
+      const widgets = store.dWidgets
+      for (let i = 0; i < widgets.length; ++i) {
+        if (widgets[i].parent === uuid) {
+          container.push(widgets[i])
+        }
+      }
+    }
+  } else {
+    for (let i = 0; i < selectWidgets.length; ++i) {
+      const uuid = selectWidgets[i].uuid
+      container.push(selectWidgets[i])
+      if (selectWidgets[i].isContainer) {
+        const widgets = store.dWidgets
+        for (let i = 0; i < widgets.length; ++i) {
+          if (widgets[i].parent === uuid) {
+            container.push(widgets[i])
+          }
+        }
+      }
+    }
+  }
+  store.dCopyElement = JSON.parse(JSON.stringify(container))
+}
+
+/** 粘贴组件 */
+export function pasteWidget(store: TWidgetStore) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  const copyElement: TdWidgetData[] = JSON.parse(JSON.stringify(store.dCopyElement))
+  const container = copyElement.find((item) => item.isContainer)
+  for (let i = 0; i < copyElement.length; ++i) {
+    copyElement[i].uuid = nanoid()
+    if (container && copyElement[i].uuid !== container.uuid) {
+      copyElement[i].parent = container.uuid
+    } else {
+      copyElement[i].parent = '-1'
+    }
+    copyElement[i].top += 30
+    copyElement[i].left += 30
+  }
+  store.dWidgets = store.dWidgets.concat(copyElement)
+  store.dActiveElement = copyElement[0]
+  store.dSelectWidgets = copyElement
+  if (container) {
+    store.dActiveElement = container
+    store.dSelectWidgets = []
+  }
+
+  historyStore.pushHistory("pasteWidget")
+  // store.dispatch('pushHistory', 'pasteWidget')
+  store.copyWidget()
+  // store.dispatch('copyWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
diff --git a/src/pinia/design/widget/actions/group.ts b/src/pinia/design/widget/actions/group.ts
new file mode 100644
index 0000000..297d83a
--- /dev/null
+++ b/src/pinia/design/widget/actions/group.ts
@@ -0,0 +1,36 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore } from "@/pinia"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+
+export function addGroup(store: TWidgetStore, group: TdWidgetData[]) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  let parent: TdWidgetData | null = null
+  group.forEach((item) => {
+    item.uuid = nanoid() // 重设id
+    item.type === 'w-group' && (parent = item) // 找出父组件
+  })
+  group.forEach((item) => {
+    !item.isContainer && parent && (item.parent = parent.uuid) // 重设父id
+    item.text && (item.text = decodeURIComponent(item.text))
+    store.dWidgets.push(item)
+  })
+  // 选中组件
+  const len = store.dWidgets.length
+  store.dActiveElement = store.dWidgets[len - 1]
+
+  historyStore.pushHistory("addGroup")
+  // store.dispatch('pushHistory', 'addGroup')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
\ No newline at end of file
diff --git a/src/pinia/design/widget/actions/index.ts b/src/pinia/design/widget/actions/index.ts
new file mode 100644
index 0000000..557eac6
--- /dev/null
+++ b/src/pinia/design/widget/actions/index.ts
@@ -0,0 +1,125 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useControlStore, usePageStore } from "@/pinia"
+import { TWidgetStore } from ".."
+
+export type TInidDMovePayload = {
+  startX: number
+  startY: number
+  originX: number
+  originY: number
+}
+
+/** 设置 mousemove 操作的初始值 */
+export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
+  store.dMouseXY.x = payload.startX
+  store.dMouseXY.y = payload.startY
+  store.dActiveWidgetXY.x = payload.originX
+  store.dActiveWidgetXY.y = payload.originY
+}
+
+export type TMovePayload = {
+  donotMove: boolean
+  x: number
+  y: number
+}
+
+/** 移动组件 */
+export function dMove(store: TWidgetStore, payload: TMovePayload) {
+  const page = usePageStore().dPage
+  const canvasStore = useCanvasStore()
+  const controlStore = useControlStore()
+  const { donotMove } = payload // 由moveable代理移动
+  controlStore.setdMoving(true)
+
+
+  const target = store.dActiveElement
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+
+  let parent = page
+  if (!target) return
+  if (target.parent !== '-1') {
+    const widget = store.dWidgets.find((item) => item.uuid === target.parent)
+    if (widget) {
+      parent = widget
+    }
+  }
+
+  const dx = payload.x - mouseXY.x
+  const dy = payload.y - mouseXY.y
+  let left = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
+  let top = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
+
+  left = Math.max(Math.min(left, page.width - target.record.width), 0)
+  top = Math.max(Math.min(top, page.height - target.record.height), 0)
+
+  if (target.isContainer) {
+    const dLeft = target.left - left
+    const dTop = target.top - top
+    const len = store.dWidgets.length
+    for (let i = 0; i < len; ++i) {
+      const widget = store.dWidgets[i]
+      if (widget.parent === target.uuid) {
+        widget.left -= dLeft
+        widget.top -= dTop
+      }
+    }
+  }
+
+  if (!donotMove) {
+    target.left = left
+    target.top = top
+  }
+
+  if (parent.uuid !== '-1') {
+    updateGroupSize(store, parent.uuid)
+    // store.dispatch('updateGroupSize', parent.uuid)
+  }
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export function updateGroupSize(store: TWidgetStore, uuid: string) {
+  const pageStore = usePageStore()
+  const widgets = store.dWidgets
+  const group = widgets.find((item) => item.uuid === uuid)
+  if (!group) return
+  let left = pageStore.dPage.width
+  let top = pageStore.dPage.height
+  let right = 0
+  let bottom = 0
+  for (let i = 0; i < widgets.length; ++i) {
+    if (widgets[i].parent === group.uuid) {
+      left = Math.min(left, widgets[i].left)
+      top = Math.min(top, widgets[i].top)
+      right = Math.max(right, widgets[i].record.width + widgets[i].left)
+      bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
+    }
+  }
+  group.width = right - left
+  group.height = bottom - top
+  group.left = left
+  group.top = top
+}
+
+export function updateHoverUuid(store: TWidgetStore, uuid: string) {
+  store.dHoverUuid = uuid
+}
+
+/**
+ * 设置拖拽时在哪个图层
+ */
+export function setDropOver(store: TWidgetStore, uuid: string) {
+  store.dDropOverUuid = uuid
+}
+
+export function setMouseEvent(state: TWidgetStore, e: Event | null) {
+  state.activeMouseEvent = e
+}
diff --git a/src/pinia/design/widget/actions/layer.ts b/src/pinia/design/widget/actions/layer.ts
new file mode 100644
index 0000000..30036f4
--- /dev/null
+++ b/src/pinia/design/widget/actions/layer.ts
@@ -0,0 +1,104 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useForceStore } from "@/pinia"
+import { TWidgetStore, TdWidgetData } from ".."
+
+export type TupdateLayerIndexData = {
+  uuid: string
+  value: number
+  isGroup: boolean
+}
+
+export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {
+  const widgets = store.dWidgets
+  const widget = widgets.find((item) => item.uuid === uuid)
+  const index = widgets.findIndex((item) => item.uuid === uuid)
+  let group: TdWidgetData[] = []
+
+  if (!widget) return
+
+  if (isGroup) {
+    // 组合组件移动
+    group = widgets.filter((item) => item.parent === uuid)
+    for (let i = 0; i < group.length; ++i) {
+      const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
+      widgets.splice(pos, 1)
+    }
+  }
+
+  // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
+  let next = index + value
+  let move = false
+  const maxLen = widgets.length
+  let gCount = 1 // 记录跳过的组合数量
+  // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
+  while (next >= 0 && next < maxLen) {
+    const nextWidget = widgets[next]
+    if (widget.parent !== '-1') {
+      // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
+      if (nextWidget.parent === widget.parent) {
+        widgets.splice(index, 1)
+        widgets.splice(next, 0, widget)
+        move = true
+      }
+      break
+      // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
+    } else if (nextWidget.parent === '-1') {
+      if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
+        if (gCount === 0 && value > 0) {
+          next -= value
+        }
+        widgets.splice(index, 1)
+        widgets.splice(next, 0, widget)
+        move = true
+        break
+      } else if (nextWidget.isContainer) {
+        gCount = 0
+      }
+    }
+    next += value
+  }
+  next -= value
+  if (!move && next !== index) {
+    widgets.splice(index, 1)
+    widgets.splice(next, 0, widget)
+  }
+
+  // 如果是组合，要把里面的组件添加回去
+  if (isGroup) {
+    const pos = widgets.findIndex((item) => item.uuid === uuid)
+    for (let i = group.length - 1; i >= 0; --i) {
+      widgets.splice(pos + 1, 0, group[i])
+    }
+  }
+}
+
+// TODO: 取消组合
+export function ungroup(store: TWidgetStore, uuid: string) {
+  const forceStore = useForceStore()
+
+  const widgets = store.dWidgets
+  const index = widgets.findIndex((item) => item.uuid === uuid)
+  widgets.splice(index, 1)
+  const len = widgets.length
+
+  for (let i = 0; i < len; ++i) {
+    if (widgets[i].parent === uuid) {
+      widgets[i].parent = '-1'
+      // store.state.dAltDown = true
+      // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
+      store.dSelectWidgets.push(widgets[i])
+    }
+  }
+  // store.state.dAltDown = false
+  
+  forceStore.setUpdateSelect()
+  // store.commit('updateSelect')
+  // store.state.dActiveElement = store.state.dPage
+}
diff --git a/src/pinia/design/widget/actions/resize.ts b/src/pinia/design/widget/actions/resize.ts
new file mode 100644
index 0000000..04b13fe
--- /dev/null
+++ b/src/pinia/design/widget/actions/resize.ts
@@ -0,0 +1,126 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useControlStore, usePageStore } from "@/pinia"
+import { TWidgetStore } from ".."
+import { updateGroupSize } from "."
+
+export type TInitResize = {
+  startX: number
+  startY: number
+  originX: number
+  originY: number
+  width: number
+  height: number
+}
+
+/** 设置 resize 操作的初始值 */
+export function initDResize(store: TWidgetStore, payload: TInitResize) {
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+  const resizeWH = store.dResizeWH
+  mouseXY.x = payload.startX
+  mouseXY.y = payload.startY
+  widgetXY.x = payload.originX
+  widgetXY.y = payload.originY
+  resizeWH.width = payload.width
+  resizeWH.height = payload.height
+}
+
+
+export type TdResizePayload = {
+  x: number
+  y: number
+  /** 方向 */
+  dirs: "top" | "left" | "bottom" | "right"
+}
+
+/** 更新组件宽高 */
+export function dResize(store: TWidgetStore, { x, y, dirs }: TdResizePayload) {
+  const pageStore = usePageStore()
+  const canvasStore = useCanvasStore()
+  const controlStore = useControlStore()
+
+  controlStore.setdResizeing(true)
+  // store.state.dResizeing = true
+
+  const page = pageStore.dPage
+  const target = store.dActiveElement
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+  const resizeWH = store.dResizeWH
+  let parent = page
+  if (!target) return
+  if (target.parent !== '-1') {
+    const tmp = store.dWidgets.find((item) => item.uuid === target.parent)
+    if (tmp) {
+      parent = tmp
+    }
+  }
+
+  const dx = x - mouseXY.x
+  const dy = y - mouseXY.y
+
+  let left = 0
+  let top = 0
+
+  for (let i = 0; i < dirs.length; ++i) {
+    const dir = dirs[i]
+
+    switch (dir) {
+      case 'top':
+        const t = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
+        top = Math.max(t, 0)
+        top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
+        target.height += target.top - top
+        target.height = Math.max(target.height, target.record.minHeight)
+        target.top = top
+        break
+      case 'bottom':
+        top = Math.floor((dy * 100) / canvasStore.dZoom)
+        target.height = resizeWH.height + top
+        target.height = Math.max(target.height, target.record.minHeight)
+        target.height = Math.min(target.height, page.height - target.top)
+        break
+      case 'left':
+        const tLeft = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
+        left = Math.max(tLeft, 0)
+        target.width += target.left - left
+        target.width = Math.max(target.width, target.record.minWidth)
+        left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
+        target.left = left
+        break
+      case 'right':
+        left = Math.floor((dx * 100) / canvasStore.dZoom)
+        target.width = resizeWH.width + left
+        target.width = Math.max(target.width, target.record.minWidth)
+        target.width = Math.min(target.width, page.width - target.left)
+        break
+    }
+  }
+  if (parent.uuid !== '-1') {
+    updateGroupSize(store, parent.uuid)
+    // store.dispatch('updateGroupSize', parent.uuid)
+  }
+
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export type TResize = {
+  width: number
+  height: number
+}
+
+export function resize(state: TWidgetStore, data: TResize) {
+  const { width, height } = data
+  const target = state.dActiveElement
+  if (!target) return target
+  target.width = width
+  target.height = height
+}
diff --git a/src/pinia/design/widget/actions/select.ts b/src/pinia/design/widget/actions/select.ts
new file mode 100644
index 0000000..c03566f
--- /dev/null
+++ b/src/pinia/design/widget/actions/select.ts
@@ -0,0 +1,104 @@
+import { useControlStore, useHistoryStore, usePageStore } from "@/pinia"
+import { TWidgetStore } from ".."
+
+export type TSelectWidgetData = {
+  uuid: string
+}
+
+// TODO: 选中元件与取消选中
+export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
+  const controlStore = useControlStore()
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+
+  const alt = controlStore.dAltDown
+  const selectWidgets = store.dSelectWidgets
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+  
+
+  if (!widget) return
+  if (alt) {
+    if (uuid !== '-1' && widget.parent === '-1') {
+      // && !widget.isContainer
+      if (selectWidgets.length === 0) {
+        if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+          selectWidgets.push(store.dActiveElement)
+        }
+      }
+      const index = selectWidgets.findIndex((item) => {
+        return item.uuid === uuid
+      })
+      // 如果已经存在则取消选择，否则加入选取
+      if (index !== -1) {
+        selectWidgets.splice(index, 1)
+        if (selectWidgets.length === 0) {
+          store.dActiveElement = pageStore.dPage
+        }
+      } else {
+        selectWidgets.push(widget)
+      }
+      if (selectWidgets.length === 1) {
+        store.dActiveElement = selectWidgets[0]
+        store.dSelectWidgets = []
+      }
+    }
+    return
+  }
+  store.dSelectWidgets = []
+  if (uuid === '-1') {
+    store.dActiveElement = pageStore.dPage
+    const pageHistory = historyStore.dPageHistory
+    if (pageHistory.length === 0) {
+      pageHistory.push(JSON.stringify(pageStore.dPage))
+    }
+    setTimeout(() => {
+      store.dSelectWidgets = []
+    }, 10)
+  } else {
+    // store.state.dActiveElement = {}
+    setTimeout(() => {
+      store.dActiveElement = widget
+    }, 10)
+  }
+}
+
+/** 多选元素 */
+export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetData) {
+  const pageStore = usePageStore()
+
+  const selectWidgets = store.dSelectWidgets
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+  if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
+    if (selectWidgets.length === 0) {
+      if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+        selectWidgets.push(store.dActiveElement)
+      }
+    }
+    const index = selectWidgets.findIndex((item) => {
+      return item.uuid === uuid
+    })
+    // 如果已经存在则取消选择，否则加入选取
+    if (index !== -1) {
+      selectWidgets.splice(index, 1)
+      if (selectWidgets.length === 0) {
+        store.dActiveElement = pageStore.dPage
+      }
+    } else {
+      selectWidgets.push(widget)
+    }
+    // if (selectWidgets.length === 1) {
+    //   store.state.dActiveElement = selectWidgets[0]
+    //   store.state.dSelectWidgets = []
+    // }
+  }
+}
+
+export type TselectItem = {
+  data: Record<string, any>
+  type: string
+}
+
+export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {
+  state.selectItem.data = data
+  state.selectItem.type = type
+}
diff --git a/src/pinia/design/widget/actions/template.ts b/src/pinia/design/widget/actions/template.ts
new file mode 100644
index 0000000..aeeee50
--- /dev/null
+++ b/src/pinia/design/widget/actions/template.ts
@@ -0,0 +1,30 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+
+import { customAlphabet } from 'nanoid/non-secure'
+import { TWidgetStore, TdWidgetData } from '..'
+import { useCanvasStore, useHistoryStore } from '@/pinia'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+// TODO: 选择模板
+export function setTemplate(store: TWidgetStore, allWidgets: TdWidgetData[]) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  allWidgets.forEach((item) => {
+    Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
+    item.text && (item.text = decodeURIComponent(item.text))
+    store.dWidgets.push(item)
+  })
+
+  historyStore.pushHistory("setTemplate")
+  // store.dispatch('pushHistory', 'setTemplate')
+
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
diff --git a/src/pinia/design/widget/actions/widget.ts b/src/pinia/design/widget/actions/widget.ts
new file mode 100644
index 0000000..39823bf
--- /dev/null
+++ b/src/pinia/design/widget/actions/widget.ts
@@ -0,0 +1,237 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/pinia"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+type TUpdateWidgetKey =  'width' | 'height' | 'left' | 'top'
+
+export type TUpdateWidgetPayload = {
+  uuid: string
+  key: TUpdateWidgetKey
+  value: number
+  pushHistory: boolean
+}
+
+/** 更新组件数据 */
+export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHistory }: TUpdateWidgetPayload) {
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+  if (widget && (widget[key] !== value || pushHistory)) {
+    switch (key) {
+      case 'width':
+        // const minWidth = widget.record.minWidth
+        // const maxWidth = store.state.dPage.width - widget.left
+        // value = Math.max(minWidth, Math.min(maxWidth, value))
+        break
+      case 'height':
+        // const minHeight = widget.record.minHeight
+        // const maxHeight = store.state.dPage.height - widget.top
+        // value = Math.max(minHeight, Math.min(maxHeight, value))
+        break
+      case 'left':
+      case 'top':
+        if (widget.isContainer) {
+          let dLeft = widget.left - value
+          let dTop = widget.top - value
+          if (key === 'left') {
+            dTop = 0
+          }
+          if (key === 'top') {
+            dLeft = 0
+          }
+          const len = store.dWidgets.length
+          for (let i = 0; i < len; ++i) {
+            const child = store.dWidgets[i]
+            if (child.parent === widget.uuid) {
+              child.left -= dLeft
+              child.top -= dTop
+            }
+          }
+        }
+        break
+    }
+    widget[key] = value
+    if (pushHistory) {
+      const historyStore = useHistoryStore()
+      setTimeout(() => {
+        historyStore.pushHistory("updateWidgetData")
+        // pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
+      }, 100)
+    }
+    // store.dispatch('reChangeCanvas')
+  }
+}
+
+export type TUpdateWidgetMultiplePayload = {
+  uuid: string
+  data: {
+    key: TUpdateWidgetKey
+    value: number
+  }[]
+  pushHistory: boolean
+}
+
+/** 一次更新多个widget */
+export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHistory }: TUpdateWidgetMultiplePayload) {
+  for (const item of data) {
+    const { key, value } = item
+    const widget = store.dWidgets.find((item) => item.uuid === uuid)
+    if (widget && (widget[key] !== value || pushHistory)) {
+      switch (key) {
+        case 'left':
+        case 'top':
+          if (widget.isContainer) {
+            let dLeft = widget.left - value
+            let dTop = widget.top - value
+            if (key === 'left') {
+              dTop = 0
+            }
+            if (key === 'top') {
+              dLeft = 0
+            }
+            const len = store.dWidgets.length
+            for (let i = 0; i < len; ++i) {
+              const child = store.dWidgets[i]
+              if (child.parent === widget.uuid) {
+                child.left -= dLeft
+                child.top -= dTop
+              }
+            }
+          }
+          break
+      }
+      widget[key] = value
+    }
+  }
+  setTimeout(() => {
+    const historyStore = useHistoryStore()
+    historyStore.pushHistory("updateWidgetMultiple")
+    // store.dispatch('pushHistory', 'updateWidgetMultiple')
+  }, 100)
+}
+
+/** 添加 Widget */
+export function addWidget(store: TWidgetStore, setting: TdWidgetData) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  setting.uuid = nanoid()
+  store.dWidgets.push(setting)
+  const len = store.dWidgets.length
+  // store.state.dActiveElement = store.state.dWidgets[len - 1]
+
+  store.selectWidget({
+    uuid: store.dWidgets[len - 1].uuid,
+  })
+  // store.dispatch('selectWidget', {
+  //   uuid: store.dWidgets[len - 1].uuid,
+  // })
+
+  historyStore.pushHistory("addWidget")
+  // store.dispatch('pushHistory', 'addWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+/** 删除组件 */
+export function deleteWidget(store: TWidgetStore) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  const widgets = store.dWidgets
+  const selectWidgets = store.dSelectWidgets
+  const activeElement = store.dActiveElement
+  if (!activeElement) return
+
+  let count = 0 // 记录容器里的组件数量
+  if (selectWidgets.length !== 0) {
+    for (let i = 0; i < selectWidgets.length; ++i) {
+      const uuid = selectWidgets[i].uuid
+      const index = widgets.findIndex((item) => item.uuid === uuid)
+      widgets.splice(index, 1)
+      try {
+        // 清除掉可能存在的选中框
+        document.getElementById(uuid)?.classList.remove('widget-selected')
+      } catch (e) {}
+    }
+    store.dSelectWidgets = []
+  } else {
+    if (activeElement.type === 'page') {
+      return
+    }
+
+    const uuid = activeElement.uuid
+    const index = widgets.findIndex((item) => item.uuid === uuid)
+
+    // 先删除组件
+    widgets.splice(index, 1)
+
+    // 如果删除的是容器，须将内部组件一并删除
+    if (activeElement.isContainer) {
+      for (let i = widgets.length - 1; i >= 0; --i) {
+        if (widgets[i].parent === uuid) {
+          widgets.splice(i, 1)
+        }
+      }
+    } else if (activeElement.parent !== '-1') {
+      for (let i = widgets.length - 1; i >= 0; --i) {
+        if (widgets[i].parent === activeElement.parent) {
+          count++
+          if (count > 1) {
+            break
+          }
+        }
+      }
+      if (count <= 1) {
+        const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
+        widgets.splice(index, 1)
+        if (count === 1) {
+          const widget = widgets.find((item) => item.parent === activeElement.parent)
+          widget && (widget.parent = '-1')
+        }
+        count = 0
+      }
+    }
+  }
+
+  if (count === 0) {
+    // 重置 activeElement
+    const pageStore = usePageStore()
+    store.dActiveElement = pageStore.dPage
+  } else {
+    const tmp = widgets.find((item) => item.uuid === activeElement.parent)
+    tmp && (store.dActiveElement = tmp)
+  }
+
+  if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+    store.updateGroupSize(store.dActiveElement.uuid)
+    // store.dispatch('updateGroupSize', store.dActiveElement.uuid)
+  }
+
+  historyStore.pushHistory("deleteWidget")
+  // store.dispatch('pushHistory', 'deleteWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export type TsetWidgetStyleData = {
+  uuid: string
+  key: keyof TdWidgetData
+  value: any
+  pushHistory?: boolean
+}
+
+export function setWidgetStyle(state: TWidgetStore, { uuid, key, value, pushHistory }: TsetWidgetStyleData) {
+  const widget = state.dWidgets.find((item) => item.uuid === uuid)
+  if (!widget) return
+  (widget[key] as Record<string, any>) = value
+}
+
+export function setDWidgets(state: TWidgetStore, e: TdWidgetData[]) {
+  state.dWidgets = e
+}
diff --git a/src/pinia/design/widget/getter/index.ts b/src/pinia/design/widget/getter/index.ts
new file mode 100644
index 0000000..2076ba1
--- /dev/null
+++ b/src/pinia/design/widget/getter/index.ts
@@ -0,0 +1,25 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { usePageStore } from "@/pinia"
+import { TWidgetState, TdWidgetData } from ".."
+import { TPageState } from "../../page"
+
+export type TWidgetJsonData = TPageState & {
+  widgets: TdWidgetData
+}
+
+/** 返回组件Json数据 */
+export function widgetJsonData(state: TWidgetState) {
+  const pageStore = usePageStore()
+  const page: TWidgetJsonData = JSON.parse(JSON.stringify(pageStore.dPage))
+  const widgets = JSON.parse(JSON.stringify(state.dWidgets))
+  page.widgets = widgets
+
+  return page
+}
diff --git a/src/pinia/design/widget/index.ts b/src/pinia/design/widget/index.ts
new file mode 100644
index 0000000..9fc4672
--- /dev/null
+++ b/src/pinia/design/widget/index.ts
@@ -0,0 +1,174 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { Store, defineStore } from "pinia";
+import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, updateGroupSize, updateHoverUuid } from "./actions";
+import { TPageState } from "../page";
+import { TInitResize, TResize, TdResizePayload, dResize, initDResize, resize } from "./actions/resize";
+import { TUpdateWidgetMultiplePayload, TUpdateWidgetPayload, TsetWidgetStyleData, addWidget, deleteWidget, setDWidgets, setWidgetStyle, updateWidgetData, updateWidgetMultiple } from "./actions/widget";
+import { addGroup } from "./actions/group";
+import { setTemplate } from "./actions/template";
+import { copyWidget, pasteWidget } from "./actions/clone";
+import { TSelectWidgetData, TselectItem, selectItem, selectWidget, selectWidgetsInOut } from "./actions/select";
+import { TUpdateAlignData, updateAlign } from "./actions/align";
+import { TWidgetJsonData, widgetJsonData } from "./getter";
+import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
+
+export type TdWidgetData = TPageState & {
+  parent?: string
+  isContainer?: boolean
+  text?: string
+}
+
+export type TWidgetState = {
+  dActiveWidgetXY: {
+    /** 选中组件的横向初始值 */
+    x: number,
+    /** 选中组件的纵向初始值 */
+    y: number
+  }
+  dMouseXY: {
+    /** 鼠标按下时的横坐标 */
+    x: number
+    /** 鼠标按下时的纵坐标 */
+    y: number
+  },
+  /** 初始化调整大小时组件的宽高 */
+  dResizeWH: {
+    width: number
+    height: number
+  },
+  /** 选中的组件或页面 */
+  dActiveElement: TdWidgetData | null
+  /** 鼠标在这个图层上 */
+  dHoverUuid: string
+  /** 拖动时放在哪个图层上 */
+  dDropOverUuid: string
+  /** 已使用的组件 */
+  dWidgets: TdWidgetData[]
+  /** 记录多选的组件 */
+  dSelectWidgets: TdWidgetData[]
+  /** 复制的组件（可能是单个也可能是数组） */
+  dCopyElement: TdWidgetData[] | TdWidgetData
+  /** 记录当前选择的元素, data */
+  selectItem: { data: Record<string, any> | null, type?: string }
+  /** 正在活动的鼠标事件 */
+  activeMouseEvent: Event | null
+}
+
+type TGetter = {
+  getWidgetJsonData(state: TWidgetState): TWidgetJsonData
+}
+
+type TAction = {
+  /** 设置 mousemove 操作的初始值 */
+  initDMove: (payload: TInidDMovePayload) => void
+  /** 移动组件 */
+  dMove: (payload: TMovePayload) => void
+  updateGroupSize: (uuid: string) => void
+  /** 设置 resize 操作的初始值 */
+  initDResize: (payload: TInitResize) => void
+  dResize: (payload: TdResizePayload) => void
+  updateHoverUuid: (uuid: string) => void
+  /** 更新组件数据 */
+  updateWidgetData: (payload: TUpdateWidgetPayload) => void
+  /** 一次更新多个widget */
+  updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
+  /** addWidget */
+  addWidget: (setting: TPageState) => void
+  /** addGroup */
+  addGroup: (group: TdWidgetData[]) => void
+  /** setTemplate */
+  setTemplate: (template: TdWidgetData[]) => void
+  /** 删除组件 */
+  deleteWidget: () => void
+  /** 拷贝组件 */
+  copyWidget: () => void
+  /** 粘贴组件 */
+  pasteWidget: () => void
+  selectWidget: (data: TSelectWidgetData) => void
+  /** 多选元素 */
+  selectWidgetsInOut: (data: TSelectWidgetData) => void
+  /** updateAlign */
+  updateAlign: (data: TUpdateAlignData) => void
+  /** updateLayerIndex */
+  updateLayerIndex: (data: TupdateLayerIndexData) => void
+  /** ungroup */
+  ungroup: (uuid: string) => void
+  /** 设置拖拽时在哪个图层 */
+  setDropOver: (uuid: string) => void
+  selectItem: (data: TselectItem) => void
+  resize: (data: TResize) => void
+  setWidgetStyle: (data: TsetWidgetStyleData) => void
+  setDWidgets: (data: TdWidgetData[]) => void
+  setMouseEvent: (e: Event | null) => void
+}
+
+const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
+  state: () => ({
+    dActiveWidgetXY: {
+      x: 0, // 选中组件的横向初始值
+      y: 0, // 选中组件的纵向初始值
+    },
+    dMouseXY: {
+      x: 0, // 鼠标按下时的横坐标
+      y: 0, // 鼠标按下时的纵坐标
+    },
+    dResizeWH: {
+      // 初始化调整大小时组件的宽高
+      width: 0,
+      height: 0,
+    },
+    dActiveElement: null, // 选中的组件或页面
+    dHoverUuid: '-1', // 鼠标在这个图层上
+    dDropOverUuid: '', // 拖动时放在哪个图层上
+    dWidgets: [], // 已使用的组件
+    dSelectWidgets: [], // 记录多选的组件
+    selectItem: { data: null }, // 记录当前选择的元素, data
+    activeMouseEvent: null, // 正在活动的鼠标事件
+    dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
+  }),
+
+  getters: {
+    getWidgetJsonData(store) {
+      return widgetJsonData(store)
+    }
+  },
+
+  actions: {
+    initDMove(payload) { initDMove(this, payload) },
+    dMove(payload) { dMove(this, payload) },
+    updateGroupSize(uuid) { updateGroupSize(this, uuid) },
+    initDResize(payload) { initDResize(this, payload) },
+    dResize(payload) { dResize(this, payload) },
+    updateHoverUuid(uuid) { updateHoverUuid(this, uuid) },
+    updateWidgetData(payload) { updateWidgetData(this, payload) },
+    updateWidgetMultiple(payload) { updateWidgetMultiple(this, payload) },
+    addWidget(setting) { addWidget(this, setting) },
+    addGroup(group) { addGroup(this, group) },
+    setTemplate(template) { setTemplate(this, template) },
+    deleteWidget() { deleteWidget(this) },
+    copyWidget() { copyWidget(this) },
+    pasteWidget() { pasteWidget(this) },
+    selectWidget(data) { selectWidget(this, data) },
+    selectWidgetsInOut(data) { selectWidgetsInOut(this, data) },
+    updateAlign(data) { updateAlign(this, data) },
+    updateLayerIndex(data) { updateLayerIndex(this, data) },
+    ungroup(uuid) { ungroup(this, uuid) },
+    setDropOver(uuid) { setDropOver(this, uuid) },
+    selectItem(data: TselectItem) { selectItem(this, data) },
+    resize(data) { resize(this, data) },
+    setWidgetStyle(data) { setWidgetStyle(this, data) },
+    setDWidgets(data) { setDWidgets(this, data) },
+    setMouseEvent(event) { setMouseEvent(this, event) }
+  }
+})
+
+export type TWidgetStore = Store<"widgetStore", TWidgetState, TGetter, TAction>
+
+export default WidgetStore
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
index b9e730a..e2eb865 100644
--- a/src/pinia/index.ts
+++ b/src/pinia/index.ts
@@ -12,6 +12,9 @@ import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
 import useControlStore from './design/control'
 import useHistoryStore from './design/history'
+import useWidgetStore from './design/widget'
+import useGroupStore from './design/group'
+import useForceStore from './design/force'
 
 export {
   useBaseStore,
@@ -20,4 +23,7 @@ export {
   useCanvasStore,
   useControlStore,
   useHistoryStore,
+  useWidgetStore,
+  useGroupStore,
+  useForceStore,
 }
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
index aa8306f..f9ab64a 100644
--- a/src/store/modules/design/actions.ts
+++ b/src/store/modules/design/actions.ts
@@ -46,483 +46,483 @@ export default {
   //   }
   // },
 
-  updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (widget && (widget[key] !== value || pushHistory)) {
-      switch (key) {
-        case 'width':
-          // const minWidth = widget.record.minWidth
-          // const maxWidth = store.state.dPage.width - widget.left
-          // value = Math.max(minWidth, Math.min(maxWidth, value))
-          break
-        case 'height':
-          // const minHeight = widget.record.minHeight
-          // const maxHeight = store.state.dPage.height - widget.top
-          // value = Math.max(minHeight, Math.min(maxHeight, value))
-          break
-        case 'left':
-        case 'top':
-          if (widget.isContainer) {
-            let dLeft = widget.left - value
-            let dTop = widget.top - value
-            if (key === 'left') {
-              dTop = 0
-            }
-            if (key === 'top') {
-              dLeft = 0
-            }
-            const len = store.state.dWidgets.length
-            for (let i = 0; i < len; ++i) {
-              const child = store.state.dWidgets[i]
-              if (child.parent === widget.uuid) {
-                child.left -= dLeft
-                child.top -= dTop
-              }
-            }
-          }
-          break
-      }
-      widget[key] = value
-      if (pushHistory) {
-        setTimeout(() => {
-          pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
-        }, 100)
-      }
-      // store.dispatch('reChangeCanvas')
-    }
-  },
-  updateWidgetMultiple(store, { uuid, data, pushHistory }) {
-    for (const item of data) {
-      const { key, value } = item
-      const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-      if (widget && (widget[key] !== value || pushHistory)) {
-        switch (key) {
-          case 'left':
-          case 'top':
-            if (widget.isContainer) {
-              let dLeft = widget.left - value
-              let dTop = widget.top - value
-              if (key === 'left') {
-                dTop = 0
-              }
-              if (key === 'top') {
-                dLeft = 0
-              }
-              const len = store.state.dWidgets.length
-              for (let i = 0; i < len; ++i) {
-                const child = store.state.dWidgets[i]
-                if (child.parent === widget.uuid) {
-                  child.left -= dLeft
-                  child.top -= dTop
-                }
-              }
-            }
-            break
-        }
+  // updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
+  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
+  //   if (widget && (widget[key] !== value || pushHistory)) {
+  //     switch (key) {
+  //       case 'width':
+  //         // const minWidth = widget.record.minWidth
+  //         // const maxWidth = store.state.dPage.width - widget.left
+  //         // value = Math.max(minWidth, Math.min(maxWidth, value))
+  //         break
+  //       case 'height':
+  //         // const minHeight = widget.record.minHeight
+  //         // const maxHeight = store.state.dPage.height - widget.top
+  //         // value = Math.max(minHeight, Math.min(maxHeight, value))
+  //         break
+  //       case 'left':
+  //       case 'top':
+  //         if (widget.isContainer) {
+  //           let dLeft = widget.left - value
+  //           let dTop = widget.top - value
+  //           if (key === 'left') {
+  //             dTop = 0
+  //           }
+  //           if (key === 'top') {
+  //             dLeft = 0
+  //           }
+  //           const len = store.state.dWidgets.length
+  //           for (let i = 0; i < len; ++i) {
+  //             const child = store.state.dWidgets[i]
+  //             if (child.parent === widget.uuid) {
+  //               child.left -= dLeft
+  //               child.top -= dTop
+  //             }
+  //           }
+  //         }
+  //         break
+  //     }
+  //     widget[key] = value
+  //     if (pushHistory) {
+  //       setTimeout(() => {
+  //         pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
+  //       }, 100)
+  //     }
+  //     // store.dispatch('reChangeCanvas')
+  //   }
+  // },
+  // updateWidgetMultiple(store, { uuid, data, pushHistory }) {
+  //   for (const item of data) {
+  //     const { key, value } = item
+  //     const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
+  //     if (widget && (widget[key] !== value || pushHistory)) {
+  //       switch (key) {
+  //         case 'left':
+  //         case 'top':
+  //           if (widget.isContainer) {
+  //             let dLeft = widget.left - value
+  //             let dTop = widget.top - value
+  //             if (key === 'left') {
+  //               dTop = 0
+  //             }
+  //             if (key === 'top') {
+  //               dLeft = 0
+  //             }
+  //             const len = store.state.dWidgets.length
+  //             for (let i = 0; i < len; ++i) {
+  //               const child = store.state.dWidgets[i]
+  //               if (child.parent === widget.uuid) {
+  //                 child.left -= dLeft
+  //                 child.top -= dTop
+  //               }
+  //             }
+  //           }
+  //           break
+  //       }
 
-        widget[key] = value
-      }
-    }
-    setTimeout(() => {
-      store.dispatch('pushHistory', 'updateWidgetMultiple')
-    }, 100)
-  },
-  addWidget(store: any, setting: any) {
-    setting.uuid = nanoid()
-    store.state.dWidgets.push(setting)
-    const len = store.state.dWidgets.length
-    // store.state.dActiveElement = store.state.dWidgets[len - 1]
-    store.dispatch('selectWidget', {
-      uuid: store.state.dWidgets[len - 1].uuid,
-    })
-    store.dispatch('pushHistory', 'addWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  addGroup(store: any, group: Type.Object) {
-    let parent: any = null
-    group.forEach((item: any) => {
-      item.uuid = nanoid() // 重设id
-      item.type === 'w-group' && (parent = item) // 找出父组件
-    })
-    group.forEach((item: any) => {
-      !item.isContainer && (item.parent = parent.uuid) // 重设父id
-      item.text && (item.text = decodeURIComponent(item.text))
-      store.state.dWidgets.push(item)
-    })
-    // 选中组件
-    const len = store.state.dWidgets.length
-    store.state.dActiveElement = store.state.dWidgets[len - 1]
-    store.dispatch('pushHistory', 'addGroup')
-    store.dispatch('reChangeCanvas')
-  },
-  // TODO: 选择模板
-  setTemplate(store: any, allWidgets: any[]) {
-    allWidgets.forEach((item: any) => {
-      Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
-      item.text && (item.text = decodeURIComponent(item.text))
-      store.state.dWidgets.push(item)
-    })
-    store.dispatch('pushHistory', 'setTemplate')
-    store.dispatch('reChangeCanvas')
-  },
+  //       widget[key] = value
+  //     }
+  //   }
+  //   setTimeout(() => {
+  //     store.dispatch('pushHistory', 'updateWidgetMultiple')
+  //   }, 100)
+  // },
+  // addWidget(store: any, setting: any) {
+  //   setting.uuid = nanoid()
+  //   store.state.dWidgets.push(setting)
+  //   const len = store.state.dWidgets.length
+  //   // store.state.dActiveElement = store.state.dWidgets[len - 1]
+  //   store.dispatch('selectWidget', {
+  //     uuid: store.state.dWidgets[len - 1].uuid,
+  //   })
+  //   store.dispatch('pushHistory', 'addWidget')
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // addGroup(store: any, group: Type.Object) {
+  //   let parent: any = null
+  //   group.forEach((item: any) => {
+  //     item.uuid = nanoid() // 重设id
+  //     item.type === 'w-group' && (parent = item) // 找出父组件
+  //   })
+  //   group.forEach((item: any) => {
+  //     !item.isContainer && (item.parent = parent.uuid) // 重设父id
+  //     item.text && (item.text = decodeURIComponent(item.text))
+  //     store.state.dWidgets.push(item)
+  //   })
+  //   // 选中组件
+  //   const len = store.state.dWidgets.length
+  //   store.state.dActiveElement = store.state.dWidgets[len - 1]
+  //   store.dispatch('pushHistory', 'addGroup')
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // // TODO: 选择模板
+  // setTemplate(store: any, allWidgets: any[]) {
+  //   allWidgets.forEach((item: any) => {
+  //     Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
+  //     item.text && (item.text = decodeURIComponent(item.text))
+  //     store.state.dWidgets.push(item)
+  //   })
+  //   store.dispatch('pushHistory', 'setTemplate')
+  //   store.dispatch('reChangeCanvas')
+  // },
   // TODO 删除
-  deleteWidget(store: any) {
-    const widgets = store.state.dWidgets
-    const selectWidgets = store.state.dSelectWidgets
-    const activeElement = store.state.dActiveElement
+  // deleteWidget(store: any) {
+  //   const widgets = store.state.dWidgets
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   const activeElement = store.state.dActiveElement
 
-    let count = 0 // 记录容器里的组件数量
-    if (selectWidgets.length !== 0) {
-      for (let i = 0; i < selectWidgets.length; ++i) {
-        const uuid = selectWidgets[i].uuid
-        const index = widgets.findIndex((item) => item.uuid === uuid)
-        widgets.splice(index, 1)
-        try {
-          // 清除掉可能存在的选中框
-          document.getElementById(uuid).classList.remove('widget-selected')
-        } catch (e) {}
-      }
-      store.state.dSelectWidgets = []
-    } else {
-      if (activeElement.type === 'page') {
-        return
-      }
+  //   let count = 0 // 记录容器里的组件数量
+  //   if (selectWidgets.length !== 0) {
+  //     for (let i = 0; i < selectWidgets.length; ++i) {
+  //       const uuid = selectWidgets[i].uuid
+  //       const index = widgets.findIndex((item) => item.uuid === uuid)
+  //       widgets.splice(index, 1)
+  //       try {
+  //         // 清除掉可能存在的选中框
+  //         document.getElementById(uuid).classList.remove('widget-selected')
+  //       } catch (e) {}
+  //     }
+  //     store.state.dSelectWidgets = []
+  //   } else {
+  //     if (activeElement.type === 'page') {
+  //       return
+  //     }
 
-      const uuid = activeElement.uuid
-      const index = widgets.findIndex((item) => item.uuid === uuid)
+  //     const uuid = activeElement.uuid
+  //     const index = widgets.findIndex((item) => item.uuid === uuid)
 
-      // 先删除组件
-      widgets.splice(index, 1)
+  //     // 先删除组件
+  //     widgets.splice(index, 1)
 
-      // 如果删除的是容器，须将内部组件一并删除
-      if (activeElement.isContainer) {
-        for (let i = widgets.length - 1; i >= 0; --i) {
-          if (widgets[i].parent === uuid) {
-            widgets.splice(i, 1)
-          }
-        }
-      } else if (activeElement.parent !== '-1') {
-        for (let i = widgets.length - 1; i >= 0; --i) {
-          if (widgets[i].parent === activeElement.parent) {
-            count++
-            if (count > 1) {
-              break
-            }
-          }
-        }
-        if (count <= 1) {
-          const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
-          widgets.splice(index, 1)
-          if (count === 1) {
-            const widget = widgets.find((item) => item.parent === activeElement.parent)
-            widget.parent = '-1'
-          }
-          count = 0
-        }
-      }
-    }
+  //     // 如果删除的是容器，须将内部组件一并删除
+  //     if (activeElement.isContainer) {
+  //       for (let i = widgets.length - 1; i >= 0; --i) {
+  //         if (widgets[i].parent === uuid) {
+  //           widgets.splice(i, 1)
+  //         }
+  //       }
+  //     } else if (activeElement.parent !== '-1') {
+  //       for (let i = widgets.length - 1; i >= 0; --i) {
+  //         if (widgets[i].parent === activeElement.parent) {
+  //           count++
+  //           if (count > 1) {
+  //             break
+  //           }
+  //         }
+  //       }
+  //       if (count <= 1) {
+  //         const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
+  //         widgets.splice(index, 1)
+  //         if (count === 1) {
+  //           const widget = widgets.find((item) => item.parent === activeElement.parent)
+  //           widget.parent = '-1'
+  //         }
+  //         count = 0
+  //       }
+  //     }
+  //   }
 
-    if (count === 0) {
-      // 重置 activeElement
-      store.state.dActiveElement = store.state.dPage
-    } else {
-      store.state.dActiveElement = widgets.find((item) => item.uuid === activeElement.parent)
-    }
+  //   if (count === 0) {
+  //     // 重置 activeElement
+  //     store.state.dActiveElement = store.state.dPage
+  //   } else {
+  //     store.state.dActiveElement = widgets.find((item) => item.uuid === activeElement.parent)
+  //   }
 
-    if (store.state.dActiveElement.uuid !== '-1') {
-      store.dispatch('updateGroupSize', store.state.dActiveElement.uuid)
-    }
+  //   if (store.state.dActiveElement.uuid !== '-1') {
+  //     store.dispatch('updateGroupSize', store.state.dActiveElement.uuid)
+  //   }
 
-    store.dispatch('pushHistory', 'deleteWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  copyWidget(store) {
-    const activeElement = JSON.parse(JSON.stringify(store.state.dActiveElement))
-    if (activeElement.type === 'page') {
-      return
-    }
-    navigator.clipboard.writeText('') // 清空系统剪贴板内容
-    const container = []
-    const selectWidgets = store.state.dSelectWidgets
-    if (selectWidgets.length === 0) {
-      const uuid = activeElement.uuid
-      container.push(activeElement)
-      if (activeElement.isContainer) {
-        const widgets = store.state.dWidgets
-        for (let i = 0; i < widgets.length; ++i) {
-          if (widgets[i].parent === uuid) {
-            container.push(widgets[i])
-          }
-        }
-      }
-    } else {
-      for (let i = 0; i < selectWidgets.length; ++i) {
-        const uuid = selectWidgets[i].uuid
-        container.push(selectWidgets[i])
-        if (selectWidgets[i].isContainer) {
-          const widgets = store.state.dWidgets
-          for (let i = 0; i < widgets.length; ++i) {
-            if (widgets[i].parent === uuid) {
-              container.push(widgets[i])
-            }
-          }
-        }
-      }
-    }
-    store.state.dCopyElement = JSON.parse(JSON.stringify(container))
-  },
-  pasteWidget(store) {
-    const copyElement = JSON.parse(JSON.stringify(store.state.dCopyElement))
-    const container = copyElement.find((item) => item.isContainer)
-    for (let i = 0; i < copyElement.length; ++i) {
-      copyElement[i].uuid = nanoid()
-      if (container && copyElement[i].uuid !== container.uuid) {
-        copyElement[i].parent = container.uuid
-      } else {
-        copyElement[i].parent = '-1'
-      }
-      copyElement[i].top += 30
-      copyElement[i].left += 30
-    }
-    store.state.dWidgets = store.state.dWidgets.concat(copyElement)
-    store.state.dActiveElement = copyElement[0]
-    store.state.dSelectWidgets = copyElement
-    if (container) {
-      store.state.dActiveElement = container
-      store.state.dSelectWidgets = []
-    }
+  //   store.dispatch('pushHistory', 'deleteWidget')
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // copyWidget(store) {
+  //   const activeElement = JSON.parse(JSON.stringify(store.state.dActiveElement))
+  //   if (activeElement.type === 'page') {
+  //     return
+  //   }
+  //   navigator.clipboard.writeText('') // 清空系统剪贴板内容
+  //   const container = []
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   if (selectWidgets.length === 0) {
+  //     const uuid = activeElement.uuid
+  //     container.push(activeElement)
+  //     if (activeElement.isContainer) {
+  //       const widgets = store.state.dWidgets
+  //       for (let i = 0; i < widgets.length; ++i) {
+  //         if (widgets[i].parent === uuid) {
+  //           container.push(widgets[i])
+  //         }
+  //       }
+  //     }
+  //   } else {
+  //     for (let i = 0; i < selectWidgets.length; ++i) {
+  //       const uuid = selectWidgets[i].uuid
+  //       container.push(selectWidgets[i])
+  //       if (selectWidgets[i].isContainer) {
+  //         const widgets = store.state.dWidgets
+  //         for (let i = 0; i < widgets.length; ++i) {
+  //           if (widgets[i].parent === uuid) {
+  //             container.push(widgets[i])
+  //           }
+  //         }
+  //       }
+  //     }
+  //   }
+  //   store.state.dCopyElement = JSON.parse(JSON.stringify(container))
+  // },
+  // pasteWidget(store) {
+  //   const copyElement = JSON.parse(JSON.stringify(store.state.dCopyElement))
+  //   const container = copyElement.find((item) => item.isContainer)
+  //   for (let i = 0; i < copyElement.length; ++i) {
+  //     copyElement[i].uuid = nanoid()
+  //     if (container && copyElement[i].uuid !== container.uuid) {
+  //       copyElement[i].parent = container.uuid
+  //     } else {
+  //       copyElement[i].parent = '-1'
+  //     }
+  //     copyElement[i].top += 30
+  //     copyElement[i].left += 30
+  //   }
+  //   store.state.dWidgets = store.state.dWidgets.concat(copyElement)
+  //   store.state.dActiveElement = copyElement[0]
+  //   store.state.dSelectWidgets = copyElement
+  //   if (container) {
+  //     store.state.dActiveElement = container
+  //     store.state.dSelectWidgets = []
+  //   }
 
-    store.dispatch('pushHistory', 'pasteWidget')
-    store.dispatch('copyWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  // TODO: 选中元件与取消选中
-  selectWidget(store, { uuid }) {
-    const alt = store.state.dAltDown
-    const selectWidgets = store.state.dSelectWidgets
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (alt) {
-      if (uuid !== '-1' && widget.parent === '-1') {
-        // && !widget.isContainer
-        if (selectWidgets.length === 0) {
-          if (store.state.dActiveElement.uuid !== '-1') {
-            selectWidgets.push(store.state.dActiveElement)
-          }
-        }
-        const index = selectWidgets.findIndex((item) => {
-          return item.uuid === uuid
-        })
-        // 如果已经存在则取消选择，否则加入选取
-        if (index !== -1) {
-          selectWidgets.splice(index, 1)
-          if (selectWidgets.length === 0) {
-            store.state.dActiveElement = store.state.dPage
-          }
-        } else {
-          selectWidgets.push(widget)
-        }
-        if (selectWidgets.length === 1) {
-          store.state.dActiveElement = selectWidgets[0]
-          store.state.dSelectWidgets = []
-        }
-      }
-      return
-    }
-    store.state.dSelectWidgets = []
-    if (uuid === '-1') {
-      store.state.dActiveElement = store.state.dPage
-      const pageHistory = store.state.dPageHistory
-      if (pageHistory.length === 0) {
-        pageHistory.push(JSON.stringify(store.state.dPage))
-      }
-      setTimeout(() => {
-        store.state.dSelectWidgets = []
-      }, 10)
-    } else {
-      // store.state.dActiveElement = {}
-      setTimeout(() => {
-        store.state.dActiveElement = widget
-      }, 10)
-    }
-  },
-  // 多选元素
-  selectWidgetsInOut(store, { uuid }) {
-    const selectWidgets = store.state.dSelectWidgets
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
-      if (selectWidgets.length === 0) {
-        if (store.state.dActiveElement.uuid !== '-1') {
-          selectWidgets.push(store.state.dActiveElement)
-        }
-      }
-      const index = selectWidgets.findIndex((item) => {
-        return item.uuid === uuid
-      })
-      // 如果已经存在则取消选择，否则加入选取
-      if (index !== -1) {
-        selectWidgets.splice(index, 1)
-        if (selectWidgets.length === 0) {
-          store.state.dActiveElement = store.state.dPage
-        }
-      } else {
-        selectWidgets.push(widget)
-      }
-      // if (selectWidgets.length === 1) {
-      //   store.state.dActiveElement = selectWidgets[0]
-      //   store.state.dSelectWidgets = []
-      // }
-    }
-  },
+  //   store.dispatch('pushHistory', 'pasteWidget')
+  //   store.dispatch('copyWidget')
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // // TODO: 选中元件与取消选中
+  // selectWidget(store, { uuid }) {
+  //   const alt = store.state.dAltDown
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
+  //   if (alt) {
+  //     if (uuid !== '-1' && widget.parent === '-1') {
+  //       // && !widget.isContainer
+  //       if (selectWidgets.length === 0) {
+  //         if (store.state.dActiveElement.uuid !== '-1') {
+  //           selectWidgets.push(store.state.dActiveElement)
+  //         }
+  //       }
+  //       const index = selectWidgets.findIndex((item) => {
+  //         return item.uuid === uuid
+  //       })
+  //       // 如果已经存在则取消选择，否则加入选取
+  //       if (index !== -1) {
+  //         selectWidgets.splice(index, 1)
+  //         if (selectWidgets.length === 0) {
+  //           store.state.dActiveElement = store.state.dPage
+  //         }
+  //       } else {
+  //         selectWidgets.push(widget)
+  //       }
+  //       if (selectWidgets.length === 1) {
+  //         store.state.dActiveElement = selectWidgets[0]
+  //         store.state.dSelectWidgets = []
+  //       }
+  //     }
+  //     return
+  //   }
+  //   store.state.dSelectWidgets = []
+  //   if (uuid === '-1') {
+  //     store.state.dActiveElement = store.state.dPage
+  //     const pageHistory = store.state.dPageHistory
+  //     if (pageHistory.length === 0) {
+  //       pageHistory.push(JSON.stringify(store.state.dPage))
+  //     }
+  //     setTimeout(() => {
+  //       store.state.dSelectWidgets = []
+  //     }, 10)
+  //   } else {
+  //     // store.state.dActiveElement = {}
+  //     setTimeout(() => {
+  //       store.state.dActiveElement = widget
+  //     }, 10)
+  //   }
+  // },
+  // // 多选元素
+  // selectWidgetsInOut(store, { uuid }) {
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
+  //   if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
+  //     if (selectWidgets.length === 0) {
+  //       if (store.state.dActiveElement.uuid !== '-1') {
+  //         selectWidgets.push(store.state.dActiveElement)
+  //       }
+  //     }
+  //     const index = selectWidgets.findIndex((item) => {
+  //       return item.uuid === uuid
+  //     })
+  //     // 如果已经存在则取消选择，否则加入选取
+  //     if (index !== -1) {
+  //       selectWidgets.splice(index, 1)
+  //       if (selectWidgets.length === 0) {
+  //         store.state.dActiveElement = store.state.dPage
+  //       }
+  //     } else {
+  //       selectWidgets.push(widget)
+  //     }
+  //     // if (selectWidgets.length === 1) {
+  //     //   store.state.dActiveElement = selectWidgets[0]
+  //     //   store.state.dSelectWidgets = []
+  //     // }
+  //   }
+  // },
   // 设置 mousemove 操作的初始值
-  initDMove(store, payload) {
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    mouseXY.x = payload.startX
-    mouseXY.y = payload.startY
-    widgetXY.x = payload.originX
-    widgetXY.y = payload.originY
-  },
-  // 组件移动结束
-  stopDMove(store) {
-    if (store.state.dMoving) {
-      store.dispatch('pushHistory', 'stopDMove')
-    }
-    store.state.dMoving = false
-  },
+  // initDMove(store, payload) {
+  //   const mouseXY = store.state.dMouseXY
+  //   const widgetXY = store.state.dActiveWidgetXY
+  //   mouseXY.x = payload.startX
+  //   mouseXY.y = payload.startY
+  //   widgetXY.x = payload.originX
+  //   widgetXY.y = payload.originY
+  // },
+  // // 组件移动结束
+  // stopDMove(store) {
+  //   if (store.state.dMoving) {
+  //     store.dispatch('pushHistory', 'stopDMove')
+  //   }
+  //   store.state.dMoving = false
+  // },
   // 移动组件
-  dMove(store, payload) {
-    const { donotMove } = payload // 由moveable代理移动
-    store.state.dMoving = true
+  // dMove(store, payload) {
+  //   const { donotMove } = payload // 由moveable代理移动
+  //   store.state.dMoving = true
 
-    const page = store.state.dPage
+  //   const page = store.state.dPage
 
-    const target = store.state.dActiveElement
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
+  //   const target = store.state.dActiveElement
+  //   const mouseXY = store.state.dMouseXY
+  //   const widgetXY = store.state.dActiveWidgetXY
 
-    let parent = page
+  //   let parent = page
 
-    if (target.parent !== '-1') {
-      parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-    }
+  //   if (target.parent !== '-1') {
+  //     parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
+  //   }
 
-    const dx = payload.x - mouseXY.x
-    const dy = payload.y - mouseXY.y
-    let left = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-    let top = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
+  //   const dx = payload.x - mouseXY.x
+  //   const dy = payload.y - mouseXY.y
+  //   let left = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
+  //   let top = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
 
-    left = Math.max(Math.min(left, page.width - target.record.width), 0)
-    top = Math.max(Math.min(top, page.height - target.record.height), 0)
+  //   left = Math.max(Math.min(left, page.width - target.record.width), 0)
+  //   top = Math.max(Math.min(top, page.height - target.record.height), 0)
 
-    if (target.isContainer) {
-      const dLeft = target.left - left
-      const dTop = target.top - top
-      const len = store.state.dWidgets.length
-      for (let i = 0; i < len; ++i) {
-        const widget = store.state.dWidgets[i]
-        if (widget.parent === target.uuid) {
-          widget.left -= dLeft
-          widget.top -= dTop
-        }
-      }
-    }
+  //   if (target.isContainer) {
+  //     const dLeft = target.left - left
+  //     const dTop = target.top - top
+  //     const len = store.state.dWidgets.length
+  //     for (let i = 0; i < len; ++i) {
+  //       const widget = store.state.dWidgets[i]
+  //       if (widget.parent === target.uuid) {
+  //         widget.left -= dLeft
+  //         widget.top -= dTop
+  //       }
+  //     }
+  //   }
 
-    if (!donotMove) {
-      target.left = left
-      target.top = top
-    }
+  //   if (!donotMove) {
+  //     target.left = left
+  //     target.top = top
+  //   }
 
-    if (parent.uuid !== '-1') {
-      store.dispatch('updateGroupSize', parent.uuid)
-    }
+  //   if (parent.uuid !== '-1') {
+  //     store.dispatch('updateGroupSize', parent.uuid)
+  //   }
 
-    store.dispatch('reChangeCanvas')
-  },
-  // 设置 resize 操作的初始值
-  initDResize(store, payload) {
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    const resizeWH = store.state.dResizeWH
-    mouseXY.x = payload.startX
-    mouseXY.y = payload.startY
-    widgetXY.x = payload.originX
-    widgetXY.y = payload.originY
-    resizeWH.width = payload.width
-    resizeWH.height = payload.height
-  },
-  // 更新组件宽高
-  dResize(store, { x, y, dirs }) {
-    store.state.dResizeing = true
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // // 设置 resize 操作的初始值
+  // initDResize(store, payload) {
+  //   const mouseXY = store.state.dMouseXY
+  //   const widgetXY = store.state.dActiveWidgetXY
+  //   const resizeWH = store.state.dResizeWH
+  //   mouseXY.x = payload.startX
+  //   mouseXY.y = payload.startY
+  //   widgetXY.x = payload.originX
+  //   widgetXY.y = payload.originY
+  //   resizeWH.width = payload.width
+  //   resizeWH.height = payload.height
+  // },
+  // // 更新组件宽高
+  // dResize(store, { x, y, dirs }) {
+  //   store.state.dResizeing = true
 
-    const page = store.state.dPage
-    const target = store.state.dActiveElement
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    const resizeWH = store.state.dResizeWH
-    let parent = page
+  //   const page = store.state.dPage
+  //   const target = store.state.dActiveElement
+  //   const mouseXY = store.state.dMouseXY
+  //   const widgetXY = store.state.dActiveWidgetXY
+  //   const resizeWH = store.state.dResizeWH
+  //   let parent = page
 
-    if (target.parent !== '-1') {
-      parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-    }
+  //   if (target.parent !== '-1') {
+  //     parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
+  //   }
 
-    const dx = x - mouseXY.x
-    const dy = y - mouseXY.y
+  //   const dx = x - mouseXY.x
+  //   const dy = y - mouseXY.y
 
-    let left = 0
-    let top = 0
+  //   let left = 0
+  //   let top = 0
 
-    for (let i = 0; i < dirs.length; ++i) {
-      const dir = dirs[i]
+  //   for (let i = 0; i < dirs.length; ++i) {
+  //     const dir = dirs[i]
 
-      switch (dir) {
-        case 'top':
-          const t = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
-          top = Math.max(t, 0)
-          top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
-          target.height += target.top - top
-          target.height = Math.max(target.height, target.record.minHeight)
-          target.top = top
-          break
-        case 'bottom':
-          top = Math.floor((dy * 100) / store.state.dZoom)
-          target.height = resizeWH.height + top
-          target.height = Math.max(target.height, target.record.minHeight)
-          target.height = Math.min(target.height, page.height - target.top)
-          break
-        case 'left':
-          const tLeft = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-          left = Math.max(tLeft, 0)
-          target.width += target.left - left
-          target.width = Math.max(target.width, target.record.minWidth)
-          left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
-          target.left = left
-          break
-        case 'right':
-          left = Math.floor((dx * 100) / store.state.dZoom)
-          target.width = resizeWH.width + left
-          target.width = Math.max(target.width, target.record.minWidth)
-          target.width = Math.min(target.width, page.width - target.left)
-          break
-      }
-    }
-    if (parent.uuid !== '-1') {
-      store.dispatch('updateGroupSize', parent.uuid)
-    }
+  //     switch (dir) {
+  //       case 'top':
+  //         const t = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
+  //         top = Math.max(t, 0)
+  //         top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
+  //         target.height += target.top - top
+  //         target.height = Math.max(target.height, target.record.minHeight)
+  //         target.top = top
+  //         break
+  //       case 'bottom':
+  //         top = Math.floor((dy * 100) / store.state.dZoom)
+  //         target.height = resizeWH.height + top
+  //         target.height = Math.max(target.height, target.record.minHeight)
+  //         target.height = Math.min(target.height, page.height - target.top)
+  //         break
+  //       case 'left':
+  //         const tLeft = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
+  //         left = Math.max(tLeft, 0)
+  //         target.width += target.left - left
+  //         target.width = Math.max(target.width, target.record.minWidth)
+  //         left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
+  //         target.left = left
+  //         break
+  //       case 'right':
+  //         left = Math.floor((dx * 100) / store.state.dZoom)
+  //         target.width = resizeWH.width + left
+  //         target.width = Math.max(target.width, target.record.minWidth)
+  //         target.width = Math.min(target.width, page.width - target.left)
+  //         break
+  //     }
+  //   }
+  //   if (parent.uuid !== '-1') {
+  //     store.dispatch('updateGroupSize', parent.uuid)
+  //   }
 
-    store.dispatch('reChangeCanvas')
-  },
-  // 组件调整结束
-  stopDResize(store) {
-    if (store.state.dResizeing) {
-      store.dispatch('pushHistory', 'stopDResize')
-    }
-    store.state.dResizeing = false
-  },
-  // 强制重绘画布
-  reChangeCanvas(store) {
-    // const tag = store.state.dPage.tag
-    // store.state.dPage.tag = tag === 0 ? 0.01 : 0
-  },
+  //   store.dispatch('reChangeCanvas')
+  // },
+  // // 组件调整结束
+  // stopDResize(store) {
+  //   if (store.state.dResizeing) {
+  //     store.dispatch('pushHistory', 'stopDResize')
+  //   }
+  //   store.state.dResizeing = false
+  // },
+  // // 强制重绘画布
+  // reChangeCanvas(store) {
+  //   // const tag = store.state.dPage.tag
+  //   // store.state.dPage.tag = tag === 0 ? 0.01 : 0
+  // },
   // pushColorToHistory(store, color) {
   //   const history = store.state.dColorHistory
   //   // 如果已经存在就提到前面来，避免重复
@@ -538,295 +538,295 @@ export default {
   //   const head = [color]
   //   store.state.dColorHistory = head.concat(history)
   // },
-  updateHoverUuid(store, uuid) {
-    store.state.dHoverUuid = uuid
-  },
+  // updateHoverUuid(store, uuid) {
+  //   store.state.dHoverUuid = uuid
+  // },
   // showRefLine(store, show) {
   //   store.state.dShowRefLine = show
   // },
-  updateAlign(store: any, { align, uuid, group }: any) {
-    const widgets = store.state.dWidgets
-    const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
-    let parent = group || store.state.dPage
+  // updateAlign(store: any, { align, uuid, group }: any) {
+  //   const widgets = store.state.dWidgets
+  //   const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
+  //   let parent = group || store.state.dPage
 
-    if (target.parent !== '-1') {
-      parent = widgets.find((item: any) => item.uuid === target.parent)
-    }
+  //   if (target.parent !== '-1') {
+  //     parent = widgets.find((item: any) => item.uuid === target.parent)
+  //   }
 
-    let left = target.left
-    let top = target.top
-    let pw = parent.record.width || parent.width
-    let ph = parent.record.height || parent.height
+  //   let left = target.left
+  //   let top = target.top
+  //   let pw = parent.record.width || parent.width
+  //   let ph = parent.record.height || parent.height
 
-    if (parent.uuid === '-1') {
-      pw = parent.width
-      ph = parent.height
-    }
+  //   if (parent.uuid === '-1') {
+  //     pw = parent.width
+  //     ph = parent.height
+  //   }
 
-    const targetW = target.width
-    const targetH = target.height
-    switch (align) {
-      case 'left':
-        left = parent.left
-        break
-      case 'ch': // 水平居中
-        left = parent.left + pw / 2 - targetW / 2
-        break
-      case 'right':
-        left = parent.left + pw - targetW
-        break
-      case 'top':
-        top = parent.top
-        break
-      case 'cv': // 垂直居中
-        top = parent.top + ph / 2 - targetH / 2
-        break
-      case 'bottom':
-        top = parent.top + ph - targetH
-        break
-    }
+  //   const targetW = target.width
+  //   const targetH = target.height
+  //   switch (align) {
+  //     case 'left':
+  //       left = parent.left
+  //       break
+  //     case 'ch': // 水平居中
+  //       left = parent.left + pw / 2 - targetW / 2
+  //       break
+  //     case 'right':
+  //       left = parent.left + pw - targetW
+  //       break
+  //     case 'top':
+  //       top = parent.top
+  //       break
+  //     case 'cv': // 垂直居中
+  //       top = parent.top + ph / 2 - targetH / 2
+  //       break
+  //     case 'bottom':
+  //       top = parent.top + ph - targetH
+  //       break
+  //   }
 
-    if (target.left !== left || target.top !== top) {
-      if (target.isContainer) {
-        const dLeft = target.left - left
-        const dTop = target.top - top
-        const len = widgets.length
-        for (let i = 0; i < len; ++i) {
-          const widget = widgets[i]
-          if (widget.parent === target.uuid) {
-            widget.left -= dLeft
-            widget.top -= dTop
-          }
-        }
-      }
-      target.left = left
-      target.top = top
+  //   if (target.left !== left || target.top !== top) {
+  //     if (target.isContainer) {
+  //       const dLeft = target.left - left
+  //       const dTop = target.top - top
+  //       const len = widgets.length
+  //       for (let i = 0; i < len; ++i) {
+  //         const widget = widgets[i]
+  //         if (widget.parent === target.uuid) {
+  //           widget.left -= dLeft
+  //           widget.top -= dTop
+  //         }
+  //       }
+  //     }
+  //     target.left = left
+  //     target.top = top
 
-      store.dispatch('pushHistory', 'updateAlign')
-      store.dispatch('reChangeCanvas')
-    }
-  },
-  getWidgetJsonData(store) {
-    const page = JSON.parse(JSON.stringify(store.state.dPage))
-    const widgets = JSON.parse(JSON.stringify(store.state.dWidgets))
-    page.widgets = widgets
+  //     store.dispatch('pushHistory', 'updateAlign')
+  //     store.dispatch('reChangeCanvas')
+  //   }
+  // },
+  // getWidgetJsonData(store) {
+  //   const page = JSON.parse(JSON.stringify(store.state.dPage))
+  //   const widgets = JSON.parse(JSON.stringify(store.state.dWidgets))
+  //   page.widgets = widgets
 
-    return page
-  },
+  //   return page
+  // },
   // TODO 组合操作
   // updateAltDown(store, value) {
   //   store.state.dAltDown = value
   //   console.log('控制组合按键, 成组功能为: realCombined')
   // },
-  realCombined(store: any) {
-    const selectWidgets = store.state.dSelectWidgets
-    if (selectWidgets.length > 1) {
-      const widgets = store.state.dWidgets
-      const group = JSON.parse(store.state.dGroupJson)
-      group.uuid = nanoid()
-      widgets.push(group)
-      let left = Number(store.state.dPage.width)
-      let top = Number(store.state.dPage.height)
-      let right = 0
-      let bottom = 0
-      const sortWidgets = [] // 顺序取出元素
-      const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-      for (const w of widgets) {
-        selectkeys.includes(w.uuid) && sortWidgets.push(w)
-      }
-      for (let i = 0; i < sortWidgets.length; ++i) {
-        const uuid = sortWidgets[i].uuid
-        const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-        const widget = { ...widgets[index] } // clone
-        if (widget.isContainer) {
-          widgets.splice(index, 1) // 删除旧组合
-          for (let i = 0; i < widgets.length; i++) {
-            const item = widgets[i]
-            item.parent === widget.uuid && (item.parent = group.uuid)
-            // if (item.parent === widget.uuid) {
-            //   item.parent = group.uuid
-            //   // 重新排列
-            //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
-            //   // widgets.splice(index, 1)
-            //   // widgets.push(item)
-            // }
-          }
-        } else {
-          widget.parent = group.uuid
-          // 重新排列
-          widgets.splice(index, 1)
-          widgets.push(widget)
-        }
+  // realCombined(store: any) {
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   if (selectWidgets.length > 1) {
+  //     const widgets = store.state.dWidgets
+  //     const group = JSON.parse(store.state.dGroupJson)
+  //     group.uuid = nanoid()
+  //     widgets.push(group)
+  //     let left = Number(store.state.dPage.width)
+  //     let top = Number(store.state.dPage.height)
+  //     let right = 0
+  //     let bottom = 0
+  //     const sortWidgets = [] // 顺序取出元素
+  //     const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+  //     for (const w of widgets) {
+  //       selectkeys.includes(w.uuid) && sortWidgets.push(w)
+  //     }
+  //     for (let i = 0; i < sortWidgets.length; ++i) {
+  //       const uuid = sortWidgets[i].uuid
+  //       const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+  //       const widget = { ...widgets[index] } // clone
+  //       if (widget.isContainer) {
+  //         widgets.splice(index, 1) // 删除旧组合
+  //         for (let i = 0; i < widgets.length; i++) {
+  //           const item = widgets[i]
+  //           item.parent === widget.uuid && (item.parent = group.uuid)
+  //           // if (item.parent === widget.uuid) {
+  //           //   item.parent = group.uuid
+  //           //   // 重新排列
+  //           //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
+  //           //   // widgets.splice(index, 1)
+  //           //   // widgets.push(item)
+  //           // }
+  //         }
+  //       } else {
+  //         widget.parent = group.uuid
+  //         // 重新排列
+  //         widgets.splice(index, 1)
+  //         widgets.push(widget)
+  //       }
 
-        // sortWidgets.push({
-        //   index: index,
-        //   widget: widget,
-        // })
-        left = Math.min(left, widget.left)
-        top = Math.min(top, widget.top)
-        right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
-        bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
-      }
-      // sortWidgets.sort((a, b) => a.index > b.index)
-      // for (let i = 0; i < sortWidgets.length; ++i) {
-      //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
-      //     widgets.splice(index, 1)
-      //     widgets.push(sortWidgets[i].widget)
-      // }
+  //       // sortWidgets.push({
+  //       //   index: index,
+  //       //   widget: widget,
+  //       // })
+  //       left = Math.min(left, widget.left)
+  //       top = Math.min(top, widget.top)
+  //       right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
+  //       bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
+  //     }
+  //     // sortWidgets.sort((a, b) => a.index > b.index)
+  //     // for (let i = 0; i < sortWidgets.length; ++i) {
+  //     //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
+  //     //     widgets.splice(index, 1)
+  //     //     widgets.push(sortWidgets[i].widget)
+  //     // }
 
-      group.left = Number(left)
-      group.top = Number(top)
-      group.width = Number(right - left)
-      group.height = Number(bottom - top)
-      store.state.dActiveElement = group
-      store.state.dSelectWidgets = []
+  //     group.left = Number(left)
+  //     group.top = Number(top)
+  //     group.width = Number(right - left)
+  //     group.height = Number(bottom - top)
+  //     store.state.dActiveElement = group
+  //     store.state.dSelectWidgets = []
 
-      store.dispatch('pushHistory', 'realCombined')
-      // store.dispatch('reChangeCanvas')
-    }
-  },
-  getCombined(store: any) {
-    const selectWidgets = store.state.dSelectWidgets
-    return new Promise((resolve) => {
-      if (selectWidgets.length > 1) {
-        const widgets = store.state.dWidgets
-        const group = JSON.parse(store.state.dGroupJson)
-        group.uuid = nanoid()
-        // widgets.push(group)
-        let left = store.state.dPage.width
-        let top = store.state.dPage.height
-        let right = 0
-        let bottom = 0
-        const sortWidgets = [] // 顺序取出元素
-        const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-        for (const w of widgets) {
-          selectkeys.includes(w.uuid) && sortWidgets.push(w)
-        }
-        for (let i = 0; i < sortWidgets.length; ++i) {
-          const uuid = sortWidgets[i].uuid
-          const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-          const widget = { ...widgets[index] } // clone
-          left = Math.min(left, widget.left)
-          top = Math.min(top, widget.top)
-          right = Math.max(right, Number(widget.width) + Number(widget.left))
-          bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
-        }
+  //     store.dispatch('pushHistory', 'realCombined')
+  //     // store.dispatch('reChangeCanvas')
+  //   }
+  // },
+  // getCombined(store: any) {
+  //   const selectWidgets = store.state.dSelectWidgets
+  //   return new Promise((resolve) => {
+  //     if (selectWidgets.length > 1) {
+  //       const widgets = store.state.dWidgets
+  //       const group = JSON.parse(store.state.dGroupJson)
+  //       group.uuid = nanoid()
+  //       // widgets.push(group)
+  //       let left = store.state.dPage.width
+  //       let top = store.state.dPage.height
+  //       let right = 0
+  //       let bottom = 0
+  //       const sortWidgets = [] // 顺序取出元素
+  //       const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+  //       for (const w of widgets) {
+  //         selectkeys.includes(w.uuid) && sortWidgets.push(w)
+  //       }
+  //       for (let i = 0; i < sortWidgets.length; ++i) {
+  //         const uuid = sortWidgets[i].uuid
+  //         const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+  //         const widget = { ...widgets[index] } // clone
+  //         left = Math.min(left, widget.left)
+  //         top = Math.min(top, widget.top)
+  //         right = Math.max(right, Number(widget.width) + Number(widget.left))
+  //         bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
+  //       }
 
-        group.left = left
-        group.top = top
-        group.width = right - left
-        group.height = bottom - top
+  //       group.left = left
+  //       group.top = top
+  //       group.width = right - left
+  //       group.height = bottom - top
 
-        resolve(group)
-      }
-    })
-  },
-  initGroupJson(store, json) {
-    store.state.dGroupJson = json
-  },
-  updateGroupSize(store, uuid) {
-    const widgets = store.state.dWidgets
-    const group = widgets.find((item) => item.uuid === uuid)
-    let left = store.state.dPage.width
-    let top = store.state.dPage.height
-    let right = 0
-    let bottom = 0
-    for (let i = 0; i < widgets.length; ++i) {
-      if (widgets[i].parent === group.uuid) {
-        left = Math.min(left, widgets[i].left)
-        top = Math.min(top, widgets[i].top)
-        right = Math.max(right, widgets[i].record.width + widgets[i].left)
-        bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
-      }
-    }
-    group.width = right - left
-    group.height = bottom - top
-    group.left = left
-    group.top = top
-  },
-  updateLayerIndex(store, { uuid, value, isGroup }) {
-    const widgets = store.state.dWidgets
-    const widget = widgets.find((item) => item.uuid === uuid)
-    const index = widgets.findIndex((item) => item.uuid === uuid)
-    let group = []
-    if (isGroup) {
-      // 组合组件移动
-      group = widgets.filter((item) => item.parent === uuid)
-      for (let i = 0; i < group.length; ++i) {
-        const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
-        widgets.splice(pos, 1)
-      }
-    }
+  //       resolve(group)
+  //     }
+  //   })
+  // },
+  // initGroupJson(store, json) {
+  //   store.state.dGroupJson = json
+  // },
+  // updateGroupSize(store, uuid) {
+  //   const widgets = store.state.dWidgets
+  //   const group = widgets.find((item) => item.uuid === uuid)
+  //   let left = store.state.dPage.width
+  //   let top = store.state.dPage.height
+  //   let right = 0
+  //   let bottom = 0
+  //   for (let i = 0; i < widgets.length; ++i) {
+  //     if (widgets[i].parent === group.uuid) {
+  //       left = Math.min(left, widgets[i].left)
+  //       top = Math.min(top, widgets[i].top)
+  //       right = Math.max(right, widgets[i].record.width + widgets[i].left)
+  //       bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
+  //     }
+  //   }
+  //   group.width = right - left
+  //   group.height = bottom - top
+  //   group.left = left
+  //   group.top = top
+  // },
+  // updateLayerIndex(store, { uuid, value, isGroup }) {
+  //   const widgets = store.state.dWidgets
+  //   const widget = widgets.find((item) => item.uuid === uuid)
+  //   const index = widgets.findIndex((item) => item.uuid === uuid)
+  //   let group = []
+  //   if (isGroup) {
+  //     // 组合组件移动
+  //     group = widgets.filter((item) => item.parent === uuid)
+  //     for (let i = 0; i < group.length; ++i) {
+  //       const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
+  //       widgets.splice(pos, 1)
+  //     }
+  //   }
 
-    // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
-    let next = index + value
-    let move = false
-    const maxLen = widgets.length
-    let gCount = 1 // 记录跳过的组合数量
-    // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
-    while (next >= 0 && next < maxLen) {
-      const nextWidget = widgets[next]
-      if (widget.parent !== '-1') {
-        // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
-        if (nextWidget.parent === widget.parent) {
-          widgets.splice(index, 1)
-          widgets.splice(next, 0, widget)
-          move = true
-        }
-        break
-        // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
-      } else if (nextWidget.parent === '-1') {
-        if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
-          if (gCount === 0 && value > 0) {
-            next -= value
-          }
-          widgets.splice(index, 1)
-          widgets.splice(next, 0, widget)
-          move = true
-          break
-        } else if (nextWidget.isContainer) {
-          gCount = 0
-        }
-      }
-      next += value
-    }
-    next -= value
-    if (!move && next !== index) {
-      widgets.splice(index, 1)
-      widgets.splice(next, 0, widget)
-    }
+  //   // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
+  //   let next = index + value
+  //   let move = false
+  //   const maxLen = widgets.length
+  //   let gCount = 1 // 记录跳过的组合数量
+  //   // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
+  //   while (next >= 0 && next < maxLen) {
+  //     const nextWidget = widgets[next]
+  //     if (widget.parent !== '-1') {
+  //       // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
+  //       if (nextWidget.parent === widget.parent) {
+  //         widgets.splice(index, 1)
+  //         widgets.splice(next, 0, widget)
+  //         move = true
+  //       }
+  //       break
+  //       // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
+  //     } else if (nextWidget.parent === '-1') {
+  //       if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
+  //         if (gCount === 0 && value > 0) {
+  //           next -= value
+  //         }
+  //         widgets.splice(index, 1)
+  //         widgets.splice(next, 0, widget)
+  //         move = true
+  //         break
+  //       } else if (nextWidget.isContainer) {
+  //         gCount = 0
+  //       }
+  //     }
+  //     next += value
+  //   }
+  //   next -= value
+  //   if (!move && next !== index) {
+  //     widgets.splice(index, 1)
+  //     widgets.splice(next, 0, widget)
+  //   }
 
-    // 如果是组合，要把里面的组件添加回去
-    if (isGroup) {
-      const pos = widgets.findIndex((item) => item.uuid === uuid)
-      for (let i = group.length - 1; i >= 0; --i) {
-        widgets.splice(pos + 1, 0, group[i])
-      }
-    }
-  },
-  // TODO: 取消组合
-  ungroup(store, uuid) {
-    const widgets = store.state.dWidgets
-    const index = widgets.findIndex((item) => item.uuid === uuid)
-    widgets.splice(index, 1)
-    const len = widgets.length
+  //   // 如果是组合，要把里面的组件添加回去
+  //   if (isGroup) {
+  //     const pos = widgets.findIndex((item) => item.uuid === uuid)
+  //     for (let i = group.length - 1; i >= 0; --i) {
+  //       widgets.splice(pos + 1, 0, group[i])
+  //     }
+  //   }
+  // },
+  // // TODO: 取消组合
+  // ungroup(store, uuid) {
+  //   const widgets = store.state.dWidgets
+  //   const index = widgets.findIndex((item) => item.uuid === uuid)
+  //   widgets.splice(index, 1)
+  //   const len = widgets.length
 
-    for (let i = 0; i < len; ++i) {
-      if (widgets[i].parent === uuid) {
-        widgets[i].parent = '-1'
-        // store.state.dAltDown = true
-        // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
-        store.state.dSelectWidgets.push(widgets[i])
-      }
-    }
-    // store.state.dAltDown = false
-    store.commit('updateSelect')
-    // store.state.dActiveElement = store.state.dPage
-  },
-  /**
-   * 设置拖拽时在哪个图层
-   */
-  setDropOver(store: any, uuid: string) {
-    store.state.dDropOverUuid = uuid
-  },
+  //   for (let i = 0; i < len; ++i) {
+  //     if (widgets[i].parent === uuid) {
+  //       widgets[i].parent = '-1'
+  //       // store.state.dAltDown = true
+  //       // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
+  //       store.state.dSelectWidgets.push(widgets[i])
+  //     }
+  //   }
+  //   // store.state.dAltDown = false
+  //   store.commit('updateSelect')
+  //   // store.state.dActiveElement = store.state.dPage
+  // },
+  // /**
+  //  * 设置拖拽时在哪个图层
+  //  */
+  // setDropOver(store: any, uuid: string) {
+  //   store.state.dDropOverUuid = uuid
+  // },
 }
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
index ec4edd5..909c4ef 100644
--- a/src/store/modules/design/index.ts
+++ b/src/store/modules/design/index.ts
@@ -17,27 +17,27 @@ const all = {
     //   verticalGuidelines: [],
     //   horizontalGuidelines: [],
     // },
-    dActiveWidgetXY: {
-      x: 0, // 选中组件的横向初始值
-      y: 0, // 选中组件的纵向初始值
-    },
-    dMouseXY: {
-      x: 0, // 鼠标按下时的横坐标
-      y: 0, // 鼠标按下时的纵坐标
-    },
+    // dActiveWidgetXY: {
+    //   x: 0, // 选中组件的横向初始值
+    //   y: 0, // 选中组件的纵向初始值
+    // },
+    // dMouseXY: {
+    //   x: 0, // 鼠标按下时的横坐标
+    //   y: 0, // 鼠标按下时的纵坐标
+    // },
     // dMoving: false, // 是否正在移动组件
     // dDraging: false, // 是否正在抓取组件
     // dResizeing: false, // 是否正在调整组件宽高
     // dShowRefLine: true, // 是否显示参考线
-    dResizeWH: {
-      // 初始化调整大小时组件的宽高
-      width: 0,
-      height: 0,
-    },
-    dActiveElement: {}, // 选中的组件或页面
-    dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
-    dHoverUuid: '-1', // 鼠标在这个图层上
-    dDropOverUuid: '', // 拖动时放在哪个图层上
+    // dResizeWH: {
+    //   // 初始化调整大小时组件的宽高
+    //   width: 0,
+    //   height: 0,
+    // },
+    // dActiveElement: {}, // 选中的组件或页面
+    // dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
+    // dHoverUuid: '-1', // 鼠标在这个图层上
+    // dDropOverUuid: '', // 拖动时放在哪个图层上
     // dPage: {
     //   name: '背景页面',
     //   type: 'page',
@@ -60,7 +60,7 @@ const all = {
     //   ],
     //   record: {},
     // },
-    dWidgets: [], // 已使用的组件
+    // dWidgets: [], // 已使用的组件
     // dHistory: [], // 记录历史操作（保存整个画布的json数据）
     // dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
     // dPageHistory: [], // 记录历史操作对应的page
@@ -71,22 +71,22 @@ const all = {
     // },
     // dColorHistory: [], // 记录历史选择的颜色
     // dAltDown: false, // 记录是否按下alt键 / 或ctrl
-    dSelectWidgets: [], // 记录多选的组件
-    dGroupJson: {}, // 组合的json数据
-    selectItem: { data: null }, // 记录当前选择的元素, data
-    activeMouseEvent: null, // 正在活动的鼠标事件
+    // dSelectWidgets: [], // 记录多选的组件
+    // dGroupJson: {}, // 组合的json数据
+    // selectItem: { data: null }, // 记录当前选择的元素, data
+    // activeMouseEvent: null, // 正在活动的鼠标事件
     // showMoveable: false, // 全局控制选择框的显示
     // showRotatable: true, // 是否显示moveable的旋转按钮
-    zoomScreenChange: null, // 画布强制刷新适应度
-    updateRect: null, // 强制刷新操作框
-    updateSelect: null, // 强制设置选择元素
-    dCropUuid: -1, // 正在编辑or裁剪的组件id
+    // zoomScreenChange: null, // 画布强制刷新适应度
+    // updateRect: null, // 强制刷新操作框
+    // updateSelect: null, // 强制设置选择元素
+    // dCropUuid: -1, // 正在编辑or裁剪的组件id
     // dDragInitData: {}, // 拖拽初始化数据
   },
   getters: {
-    selectItem(state: any) {
-      return state.selectItem
-    },
+    // selectItem(state: any) {
+    //   return state.selectItem
+    // },
     // dZoom(state) {
     //   return state.dZoom
     // },
@@ -99,78 +99,78 @@ const all = {
     // gridSize(state) {
     //   return state.gridSize
     // },
-    dActiveWidgetXY(state) {
-      return state.dActiveWidgetXY
-    },
-    dMouseXY(state) {
-      return state.dMouseXY
-    },
+    // dActiveWidgetXY(state) {
+    //   return state.dActiveWidgetXY
+    // },
+    // dMouseXY(state) {
+    //   return state.dMouseXY
+    // },
     // dMoving(state) {
     //   return state.dMoving
     // },
     // dDraging(state) {
     //   return state.dDraging
     // },
-    dActiveElement(state) {
-      return state.dActiveElement
-    },
+    // dActiveElement(state) {
+    //   return state.dActiveElement
+    // },
     // dPage(state) {
     //   return state.dPage
     // },
-    dWidgets(state) {
-      return state.dWidgets
-    },
+    // dWidgets(state) {
+    //   return state.dWidgets
+    // },
     // dHistoryParams(state) {
     //   return state.dHistoryParams
     // },
     // dColorHistory(state) {
     //   return state.dColorHistory
     // },
-    dHoverUuid(state) {
-      return state.dHoverUuid
-    },
+    // dHoverUuid(state) {
+    //   return state.dHoverUuid
+    // },
     // dResizeing(state) {
     //   return state.dResizeing
     // },
     // dShowRefLine(state) {
     //   return state.dShowRefLine
     // },
-    dCopyElement(state) {
-      return state.dCopyElement
-    },
+    // dCopyElement(state) {
+    //   return state.dCopyElement
+    // },
     // dAltDown(state) {
     //   return state.dAltDown
     // },
-    dSelectWidgets(state) {
-      return state.dSelectWidgets
-    },
-    activeMouseEvent(state: any) {
-      return state.activeMouseEvent
-    },
+    // dSelectWidgets(state) {
+    //   return state.dSelectWidgets
+    // },
+    // activeMouseEvent(state: any) {
+    //   return state.activeMouseEvent
+    // },
     // showMoveable(state: any) {
     //   return state.showMoveable
     // },
     // showRotatable(state: any) {
     //   return state.showRotatable
     // },
-    zoomScreenChange(state: any) {
-      return state.zoomScreenChange
-    },
-    updateRect(state: any) {
-      return state.updateRect
-    },
-    updateSelect(state: any) {
-      return state.updateSelect
-    },
-    dDropOverUuid(state: any) {
-      return state.dDropOverUuid
-    },
+    // zoomScreenChange(state: any) {
+    //   return state.zoomScreenChange
+    // },
+    // updateRect(state: any) {
+    //   return state.updateRect
+    // },
+    // updateSelect(state: any) {
+    //   return state.updateSelect
+    // },
+    // dDropOverUuid(state: any) {
+    //   return state.dDropOverUuid
+    // },
     // guidelines(state: any) {
     //   return state.guidelines
     // },
-    dCropUuid(state: any) {
-      return state.dCropUuid
-    },
+    // dCropUuid(state: any) {
+    //   return state.dCropUuid
+    // },
     // dPageHistory(state: any) {
     //   return state.dPageHistory
     // },
diff --git a/src/store/modules/design/mutations.ts b/src/store/modules/design/mutations.ts
index 867ebbd..3acf04e 100644
--- a/src/store/modules/design/mutations.ts
+++ b/src/store/modules/design/mutations.ts
@@ -16,26 +16,26 @@ export default {
   // updatePaddingTop(state: Type.Object, num: number) {
   //   state.dPaddingTop = num
   // },
-  selectItem(state: Type.Object, { data, type }: any) {
-    state.selectItem.data = data
-    state.selectItem.type = type
-  },
-  resize(state: Type.Object, data: Type.Object) {
-    const { width, height } = data
-    const target = state.dActiveElement
-    target.width = width
-    target.height = height
-  },
-  setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
-    const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
-    widget[key] = value
-  },
-  setMouseEvent(state: Type.Object, e: Event | null) {
-    state.activeMouseEvent = e
-  },
-  setDWidgets(state: Type.Object, e: any) {
-    state.dWidgets = e
-  },
+  // selectItem(state: Type.Object, { data, type }: any) {
+  //   state.selectItem.data = data
+  //   state.selectItem.type = type
+  // },
+  // resize(state: Type.Object, data: Type.Object) {
+  //   const { width, height } = data
+  //   const target = state.dActiveElement
+  //   target.width = width
+  //   target.height = height
+  // },
+  // setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
+  //   const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
+  //   widget[key] = value
+  // },
+  // setMouseEvent(state: Type.Object, e: Event | null) {
+  //   state.activeMouseEvent = e
+  // },
+  // setDWidgets(state: Type.Object, e: any) {
+  //   state.dWidgets = e
+  // },
 
   // setDPage(state: Type.Object, e: any) {
   //   state.dPage = e
@@ -51,26 +51,26 @@ export default {
   // setShowRotatable(state: Type.Object, e: any) {
   //   state.showRotatable = e
   // },
-  zoomScreenChange(state: Type.Object, e: any) {
-    // 画布尺寸适应度强制刷新
-    state.zoomScreenChange = Math.random()
-  },
-  updateRect(state: Type.Object, e: any) {
-    // 强制刷新操作框
-    state.updateRect = Math.random()
-  },
-  updateSelect(state: Type.Object, e: any) {
-    // 强制触发元素选择
-    state.updateSelect = Math.random()
-  },
+  // zoomScreenChange(state: Type.Object, e: any) {
+  //   // 画布尺寸适应度强制刷新
+  //   state.zoomScreenChange = Math.random()
+  // },
+  // updateRect(state: Type.Object, e: any) {
+  //   // 强制刷新操作框
+  //   state.updateRect = Math.random()
+  // },
+  // updateSelect(state: Type.Object, e: any) {
+  //   // 强制触发元素选择
+  //   state.updateSelect = Math.random()
+  // },
   // updateGuidelines(state: Type.Object, lines: any) {
   //   // 修改标尺线
   //   state.guidelines = { ...state.guidelines, ...lines }
   // },
-  setCropUuid(state: Type.Object, uuid: any) {
-    // 设置正在裁剪or编辑的组件
-    state.dCropUuid = uuid
-  },
+  // setCropUuid(state: Type.Object, uuid: any) {
+  //   // 设置正在裁剪or编辑的组件
+  //   state.dCropUuid = uuid
+  // },
   // setDraging(state: Type.Object, drag: boolean) {
   //   state.dDraging = drag
   // },

From 946d9bcf7a420c3968ab568611d0a897be55a992 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Fri, 29 Mar 2024 14:35:58 +0000
Subject: [PATCH 18/23] rebuilt: vuex to pinia

---
 package-lock.json                             |  17 ++
 package.json                                  |   2 +
 src/common/hooks/dragHelper.ts                |  20 ++-
 src/common/hooks/mapGetters.ts                |  28 +--
 .../methods/DesignFeatures/setComponents.ts   |  17 +-
 src/common/methods/DesignFeatures/setImage.ts |  13 +-
 src/common/methods/addMouseWheel.ts           |   2 +-
 .../business/cropper/CropImage/CropImage.vue  |   5 +-
 .../business/cropper/CropImage/index.vue      |   4 +-
 .../image-cutout/ImageCutout/index.vue        |   4 +-
 .../image-cutout/ImageExtraction/index.vue    |   8 +-
 src/components/business/moveable/Moveable.vue | 164 ++++++++++++------
 src/components/business/moveable/Selecto.ts   |  22 ++-
 .../business/picture-selector/index.vue       |   4 +-
 src/components/business/qrcode/method.ts      |   4 +-
 .../business/right-click-menu/RcMenu.vue      |  71 +++++---
 .../business/save-download/CreateCover.vue    |  17 +-
 .../modules/layout/designBoard/index.vue      | 107 +++++++-----
 src/components/modules/layout/lineGuides.vue  |   4 +-
 .../modules/layout/zoomControl/index.vue      |  19 +-
 .../modules/panel/components/layerList.vue    |  33 ++--
 src/components/modules/panel/stylePanel.vue   |  58 +++++--
 .../modules/panel/wrap/BgImgListWrap.vue      |  24 ++-
 .../modules/panel/wrap/CompListWrap.vue       |  41 +++--
 .../modules/panel/wrap/GraphListWrap.vue      |  15 +-
 .../modules/panel/wrap/PhotoListWrap.vue      |  15 +-
 .../modules/panel/wrap/TempListWrap.vue       |  28 +--
 .../modules/panel/wrap/TextListWrap.vue       |  11 +-
 .../modules/panel/wrap/ToolsListWrap.vue      |  13 +-
 .../modules/panel/wrap/UserWrap.vue           |  14 +-
 .../modules/settings/colorSelect.vue          |   4 +-
 .../modules/settings/numberSlider.vue         |   1 -
 .../modules/settings/valueSelect.vue          |   2 +-
 src/components/modules/widgets/pageStyle.vue  |  26 +--
 .../modules/widgets/wGroup/wGroup.vue         |  42 +++--
 .../modules/widgets/wGroup/wGroupStyle.vue    |  74 ++++----
 .../modules/widgets/wImage/wImage.vue         |  37 ++--
 .../modules/widgets/wImage/wImageStyle.vue    |  98 ++++++-----
 .../modules/widgets/wQrcode/wQrcode.vue       |  20 ++-
 .../modules/widgets/wQrcode/wQrcodeStyle.vue  |  86 +++++----
 src/components/modules/widgets/wSvg/wSvg.vue  |  36 ++--
 .../modules/widgets/wSvg/wSvgStyle.vue        |  69 ++++----
 .../modules/widgets/wText/pageFontsFilter.ts  |  10 +-
 .../modules/widgets/wText/wText.vue           |  48 +++--
 .../modules/widgets/wText/wTextStyle.vue      |  76 +++++---
 src/main.ts                                   |   4 +-
 src/mixins/methods/dealWithCtrl.ts            |  33 ++--
 src/mixins/methods/handlePaste.ts             |  25 ++-
 src/mixins/methods/keyCodeOptions.ts          |  50 ++++--
 src/mixins/move.ts                            |  52 ++++--
 src/pinia/design/canvas/index.ts              |  18 +-
 src/pinia/design/group/action/index.ts        |   2 +-
 .../design/history/actions/pushHistory.ts     |   5 +-
 src/pinia/design/history/index.ts             |   2 +-
 src/pinia/design/widget/actions/align.ts      |   2 +-
 src/pinia/design/widget/actions/index.ts      |   4 +-
 src/pinia/design/widget/actions/layer.ts      |   2 +-
 src/pinia/design/widget/actions/select.ts     |   4 +-
 src/pinia/design/widget/actions/widget.ts     |  16 +-
 src/pinia/design/widget/index.ts              |  26 ++-
 src/utils/utils.ts                            |  28 +++
 src/views/Draw.vue                            |  28 +--
 src/views/Index.vue                           |  27 +--
 src/views/Psd.vue                             |  18 +-
 src/views/components/HeaderOptions.vue        |  31 ++--
 src/views/components/UploadTemplate.vue       |  23 +--
 yarn.lock                                     |  17 ++
 67 files changed, 1169 insertions(+), 661 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 57c6d36..9d13655 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -17,6 +17,7 @@
         "@webtoon/psd": "^0.4.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
+        "cropperjs": "^1.6.1",
         "dayjs": "^1.10.7",
         "element-plus": "^2.3.7",
         "fontfaceobserver": "^2.1.0",
@@ -37,6 +38,7 @@
         "vuex": "^4.0.0-0"
       },
       "devDependencies": {
+        "@types/cropperjs": "^1.3.0",
         "@types/fontfaceobserver": "^2.1.3",
         "@types/node": "^20.11.24",
         "@types/throttle-debounce": "^2.1.0",
@@ -973,6 +975,16 @@
         "framework-utils": "^1.1.0"
       }
     },
+    "node_modules/@types/cropperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz",
+      "integrity": "sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==",
+      "deprecated": "This is a stub types definition. cropperjs provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "cropperjs": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1830,6 +1842,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cropperjs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz",
+      "integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA=="
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
diff --git a/package.json b/package.json
index c92df3f..be845fa 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@webtoon/psd": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.10.7",
     "element-plus": "^2.3.7",
     "fontfaceobserver": "^2.1.0",
@@ -40,6 +41,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/cropperjs": "^1.3.0",
     "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",
diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts
index 1d5e617..c003700 100644
--- a/src/common/hooks/dragHelper.ts
+++ b/src/common/hooks/dragHelper.ts
@@ -6,7 +6,9 @@
  * @LastEditTime: 2023-11-22 18:11:15
  */
 
-import store from '@/store'
+import { useControlStore, useWidgetStore } from "@/pinia"
+
+// import store from '@/store'
 
 type TInitial = {
   offsetX: number
@@ -71,7 +73,10 @@ export default class DragHelper {
    */
   public start(e: MouseEvent, finallySize: number) {
     if (!this.cloneEl) {
-      store.commit('setDraging', true)
+      const controlStore = useControlStore()
+      controlStore.setDraging(true)
+      // store.commit('setDraging', true)
+
       const app = window.document.getElementById('app')
       if (!app || !e) return
       app.classList.add('drag_active') // 整个鼠标全局变成抓取
@@ -134,12 +139,19 @@ export default class DragHelper {
   }
   // 结束/完成处理（动画）
   private finish(done = false) {
+    
     if (!this.dragging) {
       return
     }
+
+    const controlStore = useControlStore()
+    const widgetStore = useWidgetStore()
     this.dragging = false
-    store.commit('setDraging', false)
-    store.commit('selectItem', {})
+    controlStore.setDraging(false)
+    // store.commit('setDraging', false)
+
+    widgetStore.setSelectItem({})
+    // store.commit('selectItem', {})
 
     if (!done) {
       const { pageX, offsetX, pageY, offsetY } = this.initial as TInitial
diff --git a/src/common/hooks/mapGetters.ts b/src/common/hooks/mapGetters.ts
index 98a3008..4423012 100644
--- a/src/common/hooks/mapGetters.ts
+++ b/src/common/hooks/mapGetters.ts
@@ -1,13 +1,21 @@
-import { ComputedRef, computed } from 'vue'
-import { useStore } from 'vuex'
+/*
+ * @Author: Jeremy-Yu
+ * @Date: 2024-02-14 14:58:48
+ * @Description: 同意处理vue3 Mapgetters 已废弃
+ * @LastEditors: ShawnPhang <https://m.palxp.cn>
+ * @LastEditTime: 2023-11-22 18:11:15
+ */
 
-export function useSetupMapGetters<T extends string>(strList: T[]) {
-  const mapData: Partial<{[x in T]: ComputedRef}> = {}
-  const getters = useStore().getters
+// import { ComputedRef, computed } from 'vue'
+// import { useStore } from 'vuex'
 
-  strList.forEach(val => {
-    mapData[val] = computed(() => getters[val])
-  })
+// export function useSetupMapGetters<T extends string>(strList: T[]) {
+//   const mapData: Partial<{[x in T]: ComputedRef}> = {}
+//   const getters = useStore().getters
 
-  return mapData as {[x in T]: ComputedRef}
-}
+//   strList.forEach(val => {
+//     mapData[val] = computed(() => getters[val])
+//   })
+
+//   return mapData as {[x in T]: ComputedRef}
+// }
diff --git a/src/common/methods/DesignFeatures/setComponents.ts b/src/common/methods/DesignFeatures/setComponents.ts
index 4152131..a72eca6 100644
--- a/src/common/methods/DesignFeatures/setComponents.ts
+++ b/src/common/methods/DesignFeatures/setComponents.ts
@@ -5,15 +5,20 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
-import store from '@/store'
-export default async function setCompData(item: TCommonItemData[] | string) {
-  const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
-  let parent: Partial<TCommonItemData> = {}
+import { useCanvasStore, usePageStore } from '@/pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
+// import store from '@/store'
+
+export default async function setCompData(item: TdWidgetData[] | string) {
+  const canvasStore = useCanvasStore()
+  const pageStore = usePageStore()
+  const group: TdWidgetData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
+  let parent: Partial<TdWidgetData> = {}
   Array.isArray(group) &&
     group.forEach((element) => {
       element.type === 'w-group' && (parent = element)
     })
-  const { width: screenWidth, height: screenHeight } = store.getters.dPage
+  const { width: screenWidth, height: screenHeight } = pageStore.dPage
   const { width: imgWidth = 0, height: imgHeight = 0 } = parent
   let ratio = 1
   // 先限制在画布内，保证不超过边界
@@ -22,7 +27,7 @@ export default async function setCompData(item: TCommonItemData[] | string) {
   }
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
-    ratio *= store.getters.dZoom / 100
+    ratio *= canvasStore.dZoom / 100
     group.forEach((element) => {
       element.fontSize && (element.fontSize *= ratio)
       element.width *= ratio
diff --git a/src/common/methods/DesignFeatures/setImage.ts b/src/common/methods/DesignFeatures/setImage.ts
index c5ee7f4..6bbde50 100644
--- a/src/common/methods/DesignFeatures/setImage.ts
+++ b/src/common/methods/DesignFeatures/setImage.ts
@@ -5,8 +5,9 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-01 20:55:51
  */
-import store from '@/store'
+// import store from '@/store'
 import { getImage } from '../getImgDetail'
+import { useCanvasStore, usePageStore } from '@/pinia'
 
 export type TItem2DataParam = {
   id?: string | number
@@ -24,8 +25,10 @@ export type TItem2DataResult = {
 }
 
 export default async function setItem2Data(item: TItem2DataParam): Promise<Required<TItem2DataParam>> {
+  const canvasStore = useCanvasStore()
+  const pageStore = usePageStore()
   const cloneItem = JSON.parse(JSON.stringify(item))
-  const { width: screenWidth, height: screenHeight } = store.getters.dPage
+  const { width: screenWidth, height: screenHeight } = pageStore.dPage
   let { width: imgWidth, height: imgHeight } = item
   if (!imgWidth || !imgHeight) {
     const actual = await getImage(item.url)
@@ -39,11 +42,11 @@ export default async function setItem2Data(item: TItem2DataParam): Promise<Requi
   }
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
-    cloneItem.width = cloneItem.width * ratio * (store.getters.dZoom / 100)
-    cloneItem.height = cloneItem.height * ratio * (store.getters.dZoom / 100)
+    cloneItem.width = cloneItem.width * ratio * (canvasStore.dZoom / 100)
+    cloneItem.height = cloneItem.height * ratio * (canvasStore.dZoom / 100)
   }
 
-  cloneItem.canvasWidth = cloneItem.width * (store.getters.dZoom / 100)
+  cloneItem.canvasWidth = cloneItem.width * (canvasStore.dZoom / 100)
   // cloneItem.canvasHeight = cloneItem.height * (store.getters.dZoom / 100)
   return cloneItem
 }
diff --git a/src/common/methods/addMouseWheel.ts b/src/common/methods/addMouseWheel.ts
index 77fd4af..415e2b9 100644
--- a/src/common/methods/addMouseWheel.ts
+++ b/src/common/methods/addMouseWheel.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-02 11:50:00
  */
 import { useControlStore } from '@/pinia'
-import store from '@/store'
+// import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
 type TAddEventObj = {
diff --git a/src/components/business/cropper/CropImage/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue
index 907f00a..6348ed0 100644
--- a/src/components/business/cropper/CropImage/CropImage.vue
+++ b/src/components/business/cropper/CropImage/CropImage.vue
@@ -23,17 +23,16 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
-import { storeToRefs } from 'pinia'
 import { useControlStore } from '@/pinia'
 
 export default defineComponent({
   components: { ElDialog },
   emits: ['done'],
   setup(props, context) {
-    const store = useStore()
+    // const store = useStore()
     const state = reactive({
       loading: false,
       url: '',
diff --git a/src/components/business/cropper/CropImage/index.vue b/src/components/business/cropper/CropImage/index.vue
index b188884..853ee46 100644
--- a/src/components/business/cropper/CropImage/index.vue
+++ b/src/components/business/cropper/CropImage/index.vue
@@ -23,7 +23,7 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, reactive, nextTick, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
 import { useControlStore } from '@/pinia'
@@ -41,7 +41,7 @@ type TOpenItem = {
   imgUrl: string
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const state = reactive({
   loading: false,
diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue
index 3e91bca..603c106 100644
--- a/src/components/business/image-cutout/ImageCutout/index.vue
+++ b/src/components/business/image-cutout/ImageCutout/index.vue
@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { reactive, nextTick, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElProgress } from 'element-plus'
 import { UploadFilled } from '@element-plus/icons-vue'
 import uploader from '@/components/common/Uploader/index.vue'
@@ -62,7 +62,7 @@ export type TImageCutoutState = {
     loading: boolean;
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const state = reactive<TImageCutoutState>({
   show: false,
diff --git a/src/components/business/image-cutout/ImageExtraction/index.vue b/src/components/business/image-cutout/ImageExtraction/index.vue
index 57e6343..acb2d32 100644
--- a/src/components/business/image-cutout/ImageExtraction/index.vue
+++ b/src/components/business/image-cutout/ImageExtraction/index.vue
@@ -46,9 +46,9 @@ type TState = {
   show: boolean;
   showMatting: boolean;
   isErasing: boolean;
-  radius: number | string;
+  radius: number;
   brushSize: string;
-  hardness: number | string;
+  hardness: number;
   hardnessText: string;
   constants: MattingType['constants'] | null;
 }
@@ -83,8 +83,8 @@ let mattingParam: MattingType | null
 const mattingStart = (mattingOptions: MattingType) => {
   mattingOptions.initLoadImages(props.raw, props.result)
   state.isErasing = mattingOptions.isErasing
-  state.radius = mattingOptions.radius
-  state.hardness = mattingOptions.hardness
+  state.radius = Number(mattingOptions.radius)
+  state.hardness = Number(mattingOptions.hardness)
   state.constants = mattingOptions.constants
   mattingParam = mattingOptions
 }
diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index 6628e2b..1192567 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -9,25 +9,26 @@
   <div id="empty" class="moveable__remove-item zk-moveable-style"></div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, nextTick, onMounted, watch } from 'vue'
+import { nextTick, onMounted, watch } from 'vue'
 
 import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
 import MoveableHelper from 'moveable-helper'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 // import { setTransformAttribute } from '@/common/methods/handleTransform'
 import useSelecto from './Selecto'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/pinia'
 
-const store = useStore()
-//  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
-const {
-  dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets, updateRect, updateSelect
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
+// const store = useStore()
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
+const forceStore = useForceStore()
+const historyStore = useHistoryStore()
 const { guidelines } = storeToRefs(useCanvasStore())
 const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
+const { dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets } = storeToRefs(widgetStore)
+const { updateRect, updateSelect } = storeToRefs(forceStore)
 
 let _target: string | null = null
 
@@ -38,12 +39,12 @@ watch(
       await nextTick()
       checkMouseEvent()
     }, 10);
-    if (!val.record) {
+    if (!val || !val.record) {
       return
     }
     if (!moveable) return
     // 选中非面板 并且不是组合内的元素
-    if (val.uuid != -1) {
+    if (Number(val.uuid) != -1) {
       await nextTick()
       const target = `[id="${val.uuid}"]`
       _target = `[id="${val.uuid}"]`
@@ -70,7 +71,8 @@ watch(
         checkMouseEvent()
       })
       // // End
-      store.commit('setShowMoveable', true)
+      controlStore.setShowMoveable(true)
+      // store.commit('setShowMoveable', true)
       // 参考线设置
       if (moveable.elementGuidelines && !moveable.elementGuidelines.includes(target)) {
         moveable.elementGuidelines.push(target)
@@ -126,7 +128,7 @@ watch(
 watch(
   () => updateSelect.value,
   () => {
-    const items = store.getters.dSelectWidgets
+    const items = widgetStore.dSelectWidgets
     setTimeout(async () => {
       if (!moveable) return
       moveable.updateRect()
@@ -299,6 +301,7 @@ onMounted(() => {
 
   moveable
   .on('dragStart', ({ inputEvent, target, stop }) => {
+    if (!dActiveElement.value) return
     if (inputEvent.target.nodeName === 'PRE') {
       dActiveElement.value.editable && stop()
     }
@@ -313,25 +316,39 @@ onMounted(() => {
   .on('dragEnd', ({ target, isDrag, inputEvent }) => {
     // console.log('onDragEnd', inputEvent)
     // TODO 清理mouseevent
-    store.commit('setMouseEvent', null)
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
+
     inputEvent.stopPropagation()
     inputEvent.preventDefault()
     // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
     if (holdPosition) {
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
         key: 'left',
         value: Number(holdPosition?.left),
       })
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'left',
+      //   value: Number(holdPosition?.left),
+      // })
+
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
         key: 'top',
         value: Number(holdPosition?.top),
       })
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'top',
+      //   value: Number(holdPosition?.top),
+      // })
+
       holdPosition = null // important
       setTimeout(() => {
-        store.dispatch("pushHistory")
-        // pushHistory()
+        historyStore.pushHistory()
+        // store.dispatch("pushHistory")
       }, 100)
     }
   })
@@ -352,19 +369,25 @@ onMounted(() => {
       const half = tf.substring(index + 1)
       rotate = half.slice(0, half.indexOf(')'))
     }
-    rotate &&
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
-        key: 'rotate',
-        value: rotate,
-      })
+    rotate && widgetStore.updateWidgetData({
+      uuid: dActiveElement.value?.uuid || "",
+      key: 'rotate',
+      value: rotate,
+    })
+
+    // rotate &&
+    //   store.dispatch("updateWidgetData", {
+    //     uuid: dActiveElement.value.uuid,
+    //     key: 'rotate',
+    //     value: rotate,
+    //   })
   })
   .on('resizeStart', (args) => {
     console.log(args.target.style.transform)
     if (!moveable) return
     
     moveable.snappable = false
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       if (String(args.direction) === '1,0') {
         moveable.keepRatio = false
         moveable.scalable = false
@@ -376,7 +399,7 @@ onMounted(() => {
         startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
         resetRatio = 1
       }
-    } else if (dActiveElement.value.type === 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+    } else if (dActiveElement.value?.type === 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
       const dirs = ['1,0', '0,-1', '-1,0', '0,1']
       dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
     }
@@ -384,10 +407,10 @@ onMounted(() => {
   .on('resize', (args: any) => {
     const { target, width, height, dist, delta, clientX, clientY, direction } = args
     console.log(2, args)
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       if (String(direction) === '1,1') {
         resetRatio = width / resizeStartWidth
-        target!.style.fontSize = dActiveElement.value.fontSize * resetRatio + 'px'
+        target!.style.fontSize = (dActiveElement.value?.fontSize || 0) * resetRatio + 'px'
         target!.style.letterSpacing = startLS * resetRatio + 'px'
         target!.style.lineHeight = startHL * resetRatio + 'px'
       }
@@ -397,19 +420,23 @@ onMounted(() => {
       // moveable.updateRect()
       target.style.backgroundImage = 'none'
       // moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
-    } else if (dActiveElement.value.type == 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+    } else if (dActiveElement.value?.type == 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
       resizeTempData = { width, height }
-    } else if (dActiveElement.value.type == 'w-group') {
+    } else if (dActiveElement.value?.type == 'w-group') {
       // let record = this.dActiveElement.record
       // this.dActiveElement.tempScale = width / record.width
-      store.commit('resize', { width: width, height: height })
+
+      widgetStore.resize({ width: width, height: height })
+      // store.commit('resize', { width: width, height: height })
+
       // this.resizeTempData = { width, height }
       // let record = this.dActiveElement.record
       // setTransformAttribute(target, 'scale', width / record.width)
     } else {
-      store.commit('resize', { width: width, height: height })
+      widgetStore.resize({ width: width, height: height })
+      // store.commit('resize', { width: width, height: height })
     }
-    dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value.rotate}`))
+    dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value?.rotate}`))
   })
   .on('resizeEnd', (e: any) => {
     if (!moveable) return
@@ -435,19 +462,32 @@ onMounted(() => {
       // }
       const left = e.lastEvent.drag.translate[0]
       const top = e.lastEvent.drag.translate[1]
-      store.dispatch("updateWidgetMultiple", {
-        uuid: dActiveElement.value.uuid,
+      widgetStore.updateWidgetMultiple({
+        uuid: dActiveElement.value?.uuid || "",
         data: [
           {
             key: 'left',
-            value: Number(dActiveElement.value.left) + left,
+            value: Number(dActiveElement.value?.left) + left,
           },
           {
             key: 'top',
-            value: Number(dActiveElement.value.top) + top,
+            value: Number(dActiveElement.value?.top) + top,
           },
         ],
       })
+      // store.dispatch("updateWidgetMultiple", {
+      //   uuid: dActiveElement.value.uuid,
+      //   data: [
+      //     {
+      //       key: 'left',
+      //       value: Number(dActiveElement.value.left) + left,
+      //     },
+      //     {
+      //       key: 'top',
+      //       value: Number(dActiveElement.value.top) + top,
+      //     },
+      //   ],
+      // })
       // 重置translate
       const tf = e.target.style.transform
       const iof = tf.indexOf('translate')
@@ -459,26 +499,30 @@ onMounted(() => {
       // }, 10)
     }
     if (resizeTempData) {
-      store.commit('resize', resizeTempData)
+      widgetStore.resize(resizeTempData)
+      // store.commit('resize', resizeTempData)
+
       resizeTempData = null
       // await this.$nextTick()
       moveable.updateRect()
       // 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
-      store.commit('setShowMoveable', false)
+      controlStore.setShowMoveable(false)
+      // store.commit('setShowMoveable', false)
       setTimeout(() => {
-        store.commit('setShowMoveable', true)
+        controlStore.setShowMoveable(true)
+        // store.commit('setShowMoveable', true)
       }, 10);
     }
     try {
-      if (dActiveElement.value.type === 'w-text') {
+      if (dActiveElement.value?.type === 'w-text') {
         const d = e.direction || e.lastEvent.direction
-        String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value?.fontSize) * resetRatio)
       }
     } catch (err) {}
     moveable.keepRatio = true
   })
   .on('scaleStart', (e) => {
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       startHL = Number(e.target!.style.lineHeight.replace('px', ''))
       startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
       resetRatio = 1
@@ -493,7 +537,7 @@ onMounted(() => {
     const { target, scale, transform } = e
     resetRatio = scale[0]
     target!.style.transform = transform
-    dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
+    dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
   })
   .on('scaleEnd', (e: any) => {
     if (!moveable) return
@@ -502,9 +546,9 @@ onMounted(() => {
     moveable.keepRatio = true
     console.log(e.target.style.transform)
     try {
-      if (dActiveElement.value.type === 'w-text') {
+      if (dActiveElement.value?.type === 'w-text') {
         const d = e.direction || e.lastEvent.direction
-        String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value.fontSize) * resetRatio)
       }
     } catch (err) {}
   })
@@ -516,13 +560,13 @@ onMounted(() => {
     for (let i = 0; i < events.length; i++) {
       const ev = events[i]
       const currentWidget = dWidgets.value.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
-      const left = Number(currentWidget.left) + ev.beforeTranslate[0]
+      const left = Number(currentWidget?.left) + ev.beforeTranslate[0]
       // debug -- start --
       if (i === 1) {
-        console.log(Number(currentWidget.left), ev.beforeTranslate[0])
+        console.log(Number(currentWidget?.left), ev.beforeTranslate[0])
       }
       // debug -- end --
-      const top = Number(currentWidget.top) + ev.beforeTranslate[1]
+      const top = Number(currentWidget?.top) + ev.beforeTranslate[1]
       ev.target.style.left = `${left}px`
       ev.target.style.top = `${top}px`
       holdGroupPosition[`${ev.target.getAttribute('data-uuid')}`] = { left, top }
@@ -532,16 +576,27 @@ onMounted(() => {
     for (const key in holdGroupPosition) {
       if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
         const item = holdGroupPosition[key]
-        store.dispatch("updateWidgetData", {
+        widgetStore.updateWidgetData({
           uuid: key,
           key: 'left',
           value: item.left,
         })
-        store.dispatch("updateWidgetData", {
+        // store.dispatch("updateWidgetData", {
+        //   uuid: key,
+        //   key: 'left',
+        //   value: item.left,
+        // })
+
+        widgetStore.updateWidgetData({
           uuid: key,
           key: 'top',
           value: item.top,
         })
+        // store.dispatch("updateWidgetData", {
+        //   uuid: key,
+        //   key: 'top',
+        //   value: item.top,
+        // })
       }
     }
     holdGroupPosition = null
@@ -603,7 +658,8 @@ function checkMouseEvent() {
   if (activeMouseEvent.value && moveable) {
     moveable.dragStart(activeMouseEvent.value)
     // 使用后销毁mouseevent
-    store.commit('setMouseEvent', null)
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
   }
 }
 </script>
diff --git a/src/components/business/moveable/Selecto.ts b/src/components/business/moveable/Selecto.ts
index bad2aea..4f6ca1b 100644
--- a/src/components/business/moveable/Selecto.ts
+++ b/src/components/business/moveable/Selecto.ts
@@ -1,8 +1,10 @@
 import Selecto from 'selecto'
-import { getElementInfo } from 'moveable'
-import store from '@/store'
+import Moveable, { getElementInfo } from 'moveable'
+// import store from '@/store'
+import { useWidgetStore } from '@/pinia'
 
-export default function(moveable: any) {
+export default function(moveable: Moveable) {
+  const widgetStore = useWidgetStore()
   const selecto = new Selecto({
     container: document.getElementById('page-design'),
     selectableTargets: ['.layer'],
@@ -23,16 +25,22 @@ export default function(moveable: any) {
     e.added.forEach((el) => {
       if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) {
         el.classList.add('widget-selected')
-        store.dispatch('selectWidgetsInOut', {
-          uuid: el.getAttribute('data-uuid'),
+        widgetStore.selectWidgetsInOut({
+          uuid: el.getAttribute('data-uuid') || "",
         })
+        // store.dispatch('selectWidgetsInOut', {
+        //   uuid: el.getAttribute('data-uuid'),
+        // })
       }
     })
     e.removed.forEach((el) => {
       el.classList.remove('widget-selected')
-      store.dispatch('selectWidgetsInOut', {
-        uuid: el.getAttribute('data-uuid'),
+      widgetStore.selectWidgetsInOut({
+        uuid: el.getAttribute('data-uuid') || "",
       })
+      // store.dispatch('selectWidgetsInOut', {
+      //   uuid: el.getAttribute('data-uuid'),
+      // })
     })
     moveable.renderDirections = [] // ['nw', 'ne', 'sw', 'se'] // []
     moveable.rotatable = false
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index 3b7671b..48c46d4 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
@@ -50,7 +50,7 @@ type TState = {
 
 const emits = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const state = reactive<TState>({
diff --git a/src/components/business/qrcode/method.ts b/src/components/business/qrcode/method.ts
index bb823f9..4d595ff 100644
--- a/src/components/business/qrcode/method.ts
+++ b/src/components/business/qrcode/method.ts
@@ -37,7 +37,7 @@ export function generateOption(props: TQrcodeProps): Options {
       ...props.dotsOptions,
     },
     cornersSquareOptions: {
-      color: props.dotsOptions.color,
+      color: props.dotsOptions?.color,
       // type: '',
       // type: 'extra-rounded' as CornerSquareType,
       // gradient: {
@@ -47,7 +47,7 @@ export function generateOption(props: TQrcodeProps): Options {
       // },
     },
     cornersDotOptions: {
-      color: props.dotsOptions.color,
+      color: props.dotsOptions?.color,
       type: 'square' as CornerDotType,
       // gradient: {
       //   type: 'linear', // 'radial'
diff --git a/src/components/business/right-click-menu/RcMenu.vue b/src/components/business/right-click-menu/RcMenu.vue
index e3890f6..8fe07b6 100644
--- a/src/components/business/right-click-menu/RcMenu.vue
+++ b/src/components/business/right-click-menu/RcMenu.vue
@@ -1,7 +1,12 @@
 <template>
   <div v-show="showMenuBg" id="menu-bg" class="menu-bg" @click="closeMenu">
     <ul ref="menuList" class="menu-list" :style="styleObj">
-      <li v-for="(item, index) in menuListData.list" :key="index" :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" @click.stop="selectMenu(item.type)">
+      <li
+        v-for="(item, index) in menuListData.list"
+        :key="index"
+        :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }"
+        @click.stop="selectMenu(item.type)"
+      >
         {{ item.text }}
       </li>
     </ul>
@@ -10,7 +15,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { 
   widgetMenu as widget, 
   pageMenu as page,
@@ -18,17 +23,20 @@ import {
   TMenuItemData, TWidgetItemData, 
 } from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { storeToRefs } from 'pinia';
-import { useControlStore } from '@/pinia';
+import { useControlStore, useWidgetStore } from '@/pinia';
 
-const store = useStore()
+// const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
 const showMenuBg = ref<boolean>(false)
 const widgetMenu = ref<TWidgetItemData[]>({...widget})
 const pageMenu = ref<TWidgetItemData[]>({...page})
 
-const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+const widgetStore = useWidgetStore()
+// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+
+const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
 const { dAltDown } = storeToRefs(useControlStore())
 
 
@@ -59,24 +67,27 @@ async function mouseRightClick(e: MouseEvent) {
     if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
       if (
-        widget.parent !== '-1' && 
-        widget.parent !== dActiveElement.value.uuid &&
-        widget.parent !== dActiveElement.value.parent
+        widget?.parent !== '-1' && 
+        widget?.parent !== dActiveElement.value?.uuid &&
+        widget?.parent !== dActiveElement.value?.parent
       ) {
-        uuid = widget.parent
+        uuid = widget?.parent || ""
       }
     }
-    store.dispatch('selectWidget', {
+    widgetStore.selectWidget({
       uuid: uuid ?? '-1',
     })
+    // store.dispatch('selectWidget', {
+    //   uuid: uuid ?? '-1',
+    // })
     showMenu(e)
   }
 }
 
 function showMenu(e: MouseEvent) {
-  let isPage = dActiveElement.value.uuid === '-1'
+  let isPage = dActiveElement.value?.uuid === '-1'
   menuListData.value.list = isPage ? pageMenu.value : widgetMenu.value
-  if (dActiveElement.value.isContainer) {
+  if (dActiveElement.value?.isContainer) {
     let ungroup: TWidgetItemData[] = [
       {
         type: 'ungroup',
@@ -109,33 +120,47 @@ function closeMenu() {
 function selectMenu(type: TWidgetItemData['type']) {
   switch (type) {
     case 'copy':
-      store.dispatch('copyWidget')
+      widgetStore.copyWidget()
+      // store.dispatch('copyWidget')
       break
     case 'paste':
       if (dCopyElement.value.length === 0) {
         return
       }
-      store.dispatch('pasteWidget')
+      widgetStore.pasteWidget()
+      // store.dispatch('pasteWidget')
       break
     case 'index-up':
-      store.dispatch('updateLayerIndex', {
-        uuid: dActiveElement.value.uuid,
+      widgetStore.updateLayerIndex({
+        uuid: dActiveElement.value?.uuid || "",
         value: 1,
-        isGroup: dActiveElement.value.isContainer,
+        isGroup: dActiveElement.value?.isContainer,
       })
+      // store.dispatch('updateLayerIndex', {
+      //   uuid: dActiveElement.value.uuid,
+      //   value: 1,
+      //   isGroup: dActiveElement.value.isContainer,
+      // })
       break
     case 'index-down':
-      store.dispatch('updateLayerIndex', {
-        uuid: dActiveElement.value.uuid,
+      widgetStore.updateLayerIndex({
+        uuid: dActiveElement.value?.uuid || "",
         value: -1,
-        isGroup: dActiveElement.value.isContainer,
+        isGroup: dActiveElement.value?.isContainer,
       })
+      // store.dispatch('updateLayerIndex', {
+      //   uuid: dActiveElement.value.uuid,
+      //   value: -1,
+      //   isGroup: dActiveElement.value.isContainer,
+      // })
       break
     case 'del':
-      store.dispatch('deleteWidget')
+      widgetStore.deleteWidget()
+      // store.dispatch('deleteWidget')
       break
     case 'ungroup':
-      store.dispatch('ungroup', dActiveElement.value.uuid)
+      widgetStore.ungroup(dActiveElement.value?.uuid || "")
+      // store.dispatch('ungroup', dActiveElement.value.uuid)
       break
   }
   closeMenu()
diff --git a/src/components/business/save-download/CreateCover.vue b/src/components/business/save-download/CreateCover.vue
index e6b0234..537e855 100644
--- a/src/components/business/save-download/CreateCover.vue
+++ b/src/components/business/save-download/CreateCover.vue
@@ -10,17 +10,18 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import html2canvas from 'html2canvas'
 import Qiniu from '@/common/methods/QiNiu'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia';
-import { useCanvasStore } from '@/pinia';
-
-const store = useStore();
+import { useCanvasStore, useWidgetStore } from '@/pinia';
 
+// const store = useStore();
 // const { dZoom } = useSetupMapGetters(['dZoom'])
+
 const canvasStore = useCanvasStore()
+const widgetStore = useWidgetStore()
 const { dZoom } = storeToRefs(canvasStore)
 
 
@@ -30,9 +31,13 @@ const { dZoom } = storeToRefs(canvasStore)
 async function createCover(cb: any) {
   const nowZoom = dZoom.value
   // 取消选中元素
-  store.dispatch('selectWidget', {
-    uuid: '-1',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
+
   canvasStore.updateZoom(100)
   // store.dispatch('updateZoom', 100)
 
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index f8b2fb0..e9473d5 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -39,7 +39,15 @@
               'layer-active': getIsActive(layer.uuid),
               'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid,
             }" -->
-          <component :is="layer.type" v-for="layer in getlayers()" :id="layer.uuid" :key="layer.uuid" :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement.parent === layer.uuid, 'layer-no-hover': dActiveElement.uuid === layer.uuid }]" :data-title="layer.type" :params="layer" :parent="dPage" :data-type="layer.type" :data-uuid="layer.uuid">
+          <component
+            :is="layer.type"
+            v-for="layer in getlayers()"
+            :id="layer.uuid" :key="layer.uuid" 
+            :class="['layer', { 'layer-hover': layer.uuid === dHoverUuid || dActiveElement?.parent === layer.uuid, 'layer-no-hover': dActiveElement?.uuid === layer.uuid }]"
+            :data-title="layer.type" :params="layer"
+            :parent="dPage" :data-type="layer.type"
+            :data-uuid="layer.uuid"
+          >
             <template v-if="layer.isContainer">
               <!-- :class="{
                   layer: true,
@@ -47,7 +55,14 @@
                   'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent,
                   'layer-hover': widget.uuid === dHoverUuid,
                 }" -->
-              <component :is="widget.type" v-for="widget in getChilds(layer.uuid)" :key="widget.uuid" child :class="['layer', { 'layer-no-hover': dActiveElement.uuid !== widget.parent && dActiveElement.parent !== widget.parent }]" :data-title="widget.type" :params="widget" :parent="layer" :data-type="widget.type" :data-uuid="widget.uuid" />
+              <component
+                :is="widget.type"
+                v-for="widget in getChilds(layer.uuid)"
+                :key="widget.uuid" child :class="['layer', { 'layer-no-hover':dActiveElement?.uuid !== widget.parent && dActiveElement?.parent !== widget.parent }]"
+                :data-title="widget.type" :params="widget"
+                :parent="layer" :data-type="widget.type"
+                :data-uuid="widget.uuid"
+              />
             </template>
           </component>
 
@@ -60,8 +75,8 @@
 </template>
 
 <script lang="ts" setup>
-import { nextTick, onMounted, ref } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+import { onMounted } from 'vue'
+// import {useStore } from 'vuex'
 import { getTarget } from '@/common/methods/target'
 // import { ElScrollbar } from 'element-plus'
 import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
@@ -69,9 +84,9 @@ import PointImg from '@/utils/plugins/pointImg'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
+import { TPageState } from '@/pinia/design/page'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -82,24 +97,19 @@ type TParentData = {
   height?: number
 }
 
-type TSetting = {
-  width?: number
-  height?: number
-  top?: number
-  left?: number
-}
+type TSetting = Partial<TPageState>
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const canvasStore = useCanvasStore()
+
 const { pageDesignCanvasId } = defineProps<TProps>()
-const {
-  dWidgets,
-  dActiveElement, dSelectWidgets,
-  dHoverUuid
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
+
 const { dPage } = storeToRefs(usePageStore())
-const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
-const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
+const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
+const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
+const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
 
 
 let _dropIn: string | null = ''
@@ -123,11 +133,13 @@ onMounted(() => {
     // },
 
 async function dropOver(e: MouseEvent) {
+  if (!dActiveElement.value) return
   if (dActiveElement.value.editable || dActiveElement.value.lock) {
     return false
   }
   e.preventDefault()
-  let { data, type } = store.getters.selectItem
+  let { data, type } = widgetStore.selectItem
+  if (!data) return
   if (type !== 'image') {
     return
   }
@@ -136,7 +148,9 @@ async function dropOver(e: MouseEvent) {
   const target = await getTarget(eventTarget)
   if (!target) return
   const uuid = target.getAttribute('data-uuid')
-  store.dispatch('setDropOver', uuid)
+
+  widgetStore.setDropOver(uuid ?? "-1")
+  // store.dispatch('setDropOver', uuid)
 
   const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
   if (eventTarget.getAttribute('putIn')) {
@@ -157,10 +171,15 @@ async function drop(e: MouseEvent) {
   }
   if (!e || !e.target) return
   const eventTarget = e.target as HTMLElement
-  store.commit('setDraging', false)
+
+  controlStore.setDraging(false)
+  // store.commit('setDraging', false)
+
   const dropIn = _dropIn
   _dropIn = ''
-  store.dispatch('setDropOver', '-1')
+
+  widgetStore.setDropOver("-1")
+  // store.dispatch('setDropOver', '-1')
 
   // store.commit('setShowMoveable', false) // 清理上一次的选择
   controlStore.setShowMoveable(false) // 清理上一次的选择
@@ -168,9 +187,11 @@ async function drop(e: MouseEvent) {
   let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
   // e.stopPropagation()
   e.preventDefault()
-  let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
+  let { data: item, type } = JSON.parse(JSON.stringify(widgetStore.selectItem))
   // 清除临时数据
-  store.commit('selectItem', {})
+  widgetStore.setSelectItem({})
+  // store.commit('selectItem', {})
+
   let setting: TSetting = {}
   if (!type) {
     return
@@ -201,7 +222,8 @@ async function drop(e: MouseEvent) {
       element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
       element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
     })
-    store.dispatch('addGroup', componentItem)
+    widgetStore.addGroup(componentItem)
+    // store.dispatch('addGroup', componentItem)
     // addGroup(item)
   }
   // 设置坐标
@@ -224,6 +246,7 @@ async function drop(e: MouseEvent) {
       controlStore.setShowMoveable(true) // 恢复选择
 
       const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget) return
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
       //   !widget.imgs && (widget.imgs = {})
@@ -232,6 +255,7 @@ async function drop(e: MouseEvent) {
     } else {
       if (dropIn) {
         const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
+        if (!widget) return
         widget.imgUrl = item.value.url
         console.log('加入+', widget)
 
@@ -239,14 +263,16 @@ async function drop(e: MouseEvent) {
         controlStore.setShowMoveable(true) // 恢复选择
 
       } else {
-        store.dispatch('addWidget', setting) // 正常加入面板
+        widgetStore.addWidget(setting as Required<TPageState>)
+        // store.dispatch('addWidget', setting) // 正常加入面板
       }
     }
   } else if (type === 'bg') {
     console.log('背景图片放置')
   } else if (type !== 'group') {
     console.log(setting)
-    store.dispatch('addWidget', setting) // 正常加入面板
+    widgetStore.addWidget(setting as Required<TPageState>)
+    // store.dispatch('addWidget', setting) // 正常加入面板
   }
   // 清除临时数据
   // this.$store.commit('selectItem', {})
@@ -255,11 +281,11 @@ async function drop(e: MouseEvent) {
 function getScreen() {
   const pageDesignEl = document.getElementById('page-design')
   if (!pageDesignEl) return
-  store.dispatch('updateScreen', {
+  canvasStore.updateScreen({
     width: pageDesignEl.offsetWidth,
     height: pageDesignEl.offsetHeight,
   })
-  // updateScreen({
+  // store.dispatch('updateScreen', {
   //   width: pageDesignEl.offsetWidth,
   //   height: pageDesignEl.offsetHeight,
   // })
@@ -295,18 +321,19 @@ async function handleSelection(e: MouseEvent) {
     let uuid = target.getAttribute('data-uuid')
     if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget || !dActiveElement.value) return
       if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
-        uuid = widget.parent
+        uuid = widget.parent || null
       }
     }
 
     // 设置选中元素
     // this.$store.commit('setMoveable', false)
     if (showRotatable.value !== false) {
-      store.dispatch('selectWidget', {
-        uuid: uuid,
+      widgetStore.selectWidget({
+        uuid: uuid || " -1",
       })
-      // selectWidget({
+      // store.dispatch('selectWidget', {
       //   uuid: uuid,
       // })
     }
@@ -316,21 +343,21 @@ async function handleSelection(e: MouseEvent) {
     }
   } else {
     // 取消选中元素
-    store.dispatch('selectWidget', {
-      uuid: '-1',
+    widgetStore.selectWidget({
+      uuid: "-1"
     })
-    // selectWidget({
+    // store.dispatch('selectWidget', {
     //   uuid: '-1',
     // })
   }
 }
 
 function getlayers() {
-  return dWidgets.value.filter((item: { parent: string }) => item.parent === dPage.value.uuid)
+  return dWidgets.value.filter((item) => item.parent === dPage.value.uuid)
 }
 
 function getChilds(uuid: string) {
-  return dWidgets.value.filter((item: { parent: string }) => item.parent === uuid)
+  return dWidgets.value.filter((item) => item.parent === uuid)
 }
     // getIsActive(uuid) {
     //   if (this.dSelectWidgets.length > 0) {
diff --git a/src/components/modules/layout/lineGuides.vue b/src/components/modules/layout/lineGuides.vue
index 5f88cc3..4c18790 100644
--- a/src/components/modules/layout/lineGuides.vue
+++ b/src/components/modules/layout/lineGuides.vue
@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
 import { useCanvasStore } from '@/pinia';
 
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<TProps>(), {
   show: false
 })
 
-const store = useStore()
+// const store = useStore()
 const canvasStore = useCanvasStore()
 const container = 'page-design' // page-design out-page
 let guidesTop: TGuidesData | null = null
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index 4885db1..08ebf19 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -20,17 +20,17 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import addMouseWheel from '@/common/methods/addMouseWheel'
 import { OtherList, TZoomData, ZoomList } from './data';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useCanvasStore, usePageStore } from '@/pinia';
+import { useCanvasStore, useForceStore, usePageStore } from '@/pinia';
 
 const route = useRoute()
-const store = useStore()
+// const store = useStore()
 
 // 组件大小控制器
 let holder: number | undefined
@@ -48,9 +48,10 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
+// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
 const canvasStore = useCanvasStore()
 const { dPage } = storeToRefs(usePageStore())
+const { zoomScreenChange } = storeToRefs(useForceStore())
 const { dZoom, dScreen } = storeToRefs(canvasStore)
 
 
@@ -141,11 +142,11 @@ function changeScreen() {
   holder = setTimeout(() => {
     const screen = document.getElementById('page-design')
     if (!screen) return
-    store.dispatch('updateScreen', {
+    canvasStore.updateScreen({
       width: screen.offsetWidth,
       height: screen.offsetHeight,
     })
-    // updateScreen({
+    // store.dispatch('updateScreen', {
     //   width: screen.offsetWidth,
     //   height: screen.offsetHeight,
     // })
@@ -264,7 +265,9 @@ async function autoFixTop() {
     padding += presetPadding / 2
   }
   curAction.value === 'add' && (padding -= presetPadding)
-  store.commit('updatePaddingTop', padding > 0 ? padding : 0)
+
+  canvasStore.updatePaddingTop(padding > 0 ? padding : 0)
+  // store.commit('updatePaddingTop', padding > 0 ? padding : 0)
 }
 
 defineExpose({
diff --git a/src/components/modules/panel/components/layerList.vue b/src/components/modules/panel/components/layerList.vue
index 99c8b7d..03973ab 100644
--- a/src/components/modules/panel/components/layerList.vue
+++ b/src/components/modules/panel/components/layerList.vue
@@ -39,8 +39,10 @@
 </template>
 
 <script lang="ts">
+import { useWidgetStore } from '@/pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
 import { defineComponent, computed, reactive, ref, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import draggable from 'vuedraggable'
 
 export default defineComponent({
@@ -48,8 +50,9 @@ export default defineComponent({
   props: ['data'],
   emits: ['change'],
   setup(props, context) {
-    let widgets: any = ref([])
-    const state: any = reactive({
+    const widgetStore = useWidgetStore()
+    let widgets = ref<TdWidgetData[]>([])
+    const state = reactive<{drag: boolean}>({
       drag: false,
     })
     const dragOptions = computed(() => {
@@ -61,7 +64,7 @@ export default defineComponent({
       }
     })
 
-    const store = useStore()
+    // const store = useStore()
     // const dPage = computed(() => {
     //   return store.getters.dPage
     // })
@@ -98,24 +101,26 @@ export default defineComponent({
       return widgets
     }
 
-    const getIsActive = (uuid: number) => {
-      if (store.getters.dSelectWidgets.length > 0) {
-        let widget = store.getters.dSelectWidgets.find((item: any) => item.uuid === uuid)
+    const getIsActive = (uuid: string) => {
+      if (widgetStore.dSelectWidgets.length > 0) {
+        let widget = widgetStore.dSelectWidgets.find((item) => item.uuid === uuid)
         if (widget) {
           return true
         }
         return false
       } else {
-        return uuid === store.getters.dActiveElement.uuid
+        return uuid === widgetStore.dActiveElement?.uuid
       }
     }
 
     const selectLayer = (widget: any) => {
       // console.log(widget)
-      store.dispatch('selectWidget', { uuid: widget.uuid })
+      widgetStore.selectWidget({ uuid: widget.uuid })
+      // store.dispatch('selectWidget', { uuid: widget.uuid })
     }
     const hoverLayer = ({ uuid, parent }: any) => {
-      store.dispatch('updateHoverUuid', uuid)
+      widgetStore.updateHoverUuid(uuid)
+      // store.dispatch('updateHoverUuid', uuid)
     }
 
     const onMove = ({ relatedContext, draggedContext }: any) => {
@@ -133,12 +138,18 @@ export default defineComponent({
     }
     // 锁定图层
     const lockLayer = (item: any) => {
-      store.dispatch('updateWidgetData', {
+      widgetStore.updateWidgetData({
         uuid: item.uuid,
         key: 'lock',
         value: typeof item.lock === 'undefined' ? true : !item.lock,
         pushHistory: false,
       })
+      // store.dispatch('updateWidgetData', {
+      //   uuid: item.uuid,
+      //   key: 'lock',
+      //   value: typeof item.lock === 'undefined' ? true : !item.lock,
+      //   pushHistory: false,
+      // })
       // item.lock = typeof item.lock === 'undefined' ? true : !item.lock
     }
 
diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index f1aa4e8..e6eb3c5 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -9,7 +9,7 @@
         <el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
         <icon-item-select label="" :data="iconList" @finish="alignAction" />
       </div>
-      <component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
+      <component :is="dActiveElement?.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement?.type" />
     </div>
     <div v-show="activeTab === 1" class="layer-wrap">
       <layer-list :data="dWidgets" @change="layerChange" />
@@ -20,21 +20,28 @@
 <script setup lang="ts">
 // 样式设置面板
 // const NAME = 'style-panel'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
 import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
-import { useControlStore } from '@/pinia';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
+import { TdWidgetData } from '@/pinia/design/widget';
+import type { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
+const groupStore = useGroupStore()
+const historyStore = useHistoryStore()
 
 const activeTab = ref(0)
 const iconList = ref<AlignListData[]>(alignIconList)
 const showGroupCombined = ref(false)
 
-const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+// const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+const { dActiveElement, dWidgets, dSelectWidgets } = storeToRefs(widgetStore)
 
 watch(
   dSelectWidgets,
@@ -49,31 +56,50 @@ watch(
 )
 
 function handleCombine() {
-  store.dispatch('realCombined')
+  groupStore.realCombined()
+  // store.dispatch('realCombined')
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
 function alignAction(item: TIconItemSelectData) {
-  const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
-  store.dispatch('getCombined').then((group) => {
-    sWidgets.forEach((element: Record<string, any>) => {
-      store.dispatch('updateAlign', {
-        align: item.value,
+  const sWidgets: TdWidgetData[] = JSON.parse(JSON.stringify(dSelectWidgets.value))
+  groupStore.getCombined().then(group => {
+    sWidgets.forEach((element) => {
+      widgetStore.updateAlign({
+        align: (item.value as TUpdateAlignData['align']),
         uuid: element.uuid,
         group,
       })
-      // updateAlign({
+      // store.dispatch('updateAlign', {
       //   align: item.value,
       //   uuid: element.uuid,
       //   group,
       // })
     });
-    store.dispatch('pushHistory')
+    historyStore.pushHistory()
+    // store.dispatch('pushHistory')
     // pushHistory()
   })
+  // store.dispatch('getCombined').then((group) => {
+  //   sWidgets.forEach((element: Record<string, any>) => {
+  //     store.dispatch('updateAlign', {
+  //       align: item.value,
+  //       uuid: element.uuid,
+  //       group,
+  //     })
+  //     // updateAlign({
+  //     //   align: item.value,
+  //     //   uuid: element.uuid,
+  //     //   group,
+  //     // })
+  //   });
+  //   store.dispatch('pushHistory')
+  //   // pushHistory()
+  // })
 }
-function layerChange(newLayer: Record<string, any>[]) {
-  store.commit('setDWidgets', newLayer.toReversed())
+function layerChange(newLayer: TdWidgetData[]) {
+  widgetStore.setDWidgets(newLayer.toReversed())
+  // store.commit('setDWidgets', newLayer.toReversed())
 
   // store.commit('setShowMoveable', false)
   controlStore.setShowMoveable(false)
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index f703ddb..5803156 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/src/components/modules/panel/wrap/BgImgListWrap.vue
@@ -25,10 +25,10 @@
 <script lang="ts" setup>
 import { reactive, computed } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
-import { usePageStore } from '@/pinia';
+import { usePageStore, useWidgetStore } from '@/pinia';
 
 type TCommonPanelData = {
   color: string
@@ -56,8 +56,9 @@ type TState = {
 const { model } = defineProps<TProps>()
 
 
-const store = useStore()
+// const store = useStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
 
 const state = reactive<TState>({
   loading: false,
@@ -125,9 +126,12 @@ function setBGcolor(color: string) {
     value: color,
     pushHistory: true
   })
-  store.dispatch('selectWidget', {
-    uuid: '-1',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
 }
 
 async function selectItem(item: TGetImageListResult) {
@@ -141,13 +145,17 @@ async function selectItem(item: TGetImageListResult) {
     value: item.url,
     pushHistory: true,
   })
-  store.dispatch('selectWidget', {
-    uuid: '-1',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
 }
 
 function dragStart(_: MouseEvent, _item: TGetImageListResult) {
-  store.commit('selectItem', { data: {}, type: 'bg' })
+  widgetStore.setSelectItem({ data: {}, type: 'bg' })
+  // store.commit('selectItem', { data: {}, type: 'bg' })
 }
 
 
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index 73bace2..e1ba11d 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -55,12 +55,12 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -88,8 +88,9 @@ const state = reactive<TState>({
   types: [],
   showList: [],
 })
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
@@ -188,9 +189,11 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
   dragHelper.start(e, img.canvasWidth)
   tempDetail = await getCompDetail({ id, type: 1 })
   if (Array.isArray(JSON.parse(tempDetail.data))) {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'group' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
   } else {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'text' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
   }
 }
 
@@ -216,26 +219,28 @@ const selectItem = async (item: TGetCompListResult) => {
       element.left += (pW - parent.width) / 2
       element.top += (pH - parent.height) / 2
     })
-    store.dispatch('addGroup', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addGroup', group)
   } else {
     group.text && (group.text = decodeURIComponent(group.text))
     group.left = pW / 2 - group.fontSize * (group.text.length / 2)
     group.top = pH / 2 - group.fontSize / 2
-    store.dispatch('addWidget', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addWidget', group)
   }
 }
 
-    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
-      // 有缓存则直接返回组件数据，否则请求获取数据
-      return new Promise((resolve) => {
-        if (compsCache[params.id]) {
-          resolve(compsCache[params.id])
-        } else api.home.getTempDetail(params).then((res: any) => {
-          resolve(res)
-          compsCache[params.id] = res // 缓存请求的组件数据
-        })
-      })
-    }
+function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
+  // 有缓存则直接返回组件数据，否则请求获取数据
+  return new Promise((resolve) => {
+    if (compsCache[params.id]) {
+      resolve(compsCache[params.id])
+    } else api.home.getTempDetail(params).then((res: any) => {
+      resolve(res)
+      compsCache[params.id] = res // 缓存请求的组件数据
+    })
+  })
+}
 
 defineExpose({
   load,
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index bc13402..e442b70 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -44,11 +44,11 @@ import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
 import { TGetListData } from '@/api/material'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -82,8 +82,9 @@ const props = defineProps<TProps>()
 
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
@@ -213,15 +214,17 @@ async function selectItem(item: TGetListData) {
   if (item.type === 'mask') {
     setting.mask = item.url
   }
-  store.dispatch('addWidget', setting)
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 async function dragStart(e: MouseEvent, item: TGetListData) {
   startPoint = { x: e.x, y: e.y }
   const { width, height, thumb, url } = item
   const img = await setImageData({ width, height, url: thumb || url })
   dragHelper.start(e, img.canvasWidth)
-  store.commit('selectItem', { data: { value: item }, type: item.type })
-  // this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+
+  widgetStore.setSelectItem({ data: { value: item }, type: item.type })
+  // store.commit('selectItem', { data: { value: item }, type: item.type })
 }
 </script>
 
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 6ed8539..08c3914 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -31,10 +31,10 @@ import { toRefs, reactive, computed, onMounted } from 'vue'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
@@ -57,8 +57,9 @@ type TCurrentCategory = {
 
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
@@ -96,7 +97,9 @@ const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 const getDataList = async () => {
@@ -114,7 +117,9 @@ const getDataList = async () => {
 
 const dragStart = (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
-  store.commit('selectItem', { data: { value: item }, type: 'image' })
+
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 
 const searchChange = (e: Event) => {
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index c3be94c..c070f4e 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -23,16 +23,16 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router'
 // import chooseType from './components/chooseType.vue'
 // import editModel from './components/editModel.vue'
 import searchHeader from './components/searchHeader.vue'
 import useConfirm from '@/common/methods/confirm'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -54,11 +54,13 @@ const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const userStore = useUserStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -67,7 +69,7 @@ const state = reactive<TState>({
   searchKeyword: '',
 })
 
-const { tempEditing } = useSetupMapGetters(['tempEditing'])
+// const { tempEditing } = useSetupMapGetters(['tempEditing'])
 const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
@@ -130,7 +132,9 @@ async function selectItem(item: IGetTempListData) {
   }
   // store.commit('managerEdit', false)
   userStore.managerEdit(false)
-  store.commit('setDWidgets', [])
+
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   setTempId(item.id)
 
@@ -146,15 +150,19 @@ async function selectItem(item: IGetTempListData) {
 
   pageStore.setDPage(page)
   // store.commit('setDPage', page)
-  
-  store.dispatch('setTemplate', widgets)
+  widgetStore.setTemplate(widgets)
+  // store.dispatch('setTemplate', widgets)
   // setTemplate(widgets)
   setTimeout(() => {
-    store.commit('zoomScreenChange')
+    forceStore.setZoomScreenChange()
+    // store.commit('zoomScreenChange')
   }, 300)
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
     uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1'
+  // })
   // selectWidget({
   //   uuid: '-1',
   // })
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index 0e7965a..f0944c1 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -28,8 +28,8 @@ import { storeToRefs } from 'pinia';
 // import wText from '../../widgets/wText/wText.vue'
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
-import { useStore } from 'vuex'
-import { useControlStore, usePageStore } from '@/pinia';
+// import { useStore } from 'vuex'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -37,8 +37,9 @@ type TBasicTextData = {
   fontWeight: string
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 
@@ -56,7 +57,9 @@ const selectBasicText = (item: TBasicTextData) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 // const dragStart = (_: MouseEvent, item: any) => {
diff --git a/src/components/modules/panel/wrap/ToolsListWrap.vue b/src/components/modules/panel/wrap/ToolsListWrap.vue
index 7c9341e..c913954 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@@ -26,22 +26,23 @@
 // const NAME = 'tool-list-wrap'
 // import api from '@/api'
 import { ref, onMounted } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 // import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
+const widgetStore = useWidgetStore()
 const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
@@ -70,7 +71,9 @@ function addQrcode() {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
   // addWidget(setting)
 }
 
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index ab2f6f1..8959b57 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/src/components/modules/panel/wrap/UserWrap.vue
@@ -39,7 +39,7 @@
 import { reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
@@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TProps = {
   active?: number
@@ -73,8 +73,9 @@ const props = defineProps<TProps>()
 
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
@@ -177,7 +178,9 @@ const selectImg = async (index: number) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 type controlImgParam = {
@@ -228,7 +231,8 @@ state.editOptions = {
 
 const dragStart = (index: number) => {
   const item = state.imgList[index]
-  store.commit('selectItem', { data: { value: item }, type: 'image' })
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 const uploadDone = async (res: TUploadDoneData) => {
   await api.material.addMyPhoto(res)
diff --git a/src/components/modules/settings/colorSelect.vue b/src/components/modules/settings/colorSelect.vue
index c83b23b..7ec40cb 100644
--- a/src/components/modules/settings/colorSelect.vue
+++ b/src/components/modules/settings/colorSelect.vue
@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import {reactive, onMounted, watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
 import { useControlStore } from '@/pinia';
 
@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<TProps>(), {
 
 const emit = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const state = reactive<TState>({
diff --git a/src/components/modules/settings/numberSlider.vue b/src/components/modules/settings/numberSlider.vue
index 7c5636d..c85d7e9 100644
--- a/src/components/modules/settings/numberSlider.vue
+++ b/src/components/modules/settings/numberSlider.vue
@@ -21,7 +21,6 @@
 <script lang="ts" setup>
 // const NAME = 'number-slider'
 import { watch, ref, onMounted } from 'vue';
-import { mapActions } from 'vuex'
 
 type TProps = {
   label?: string
diff --git a/src/components/modules/settings/valueSelect.vue b/src/components/modules/settings/valueSelect.vue
index 042e90f..abd4c03 100644
--- a/src/components/modules/settings/valueSelect.vue
+++ b/src/components/modules/settings/valueSelect.vue
@@ -39,7 +39,7 @@
         <div :class="['input-wrap', { active: state.inputBorder }]" :style="{ width: inputWidth }">
           <!-- <img v-if="innerPreview" class="preview" :src="innerPreview" /> -->
           <input
-            :style="{ fontFamily: modelValue.value }"
+            :style="{ fontFamily: (modelValue as Record<string, any>).value }"
             :class="['real-input', { disable: !disable }]"
             :readonly="readonly" type="text"
             :value="showValue"
diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue
index 03d49db..aba9449 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@@ -38,7 +38,7 @@
 // 画布组件样式
 // const NAME = 'page-style'
 import { nextTick, onMounted, reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../settings/numberInput.vue'
 import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
 import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
@@ -47,9 +47,10 @@ import _dl from '@/common/methods/download'
 // import ColorPipette from '@/utils/plugins/color-pipette'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore } from '@/pinia'
-import { TPageStore } from '@/pinia/design/page'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore, useWidgetStore } from '@/pinia'
+import { TPageState, } from '@/pinia/design/page'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   activeNames: string[]
@@ -62,8 +63,9 @@ type TState = {
   showBgLib: boolean
 }
 
-const store = useStore()
+// const store = useStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
 const state = reactive<TState>({
   activeNames: ['1', '2', '3', '4'],
   innerElement: {},
@@ -74,7 +76,8 @@ const state = reactive<TState>({
   modes: ['颜色', '图片'],
   showBgLib: false
 })
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 let _localTempBG: string | null = null
 
 watch(
@@ -126,12 +129,15 @@ function changeValue() {
     return
   }
   for (let key in state.innerElement) {
-    if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+    if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[key] !== (dActiveElement.value as Record<string, any>)[key]
+    ) {
       if (state.ingoreKeys.indexOf(key) !== -1) {
-        dActiveElement.value[key] = state.innerElement[key]
+        (dActiveElement.value as Record<string, any>)[key] = state.innerElement[key]
       } else {
         pageStore.updatePageData({
-          key: key as keyof TPageStore,
+          key: key as keyof TPageState,
           value: state.innerElement[key],
         })
       }
@@ -139,7 +145,7 @@ function changeValue() {
   }
 }
 
-function finish(key: keyof TPageStore, value: string | number) {
+function finish(key: keyof TPageState, value: string | number) {
   pageStore.updatePageData({
     key: key,
     value: value,
diff --git a/src/components/modules/widgets/wGroup/wGroup.vue b/src/components/modules/widgets/wGroup/wGroup.vue
index 063efae..6454278 100644
--- a/src/components/modules/widgets/wGroup/wGroup.vue
+++ b/src/components/modules/widgets/wGroup/wGroup.vue
@@ -26,11 +26,13 @@
 // 组合组件
 const NAME = 'w-group'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-type TParamsData = {
+export type TParamsData = {
   left: number
   top: number
   width: number
@@ -50,7 +52,9 @@ const props = withDefaults(defineProps<TProps>(), {
   params: () => ({}),
   parent: () => ({})
 })
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
+
 const widget = ref<HTMLElement | null>(null)
 const ratio = ref(0)
 const temp = ref<Record<string, any>>({})
@@ -77,7 +81,8 @@ const compWidgetsRecord = ref<Record<string, any>>({})
 // }
 
 const timer = ref<number | null>(null)
-const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 // watch: {
 //   params: {
@@ -111,19 +116,19 @@ onBeforeUnmount(() => {
 // ...mapActions(['updateWidgetData']),
 
 function updateRecord(tempScale ?: number) {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
     // clearTimeout(this.timer)
-    let record = dActiveElement.value.record
-    if (record.width <= 0) {
+    let record = dActiveElement.value?.record
+    if (record?.width <= 0) {
       touchend()
     }
     // if (this.tempRecord && this.tempRecord.width && this.tempRecord.width != record.width) {
     //   return
     // }
-    ratio.value = tempScale || (props.params.width || 0) / record.width
+    ratio.value = tempScale || (props.params.width || 0) / record?.width
 
     if (ratio.value != 1) {
-      if (record.width != 0) {
+      if (record?.width != 0) {
         for (let i = dWidgets.value.length - 1; i >= 0; --i) {
           if (dWidgets.value[i].parent === props.params.uuid) {
             temp.value[dWidgets.value[i].uuid] = { width: dWidgets.value[i].width * ratio.value, height: dWidgets.value[i].height * ratio.value, raw: dWidgets.value[i] }
@@ -145,7 +150,7 @@ function updateRecord(tempScale ?: number) {
 }
 
 function touchstart() {
-  if (dActiveElement.value.uuid !== props.params.uuid) {
+  if (dActiveElement.value?.uuid !== props.params.uuid) {
     return
   }
   const tempRecord = {
@@ -167,7 +172,7 @@ function touchstart() {
 }
 
 function touchend() {
-  if (dActiveElement.value.uuid !== props.params.uuid) {
+  if (dActiveElement.value?.uuid !== props.params.uuid) {
     return
   }
   // const opacity = this.$refs.widget.style.opacity
@@ -204,9 +209,9 @@ function touchend() {
     }
     // this.$refs.widget.style.opacity = opacity
     temp.value = {}
-
+    if (!dActiveElement.value) return
     if (dActiveElement.value.uuid === props.params.uuid) {
-      let record = dActiveElement.value.record
+      let record = dActiveElement.value?.record
       record.width = widget.value?.offsetWidth
       record.height = widget.value?.offsetHeight
       dActiveElement.value.width = widget.value?.offsetWidth
@@ -215,13 +220,13 @@ function touchend() {
   }, 10)
 }
 function keyChange(uuid: string, key: keyof TParamsData, value: number) {
-  store.dispatch('updateWidgetData', {
+  widgetStore.updateWidgetData({
     uuid,
     key,
     value,
     pushHistory: false,
   })
-  // updateWidgetData({
+  // store.dispatch('updateWidgetData', {
   //   uuid,
   //   key,
   //   value,
@@ -231,8 +236,9 @@ function keyChange(uuid: string, key: keyof TParamsData, value: number) {
 
 function keySetValue(uuid: string, key: keyof TParamsData, value: number) {
   setTimeout(() => {
-    const widget = dWidgets.value.find((item: TParamsData) => item.uuid === uuid)
-    widget[key] = value + Number(props.params[key] || '')
+    const widget = dWidgets.value.find((item) => item.uuid === uuid)
+    if (!widget) return
+    (widget[key] as Number) = value + Number(props.params[key] || '')
   }, 10)
 }
 
diff --git a/src/components/modules/widgets/wGroup/wGroupStyle.vue b/src/components/modules/widgets/wGroup/wGroupStyle.vue
index 3273750..07a31d0 100644
--- a/src/components/modules/widgets/wGroup/wGroupStyle.vue
+++ b/src/components/modules/widgets/wGroup/wGroupStyle.vue
@@ -17,8 +17,13 @@
         </div>
       </el-collapse-item>
       <el-collapse-item title="样式设置" name="2">
-        <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button>
-        <!-- <div class="ungroup style-item" @click="ungroup(innerElement.uuid)">取消组合</div> -->
+        <!-- <el-button plain type="primary" class="block-btn" @click="store.dispatch('ungroup', state.innerElement.uuid)">取消组合</el-button> -->
+        <div
+          class="ungroup style-item"
+          @click="widgetStore.ungroup(String(state.innerElement.uuid))"
+        >
+          取消组合
+        </div>
         <number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         <br />
         <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@@ -32,14 +37,19 @@
 // 组合组件样式
 // const NAME = 'w-group-style'
 import { reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wGroupSetting } from './groupSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useWidgetStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TState = {
   activeNames: string[],
@@ -60,8 +70,10 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const store = useStore()
+const widgetStore = useWidgetStore()
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 
 let dMoving = false
 
@@ -109,17 +121,17 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof typeof wGroupSetting
     if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      dActiveElement.value[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
-        key: key,
-        value: state.innerElement[itemKey],
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
+    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]) {
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: (key as TUpdateWidgetPayload['key']),
+        value: (state.innerElement[itemKey] as TUpdateWidgetPayload['value']),
       })
-      // this.updateWidgetData({
-      //   uuid: this.dActiveElement.uuid,
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value?.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[itemKey],
       // })
     }
   }
@@ -127,14 +139,14 @@ function changeValue() {
 
 
 function finish(key: string, value: string | number | number[]) {
-  store.dispatch("updateWidgetData", {
-    uuid: dActiveElement.value.uuid,
-    key: key,
-    value: value,
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || "",
+    key: key as TUpdateWidgetPayload['key'],
+    value: value  as TUpdateWidgetPayload['value'],
     pushHistory: true,
   })
-  // this.updateWidgetData({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateWidgetData", {
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -142,23 +154,27 @@ function finish(key: string, value: string | number | number[]) {
 }
 
 function layerAction(item: TIconItemSelectData) {
-  store.dispatch("updateLayerIndex", {
-    uuid: dActiveElement.value.uuid,
-    value: item.value,
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || "",
+    value: (item.value as TupdateLayerIndexData['value']),
     isGroup: true,
   })
-  // this.updateLayerIndex({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateLayerIndex", {
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   //   isGroup: true,
   // })
 }
 
 function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
-    align: item.value,
-    uuid: dActiveElement.value.uuid,
+  widgetStore.updateAlign({
+    align: (item.value as TUpdateAlignData['align']),
+    uuid: dActiveElement.value?.uuid || "",
   })
+  // store.dispatch("updateAlign", {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
 }
 </script>
 
diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue
index 68fefb7..2885cba 100644
--- a/src/components/modules/widgets/wImage/wImage.vue
+++ b/src/components/modules/widgets/wImage/wImage.vue
@@ -35,14 +35,14 @@
 // 图片组件
 // const NAME = 'w-image'
 import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import { getMatrix } from '@/common/methods/handleTransform'
 import setting from "./wImageSetting"
 import PointImg from '@/utils/plugins/pointImg'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
 
 type TProps = {
   params: typeof setting
@@ -83,20 +83,26 @@ const state = reactive<TState>({
 })
 const route = useRoute()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 
 const widgetRef = ref<HTMLElement | null>(null)
 const targetRef = ref<HTMLImageElement | null>(null)
 
 let rotateTemp: number | null = null
 let flipTemp: string | null = null
-let locksTemp: string[] | null = null
+let locksTemp: boolean[] | null = null
 
-const {
-  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
-} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+// const {
+//   dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
 const { dZoom } = storeToRefs(useCanvasStore())
+const {
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid
+} = storeToRefs(widgetStore)
+const { dCropUuid } = storeToRefs(controlStore)
 
 // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
 const cropEdit = computed(() => {
@@ -137,7 +143,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -218,8 +225,8 @@ function move(payload?: MouseEvent) {
 }
 
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
-    let record = dActiveElement.value.record
+  if (dActiveElement.value?.uuid === props.params.uuid) {
+    let record = dActiveElement.value?.record
     if (widgetRef.value) {
       record.width = widgetRef.value.offsetWidth
       record.height = widgetRef.value.offsetHeight
@@ -247,14 +254,14 @@ function setTransform(attrName: string, value: string | number) {
   } else {
     setValue = props.params.transform + ` ${attrName}(${value})`
   }
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
     uuid: props.params.uuid,
     key: 'transform',
     value: setValue,
     pushHistory: false,
   })
-  // updateWidgetData({
-  //   uuid: this.params.uuid,
+  // store.dispatch("updateWidgetData", {
+  //   uuid: props.params.uuid,
   //   key: 'transform',
   //   value: setValue,
   //   pushHistory: false,
@@ -317,7 +324,7 @@ function lockOthers() {
   } else {
     locksTemp = []
     for (const widget of dWidgets.value) {
-      locksTemp.push(widget.lock)
+      locksTemp.push(widget?.lock || false)
     }
     dWidgets.value.forEach((widget: any) => {
       widget.uuid != props.params.uuid && (widget.lock = true)
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index fe4de94..c302122 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -72,7 +72,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -86,11 +86,14 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import wImageSetting, { TImageSetting } from './wImageSetting'
 import { TGetImageListResult } from '@/api/material'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   picBoxShow: boolean
@@ -132,15 +135,17 @@ const state = reactive<TState>({
 const picBoxRef = ref<typeof picBox | null>(null)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
 
-const store = useStore()
-const {
-  dActiveElement, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+const canvasStore = useCanvasStore()
+// const {
+//   dActiveElement, dWidgets
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
 const controlStore = useControlStore()
 const { dMoving } = storeToRefs(controlStore)
-// computed: {
-//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
-// },
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
+
 
 let lastUuid: string | undefined = undefined
 let tag: boolean
@@ -155,6 +160,7 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
       imgCrop(false)
@@ -196,34 +202,38 @@ function changeValue() {
   }
   for (let key in state.innerElement) {
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
-    } else if (key !== 'cropEdit' && key !== 'record' && state.innerElement[(key as keyof TImageSetting)] !== dActiveElement.value[key]) {
-      store.dispatch('updateWidgetData', {
-        uuid: dActiveElement.value.uuid,
-        key: key,
-        value: state.innerElement[(key as keyof TImageSetting)],
+      (dActiveElement.value as Record<string, any>)[key] = state.innerElement[(key as keyof TImageSetting)]
+    } else if (
+      key !== 'cropEdit' && key !== 'record' &&
+      state.innerElement[(key as keyof TImageSetting)] !== (dActiveElement.value as Record<string, any>)[key]
+    ) {
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: (key as TUpdateWidgetPayload['key']),
+        value: (state.innerElement[(key as keyof TImageSetting)] as TUpdateWidgetPayload['value']),
       })
-      // updateWidgetData({
-      //   uuid: this.dActiveElement.uuid,
+      // store.dispatch('updateWidgetData', {
+      //   uuid: dActiveElement.value.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[(key as keyof TImageSetting)],
       // })
     }
   }
 }
 
 function finishSliceData(key: string, value: number | number[]) {
+  if (!dActiveElement.value) return
   const data = dActiveElement.value.sliceData
   if (data) {
     data[key] = value
-    store.dispatch('updateWidgetData', {
+    widgetStore.updateWidgetData({
       uuid: dActiveElement.value.uuid,
       key: 'sliceData',
       value: data,
       pushHistory: true,
     })
-    // updateWidgetData({
-    //   uuid: dActiveElement.uuid,
+    // store.dispatch('updateWidgetData', {
+    //   uuid: dActiveElement.value.uuid,
     //   key: 'sliceData',
     //   value: data,
     //   pushHistory: true,
@@ -232,14 +242,14 @@ function finishSliceData(key: string, value: number | number[]) {
 }
 
 function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
-  store.dispatch('updateWidgetData', {
-    uuid: dActiveElement.value.uuid,
-    key: key,
-    value: value,
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || "",
+    key: (key as TUpdateWidgetPayload['key']),
+    value: value as TUpdateWidgetPayload['value'],
     pushHistory: true,
   })
-  // this.updateWidgetData({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch('updateWidgetData', {
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -248,30 +258,31 @@ function finish(key: string = "", value: string | number | (string | number)[] |
 
 function layerAction(item: TIconItemSelectData) {
   if (item.key === 'zIndex') {
-    store.dispatch("updateLayerIndex", {
-      uuid: dActiveElement.value.uuid,
-      value: item.value,
+    widgetStore.updateLayerIndex({
+      uuid: dActiveElement.value?.uuid || "",
+      value: (item.value as TupdateLayerIndexData['value']),
     })
-    // this.updateLayerIndex({
-    //   uuid: this.dActiveElement.uuid,
+    // store.dispatch("updateLayerIndex", {
+    //   uuid: dActiveElement.value.uuid,
     //   value: item.value,
     // })
   } else {
-    finish(item.key || "", item.value === dActiveElement.value.flip ? null : item.value)
+    finish(item.key || "", item.value === dActiveElement.value?.flip ? null : item.value)
   }
 }
 
 async function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
-    align: item.value,
-    uuid: dActiveElement.value.uuid,
+  widgetStore.updateAlign({
+    align: (item.value as TUpdateAlignData['align']),
+    uuid: dActiveElement.value?.uuid || "",
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 function openCropper() {
@@ -311,8 +322,8 @@ function openCropper() {
 async function selectDone(img: TGetImageListResult) {
   state.innerElement.imgUrl = img.url
   const loadImg = await getImage(img.url)
-  state.innerElement.width = loadImg.width * store.getters.dZoom / 100
-  state.innerElement.height = loadImg.height * store.getters.dZoom / 100
+  state.innerElement.width = loadImg.width * canvasStore.dZoom / 100
+  state.innerElement.height = loadImg.height * canvasStore.dZoom / 100
   // this.imgCrop(true)
 }
 
@@ -331,7 +342,8 @@ function imgCrop(val: boolean) {
 
 
 function cropHandle() {
-  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+  controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1')
+  // store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
 }
 
 // 图库选择器
diff --git a/src/components/modules/widgets/wQrcode/wQrcode.vue b/src/components/modules/widgets/wQrcode/wQrcode.vue
index e9396a6..0c6fac9 100644
--- a/src/components/modules/widgets/wQrcode/wQrcode.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcode.vue
@@ -35,12 +35,14 @@
 // 图片组件
 // const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import QRCode from '@/components/business/qrcode'
 import { TWQrcodeSetting } from './wQrcodeSetting';
 import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { Options } from 'qr-code-styling';
+import { useForceStore, useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
 
 type TProps = {
   params: TWQrcodeSetting & {
@@ -57,12 +59,15 @@ type TState = {
   qrCodeOptions: Options
 }
 
-const store = useStore()
+// const store = useStore()
+const forceStore = useForceStore()
+const widgetStore = useWidgetStore()
 const props = defineProps<TProps>()
 const state = reactive<TState>({
   qrCodeOptions: {}
 })
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 const width = computed(() => Number(props.params.width))
 const widgetRef = ref<HTMLElement | null>(null)
 
@@ -76,7 +81,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -88,8 +94,8 @@ onMounted(async () => {
 })
 // ...mapActions(['updateWidgetData']),
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
-    let record = dActiveElement.value.record
+  if (dActiveElement.value?.uuid === props.params.uuid) {
+    let record = dActiveElement.value?.record
     if (!widgetRef.value) return
     record.width = widgetRef.value.offsetWidth
     record.height = widgetRef.value.offsetHeight
diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
index 660567a..908ba23 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
@@ -58,7 +58,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { nextTick, reactive, watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElSelect, ElOption } from 'element-plus'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@@ -72,9 +72,11 @@ import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vu
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useControlStore, useForceStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -96,15 +98,17 @@ const state = reactive<TState>({
   localization,
 })
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 
 
-const {
-  dActiveElement, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// const {
+//   dActiveElement, dWidgets
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
 const { dMoving } = storeToRefs(useControlStore())
-// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 let lastUuid: string | null = null
 
@@ -112,16 +116,17 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
-    if (newValue.uuid == -1) {
+    if (Number(newValue.uuid) == -1) {
       state.innerElement.cropEdit = false
-      store.dispatch("updateWidgetData", {
-        uuid: lastUuid,
+      widgetStore.updateWidgetData({
+        uuid: lastUuid ?? "",
         key: 'cropEdit',
         value: false,
       })
-      // this.updateWidgetData({
-      //   uuid: this.lastUuid,
+      // store.dispatch("updateWidgetData", {
+      //   uuid: lastUuid,
       //   key: 'cropEdit',
       //   value: false,
       // })
@@ -163,31 +168,34 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TWQrcodeSetting
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      dActiveElement.value[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
-        key: key,
-        value: state.innerElement[itemKey],
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
+    } else if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
+    ) {
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: key as TUpdateWidgetPayload['key'],
+        value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
       })
-      // this.updateWidgetData({
-      //   uuid: this.dActiveElement.uuid,
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[itemKey],
       // })
     }
   }
 }
 
 function finish(key: string, value: number | number[] | string) {
-  store.dispatch("updateWidgetData", {
-    uuid: dActiveElement.value.uuid,
-    key: key,
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || '',
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateWidgetData", {
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -196,27 +204,29 @@ function finish(key: string, value: number | number[] | string) {
 
 function layerAction(item: TIconItemSelectData) {
   console.log(item)
-  store.dispatch("updateLayerIndex", {
-    uuid: dActiveElement.value.uuid,
-    value: item.value,
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || "",
+    value: item.value as number,
   })
-  // this.updateLayerIndex({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateLayerIndex", {
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   // })
 }
 
 async function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
-    align: item.value,
-    uuid: dActiveElement.value.uuid,
+  widgetStore.updateAlign({
+    align: item.value as TUpdateAlignData['align'],
+    uuid: dActiveElement.value?.uuid || "",
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
+
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 async function uploadImgDone(img: TUploadDoneData) {
diff --git a/src/components/modules/widgets/wSvg/wSvg.vue b/src/components/modules/widgets/wSvg/wSvg.vue
index 1665d44..dc4f3ed 100644
--- a/src/components/modules/widgets/wSvg/wSvg.vue
+++ b/src/components/modules/widgets/wSvg/wSvg.vue
@@ -20,10 +20,13 @@
 <script lang="ts" setup>
 // svg
 // const NAME = 'w-svg'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
+import { useCanvasStore, useForceStore, useWidgetStore } from '@/pinia';
 import { TWSvgSetting } from './wSvgSetting'
 import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { storeToRefs } from 'pinia';
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
 type TProps = {
   params: TWSvgSetting
@@ -55,11 +58,15 @@ const state = reactive<TState>({
   attrRecord: {}, // 记录可更改的属性
   svgImg: null
 })
-const store = useStore()
-// ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
-const {
-  dActiveElement, dZoom, dMouseXY
-} = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const canvasStore = useCanvasStore()
+const forceStore = useForceStore()
+// const {
+//   dActiveElement, dZoom, dMouseXY
+// } = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
+const { dZoom } = storeToRefs(canvasStore)
+const { dActiveElement, dMouseXY } = storeToRefs(widgetStore)
 
 const widgetRef = ref<HTMLElement | null>(null)
 
@@ -116,7 +123,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -272,7 +280,7 @@ function color2obj() {
 }
 
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
     let record = dActiveElement.value.record
     if (widgetRef.value) {
       record.width = widgetRef.value.offsetWidth
@@ -311,14 +319,14 @@ function updateZoom() {
 }
 
 function changeFinish(key: string, value: number) {
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
     uuid: props.params.uuid,
-    key: key,
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
-  //   uuid: this.params.uuid,
+  // store.dispatch("updateWidgetData", {
+  //   uuid: props.params.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -336,7 +344,7 @@ function move(payload: Record<string, any>) {
 }
 
 function attrsChange() {
-  if (dActiveElement.value.uuid === props.params.uuid && svgElements) {
+  if (dActiveElement.value?.uuid === props.params.uuid && svgElements) {
     for (const element of svgElements) {
       const { item, attrsColor } = element
       for (const key in attrsColor) {
diff --git a/src/components/modules/widgets/wSvg/wSvgStyle.vue b/src/components/modules/widgets/wSvg/wSvgStyle.vue
index de1beb2..0ccbea1 100644
--- a/src/components/modules/widgets/wSvg/wSvgStyle.vue
+++ b/src/components/modules/widgets/wSvg/wSvgStyle.vue
@@ -37,7 +37,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -45,9 +45,11 @@ import colorSelect from '../../settings/colorSelect.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useControlStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -66,11 +68,13 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
-const {
-  dActiveElement
-} = useSetupMapGetters(['dActiveElement'])
+// const store = useStore()
+const widgetStore = useWidgetStore()
+// const {
+//   dActiveElement
+// } = useSetupMapGetters(['dActiveElement'])
 const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement } = storeToRefs(widgetStore)
 
 // ...mapGetters(['dActiveElement', 'dMoving']),
 
@@ -114,17 +118,20 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TWSvgSetting
     if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      dActiveElement.value[key] = state.innerElement[itemKey]
-    } else if (itemKey !== 'setting' && itemKey !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
-      store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
-        key: key,
-        value: state.innerElement[itemKey],
+      (dActiveElement.value as Record<string, any>)[key] = state.innerElement[itemKey]
+    } else if (
+      itemKey !== 'setting' && itemKey !== 'record' &&
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
+    ) {
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: key as TUpdateWidgetPayload['key'],
+        value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
       })
-      // this.updateWidgetData({
-      //   uuid: this.dActiveElement.uuid,
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[itemKey],
       // })
     }
   }
@@ -135,14 +142,14 @@ function colorFinish(key: keyof TWSvgSetting) {
 }
 
 function finish(key: string, value: any) {
-  store.dispatch("updateWidgetData", {
-    uuid: dActiveElement.value.uuid,
-    key: key,
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || '',
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateWidgetData", {
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -150,24 +157,24 @@ function finish(key: string, value: any) {
 }
 
 function layerAction(item: TIconItemSelectData) {
-  store.dispatch("updateLayerIndex", {
-    uuid: dActiveElement.value.uuid,
-    value: item.value,
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || '',
+    value: Number(item.value),
   })
-  // this.updateLayerIndex({
-  //   uuid: this.dActiveElement.uuid,
+  // store.dispatch("updateLayerIndex", {
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   // })
 }
 
 function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
-    align: item.value,
-    uuid: dActiveElement.value.uuid,
+  widgetStore.updateAlign({
+    align: item.value as TUpdateAlignData['align'],
+    uuid: dActiveElement.value?.uuid || '',
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
 }
 </script>
diff --git a/src/components/modules/widgets/wText/pageFontsFilter.ts b/src/components/modules/widgets/wText/pageFontsFilter.ts
index 088e9f6..08f53c9 100644
--- a/src/components/modules/widgets/wText/pageFontsFilter.ts
+++ b/src/components/modules/widgets/wText/pageFontsFilter.ts
@@ -5,17 +5,19 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-10-14 20:29:26
  */
-import store from '@/store'
+// import store from '@/store'
+import { useWidgetStore } from '@/pinia'
 import { toRaw } from 'vue'
 export default () => {
+  const widgetStore = useWidgetStore()
   const collector = new Set<string>()
   const fonts: Record<string, any> = {}
-  const { dWidgets: widgets } = store.getters
+  const { dWidgets: widgets } = widgetStore
   for (let i = 0; i < widgets.length; i++) {
     const { type, fontClass } = widgets[i]
     if (type === 'w-text') {
-      collector.add(fontClass.id)
-      fonts[fontClass.id] = toRaw(fontClass)
+      fontClass && collector.add(fontClass.id)
+      fontClass && (fonts[fontClass.id] = toRaw(fontClass))
     }
   }
   return Array.from(collector).map((id: string) => fonts[id])
diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue
index 49e8119..503c092 100644
--- a/src/components/modules/widgets/wText/wText.vue
+++ b/src/components/modules/widgets/wText/wText.vue
@@ -60,11 +60,12 @@
 // const NAME = 'w-text'
 
 import { reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import { fontWithDraw } from '@/utils/widgets/loadFontRule'
 import getGradientOrImg from './getGradientOrImg'
 import { wTextSetting } from './wTextSetting'
+import { useForceStore, useHistoryStore, useWidgetStore } from '@/pinia'
 
 export type TwTextParams = {
   rotate?: number
@@ -83,7 +84,10 @@ type TProps = {
 
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+const historyStore = useHistoryStore()
 const route = useRoute()
 const state = reactive({
   loading: false,
@@ -93,7 +97,7 @@ const state = reactive({
 const widget = ref<HTMLElement | null>(null)
 const editWrap = ref<HTMLElement | null>(null)
 
-const dActiveElement = computed(() => store.getters.dActiveElement)
+const dActiveElement = computed(() => widgetStore.dActiveElement)
 const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
 
 onUpdated(() => {
@@ -142,18 +146,24 @@ watch(
 watch(
   () => state.editable,
   (value) => {
-    store.dispatch('updateWidgetData', {
-      uuid: props.params.uuid,
+    widgetStore.updateWidgetData({
+      uuid: String(props.params.uuid),
       key: 'editable',
       value,
       pushHistory: false,
     })
+    // store.dispatch('updateWidgetData', {
+    //   uuid: props.params.uuid,
+    //   key: 'editable',
+    //   value,
+    //   pushHistory: false,
+    // })
   },
 )
 
 function updateRecord() {
   if (!widget.value) return
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value && dActiveElement.value.uuid === String(props.params.uuid)) {
     let record = dActiveElement.value.record
     record.width = widget.value.offsetWidth
     record.height = widget.value.offsetHeight
@@ -166,12 +176,18 @@ function updateRecord() {
 function updateText(e?: Event) {
   const value = e && e.target ? (e.target as HTMLElement).innerHTML : props.params.text//.replace(/\n/g, '<br/>')
   if (value !== props.params.text) {
-    store.dispatch('updateWidgetData', {
-      uuid: props.params.uuid,
+    widgetStore.updateWidgetData({
+      uuid: String(props.params.uuid),
       key: 'text',
       value,
       pushHistory: false,
     })
+    // store.dispatch('updateWidgetData', {
+    //   uuid: props.params.uuid,
+    //   key: 'text',
+    //   value,
+    //   pushHistory: false,
+    // })
   }
 }
 
@@ -180,19 +196,27 @@ function writingText(e?: Event) {
   // TODO: 修正文字选框高度
   const el = editWrap.value || widget.value
   if (!el) return
-  store.dispatch('updateWidgetData', {
-    uuid: props.params.uuid,
+  widgetStore.updateWidgetData({
+    uuid: String(props.params.uuid),
     key: 'height',
     value: el.offsetHeight,
     pushHistory: false,
   })
-  store.commit('updateRect')
+  // store.dispatch('updateWidgetData', {
+  //   uuid: props.params.uuid,
+  //   key: 'height',
+  //   value: el.offsetHeight,
+  //   pushHistory: false,
+  // })
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 function writeDone(e: Event) {
   state.editable = false
   setTimeout(() => {
-    store.dispatch('pushHistory', '文字修改')
+    historyStore.pushHistory("文字修改")
+    // store.dispatch('pushHistory', '文字修改')
   }, 100)
   updateText(e)
 }
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index ce9c275..2b58369 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -52,7 +52,7 @@
 // 文本组件样式
 const NAME = 'w-text-style'
 import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData'
 import layerIconList from '@/assets/data/LayerIconList'
@@ -67,7 +67,9 @@ import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
 import { storeToRefs } from 'pinia';
-import { useControlStore } from '@/pinia';
+import { useControlStore, useForceStore, useWidgetStore } from '@/pinia';
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align';
 
 type TState = {
   activeNames: string[],
@@ -84,7 +86,9 @@ type TState = {
   alignIconList: TIconItemSelectData[],
 }
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 const route = useRoute()
 const state = reactive<TState>({
   activeNames: [],
@@ -100,7 +104,7 @@ const state = reactive<TState>({
   styleIconList2,
   alignIconList,
 })
-const dActiveElement = computed(() => store.getters.dActiveElement)
+const dActiveElement = computed(() => widgetStore.dActiveElement)
 // const dMoving = computed(() => store.getters.dMoving)
 const { dMoving } = storeToRefs(useControlStore())
 
@@ -148,22 +152,32 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TwTextData
     if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      dActiveElement.value[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
+    } else if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
+    ) {
       // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
-      store.dispatch('updateWidgetData', {
-        uuid: dActiveElement.value.uuid,
-        key,
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || '',
+        key: key as TUpdateWidgetPayload['key'],
         value: state.innerElement[itemKey],
         pushHistory: false,
       })
+      // store.dispatch('updateWidgetData', {
+      //   uuid: dActiveElement.value.uuid,
+      //   key,
+      //   value: state.innerElement[itemKey],
+      //   pushHistory: false,
+      // })
     }
   }
 }
 
 function selectTextEffect({ key, value, style }: any) {
-  const uuid = dActiveElement.value.uuid
-  store.commit('setWidgetStyle', { uuid, key, value })
+  const uuid = dActiveElement.value?.uuid || ''
+  widgetStore.setWidgetStyle({ uuid, key, value })
+  // store.commit('setWidgetStyle', { uuid, key, value })
   if (style) {
     finish('color', style.color || '')
   }
@@ -182,22 +196,32 @@ function loadFonts() {
 }
 
 function finish(key: string, value: number | Record<string, any> | string) {
-  store.dispatch('updateWidgetData', {
-    uuid: dActiveElement.value.uuid,
-    key,
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || '',
+    key: key as TUpdateWidgetPayload['key'],
     value,
     pushHistory: false,
   })
+  // store.dispatch('updateWidgetData', {
+  //   uuid: dActiveElement.value.uuid,
+  //   key,
+  //   value,
+  //   pushHistory: false,
+  // })
   setTimeout(() => {
     key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
   }, 300)
 }
 
 function layerAction(item: TIconItemSelectData) {
-  store.dispatch('updateLayerIndex', {
-    uuid: dActiveElement.value.uuid,
-    value: item.value,
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || '',
+    value: Number(item.value),
   })
+  // store.dispatch('updateLayerIndex', {
+  //   uuid: dActiveElement.value.uuid,
+  //   value: item.value,
+  // })
 }
 
 async function textStyleAction(item: TIconItemSelectData) {
@@ -206,16 +230,22 @@ async function textStyleAction(item: TIconItemSelectData) {
   // TODO: 对竖版文字的特殊处理
   item.key === 'writingMode' && relationChange()
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 async function alignAction(item: TIconItemSelectData) {
-  store.dispatch('updateAlign', {
-    align: item.value,
-    uuid: dActiveElement.value.uuid,
+  widgetStore.updateAlign({
+    align: item.value as TUpdateAlignData['align'],
+    uuid: dActiveElement.value?.uuid || '',
   })
+  // store.dispatch('updateAlign', {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 function changeStyleIconList() {
@@ -250,7 +280,7 @@ function changeStyleIconList() {
 
 function relationChange() {
   setTimeout(() => {
-    if (dActiveElement.value.writingMode) {
+    if (dActiveElement.value && dActiveElement.value.writingMode) {
       const w_record = dActiveElement.value.width
       state.innerElement.width = dActiveElement.value.height
       state.innerElement.height = w_record
diff --git a/src/main.ts b/src/main.ts
index 4ffcd44..2a120be 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,7 +8,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+// import store from './store'
 import utils from './utils'
 import 'normalize.css/normalize.css'
 import '@/assets/styles/index.less'
@@ -27,7 +27,7 @@ elementConfig.plugins.forEach((plugin) => {
 })
 
 app
-  .use(store)
+  // .use(store)
   .use(pinia)
   .use(router)
   .use(utils)
diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts
index abb3085..1782f32 100644
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/src/mixins/methods/dealWithCtrl.ts
@@ -5,15 +5,17 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-03-15 17:34:51
  */
-import store from '@/store'
+// import store from '@/store'
 import handlePaste from './handlePaste'
-import { useHistoryStore } from '@/pinia'
+import { useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia'
 
-export default function dealWithCtrl(e: any, _this: any) {
+export default function dealWithCtrl(e: KeyboardEvent, _this: any) {
+  const groupStore = useGroupStore()
   switch (e.keyCode) {
     case 71: // g
       e.preventDefault()
-      store.dispatch('realCombined')
+      groupStore.realCombined()
+      // store.dispatch('realCombined')
       break
     case 67: // c
       copy()
@@ -43,8 +45,9 @@ export default function dealWithCtrl(e: any, _this: any) {
  * 对组合的子元素某个值进行判断
  */
 function checkGroupChild(pid: number | string, key: any) {
+  const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
+  const childs = widgetStore.dWidgets.filter((x: any) => x.parent === pid) || []
   childs.forEach((element: any) => {
     element[key] && (itHas = true)
   })
@@ -54,24 +57,27 @@ function checkGroupChild(pid: number | string, key: any) {
  * 复制元素
  */
 function copy() {
-  if (store.getters.dActiveElement.uuid === '-1') {
+  const widgetStore = useWidgetStore()
+  if (widgetStore.dActiveElement?.uuid === '-1') {
     return
-  } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+  } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
     return
   }
-  !store.getters.dActiveElement.editable && store.dispatch('copyWidget')
+  !widgetStore.dActiveElement?.editable && widgetStore.copyWidget()
+  // !widgetStore.dActiveElement?.editable && store.dispatch('copyWidget')
 }
 /**
  * 粘贴
  */
 function paste() {
   handlePaste().then(() => {
-    if (store.getters.dCopyElement.length === 0) {
+    const widgetStore = useWidgetStore()
+    if (widgetStore.dCopyElement.length === 0) {
       return
-    } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+    } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
       return
     }
-    !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+    !widgetStore.dActiveElement?.editable && widgetStore.pasteWidget()
   })
 }
 /**
@@ -79,7 +85,7 @@ function paste() {
  */
 function undo(shiftKey: any) {
   const historyStore = useHistoryStore()
-  console.log(store.getters.dHistoryParams);
+  console.log(historyStore.dHistoryParams);
   
   if (shiftKey) {
     if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
@@ -88,6 +94,7 @@ function undo(shiftKey: any) {
     }
   } else if (historyStore.dHistoryParams.index !== -1) {
     // this.handleHistory('undo')
-    store.dispatch('handleHistory', 'undo')
+    historyStore.handleHistory('undo')
+    // store.dispatch('handleHistory', 'undo')
   }
 }
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index e80d2b0..58dd65e 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -11,7 +11,7 @@
 //   console.log('主动粘贴', clipdata.getData('text/plain'))
 // })
 
-import store from '@/store'
+// import store from '@/store'
 import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
@@ -20,18 +20,19 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {
     const pageStore = usePageStore()
+    const widgetStore = useWidgetStore()
     const controlStore = useControlStore()
 
     navigator.clipboard
       .read()
-      .then(async (dataTransfer: any) => {
-        if (store.getters.dActiveElement.editable) {
+      .then(async (dataTransfer: ClipboardItems) => {
+        if (widgetStore.dActiveElement?.editable) {
           return
         }
         for (let i = 0; i < dataTransfer.length; i++) {
@@ -41,8 +42,8 @@ export default () => {
             const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
             // 上传图片
             const qnOptions = { bucket: 'xp-design', prePath: 'user' }
-            const result: any = await Qiniu.upload(file, qnOptions)
-            const { width, height }: any = await getImage(file)
+            const result = await Qiniu.upload(file, qnOptions)
+            const { width, height } = await getImage(file)
             const url = _config.IMG_URL + result.key
             await api.material.addMyPhoto({ width, height, url })
             // 刷新用户列表
@@ -58,7 +59,10 @@ export default () => {
             const { width: pW, height: pH } = pageStore.dPage
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
+
             // 清空剪贴板，防止多次上传图片
             navigator.clipboard.write([
               new ClipboardItem({
@@ -67,7 +71,8 @@ export default () => {
             ])
             // 最后尝试复制，将图片替换为图片组件
             setTimeout(() => {
-              store.dispatch('copyWidget')
+              widgetStore.copyWidget()
+              // store.dispatch('copyWidget')
             }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
@@ -76,7 +81,9 @@ export default () => {
             
             const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
             break
           } else resolve()
         }
diff --git a/src/mixins/methods/keyCodeOptions.ts b/src/mixins/methods/keyCodeOptions.ts
index 1e2ca73..521831b 100644
--- a/src/mixins/methods/keyCodeOptions.ts
+++ b/src/mixins/methods/keyCodeOptions.ts
@@ -5,12 +5,14 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
-import { useControlStore } from '@/pinia'
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
+// import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
   const { f } = params
   const controlStore = useControlStore()
+  const widgetStore = useWidgetStore()
 
   switch (e.keyCode) {
     case 38:
@@ -28,17 +30,22 @@ export default function keyCodeOptions(e: any, params: any) {
     case 46:
     case 8:
       {
-        if (store.getters.dActiveElement.isContainer) {
-          if (checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+        if (widgetStore.dActiveElement?.isContainer) {
+          if (checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
             return
           }
         }
-        const { type, editable }: any = store.getters.dActiveElement
+        if (!widgetStore.dActiveElement) return
+        const { type, editable } = widgetStore.dActiveElement
 
         if (type === 'w-text') {
           // 不在编辑状态则执行删除
-          !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
-        } else store.dispatch('deleteWidget')
+          !editable && controlStore.showMoveable && widgetStore.deleteWidget()
+          // !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
+        } else {
+          widgetStore.deleteWidget()
+          // store.dispatch('deleteWidget')
+        }
       }
       break
   }
@@ -46,10 +53,11 @@ export default function keyCodeOptions(e: any, params: any) {
 /**
  * 对组合的子元素某个值进行判断
  */
-function checkGroupChild(pid: number | string, key: any) {
+function checkGroupChild(pid: number | string, key: keyof TdWidgetData) {
+  const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
-  childs.forEach((element: any) => {
+  const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || []
+  childs.forEach((element) => {
     element[key] && (itHas = true)
   })
   return itHas
@@ -57,20 +65,28 @@ function checkGroupChild(pid: number | string, key: any) {
 /**
  * TODO 键盘操作上下左右移动组件
  */
-function udlr(type: any, value: any, event: any) {
-  if (store.getters.dActiveElement.uuid != -1) {
-    if (store.getters.dActiveElement.editable) {
+function udlr(type: keyof TdWidgetData, value: any, event: any) {
+  const widgetStore = useWidgetStore()
+  if (!widgetStore.dActiveElement) return
+  if (Number(widgetStore.dActiveElement.uuid) != -1) {
+    if (widgetStore.dActiveElement.editable) {
       return
-    } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+    } else if (widgetStore.dActiveElement.isContainer && checkGroupChild(widgetStore.dActiveElement.uuid, 'editable')) {
       return
     }
     event.preventDefault()
-    const result = Number(store.getters.dActiveElement[type]) + value
-    store.dispatch('updateWidgetData', {
-      uuid: store.getters.dActiveElement.uuid,
+    const result = Number(widgetStore.dActiveElement[type]) + value
+    widgetStore.updateWidgetData({
+      uuid: widgetStore.dActiveElement.uuid,
       key: type,
       value: result,
     })
+    // store.dispatch('updateWidgetData', {
+    //   uuid: store.getters.dActiveElement.uuid,
+    //   key: type,
+    //   value: result,
+    // })
+
     // TODO: 键盘移位需要防抖入栈
     // timer = setTimeout(() => {
     //   this.pushHistory()
diff --git a/src/mixins/move.ts b/src/mixins/move.ts
index 5dfb15b..0d8f271 100644
--- a/src/mixins/move.ts
+++ b/src/mixins/move.ts
@@ -5,22 +5,29 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
-import { useControlStore } from '@/pinia'
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/pinia'
+// import store from '@/store'
 
 const move = {
   methods: {
     initmovement(e: any) {
       // let target = store.state.pageDesign.dActiveElement
-      const target = store.getters.dActiveElement
-
+      const widgetStore = useWidgetStore()
+      const target = widgetStore.dActiveElement
+      if (!target) return
       // 设置移动状态初始值
-      store.dispatch('initDMove', {
+      widgetStore.initDMove({
         startX: e.pageX,
         startY: e.pageY,
         originX: target.left,
         originY: target.top,
       })
+      // store.dispatch('initDMove', {
+      //   startX: e.pageX,
+      //   startY: e.pageY,
+      //   originX: target.left,
+      //   originY: target.top,
+      // })
 
       // 绑定鼠标移动事件
       document.addEventListener('mousemove', this.handlemousemove, true)
@@ -29,20 +36,27 @@ const move = {
       document.addEventListener('mouseup', this.handlemouseup, true)
     },
 
-    handlemousemove(e: any) {
+    handlemousemove(e: MouseEvent) {
+      const widgetStore = useWidgetStore()
       e.stopPropagation()
       e.preventDefault()
 
-      store.dispatch('dMove', {
+      widgetStore.dMove({
         x: e.pageX,
         y: e.pageY,
       })
+      // store.dispatch('dMove', {
+      //   x: e.pageX,
+      //   y: e.pageY,
+      // })
     },
 
     handlemouseup() {
+      const controlStore = useControlStore()
       document.removeEventListener('mousemove', this.handlemousemove, true)
       document.removeEventListener('mouseup', this.handlemouseup, true)
-      store.dispatch('stopDMove')
+      controlStore.stopDMove()
+      // store.dispatch('stopDMove')
     },
   },
 }
@@ -51,23 +65,35 @@ const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
       const controlStore = useControlStore()
+      const widgetStore = useWidgetStore()
       if (!controlStore.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
-        store.commit('setMouseEvent', e)
+        widgetStore.setMouseEvent(e)
+        // store.commit('setMouseEvent', e)
       }
 
-      const target = store.getters.dActiveElement
-      store.dispatch('initDMove', {
+      const target = widgetStore.dActiveElement
+      if (!target) return
+      widgetStore.initDMove({
         startX: e.pageX,
         startY: e.pageY,
         originX: target.left,
         originY: target.top,
       })
+      // store.dispatch('initDMove', {
+      //   startX: e.pageX,
+      //   startY: e.pageY,
+      //   originX: target.left,
+      //   originY: target.top,
+      // })
 
       const handlemouseup = () => {
-        // 销毁选中即刻移动
-        store.commit('setMouseEvent', null)
+        const widgetStore = useWidgetStore()
+        // 销毁选中即刻移
+        widgetStore.setMouseEvent(null)
+        // store.commit('setMouseEvent', null)
+        
         document.removeEventListener('mouseup', handlemouseup, true)
       }
       document.addEventListener('mouseup', handlemouseup, true)
diff --git a/src/pinia/design/canvas/index.ts b/src/pinia/design/canvas/index.ts
index e0d218c..c0b86db 100644
--- a/src/pinia/design/canvas/index.ts
+++ b/src/pinia/design/canvas/index.ts
@@ -32,13 +32,6 @@ type TCanvasState = {
   guidelines: TGuidelinesData
 }
 
-type TStoreGetter = {
-  dZoom: (state: TCanvasState) => number
-  dPaddingTop: (state: TCanvasState) => number
-  dScreen: (state: TCanvasState) => TScreeData
-  guidelines: (state: TCanvasState) => TGuidelinesData
-}
-
 type TStoreAction = {
   /** 更新画布缩放百分比 */
   updateZoom: (zoom: number) => void
@@ -53,7 +46,7 @@ type TStoreAction = {
 }
 
 /** 画布全局设置 */
-const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
+const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
   state: () => ({
     dZoom: 0, // 画布缩放百分比
     dPaddingTop: 0, // 画布垂直居中修正值
@@ -71,12 +64,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
       horizontalGuidelines: [],
     },
   }),
-  getters: {
-    dZoom: state => state.dZoom,
-    dPaddingTop: state => state.dPaddingTop,
-    dScreen: state => state.dScreen,
-    guidelines: state => state.guidelines
-  },
   actions: {
     /** 更新画布缩放百分比 */
     updateZoom(zoom: number) {
@@ -88,6 +75,7 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
     },
     /** 更新编辑界面的宽高 */
     updateScreen({ width, height }: TScreeData) {
+      console.log(this.dScreen)
       this.dScreen.width = width
       this.dScreen.height = height
     },
@@ -103,6 +91,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
   }
 })
 
-export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
+export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
 
 export default CanvasStore
diff --git a/src/pinia/design/group/action/index.ts b/src/pinia/design/group/action/index.ts
index 94268f0..b2a932c 100644
--- a/src/pinia/design/group/action/index.ts
+++ b/src/pinia/design/group/action/index.ts
@@ -20,7 +20,7 @@ export function realCombined(store: TGroupStore) {
   const selectWidgets = widgetStore.dSelectWidgets
   if (selectWidgets.length > 1) {
     const widgets = widgetStore.dWidgets
-    const group: TdWidgetData = JSON.parse(JSON.stringify(store.dGroupJson))
+    const group: TdWidgetData = JSON.parse(store.dGroupJson)
     group.uuid = nanoid()
     widgets.push(group)
     let left = Number(pageStore.dPage.width)
diff --git a/src/pinia/design/history/actions/pushHistory.ts b/src/pinia/design/history/actions/pushHistory.ts
index ce832b6..c124ad4 100644
--- a/src/pinia/design/history/actions/pushHistory.ts
+++ b/src/pinia/design/history/actions/pushHistory.ts
@@ -8,9 +8,10 @@
 
 import { usePageStore, useWidgetStore } from "@/pinia"
 import { THistoryStore } from ".."
+import { proxyToObject } from "@/utils/utils"
 
 /** push操作历史记录 */
-export function pushHistory(store: THistoryStore, msg: string) {
+export function pushHistory(store: THistoryStore, msg: string = "") {
   const pageStore = usePageStore()
   const selectStore = useWidgetStore()
   console.log('history压栈', '来源: ' + msg)
@@ -27,7 +28,7 @@ export function pushHistory(store: THistoryStore, msg: string) {
     store.dHistoryParams.index = history.length - 1
   }
   store.dHistory.push(JSON.stringify(selectStore.dWidgets))
-  store.dPageHistory.push(JSON.stringify(pageStore.dPage))
+  store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
   store.dHistoryParams.index = history.length - 1
   store.dHistoryParams.length = history.length
 }
diff --git a/src/pinia/design/history/index.ts b/src/pinia/design/history/index.ts
index 54843b6..edaf4e2 100644
--- a/src/pinia/design/history/index.ts
+++ b/src/pinia/design/history/index.ts
@@ -35,7 +35,7 @@ type THistoryAction = {
    * 修改数据、移动完成后都会自动保存
    * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
    */
-  pushHistory: (msg: string) => void
+  pushHistory: (msg?: string) => void
   /**
    * 操作历史记录
    * action为undo表示撤销
diff --git a/src/pinia/design/widget/actions/align.ts b/src/pinia/design/widget/actions/align.ts
index 8fb9c14..a519ba6 100644
--- a/src/pinia/design/widget/actions/align.ts
+++ b/src/pinia/design/widget/actions/align.ts
@@ -14,7 +14,7 @@ type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
 export type TUpdateAlignData = {
   align: TAlign
   uuid: string
-  group: TdWidgetData
+  group?: TdWidgetData
 }
 
 export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {
diff --git a/src/pinia/design/widget/actions/index.ts b/src/pinia/design/widget/actions/index.ts
index 557eac6..05fe291 100644
--- a/src/pinia/design/widget/actions/index.ts
+++ b/src/pinia/design/widget/actions/index.ts
@@ -25,7 +25,7 @@ export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
 }
 
 export type TMovePayload = {
-  donotMove: boolean
+  donotMove?: boolean
   x: number
   y: number
 }
@@ -120,6 +120,6 @@ export function setDropOver(store: TWidgetStore, uuid: string) {
   store.dDropOverUuid = uuid
 }
 
-export function setMouseEvent(state: TWidgetStore, e: Event | null) {
+export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
   state.activeMouseEvent = e
 }
diff --git a/src/pinia/design/widget/actions/layer.ts b/src/pinia/design/widget/actions/layer.ts
index 30036f4..e4eb367 100644
--- a/src/pinia/design/widget/actions/layer.ts
+++ b/src/pinia/design/widget/actions/layer.ts
@@ -12,7 +12,7 @@ import { TWidgetStore, TdWidgetData } from ".."
 export type TupdateLayerIndexData = {
   uuid: string
   value: number
-  isGroup: boolean
+  isGroup?: boolean
 }
 
 export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {
diff --git a/src/pinia/design/widget/actions/select.ts b/src/pinia/design/widget/actions/select.ts
index c03566f..01cb817 100644
--- a/src/pinia/design/widget/actions/select.ts
+++ b/src/pinia/design/widget/actions/select.ts
@@ -94,8 +94,8 @@ export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetD
 }
 
 export type TselectItem = {
-  data: Record<string, any>
-  type: string
+  data?: Record<string, any>
+  type?: string
 }
 
 export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {
diff --git a/src/pinia/design/widget/actions/widget.ts b/src/pinia/design/widget/actions/widget.ts
index 39823bf..42afec9 100644
--- a/src/pinia/design/widget/actions/widget.ts
+++ b/src/pinia/design/widget/actions/widget.ts
@@ -11,13 +11,13 @@ import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
 
-type TUpdateWidgetKey =  'width' | 'height' | 'left' | 'top'
+type TUpdateWidgetKey = keyof TdWidgetData
 
 export type TUpdateWidgetPayload = {
   uuid: string
   key: TUpdateWidgetKey
-  value: number
-  pushHistory: boolean
+  value: number | string | boolean | Record<string, any>
+  pushHistory?: boolean
 }
 
 /** 更新组件数据 */
@@ -38,8 +38,8 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
       case 'left':
       case 'top':
         if (widget.isContainer) {
-          let dLeft = widget.left - value
-          let dTop = widget.top - value
+          let dLeft = widget.left - Number(value)
+          let dTop = widget.top - Number(value)
           if (key === 'left') {
             dTop = 0
           }
@@ -57,7 +57,7 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
         }
         break
     }
-    widget[key] = value
+    (widget[key] as TUpdateWidgetPayload['value']) = value
     if (pushHistory) {
       const historyStore = useHistoryStore()
       setTimeout(() => {
@@ -75,7 +75,7 @@ export type TUpdateWidgetMultiplePayload = {
     key: TUpdateWidgetKey
     value: number
   }[]
-  pushHistory: boolean
+  pushHistory?: boolean
 }
 
 /** 一次更新多个widget */
@@ -107,7 +107,7 @@ export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHist
           }
           break
       }
-      widget[key] = value
+      (widget[key] as number | string) = value
     }
   }
   setTimeout(() => {
diff --git a/src/pinia/design/widget/index.ts b/src/pinia/design/widget/index.ts
index 9fc4672..0fae785 100644
--- a/src/pinia/design/widget/index.ts
+++ b/src/pinia/design/widget/index.ts
@@ -19,10 +19,20 @@ import { TUpdateAlignData, updateAlign } from "./actions/align";
 import { TWidgetJsonData, widgetJsonData } from "./getter";
 import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
 
-export type TdWidgetData = TPageState & {
+export type TdWidgetData = TPageState & Partial<TCommonItemData> & {
   parent?: string
   isContainer?: boolean
   text?: string
+  editable?: boolean
+  lock?: boolean
+  imgUrl?: string
+  rotate?: string
+  transform?: string
+  sliceData?: Record<string, any>
+  flip?: boolean
+  cropEdit?: boolean
+  fontClass?: Record<string, any>
+  writingMode?: string
 }
 
 export type TWidgetState = {
@@ -54,11 +64,11 @@ export type TWidgetState = {
   /** 记录多选的组件 */
   dSelectWidgets: TdWidgetData[]
   /** 复制的组件（可能是单个也可能是数组） */
-  dCopyElement: TdWidgetData[] | TdWidgetData
+  dCopyElement: TdWidgetData[]
   /** 记录当前选择的元素, data */
-  selectItem: { data: Record<string, any> | null, type?: string }
+  selectItem: { data?: Record<string, any> | null, type?: string }
   /** 正在活动的鼠标事件 */
-  activeMouseEvent: Event | null
+  activeMouseEvent: MouseEvent | null
 }
 
 type TGetter = {
@@ -80,7 +90,7 @@ type TAction = {
   /** 一次更新多个widget */
   updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
   /** addWidget */
-  addWidget: (setting: TPageState) => void
+  addWidget: (setting: TdWidgetData) => void
   /** addGroup */
   addGroup: (group: TdWidgetData[]) => void
   /** setTemplate */
@@ -102,11 +112,11 @@ type TAction = {
   ungroup: (uuid: string) => void
   /** 设置拖拽时在哪个图层 */
   setDropOver: (uuid: string) => void
-  selectItem: (data: TselectItem) => void
+  setSelectItem: (data: TselectItem) => void
   resize: (data: TResize) => void
   setWidgetStyle: (data: TsetWidgetStyleData) => void
   setDWidgets: (data: TdWidgetData[]) => void
-  setMouseEvent: (e: Event | null) => void
+  setMouseEvent: (e: MouseEvent | null) => void
 }
 
 const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
@@ -161,7 +171,7 @@ const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("
     updateLayerIndex(data) { updateLayerIndex(this, data) },
     ungroup(uuid) { ungroup(this, uuid) },
     setDropOver(uuid) { setDropOver(this, uuid) },
-    selectItem(data: TselectItem) { selectItem(this, data) },
+    setSelectItem(data: TselectItem) { selectItem(this, data) },
     resize(data) { resize(this, data) },
     setWidgetStyle(data) { setWidgetStyle(this, data) },
     setDWidgets(data) { setDWidgets(this, data) },
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 30b9d07..7d0bf54 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -78,4 +78,32 @@ export const rndNum = (n: number, m: number) => {
   return random
 }
 
+/** Proxy 转 Object */
+export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = new WeakMap()): P => {
+  if (proxy === null || typeof proxy !== 'object') {
+    return proxy;
+  }
+
+  // 检查是否已经处理过该对象
+  if (seen.has(proxy)) {
+    return '[Circular Reference]' as any;
+  }
+
+  let obj: Record<string, any>;
+
+  if (Array.isArray(proxy)) {
+    obj = proxy.map(val => proxyToObject(val, seen)) as any;
+  } else {
+    obj = {};
+    // 将当前对象添加到已处理对象集合
+    seen.set(proxy, obj);
+    for (let key in proxy) {
+      if (proxy.hasOwnProperty(key)) {
+        obj[key] = proxyToObject(proxy[key], seen);
+      }
+    }
+  }
+  return obj as P;
+};
+
 export default {}
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index b2b453b..a567240 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { StyleValue, onMounted, reactive, nextTick } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import api from '@/api'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
@@ -18,17 +18,17 @@ import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TState = {
   style: StyleValue
 }
 
-const store = useStore()
+// const store = useStore()
 const route = useRoute()
 const state = reactive<TState>({
   style: {
@@ -36,11 +36,14 @@ const state = reactive<TState>({
   },
 })
 const pageStore = usePageStore()
+const groupStore = useGroupStore()
+const widgetStore = useWidgetStore()
 const { dPage } = storeToRefs(pageStore)
 // const { dPage } = useSetupMapGetters(['dPage'])
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
+  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
+  // store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   nextTick(() => {
     load()
@@ -64,7 +67,8 @@ async function load() {
       dPage.value.width = width
       dPage.value.height = height
       dPage.value.backgroundColor = '#ffffff00'
-      store.dispatch('addGroup', content)
+      widgetStore.addGroup(content)
+      // store.dispatch('addGroup', content)
       // addGroup(content)
     } else {
       pageStore.setDPage(content.page)
@@ -72,11 +76,14 @@ async function load() {
       // 移除背景图，作为独立事件
       backgroundImage = content.page?.backgroundImage
       backgroundImage && delete content.page.backgroundImage
-      store.commit('setDPage', content.page)
+      pageStore.setDPage(content.page)
+      // store.commit('setDPage', content.page)
       if (id) {
-        store.commit('setDWidgets', widgets)
+        widgetStore.setDWidgets(widgets)
+        // store.commit('setDWidgets', widgets)
       } else {
-        store.dispatch('setTemplate', widgets)
+        widgetStore.setTemplate(widgets)
+        // store.dispatch('setTemplate', widgets)
       }
     }
 
@@ -118,7 +125,8 @@ async function load() {
     if (backgroundImage) {
       const preloadBg = new Preload([backgroundImage])
       await preloadBg.imgs()
-      store.commit('setDPage', {...content.page, ...{backgroundImage}})
+      pageStore.setDPage({...content.page, ...{backgroundImage}})
+      // store.commit('setDPage', {...content.page, ...{backgroundImage}})
     }
     try {
       fontWithDraw && (await font2style(fontContent, fontData))
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 68dd86c..4ebac04 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -58,7 +58,7 @@ import {
   CSSProperties, computed, nextTick,
   onBeforeUnmount, onMounted, reactive, ref,
 } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -68,11 +68,11 @@ import shortcuts from '@/mixins/shortcuts'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import HeaderOptions from './components/HeaderOptions.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -83,13 +83,16 @@ type TState = {
   showLineGuides: boolean
 }
 
-const {
-  dActiveElement, dCopyElement
-} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+// const {
+//   dActiveElement, dCopyElement
+// } = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+const widgetStore = useWidgetStore()
 const historyStore = useHistoryStore()
+const groupStore = useGroupStore()
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom } = storeToRefs(useCanvasStore())
 const { dHistoryParams } = storeToRefs(useHistoryStore())
+const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
 
 
 const state = reactive<TState>({
@@ -105,7 +108,7 @@ const state = reactive<TState>({
 })
 const optionsRef = ref<typeof HeaderOptions | null>(null)
 const zoomControlRef = ref<typeof zoomControl | null>(null)
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const route = useRoute()
 
@@ -159,7 +162,8 @@ let checkCtrl: number | undefined
 const instanceFn = { save, zoomAdd, zoomSub }
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
+  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
+  // store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
@@ -199,11 +203,10 @@ function loadData() {
     if (!zoomControlRef.value) return
     // await nextTick()
     // zoomControlRef.value.screenChange()
+    
     // 初始化激活的控件为page
-    store.dispatch('selectWidget', { uuid: '-1' })
-    // selectWidget({
-    //   uuid: '-1',
-    // })
+    widgetStore.selectWidget({ uuid: '-1' })
+    // store.dispatch('selectWidget', { uuid: '-1' })
   })
 }
 
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 776617d..6060f8d 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -56,7 +56,7 @@
 <script lang="ts" setup>
 import { reactive, onMounted, nextTick, onBeforeMount, ref, getCurrentInstance } from 'vue'
 import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
@@ -71,9 +71,9 @@ import HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'
 import { processPSD2Page } from '@/utils/plugins/psd'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -92,7 +92,8 @@ const state = reactive<TState>({
   downloadMsg: '',
   cancelText: '',
 })
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
 
 const route = useRoute()
@@ -142,7 +143,8 @@ async function loadPSD(file: File) {
       const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
       delete x.type
       x.src && (x.imgUrl = x.src) && delete x.src
-      store.dispatch('addWidget', Object.assign(rawData, x))
+      widgetStore.addWidget(Object.assign(rawData, x))
+      // store.dispatch('addWidget', Object.assign(rawData, x))
     }
 
     const { width, height, background: bg } = data
@@ -155,7 +157,8 @@ async function loadPSD(file: File) {
 }
 
 async function clear() {
-  store.commit('setDWidgets', [])
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
@@ -205,7 +208,8 @@ async function loadDone() {
   if (!zoomControlRef.value) return
   zoomControlRef.value.screenChange()
   setTimeout(() => {
-    store.dispatch('selectWidget', { uuid: '-1' })
+    widgetStore.selectWidget({ uuid: '-1' })
+    // store.dispatch('selectWidget', { uuid: '-1' })
     // selectWidget({
     //   uuid: '-1',
     // })
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index ce1c980..fce6470 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { reactive, toRefs, ref } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import _dl from '@/common/methods/download'
 import useNotification from '@/common/methods/notification'
@@ -39,8 +39,8 @@ import copyRight from './CopyRight.vue'
 import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -62,16 +62,23 @@ const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
+// const store = useStore()
 const userStore = useUserStore()
+const widgetStore = useWidgetStore()
+
 const canvasImage = ref<typeof SaveImage | null>(null)
-const {
-  dWidgets, tempEditing
-} = useSetupMapGetters(['dWidgets', 'tempEditing'])
+
+// const {
+//   dWidgets, tempEditing
+// } = useSetupMapGetters(['dWidgets', 'tempEditing'])
+
 const pageStore = usePageStore()
 const controlStore = useControlStore()
+const historyStore = useHistoryStore()
 
 const { dPage } = storeToRefs(pageStore)
+const { tempEditing } = storeToRefs(userStore)
+const { dWidgets } = storeToRefs(widgetStore)
 const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
 
 
@@ -111,6 +118,7 @@ async function saveTemp() {
     // 保存组件，组合元素要保证在最后一位，才能默认选中
     if (dWidgets.value[0].type === 'w-group') {
       const group = dWidgets.value.shift()
+      if (!group) return
       group.record.width = 0
       group.record.height = 0
       dWidgets.value.push(group)
@@ -203,15 +211,18 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
       // 加载文字组合组件
       dPage.value.width = width
       dPage.value.height = height
-      store.dispatch('addGroup', data)
+      widgetStore.addGroup(data)
+      // store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
       pageStore.setDPage(data.page)
       // store.commit('setDPage', data.page)
-      id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
+      id ? widgetStore.setDWidgets(data.widgets) : widgetStore.setTemplate(data.widgets)
+      // id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
-    store.dispatch('pushHistory', '请求加载load')
+    historyStore.pushHistory('请求加载load')
+    // store.dispatch('pushHistory', '请求加载load')
     // pushHistory('请求加载load')
   }
 }
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 835fae1..584998b 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -14,16 +14,17 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { reactive, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import useNotification from '@/common/methods/notification'
 import SaveImage from '@/components/business/save-download/CreateCover.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore } from '@/pinia'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
 
 type TProps = {
   modelValue?: string
@@ -48,7 +49,7 @@ type TState = {
   loading: false,
 }
 
-const { dWidgets } = useSetupMapGetters(['dWidgets'])
+// const { dWidgets } = useSetupMapGetters(['dWidgets'])
 const { dPage } = storeToRefs(usePageStore())
 
 const props = defineProps<TProps>()
@@ -57,8 +58,10 @@ const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
+const { dWidgets } = storeToRefs(widgetStore)
 
 const canvasImage = ref<typeof SaveImage | null>(null)
 const state = reactive<TState>({
@@ -85,8 +88,8 @@ const draw = () => {
 let addition = 0 // 累加大小
 let lenCount = 0 // 全部大小
 let lens = 0 // 任务数
-const queue: { type: string, imgUrl: string }[] = [] // 队列
-let widgets: { type: string, imgUrl: string }[] = []
+const queue: TdWidgetData[] = [] // 队列
+let widgets: TdWidgetData[] = []
 let page: Record<string, any> = {}
 
 async function prepare() {
@@ -105,7 +108,7 @@ async function prepare() {
 
   for (const item of widgets) {
     if (item.type === 'w-image') {
-      lenCount += item.imgUrl.length
+      lenCount += (item.imgUrl?.length || 0)
       queue.push(item)
     }
   }
@@ -117,8 +120,8 @@ async function uploadImgs() {
   if (queue.length > 0) {
     const item = queue.pop()
     if (!item) return
-    const url = await github.putPic(item.imgUrl.split(',')[1])
-    addition += item.imgUrl.length
+    const url = await github.putPic((item?.imgUrl || '').split(',')[1])
+    addition += (item.imgUrl?.length || 0)
     let downloadPercent: number | null = (addition / lenCount) * 100
     downloadPercent >= 100 && (downloadPercent = null)
     emit('change', { downloadPercent, downloadText: '上传资源中', downloadMsg: `已完成：${lens - queue.length} / ${lens}` })
diff --git a/yarn.lock b/yarn.lock
index 8f690ef..cbd5013 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -282,6 +282,13 @@
     "@daybrush/utils" "^1.6.0"
     framework-utils "^1.1.0"
 
+"@types/cropperjs@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz"
+  integrity sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==
+  dependencies:
+    cropperjs "*"
+
 "@types/estree@^1.0.0", "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
@@ -778,6 +785,11 @@ core-js@^3.6.5:
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz"
   integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
 
+cropperjs@*, cropperjs@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz"
+  integrity sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==
+
 cross-env@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
@@ -1544,6 +1556,11 @@ minimatch@^9.0.3, minimatch@9.0.3:
   dependencies:
     brace-expansion "^2.0.1"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 moveable-helper@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz"

From 6fb3526a1af518c71cdf426848d73c8ac48462ff Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Fri, 29 Mar 2024 14:55:26 +0000
Subject: [PATCH 19/23] fix: proxy to object problem

---
 src/components/modules/widgets/pageStyle.vue | 3 ++-
 src/utils/utils.ts                           | 5 ++++-
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue
index aba9449..6886382 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@@ -51,6 +51,7 @@ import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
 import { usePageStore, useWidgetStore } from '@/pinia'
 import { TPageState, } from '@/pinia/design/page'
 import { storeToRefs } from 'pinia'
+import { proxyToObject } from '@/utils/utils'
 
 type TState = {
   activeNames: string[]
@@ -120,7 +121,7 @@ function onChangeMode(value: string) {
 function change() {
   state.mode = state.modes[0]
   state.tag = true
-  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+  state.innerElement = proxyToObject(dActiveElement.value || {})
   state.innerElement.backgroundImage && (state.mode = state.modes[1])
 }
 function changeValue() {
diff --git a/src/utils/utils.ts b/src/utils/utils.ts
index 7d0bf54..952bd14 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -99,7 +99,10 @@ export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = ne
     seen.set(proxy, obj);
     for (let key in proxy) {
       if (proxy.hasOwnProperty(key)) {
-        obj[key] = proxyToObject(proxy[key], seen);
+        const value = proxyToObject(proxy[key], seen);
+        if (value !== '[Circular Reference]') {
+          obj[key] = value;
+        }
       }
     }
   }

From ed41383d8d460a1cfac426dd6514ab931e0320da Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Fri, 29 Mar 2024 15:25:02 +0000
Subject: [PATCH 20/23] fix: proxy to object problem

---
 src/components/modules/layout/designBoard/index.vue | 2 +-
 src/pinia/design/widget/actions/select.ts           | 9 ++++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index e9473d5..70784b9 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -331,7 +331,7 @@ async function handleSelection(e: MouseEvent) {
     // this.$store.commit('setMoveable', false)
     if (showRotatable.value !== false) {
       widgetStore.selectWidget({
-        uuid: uuid || " -1",
+        uuid: uuid ?? " -1",
       })
       // store.dispatch('selectWidget', {
       //   uuid: uuid,
diff --git a/src/pinia/design/widget/actions/select.ts b/src/pinia/design/widget/actions/select.ts
index 01cb817..b775b7c 100644
--- a/src/pinia/design/widget/actions/select.ts
+++ b/src/pinia/design/widget/actions/select.ts
@@ -1,5 +1,6 @@
 import { useControlStore, useHistoryStore, usePageStore } from "@/pinia"
 import { TWidgetStore } from ".."
+import { proxyToObject } from "@/utils/utils"
 
 export type TSelectWidgetData = {
   uuid: string
@@ -14,10 +15,9 @@ export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
   const alt = controlStore.dAltDown
   const selectWidgets = store.dSelectWidgets
   const widget = store.dWidgets.find((item) => item.uuid === uuid)
-  
 
-  if (!widget) return
   if (alt) {
+    if (!widget) return
     if (uuid !== '-1' && widget.parent === '-1') {
       // && !widget.isContainer
       if (selectWidgets.length === 0) {
@@ -45,16 +45,19 @@ export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
     return
   }
   store.dSelectWidgets = []
+  console.log("uuid", uuid);
+  
   if (uuid === '-1') {
     store.dActiveElement = pageStore.dPage
     const pageHistory = historyStore.dPageHistory
     if (pageHistory.length === 0) {
-      pageHistory.push(JSON.stringify(pageStore.dPage))
+      pageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
     }
     setTimeout(() => {
       store.dSelectWidgets = []
     }, 10)
   } else {
+    if (!widget) return
     // store.state.dActiveElement = {}
     setTimeout(() => {
       store.dActiveElement = widget

From 9c664506bafcd8a44e129eb1bf48c47909243787 Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Fri, 29 Mar 2024 15:43:25 +0000
Subject: [PATCH 21/23] merge: main feat-upgrade-vue3

---
 src/mixins/methods/dealWithCtrl.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts
index 1782f32..d8782d3 100644
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/src/mixins/methods/dealWithCtrl.ts
@@ -47,7 +47,7 @@ export default function dealWithCtrl(e: KeyboardEvent, _this: any) {
 function checkGroupChild(pid: number | string, key: any) {
   const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = widgetStore.dWidgets.filter((x: any) => x.parent === pid) || []
+  const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || []
   childs.forEach((element: any) => {
     element[key] && (itHas = true)
   })

From 230ef546d2f75cb8e1e5d2cbd7c917d3976623aa Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Fri, 29 Mar 2024 18:59:42 +0000
Subject: [PATCH 22/23] feat: remove vuex files and change pinia dirname to
 store

---
 package.json                                  |   3 +-
 src/common/hooks/dragHelper.ts                |   2 +-
 .../methods/DesignFeatures/setComponents.ts   |   4 +-
 src/common/methods/DesignFeatures/setImage.ts |   2 +-
 src/common/methods/addMouseWheel.ts           |   2 +-
 .../business/cropper/CropImage/CropImage.vue  |   2 +-
 .../business/cropper/CropImage/index.vue      |   2 +-
 .../image-cutout/ImageCutout/index.vue        |   2 +-
 src/components/business/moveable/Moveable.vue |   2 +-
 src/components/business/moveable/Selecto.ts   |   2 +-
 .../business/picture-selector/index.vue       |   2 +-
 .../business/right-click-menu/RcMenu.vue      |   2 +-
 .../business/save-download/CreateCover.vue    |   2 +-
 .../modules/layout/designBoard/index.vue      |   4 +-
 src/components/modules/layout/lineGuides.vue  |   2 +-
 .../modules/layout/zoomControl/index.vue      |   2 +-
 .../modules/panel/components/layerList.vue    |   4 +-
 src/components/modules/panel/stylePanel.vue   |   6 +-
 .../modules/panel/wrap/BgImgListWrap.vue      |   2 +-
 .../modules/panel/wrap/CompListWrap.vue       |   2 +-
 .../modules/panel/wrap/GraphListWrap.vue      |   2 +-
 .../modules/panel/wrap/PhotoListWrap.vue      |   2 +-
 .../modules/panel/wrap/TempListWrap.vue       |   2 +-
 .../modules/panel/wrap/TextListWrap.vue       |   2 +-
 .../modules/panel/wrap/ToolsListWrap.vue      |   2 +-
 .../modules/panel/wrap/UserWrap.vue           |   2 +-
 .../modules/settings/colorSelect.vue          |   2 +-
 src/components/modules/widgets/pageStyle.vue  |   4 +-
 .../modules/widgets/wGroup/wGroup.vue         |   2 +-
 .../modules/widgets/wGroup/wGroupStyle.vue    |   8 +-
 .../modules/widgets/wImage/wImage.vue         |   2 +-
 .../modules/widgets/wImage/wImageStyle.vue    |   8 +-
 .../modules/widgets/wQrcode/wQrcode.vue       |   2 +-
 .../modules/widgets/wQrcode/wQrcodeStyle.vue  |   6 +-
 src/components/modules/widgets/wSvg/wSvg.vue  |   4 +-
 .../modules/widgets/wSvg/wSvgStyle.vue        |   6 +-
 .../modules/widgets/wText/pageFontsFilter.ts  |   2 +-
 .../modules/widgets/wText/wText.vue           |   2 +-
 .../modules/widgets/wText/wTextStyle.vue      |   6 +-
 src/mixins/methods/dealWithCtrl.ts            |   2 +-
 src/mixins/methods/handlePaste.ts             |   2 +-
 src/mixins/methods/keyCodeOptions.ts          |   4 +-
 src/mixins/move.ts                            |   2 +-
 src/mixins/shortcuts.ts                       |   2 +-
 src/pinia/index.ts                            |  29 -
 src/{pinia => store}/base/index.ts            |   0
 src/{pinia => store}/base/user.ts             |   0
 src/{pinia => store}/design/canvas/index.ts   |   0
 src/{pinia => store}/design/control/index.ts  |   2 +-
 src/{pinia => store}/design/force/index.ts    |   0
 .../design/group/action/index.ts              |   2 +-
 src/{pinia => store}/design/group/index.ts    |   0
 .../design/history/actions/handleHistory.ts   |   2 +-
 .../design/history/actions/pushHistory.ts     |   2 +-
 src/{pinia => store}/design/history/index.ts  |   2 +-
 src/{pinia => store}/design/page/index.ts     |   0
 .../design/widget/actions/align.ts            |   2 +-
 .../design/widget/actions/clone.ts            |   2 +-
 .../design/widget/actions/group.ts            |   2 +-
 .../design/widget/actions/index.ts            |   2 +-
 .../design/widget/actions/layer.ts            |   2 +-
 .../design/widget/actions/resize.ts           |   2 +-
 .../design/widget/actions/select.ts           |   2 +-
 .../design/widget/actions/template.ts         |   2 +-
 .../design/widget/actions/widget.ts           |   2 +-
 .../design/widget/getter/index.ts             |   2 +-
 src/{pinia => store}/design/widget/index.ts   |   0
 src/store/index.ts                            |  36 +-
 src/store/modules/base/actions.ts             |  20 -
 src/store/modules/base/index.ts               |  46 -
 src/store/modules/base/mutations.ts           |  42 -
 src/store/modules/design/actions.ts           | 832 ------------------
 src/store/modules/design/index.ts             | 191 ----
 .../modules/design/methods/handleHistory.ts   |  88 --
 .../modules/design/methods/pushHistory.ts     |  73 --
 src/store/modules/design/mutations.ts         |  80 --
 src/utils/axios.ts                            |   2 +-
 src/views/Draw.vue                            |   2 +-
 src/views/Index.vue                           |   2 +-
 src/views/Psd.vue                             |   2 +-
 src/views/components/HeaderOptions.vue        |   2 +-
 src/views/components/UploadTemplate.vue       |   4 +-
 82 files changed, 113 insertions(+), 1497 deletions(-)
 delete mode 100644 src/pinia/index.ts
 rename src/{pinia => store}/base/index.ts (100%)
 rename src/{pinia => store}/base/user.ts (100%)
 rename src/{pinia => store}/design/canvas/index.ts (100%)
 rename src/{pinia => store}/design/control/index.ts (98%)
 rename src/{pinia => store}/design/force/index.ts (100%)
 rename src/{pinia => store}/design/group/action/index.ts (99%)
 rename src/{pinia => store}/design/group/index.ts (100%)
 rename src/{pinia => store}/design/history/actions/handleHistory.ts (96%)
 rename src/{pinia => store}/design/history/actions/pushHistory.ts (96%)
 rename src/{pinia => store}/design/history/index.ts (97%)
 rename src/{pinia => store}/design/page/index.ts (100%)
 rename src/{pinia => store}/design/widget/actions/align.ts (99%)
 rename src/{pinia => store}/design/widget/actions/clone.ts (97%)
 rename src/{pinia => store}/design/widget/actions/group.ts (94%)
 rename src/{pinia => store}/design/widget/actions/index.ts (99%)
 rename src/{pinia => store}/design/widget/actions/layer.ts (98%)
 rename src/{pinia => store}/design/widget/actions/resize.ts (99%)
 rename src/{pinia => store}/design/widget/actions/select.ts (99%)
 rename src/{pinia => store}/design/widget/actions/template.ts (93%)
 rename src/{pinia => store}/design/widget/actions/widget.ts (99%)
 rename src/{pinia => store}/design/widget/getter/index.ts (94%)
 rename src/{pinia => store}/design/widget/index.ts (100%)
 delete mode 100644 src/store/modules/base/actions.ts
 delete mode 100644 src/store/modules/base/index.ts
 delete mode 100644 src/store/modules/base/mutations.ts
 delete mode 100644 src/store/modules/design/actions.ts
 delete mode 100644 src/store/modules/design/index.ts
 delete mode 100644 src/store/modules/design/methods/handleHistory.ts
 delete mode 100644 src/store/modules/design/methods/pushHistory.ts
 delete mode 100644 src/store/modules/design/mutations.ts

diff --git a/package.json b/package.json
index be845fa..65b5f35 100644
--- a/package.json
+++ b/package.json
@@ -37,8 +37,7 @@
     "vite-plugin-compression": "^0.5.1",
     "vue": "3.4.19",
     "vue-router": "^4.0.0-0",
-    "vuedraggable": "^4.1.0",
-    "vuex": "^4.0.0-0"
+    "vuedraggable": "^4.1.0"
   },
   "devDependencies": {
     "@types/cropperjs": "^1.3.0",
diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts
index c003700..877a648 100644
--- a/src/common/hooks/dragHelper.ts
+++ b/src/common/hooks/dragHelper.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2023-11-22 18:11:15
  */
 
-import { useControlStore, useWidgetStore } from "@/pinia"
+import { useControlStore, useWidgetStore } from "@/store"
 
 // import store from '@/store'
 
diff --git a/src/common/methods/DesignFeatures/setComponents.ts b/src/common/methods/DesignFeatures/setComponents.ts
index a72eca6..19f1b7a 100644
--- a/src/common/methods/DesignFeatures/setComponents.ts
+++ b/src/common/methods/DesignFeatures/setComponents.ts
@@ -5,8 +5,8 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
-import { useCanvasStore, usePageStore } from '@/pinia'
-import { TdWidgetData } from '@/pinia/design/widget'
+import { useCanvasStore, usePageStore } from '@/store'
+import { TdWidgetData } from '@/store/design/widget'
 // import store from '@/store'
 
 export default async function setCompData(item: TdWidgetData[] | string) {
diff --git a/src/common/methods/DesignFeatures/setImage.ts b/src/common/methods/DesignFeatures/setImage.ts
index 6bbde50..4a89f23 100644
--- a/src/common/methods/DesignFeatures/setImage.ts
+++ b/src/common/methods/DesignFeatures/setImage.ts
@@ -7,7 +7,7 @@
  */
 // import store from '@/store'
 import { getImage } from '../getImgDetail'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, usePageStore } from '@/store'
 
 export type TItem2DataParam = {
   id?: string | number
diff --git a/src/common/methods/addMouseWheel.ts b/src/common/methods/addMouseWheel.ts
index 415e2b9..9767ed7 100644
--- a/src/common/methods/addMouseWheel.ts
+++ b/src/common/methods/addMouseWheel.ts
@@ -5,7 +5,7 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
-import { useControlStore } from '@/pinia'
+import { useControlStore } from '@/store'
 // import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
diff --git a/src/components/business/cropper/CropImage/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue
index 6348ed0..003e067 100644
--- a/src/components/business/cropper/CropImage/CropImage.vue
+++ b/src/components/business/cropper/CropImage/CropImage.vue
@@ -26,7 +26,7 @@ import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
 // import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
-import { useControlStore } from '@/pinia'
+import { useControlStore } from '@/store'
 
 export default defineComponent({
   components: { ElDialog },
diff --git a/src/components/business/cropper/CropImage/index.vue b/src/components/business/cropper/CropImage/index.vue
index 853ee46..ded8d44 100644
--- a/src/components/business/cropper/CropImage/index.vue
+++ b/src/components/business/cropper/CropImage/index.vue
@@ -26,7 +26,7 @@ import { ref, reactive, nextTick, toRefs } from 'vue'
 // import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
-import { useControlStore } from '@/pinia'
+import { useControlStore } from '@/store'
 
 type TDoneParams = {
   newImg: string,
diff --git a/src/components/business/image-cutout/ImageCutout/index.vue b/src/components/business/image-cutout/ImageCutout/index.vue
index 603c106..dc5d663 100644
--- a/src/components/business/image-cutout/ImageCutout/index.vue
+++ b/src/components/business/image-cutout/ImageCutout/index.vue
@@ -48,7 +48,7 @@ import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
 import ImageExtraction from '../ImageExtraction/index.vue'
 import { selectImageFile, uploadCutPhotoToCloud } from './method'
-import { useControlStore } from '@/pinia'
+import { useControlStore } from '@/store'
 
 export type TImageCutoutState = {
     show: boolean;
diff --git a/src/components/business/moveable/Moveable.vue b/src/components/business/moveable/Moveable.vue
index 1192567..d188433 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -18,7 +18,7 @@ import MoveableHelper from 'moveable-helper'
 import useSelecto from './Selecto'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/store'
 
 // const store = useStore()
 const widgetStore = useWidgetStore()
diff --git a/src/components/business/moveable/Selecto.ts b/src/components/business/moveable/Selecto.ts
index 4f6ca1b..4d4e40d 100644
--- a/src/components/business/moveable/Selecto.ts
+++ b/src/components/business/moveable/Selecto.ts
@@ -1,7 +1,7 @@
 import Selecto from 'selecto'
 import Moveable, { getElementInfo } from 'moveable'
 // import store from '@/store'
-import { useWidgetStore } from '@/pinia'
+import { useWidgetStore } from '@/store'
 
 export default function(moveable: Moveable) {
   const widgetStore = useWidgetStore()
diff --git a/src/components/business/picture-selector/index.vue b/src/components/business/picture-selector/index.vue
index 48c46d4..557675d 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -36,7 +36,7 @@ import { reactive } from 'vue'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
-import { useControlStore } from '@/pinia'
+import { useControlStore } from '@/store'
 
 type TEmits = (event: 'select', data: TGetImageListResult) => void
 
diff --git a/src/components/business/right-click-menu/RcMenu.vue b/src/components/business/right-click-menu/RcMenu.vue
index 8fe07b6..5cf06ac 100644
--- a/src/components/business/right-click-menu/RcMenu.vue
+++ b/src/components/business/right-click-menu/RcMenu.vue
@@ -25,7 +25,7 @@ import {
 import { getTarget } from '@/common/methods/target'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { storeToRefs } from 'pinia';
-import { useControlStore, useWidgetStore } from '@/pinia';
+import { useControlStore, useWidgetStore } from '@/store';
 
 // const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
diff --git a/src/components/business/save-download/CreateCover.vue b/src/components/business/save-download/CreateCover.vue
index 537e855..85eab6d 100644
--- a/src/components/business/save-download/CreateCover.vue
+++ b/src/components/business/save-download/CreateCover.vue
@@ -15,7 +15,7 @@ import html2canvas from 'html2canvas'
 import Qiniu from '@/common/methods/QiNiu'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia';
-import { useCanvasStore, useWidgetStore } from '@/pinia';
+import { useCanvasStore, useWidgetStore } from '@/store';
 
 // const store = useStore();
 // const { dZoom } = useSetupMapGetters(['dZoom'])
diff --git a/src/components/modules/layout/designBoard/index.vue b/src/components/modules/layout/designBoard/index.vue
index 70784b9..ba56669 100644
--- a/src/components/modules/layout/designBoard/index.vue
+++ b/src/components/modules/layout/designBoard/index.vue
@@ -84,9 +84,9 @@ import PointImg from '@/utils/plugins/pointImg'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
-import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
-import { TPageState } from '@/pinia/design/page'
+import { TPageState } from '@/store/design/page'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
diff --git a/src/components/modules/layout/lineGuides.vue b/src/components/modules/layout/lineGuides.vue
index 4c18790..4946fea 100644
--- a/src/components/modules/layout/lineGuides.vue
+++ b/src/components/modules/layout/lineGuides.vue
@@ -13,7 +13,7 @@
 import { watch } from 'vue'
 // import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
-import { useCanvasStore } from '@/pinia';
+import { useCanvasStore } from '@/store';
 
 type TProps = {
   show: boolean
diff --git a/src/components/modules/layout/zoomControl/index.vue b/src/components/modules/layout/zoomControl/index.vue
index 08ebf19..c8b1937 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -27,7 +27,7 @@ import { OtherList, TZoomData, ZoomList } from './data';
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useCanvasStore, useForceStore, usePageStore } from '@/pinia';
+import { useCanvasStore, useForceStore, usePageStore } from '@/store';
 
 const route = useRoute()
 // const store = useStore()
diff --git a/src/components/modules/panel/components/layerList.vue b/src/components/modules/panel/components/layerList.vue
index 03973ab..f1dd271 100644
--- a/src/components/modules/panel/components/layerList.vue
+++ b/src/components/modules/panel/components/layerList.vue
@@ -39,8 +39,8 @@
 </template>
 
 <script lang="ts">
-import { useWidgetStore } from '@/pinia'
-import { TdWidgetData } from '@/pinia/design/widget'
+import { useWidgetStore } from '@/store'
+import { TdWidgetData } from '@/store/design/widget'
 import { defineComponent, computed, reactive, ref, toRefs } from 'vue'
 // import { useStore } from 'vuex'
 import draggable from 'vuedraggable'
diff --git a/src/components/modules/panel/stylePanel.vue b/src/components/modules/panel/stylePanel.vue
index e6eb3c5..755003c 100644
--- a/src/components/modules/panel/stylePanel.vue
+++ b/src/components/modules/panel/stylePanel.vue
@@ -25,10 +25,10 @@ import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
 import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
-import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia';
+import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/store';
 import { storeToRefs } from 'pinia';
-import { TdWidgetData } from '@/pinia/design/widget';
-import type { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+import { TdWidgetData } from '@/store/design/widget';
+import type { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 // const store = useStore();
 const widgetStore = useWidgetStore()
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index 5803156..a71f79f 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/src/components/modules/panel/wrap/BgImgListWrap.vue
@@ -28,7 +28,7 @@ import api from '@/api'
 // import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
-import { usePageStore, useWidgetStore } from '@/pinia';
+import { usePageStore, useWidgetStore } from '@/store';
 
 type TCommonPanelData = {
   color: string
diff --git a/src/components/modules/panel/wrap/CompListWrap.vue b/src/components/modules/panel/wrap/CompListWrap.vue
index e1ba11d..dc37318 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -60,7 +60,7 @@ import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 type TState = {
   loading: boolean
diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index e442b70..954f537 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -48,7 +48,7 @@ import wSvg from '../../widgets/wSvg/wSvg.vue'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
 import { TGetListData } from '@/api/material'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
diff --git a/src/components/modules/panel/wrap/PhotoListWrap.vue b/src/components/modules/panel/wrap/PhotoListWrap.vue
index 08c3914..c64d717 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -34,7 +34,7 @@ import api from '@/api'
 // import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
diff --git a/src/components/modules/panel/wrap/TempListWrap.vue b/src/components/modules/panel/wrap/TempListWrap.vue
index c070f4e..5e5c28c 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -32,7 +32,7 @@ import useConfirm from '@/common/methods/confirm'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/store'
 import { storeToRefs } from 'pinia'
 
 type TState = {
diff --git a/src/components/modules/panel/wrap/TextListWrap.vue b/src/components/modules/panel/wrap/TextListWrap.vue
index f0944c1..4b0e045 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -29,7 +29,7 @@ import { storeToRefs } from 'pinia';
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
 // import { useStore } from 'vuex'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia';
+import { useControlStore, usePageStore, useWidgetStore } from '@/store';
 
 type TBasicTextData = {
   text: string
diff --git a/src/components/modules/panel/wrap/ToolsListWrap.vue b/src/components/modules/panel/wrap/ToolsListWrap.vue
index c913954..f9d197d 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@@ -33,7 +33,7 @@ import imageCutout from '@/components/business/image-cutout'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 // const store = useStore()
 const controlStore = useControlStore()
diff --git a/src/components/modules/panel/wrap/UserWrap.vue b/src/components/modules/panel/wrap/UserWrap.vue
index 8959b57..737a6e6 100644
--- a/src/components/modules/panel/wrap/UserWrap.vue
+++ b/src/components/modules/panel/wrap/UserWrap.vue
@@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 type TProps = {
   active?: number
diff --git a/src/components/modules/settings/colorSelect.vue b/src/components/modules/settings/colorSelect.vue
index 7ec40cb..0d40d60 100644
--- a/src/components/modules/settings/colorSelect.vue
+++ b/src/components/modules/settings/colorSelect.vue
@@ -19,7 +19,7 @@
 import {reactive, onMounted, watch } from 'vue'
 // import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
-import { useControlStore } from '@/pinia';
+import { useControlStore } from '@/store';
 
 type TProps = {
   label?: string
diff --git a/src/components/modules/widgets/pageStyle.vue b/src/components/modules/widgets/pageStyle.vue
index c7aac94..de00673 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@@ -66,8 +66,8 @@ import _dl from '@/common/methods/download'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore, useWidgetStore } from '@/pinia'
-import { TPageState, } from '@/pinia/design/page'
+import { usePageStore, useWidgetStore } from '@/store'
+import { TPageState, } from '@/store/design/page'
 import { storeToRefs } from 'pinia'
 import { proxyToObject } from '@/utils/utils'
 import { Delete as iconDelete, Download as iconDownload } from '@element-plus/icons-vue'
diff --git a/src/components/modules/widgets/wGroup/wGroup.vue b/src/components/modules/widgets/wGroup/wGroup.vue
index 6454278..d8785e5 100644
--- a/src/components/modules/widgets/wGroup/wGroup.vue
+++ b/src/components/modules/widgets/wGroup/wGroup.vue
@@ -28,7 +28,7 @@ const NAME = 'w-group'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
 // import { useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
-import { useWidgetStore } from '@/pinia';
+import { useWidgetStore } from '@/store';
 import { storeToRefs } from 'pinia';
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
diff --git a/src/components/modules/widgets/wGroup/wGroupStyle.vue b/src/components/modules/widgets/wGroup/wGroupStyle.vue
index 07a31d0..3c95609 100644
--- a/src/components/modules/widgets/wGroup/wGroupStyle.vue
+++ b/src/components/modules/widgets/wGroup/wGroupStyle.vue
@@ -44,11 +44,11 @@ import numberSlider from '../../settings/numberSlider.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wGroupSetting } from './groupSetting'
-import { useWidgetStore } from '@/pinia'
+import { useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
-import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
-import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TState = {
diff --git a/src/components/modules/widgets/wImage/wImage.vue b/src/components/modules/widgets/wImage/wImage.vue
index 5deaeff..4c84996 100644
--- a/src/components/modules/widgets/wImage/wImage.vue
+++ b/src/components/modules/widgets/wImage/wImage.vue
@@ -42,7 +42,7 @@ import PointImg from '@/utils/plugins/pointImg'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
 
 type TProps = {
   params: typeof setting
diff --git a/src/components/modules/widgets/wImage/wImageStyle.vue b/src/components/modules/widgets/wImage/wImageStyle.vue
index 70644c0..b2aa7f7 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -89,10 +89,10 @@ import imageCutout from '@/components/business/image-cutout'
 import wImageSetting, { TImageSetting } from './wImageSetting'
 import { TGetImageListResult } from '@/api/material'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
-import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
-import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   picBoxShow: boolean
diff --git a/src/components/modules/widgets/wQrcode/wQrcode.vue b/src/components/modules/widgets/wQrcode/wQrcode.vue
index 0c6fac9..eb920fc 100644
--- a/src/components/modules/widgets/wQrcode/wQrcode.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcode.vue
@@ -41,7 +41,7 @@ import { TWQrcodeSetting } from './wQrcodeSetting';
 import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { Options } from 'qr-code-styling';
-import { useForceStore, useWidgetStore } from '@/pinia';
+import { useForceStore, useWidgetStore } from '@/store';
 import { storeToRefs } from 'pinia';
 
 type TProps = {
diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
index 908ba23..62264f2 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
@@ -74,9 +74,9 @@ import alignIconList from '@/assets/data/AlignListData'
 import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore, useForceStore, useWidgetStore } from '@/pinia'
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
-import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+import { useControlStore, useForceStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
diff --git a/src/components/modules/widgets/wSvg/wSvg.vue b/src/components/modules/widgets/wSvg/wSvg.vue
index 16cead7..9d4d9c7 100644
--- a/src/components/modules/widgets/wSvg/wSvg.vue
+++ b/src/components/modules/widgets/wSvg/wSvg.vue
@@ -21,11 +21,11 @@
 // svg
 // const NAME = 'w-svg'
 // import { mapGetters, mapActions, useStore } from 'vuex'
-import { useCanvasStore, useForceStore, useWidgetStore } from '@/pinia';
+import { useCanvasStore, useForceStore, useWidgetStore } from '@/store';
 import { TWSvgSetting } from './wSvgSetting'
 import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
 import { storeToRefs } from 'pinia';
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
 type TProps = {
diff --git a/src/components/modules/widgets/wSvg/wSvgStyle.vue b/src/components/modules/widgets/wSvg/wSvgStyle.vue
index 0ccbea1..e48f1ea 100644
--- a/src/components/modules/widgets/wSvg/wSvgStyle.vue
+++ b/src/components/modules/widgets/wSvg/wSvgStyle.vue
@@ -47,9 +47,9 @@ import alignIconList from '@/assets/data/AlignListData'
 import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore, useWidgetStore } from '@/pinia'
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
-import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+import { useControlStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
diff --git a/src/components/modules/widgets/wText/pageFontsFilter.ts b/src/components/modules/widgets/wText/pageFontsFilter.ts
index 08f53c9..45c1892 100644
--- a/src/components/modules/widgets/wText/pageFontsFilter.ts
+++ b/src/components/modules/widgets/wText/pageFontsFilter.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2023-10-14 20:29:26
  */
 // import store from '@/store'
-import { useWidgetStore } from '@/pinia'
+import { useWidgetStore } from '@/store'
 import { toRaw } from 'vue'
 export default () => {
   const widgetStore = useWidgetStore()
diff --git a/src/components/modules/widgets/wText/wText.vue b/src/components/modules/widgets/wText/wText.vue
index 503c092..7e61938 100644
--- a/src/components/modules/widgets/wText/wText.vue
+++ b/src/components/modules/widgets/wText/wText.vue
@@ -65,7 +65,7 @@ import { useRoute } from 'vue-router'
 import { fontWithDraw } from '@/utils/widgets/loadFontRule'
 import getGradientOrImg from './getGradientOrImg'
 import { wTextSetting } from './wTextSetting'
-import { useForceStore, useHistoryStore, useWidgetStore } from '@/pinia'
+import { useForceStore, useHistoryStore, useWidgetStore } from '@/store'
 
 export type TwTextParams = {
   rotate?: number
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index 2b58369..deafbf6 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -67,9 +67,9 @@ import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
 import { storeToRefs } from 'pinia';
-import { useControlStore, useForceStore, useWidgetStore } from '@/pinia';
-import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
-import { TUpdateAlignData } from '@/pinia/design/widget/actions/align';
+import { useControlStore, useForceStore, useWidgetStore } from '@/store';
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
+import { TUpdateAlignData } from '@/store/design/widget/actions/align';
 
 type TState = {
   activeNames: string[],
diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts
index d8782d3..7d94b6c 100644
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/src/mixins/methods/dealWithCtrl.ts
@@ -7,7 +7,7 @@
  */
 // import store from '@/store'
 import handlePaste from './handlePaste'
-import { useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia'
+import { useGroupStore, useHistoryStore, useWidgetStore } from '@/store'
 
 export default function dealWithCtrl(e: KeyboardEvent, _this: any) {
   const groupStore = useGroupStore()
diff --git a/src/mixins/methods/handlePaste.ts b/src/mixins/methods/handlePaste.ts
index 58dd65e..8993e05 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -20,7 +20,7 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
diff --git a/src/mixins/methods/keyCodeOptions.ts b/src/mixins/methods/keyCodeOptions.ts
index 521831b..182af49 100644
--- a/src/mixins/methods/keyCodeOptions.ts
+++ b/src/mixins/methods/keyCodeOptions.ts
@@ -5,8 +5,8 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
-import { useControlStore, useWidgetStore } from '@/pinia'
-import { TdWidgetData } from '@/pinia/design/widget'
+import { useControlStore, useWidgetStore } from '@/store'
+import { TdWidgetData } from '@/store/design/widget'
 // import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
diff --git a/src/mixins/move.ts b/src/mixins/move.ts
index 0d8f271..4042210 100644
--- a/src/mixins/move.ts
+++ b/src/mixins/move.ts
@@ -5,7 +5,7 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
-import { useControlStore, useWidgetStore } from '@/pinia'
+import { useControlStore, useWidgetStore } from '@/store'
 // import store from '@/store'
 
 const move = {
diff --git a/src/mixins/shortcuts.ts b/src/mixins/shortcuts.ts
index 8d35af9..b1bac11 100644
--- a/src/mixins/shortcuts.ts
+++ b/src/mixins/shortcuts.ts
@@ -12,7 +12,7 @@
 import keyCodeOptions from './methods/keyCodeOptions'
 import dealWithCtrl from './methods/dealWithCtrl'
 import { useStore, Store } from 'vuex'
-import { TControlStore } from '@/pinia/design/control'
+import { TControlStore } from '@/store/design/control'
 
 const ignoreNode = ['INPUT', 'TEXTAREA']
 
diff --git a/src/pinia/index.ts b/src/pinia/index.ts
deleted file mode 100644
index e2eb865..0000000
--- a/src/pinia/index.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * @Author: Jeremy Yu
- * @Date: 2024-03-18 21:00:00
- * @Description: Store方法export
- * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-18 21:00:00
- */
-
-import useBaseStore from "./base";
-import useUserStore from "./base/user";
-import usePageStore from "./design/page"
-import useCanvasStore from "./design/canvas"
-import useControlStore from './design/control'
-import useHistoryStore from './design/history'
-import useWidgetStore from './design/widget'
-import useGroupStore from './design/group'
-import useForceStore from './design/force'
-
-export {
-  useBaseStore,
-  useUserStore,
-  usePageStore,
-  useCanvasStore,
-  useControlStore,
-  useHistoryStore,
-  useWidgetStore,
-  useGroupStore,
-  useForceStore,
-}
diff --git a/src/pinia/base/index.ts b/src/store/base/index.ts
similarity index 100%
rename from src/pinia/base/index.ts
rename to src/store/base/index.ts
diff --git a/src/pinia/base/user.ts b/src/store/base/user.ts
similarity index 100%
rename from src/pinia/base/user.ts
rename to src/store/base/user.ts
diff --git a/src/pinia/design/canvas/index.ts b/src/store/design/canvas/index.ts
similarity index 100%
rename from src/pinia/design/canvas/index.ts
rename to src/store/design/canvas/index.ts
diff --git a/src/pinia/design/control/index.ts b/src/store/design/control/index.ts
similarity index 98%
rename from src/pinia/design/control/index.ts
rename to src/store/design/control/index.ts
index 15bd300..e0a532f 100644
--- a/src/pinia/design/control/index.ts
+++ b/src/store/design/control/index.ts
@@ -7,7 +7,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { useHistoryStore } from "@/pinia";
+import { useHistoryStore } from "@/store";
 import { Store, defineStore } from "pinia";
 
 type TControlState = {
diff --git a/src/pinia/design/force/index.ts b/src/store/design/force/index.ts
similarity index 100%
rename from src/pinia/design/force/index.ts
rename to src/store/design/force/index.ts
diff --git a/src/pinia/design/group/action/index.ts b/src/store/design/group/action/index.ts
similarity index 99%
rename from src/pinia/design/group/action/index.ts
rename to src/store/design/group/action/index.ts
index b2a932c..96d9150 100644
--- a/src/pinia/design/group/action/index.ts
+++ b/src/store/design/group/action/index.ts
@@ -8,7 +8,7 @@
 
 import { customAlphabet } from 'nanoid/non-secure'
 import { TGroupStore } from '..'
-import { useHistoryStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useHistoryStore, usePageStore, useWidgetStore } from '@/store'
 import { TdWidgetData } from '../../widget'
 const nanoid = customAlphabet('1234567890abcdef', 12)
 
diff --git a/src/pinia/design/group/index.ts b/src/store/design/group/index.ts
similarity index 100%
rename from src/pinia/design/group/index.ts
rename to src/store/design/group/index.ts
diff --git a/src/pinia/design/history/actions/handleHistory.ts b/src/store/design/history/actions/handleHistory.ts
similarity index 96%
rename from src/pinia/design/history/actions/handleHistory.ts
rename to src/store/design/history/actions/handleHistory.ts
index e5e0a42..1e84f69 100644
--- a/src/pinia/design/history/actions/handleHistory.ts
+++ b/src/store/design/history/actions/handleHistory.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-27 21:00:00
  */
 
-import { useControlStore, usePageStore } from "@/pinia"
+import { useControlStore, usePageStore } from "@/store"
 import { THistoryStore } from ".."
 
 export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
diff --git a/src/pinia/design/history/actions/pushHistory.ts b/src/store/design/history/actions/pushHistory.ts
similarity index 96%
rename from src/pinia/design/history/actions/pushHistory.ts
rename to src/store/design/history/actions/pushHistory.ts
index c124ad4..abee906 100644
--- a/src/pinia/design/history/actions/pushHistory.ts
+++ b/src/store/design/history/actions/pushHistory.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-27 21:00:00
  */
 
-import { usePageStore, useWidgetStore } from "@/pinia"
+import { usePageStore, useWidgetStore } from "@/store"
 import { THistoryStore } from ".."
 import { proxyToObject } from "@/utils/utils"
 
diff --git a/src/pinia/design/history/index.ts b/src/store/design/history/index.ts
similarity index 97%
rename from src/pinia/design/history/index.ts
rename to src/store/design/history/index.ts
index edaf4e2..eb6651d 100644
--- a/src/pinia/design/history/index.ts
+++ b/src/store/design/history/index.ts
@@ -9,7 +9,7 @@
 import { Store, defineStore } from "pinia"
 import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
 import handleHistory from "./actions/handleHistory"
-import { usePageStore, useWidgetStore } from "@/pinia"
+import { usePageStore, useWidgetStore } from "@/store"
 
 export type THistoryParamData = {
   index: number
diff --git a/src/pinia/design/page/index.ts b/src/store/design/page/index.ts
similarity index 100%
rename from src/pinia/design/page/index.ts
rename to src/store/design/page/index.ts
diff --git a/src/pinia/design/widget/actions/align.ts b/src/store/design/widget/actions/align.ts
similarity index 99%
rename from src/pinia/design/widget/actions/align.ts
rename to src/store/design/widget/actions/align.ts
index a519ba6..967a291 100644
--- a/src/pinia/design/widget/actions/align.ts
+++ b/src/store/design/widget/actions/align.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useHistoryStore, usePageStore } from "@/pinia"
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 
 type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
diff --git a/src/pinia/design/widget/actions/clone.ts b/src/store/design/widget/actions/clone.ts
similarity index 97%
rename from src/pinia/design/widget/actions/clone.ts
rename to src/store/design/widget/actions/clone.ts
index e9a1142..7fdda15 100644
--- a/src/pinia/design/widget/actions/clone.ts
+++ b/src/store/design/widget/actions/clone.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useHistoryStore } from "@/pinia"
+import { useCanvasStore, useHistoryStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
diff --git a/src/pinia/design/widget/actions/group.ts b/src/store/design/widget/actions/group.ts
similarity index 94%
rename from src/pinia/design/widget/actions/group.ts
rename to src/store/design/widget/actions/group.ts
index 297d83a..151a5fe 100644
--- a/src/pinia/design/widget/actions/group.ts
+++ b/src/store/design/widget/actions/group.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useHistoryStore } from "@/pinia"
+import { useCanvasStore, useHistoryStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
diff --git a/src/pinia/design/widget/actions/index.ts b/src/store/design/widget/actions/index.ts
similarity index 99%
rename from src/pinia/design/widget/actions/index.ts
rename to src/store/design/widget/actions/index.ts
index 05fe291..f21bac1 100644
--- a/src/pinia/design/widget/actions/index.ts
+++ b/src/store/design/widget/actions/index.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useControlStore, usePageStore } from "@/pinia"
+import { useCanvasStore, useControlStore, usePageStore } from "@/store"
 import { TWidgetStore } from ".."
 
 export type TInidDMovePayload = {
diff --git a/src/pinia/design/widget/actions/layer.ts b/src/store/design/widget/actions/layer.ts
similarity index 98%
rename from src/pinia/design/widget/actions/layer.ts
rename to src/store/design/widget/actions/layer.ts
index e4eb367..f0681db 100644
--- a/src/pinia/design/widget/actions/layer.ts
+++ b/src/store/design/widget/actions/layer.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useForceStore } from "@/pinia"
+import { useForceStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 
 export type TupdateLayerIndexData = {
diff --git a/src/pinia/design/widget/actions/resize.ts b/src/store/design/widget/actions/resize.ts
similarity index 99%
rename from src/pinia/design/widget/actions/resize.ts
rename to src/store/design/widget/actions/resize.ts
index 04b13fe..309e24d 100644
--- a/src/pinia/design/widget/actions/resize.ts
+++ b/src/store/design/widget/actions/resize.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useControlStore, usePageStore } from "@/pinia"
+import { useCanvasStore, useControlStore, usePageStore } from "@/store"
 import { TWidgetStore } from ".."
 import { updateGroupSize } from "."
 
diff --git a/src/pinia/design/widget/actions/select.ts b/src/store/design/widget/actions/select.ts
similarity index 99%
rename from src/pinia/design/widget/actions/select.ts
rename to src/store/design/widget/actions/select.ts
index b775b7c..52a6637 100644
--- a/src/pinia/design/widget/actions/select.ts
+++ b/src/store/design/widget/actions/select.ts
@@ -1,4 +1,4 @@
-import { useControlStore, useHistoryStore, usePageStore } from "@/pinia"
+import { useControlStore, useHistoryStore, usePageStore } from "@/store"
 import { TWidgetStore } from ".."
 import { proxyToObject } from "@/utils/utils"
 
diff --git a/src/pinia/design/widget/actions/template.ts b/src/store/design/widget/actions/template.ts
similarity index 93%
rename from src/pinia/design/widget/actions/template.ts
rename to src/store/design/widget/actions/template.ts
index aeeee50..8f359f3 100644
--- a/src/pinia/design/widget/actions/template.ts
+++ b/src/store/design/widget/actions/template.ts
@@ -9,7 +9,7 @@
 
 import { customAlphabet } from 'nanoid/non-secure'
 import { TWidgetStore, TdWidgetData } from '..'
-import { useCanvasStore, useHistoryStore } from '@/pinia'
+import { useCanvasStore, useHistoryStore } from '@/store'
 const nanoid = customAlphabet('1234567890abcdef', 12)
 
 // TODO: 选择模板
diff --git a/src/pinia/design/widget/actions/widget.ts b/src/store/design/widget/actions/widget.ts
similarity index 99%
rename from src/pinia/design/widget/actions/widget.ts
rename to src/store/design/widget/actions/widget.ts
index 42afec9..f13ae46 100644
--- a/src/pinia/design/widget/actions/widget.ts
+++ b/src/store/design/widget/actions/widget.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { useCanvasStore, useHistoryStore, usePageStore } from "@/pinia"
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
 import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
diff --git a/src/pinia/design/widget/getter/index.ts b/src/store/design/widget/getter/index.ts
similarity index 94%
rename from src/pinia/design/widget/getter/index.ts
rename to src/store/design/widget/getter/index.ts
index 2076ba1..a351128 100644
--- a/src/pinia/design/widget/getter/index.ts
+++ b/src/store/design/widget/getter/index.ts
@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-28 14:00:00
  */
 
-import { usePageStore } from "@/pinia"
+import { usePageStore } from "@/store"
 import { TWidgetState, TdWidgetData } from ".."
 import { TPageState } from "../../page"
 
diff --git a/src/pinia/design/widget/index.ts b/src/store/design/widget/index.ts
similarity index 100%
rename from src/pinia/design/widget/index.ts
rename to src/store/design/widget/index.ts
diff --git a/src/store/index.ts b/src/store/index.ts
index e43f486..e2eb865 100644
--- a/src/store/index.ts
+++ b/src/store/index.ts
@@ -1,11 +1,29 @@
-import { createStore } from 'vuex'
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
 
-// import base from './modules/base'
-import design from './modules/design'
+import useBaseStore from "./base";
+import useUserStore from "./base/user";
+import usePageStore from "./design/page"
+import useCanvasStore from "./design/canvas"
+import useControlStore from './design/control'
+import useHistoryStore from './design/history'
+import useWidgetStore from './design/widget'
+import useGroupStore from './design/group'
+import useForceStore from './design/force'
 
-export default createStore({
-  // ...base,
-  modules: {
-    design,
-  },
-})
+export {
+  useBaseStore,
+  useUserStore,
+  usePageStore,
+  useCanvasStore,
+  useControlStore,
+  useHistoryStore,
+  useWidgetStore,
+  useGroupStore,
+  useForceStore,
+}
diff --git a/src/store/modules/base/actions.ts b/src/store/modules/base/actions.ts
deleted file mode 100644
index 76abb52..0000000
--- a/src/store/modules/base/actions.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 异步操作 store.dispatch() 调用
- */
-
-// interface Iprops {
-//   commit: (a: any, b: any) => void
-//   state: any
-// }
-
-// export default {
-//   hideLoading(props: Iprops, data: Type.Object) {
-//     setTimeout(() => {
-//       props.commit('loading', false)
-//     }, 600)
-//   },
-//   setFonts(store: Iprops, list: Type.Object) {
-//     store.state.fonts = list
-//   },
-  
-// }
diff --git a/src/store/modules/base/index.ts b/src/store/modules/base/index.ts
deleted file mode 100644
index 6d03977..0000000
--- a/src/store/modules/base/index.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-12-16 16:20:16
- * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
- * @LastEditTime: 2024-03-17 15:00:00
- */
-
-// const all = {
-//   state: {
-//     loading: null,
-//     online: true, // 登录状态，
-//     user: {
-//       name: localStorage.getItem('username'),
-//     }, // 储存用户信息
-//     scroll: true,
-//     manager: '', // 是否为管理员模式
-//     tempEditing: false, // 管理员是否正在编辑模板
-//     fonts: [], // 缓存字体列表
-//     app: null, // 抠图服务
-//   },
-//   getters: {
-//     online: (state: Type.Object) => {
-//       return state.online
-//     },
-//     user: (state: Type.Object) => {
-//       return state.user
-//     },
-//     manager: (state: Type.Object) => {
-//       return state.manager
-//     },
-//     tempEditing: (state: Type.Object) => {
-//       return state.tempEditing
-//     },
-//     fonts: (state: Type.Object) => {
-//       return state.fonts
-//     },
-//   },
-//   mutations: {
-//     ...mutations,
-//   },
-//   actions: {
-//     ...actions,
-//   },
-// }
-
diff --git a/src/store/modules/base/mutations.ts b/src/store/modules/base/mutations.ts
deleted file mode 100644
index 9384472..0000000
--- a/src/store/modules/base/mutations.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-12-16 16:20:16
- * @Description: 同步操作 store.commit() 调用
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-13 18:29:13
- */
-
-// import { Toast } from 'vant'
-
-// export default {
-//   loading(state: Type.Object, data: any) {
-//     // Toast.clear();
-//     // let msg = ''
-//     // if (typeof data === 'string') {
-//     //     msg = data
-//     // } else {
-//     //     Toast.clear();
-//     //     return false
-//     // }
-//     // Toast.loading({
-//     //     duration: 0,       // 持续展示 toast
-//     //     loadingType: 'spinner',
-//     //     message: msg
-//     // });
-//   },
-//   changeRoute(state: Type.Object, from: string) {
-//     state.routeFrom = from
-//   },
-//   changeOnline(state: Type.Object, status: string) {
-//     state.online = status
-//   },
-//   changeUser(state: Type.Object, name: string) {
-//     state.user.name = name
-//     // state.user = Object.assign({}, state.user)
-//     state.user = { ...state.user }
-//     localStorage.setItem('username', name)
-//   },
-//   managerEdit(state: Type.Object, status: string) {
-//     state.tempEditing = status
-//   },
-// }
diff --git a/src/store/modules/design/actions.ts b/src/store/modules/design/actions.ts
deleted file mode 100644
index f9ab64a..0000000
--- a/src/store/modules/design/actions.ts
+++ /dev/null
@@ -1,832 +0,0 @@
-// import { nextTick } from 'vue'
-import { customAlphabet } from 'nanoid/non-secure'
-const nanoid = customAlphabet('1234567890abcdef', 12)
-// import pushHistory from './methods/pushHistory'
-// import handleHistory from './methods/handleHistory'
-
-export default {
-  /**
-   * 保存操作历史，
-   * 修改数据、移动完成后都会自动保存
-   * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
-   */
-  // pushHistory(store: any, msg: string) {
-  //   pushHistory(store, msg)
-  // },
-  /**
-   * 操作历史记录
-   * action为undo表示撤销
-   * action为redo表示重做
-   */
-  // handleHistory(store: any, action: any) {
-  //   handleHistory(store, action)
-  //   // 激活组件默认为page
-  //   store.state.dActiveElement = store.state.dPage
-  // },
-  
-  // updateZoom(store, zoom) {
-  //   store.state.dZoom = zoom
-  // },
-  // updateScreen(store, { width, height }) {
-  //   store.state.dScreen.width = width
-  //   store.state.dScreen.height = height
-  // },
-
-  // updateGridSize(store, { width, height }) {
-  //   store.state.gridSize.width = width
-  //   store.state.gridSize.height = height
-  // },
-
-  // updatePageData(store, { key, value, pushHistory }) {
-  //   const page = store.state.dPage
-  //   if (page[key] !== value || pushHistory) {
-  //     page[key] = value
-  //     // 画布修改先不压入历史栈，因为替换模板后会重复压栈
-  //     // store.dispatch('pushHistory', 'updatePageData')
-  //   }
-  // },
-
-  // updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
-  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-  //   if (widget && (widget[key] !== value || pushHistory)) {
-  //     switch (key) {
-  //       case 'width':
-  //         // const minWidth = widget.record.minWidth
-  //         // const maxWidth = store.state.dPage.width - widget.left
-  //         // value = Math.max(minWidth, Math.min(maxWidth, value))
-  //         break
-  //       case 'height':
-  //         // const minHeight = widget.record.minHeight
-  //         // const maxHeight = store.state.dPage.height - widget.top
-  //         // value = Math.max(minHeight, Math.min(maxHeight, value))
-  //         break
-  //       case 'left':
-  //       case 'top':
-  //         if (widget.isContainer) {
-  //           let dLeft = widget.left - value
-  //           let dTop = widget.top - value
-  //           if (key === 'left') {
-  //             dTop = 0
-  //           }
-  //           if (key === 'top') {
-  //             dLeft = 0
-  //           }
-  //           const len = store.state.dWidgets.length
-  //           for (let i = 0; i < len; ++i) {
-  //             const child = store.state.dWidgets[i]
-  //             if (child.parent === widget.uuid) {
-  //               child.left -= dLeft
-  //               child.top -= dTop
-  //             }
-  //           }
-  //         }
-  //         break
-  //     }
-  //     widget[key] = value
-  //     if (pushHistory) {
-  //       setTimeout(() => {
-  //         pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
-  //       }, 100)
-  //     }
-  //     // store.dispatch('reChangeCanvas')
-  //   }
-  // },
-  // updateWidgetMultiple(store, { uuid, data, pushHistory }) {
-  //   for (const item of data) {
-  //     const { key, value } = item
-  //     const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-  //     if (widget && (widget[key] !== value || pushHistory)) {
-  //       switch (key) {
-  //         case 'left':
-  //         case 'top':
-  //           if (widget.isContainer) {
-  //             let dLeft = widget.left - value
-  //             let dTop = widget.top - value
-  //             if (key === 'left') {
-  //               dTop = 0
-  //             }
-  //             if (key === 'top') {
-  //               dLeft = 0
-  //             }
-  //             const len = store.state.dWidgets.length
-  //             for (let i = 0; i < len; ++i) {
-  //               const child = store.state.dWidgets[i]
-  //               if (child.parent === widget.uuid) {
-  //                 child.left -= dLeft
-  //                 child.top -= dTop
-  //               }
-  //             }
-  //           }
-  //           break
-  //       }
-
-  //       widget[key] = value
-  //     }
-  //   }
-  //   setTimeout(() => {
-  //     store.dispatch('pushHistory', 'updateWidgetMultiple')
-  //   }, 100)
-  // },
-  // addWidget(store: any, setting: any) {
-  //   setting.uuid = nanoid()
-  //   store.state.dWidgets.push(setting)
-  //   const len = store.state.dWidgets.length
-  //   // store.state.dActiveElement = store.state.dWidgets[len - 1]
-  //   store.dispatch('selectWidget', {
-  //     uuid: store.state.dWidgets[len - 1].uuid,
-  //   })
-  //   store.dispatch('pushHistory', 'addWidget')
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // addGroup(store: any, group: Type.Object) {
-  //   let parent: any = null
-  //   group.forEach((item: any) => {
-  //     item.uuid = nanoid() // 重设id
-  //     item.type === 'w-group' && (parent = item) // 找出父组件
-  //   })
-  //   group.forEach((item: any) => {
-  //     !item.isContainer && (item.parent = parent.uuid) // 重设父id
-  //     item.text && (item.text = decodeURIComponent(item.text))
-  //     store.state.dWidgets.push(item)
-  //   })
-  //   // 选中组件
-  //   const len = store.state.dWidgets.length
-  //   store.state.dActiveElement = store.state.dWidgets[len - 1]
-  //   store.dispatch('pushHistory', 'addGroup')
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // // TODO: 选择模板
-  // setTemplate(store: any, allWidgets: any[]) {
-  //   allWidgets.forEach((item: any) => {
-  //     Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
-  //     item.text && (item.text = decodeURIComponent(item.text))
-  //     store.state.dWidgets.push(item)
-  //   })
-  //   store.dispatch('pushHistory', 'setTemplate')
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // TODO 删除
-  // deleteWidget(store: any) {
-  //   const widgets = store.state.dWidgets
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   const activeElement = store.state.dActiveElement
-
-  //   let count = 0 // 记录容器里的组件数量
-  //   if (selectWidgets.length !== 0) {
-  //     for (let i = 0; i < selectWidgets.length; ++i) {
-  //       const uuid = selectWidgets[i].uuid
-  //       const index = widgets.findIndex((item) => item.uuid === uuid)
-  //       widgets.splice(index, 1)
-  //       try {
-  //         // 清除掉可能存在的选中框
-  //         document.getElementById(uuid).classList.remove('widget-selected')
-  //       } catch (e) {}
-  //     }
-  //     store.state.dSelectWidgets = []
-  //   } else {
-  //     if (activeElement.type === 'page') {
-  //       return
-  //     }
-
-  //     const uuid = activeElement.uuid
-  //     const index = widgets.findIndex((item) => item.uuid === uuid)
-
-  //     // 先删除组件
-  //     widgets.splice(index, 1)
-
-  //     // 如果删除的是容器，须将内部组件一并删除
-  //     if (activeElement.isContainer) {
-  //       for (let i = widgets.length - 1; i >= 0; --i) {
-  //         if (widgets[i].parent === uuid) {
-  //           widgets.splice(i, 1)
-  //         }
-  //       }
-  //     } else if (activeElement.parent !== '-1') {
-  //       for (let i = widgets.length - 1; i >= 0; --i) {
-  //         if (widgets[i].parent === activeElement.parent) {
-  //           count++
-  //           if (count > 1) {
-  //             break
-  //           }
-  //         }
-  //       }
-  //       if (count <= 1) {
-  //         const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
-  //         widgets.splice(index, 1)
-  //         if (count === 1) {
-  //           const widget = widgets.find((item) => item.parent === activeElement.parent)
-  //           widget.parent = '-1'
-  //         }
-  //         count = 0
-  //       }
-  //     }
-  //   }
-
-  //   if (count === 0) {
-  //     // 重置 activeElement
-  //     store.state.dActiveElement = store.state.dPage
-  //   } else {
-  //     store.state.dActiveElement = widgets.find((item) => item.uuid === activeElement.parent)
-  //   }
-
-  //   if (store.state.dActiveElement.uuid !== '-1') {
-  //     store.dispatch('updateGroupSize', store.state.dActiveElement.uuid)
-  //   }
-
-  //   store.dispatch('pushHistory', 'deleteWidget')
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // copyWidget(store) {
-  //   const activeElement = JSON.parse(JSON.stringify(store.state.dActiveElement))
-  //   if (activeElement.type === 'page') {
-  //     return
-  //   }
-  //   navigator.clipboard.writeText('') // 清空系统剪贴板内容
-  //   const container = []
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   if (selectWidgets.length === 0) {
-  //     const uuid = activeElement.uuid
-  //     container.push(activeElement)
-  //     if (activeElement.isContainer) {
-  //       const widgets = store.state.dWidgets
-  //       for (let i = 0; i < widgets.length; ++i) {
-  //         if (widgets[i].parent === uuid) {
-  //           container.push(widgets[i])
-  //         }
-  //       }
-  //     }
-  //   } else {
-  //     for (let i = 0; i < selectWidgets.length; ++i) {
-  //       const uuid = selectWidgets[i].uuid
-  //       container.push(selectWidgets[i])
-  //       if (selectWidgets[i].isContainer) {
-  //         const widgets = store.state.dWidgets
-  //         for (let i = 0; i < widgets.length; ++i) {
-  //           if (widgets[i].parent === uuid) {
-  //             container.push(widgets[i])
-  //           }
-  //         }
-  //       }
-  //     }
-  //   }
-  //   store.state.dCopyElement = JSON.parse(JSON.stringify(container))
-  // },
-  // pasteWidget(store) {
-  //   const copyElement = JSON.parse(JSON.stringify(store.state.dCopyElement))
-  //   const container = copyElement.find((item) => item.isContainer)
-  //   for (let i = 0; i < copyElement.length; ++i) {
-  //     copyElement[i].uuid = nanoid()
-  //     if (container && copyElement[i].uuid !== container.uuid) {
-  //       copyElement[i].parent = container.uuid
-  //     } else {
-  //       copyElement[i].parent = '-1'
-  //     }
-  //     copyElement[i].top += 30
-  //     copyElement[i].left += 30
-  //   }
-  //   store.state.dWidgets = store.state.dWidgets.concat(copyElement)
-  //   store.state.dActiveElement = copyElement[0]
-  //   store.state.dSelectWidgets = copyElement
-  //   if (container) {
-  //     store.state.dActiveElement = container
-  //     store.state.dSelectWidgets = []
-  //   }
-
-  //   store.dispatch('pushHistory', 'pasteWidget')
-  //   store.dispatch('copyWidget')
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // // TODO: 选中元件与取消选中
-  // selectWidget(store, { uuid }) {
-  //   const alt = store.state.dAltDown
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-  //   if (alt) {
-  //     if (uuid !== '-1' && widget.parent === '-1') {
-  //       // && !widget.isContainer
-  //       if (selectWidgets.length === 0) {
-  //         if (store.state.dActiveElement.uuid !== '-1') {
-  //           selectWidgets.push(store.state.dActiveElement)
-  //         }
-  //       }
-  //       const index = selectWidgets.findIndex((item) => {
-  //         return item.uuid === uuid
-  //       })
-  //       // 如果已经存在则取消选择，否则加入选取
-  //       if (index !== -1) {
-  //         selectWidgets.splice(index, 1)
-  //         if (selectWidgets.length === 0) {
-  //           store.state.dActiveElement = store.state.dPage
-  //         }
-  //       } else {
-  //         selectWidgets.push(widget)
-  //       }
-  //       if (selectWidgets.length === 1) {
-  //         store.state.dActiveElement = selectWidgets[0]
-  //         store.state.dSelectWidgets = []
-  //       }
-  //     }
-  //     return
-  //   }
-  //   store.state.dSelectWidgets = []
-  //   if (uuid === '-1') {
-  //     store.state.dActiveElement = store.state.dPage
-  //     const pageHistory = store.state.dPageHistory
-  //     if (pageHistory.length === 0) {
-  //       pageHistory.push(JSON.stringify(store.state.dPage))
-  //     }
-  //     setTimeout(() => {
-  //       store.state.dSelectWidgets = []
-  //     }, 10)
-  //   } else {
-  //     // store.state.dActiveElement = {}
-  //     setTimeout(() => {
-  //       store.state.dActiveElement = widget
-  //     }, 10)
-  //   }
-  // },
-  // // 多选元素
-  // selectWidgetsInOut(store, { uuid }) {
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-  //   if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
-  //     if (selectWidgets.length === 0) {
-  //       if (store.state.dActiveElement.uuid !== '-1') {
-  //         selectWidgets.push(store.state.dActiveElement)
-  //       }
-  //     }
-  //     const index = selectWidgets.findIndex((item) => {
-  //       return item.uuid === uuid
-  //     })
-  //     // 如果已经存在则取消选择，否则加入选取
-  //     if (index !== -1) {
-  //       selectWidgets.splice(index, 1)
-  //       if (selectWidgets.length === 0) {
-  //         store.state.dActiveElement = store.state.dPage
-  //       }
-  //     } else {
-  //       selectWidgets.push(widget)
-  //     }
-  //     // if (selectWidgets.length === 1) {
-  //     //   store.state.dActiveElement = selectWidgets[0]
-  //     //   store.state.dSelectWidgets = []
-  //     // }
-  //   }
-  // },
-  // 设置 mousemove 操作的初始值
-  // initDMove(store, payload) {
-  //   const mouseXY = store.state.dMouseXY
-  //   const widgetXY = store.state.dActiveWidgetXY
-  //   mouseXY.x = payload.startX
-  //   mouseXY.y = payload.startY
-  //   widgetXY.x = payload.originX
-  //   widgetXY.y = payload.originY
-  // },
-  // // 组件移动结束
-  // stopDMove(store) {
-  //   if (store.state.dMoving) {
-  //     store.dispatch('pushHistory', 'stopDMove')
-  //   }
-  //   store.state.dMoving = false
-  // },
-  // 移动组件
-  // dMove(store, payload) {
-  //   const { donotMove } = payload // 由moveable代理移动
-  //   store.state.dMoving = true
-
-  //   const page = store.state.dPage
-
-  //   const target = store.state.dActiveElement
-  //   const mouseXY = store.state.dMouseXY
-  //   const widgetXY = store.state.dActiveWidgetXY
-
-  //   let parent = page
-
-  //   if (target.parent !== '-1') {
-  //     parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-  //   }
-
-  //   const dx = payload.x - mouseXY.x
-  //   const dy = payload.y - mouseXY.y
-  //   let left = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-  //   let top = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
-
-  //   left = Math.max(Math.min(left, page.width - target.record.width), 0)
-  //   top = Math.max(Math.min(top, page.height - target.record.height), 0)
-
-  //   if (target.isContainer) {
-  //     const dLeft = target.left - left
-  //     const dTop = target.top - top
-  //     const len = store.state.dWidgets.length
-  //     for (let i = 0; i < len; ++i) {
-  //       const widget = store.state.dWidgets[i]
-  //       if (widget.parent === target.uuid) {
-  //         widget.left -= dLeft
-  //         widget.top -= dTop
-  //       }
-  //     }
-  //   }
-
-  //   if (!donotMove) {
-  //     target.left = left
-  //     target.top = top
-  //   }
-
-  //   if (parent.uuid !== '-1') {
-  //     store.dispatch('updateGroupSize', parent.uuid)
-  //   }
-
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // // 设置 resize 操作的初始值
-  // initDResize(store, payload) {
-  //   const mouseXY = store.state.dMouseXY
-  //   const widgetXY = store.state.dActiveWidgetXY
-  //   const resizeWH = store.state.dResizeWH
-  //   mouseXY.x = payload.startX
-  //   mouseXY.y = payload.startY
-  //   widgetXY.x = payload.originX
-  //   widgetXY.y = payload.originY
-  //   resizeWH.width = payload.width
-  //   resizeWH.height = payload.height
-  // },
-  // // 更新组件宽高
-  // dResize(store, { x, y, dirs }) {
-  //   store.state.dResizeing = true
-
-  //   const page = store.state.dPage
-  //   const target = store.state.dActiveElement
-  //   const mouseXY = store.state.dMouseXY
-  //   const widgetXY = store.state.dActiveWidgetXY
-  //   const resizeWH = store.state.dResizeWH
-  //   let parent = page
-
-  //   if (target.parent !== '-1') {
-  //     parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-  //   }
-
-  //   const dx = x - mouseXY.x
-  //   const dy = y - mouseXY.y
-
-  //   let left = 0
-  //   let top = 0
-
-  //   for (let i = 0; i < dirs.length; ++i) {
-  //     const dir = dirs[i]
-
-  //     switch (dir) {
-  //       case 'top':
-  //         const t = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
-  //         top = Math.max(t, 0)
-  //         top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
-  //         target.height += target.top - top
-  //         target.height = Math.max(target.height, target.record.minHeight)
-  //         target.top = top
-  //         break
-  //       case 'bottom':
-  //         top = Math.floor((dy * 100) / store.state.dZoom)
-  //         target.height = resizeWH.height + top
-  //         target.height = Math.max(target.height, target.record.minHeight)
-  //         target.height = Math.min(target.height, page.height - target.top)
-  //         break
-  //       case 'left':
-  //         const tLeft = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-  //         left = Math.max(tLeft, 0)
-  //         target.width += target.left - left
-  //         target.width = Math.max(target.width, target.record.minWidth)
-  //         left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
-  //         target.left = left
-  //         break
-  //       case 'right':
-  //         left = Math.floor((dx * 100) / store.state.dZoom)
-  //         target.width = resizeWH.width + left
-  //         target.width = Math.max(target.width, target.record.minWidth)
-  //         target.width = Math.min(target.width, page.width - target.left)
-  //         break
-  //     }
-  //   }
-  //   if (parent.uuid !== '-1') {
-  //     store.dispatch('updateGroupSize', parent.uuid)
-  //   }
-
-  //   store.dispatch('reChangeCanvas')
-  // },
-  // // 组件调整结束
-  // stopDResize(store) {
-  //   if (store.state.dResizeing) {
-  //     store.dispatch('pushHistory', 'stopDResize')
-  //   }
-  //   store.state.dResizeing = false
-  // },
-  // // 强制重绘画布
-  // reChangeCanvas(store) {
-  //   // const tag = store.state.dPage.tag
-  //   // store.state.dPage.tag = tag === 0 ? 0.01 : 0
-  // },
-  // pushColorToHistory(store, color) {
-  //   const history = store.state.dColorHistory
-  //   // 如果已经存在就提到前面来，避免重复
-  //   const index = history.indexOf(color)
-  //   if (index !== -1) {
-  //     history.splice(index, 1)
-  //   }
-  //   // 最多保存3种颜色
-  //   if (history.length === 4) {
-  //     history.splice(history.length - 1, 1)
-  //   }
-  //   // 把最新的颜色放在头部
-  //   const head = [color]
-  //   store.state.dColorHistory = head.concat(history)
-  // },
-  // updateHoverUuid(store, uuid) {
-  //   store.state.dHoverUuid = uuid
-  // },
-  // showRefLine(store, show) {
-  //   store.state.dShowRefLine = show
-  // },
-  // updateAlign(store: any, { align, uuid, group }: any) {
-  //   const widgets = store.state.dWidgets
-  //   const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
-  //   let parent = group || store.state.dPage
-
-  //   if (target.parent !== '-1') {
-  //     parent = widgets.find((item: any) => item.uuid === target.parent)
-  //   }
-
-  //   let left = target.left
-  //   let top = target.top
-  //   let pw = parent.record.width || parent.width
-  //   let ph = parent.record.height || parent.height
-
-  //   if (parent.uuid === '-1') {
-  //     pw = parent.width
-  //     ph = parent.height
-  //   }
-
-  //   const targetW = target.width
-  //   const targetH = target.height
-  //   switch (align) {
-  //     case 'left':
-  //       left = parent.left
-  //       break
-  //     case 'ch': // 水平居中
-  //       left = parent.left + pw / 2 - targetW / 2
-  //       break
-  //     case 'right':
-  //       left = parent.left + pw - targetW
-  //       break
-  //     case 'top':
-  //       top = parent.top
-  //       break
-  //     case 'cv': // 垂直居中
-  //       top = parent.top + ph / 2 - targetH / 2
-  //       break
-  //     case 'bottom':
-  //       top = parent.top + ph - targetH
-  //       break
-  //   }
-
-  //   if (target.left !== left || target.top !== top) {
-  //     if (target.isContainer) {
-  //       const dLeft = target.left - left
-  //       const dTop = target.top - top
-  //       const len = widgets.length
-  //       for (let i = 0; i < len; ++i) {
-  //         const widget = widgets[i]
-  //         if (widget.parent === target.uuid) {
-  //           widget.left -= dLeft
-  //           widget.top -= dTop
-  //         }
-  //       }
-  //     }
-  //     target.left = left
-  //     target.top = top
-
-  //     store.dispatch('pushHistory', 'updateAlign')
-  //     store.dispatch('reChangeCanvas')
-  //   }
-  // },
-  // getWidgetJsonData(store) {
-  //   const page = JSON.parse(JSON.stringify(store.state.dPage))
-  //   const widgets = JSON.parse(JSON.stringify(store.state.dWidgets))
-  //   page.widgets = widgets
-
-  //   return page
-  // },
-  // TODO 组合操作
-  // updateAltDown(store, value) {
-  //   store.state.dAltDown = value
-  //   console.log('控制组合按键, 成组功能为: realCombined')
-  // },
-  // realCombined(store: any) {
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   if (selectWidgets.length > 1) {
-  //     const widgets = store.state.dWidgets
-  //     const group = JSON.parse(store.state.dGroupJson)
-  //     group.uuid = nanoid()
-  //     widgets.push(group)
-  //     let left = Number(store.state.dPage.width)
-  //     let top = Number(store.state.dPage.height)
-  //     let right = 0
-  //     let bottom = 0
-  //     const sortWidgets = [] // 顺序取出元素
-  //     const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-  //     for (const w of widgets) {
-  //       selectkeys.includes(w.uuid) && sortWidgets.push(w)
-  //     }
-  //     for (let i = 0; i < sortWidgets.length; ++i) {
-  //       const uuid = sortWidgets[i].uuid
-  //       const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-  //       const widget = { ...widgets[index] } // clone
-  //       if (widget.isContainer) {
-  //         widgets.splice(index, 1) // 删除旧组合
-  //         for (let i = 0; i < widgets.length; i++) {
-  //           const item = widgets[i]
-  //           item.parent === widget.uuid && (item.parent = group.uuid)
-  //           // if (item.parent === widget.uuid) {
-  //           //   item.parent = group.uuid
-  //           //   // 重新排列
-  //           //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
-  //           //   // widgets.splice(index, 1)
-  //           //   // widgets.push(item)
-  //           // }
-  //         }
-  //       } else {
-  //         widget.parent = group.uuid
-  //         // 重新排列
-  //         widgets.splice(index, 1)
-  //         widgets.push(widget)
-  //       }
-
-  //       // sortWidgets.push({
-  //       //   index: index,
-  //       //   widget: widget,
-  //       // })
-  //       left = Math.min(left, widget.left)
-  //       top = Math.min(top, widget.top)
-  //       right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
-  //       bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
-  //     }
-  //     // sortWidgets.sort((a, b) => a.index > b.index)
-  //     // for (let i = 0; i < sortWidgets.length; ++i) {
-  //     //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
-  //     //     widgets.splice(index, 1)
-  //     //     widgets.push(sortWidgets[i].widget)
-  //     // }
-
-  //     group.left = Number(left)
-  //     group.top = Number(top)
-  //     group.width = Number(right - left)
-  //     group.height = Number(bottom - top)
-  //     store.state.dActiveElement = group
-  //     store.state.dSelectWidgets = []
-
-  //     store.dispatch('pushHistory', 'realCombined')
-  //     // store.dispatch('reChangeCanvas')
-  //   }
-  // },
-  // getCombined(store: any) {
-  //   const selectWidgets = store.state.dSelectWidgets
-  //   return new Promise((resolve) => {
-  //     if (selectWidgets.length > 1) {
-  //       const widgets = store.state.dWidgets
-  //       const group = JSON.parse(store.state.dGroupJson)
-  //       group.uuid = nanoid()
-  //       // widgets.push(group)
-  //       let left = store.state.dPage.width
-  //       let top = store.state.dPage.height
-  //       let right = 0
-  //       let bottom = 0
-  //       const sortWidgets = [] // 顺序取出元素
-  //       const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-  //       for (const w of widgets) {
-  //         selectkeys.includes(w.uuid) && sortWidgets.push(w)
-  //       }
-  //       for (let i = 0; i < sortWidgets.length; ++i) {
-  //         const uuid = sortWidgets[i].uuid
-  //         const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-  //         const widget = { ...widgets[index] } // clone
-  //         left = Math.min(left, widget.left)
-  //         top = Math.min(top, widget.top)
-  //         right = Math.max(right, Number(widget.width) + Number(widget.left))
-  //         bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
-  //       }
-
-  //       group.left = left
-  //       group.top = top
-  //       group.width = right - left
-  //       group.height = bottom - top
-
-  //       resolve(group)
-  //     }
-  //   })
-  // },
-  // initGroupJson(store, json) {
-  //   store.state.dGroupJson = json
-  // },
-  // updateGroupSize(store, uuid) {
-  //   const widgets = store.state.dWidgets
-  //   const group = widgets.find((item) => item.uuid === uuid)
-  //   let left = store.state.dPage.width
-  //   let top = store.state.dPage.height
-  //   let right = 0
-  //   let bottom = 0
-  //   for (let i = 0; i < widgets.length; ++i) {
-  //     if (widgets[i].parent === group.uuid) {
-  //       left = Math.min(left, widgets[i].left)
-  //       top = Math.min(top, widgets[i].top)
-  //       right = Math.max(right, widgets[i].record.width + widgets[i].left)
-  //       bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
-  //     }
-  //   }
-  //   group.width = right - left
-  //   group.height = bottom - top
-  //   group.left = left
-  //   group.top = top
-  // },
-  // updateLayerIndex(store, { uuid, value, isGroup }) {
-  //   const widgets = store.state.dWidgets
-  //   const widget = widgets.find((item) => item.uuid === uuid)
-  //   const index = widgets.findIndex((item) => item.uuid === uuid)
-  //   let group = []
-  //   if (isGroup) {
-  //     // 组合组件移动
-  //     group = widgets.filter((item) => item.parent === uuid)
-  //     for (let i = 0; i < group.length; ++i) {
-  //       const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
-  //       widgets.splice(pos, 1)
-  //     }
-  //   }
-
-  //   // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
-  //   let next = index + value
-  //   let move = false
-  //   const maxLen = widgets.length
-  //   let gCount = 1 // 记录跳过的组合数量
-  //   // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
-  //   while (next >= 0 && next < maxLen) {
-  //     const nextWidget = widgets[next]
-  //     if (widget.parent !== '-1') {
-  //       // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
-  //       if (nextWidget.parent === widget.parent) {
-  //         widgets.splice(index, 1)
-  //         widgets.splice(next, 0, widget)
-  //         move = true
-  //       }
-  //       break
-  //       // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
-  //     } else if (nextWidget.parent === '-1') {
-  //       if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
-  //         if (gCount === 0 && value > 0) {
-  //           next -= value
-  //         }
-  //         widgets.splice(index, 1)
-  //         widgets.splice(next, 0, widget)
-  //         move = true
-  //         break
-  //       } else if (nextWidget.isContainer) {
-  //         gCount = 0
-  //       }
-  //     }
-  //     next += value
-  //   }
-  //   next -= value
-  //   if (!move && next !== index) {
-  //     widgets.splice(index, 1)
-  //     widgets.splice(next, 0, widget)
-  //   }
-
-  //   // 如果是组合，要把里面的组件添加回去
-  //   if (isGroup) {
-  //     const pos = widgets.findIndex((item) => item.uuid === uuid)
-  //     for (let i = group.length - 1; i >= 0; --i) {
-  //       widgets.splice(pos + 1, 0, group[i])
-  //     }
-  //   }
-  // },
-  // // TODO: 取消组合
-  // ungroup(store, uuid) {
-  //   const widgets = store.state.dWidgets
-  //   const index = widgets.findIndex((item) => item.uuid === uuid)
-  //   widgets.splice(index, 1)
-  //   const len = widgets.length
-
-  //   for (let i = 0; i < len; ++i) {
-  //     if (widgets[i].parent === uuid) {
-  //       widgets[i].parent = '-1'
-  //       // store.state.dAltDown = true
-  //       // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
-  //       store.state.dSelectWidgets.push(widgets[i])
-  //     }
-  //   }
-  //   // store.state.dAltDown = false
-  //   store.commit('updateSelect')
-  //   // store.state.dActiveElement = store.state.dPage
-  // },
-  // /**
-  //  * 设置拖拽时在哪个图层
-  //  */
-  // setDropOver(store: any, uuid: string) {
-  //   store.state.dDropOverUuid = uuid
-  // },
-}
diff --git a/src/store/modules/design/index.ts b/src/store/modules/design/index.ts
deleted file mode 100644
index 909c4ef..0000000
--- a/src/store/modules/design/index.ts
+++ /dev/null
@@ -1,191 +0,0 @@
-import mutations from './mutations'
-import actions from './actions'
-const all = {
-  state: {
-    // dZoom: 0, // 画布缩放百分比
-    // dPaddingTop: 0, // 画布垂直居中修正值
-    // dScreen: {
-    //   width: 0, // 记录编辑界面的宽度
-    //   height: 0, // 记录编辑界面的高度
-    // },
-    // gridSize: {
-    //   width: 0, // 网格小格子的宽度
-    //   height: 0, // 网格小格子的高度
-    // },
-    // guidelines: {
-    //   // moveable 标尺辅助线
-    //   verticalGuidelines: [],
-    //   horizontalGuidelines: [],
-    // },
-    // dActiveWidgetXY: {
-    //   x: 0, // 选中组件的横向初始值
-    //   y: 0, // 选中组件的纵向初始值
-    // },
-    // dMouseXY: {
-    //   x: 0, // 鼠标按下时的横坐标
-    //   y: 0, // 鼠标按下时的纵坐标
-    // },
-    // dMoving: false, // 是否正在移动组件
-    // dDraging: false, // 是否正在抓取组件
-    // dResizeing: false, // 是否正在调整组件宽高
-    // dShowRefLine: true, // 是否显示参考线
-    // dResizeWH: {
-    //   // 初始化调整大小时组件的宽高
-    //   width: 0,
-    //   height: 0,
-    // },
-    // dActiveElement: {}, // 选中的组件或页面
-    // dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
-    // dHoverUuid: '-1', // 鼠标在这个图层上
-    // dDropOverUuid: '', // 拖动时放在哪个图层上
-    // dPage: {
-    //   name: '背景页面',
-    //   type: 'page',
-    //   uuid: '-1',
-    //   left: 0,
-    //   top: 0,
-    //   width: 1920, // 画布宽度
-    //   height: 1080, // 画布高度
-    //   backgroundColor: '#ffffff', // 画布背景颜色
-    //   backgroundImage: '', // 画布背景图片
-    //   backgroundTransform: {},
-    //   opacity: 1, // 透明度
-    //   tag: 0, // 强制刷新用
-    //   setting: [
-    //     {
-    //       label: '背景颜色',
-    //       parentKey: 'backgroundColor',
-    //       value: false,
-    //     },
-    //   ],
-    //   record: {},
-    // },
-    // dWidgets: [], // 已使用的组件
-    // dHistory: [], // 记录历史操作（保存整个画布的json数据）
-    // dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
-    // dPageHistory: [], // 记录历史操作对应的page
-    // dHistoryParams: {
-    //   index: -1,
-    //   length: 0,
-    //   maxLength: 20,
-    // },
-    // dColorHistory: [], // 记录历史选择的颜色
-    // dAltDown: false, // 记录是否按下alt键 / 或ctrl
-    // dSelectWidgets: [], // 记录多选的组件
-    // dGroupJson: {}, // 组合的json数据
-    // selectItem: { data: null }, // 记录当前选择的元素, data
-    // activeMouseEvent: null, // 正在活动的鼠标事件
-    // showMoveable: false, // 全局控制选择框的显示
-    // showRotatable: true, // 是否显示moveable的旋转按钮
-    // zoomScreenChange: null, // 画布强制刷新适应度
-    // updateRect: null, // 强制刷新操作框
-    // updateSelect: null, // 强制设置选择元素
-    // dCropUuid: -1, // 正在编辑or裁剪的组件id
-    // dDragInitData: {}, // 拖拽初始化数据
-  },
-  getters: {
-    // selectItem(state: any) {
-    //   return state.selectItem
-    // },
-    // dZoom(state) {
-    //   return state.dZoom
-    // },
-    // dPaddingTop(state: any) {
-    //   return state.dPaddingTop
-    // },
-    // dScreen(state) {
-    //   return state.dScreen
-    // },
-    // gridSize(state) {
-    //   return state.gridSize
-    // },
-    // dActiveWidgetXY(state) {
-    //   return state.dActiveWidgetXY
-    // },
-    // dMouseXY(state) {
-    //   return state.dMouseXY
-    // },
-    // dMoving(state) {
-    //   return state.dMoving
-    // },
-    // dDraging(state) {
-    //   return state.dDraging
-    // },
-    // dActiveElement(state) {
-    //   return state.dActiveElement
-    // },
-    // dPage(state) {
-    //   return state.dPage
-    // },
-    // dWidgets(state) {
-    //   return state.dWidgets
-    // },
-    // dHistoryParams(state) {
-    //   return state.dHistoryParams
-    // },
-    // dColorHistory(state) {
-    //   return state.dColorHistory
-    // },
-    // dHoverUuid(state) {
-    //   return state.dHoverUuid
-    // },
-    // dResizeing(state) {
-    //   return state.dResizeing
-    // },
-    // dShowRefLine(state) {
-    //   return state.dShowRefLine
-    // },
-    // dCopyElement(state) {
-    //   return state.dCopyElement
-    // },
-    // dAltDown(state) {
-    //   return state.dAltDown
-    // },
-    // dSelectWidgets(state) {
-    //   return state.dSelectWidgets
-    // },
-    // activeMouseEvent(state: any) {
-    //   return state.activeMouseEvent
-    // },
-    // showMoveable(state: any) {
-    //   return state.showMoveable
-    // },
-    // showRotatable(state: any) {
-    //   return state.showRotatable
-    // },
-    // zoomScreenChange(state: any) {
-    //   return state.zoomScreenChange
-    // },
-    // updateRect(state: any) {
-    //   return state.updateRect
-    // },
-    // updateSelect(state: any) {
-    //   return state.updateSelect
-    // },
-    // dDropOverUuid(state: any) {
-    //   return state.dDropOverUuid
-    // },
-    // guidelines(state: any) {
-    //   return state.guidelines
-    // },
-    // dCropUuid(state: any) {
-    //   return state.dCropUuid
-    // },
-    // dPageHistory(state: any) {
-    //   return state.dPageHistory
-    // },
-    // dHistory(state: any) {
-    //   return state.dHistory
-    // },
-    // dDragInitData(state: any) {
-    //   return state.dDragInitData
-    // },
-  },
-  mutations: {
-    ...mutations,
-  },
-  actions: {
-    ...actions,
-  },
-}
-export default all
diff --git a/src/store/modules/design/methods/handleHistory.ts b/src/store/modules/design/methods/handleHistory.ts
deleted file mode 100644
index b318833..0000000
--- a/src/store/modules/design/methods/handleHistory.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2022-03-10 23:05:03
- * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-11 10:13:42
- */
-// export default function handleHistory(store: any, action: any) {
-//   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-//   const history = store.state.dHistory
-//   const pageHistory = store.state.dPageHistory
-//   const historyParams = store.state.dHistoryParams
-//   if (action === 'undo') {
-//     historyParams.index -= 1 // 下标向前移1 撤销
-//     console.log(historyParams.index)
-//     if (historyParams.index > -1) {
-//       store.state.dWidgets = JSON.parse(history[historyParams.index])
-//       store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-//     }
-//   } else if (action === 'redo') {
-//     historyParams.index += 1 // 下标向后移1 重做
-//     // 如果下标小于历史记录列表长度，直接取出历史记录
-//     // if (historyParams.index < historyParams.length) {
-//     store.state.dWidgets = JSON.parse(history[historyParams.index])
-//     store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-//     // } else {
-//     //   // 否则设置下标为列表最后一项
-//     //   historyParams.index = historyParams.length - 1
-//     //   store.state.dWidgets = JSON.parse(history[historyParams.index])
-//     //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-//     // }
-//   }
-// }
-
-// function handleHistory_old(store: any, action: any) {
-//   store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-//   const history = store.state.dHistory
-//   // const uuidHistory = store.state.dActiveUuidHistory
-//   const pageHistory = store.state.dPageHistory
-//   const historyParams = store.state.dHistoryParams
-
-//   // let uuid = '-1'
-//   console.log(action, historyParams)
-
-//   if (action === 'undo') {
-//     // 下标向前移1 撤销
-//     historyParams.index -= 1
-//     // 如果下表大于等于0，直接取出历史记录
-//     if (historyParams.index >= 0) {
-//       console.log(1, history)
-//       console.log(2, pageHistory)
-
-//       store.state.dWidgets = JSON.parse(history[historyParams.index])
-//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-//       // uuid = uuidHistory[historyParams.index]
-//     } else if (historyParams.length < 10) {
-//       // 否则如果历史记录长度小于10，则设置组件为空
-//       historyParams.index = -1
-//       store.state.dWidgets = []
-//       store.state.dPage = JSON.parse(pageHistory[0])
-//     } else {
-//       historyParams.index = -1
-//     }
-//   } else if (action === 'redo') {
-//     // 下标向后移1 重做
-//     historyParams.index += 1
-//     // 如果下标小于历史记录列表长度，直接取出历史记录
-//     if (historyParams.index < historyParams.length) {
-//       console.log(1, history)
-//       console.log(2, pageHistory)
-//       store.state.dWidgets = JSON.parse(history[historyParams.index])
-//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
-//       // uuid = uuidHistory[historyParams.index]
-//     } else {
-//       // 否则设置下标为列表最后一项
-//       historyParams.index = historyParams.length - 1
-//       store.state.dWidgets = JSON.parse(history[historyParams.index])
-//       store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-//       // uuid = uuidHistory[historyParams.index]
-//     }
-//   }
-//   // 激活组件默认为page
-//   // let element = store.state.dPage
-//   // if (uuid !== '-1') {
-//   //   element = store.state.dWidgets.find((item) => item.uuid === uuid)
-//   // }
-//   // store.state.dActiveElement = element
-// }
diff --git a/src/store/modules/design/methods/pushHistory.ts b/src/store/modules/design/methods/pushHistory.ts
deleted file mode 100644
index c65f200..0000000
--- a/src/store/modules/design/methods/pushHistory.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2022-03-04 19:36:00
- * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-11 10:12:50
- */
-// export default function pushHistory(store: any, msg: string) {
-//   console.log('history压栈', '来源: ' + msg)
-//   const history = store.state.dHistory
-//   const pageHistory = store.state.dPageHistory
-//   const historyParams = store.state.dHistoryParams // index = length - 1
-//   // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-//   if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
-//     return
-//   }
-//   if (historyParams.index < history.length - 1) {
-//     const index = historyParams.index + 1
-//     const len = history.length - index
-//     history.splice(index, len)
-//     pageHistory.splice(index, len)
-//     historyParams.length = history.length
-//     historyParams.index = history.length - 1
-//   }
-//   history.push(JSON.stringify(store.state.dWidgets))
-//   pageHistory.push(JSON.stringify(store.state.dPage))
-//   historyParams.index = history.length - 1
-//   historyParams.length = history.length
-// }
-
-// function pushHistory_old(store: any) {
-//   // 历史记录列表
-//   const history = store.state.dHistory
-//   // 历史激活组件记录列表
-//   // const uuidHistory = store.state.dActiveUuidHistory
-//   // 历史page记录列表
-//   const pageHistory = store.state.dPageHistory
-//   // 历史记录列表参数（长度和下标）
-//   const historyParams = store.state.dHistoryParams
-
-//   // 下标不等于-1表示已经存在历史操作记录
-//   // 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
-//   if (historyParams.index < history.length - 1) {
-//     const index = historyParams.index + 1
-//     const len = history.length - index
-//     // 删除下标之后的所有历史记录
-//     history.splice(index, len)
-//     // 删除下标之后的所有uuid记录
-//     // uuidHistory.splice(index, len)
-//     // 删除下标之后的所有page记录
-//     pageHistory.splice(index + 1, len - 1)
-//     historyParams.length = history.length
-//   }
-//   // 保存当前操作进历史记录
-//   if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
-//     history.push(JSON.stringify(store.state.dWidgets))
-//     // uuidHistory.push(store.state.dActiveElement.uuid)
-//     pageHistory.push(JSON.stringify(store.state.dPage))
-//     historyParams.index = history.length - 1
-//     historyParams.length = history.length
-//   }
-//   // 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
-//   if (history.length > 20) {
-//     history.splice(0, 1)
-//     // uuidHistory.splice(0, 1)
-//     pageHistory.splice(0, 1)
-//   }
-//   if (pageHistory.length - 1 > history.length) {
-//     pageHistory.splice(0, 1)
-//   }
-//   // historyParams.index = history.length - 1
-//   // historyParams.length = history.length
-// }
diff --git a/src/store/modules/design/mutations.ts b/src/store/modules/design/mutations.ts
deleted file mode 100644
index 3acf04e..0000000
--- a/src/store/modules/design/mutations.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-07-14 15:16:43
- * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-11 10:22:54
- */
-/**
- * 同步操作 store.commit() 调用
- */
-interface Iprops {
-  commit: (a: any, b: any) => void
-  state: {}
-}
-export default {
-  // updatePaddingTop(state: Type.Object, num: number) {
-  //   state.dPaddingTop = num
-  // },
-  // selectItem(state: Type.Object, { data, type }: any) {
-  //   state.selectItem.data = data
-  //   state.selectItem.type = type
-  // },
-  // resize(state: Type.Object, data: Type.Object) {
-  //   const { width, height } = data
-  //   const target = state.dActiveElement
-  //   target.width = width
-  //   target.height = height
-  // },
-  // setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
-  //   const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
-  //   widget[key] = value
-  // },
-  // setMouseEvent(state: Type.Object, e: Event | null) {
-  //   state.activeMouseEvent = e
-  // },
-  // setDWidgets(state: Type.Object, e: any) {
-  //   state.dWidgets = e
-  // },
-
-  // setDPage(state: Type.Object, e: any) {
-  //   state.dPage = e
-  // },
-  
-  // setShowMoveable(state: Type.Object, show: any) {
-  //   state.showMoveable = show
-  //   // if (!show) {
-  //   //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
-  //   //   state.dActiveElement = state.dPage
-  //   // }
-  // },
-  // setShowRotatable(state: Type.Object, e: any) {
-  //   state.showRotatable = e
-  // },
-  // zoomScreenChange(state: Type.Object, e: any) {
-  //   // 画布尺寸适应度强制刷新
-  //   state.zoomScreenChange = Math.random()
-  // },
-  // updateRect(state: Type.Object, e: any) {
-  //   // 强制刷新操作框
-  //   state.updateRect = Math.random()
-  // },
-  // updateSelect(state: Type.Object, e: any) {
-  //   // 强制触发元素选择
-  //   state.updateSelect = Math.random()
-  // },
-  // updateGuidelines(state: Type.Object, lines: any) {
-  //   // 修改标尺线
-  //   state.guidelines = { ...state.guidelines, ...lines }
-  // },
-  // setCropUuid(state: Type.Object, uuid: any) {
-  //   // 设置正在裁剪or编辑的组件
-  //   state.dCropUuid = uuid
-  // },
-  // setDraging(state: Type.Object, drag: boolean) {
-  //   state.dDraging = drag
-  // },
-  // setDragInitData(state: Type.Object, data: any) {
-  //   state.dDragInitData = data
-  // },
-}
diff --git a/src/utils/axios.ts b/src/utils/axios.ts
index 8f05b41..90491e6 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -8,7 +8,7 @@
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
 // import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
-import { useBaseStore, useUserStore } from '@/pinia/index';
+import { useBaseStore, useUserStore } from '@/store/index';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index a567240..61dcda4 100644
--- a/src/views/Draw.vue
+++ b/src/views/Draw.vue
@@ -22,7 +22,7 @@ import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useGroupStore, usePageStore, useWidgetStore } from '@/store'
 
 type TState = {
   style: StyleValue
diff --git a/src/views/Index.vue b/src/views/Index.vue
index 4ebac04..5207077 100644
--- a/src/views/Index.vue
+++ b/src/views/Index.vue
@@ -72,7 +72,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'
 
 type TState = {
   style: CSSProperties
diff --git a/src/views/Psd.vue b/src/views/Psd.vue
index 6060f8d..70f734e 100644
--- a/src/views/Psd.vue
+++ b/src/views/Psd.vue
@@ -73,7 +73,7 @@ import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 import { processPSD2Page } from '@/utils/plugins/psd'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
 
 type TState = {
diff --git a/src/views/components/HeaderOptions.vue b/src/views/components/HeaderOptions.vue
index fce6470..08f22ca 100644
--- a/src/views/components/HeaderOptions.vue
+++ b/src/views/components/HeaderOptions.vue
@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/pinia/index'
+import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/store/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
diff --git a/src/views/components/UploadTemplate.vue b/src/views/components/UploadTemplate.vue
index 584998b..b928e81 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -22,9 +22,9 @@ import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 import { storeToRefs } from 'pinia'
-import { TdWidgetData } from '@/pinia/design/widget'
+import { TdWidgetData } from '@/store/design/widget'
 
 type TProps = {
   modelValue?: string

From 912a5a7ed675ec7843f22de1d43f923e6b4a5d3e Mon Sep 17 00:00:00 2001
From: IchliebedichZhu <54796446@qq.com>
Date: Sat, 30 Mar 2024 10:18:48 +0000
Subject: [PATCH 23/23] merge: feat-pinia branch

---
 src/components/modules/panel/wrap/GraphListWrap.vue | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/modules/panel/wrap/GraphListWrap.vue b/src/components/modules/panel/wrap/GraphListWrap.vue
index 954f537..ca3c074 100644
--- a/src/components/modules/panel/wrap/GraphListWrap.vue
+++ b/src/components/modules/panel/wrap/GraphListWrap.vue
@@ -43,7 +43,8 @@ import { reactive, toRefs, onMounted } from 'vue'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
-import wSvg from '../../widgets/wSvg/wSvg.vue'
+import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
+// import wSvg from '../../widgets/wSvg/wSvg.vue'
 // import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
@@ -193,7 +194,7 @@ async function selectItem(item: TGetListData) {
   // store.commit('setShowMoveable', false) // 清理掉上一次的选择
   controlStore.setShowMoveable(false) // 清理掉上一次的选择
 
-  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvg.setting)) : JSON.parse(JSON.stringify(wImageSetting))
+  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
 
   setting.width = img.width