diff --git a/package-lock.json b/package-lock.json
index 2bc5483..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",
@@ -26,6 +27,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",
@@ -36,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",
@@ -972,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",
@@ -1829,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",
@@ -3282,6 +3300,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 84195af..65b5f35 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",
@@ -29,16 +30,17 @@
     "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",
     "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",
     "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",
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/assets/data/TextIconsData.ts b/src/assets/data/TextIconsData.ts
index 80d554e..98c77be 100644
--- a/src/assets/data/TextIconsData.ts
+++ b/src/assets/data/TextIconsData.ts
@@ -14,6 +14,7 @@ export type TStyleIconData = {
   tip: string
   value: string[]
   select: boolean
+  extraIcon?: boolean,
 }
 
 export const styleIconList1 = [
diff --git a/src/common/hooks/dragHelper.ts b/src/common/hooks/dragHelper.ts
index 1d5e617..877a648 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 "@/store"
+
+// 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..19f1b7a 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 '@/store'
+import { TdWidgetData } from '@/store/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..4a89f23 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 '@/store'
 
 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/DesignFeatures/setWidgetData.ts b/src/common/methods/DesignFeatures/setWidgetData.ts
index 26aa138..feec69b 100644
--- a/src/common/methods/DesignFeatures/setWidgetData.ts
+++ b/src/common/methods/DesignFeatures/setWidgetData.ts
@@ -8,12 +8,11 @@
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
-// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
+import { wSvgSetting } from '@/components/modules/widgets/wSvg/wSvgSetting'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {
   let setting = data
@@ -35,7 +34,7 @@ export default async function(type: string, item: TCommonItemData, data: Record<
     setting.mask = item.value.url
   }
   if (type === 'svg') {
-    setting = JSON.parse(JSON.stringify(wSvg.setting))
+    setting = JSON.parse(JSON.stringify(wSvgSetting))
     const img = await setImageData(item.value)
     setting.width = img.width
     setting.height = img.height // parseInt(100 / item.value.ratio, 10)
diff --git a/src/common/methods/addMouseWheel.ts b/src/common/methods/addMouseWheel.ts
index 6be1dae..9767ed7 100644
--- a/src/common/methods/addMouseWheel.ts
+++ b/src/common/methods/addMouseWheel.ts
@@ -5,7 +5,8 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
-import store from '@/store'
+import { useControlStore } from '@/store'
+// import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
 type TAddEventObj = {
@@ -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/cropper/CropImage/CropImage.vue b/src/components/business/cropper/CropImage/CropImage.vue
index de50847..003e067 100644
--- a/src/components/business/cropper/CropImage/CropImage.vue
+++ b/src/components/business/cropper/CropImage/CropImage.vue
@@ -23,19 +23,21 @@
 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 { useControlStore } from '@/store'
 
 export default defineComponent({
   components: { ElDialog },
   emits: ['done'],
   setup(props, context) {
-    const store = useStore()
+    // const store = useStore()
     const state = reactive({
       loading: false,
       url: '',
     })
+    const controlStore = useControlStore()
     const dialogVisible = ref(false)
     const imgBox = ref<HTMLImageElement | any>()
     let cropData: any = null
@@ -49,7 +51,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 +89,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..ded8d44 100644
--- a/src/components/business/cropper/CropImage/index.vue
+++ b/src/components/business/cropper/CropImage/index.vue
@@ -23,9 +23,10 @@
 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 '@/store'
 
 type TDoneParams = {
   newImg: string,
@@ -40,7 +41,8 @@ type TOpenItem = {
   imgUrl: string
 }
 
-const store = useStore()
+// 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..dc5d663 100644
--- a/src/components/business/image-cutout/ImageCutout/index.vue
+++ b/src/components/business/image-cutout/ImageCutout/index.vue
@@ -41,13 +41,14 @@
 
 <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'
 import _dl from '@/common/methods/download'
 import ImageExtraction from '../ImageExtraction/index.vue'
 import { selectImageFile, uploadCutPhotoToCloud } from './method'
+import { useControlStore } from '@/store'
 
 export type TImageCutoutState = {
     show: boolean;
@@ -61,7 +62,8 @@ export type TImageCutoutState = {
     loading: boolean;
 }
 
-const store = useStore()
+// 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/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 7219186..d188433 100644
--- a/src/components/business/moveable/Moveable.vue
+++ b/src/components/business/moveable/Moveable.vue
@@ -8,503 +8,662 @@
 <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 { nextTick, onMounted, watch } from 'vue'
 
 import Moveable, { EVENTS } 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, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/store'
 
-export default defineComponent({
-  setup() {},
-  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
-  watch: {
-    async dActiveElement(val) {
-      setTimeout(async () => {
-        await nextTick()
-        this.checkMouseEvent()
-      }, 10);
-      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时进行即刻选中
-          this.checkMouseEvent()
-        })
-        // // 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 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)
 
-          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)
+let _target: string | null = null
 
-        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)
-
-      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,
+watch(
+  () => dActiveElement.value,
+  async (val) => {
+    setTimeout(async () => {
+      await nextTick()
+      checkMouseEvent()
+    }, 10);
+    if (!val || !val.record) {
+      return
     }
-    const moveable = new Moveable(document.body, moveableOptions)
-    this.moveable = moveable
-
-    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, (...args) => {
-          // this.$emit(event, ...args)
-          helper[helperEvent] && helper[helperEvent](...args)
-        })
+    if (!moveable) return
+    // 选中非面板 并且不是组合内的元素
+    if (Number(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
       }
-    })
-    /* draggable */
-    let resizeStartWidth = 0
+      // // Set Move Auto
+      moveable.setState({ target: _target }, () => {
+        // 当出现mouseevent时进行即刻选中
+        checkMouseEvent()
+      })
+      // // End
+      controlStore.setShowMoveable(true)
+      // store.commit('setShowMoveable', true)
+      // 参考线设置
+      if (moveable.elementGuidelines && !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: 可以遍历来设置参考线，目前先粗暴清空
+      moveable.elementGuidelines && (moveable.elementGuidelines.length = 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)
+watch(
+  () => showMoveable.value,
+  (val) => {
+    if (!moveable) return
+    if (val) {
+        moveable.target = _target
+      } else {
+        moveable.target = `[id="empty"]`
+      }
+  }
+)
+
+watch(
+  () => showRotatable.value,
+  (val) => {
+    if (!moveable) return
+    // TODO: 这里是通过旋转来判断是否可以操作
+    moveable.renderDirections = val ? ['nw', 'n', 'ne', 'w', 'e', 'sw', 's', 'se'] : []
+    moveable.resizable = val
+    // this.moveable.scalable = val
+    const el = document.getElementsByClassName('moveable-rotation')
+    if (el && el[0]) {
+      (el[0] as HTMLElement).style.display = val ? 'block' : 'none'
+    }
+  }
+)
+
+watch(
+  () => updateRect.value,
+  () => {
+    moveable && moveable.updateRect()
+  }
+)
+
+watch(
+  () => updateSelect.value,
+  () => {
+    const items = widgetStore.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 = dAltDown.value
+    // 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
+  }
+)
+
+type TMoveableOptions = {
+  target: HTMLElement | null
+  container?:  HTMLElement | null
+  zoom: number
+  draggable: boolean
+  clippable: boolean // 裁剪
+  throttleDrag: number
+  resizable: boolean
+  throttleResize: number
+  scalable: boolean
+  throttleScale: number
+  keepRatio: boolean
+  rotatable: boolean
+  throttleRotate: number
+  renderDirections: string[] // ['nw', 'ne', 'sw', 'se'] // 'e'
+  pinchable: boolean // ["draggable", "resizable", "scalable", "rotatable"]
+  origin: boolean
+  defaultGroupOrigin: string,
+  /* 样式相关 */
+  rotationPosition: 'bottom',
+  className: 'zk-moveable-style',
+  /* -- 吸附对齐 Start -- */
+  snappable: boolean,
+  elementGuidelines: [],
+  verticalGuidelines: [],
+  horizontalGuidelines: [],
+  snapThreshold: 4,
+  isDisplaySnapDigit: boolean,
+  snapGap: boolean,
+  snapElement: boolean,
+  snapVertical: boolean,
+  snapHorizontal: boolean,
+  snapCenter: boolean,
+  snapDigit: number
+
+  // snapDirections={{"top":true,"right":true,"bottom":true,"left":true}}
+  //       elementSnapDirections={{}}
+  // -- END --
+  triggerAblesSimultaneously: true,
+}
+
+let moveable: Moveable | null = null
+let holdPosition: { left: number, top: number } | null = null
+let startHL: number = 0
+let startLS: number = 0
+let resetRatio: number = 0
+let resizeTempData: { width: number, height: number } | null = null
+
+onMounted(() => {
+  let holdGroupPosition: Record<string, any> | null = null
+  const moveableOptions: TMoveableOptions = {
+    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,
+  }
+
+  moveable = new Moveable(document.body, moveableOptions)
+
+  const helper = new MoveableHelper()
+
+  EVENTS.forEach((event) => {
+    let helperEvent = (event.replace(event[0], 'on' + event[0].toUpperCase()) as keyof MoveableHelper)
+    // 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)
+        if (helper[helperEvent] && typeof helper[helperEvent] === "function") {
+          (helper[helperEvent] as Function)(...args)
         }
       })
-      // .on('keyUp', (e) => {
-      //   moveable.updateRect()
+    }
+  })
+
+  /* draggable */
+  let resizeStartWidth = 0
+
+  moveable
+  .on('dragStart', ({ inputEvent, target, stop }) => {
+    if (!dActiveElement.value) return
+    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
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
+
+    inputEvent.stopPropagation()
+    inputEvent.preventDefault()
+    // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
+    if (holdPosition) {
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: 'left',
+        value: Number(holdPosition?.left),
+      })
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'left',
+      //   value: Number(holdPosition?.left),
       // })
-      .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)
-        }
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: 'top',
+        value: Number(holdPosition?.top),
       })
-      .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
-          // await this.$nextTick()
-          this.moveable.updateRect()
-          // 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
-          this.$store.commit('setShowMoveable', false)
-          setTimeout(() => {
-            this.$store.commit('setShowMoveable', true)
-          }, 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 {
-          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 }
-        }
-      })
-      .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(["%", "%"]);
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'top',
+      //   value: Number(holdPosition?.top),
+      // })
 
-        //     // 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('main')
-    // 后续可能加个节流 TODO
-    Ele?.addEventListener('scroll', () => {
-      this.moveable.updateRect()
+      holdPosition = null // important
+      setTimeout(() => {
+        historyStore.pushHistory()
+        // store.dispatch("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 && widgetStore.updateWidgetData({
+      uuid: dActiveElement.value?.uuid || "",
+      key: 'rotate',
+      value: rotate,
     })
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
-    checkMouseEvent() {
-      if (this.activeMouseEvent) {
-        this.moveable.dragStart(this.activeMouseEvent)
-        // 使用后销毁mouseevent
-        this.$store.commit('setMouseEvent', null)
+
+    // 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 (String(args.direction) === '1,0') {
+        moveable.keepRatio = false
+        moveable.scalable = false
+      }
+      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
+      }
+    } 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)
+    }
+  })
+  .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 || 0) * 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
+
+      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 {
+      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}`))
+  })
+  .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]
+      widgetStore.updateWidgetMultiple({
+        uuid: dActiveElement.value?.uuid || "",
+        data: [
+          {
+            key: 'left',
+            value: Number(dActiveElement.value?.left) + left,
+          },
+          {
+            key: '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')
+      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) {
+      widgetStore.resize(resizeTempData)
+      // store.commit('resize', resizeTempData)
+
+      resizeTempData = null
+      // await this.$nextTick()
+      moveable.updateRect()
+      // 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
+      controlStore.setShowMoveable(false)
+      // store.commit('setShowMoveable', false)
+      setTimeout(() => {
+        controlStore.setShowMoveable(true)
+        // store.commit('setShowMoveable', true)
+      }, 10);
+    }
+    try {
+      if (dActiveElement.value?.type === 'w-text') {
+        const d = e.direction || e.lastEvent.direction
+        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') {
+      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: 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 = Number(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]
+        widgetStore.updateWidgetData({
+          uuid: key,
+          key: 'left',
+          value: item.left,
+        })
+        // 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
+    // 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(moveable)
+  // -- 选择功能 END --
+
 })
+
+async function created() {
+  await nextTick()
+  const Ele = document.getElementById('main')
+  // 后续可能加个节流 TODO
+  Ele?.addEventListener('scroll', () => {
+    if (!moveable) return
+    moveable.updateRect()
+  })
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateWidgetMultiple', 'pushHistory']),
+function checkMouseEvent() {
+  if (activeMouseEvent.value && moveable) {
+    moveable.dragStart(activeMouseEvent.value)
+    // 使用后销毁mouseevent
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
+  }
+}
 </script>
 
 <style lang="less">
 @import url('./style/index.less');
-</style>
+</style>
\ No newline at end of file
diff --git a/src/components/business/moveable/Selecto.ts b/src/components/business/moveable/Selecto.ts
index bad2aea..4d4e40d 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 '@/store'
 
-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 3775c8f..557675d 100644
--- a/src/components/business/picture-selector/index.vue
+++ b/src/components/business/picture-selector/index.vue
@@ -32,10 +32,11 @@
 
 <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'
+import { useControlStore } from '@/store'
 
 type TEmits = (event: 'select', data: TGetImageListResult) => void
 
@@ -49,7 +50,9 @@ type TState = {
 
 const emits = defineEmits<TEmits>()
 
-const store = useStore()
+// 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/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 22fdf37..5cf06ac 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,15 +23,22 @@ 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, useWidgetStore } from '@/store';
 
-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, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
+const widgetStore = useWidgetStore()
+// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+
+const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
+const { dAltDown } = storeToRefs(useControlStore())
+
 
 const styleObj = computed(() => {
   return {
@@ -52,27 +64,30 @@ 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' && 
-        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',
@@ -105,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 a08dd7a..85eab6d 100644
--- a/src/components/business/save-download/CreateCover.vue
+++ b/src/components/business/save-download/CreateCover.vue
@@ -10,14 +10,19 @@
 </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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia';
+import { useCanvasStore, useWidgetStore } from '@/store';
 
-const store = useStore();
+// const store = useStore();
+// const { dZoom } = useSetupMapGetters(['dZoom'])
 
-const { dZoom } = useSetupMapGetters(['dZoom'])
+const canvasStore = useCanvasStore()
+const widgetStore = useWidgetStore()
+const { dZoom } = storeToRefs(canvasStore)
 
 
 // props: ['modelValue'], 
@@ -26,10 +31,15 @@ const { dZoom } = useSetupMapGetters(['dZoom'])
 async function createCover(cb: any) {
   const nowZoom = dZoom.value
   // 取消选中元素
-  store.dispatch('selectWidget', {
-    uuid: '-1',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
-  store.dispatch('updateZoom', 100)
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
+
+  canvasStore.updateZoom(100)
+  // store.dispatch('updateZoom', 100)
 
   const opts = {
     useCORS: true, // 跨域图片
@@ -51,7 +61,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 1d3e25a..ba56669 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,7 +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, useGroupStore, usePageStore, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { TPageState } from '@/store/design/page'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -80,20 +97,20 @@ type TParentData = {
   height?: number
 }
 
-type TSetting = {
-  width?: number
-  height?: number
-  top?: number
-  left?: number
-}
+type TSetting = Partial<TPageState>
+
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const canvasStore = useCanvasStore()
 
-const store = useStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
-const {
-  dPaddingTop, dPage, dZoom, dScreen, dWidgets,
-  dActiveElement, dSelectWidgets, dAltDown, dDraging,
-  dHoverUuid, showRotatable
-} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+
+const { dPage } = storeToRefs(usePageStore())
+const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
+const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
+const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
+
 
 let _dropIn: string | null = ''
 let _srcCache: string | null = ''
@@ -116,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
   }
@@ -129,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')) {
@@ -150,17 +171,27 @@ 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')
-  store.commit('setShowMoveable', false) // 清理上一次的选择
+
+  widgetStore.setDropOver("-1")
+  // store.dispatch('setDropOver', '-1')
+
+  // store.commit('setShowMoveable', false) // 清理上一次的选择
+  controlStore.setShowMoveable(false) // 清理上一次的选择
+
   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
@@ -184,24 +215,25 @@ 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)
+    widgetStore.addGroup(componentItem)
+    // 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)
@@ -210,8 +242,11 @@ 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)
+      if (!widget) return
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
       //   !widget.imgs && (widget.imgs = {})
@@ -220,18 +255,24 @@ 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)
-        store.commit('setShowMoveable', true) // 恢复选择
+
+        // store.commit('setShowMoveable', true) // 恢复选择
+        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', {})
@@ -240,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,
   // })
@@ -280,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,
       // })
     }
@@ -301,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 fd399e3..4946fea 100644
--- a/src/components/modules/layout/lineGuides.vue
+++ b/src/components/modules/layout/lineGuides.vue
@@ -11,8 +11,9 @@
 
 <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 '@/store';
 
 type TProps = {
   show: boolean
@@ -34,7 +35,8 @@ 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
 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 c5a811b..c8b1937 100644
--- a/src/components/modules/layout/zoomControl/index.vue
+++ b/src/components/modules/layout/zoomControl/index.vue
@@ -20,15 +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, useForceStore, usePageStore } from '@/store';
 
 const route = useRoute()
-const store = useStore()
+// const store = useStore()
 
 // 组件大小控制器
 let holder: number | undefined
@@ -46,7 +48,12 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
+// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
+const canvasStore = useCanvasStore()
+const { dPage } = storeToRefs(usePageStore())
+const { zoomScreenChange } = storeToRefs(useForceStore())
+const { dZoom, dScreen } = storeToRefs(canvasStore)
+
 
 watch(
   activezoomIndex,
@@ -75,7 +82,8 @@ watch(
     if (realValue === -1) {
       realValue = calcZoom()
     }
-    store.dispatch('updateZoom', realValue)
+    canvasStore.updateZoom(realValue)
+    // store.dispatch('updateZoom', realValue)
     // updateZoom(realValue)
     autoFixTop()
   }
@@ -134,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,
     // })
@@ -148,7 +156,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()
   }
@@ -217,7 +226,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()
@@ -255,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..f1dd271 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 '@/store'
+import { TdWidgetData } from '@/store/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 b6e38fe..755003c 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,19 +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 from '../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/store';
+import { storeToRefs } from 'pinia';
+import { TdWidgetData } from '@/store/design/widget';
+import type { TUpdateAlignData } from '@/store/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,
@@ -47,32 +56,53 @@ watch(
 )
 
 function handleCombine() {
-  store.dispatch('realCombined')
+  groupStore.realCombined()
+  // store.dispatch('realCombined')
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-function alignAction(item: AlignListData) {
-  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,
+function alignAction(item: TIconItemSelectData) {
+  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())
-  store.commit('setShowMoveable', false)
+function layerChange(newLayer: TdWidgetData[]) {
+  widgetStore.setDWidgets(newLayer.toReversed())
+  // store.commit('setDWidgets', newLayer.toReversed())
+
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 </script>
diff --git a/src/components/modules/panel/wrap/BgImgListWrap.vue b/src/components/modules/panel/wrap/BgImgListWrap.vue
index 59f8fea..a71f79f 100644
--- a/src/components/modules/panel/wrap/BgImgListWrap.vue
+++ b/src/components/modules/panel/wrap/BgImgListWrap.vue
@@ -25,9 +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, useWidgetStore } from '@/store';
 
 type TCommonPanelData = {
   color: string
@@ -55,7 +56,10 @@ type TState = {
 const { model } = defineProps<TProps>()
 
 
-const store = useStore()
+// const store = useStore()
+const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
+
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -113,51 +117,45 @@ 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',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
+  // 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,
   })
-  store.dispatch('selectWidget', {
-    uuid: '-1',
+  widgetStore.selectWidget({
+    uuid: '-1'
   })
-  // this.updatePageData({
-  //   key: 'backgroundTransform',
-  //   value: {},
-  // })
-  // this.updatePageData({
-  //   key: 'backgroundImage',
-  //   value: item.url,
-  //   pushHistory: true,
-  // })
-  // this.selectWidget({
+  // 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 b50e412..dc37318 100644
--- a/src/components/modules/panel/wrap/CompListWrap.vue
+++ b/src/components/modules/panel/wrap/CompListWrap.vue
@@ -55,11 +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, useWidgetStore } from '@/store'
 
 type TState = {
   loading: boolean
@@ -87,7 +88,10 @@ 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 }
 
 onMounted(async () => {
@@ -185,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' })
   }
 }
 
@@ -195,12 +201,14 @@ 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)
   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) => {
@@ -211,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 2b3bd2a..ca3c074 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,183 +15,218 @@
     <!-- <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 wImageSetting from '../../widgets/wImage/wImageSetting'
-import wSvg from '../../widgets/wSvg/wSvg.vue'
-import { mapActions, mapGetters } from 'vuex'
+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'
+import { TGetListData } from '@/api/material'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+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 colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
 
-    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 store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
-    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(wImageSetting))
-      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 { 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) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
+  let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
+  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
+  }
+  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)
+
+  widgetStore.setSelectItem({ data: { value: item }, type: item.type })
+  // 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 b9deaee..c64d717 100644
--- a/src/components/modules/panel/wrap/PhotoListWrap.vue
+++ b/src/components/modules/panel/wrap/PhotoListWrap.vue
@@ -3,123 +3,149 @@
  * @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 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, useWidgetStore } from '@/store'
+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(wImageSetting))
-      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 controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+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) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
+  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)
+  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
+
+  widgetStore.addWidget(setting)
+  // 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]
+
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // 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 28a9bd8..5e5c28c 100644
--- a/src/components/modules/panel/wrap/TempListWrap.vue
+++ b/src/components/modules/panel/wrap/TempListWrap.vue
@@ -23,15 +23,17 @@
 <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, useWidgetStore, useForceStore} from '@/store'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   loading: boolean
@@ -51,7 +53,14 @@ type TPageOptions = {
 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,
@@ -60,12 +69,14 @@ 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
-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 () => {})
 
@@ -109,15 +120,21 @@ 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) {
       return false
     }
   }
-  store.commit('managerEdit', false)
-  store.commit('setDWidgets', [])
+  // store.commit('managerEdit', false)
+  userStore.managerEdit(false)
+
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   setTempId(item.id)
 
@@ -131,15 +148,21 @@ async function selectItem(item: IGetTempListData) {
   const { page, widgets } = result
   console.log(widgets)
 
-  store.commit('setDPage', page)
-  store.dispatch('setTemplate', widgets)
+  pageStore.setDPage(page)
+  // store.commit('setDPage', page)
+  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 e15c67a..4b0e045 100644
--- a/src/components/modules/panel/wrap/TextListWrap.vue
+++ b/src/components/modules/panel/wrap/TextListWrap.vue
@@ -24,9 +24,12 @@
 <script lang="ts" setup>
 // const NAME = 'text-list-wrap'
 
+import { storeToRefs } from 'pinia';
+// import wText from '../../widgets/wText/wText.vue'
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store';
 
 type TBasicTextData = {
   text: string
@@ -34,20 +37,29 @@ type TBasicTextData = {
   fontWeight: string
 }
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+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
   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)
+
+  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 4d0247c..f9d197d 100644
--- a/src/components/modules/panel/wrap/ToolsListWrap.vue
+++ b/src/components/modules/panel/wrap/ToolsListWrap.vue
@@ -26,19 +26,24 @@
 // 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, useWidgetStore } from '@/store'
+
+// const store = useStore()
+const controlStore = useControlStore()
 
-const store = useStore()
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
-const { dPage } = useSetupMapGetters(['dPage'])
+const widgetStore = useWidgetStore()
+const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
   // this.getDataList()
@@ -59,12 +64,16 @@ 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
   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 7850fad..737a6e6 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'
@@ -52,6 +52,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 { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 type TProps = {
   active?: number
@@ -70,7 +72,12 @@ type TState = {
 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)
 const imgListRef = ref<typeof photoList | null>(null)
 
@@ -159,16 +166,21 @@ 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
   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)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 type controlImgParam = {
@@ -177,7 +189,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
@@ -216,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/EffectSelect/ContainerWrap.vue b/src/components/modules/settings/EffectSelect/ContainerWrap.vue
index c334188..1e10f52 100644
--- a/src/components/modules/settings/EffectSelect/ContainerWrap.vue
+++ b/src/components/modules/settings/EffectSelect/ContainerWrap.vue
@@ -37,7 +37,8 @@
 import api from '@/api'
 import { toRefs, reactive, watch, onMounted, nextTick } from 'vue'
 import { ElRadioGroup, ElRadioButton } from 'element-plus'
-import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+// import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+import {wSvgSetting} from '@/components/modules/widgets/wSvg/wSvgSetting'
 import { TGetListResult } from '@/api/material';
 
 type TProps = {
@@ -69,7 +70,7 @@ const state = reactive<TState>({
 
 const select = (value: string = '') => {
   state.visiable = false
-  const setting = JSON.parse(JSON.stringify(wSvg.setting))
+  const setting = JSON.parse(JSON.stringify(wSvgSetting))
   setting.svgUrl = value
   emit('change', setting)
 }
diff --git a/src/components/modules/settings/colorSelect.vue b/src/components/modules/settings/colorSelect.vue
index f2dbc61..0d40d60 100644
--- a/src/components/modules/settings/colorSelect.vue
+++ b/src/components/modules/settings/colorSelect.vue
@@ -17,8 +17,9 @@
 
 <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 '@/store';
 
 type TProps = {
   label?: string
@@ -52,7 +53,9 @@ const props = withDefaults(defineProps<TProps>(), {
 
 const emit = defineEmits<TEmits>()
 
-const store = useStore()
+// 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/settings/iconItemSelect.vue b/src/components/modules/settings/iconItemSelect.vue
index a185424..a6226ac 100644
--- a/src/components/modules/settings/iconItemSelect.vue
+++ b/src/components/modules/settings/iconItemSelect.vue
@@ -28,7 +28,7 @@ export type TIconItemSelectData = {
   extraIcon?: boolean,
   tip?: string
   icon?: string
-  value?: string | number
+  value?: string | number | number[] | string[]
 }
 
 type TProps = {
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/textInputArea.vue b/src/components/modules/settings/textInputArea.vue
index e82584f..de4ffa4 100644
--- a/src/components/modules/settings/textInputArea.vue
+++ b/src/components/modules/settings/textInputArea.vue
@@ -28,7 +28,7 @@ type TProps = {
   label?: string
   modelValue?: string
   editable?: boolean
-  max?: string
+  max?: string | number
 }
 
 type TEmits = {
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 025c301..de00673 100644
--- a/src/components/modules/widgets/pageStyle.vue
+++ b/src/components/modules/widgets/pageStyle.vue
@@ -56,7 +56,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'
@@ -65,7 +65,11 @@ 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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
+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'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 // import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -81,7 +85,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: {},
@@ -92,7 +98,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(
@@ -115,7 +122,6 @@ onMounted(() => {
   change()
 })
 
-// ...mapActions(['updatePageData']),
 function colorChange(e: colorChangeData) {
   if (e.mode === '渐变') {
     console.log('渐变背景');
@@ -138,7 +144,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() {
@@ -147,25 +153,24 @@ 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 {
-        store.dispatch('updatePageData', {
-          key: key,
+        pageStore.updatePageData({
+          key: key as keyof TPageState,
           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 TPageState, value: string | number) {
+  pageStore.updatePageData({
     key: key,
     value: value,
     pushHistory: true,
@@ -173,7 +178,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: {},
   })
@@ -181,7 +186,7 @@ async function uploadImgDone(img: TUploadDoneData) {
 }
 async function deleteBg() {
   _localTempBG = null
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: '',
     pushHistory: true,
@@ -203,10 +208,13 @@ async function shiftOut() {
   setting.imgUrl = state.innerElement.backgroundImage
   // store.dispatch('addWidget', setting)
   setting.uuid = `bg-${(new Date()).getTime()}`
-  store.getters.dWidgets.unshift(setting)
-  store.dispatch('selectWidget', {
-    uuid: store.getters.dWidgets[0].uuid,
+  widgetStore.dWidgets.unshift(setting)
+  widgetStore.selectWidget({
+    uuid: widgetStore.dWidgets[0].uuid,
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: store.getters.dWidgets[0].uuid,
+  // })
   deleteBg()
 }
 </script>
diff --git a/src/components/modules/widgets/wGroup/wGroup.vue b/src/components/modules/widgets/wGroup/wGroup.vue
index 063efae..d8785e5 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 '@/store';
+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..3c95609 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 '@/store'
+import { storeToRefs } from 'pinia'
+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 = {
   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 4e3fde4..4c84996 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 } from '@/pinia'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
 
 type TProps = {
   params: typeof setting
@@ -82,19 +82,27 @@ 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 { dZoom } = storeToRefs(useCanvasStore())
 const {
-  dZoom,
-  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
-} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
-// const { dZoom } = storeToRefs(useCanvasStore())
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid
+} = storeToRefs(widgetStore)
+const { dCropUuid } = storeToRefs(controlStore)
 
 // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
 const cropEdit = computed(() => {
@@ -135,7 +143,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -216,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
@@ -245,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,
@@ -297,9 +306,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)
 }
 
@@ -313,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 2199e66..b2aa7f7 100644
--- a/src/components/modules/widgets/wImage/wImageStyle.vue
+++ b/src/components/modules/widgets/wImage/wImageStyle.vue
@@ -71,7 +71,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'
@@ -85,9 +85,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 { 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
@@ -129,13 +134,17 @@ const state = reactive<TState>({
 const picBoxRef = ref<typeof picBox | null>(null)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
 
-const store = useStore()
-const {
-  dActiveElement, dMoving, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
-// computed: {
-//   ...mapGetters(['dActiveElement', 'dMoving', '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)
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
+
 
 let lastUuid: string | undefined = undefined
 let tag: boolean
@@ -150,6 +159,7 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
       imgCrop(false)
@@ -191,34 +201,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,
@@ -226,15 +240,15 @@ function finishSliceData(key: string, value: number | number[]) {
   }
 }
 
-function finish(key: string = "", value: number | number[] | string | null = "") {
-  store.dispatch('updateWidgetData', {
-    uuid: dActiveElement.value.uuid,
-    key: key,
-    value: value,
+function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
+  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,
@@ -243,30 +257,31 @@ function finish(key: string = "", value: number | number[] | string | null = "")
 
 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() {
@@ -307,8 +322,8 @@ async function changeContainer(setting: any) {
 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)
 }
 
@@ -319,12 +334,16 @@ 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)
+  
 }
 
 
 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 8ae37a1..eb920fc 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 '@/store';
+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, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
+// 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/wQrcodeSetting.ts b/src/components/modules/widgets/wQrcode/wQrcodeSetting.ts
index cf1f5ad..670c3ea 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeSetting.ts
+++ b/src/components/modules/widgets/wQrcode/wQrcodeSetting.ts
@@ -28,6 +28,7 @@ export type TWQrcodeSetting = {
     minHeight: number
     dir: string
   }
+  cropEdit?: boolean
 }
 
 export const wQrcodeSetting: TWQrcodeSetting = {
diff --git a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
index 8fee8f3..62264f2 100644
--- a/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
+++ b/src/components/modules/widgets/wQrcode/wQrcodeStyle.vue
@@ -7,43 +7,43 @@
 -->
 <template>
   <div id="w-image-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="样式设计" name="2">
         <div style="flex-wrap: nowrap" class="line-layout">
-          <el-select v-model="innerElement.dotColorType">
+          <el-select v-model="state.innerElement.dotColorType">
             <el-option v-for="ctype in localization.dotColorTypes" :key="ctype.key" :label="ctype.value" :value="ctype.key" />
           </el-select>
-          <el-select v-model="innerElement.dotType" class="selector">
+          <el-select v-model="state.innerElement.dotType" class="selector">
             <el-option v-for="dtype in localization.dotTypes" :key="dtype.key" :label="dtype.value" :value="dtype.key" />
           </el-select>
         </div>
         <div style="flex-wrap: nowrap; margin-top: 1rem" class="line-layout">
-          <color-select v-model="innerElement.dotColor" @finish="(value) => finish('dotColor', value)" />
-          <color-select v-show="innerElement.dotColorType !== 'single'" v-model="innerElement.dotColor2" @finish="(value) => finish('dotColor2', value)" />
+          <color-select v-model="state.innerElement.dotColor" @finish="(value) => finish('dotColor', value)" />
+          <color-select v-show="state.innerElement.dotColorType !== 'single'" v-model="state.innerElement.dotColor2" @finish="(value) => finish('dotColor2', value)" />
         </div>
-        <number-slider v-show="innerElement.dotColorType !== 'single'" v-model="innerElement.dotRotation" style="margin-top: 8px" label="渐变角度" :step="1" :minValue="0" :maxValue="360" @finish="(value) => finish('dotRotation', value)" />
+        <number-slider v-show="state.innerElement.dotColorType !== 'single'" v-model="state.innerElement.dotRotation" style="margin-top: 8px" label="渐变角度" :step="1" :minValue="0" :maxValue="360" @finish="(value) => finish('dotRotation', value)" />
       </el-collapse-item>
       <el-collapse-item title="内容设置" name="3">
-        <text-input-area v-model="innerElement.value" :max="40" label="" @finish="(value) => finish('value', value)" />
+        <text-input-area v-model="state.innerElement.value" :max="40" label="" @finish="(value) => finish('value', value)" />
         <br />
         <div class="slide-wrap logo__layout">
-          <img v-show="innerElement.url" :src="innerElement.url" class="logo" />
+          <img v-show="state.innerElement.url" :src="state.innerElement.url" class="logo" />
           <uploader class="options__upload" @done="uploadImgDone">
-            <el-button size="small" plain>{{ innerElement.url ? '替换图片' : '上传 Logo' }}</el-button>
+            <el-button size="small" plain>{{ state.innerElement.url ? '替换图片' : '上传 Logo' }}</el-button>
           </uploader>
-          <el-button v-show="innerElement.url" size="small" link @click="finish('url', '')">删除</el-button>
+          <el-button v-show="state.innerElement.url" size="small" link @click="finish('url', '')">删除</el-button>
         </div>
         <br />
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         </div>
       </el-collapse-item>
       <br />
@@ -54,126 +54,192 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+// const NAME = 'w-image-style'
+import { nextTick, reactive, watch } from 'vue'
+// import { useStore } from 'vuex'
 import { ElSelect, ElOption } from 'element-plus'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import textInputArea from '../../settings/textInputArea.vue'
 import colorSelect from '../../settings/colorSelect.vue'
 // import { getImage } from '@/common/methods/getImgDetail'
 import api from '@/api'
-import localization from '@/assets/data/QrCodeLocalization'
-import uploader from '@/components/common/Uploader/index.vue'
+import localization, { QrCodeLocalizationData } from '@/assets/data/QrCodeLocalization'
+import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 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, useForceStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
-export default {
-  name: NAME,
-  components: { ElSelect, ElOption, numberInput, numberSlider, iconItemSelect, textInputArea, colorSelect, uploader },
-  data() {
-    return {
-      activeNames: ['2', '3', '4'],
-      innerElement: {},
-      tag: false,
-      ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
-      layerIconList,
-      alignIconList,
-      localization,
+type TState = {
+  activeNames: string[]
+  innerElement: TWQrcodeSetting,
+  tag: boolean,
+  ingoreKeys: string[],
+  layerIconList: TIconItemSelectData[],
+  alignIconList: TIconItemSelectData[],
+  localization: QrCodeLocalizationData,
+}
+
+const state = reactive<TState>({
+  activeNames: ['2', '3', '4'],
+  innerElement: JSON.parse(JSON.stringify(wQrcodeSetting)),
+  tag: false,
+  ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
+  layerIconList,
+  alignIconList,
+  localization,
+})
+
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+
+
+// const {
+//   dActiveElement, dWidgets
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
+
+let lastUuid: string | null = null
+
+watch(
+  () => dActiveElement.value,
+  (newValue, oldValue) => {
+    change()
+    if (!newValue) return
+    // 失焦取消编辑模式
+    if (Number(newValue.uuid) == -1) {
+      state.innerElement.cropEdit = false
+      widgetStore.updateWidgetData({
+        uuid: lastUuid ?? "",
+        key: 'cropEdit',
+        value: false,
+      })
+      // store.dispatch("updateWidgetData", {
+      //   uuid: lastUuid,
+      //   key: 'cropEdit',
+      //   value: false,
+      // })
+    } else {
+      lastUuid = newValue.uuid
     }
   },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+  { deep: true }
+)
+
+watch(
+  () => state.innerElement,
+  (newValue, oldValue) => {
+    changeValue()
   },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-        // 失焦取消编辑模式
-        if (newValue.uuid == -1) {
-          this.innerElement.cropEdit = false
-          this.updateWidgetData({
-            uuid: this.lastUuid,
-            key: 'cropEdit',
-            value: false,
-          })
-        } else {
-          this.lastUuid = newValue.uuid
-        }
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
-          })
-        }
-      }
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
-        pushHistory: true,
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex', 'addWidget'])
+
+function change() {
+  state.tag = true
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+}
+function changeValue() {
+  if (state.tag) {
+    state.tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    const itemKey = key as keyof TWQrcodeSetting
+    if (state.ingoreKeys.indexOf(key) !== -1) {
+      (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'],
       })
-    },
-    layerAction(item) {
-      console.log(item)
-      this.updateLayerIndex({
-        uuid: this.dActiveElement.uuid,
-        value: item.value,
-      })
-    },
-    async alignAction(item) {
-      this.updateAlign({
-        align: item.value,
-        uuid: this.dActiveElement.uuid,
-      })
-      await this.$nextTick()
-      this.$store.commit('updateRect')
-    },
-    async uploadImgDone(img) {
-      this.$store.commit('setShowMoveable', false)
-      await api.material.addMyPhoto(img)
-      // this.innerElement.width = img.width
-      // this.innerElement.height = img.height * (this.innerElement.width / img.width)
-      this.innerElement.url = img.url
-      this.$store.commit('setShowMoveable', true)
-    },
-  },
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: key,
+      //   value: state.innerElement[itemKey],
+      // })
+    }
+  }
+}
+
+function finish(key: string, value: number | number[] | string) {
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || '',
+    key: key as TUpdateWidgetPayload['key'],
+    value: value,
+    pushHistory: true,
+  })
+  // store.dispatch("updateWidgetData", {
+  //   uuid: dActiveElement.value.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  console.log(item)
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || "",
+    value: item.value as number,
+  })
+  // store.dispatch("updateLayerIndex", {
+  //   uuid: dActiveElement.value.uuid,
+  //   value: item.value,
+  // })
+}
+
+async function alignAction(item: TIconItemSelectData) {
+  widgetStore.updateAlign({
+    align: item.value as TUpdateAlignData['align'],
+    uuid: dActiveElement.value?.uuid || "",
+  })
+  // store.dispatch("updateAlign", {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
+
+  await nextTick()
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
+}
+
+async function uploadImgDone(img: TUploadDoneData) {
+  // 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)
+  controlStore.setShowMoveable(true)
 }
 </script>
 
diff --git a/src/components/modules/widgets/wSvg/wSvg.vue b/src/components/modules/widgets/wSvg/wSvg.vue
index 5b06ad8..9d4d9c7 100644
--- a/src/components/modules/widgets/wSvg/wSvg.vue
+++ b/src/components/modules/widgets/wSvg/wSvg.vue
@@ -4,10 +4,10 @@
 <template>
   <div
     :id="params.uuid"
-    ref="widget"
+    ref="widgetRef"
     class="w-svg"
     :style="{
-      position,
+      position: state.position,
       left: params.left - parent.left + 'px',
       top: params.top - parent.top + 'px',
       width: params.width + 'px',
@@ -17,300 +17,344 @@
   ></div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // svg
-const NAME = 'w-svg'
+// const NAME = 'w-svg'
+// import { mapGetters, mapActions, useStore } from 'vuex'
+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 '@/store/design/widget/actions/widget';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-import { mapGetters, mapActions } from 'vuex'
+type TProps = {
+  params: TWSvgSetting
+  parent: {
+    left: number
+    top: number
+  }
+}
 
-export default {
-  name: NAME,
-  setting: {
-    name: '矢量图形',
-    type: NAME,
-    uuid: -1,
-    width: 100,
-    height: 100,
-    colors: [],
-    left: 0,
-    top: 0,
-    // zoom: 1.5,
-    transform: '',
-    radius: 0,
-    opacity: 1,
-    parent: '-1',
-    svgUrl: '',
-    setting: [],
-    record: {
-      width: 0,
-      height: 0,
-      minWidth: 10,
-      minHeight: 10,
-    },
+type TState = {
+  position: CSSProperties['position'], // 'absolute'relative
+  editBoxStyle: CSSProperties,
+  editBoxs: Record<string, any>,
+  editingKey: string,
+  cropWidgetXY: Record<string, any>, // 裁剪框移动作用
+  attrRecord: Record<string, any>, // 记录可更改的属性
+  svgImg: Record<string, any> | null
+}
+
+const props = defineProps<TProps>()
+const state = reactive<TState>({
+  position: 'absolute', // 'absolute'relative
+  editBoxStyle: {
+    transformOrigin: 'center',
   },
-  props: ['params', 'parent'],
-  data() {
-    return {
-      position: 'absolute', // 'absolute'relative
-      editBoxStyle: {
-        transformOrigin: 'center',
-      },
-      editBoxs: {},
-      editingKey: '',
-      cropWidgetXY: {}, // 裁剪框移动作用
-      attrRecord: {}, // 记录可更改的属性
+  editBoxs: {},
+  editingKey: '',
+  cropWidgetXY: {}, // 裁剪框移动作用
+  attrRecord: {}, // 记录可更改的属性
+  svgImg: null
+})
+// 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)
+
+let svgElements: Record<string, any>[] | null = null
+let viewBox = { width: 0, height: 0 }
+
+const tZoom = computed(() => {
+  return props.params.zoom
+})
+const cropEdit = computed(() => {
+  return props.params.cropEdit
+})
+const imgChange = computed(() => {
+  return props.params.imgUrl
+})
+
+watch(
+  () => props.params,
+  () => {
+    attrsChange()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => tZoom.value,
+  async () => {
+    await nextTick()
+    updateRecord()
+  }
+)
+
+watch(
+  () => imgChange.value,
+  () => {
+    if (!state.svgImg) return
+    state.svgImg.attr({
+      'xlink:href': props.params.imgUrl,
+    })
+  }
+)
+
+watch(
+  () => cropEdit.value,
+  (val) => {
+    const el = document.getElementById(props.params.uuid)
+    if (val) {
+      el?.addEventListener('mousedown', touchstart, false)
+    } else {
+      el?.removeEventListener('mousedown', touchstart, false)
     }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
-    tZoom() {
-      return this.params.zoom
-    },
-    cropEdit() {
-      return this.params.cropEdit
-    },
-    imgChange() {
-      return this.params.imgUrl
-    },
-  },
-  watch: {
-    params: {
-      async handler(nval) {
-        this.attrsChange()
-      },
-      immediate: true,
-      deep: true,
-    },
-    async tZoom() {
-      await this.$nextTick()
-      this.updateRecord()
-    },
-    imgChange() {
-      // TODO 更新所有图片
-      this.svgImg.attr({
-        'xlink:href': this.params.imgUrl,
-      })
-    },
-    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)
-      }
-    },
-  },
-  updated() {
-    this.updateRecord()
-    this.$store.commit('updateRect')
-  },
-  async mounted() {
-    await this.$nextTick()
-    await this.loadSvg()
-    this.updateRecord()
-    // document.getElementById(this.params.uuid).addEventListener('mousedown', this.touchstart, false)
-    document.addEventListener('mouseup', this.touchend, false)
-    this.params.transform && (this.$refs.widget.style.transform = this.params.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) {
-      // TODO move start
-      // const imgKey = e.target.getAttribute('img-key')
-      // this.editingKey = imgKey
-      // this.editBoxs[this.editingKey] = {
-      //   transformOrigin: 'center',
-      // }
-      // const editBox = this.$refs[this.params.uuid + '_ebox_' + imgKey]
-      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)
-      // document.removeEventListener('mouseup', () => {}, true)
-    },
-    handlemousemove(e) {
-      e.stopPropagation()
-      e.preventDefault()
-      const { left, top } = this.move(e)
-      // TODO
-      this.editBoxStyle.left = left + 'px'
-      this.editBoxStyle.top = top + 'px'
-      // this.editBoxs[this.editingKey].left = left + 'px'
-      // this.editBoxs[this.editingKey].top = top + 'px'
-      const { width, height } = this.params
-      const { width: vWidth, height: vHeight } = this.viewBox
-      const params = {
-        x: left / (width / vWidth) / this.params.zoom,
-        y: top / (height / vHeight) / this.params.zoom,
-      }
-      // this.svgImg.attr(params)
-      this.changeFinish('x', params.x)
-      this.changeFinish('y', params.y)
-      // console.log('-----', left / (width / vWidth) / this.params.zoom)
-    },
-    loadSvg() {
-      // console.log(this.params)
-      const _this = this
-      const Snap = window.Snap
-      return new Promise((resolve) => {
-        Snap.load(
-          this.params.svgUrl,
-          function (svg) {
-            let svg2 = Snap(svg.node)
-            // let item = svg2.select('circle')
-            // item.attr({
-            //   fill: 'rgb(255, 0, 0)',
-            // })
-            // console.log(item.attr('fill'))
+  }
+)
 
-            let items = svg2.node.childNodes
-            svg2.node.removeAttribute('width')
-            svg2.node.removeAttribute('height')
-            svg2.node.setAttribute('style', 'height: inherit;width: inherit;')
-            // svg2.node.setAttribute('height', 'inherit')
-            _this.svgElements = []
-            const colorsObj = _this.color2obj()
+onUpdated(() => {
+  updateRecord()
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
+})
 
-            deepElement(items)
+onMounted(async () => {
+  await nextTick()
+  await loadSvg()
+  updateRecord()
+  // document.getElementById(props.params.uuid)?.addEventListener('mousedown', touchstart, false)
+  document.addEventListener('mouseup', touchend, false)
+  if (!widgetRef.value) return
+  props.params.transform && (widgetRef.value.style.transform = props.params.transform)
+  props.params.rotate && (widgetRef.value.style.transform += `rotate(${props.params.rotate})`)
+})
 
-            function deepElement(els) {
-              // 判断是NodeList对象则继续递归，否则进入元素处理工厂
-              if (els.item) {
-                els.forEach((element) => {
-                  elementFactory(element)
-                  if (element.childNodes.length > 0) {
-                    element.childNodes.forEach((element) => {
-                      deepElement(element)
-                    })
-                  }
-                })
-              } else {
-                elementFactory(els)
-              }
-            }
-            // 元素工厂: 遍历元素中是否存在可自定义的颜色属性
-            function elementFactory(element) {
-              const attrsColor = {}
-              try {
-                element.attributes.forEach((attr) => {
-                  if (colorsObj[attr.value]) {
-                    // console.log(attr.name, colorsObj[attr.value])
-                    attr.value = colorsObj[attr.value]
-                    attrsColor[attr.name] = _this.params.colors.findIndex((x) => x == attr.value)
-                  }
-                })
-              } catch (e) {}
-              if (JSON.stringify(attrsColor) !== '{}') {
-                _this.svgElements.push({
-                  item: element,
-                  attrsColor,
+onBeforeMount(() => {
+  // document.removeEventListener('mouseup', touchend, false)
+})
+
+// ...mapActions(['updateWidgetData'])
+
+function touchstart(e: MouseEvent) {
+  // TODO move start
+  // const imgKey = e.target.getAttribute('img-key')
+  // this.editingKey = imgKey
+  // this.editBoxs[this.editingKey] = {
+  //   transformOrigin: 'center',
+  // }
+  // const editBox = this.$refs[this.params.uuid + '_ebox_' + imgKey]
+  // const editBox = this.$refs[this.params.uuid + '_ebox']
+  const editBox = document.getElementById(props.params.uuid + '_ebox')
+  if (editBox) {
+    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)
+  // document.removeEventListener('mouseup', () => {}, true)
+}
+
+function handlemousemove(e: MouseEvent) {
+  e.stopPropagation()
+  e.preventDefault()
+  const { left, top } = move(e)
+  // TODO
+  state.editBoxStyle.left = left + 'px'
+  state.editBoxStyle.top = top + 'px'
+  // this.editBoxs[this.editingKey].left = left + 'px'
+  // this.editBoxs[this.editingKey].top = top + 'px'
+  const { width, height } = props.params
+  const { width: vWidth, height: vHeight } = viewBox
+  const params = {
+    x: left / (width / vWidth) / (props.params.zoom || 0),
+    y: top / (height / vHeight) / (props.params.zoom || 0),
+  }
+  // this.svgImg.attr(params)
+  changeFinish('x', params.x)
+  changeFinish('y', params.y)
+  // console.log('-----', left / (width / vWidth) / this.params.zoom)
+}
+
+function loadSvg() {
+  // console.log(this.params)
+  const Snap = (window as any).Snap
+  return new Promise<void>((resolve) => {
+    Snap.load(
+      props.params.svgUrl,
+      function (svg: Record<string, any>) {
+        let svg2 = Snap(svg.node)
+        // let item = svg2.select('circle')
+        // item.attr({
+        //   fill: 'rgb(255, 0, 0)',
+        // })
+        // console.log(item.attr('fill'))
+
+        let items = svg2.node.childNodes
+        svg2.node.removeAttribute('width')
+        svg2.node.removeAttribute('height')
+        svg2.node.setAttribute('style', 'height: inherit;width: inherit;')
+        // svg2.node.setAttribute('height', 'inherit')
+        svgElements = []
+        const colorsObj = color2obj()
+
+        deepElement(items)
+
+        function deepElement(els: Record<string, any>) {
+          // 判断是NodeList对象则继续递归，否则进入元素处理工厂
+          if (els.item) {
+            els.forEach((element: Record<string, any>) => {
+              elementFactory(element)
+              if (element.childNodes.length > 0) {
+                element.childNodes.forEach((element: Record<string, any>) => {
+                  deepElement(element)
                 })
               }
-              // console.log(element.attributes, element.getAttribute('fill'), _this.params.colors)
-            }
-
-            // _this.viewBox = svg2.node.viewBox.baseVal
-            // _this.svgImg = img
-
-            // img.attr({
-            //   width: '100%',
-            //   height: '100%',
-            //   transform: '',
-            //   'xlink:href': _this.params.imgUrl || '',
-            // })
-            const el = this || _this.$refs.widget
-            // svg.node.classList.add('svg__box')
-            el.appendChild(svg.node)
-            resolve()
-          },
-          document.getElementById(this.params.uuid),
-        )
-      })
-    },
-    color2obj() {
-      const obj = {}
-      for (let i = 0; i < this.params.colors.length; i++) {
-        obj[`{{colors[${i}]}}`] = this.params.colors[i]
-      }
-      return obj
-    },
-    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()
-    },
-    updateZoom() {
-      // TODO
-      this.editBoxStyle.transform = `scale(${this.params.zoom})`
-      // this.editingKey && (this.editBoxs[this.editingKey].transform = `scale(${this.params.zoom})`)
-      if (this.svgImg) {
-        const { x, y } = this.params
-        this.svgImg.attr({
-          x: x || 0,
-          y: y || 0,
-          style: `transform-origin: center;transform: scale(${this.params.zoom})`,
-        })
-        // 根据图片位置设置回editBox的位置
-        const { width, height } = this.params
-        const { width: vWidth, height: vHeight } = this.viewBox
-        const params = {
-          left: x * (width / vWidth) * this.params.zoom,
-          top: y * (height / vHeight) * this.params.zoom,
-        }
-        // TODO
-        this.editBoxStyle.left = params.left + 'px'
-        this.editBoxStyle.top = params.top + 'px'
-        // if (this.editingKey) {
-        //   this.editBoxs[this.editingKey].left = params.left + 'px'
-        //   this.editBoxs[this.editingKey].top = params.top + 'px'
-        // }
-      }
-    },
-    changeFinish(key, value) {
-      this.updateWidgetData({
-        uuid: this.params.uuid,
-        key: key,
-        value: value,
-        pushHistory: true,
-      })
-    },
-    move(payload) {
-      // const widgetXY = { x: this.cropWidgetXY.x / this.dZoom, y: this.cropWidgetXY.y / this.dZoom }
-      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)
-      return { left, top }
-    },
-    attrsChange() {
-      if (this.dActiveElement.uuid === this.params.uuid && this.svgElements) {
-        for (const element of this.svgElements) {
-          const { item, attrsColor } = element
-          for (const key in attrsColor) {
-            if (Object.hasOwnProperty.call(attrsColor, key)) {
-              const color = this.params.colors[attrsColor[key]]
-              item.setAttribute(key, color)
-            }
+            })
+          } else {
+            elementFactory(els)
           }
         }
+        // 元素工厂: 遍历元素中是否存在可自定义的颜色属性
+        function elementFactory(element: Record<string, any>) {
+          const attrsColor: Record<string, any> = {}
+          try {
+            element.attributes.forEach((attr: Record<string, any>) => {
+              if (colorsObj[attr.value]) {
+                // console.log(attr.name, colorsObj[attr.value])
+                attr.value = colorsObj[attr.value]
+                attrsColor[attr.name] = props.params.colors.findIndex((x) => x == attr.value)
+              }
+            })
+          } catch (e) {}
+          if (JSON.stringify(attrsColor) !== '{}' && svgElements) {
+            svgElements.push({
+              item: element,
+              attrsColor,
+            })
+          }
+          // console.log(element.attributes, element.getAttribute('fill'), _this.params.colors)
+        }
+
+        // _this.viewBox = svg2.node.viewBox.baseVal
+        // _this.svgImg = img
+
+        // img.attr({
+        //   width: '100%',
+        //   height: '100%',
+        //   transform: '',
+        //   'xlink:href': _this.params.imgUrl || '',
+        // })
+        if (widgetRef.value) {
+          // svg.node.classList.add('svg__box')
+          widgetRef.value.appendChild(svg.node)
+        }
+        resolve()
+      },
+      document.getElementById(props.params.uuid),
+    )
+  })
+}
+
+function color2obj() {
+  const obj: Record<string, any> = {}
+  for (let i = 0; i < props.params.colors.length; i++) {
+    obj[`{{colors[${i}]}}`] = props.params.colors[i]
+  }
+  return obj
+}
+
+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()
+}
+
+function updateZoom() {
+  // TODO
+  state.editBoxStyle.transform = `scale(${props.params.zoom})`
+  // this.editingKey && (this.editBoxs[this.editingKey].transform = `scale(${this.params.zoom})`)
+  if (state.svgImg) {
+    const { x = 0, y = 0 } = props.params
+    state.svgImg.attr({
+      x: x ?? 0,
+      y: y ?? 0,
+      style: `transform-origin: center;transform: scale(${props.params.zoom})`,
+    })
+    // 根据图片位置设置回editBox的位置
+    const { width, height } = props.params
+    const { width: vWidth, height: vHeight } = viewBox
+    const params = {
+      left: x * (width / vWidth) * (props.params.zoom || 0),
+      top: y * (height / vHeight) * (props.params.zoom || 0),
+    }
+    // TODO
+    state.editBoxStyle.left = params.left + 'px'
+    state.editBoxStyle.top = params.top + 'px'
+    // if (this.editingKey) {
+    //   this.editBoxs[this.editingKey].left = params.left + 'px'
+    //   this.editBoxs[this.editingKey].top = params.top + 'px'
+    // }
+  }
+}
+
+function changeFinish(key: string, value: number) {
+  widgetStore.updateWidgetData({
+    uuid: props.params.uuid,
+    key: key as TUpdateWidgetPayload['key'],
+    value: value,
+    pushHistory: true,
+  })
+  // store.dispatch("updateWidgetData", {
+  //   uuid: props.params.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function move(payload: Record<string, any>) {
+  // const widgetXY = { x: this.cropWidgetXY.x / this.dZoom, y: this.cropWidgetXY.y / this.dZoom }
+  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)
+  return { left, top }
+}
+
+function attrsChange() {
+  if (dActiveElement.value?.uuid === props.params.uuid && svgElements) {
+    for (const element of svgElements) {
+      const { item, attrsColor } = element
+      for (const key in attrsColor) {
+        if (Object.hasOwnProperty.call(attrsColor, key)) {
+          const color = props.params.colors[attrsColor[key]]
+          item.setAttribute(key, color)
+        }
       }
-    },
-  },
+    }
+  }
 }
 </script>
 
diff --git a/src/components/modules/widgets/wSvg/wSvgSetting.ts b/src/components/modules/widgets/wSvg/wSvgSetting.ts
new file mode 100644
index 0000000..a730c54
--- /dev/null
+++ b/src/components/modules/widgets/wSvg/wSvgSetting.ts
@@ -0,0 +1,54 @@
+
+export type TWSvgSetting = {
+  name: string,
+  type: string,
+  uuid: string
+  width: number
+  height: number
+  colors: [],
+  left: number
+  top: number
+  // zoom: 1.5,
+  transform: string
+  radius: number
+  opacity: number
+  parent: string
+  svgUrl: string
+  setting: [],
+  record: {
+    width: number
+    height: number
+    minWidth: number
+    minHeight: number
+  },
+  zoom?: number
+  cropEdit?: boolean
+  imgUrl?: string
+  rotate?: number
+  x?: number
+  y?: number
+}
+
+export const wSvgSetting = {
+  name: '矢量图形',
+  type: "w-svg",
+  uuid: `-1`,
+  width: 100,
+  height: 100,
+  colors: [],
+  left: 0,
+  top: 0,
+  // zoom: 1.5,
+  transform: '',
+  radius: 0,
+  opacity: 1,
+  parent: '-1',
+  svgUrl: '',
+  setting: [],
+  record: {
+    width: 0,
+    height: 0,
+    minWidth: 10,
+    minHeight: 10,
+  },
+}
diff --git a/src/components/modules/widgets/wSvg/wSvgStyle.vue b/src/components/modules/widgets/wSvg/wSvgStyle.vue
index f838a91..e48f1ea 100644
--- a/src/components/modules/widgets/wSvg/wSvgStyle.vue
+++ b/src/components/modules/widgets/wSvg/wSvgStyle.vue
@@ -7,22 +7,22 @@
 -->
 <template>
   <div id="w-image-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <el-collapse-item title="设置颜色" name="2">
-        <div v-for="(c, ci) in innerElement.colors" :key="ci + 'c'">
-          <color-select v-model="innerElement.colors[ci]" @finish="(value) => colorFinish('colors')" />
+        <div v-for="(c, ci) in state.innerElement.colors" :key="ci + 'c'">
+          <color-select v-model="state.innerElement.colors[ci]" @finish="(value) => colorFinish('colors')" />
         </div>
         <br />
         <div class="slide-wrap">
-          <number-slider v-model="innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
+          <number-slider v-model="state.innerElement.opacity" label="不透明" :step="0.01" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         </div>
       </el-collapse-item>
       <br />
@@ -33,100 +33,149 @@
   </div>
 </template>
 
-<script>
+<script lang="ts" setup>
 // 图片组件样式
-const NAME = 'w-image-style'
-import { mapGetters, mapActions } from 'vuex'
+// const NAME = 'w-image-style'
+import { reactive, watch } from 'vue'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 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 { storeToRefs } from 'pinia'
+import { useControlStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
-export default {
-  name: NAME,
-  components: { numberInput, numberSlider, iconItemSelect, colorSelect },
-  data() {
-    return {
-      activeNames: ['2', '3', '4'],
-      innerElement: {},
-      tag: false,
-      ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
-      layerIconList,
-      alignIconList,
+type TState = {
+  activeNames: string[]
+  innerElement: TWSvgSetting
+  tag: boolean
+  ingoreKeys: string[]
+  layerIconList: TIconItemSelectData[]
+  alignIconList: TIconItemSelectData[]
+}
+
+const state = reactive<TState>({
+  activeNames: ['2', '3', '4'],
+  innerElement: JSON.parse(JSON.stringify(wSvgSetting)),
+  tag: false,
+  ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'radiusTopLeft', 'radiusTopRight', 'radiusBottomLeft', 'radiusBottomRight'],
+  layerIconList,
+  alignIconList,
+})
+// const store = useStore()
+const widgetStore = useWidgetStore()
+// const {
+//   dActiveElement
+// } = useSetupMapGetters(['dActiveElement'])
+const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement } = storeToRefs(widgetStore)
+
+// ...mapGetters(['dActiveElement', 'dMoving']),
+
+watch(
+  () => dActiveElement.value,
+  () => {
+    change()
+  },
+  { deep: true }
+)
+
+watch(
+  () => state.innerElement,
+  () => {
+    changeValue()
+  },
+  { deep: true }
+)
+
+function created() {
+  change()
+}
+
+created()
+
+// ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex']),
+
+function change() {
+  state.tag = true
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+}
+
+function changeValue() {
+  if (state.tag) {
+    state.tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  for (let key in state.innerElement) {
+    const itemKey = key as keyof TWSvgSetting
+    if (state.ingoreKeys.indexOf(itemKey) !== -1) {
+      (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'],
+      })
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: key,
+      //   value: state.innerElement[itemKey],
+      // })
     }
-  },
-  computed: {
-    ...mapGetters(['dActiveElement', 'dMoving']),
-  },
-  watch: {
-    dActiveElement: {
-      handler(newValue, oldValue) {
-        this.change()
-      },
-      deep: true,
-    },
-    innerElement: {
-      handler(newValue, oldValue) {
-        this.changeValue()
-      },
-      deep: true,
-    },
-  },
-  created() {
-    this.change()
-  },
-  methods: {
-    ...mapActions(['updateWidgetData', 'updateAlign', 'updateLayerIndex']),
-    change() {
-      this.tag = true
-      this.innerElement = JSON.parse(JSON.stringify(this.dActiveElement))
-    },
-    changeValue() {
-      if (this.tag) {
-        this.tag = false
-        return
-      }
-      if (this.dMoving) {
-        return
-      }
-      for (let key in this.innerElement) {
-        if (this.ingoreKeys.indexOf(key) !== -1) {
-          this.dActiveElement[key] = this.innerElement[key]
-        } else if (key !== 'setting' && key !== 'record' && this.innerElement[key] !== this.dActiveElement[key]) {
-          this.updateWidgetData({
-            uuid: this.dActiveElement.uuid,
-            key: key,
-            value: this.innerElement[key],
-          })
-        }
-      }
-    },
-    colorFinish(key) {
-      this.finish(key, this.innerElement[key])
-    },
-    finish(key, value) {
-      this.updateWidgetData({
-        uuid: this.dActiveElement.uuid,
-        key: key,
-        value: value,
-        pushHistory: true,
-      })
-    },
-    layerAction(item) {
-      this.updateLayerIndex({
-        uuid: this.dActiveElement.uuid,
-        value: item.value,
-      })
-    },
-    alignAction(item) {
-      this.updateAlign({
-        align: item.value,
-        uuid: this.dActiveElement.uuid,
-      })
-    },
-  },
+  }
+}
+
+function colorFinish(key: keyof TWSvgSetting) {
+  finish(key, state.innerElement[key])
+}
+
+function finish(key: string, value: any) {
+  widgetStore.updateWidgetData({
+    uuid: dActiveElement.value?.uuid || '',
+    key: key as TUpdateWidgetPayload['key'],
+    value: value,
+    pushHistory: true,
+  })
+  // store.dispatch("updateWidgetData", {
+  //   uuid: dActiveElement.value.uuid,
+  //   key: key,
+  //   value: value,
+  //   pushHistory: true,
+  // })
+}
+
+function layerAction(item: TIconItemSelectData) {
+  widgetStore.updateLayerIndex({
+    uuid: dActiveElement.value?.uuid || '',
+    value: Number(item.value),
+  })
+  // store.dispatch("updateLayerIndex", {
+  //   uuid: dActiveElement.value.uuid,
+  //   value: item.value,
+  // })
+}
+
+function alignAction(item: TIconItemSelectData) {
+  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/wText/pageFontsFilter.ts b/src/components/modules/widgets/wText/pageFontsFilter.ts
index dede5df..45c1892 100644
--- a/src/components/modules/widgets/wText/pageFontsFilter.ts
+++ b/src/components/modules/widgets/wText/pageFontsFilter.ts
@@ -5,18 +5,20 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-10-14 20:29:26
  */
-import store from '@/store'
+// import store from '@/store'
+import { useWidgetStore } from '@/store'
 import { toRaw } from 'vue'
 export default () => {
-  const collector = new Set()
-  const fonts: any = {}
-  const { dWidgets: widgets } = store.getters
+  const widgetStore = useWidgetStore()
+  const collector = new Set<string>()
+  const fonts: Record<string, any> = {}
+  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: any) => fonts[id])
+  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..7e61938 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 '@/store'
 
 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/wTextSetting.ts b/src/components/modules/widgets/wText/wTextSetting.ts
index 840f9e7..cce11b4 100644
--- a/src/components/modules/widgets/wText/wTextSetting.ts
+++ b/src/components/modules/widgets/wText/wTextSetting.ts
@@ -60,6 +60,9 @@ export type TwTextData = {
       y: number
     }
   }[]
+  width?: number
+  height?: number
+  degree?: number
 }
 
 export const wTextSetting: TwTextData = {
diff --git a/src/components/modules/widgets/wText/wTextStyle.vue b/src/components/modules/widgets/wText/wTextStyle.vue
index 28175cf..deafbf6 100644
--- a/src/components/modules/widgets/wText/wTextStyle.vue
+++ b/src/components/modules/widgets/wText/wTextStyle.vue
@@ -1,18 +1,18 @@
 <template>
   <div id="w-text-style">
-    <el-collapse v-model="activeNames">
+    <el-collapse v-model="state.activeNames">
       <el-collapse-item title="位置尺寸" name="1">
         <div class="line-layout">
-          <number-input v-model="innerElement.left" label="X" @finish="(value) => finish('left', value)" />
-          <number-input v-model="innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
-          <number-input v-model="innerElement.width" style="margin-top: 0.5rem" label="宽" :editable="true" @finish="(value) => finish('width', value)" />
-          <number-input v-model="innerElement.height" style="margin-top: 0.5rem" label="高" :editable="true" @finish="(value) => finish('height', value)" />
+          <number-input v-model="state.innerElement.left" label="X" @finish="(value) => finish('left', value)" />
+          <number-input v-model="state.innerElement.top" label="Y" @finish="(value) => finish('top', value)" />
+          <number-input v-model="state.innerElement.width" style="margin-top: 0.5rem" label="宽" :editable="true" @finish="(value) => finish('width', value)" />
+          <number-input v-model="state.innerElement.height" style="margin-top: 0.5rem" label="高" :editable="true" @finish="(value) => finish('height', value)" />
         </div>
       </el-collapse-item>
       <!-- <el-collapse-item title="样式设置" name="2"> -->
       <div class="line-layout style-item">
-        <value-select v-model="innerElement.fontClass" label="文字" :data="fontClassList" inputWidth="152px" :readonly="true" @finish="(font) => finish('fontClass', font)" />
-        <value-select v-model="innerElement.fontSize" label="大小" suffix="px" :data="fontSizeList" @finish="(value) => finish('fontSize', value)" />
+        <value-select v-model="state.innerElement.fontClass" label="文字" :data="state.fontClassList" inputWidth="152px" :readonly="true" @finish="(font) => finish('fontClass', font)" />
+        <value-select v-model="state.innerElement.fontSize" label="大小" suffix="px" :data="state.fontSizeList" @finish="(value) => finish('fontSize', value)" />
       </div>
 
       <icon-item-select class="style-item" :data="styleIconList1" @finish="textStyleAction" />
@@ -24,232 +24,276 @@
       </div> -->
       <!-- <el-collapse-item title="位置尺寸" name="1"> -->
       <div class="style-item slide-wrap">
-        <number-slider v-model="innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-innerElement.fontSize" :maxValue="innerElement.fontSize * 2" @finish="(value) => finish('letterSpacing', value)" />
-        <number-slider v-model="innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" />
+        <number-slider v-model="state.innerElement.letterSpacing" style="font-size: 14px" label="字距" labelWidth="40px" :step="0.05" :minValue="-state.innerElement.fontSize" :maxValue="state.innerElement.fontSize * 2" @finish="(value) => finish('letterSpacing', value)" />
+        <number-slider v-model="state.innerElement.lineHeight" style="font-size: 14px" label="行距" labelWidth="40px" :step="0.05" :minValue="0" :maxValue="2.5" @finish="(value) => finish('lineHeight', value)" />
       </div>
       <!-- </el-collapse-item> -->
 
       <div style="flex-wrap: nowrap" class="line-layout style-item">
-        <color-select v-model="innerElement.color" label="颜色" @finish="(value) => finish('color', value)" />
+        <color-select v-model="state.innerElement.color" label="颜色" @finish="(value) => finish('color', value)" />
         <!-- <color-select v-model="innerElement.backgroundColor" label="背景颜色" @finish="(value) => finish('backgroundColor', value)" /> -->
       </div>
       <div class="line-layout style-item">
-        <effect-wrap v-model="innerElement.textEffects" :data="innerElement" :degree="innerElement.degree" @select="selectTextEffect" />
+        <effect-wrap v-model="state.innerElement.textEffects" :data="state.innerElement" :degree="state.innerElement.degree" @select="selectTextEffect" />
       </div>
       <icon-item-select class="style-item" :data="layerIconList" @finish="layerAction" />
       <icon-item-select class="style-item" :data="alignIconList" @finish="alignAction" />
 
       <!-- v-show="!innerElement.editable"  -->
       <div style="margin-top: 10px" class="line-layout style-item">
-        <text-input-area v-model="innerElement.text" @finish="(value) => finish('text', value)" />
+        <text-input-area v-model="state.innerElement.text" @finish="(value) => finish('text', value)" />
       </div>
       <!-- </el-collapse-item> -->
     </el-collapse>
   </div>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 // 文本组件样式
 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 } from '@/assets/data/TextIconsData'
+import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData'
 import layerIconList from '@/assets/data/LayerIconList'
 import numberInput from '../../settings/numberInput.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import colorSelect from '../../settings/colorSelect.vue'
-import iconItemSelect from '../../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import textInputArea from '../../settings/textInputArea.vue'
 import valueSelect from '../../settings/valueSelect.vue'
 import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
-import usePageFontsFilter from './pageFontsFilter.ts'
+import usePageFontsFilter from './pageFontsFilter'
+import { wTextSetting ,TwTextData } from './wTextSetting';
+import { storeToRefs } from 'pinia';
+import { useControlStore, useForceStore, useWidgetStore } from '@/store';
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
+import { TUpdateAlignData } from '@/store/design/widget/actions/align';
 
-export default defineComponent({
-  name: NAME,
-    components: { numberInput, colorSelect, iconItemSelect, textInputArea, valueSelect, effectWrap, numberSlider },
-    setup() {
-      const store = useStore()
-      const route = useRoute()
-      const state = reactive({
-        activeNames: [],
-        innerElement: {},
-        tag: false,
-        ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
-        fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
-        fontClassList: [], // 不能设空字体系统默认字体，因为截图服务的默认字体无法保证一致
-        lineHeightList: [1, 1.5, 2],
-        letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
-        layerIconList,
-        styleIconList1,
-        styleIconList2,
-        alignIconList,
+type TState = {
+  activeNames: string[],
+  innerElement: TwTextData,
+  tag: boolean,
+  ingoreKeys: string[],
+  fontSizeList: number[],
+  fontClassList: Record<string, any>, // 不能设空字体系统默认字体，因为截图服务的默认字体无法保证一致
+  lineHeightList: number[],
+  letterSpacingList: number[],
+  layerIconList: TIconItemSelectData[],
+  styleIconList1: TStyleIconData[],
+  styleIconList2: TStyleIconData2[],
+  alignIconList: TIconItemSelectData[],
+}
+
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+const route = useRoute()
+const state = reactive<TState>({
+  activeNames: [],
+  innerElement: JSON.parse(JSON.stringify(wTextSetting)),
+  tag: false,
+  ingoreKeys: ['left', 'top', 'name', 'width', 'height', 'text', 'color', 'backgroundColor'],
+  fontSizeList: [12, 14, 24, 26, 28, 30, 36, 48, 60, 72, 96, 108, 120, 140, 180, 200, 250, 300, 400, 500],
+  fontClassList: {}, // 不能设空字体系统默认字体，因为截图服务的默认字体无法保证一致
+  lineHeightList: [1, 1.5, 2],
+  letterSpacingList: [0, 10, 25, 50, 75, 100, 200],
+  layerIconList,
+  styleIconList1,
+  styleIconList2,
+  alignIconList,
+})
+const dActiveElement = computed(() => widgetStore.dActiveElement)
+// const dMoving = computed(() => store.getters.dMoving)
+const { dMoving } = storeToRefs(useControlStore())
+
+// const isDraw = computed(() => route.name === 'Draw')
+
+watch(() => dActiveElement.value, () => {
+  change()
+}, { deep: true })
+
+watch(() => state.innerElement, () => {
+  changeValue()
+}, { deep: true })
+
+let timer: boolean | null = null
+
+onMounted(() => {
+  change()
+  setTimeout(() => {
+    loadFonts()
+  }, 100)
+})
+
+function change() {
+  if (timer) {
+    return
+  }
+  timer = true
+  setTimeout(() => {
+    timer = null
+  }, 300)
+  state.tag = true
+  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+  changeStyleIconList()
+}
+
+function changeValue() {
+  if (state.tag) {
+    state.tag = false
+    return
+  }
+  if (dMoving.value) {
+    return
+  }
+  // TODO 修改数值
+  for (let key in state.innerElement) {
+    const itemKey = key as keyof TwTextData
+    if (state.ingoreKeys.indexOf(itemKey) !== -1) {
+      (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)
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || '',
+        key: key as TUpdateWidgetPayload['key'],
+        value: state.innerElement[itemKey],
+        pushHistory: false,
       })
-      const dActiveElement = computed(() => store.getters.dActiveElement)
-      const dMoving = computed(() => store.getters.dMoving)
-      // const isDraw = computed(() => route.name === 'Draw')
-
-      watch(() => dActiveElement.value, () => {
-        change()
-      }, { deep: true })
-
-      watch(() => state.innerElement, () => {
-        changeValue()
-      }, { deep: true })
-
-      let timer: any = null
-
-      onMounted(() => {
-        change()
-        setTimeout(() => {
-          loadFonts()
-        }, 100)
-      })
-
-      function change() {
-        if (timer) {
-          return
-        }
-        timer = true
-        setTimeout(() => {
-          timer = null
-        }, 300)
-        state.tag = true
-        state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
-        changeStyleIconList()
-      }
-
-      function changeValue() {
-        if (state.tag) {
-          state.tag = false
-          return
-        }
-        if (dMoving.value) {
-          return
-        }
-        // TODO 修改数值
-        for (let key in state.innerElement) {
-          if (state.ingoreKeys.indexOf(key) !== -1) {
-            dActiveElement.value[key] = state.innerElement[key]
-          } else if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
-            // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
-            store.dispatch('updateWidgetData', {
-              uuid: dActiveElement.value.uuid,
-              key,
-              value: state.innerElement[key],
-              pushHistory: false,
-            })
-          }
-        }
-      }
-
-      function selectTextEffect({ key, value, style }: any) {
-        const uuid = dActiveElement.value.uuid
-        store.commit('setWidgetStyle', { uuid, key, value })
-        if (style) {
-          finish('color', style.color || '')
-        }
-      }
-
-      function loadFonts() {
-        const localFonts = useFontStore.list
-        const fontLists = { 当前页面: [], 中文: [], 英文: [] }
-        for (const font of localFonts) {
-          const { id, oid, value, url, alias, preview, lang } = font
-          const item = { id, oid, value, url, alias, preview }
-          lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
-        }
-        fontLists['当前页面'] = usePageFontsFilter()
-        state.fontClassList = fontLists
-      }
-
-      function finish(key, value) {
-        store.dispatch('updateWidgetData', {
-          uuid: dActiveElement.value.uuid,
-          key,
-          value,
-          pushHistory: false,
-        })
-        setTimeout(() => {
-          key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
-        }, 300)
-      }
-
-      function layerAction(item) {
-        store.dispatch('updateLayerIndex', {
-          uuid: dActiveElement.value.uuid,
-          value: item.value,
-        })
-      }
-
-      async function textStyleAction(item) {
-        let value = item.key === 'textAlign' ? item.value : item.value[item.select ? 1 : 0]
-        state.innerElement[item.key] = value
-        // TODO: 对竖版文字的特殊处理
-        item.key === 'writingMode' && relationChange()
-        await nextTick()
-        store.commit('updateRect')
-      }
-
-      async function alignAction(item) {
-        store.dispatch('updateAlign', {
-          align: item.value,
-          uuid: dActiveElement.value.uuid,
-        })
-        await nextTick()
-        store.commit('updateRect')
-      }
-
-      function changeStyleIconList() {
-        for (let i = 0; i < state.styleIconList1.length; ++i) {
-          let key = state.styleIconList1[i].key
-          state.styleIconList1[i].select = false
-          const [unchecked, checked] = state.styleIconList1[i].value
-          switch (key) {
-            case 'fontWeight':
-            case 'textDecoration':
-            case 'fontStyle':
-              if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
-                state.styleIconList1[i].select = !state.styleIconList1[i].select
-              }
-              break
-            case 'writingMode':
-              if (state.innerElement[key] !== unchecked) {
-                state.styleIconList1[i].select = true
-              }
-              break
-          }
-        }
-        for (let i = 0; i < state.styleIconList2.length; i++) {
-          let key = state.styleIconList2[i].key
-          state.styleIconList2[i].select = false
-          if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
-            state.styleIconList2[i].select = true
-            continue
-          }
-        }
-      }
-
-      function relationChange() {
-        setTimeout(() => {
-          if (dActiveElement.value.writingMode) {
-            const w_record = dActiveElement.value.width
-            state.innerElement.width = dActiveElement.value.height
-            state.innerElement.height = w_record
-          }
-        }, 10)
-      }
-
-      return {
-        ...toRefs(state),
-        selectTextEffect,
-        textStyleAction,
-        finish,
-        layerAction,
-        alignAction
-      }
+      // 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 || ''
+  widgetStore.setWidgetStyle({ uuid, key, value })
+  // store.commit('setWidgetStyle', { uuid, key, value })
+  if (style) {
+    finish('color', style.color || '')
+  }
+}
+
+function loadFonts() {
+  const localFonts = useFontStore.list
+  const fontLists: Record<string, any> = { 当前页面: [], 中文: [], 英文: [] }
+  for (const font of localFonts) {
+    const { id, oid, value, url, alias, preview, lang } = font
+    const item = { id, oid, value, url, alias, preview }
+    lang === 'zh' ? fontLists['中文'].unshift(item) : fontLists['英文'].unshift(item)
+  }
+  fontLists['当前页面'] = usePageFontsFilter()
+  state.fontClassList = fontLists
+}
+
+function finish(key: string, value: number | Record<string, any> | string) {
+  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) {
+  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) {
+  let value = item.key === 'textAlign' ? item.value : (item.value as number[])[item.select ? 1 : 0];
+  (state.innerElement as Record<string, any>)[item.key || ""] = value
+  // TODO: 对竖版文字的特殊处理
+  item.key === 'writingMode' && relationChange()
+  await nextTick()
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
+}
+
+async function alignAction(item: TIconItemSelectData) {
+  widgetStore.updateAlign({
+    align: item.value as TUpdateAlignData['align'],
+    uuid: dActiveElement.value?.uuid || '',
+  })
+  // store.dispatch('updateAlign', {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
+  await nextTick()
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
+}
+
+function changeStyleIconList() {
+  for (let i = 0; i < state.styleIconList1.length; ++i) {
+    let key = state.styleIconList1[i].key
+    state.styleIconList1[i].select = false
+    const [unchecked, checked] = state.styleIconList1[i].value
+    switch (key) {
+      case 'fontWeight':
+      case 'textDecoration':
+      case 'fontStyle':
+        if (state.innerElement[key] !== unchecked && state.innerElement[key] == checked) {
+          state.styleIconList1[i].select = !state.styleIconList1[i].select
+        }
+        break
+      case 'writingMode':
+        if (state.innerElement[key] !== unchecked) {
+          state.styleIconList1[i].select = true
+        }
+        break
+    }
+  }
+  for (let i = 0; i < state.styleIconList2.length; i++) {
+    let key = state.styleIconList2[i].key
+    state.styleIconList2[i].select = false
+    if (key === 'textAlign' && state.innerElement[key] === state.styleIconList2[i].value) {
+      state.styleIconList2[i].select = true
+      continue
+    }
+  }
+}
+
+function relationChange() {
+  setTimeout(() => {
+    if (dActiveElement.value && dActiveElement.value.writingMode) {
+      const w_record = dActiveElement.value.width
+      state.innerElement.width = dActiveElement.value.height
+      state.innerElement.height = w_record
+    }
+  }, 10)
+}
+
+defineExpose({
+  selectTextEffect,
+  textStyleAction,
+  finish,
+  layerAction,
+  alignAction
 })
 </script>
 
diff --git a/src/main.ts b/src/main.ts
index d960b07..2a120be 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -8,12 +8,14 @@
 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'
 import elementConfig from './utils/widgets/elementConfig'
+import { createPinia } from 'pinia'
 
+const pinia = createPinia()
 const app = createApp(App)
 
 elementConfig.components.forEach((component) => {
@@ -25,7 +27,8 @@ elementConfig.plugins.forEach((plugin) => {
 })
 
 app
-  .use(store)
+  // .use(store)
+  .use(pinia)
   .use(router)
   .use(utils)
   .mount('#app')
diff --git a/src/mixins/methods/dealWithCtrl.ts b/src/mixins/methods/dealWithCtrl.ts
index f64811e..7d94b6c 100644
--- a/src/mixins/methods/dealWithCtrl.ts
+++ b/src/mixins/methods/dealWithCtrl.ts
@@ -5,14 +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 { useGroupStore, useHistoryStore, useWidgetStore } from '@/store'
 
-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()
@@ -42,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) => x.parent === pid) || []
   childs.forEach((element: any) => {
     element[key] && (itHas = true)
   })
@@ -53,37 +57,44 @@ 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()
   })
 }
 /**
  * 撤销
  */
 function undo(shiftKey: any) {
+  const historyStore = useHistoryStore()
+  console.log(historyStore.dHistoryParams);
+  
   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) {
+  } 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 5e8cbc4..8993e05 100644
--- a/src/mixins/methods/handlePaste.ts
+++ b/src/mixins/methods/handlePaste.ts
@@ -11,23 +11,28 @@
 //   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'
 import { getImage } from '@/common/methods/getImgDetail'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-// import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+// 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++) {
@@ -37,22 +42,27 @@ 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 })
             // 刷新用户列表
             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
             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)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
+
             // 清空剪贴板，防止多次上传图片
             navigator.clipboard.write([
               new ClipboardItem({
@@ -61,14 +71,19 @@ export default () => {
             ])
             // 最后尝试复制，将图片替换为图片组件
             setTimeout(() => {
-              store.dispatch('copyWidget')
+              widgetStore.copyWidget()
+              // store.dispatch('copyWidget')
             }, 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)
+
+            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 7bce623..182af49 100644
--- a/src/mixins/methods/keyCodeOptions.ts
+++ b/src/mixins/methods/keyCodeOptions.ts
@@ -5,10 +5,15 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/store'
+import { TdWidgetData } from '@/store/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:
       udlr('top', -1 * f, e)
@@ -25,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 && store.getters.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
   }
@@ -43,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
@@ -54,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 1897bec..4042210 100644
--- a/src/mixins/move.ts
+++ b/src/mixins/move.ts
@@ -5,21 +5,29 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/store'
+// 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)
@@ -28,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')
     },
   },
 }
@@ -49,23 +64,36 @@ const move = {
 const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
-      if (!store.getters.dAltDown) {
+      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/mixins/shortcuts.ts b/src/mixins/shortcuts.ts
index a54f474..b1bac11 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 '@/store/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/store/base/index.ts b/src/store/base/index.ts
new file mode 100644
index 0000000..02660e8
--- /dev/null
+++ b/src/store/base/index.ts
@@ -0,0 +1,52 @@
+/*
+ * @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 { Store, 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 type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
+
+export default useBaseStore
+
diff --git a/src/store/base/user.ts b/src/store/base/user.ts
new file mode 100644
index 0000000..844525f
--- /dev/null
+++ b/src/store/base/user.ts
@@ -0,0 +1,61 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: User全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, 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
+}
+
+/** User全局状态管理 */
+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 type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
+
+export default useUserStore
diff --git a/src/store/design/canvas/index.ts b/src/store/design/canvas/index.ts
new file mode 100644
index 0000000..c0b86db
--- /dev/null
+++ b/src/store/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 { Store, defineStore } from 'pinia'
+
+type TScreeData = {
+  /** 记录编辑界面的宽度 */
+  width: number
+  /** 记录编辑界面的高度 */
+  height: number
+}
+
+type TGuidelinesData = {
+  verticalGuidelines: number[]
+  horizontalGuidelines: number[]
+}
+
+type TCanvasState = {
+  /** 画布缩放百分比 */
+  dZoom: number
+  /** 画布垂直居中修正值 */
+  dPaddingTop: number
+  /** 编辑界面 */
+  dScreen: TScreeData
+  /** 标尺辅助线 */
+  guidelines: TGuidelinesData
+}
+
+type TStoreAction = {
+  /** 更新画布缩放百分比 */
+  updateZoom: (zoom: number) => void
+  /** 更新画布垂直居中修正值 */
+  updatePaddingTop: (num: number) => void
+  /** 更新编辑界面的宽高 */
+  updateScreen: (data: TScreeData) => void
+  /** 修改标尺线 */
+  updateGuidelines: (lines: TGuidelinesData) => void
+  /** 强制重绘画布 */
+  reChangeCanvas: () => void
+}
+
+/** 画布全局设置 */
+const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
+  state: () => ({
+    dZoom: 0, // 画布缩放百分比
+    dPaddingTop: 0, // 画布垂直居中修正值
+    dScreen: {
+      width: 0, // 记录编辑界面的宽度
+      height: 0, // 记录编辑界面的高度
+    },
+    // gridSize: {
+    //   width: 0, // 网格小格子的宽度
+    //   height: 0, // 网格小格子的高度
+    // },
+    guidelines: {
+      // moveable 标尺辅助线
+      verticalGuidelines: [],
+      horizontalGuidelines: [],
+    },
+  }),
+  actions: {
+    /** 更新画布缩放百分比 */
+    updateZoom(zoom: number) {
+      this.dZoom = zoom
+    },
+    /** 更新画布垂直居中修正值 */
+    updatePaddingTop(num: number) {
+      this.dPaddingTop = num
+    },
+    /** 更新编辑界面的宽高 */
+    updateScreen({ width, height }: TScreeData) {
+      console.log(this.dScreen)
+      this.dScreen.width = width
+      this.dScreen.height = height
+    },
+    /** 修改标尺线 */
+    updateGuidelines(lines: TGuidelinesData) {
+      this.guidelines = { ...this.guidelines, ...lines }
+    },
+    /** 强制重绘画布 */
+    reChangeCanvas() {
+      // const tag = this.dPage.tag
+      // this.dPage.tag = tag === 0 ? 0.01 : 0
+    },
+  }
+})
+
+export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
+
+export default CanvasStore
diff --git a/src/store/design/control/index.ts b/src/store/design/control/index.ts
new file mode 100644
index 0000000..e0a532f
--- /dev/null
+++ b/src/store/design/control/index.ts
@@ -0,0 +1,116 @@
+
+/*
+ * @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 { useHistoryStore } from "@/store";
+import { Store, defineStore } from "pinia";
+
+type TControlState = {
+  /** 是否正在移动组件 */
+  dMoving: boolean 
+  /** 是否正在抓取组件 */
+  dDraging: boolean
+  /** 是否正在调整组件宽高 */
+  dResizeing: boolean
+  /** 是否显示参考线 */
+  dShowRefLine: boolean
+  /** 全局控制选择框的显示 */
+  showMoveable: boolean
+  /** 是否显示moveable的旋转按钮 */
+  showRotatable: boolean
+  /** 记录是否按下alt键 / 或ctrl */
+  dAltDown: boolean
+  /** 正在编辑or裁剪的组件id */
+  dCropUuid: string
+}
+
+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
+  updateAltDown: (isPressAltDown: boolean) => void
+  /** 组件调整结束 */
+  stopDResize: () => void
+  /** 组件移动结束 */
+  stopDMove: () => void
+  /** 设置正在裁剪or编辑的组件 */
+  setCropUuid: (uuid: string) => void
+}
+
+/** 全局控制配置 */
+const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
+  state: () => ({
+    dMoving: false, // 是否正在移动组件
+    dDraging: false, // 是否正在抓取组件
+    dResizeing: false, // 是否正在调整组件宽高
+    dShowRefLine: true, // 是否显示参考线
+    showMoveable: false, // 全局控制选择框的显示
+    showRotatable: true, // 是否显示moveable的旋转按钮
+    dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    dCropUuid: '-1', // 正在编辑or裁剪的组件id
+  }),
+  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
+    },
+    /** TODO 组合操作 */
+    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
+    },
+  }
+})
+
+export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
+
+export default ControlStore
diff --git a/src/store/design/force/index.ts b/src/store/design/force/index.ts
new file mode 100644
index 0000000..3206744
--- /dev/null
+++ b/src/store/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/store/design/group/action/index.ts b/src/store/design/group/action/index.ts
new file mode 100644
index 0000000..96d9150
--- /dev/null
+++ b/src/store/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 '@/store'
+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(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/store/design/group/index.ts b/src/store/design/group/index.ts
new file mode 100644
index 0000000..a7d4208
--- /dev/null
+++ b/src/store/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/store/design/history/actions/handleHistory.ts b/src/store/design/history/actions/handleHistory.ts
new file mode 100644
index 0000000..1e84f69
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/history/actions/pushHistory.ts b/src/store/design/history/actions/pushHistory.ts
new file mode 100644
index 0000000..abee906
--- /dev/null
+++ b/src/store/design/history/actions/pushHistory.ts
@@ -0,0 +1,51 @@
+/*
+ * @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, useWidgetStore } from "@/store"
+import { THistoryStore } from ".."
+import { proxyToObject } from "@/utils/utils"
+
+/** 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(selectStore.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(selectStore.dWidgets))
+  store.dPageHistory.push(JSON.stringify(proxyToObject(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/store/design/history/index.ts b/src/store/design/history/index.ts
new file mode 100644
index 0000000..eb6651d
--- /dev/null
+++ b/src/store/design/history/index.ts
@@ -0,0 +1,81 @@
+/*
+ * @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"
+import { usePageStore, useWidgetStore } from "@/store"
+
+export type THistoryParamData = {
+  index: number
+  length: number
+  maxLength: number
+}
+
+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) {
+      const selectStore = useWidgetStore()
+      const pageStore = usePageStore()
+      handleHistory(this, action)
+      // 激活组件默认为page
+      selectStore.dActiveElement = pageStore.dPage
+    },
+    pushColorToHistory(color) {
+      pushColorToHistory(this, color)
+    }
+  }
+})
+
+export type THistoryStore = Store<"historyStore", THistoryState, {}, THistoryAction>
+
+export default HistoryStore
diff --git a/src/store/design/page/index.ts b/src/store/design/page/index.ts
new file mode 100644
index 0000000..0c18e9f
--- /dev/null
+++ b/src/store/design/page/index.ts
@@ -0,0 +1,106 @@
+/*
+ * @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 { Store, defineStore } from 'pinia'
+
+export type TPageState = {
+  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: TPageState): TPageState
+}
+
+type TPageActions = {
+  /** 更新Page数据 */
+  updatePageData<T extends keyof TPageState>(data: {
+    key: T
+    value: TPageState[T]
+    pushHistory?: boolean
+  }): void
+  /** 设置dPage */
+  setDPage(data: TPageState): void
+}
+
+/** 页面全局配置 */
+const PageStore = defineStore<"pageStore", TPageState, 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 TPageState
+      if (data[key] !== value || pushHistory) {
+        data[key] = value
+        // 画布修改先不压入历史栈，因为替换模板后会重复压栈
+        // store.dispatch('pushHistory', 'updatePageData')
+      }
+    },
+    /** 设置dPage */
+    setDPage(data: TPageState) {
+      const cur = this as Record<string, any>
+      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/store/design/widget/actions/align.ts b/src/store/design/widget/actions/align.ts
new file mode 100644
index 0000000..967a291
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/actions/clone.ts b/src/store/design/widget/actions/clone.ts
new file mode 100644
index 0000000..7fdda15
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/actions/group.ts b/src/store/design/widget/actions/group.ts
new file mode 100644
index 0000000..151a5fe
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/actions/index.ts b/src/store/design/widget/actions/index.ts
new file mode 100644
index 0000000..f21bac1
--- /dev/null
+++ b/src/store/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 "@/store"
+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: MouseEvent | null) {
+  state.activeMouseEvent = e
+}
diff --git a/src/store/design/widget/actions/layer.ts b/src/store/design/widget/actions/layer.ts
new file mode 100644
index 0000000..f0681db
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/actions/resize.ts b/src/store/design/widget/actions/resize.ts
new file mode 100644
index 0000000..309e24d
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/actions/select.ts b/src/store/design/widget/actions/select.ts
new file mode 100644
index 0000000..52a6637
--- /dev/null
+++ b/src/store/design/widget/actions/select.ts
@@ -0,0 +1,107 @@
+import { useControlStore, useHistoryStore, usePageStore } from "@/store"
+import { TWidgetStore } from ".."
+import { proxyToObject } from "@/utils/utils"
+
+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 (alt) {
+    if (!widget) return
+    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 = []
+  console.log("uuid", uuid);
+  
+  if (uuid === '-1') {
+    store.dActiveElement = pageStore.dPage
+    const pageHistory = historyStore.dPageHistory
+    if (pageHistory.length === 0) {
+      pageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
+    }
+    setTimeout(() => {
+      store.dSelectWidgets = []
+    }, 10)
+  } else {
+    if (!widget) return
+    // 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/store/design/widget/actions/template.ts b/src/store/design/widget/actions/template.ts
new file mode 100644
index 0000000..8f359f3
--- /dev/null
+++ b/src/store/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 '@/store'
+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/store/design/widget/actions/widget.ts b/src/store/design/widget/actions/widget.ts
new file mode 100644
index 0000000..f13ae46
--- /dev/null
+++ b/src/store/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 "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+type TUpdateWidgetKey = keyof TdWidgetData
+
+export type TUpdateWidgetPayload = {
+  uuid: string
+  key: TUpdateWidgetKey
+  value: number | string | boolean | Record<string, any>
+  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 - Number(value)
+          let dTop = widget.top - Number(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] as TUpdateWidgetPayload['value']) = 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] as number | string) = 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/store/design/widget/getter/index.ts b/src/store/design/widget/getter/index.ts
new file mode 100644
index 0000000..a351128
--- /dev/null
+++ b/src/store/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 "@/store"
+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/store/design/widget/index.ts b/src/store/design/widget/index.ts
new file mode 100644
index 0000000..0fae785
--- /dev/null
+++ b/src/store/design/widget/index.ts
@@ -0,0 +1,184 @@
+/*
+ * @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 & 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 = {
+  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[]
+  /** 记录当前选择的元素, data */
+  selectItem: { data?: Record<string, any> | null, type?: string }
+  /** 正在活动的鼠标事件 */
+  activeMouseEvent: MouseEvent | 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: TdWidgetData) => 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
+  setSelectItem: (data: TselectItem) => void
+  resize: (data: TResize) => void
+  setWidgetStyle: (data: TsetWidgetStyleData) => void
+  setDWidgets: (data: TdWidgetData[]) => void
+  setMouseEvent: (e: MouseEvent | 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) },
+    setSelectItem(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/store/index.ts b/src/store/index.ts
index ffbaae9..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 656560b..0000000
--- a/src/store/modules/base/actions.ts
+++ /dev/null
@@ -1,19 +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 1d7bd60..0000000
--- a/src/store/modules/base/index.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-12-16 16:20:16
- * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-28 17:42:25
- */
-import mutations from './mutations'
-import actions from './actions'
-import _config from '@/config'
-
-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
-    },
-    app: (state: Type.Object) => {
-      return state.app
-    }
-  },
-  mutations: {
-    ...mutations,
-  },
-  actions: {
-    ...actions,
-  },
-}
-export default all
diff --git a/src/store/modules/base/mutations.ts b/src/store/modules/base/mutations.ts
deleted file mode 100644
index 88bd32a..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 79e0178..0000000
--- a/src/store/modules/design/actions.ts
+++ /dev/null
@@ -1,828 +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 9bcef04..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 dad278f..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 fa58096..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 6f05307..0000000
--- a/src/store/modules/design/mutations.ts
+++ /dev/null
@@ -1,78 +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 e654366..90491e6 100644
--- a/src/utils/axios.ts
+++ b/src/utils/axios.ts
@@ -6,8 +6,9 @@
  * @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 { useBaseStore, useUserStore } from '@/store/index';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@@ -53,7 +54,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 +69,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/utils/utils.ts b/src/utils/utils.ts
index 30b9d07..952bd14 100644
--- a/src/utils/utils.ts
+++ b/src/utils/utils.ts
@@ -78,4 +78,35 @@ 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)) {
+        const value = proxyToObject(proxy[key], seen);
+        if (value !== '[Circular Reference]') {
+          obj[key] = value;
+        }
+      }
+    }
+  }
+  return obj as P;
+};
+
 export default {}
diff --git a/src/views/Draw.vue b/src/views/Draw.vue
index 0a041a1..61dcda4 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,25 +18,32 @@ 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 { useGroupStore, usePageStore, useWidgetStore } from '@/store'
 
 type TState = {
   style: StyleValue
 }
 
-const store = useStore()
+// const store = useStore()
 const route = useRoute()
 const state = reactive<TState>({
   style: {
     left: '0px',
   },
 })
-const { dPage } = useSetupMapGetters(['dPage'])
+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()
@@ -60,17 +67,23 @@ 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)
+      // store.commit('setDPage', content.page)
       // 移除背景图，作为独立事件
       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)
       }
     }
 
@@ -112,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 2ccb063..5207077 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,9 +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, useWidgetStore, useGroupStore } from '@/store'
 
 type TState = {
   style: CSSProperties
@@ -81,9 +83,17 @@ type TState = {
   showLineGuides: boolean
 }
 
-const {
-  dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+// 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>({
   style: {
@@ -98,11 +108,12 @@ 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()
 
 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
@@ -124,7 +135,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(() => {
@@ -151,26 +162,28 @@ 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)
-  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() {
@@ -190,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 67f127c..70f734e 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,8 +71,10 @@ 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, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   isDone: boolean
@@ -90,10 +92,17 @@ const state = reactive<TState>({
   downloadMsg: '',
   cancelText: '',
 })
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
-const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
+// const { dZoom } = useSetupMapGetters(['dZoom'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+const { dZoom } = storeToRefs(useCanvasStore())
+
 const zoomControlRef = ref<typeof zoomControl | null>()
 
 let loading: ReturnType<typeof useLoading> | null = null
@@ -134,19 +143,29 @@ 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
-    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: '' }))
-  store.commit('setShowMoveable', false)
+  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: '' }))
+  
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+  
   await nextTick()
   state.isDone = false
 }
@@ -171,15 +190,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']),
@@ -189,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 3d276cc..08f22ca 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> -->
@@ -28,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'
@@ -38,7 +39,9 @@ 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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/store/index'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: boolean
@@ -59,11 +62,25 @@ 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 {
-  dPage, dWidgets, tempEditing, dHistory, dPageHistory
-} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+
+// 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())
+
 
 const state = reactive<TState>({
   stateBollean: false,
@@ -77,7 +94,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
@@ -85,7 +105,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)
 }
 
     // 保存模板
@@ -96,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)
@@ -180,20 +203,26 @@ 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) {
       // 加载文字组合组件
       dPage.value.width = width
       dPage.value.height = height
-      store.dispatch('addGroup', data)
+      widgetStore.addGroup(data)
+      // store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
-      store.commit('setDPage', data.page)
-      id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
+      pageStore.setDPage(data.page)
+      // store.commit('setDPage', data.page)
+      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 202c61d..b928e81 100644
--- a/src/views/components/UploadTemplate.vue
+++ b/src/views/components/UploadTemplate.vue
@@ -14,14 +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 { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { TdWidgetData } from '@/store/design/widget'
 
 type TProps = {
   modelValue?: string
@@ -46,14 +49,19 @@ 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>()
 
 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>({
@@ -80,12 +88,14 @@ 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() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   addition = 0
   lenCount = 0
   widgets = dWidgets.value
@@ -98,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)
     }
   }
@@ -110,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
new file mode 100644
index 0000000..cbd5013
--- /dev/null
+++ b/yarn.lock
@@ -0,0 +1,2267 @@
+# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
+# yarn lockfile v1
+
+
+"@aashutoshrathi/word-wrap@^1.2.3":
+  version "1.2.6"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-XxVUZv48RZAd87ucGS48jPf6pKu0yV5UCg9f4FFwtrYxXOwWuVJo6wOvSLKEoMQKjv8GsX/mhP6UsC1lRwbUWg==
+
+"@esbuild/darwin-x64@0.19.12":
+  version "0.19.12"
+  resolved "https://registry.npmjs.org/@esbuild/darwin-x64/-/darwin-x64-0.19.12.tgz"
+  integrity sha512-hKoVkKzFiToTgn+41qGhsUJXFlIjxI/jSYeZf3ugemDYZldIXIxhvwN6erJGlX4t5h417iFuheZ7l+YVn05N3A==
+
+"@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"
+  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"
+  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"
+  integrity sha512-269Z39MS6wVJtsoUl10L60WdkhJVdPG24Q4eZTH3nnF6lpvSShEK3wQjDX9JRWAUPvPh7COouPpU9IrqaZFvtQ==
+  dependencies:
+    ajv "^6.12.4"
+    debug "^4.3.2"
+    espree "^9.6.0"
+    globals "^13.19.0"
+    ignore "^5.2.0"
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    minimatch "^3.1.2"
+    strip-json-comments "^3.1.1"
+
+"@eslint/js@8.57.0":
+  version "8.57.0"
+  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"
+  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"
+  integrity sha512-RnDthu3mzPlQ31Ss/BTwQ1zjzIhr3lk1gZB1OC56h/1vEtaXkESrOqL5fQVMfXpwGtRwX+YsZBdyHtJMQnkArw==
+  dependencies:
+    "@floating-ui/core" "^1.0.0"
+    "@floating-ui/utils" "^0.2.0"
+
+"@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"
+  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"
+  integrity sha512-3T8LkOmg45BV5FICb15QQMsyUSWrQ8AygVfC7ZG32zOalnqrilm018ZVCw0eapXux8FtA33q8PSRSstjee3jSg==
+  dependencies:
+    "@humanwhocodes/object-schema" "^2.0.2"
+    debug "^4.3.1"
+    minimatch "^3.0.5"
+
+"@humanwhocodes/module-importer@^1.0.1":
+  version "1.0.1"
+  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"
+  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"
+  integrity sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==
+  dependencies:
+    "@jridgewell/set-array" "^1.2.1"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+    "@jridgewell/trace-mapping" "^0.3.24"
+
+"@jridgewell/resolve-uri@^3.1.0":
+  version "3.1.2"
+  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"
+  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"
+  integrity sha512-UTYAUj/wviwdsMfzoSJspJxbkH5o1snzwX0//0ENX1u/55kkZZkcTZP6u9bwKGkv+dkk9at4m1Cpt0uY80kcpQ==
+  dependencies:
+    "@jridgewell/gen-mapping" "^0.3.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
+
+"@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"
+  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"
+  integrity sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==
+  dependencies:
+    "@jridgewell/resolve-uri" "^3.1.0"
+    "@jridgewell/sourcemap-codec" "^1.4.14"
+
+"@nodelib/fs.scandir@2.1.5":
+  version "2.1.5"
+  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.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"
+  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"
+  integrity sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==
+  dependencies:
+    "@nodelib/fs.scandir" "2.1.5"
+    fastq "^1.6.0"
+
+"@palxp/color-picker@file:/Users/yzm/Desktop/Desktop/openSource/poster-design/packages/color-picker":
+  version "1.5.5"
+  resolved "file:packages/color-picker"
+  dependencies:
+    throttle-debounce "^5.0.0"
+
+"@palxp/image-extraction@file:/Users/yzm/Desktop/Desktop/openSource/poster-design/packages/image-extraction":
+  version "1.2.4"
+  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"
+  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"
+  integrity sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==
+  dependencies:
+    "@types/estree" "^1.0.0"
+    estree-walker "^2.0.2"
+    picomatch "^2.3.1"
+
+"@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"
+  integrity sha512-opjWJ4MevxeA8FhlngQWPBOvVWYNPFkq6/25rGgG+KOy0r8clYwL1CFd+PGwRqqMFVQ4/Qd3sQu5t7ucP7C/Uw==
+
+"@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"
+  integrity sha512-3O8daaZD9VXA9CP3dra6xcgt/qrm0mg0xJCwiX6druCteQ9FFsXffkF8PrqxY4Z4VJ58fFKEa0RlKqbsi/XnRA==
+  dependencies:
+    "@daybrush/utils" "^1.6.0"
+    "@scena/event-emitter" "^1.0.2"
+
+"@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"
+  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"
+  integrity sha512-ALfSx9flvhvP8zrc3Zl5HeZA+vnTmzzRC/rtfLnlDIa+HRXl3k1IuXOdHs+fsPZL+mpjbWDo1dVZjn+uY+95AA==
+  dependencies:
+    "@scena/event-emitter" "^1.0.4"
+    react-compat-guides "~0.15.1"
+    react-simple-compat "^1.2.2"
+
+"@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"
+  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"
+  integrity sha512-qmVKDw681kdsLvirevHPQ9jQy7aenQDy8VNsMdFgsak9GS/GcZz6wBT8lqp6otmQ5oEFjS7+4ZyFsH3tpMiDSQ==
+  dependencies:
+    "@daybrush/utils" "^1.4.0"
+    "@scena/react-ruler" "^0.9.1"
+    css-to-mat "^1.0.3"
+    framework-utils "^1.1.0"
+    gesto "^1.5.1"
+    react-css-styled "^1.0.2"
+
+"@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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==
+
+"@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"
+  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"
+  integrity sha512-OvlIYQK9tNneDlS0VN54LLd5uiPCBOp7gS5Z0f1mjoJYBrtStzgmJBxONW3U6OZqdtNzZPmn9BS/7WI7BFFcFQ==
+
+"@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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-zioDz623d0RHNhvx0eesUmGfIjzrk18nSBC8xewepKXbBvN/7c1qImV7Hg8TI1URTxKax7/zxfxj3Uph8Chcuw==
+  dependencies:
+    "@eslint-community/regexpp" "^4.5.1"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/type-utils" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
+    debug "^4.3.4"
+    graphemer "^1.4.0"
+    ignore "^5.2.4"
+    natural-compare "^1.4.0"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.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"
+  integrity sha512-ZWUFyL0z04R1nAEgr9e79YtV5LbafdOtN7yapNbn1ansMyaegl2D4bL7vHoJ4HPSc4CaLwuCVas8CVuneKzplQ==
+  dependencies:
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
+    debug "^4.3.4"
+
+"@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"
+  integrity sha512-cirZpA8bJMRb4WZ+rO6+mnOJrGFDd38WoXCEI57+CYBqta8Yc8aJym2i7vyqLL1vVYljgw0X27axkUXz32T8TA==
+  dependencies:
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
+
+"@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"
+  integrity sha512-5r4RKze6XHEEhlZnJtR3GYeCh1IueUHdbrukV2KSlLXaTjuSfeVF8mZUVPLovidCuZfbVjfhi4c0DNSa/Rdg5g==
+  dependencies:
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    "@typescript-eslint/utils" "7.1.1"
+    debug "^4.3.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/types@7.1.1":
+  version "7.1.1"
+  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"
+  integrity sha512-9ZOncVSfr+sMXVxxca2OJOPagRwT0u/UHikM2Rd6L/aB+kL/QAuTnsv6MeXtjzCJYb8PzrXarypSGIPx3Jemxw==
+  dependencies:
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/visitor-keys" "7.1.1"
+    debug "^4.3.4"
+    globby "^11.1.0"
+    is-glob "^4.0.3"
+    minimatch "9.0.3"
+    semver "^7.5.4"
+    ts-api-utils "^1.0.1"
+
+"@typescript-eslint/utils@7.1.1":
+  version "7.1.1"
+  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"
+    "@types/json-schema" "^7.0.12"
+    "@types/semver" "^7.5.0"
+    "@typescript-eslint/scope-manager" "7.1.1"
+    "@typescript-eslint/types" "7.1.1"
+    "@typescript-eslint/typescript-estree" "7.1.1"
+    semver "^7.5.4"
+
+"@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"
+  integrity sha512-yTdHDQxY7cSoCcAtiBzVzxleJhkGB9NncSIyMYe2+OGON1ZsP9zOPws/Pqgopa65jvknOjlk/w7ulPlZ78PiLQ==
+  dependencies:
+    "@typescript-eslint/types" "7.1.1"
+    eslint-visitor-keys "^3.4.1"
+
+"@ungap/structured-clone@^1.2.0":
+  version "1.2.0"
+  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"
+  integrity sha512-WS3hevEszI6CEVEx28F8RjTX97k3KsrcY6kvTg7+Whm5y3oYvcqzVeGCU3hxSAn4uY2CLCkeokkGKpoctccilQ==
+
+"@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"
+  integrity sha512-dOcNn3i9GgZAcJt43wuaEykSluAuOkQgzni1cuxLxTV0nJKanQztp7FxyswdRILaKH+P2XZMPRp2S4MV/pElCw==
+  dependencies:
+    "@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"
+  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"
+  integrity sha512-iU+t2mas/4lYierSnoFOeRFQUhAEMgsFuQxoxvwn5EdQopw43j+J27a4lt9LMInx1gLJBC6qL14WYGlgymaSMQ==
+  dependencies:
+    "@volar/language-core" "1.11.1"
+    path-browserify "^1.0.1"
+
+"@vue/compiler-core@3.4.19":
+  version "3.4.19"
+  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"
+    "@vue/shared" "3.4.19"
+    entities "^4.5.0"
+    estree-walker "^2.0.2"
+    source-map-js "^1.0.2"
+
+"@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"
+  integrity sha512-vm6+cogWrshjqEHTzIDCp72DKtea8Ry/QVpQRYoyTIg9k7QZDX6D8+HGURjtmatfgM8xgCFtJJaOlCaRYRK3QA==
+  dependencies:
+    "@vue/compiler-core" "3.4.19"
+    "@vue/shared" "3.4.19"
+
+"@vue/compiler-sfc@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.npmjs.org/@vue/compiler-sfc/-/compiler-sfc-3.4.19.tgz"
+  integrity sha512-LQ3U4SN0DlvV0xhr1lUsgLCYlwQfUfetyPxkKYu7dkfvx7g3ojrGAkw0AERLOKYXuAGnqFsEuytkdcComei3Yg==
+  dependencies:
+    "@babel/parser" "^7.23.9"
+    "@vue/compiler-core" "3.4.19"
+    "@vue/compiler-dom" "3.4.19"
+    "@vue/compiler-ssr" "3.4.19"
+    "@vue/shared" "3.4.19"
+    estree-walker "^2.0.2"
+    magic-string "^0.30.6"
+    postcss "^8.4.33"
+    source-map-js "^1.0.2"
+
+"@vue/compiler-ssr@3.4.19":
+  version "3.4.19"
+  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.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"
+  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"
+  integrity sha512-L8Kc27VdQserNaCUNiSFdDl9LWT24ly8Hpwf1ECy3aFb9m6bDhBGQYOujDm21N7EW3moKIOKEanQwe1q5BK+mA==
+  dependencies:
+    "@volar/language-core" "~1.11.1"
+    "@volar/source-map" "~1.11.1"
+    "@vue/compiler-dom" "^3.3.0"
+    "@vue/shared" "^3.3.0"
+    computeds "^0.0.1"
+    minimatch "^9.0.3"
+    muggle-string "^0.3.1"
+    path-browserify "^1.0.1"
+    vue-template-compiler "^2.7.14"
+
+"@vue/reactivity@3.4.19":
+  version "3.4.19"
+  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"
+  integrity sha512-/Z3tFwOrerJB/oyutmJGoYbuoadphDcJAd5jOuJE86THNZji9pYjZroQ2NFsZkTxOq0GJbb+s2kxTYToDiyZzw==
+  dependencies:
+    "@vue/reactivity" "3.4.19"
+    "@vue/shared" "3.4.19"
+
+"@vue/runtime-dom@3.4.19":
+  version "3.4.19"
+  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"
+    "@vue/shared" "3.4.19"
+    csstype "^3.1.3"
+
+"@vue/server-renderer@3.4.19":
+  version "3.4.19"
+  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.3.0", "@vue/shared@3.4.19":
+  version "3.4.19"
+  resolved "https://registry.npmjs.org/@vue/shared/-/shared-3.4.19.tgz"
+  integrity sha512-/KliRRHMF6LoiThEy+4c1Z4KB/gbPrGjWwJR+crg2otgrf/egKzRaCPvJ51S5oetgsgXLfc4Rm5ZgrKHZrtMSw==
+
+"@vueuse/core@^9.1.0":
+  version "9.13.0"
+  resolved "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz"
+  integrity sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==
+  dependencies:
+    "@types/web-bluetooth" "^0.0.16"
+    "@vueuse/metadata" "9.13.0"
+    "@vueuse/shared" "9.13.0"
+    vue-demi "*"
+
+"@vueuse/metadata@9.13.0":
+  version "9.13.0"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
+
+ajv@^6.12.4:
+  version "6.12.6"
+  resolved "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz"
+  integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==
+  dependencies:
+    fast-deep-equal "^3.1.1"
+    fast-json-stable-stringify "^2.0.0"
+    json-schema-traverse "^0.4.1"
+    uri-js "^4.2.2"
+
+ansi-regex@^5.0.1:
+  version "5.0.1"
+  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"
+  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"
+  integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
+  dependencies:
+    normalize-path "^3.0.0"
+    picomatch "^2.0.4"
+
+argparse@^2.0.1:
+  version "2.0.1"
+  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"
+  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"
+  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"
+  integrity sha512-1DKbDfsr6KUElM6wg+0zRNkB/Q7WcKYAaK+pzXn+Xqmszm/5Xa9coeNdtP88Vi+dPzZnMjhge8GIV49ZQkDa+g==
+  dependencies:
+    browserslist "^4.23.0"
+    caniuse-lite "^1.0.30001591"
+    fraction.js "^4.3.7"
+    normalize-range "^0.1.2"
+    picocolors "^1.0.0"
+    postcss-value-parser "^4.2.0"
+
+axios@^0.21.1:
+  version "0.21.4"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-iCuPHDFgrHX7H2vEI/5xpz07zSHB00TpugqhmYtVmMO6518mCuRMoOYFldEBl0g187ufozdaHgWKcYFb61qGiA==
+  dependencies:
+    balanced-match "^1.0.0"
+    concat-map "0.0.1"
+
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  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"
+  integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
+  dependencies:
+    fill-range "^7.0.1"
+
+browserslist@^4.23.0, "browserslist@>= 4.21.0":
+  version "4.23.0"
+  resolved "https://registry.npmjs.org/browserslist/-/browserslist-4.23.0.tgz"
+  integrity sha512-QW8HiM1shhT2GuzkvklfjcKDiWFXHOeFCIA/huJPwHsslwcydgk7X+z2zXpEijP98UCY7HbubZt5J2Zgvf0CaQ==
+  dependencies:
+    caniuse-lite "^1.0.30001587"
+    electron-to-chromium "^1.4.668"
+    node-releases "^2.0.14"
+    update-browserslist-db "^1.0.13"
+
+buffer-from@^1.0.0:
+  version "1.1.2"
+  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"
+  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"
+  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"
+  integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
+  dependencies:
+    ansi-styles "^4.1.0"
+    supports-color "^7.1.0"
+
+chokidar@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.npmjs.org/chokidar/-/chokidar-3.6.0.tgz"
+  integrity sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==
+  dependencies:
+    anymatch "~3.1.2"
+    braces "~3.0.2"
+    glob-parent "~5.1.2"
+    is-binary-path "~2.1.0"
+    is-glob "~4.0.1"
+    normalize-path "~3.0.0"
+    readdirp "~3.6.0"
+  optionalDependencies:
+    fsevents "~2.3.2"
+
+color-convert@^2.0.1:
+  version "2.0.1"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==
+  dependencies:
+    path-key "^3.1.0"
+    shebang-command "^2.0.0"
+    which "^2.0.1"
+
+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"
+  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"
+  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"
+  integrity sha512-kvpxFYZb27jRd2vium35G7q5XZ2WJ9rWjDUMNT36M3Hc41qCrLXFM5iEKMGXcrPsKfXEN+8l/riB4QzwwwiEyQ==
+  dependencies:
+    "@daybrush/utils" "^1.13.0"
+    "@scena/matrix" "^1.0.0"
+
+csstype@^3.1.3:
+  version "3.1.3"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-yS+Q5i3hBf7GBkd4KG8a7eBNNWNGLTaEwwYWUijIYM7zrlYDM0BFXHjjPWlWZ1Rg7UaddZeIDmi9jF3HmqiQ2w==
+  dependencies:
+    esutils "^2.0.2"
+
+electron-to-chromium@^1.4.668:
+  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.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"
+    "@floating-ui/dom" "^1.0.1"
+    "@popperjs/core" "npm:@sxzz/popperjs-es@^2.11.7"
+    "@types/lodash" "^4.14.182"
+    "@types/lodash-es" "^4.17.6"
+    "@vueuse/core" "^9.1.0"
+    async-validator "^4.2.5"
+    dayjs "^1.11.3"
+    escape-html "^1.0.3"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    lodash-unified "^1.0.2"
+    memoize-one "^6.0.0"
+    normalize-wheel-es "^1.2.0"
+
+entities@^4.5.0:
+  version "4.5.0"
+  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"
+  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"
+  integrity sha512-cXLGjP0c4T3flZJKQSuziYoq7MlT+rnvfZjfp7h+I7K9BNX54kP9nyWvdbwjQ4u1iWbOL4u96fgeZLToQlZC7w==
+
+esbuild@^0.19.3:
+  version "0.19.12"
+  resolved "https://registry.npmjs.org/esbuild/-/esbuild-0.19.12.tgz"
+  integrity sha512-aARqgq8roFBj054KvQr5f1sFu0D65G+miZRCuJyJ0G13Zwx7vRar5Zhn2tkQNzIXcBrNVsv/8stehpj+GAjgbg==
+  optionalDependencies:
+    "@esbuild/aix-ppc64" "0.19.12"
+    "@esbuild/android-arm" "0.19.12"
+    "@esbuild/android-arm64" "0.19.12"
+    "@esbuild/android-x64" "0.19.12"
+    "@esbuild/darwin-arm64" "0.19.12"
+    "@esbuild/darwin-x64" "0.19.12"
+    "@esbuild/freebsd-arm64" "0.19.12"
+    "@esbuild/freebsd-x64" "0.19.12"
+    "@esbuild/linux-arm" "0.19.12"
+    "@esbuild/linux-arm64" "0.19.12"
+    "@esbuild/linux-ia32" "0.19.12"
+    "@esbuild/linux-loong64" "0.19.12"
+    "@esbuild/linux-mips64el" "0.19.12"
+    "@esbuild/linux-ppc64" "0.19.12"
+    "@esbuild/linux-riscv64" "0.19.12"
+    "@esbuild/linux-s390x" "0.19.12"
+    "@esbuild/linux-x64" "0.19.12"
+    "@esbuild/netbsd-x64" "0.19.12"
+    "@esbuild/openbsd-x64" "0.19.12"
+    "@esbuild/sunos-x64" "0.19.12"
+    "@esbuild/win32-arm64" "0.19.12"
+    "@esbuild/win32-ia32" "0.19.12"
+    "@esbuild/win32-x64" "0.19.12"
+
+escalade@^3.1.1:
+  version "3.1.2"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-oVNDqzBC9h3GO+NTgWeLMhhGigy6/bQaQbHS+0z7C4YEu/qK/yxHvca/2PTZtGNPsCrHwOTgKMrwu02A9iPBmw==
+  dependencies:
+    eslint-utils "^2.1.0"
+    natural-compare "^1.4.0"
+    semver "^6.3.0"
+    vue-eslint-parser "^7.10.0"
+
+eslint-scope@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz"
+  integrity sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==
+  dependencies:
+    esrecurse "^4.3.0"
+    estraverse "^4.1.1"
+
+eslint-scope@^7.2.2:
+  version "7.2.2"
+  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"
+    estraverse "^5.2.0"
+
+eslint-utils@^2.1.0:
+  version "2.1.0"
+  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"
+  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"
+  integrity sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==
+
+"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"
+  integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ==
+  dependencies:
+    "@eslint-community/eslint-utils" "^4.2.0"
+    "@eslint-community/regexpp" "^4.6.1"
+    "@eslint/eslintrc" "^2.1.4"
+    "@eslint/js" "8.57.0"
+    "@humanwhocodes/config-array" "^0.11.14"
+    "@humanwhocodes/module-importer" "^1.0.1"
+    "@nodelib/fs.walk" "^1.2.8"
+    "@ungap/structured-clone" "^1.2.0"
+    ajv "^6.12.4"
+    chalk "^4.0.0"
+    cross-spawn "^7.0.2"
+    debug "^4.3.2"
+    doctrine "^3.0.0"
+    escape-string-regexp "^4.0.0"
+    eslint-scope "^7.2.2"
+    eslint-visitor-keys "^3.4.3"
+    espree "^9.6.1"
+    esquery "^1.4.2"
+    esutils "^2.0.2"
+    fast-deep-equal "^3.1.3"
+    file-entry-cache "^6.0.1"
+    find-up "^5.0.0"
+    glob-parent "^6.0.2"
+    globals "^13.19.0"
+    graphemer "^1.4.0"
+    ignore "^5.2.0"
+    imurmurhash "^0.1.4"
+    is-glob "^4.0.0"
+    is-path-inside "^3.0.3"
+    js-yaml "^4.1.0"
+    json-stable-stringify-without-jsonify "^1.0.1"
+    levn "^0.4.1"
+    lodash.merge "^4.6.2"
+    minimatch "^3.1.2"
+    natural-compare "^1.4.0"
+    optionator "^0.9.3"
+    strip-ansi "^6.0.1"
+    text-table "^0.2.0"
+
+espree@^6.2.1:
+  version "6.2.1"
+  resolved "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz"
+  integrity sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==
+  dependencies:
+    acorn "^7.1.1"
+    acorn-jsx "^5.2.0"
+    eslint-visitor-keys "^1.1.0"
+
+espree@^9.6.0, espree@^9.6.1:
+  version "9.6.1"
+  resolved "https://registry.npmjs.org/espree/-/espree-9.6.1.tgz"
+  integrity sha512-oruZaFkjorTpF32kDSI5/75ViwGeZginGGy2NoOSg3Q9bnwlnmDm4HLnkl0RE3n+njDXR037aY1+x58Z/zFdwQ==
+  dependencies:
+    acorn "^8.9.0"
+    acorn-jsx "^5.3.2"
+    eslint-visitor-keys "^3.4.1"
+
+esquery@^1.4.0, esquery@^1.4.2:
+  version "1.5.0"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==
+  dependencies:
+    "@nodelib/fs.stat" "^2.0.2"
+    "@nodelib/fs.walk" "^1.2.3"
+    glob-parent "^5.1.2"
+    merge2 "^1.3.0"
+    micromatch "^4.0.4"
+
+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"
+  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"
+  integrity sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==
+
+fastq@^1.6.0:
+  version "1.17.1"
+  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"
+  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"
+  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"
+  integrity sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng==
+  dependencies:
+    locate-path "^6.0.0"
+    path-exists "^4.0.0"
+
+flat-cache@^3.0.4:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/flat-cache/-/flat-cache-3.2.0.tgz"
+  integrity sha512-CYcENa+FtcUKLmhhqyctpclsq7QF38pKjZHsGNiSQF5r4FtoKDWabFDl3hzaEQMvT1LHEysw5twgLvpYYb4vbw==
+  dependencies:
+    flatted "^3.2.9"
+    keyv "^4.5.3"
+    rimraf "^3.0.2"
+
+flatted@^3.2.9:
+  version "3.3.1"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
+fs.realpath@^1.0.0:
+  version "1.0.0"
+  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"
+  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"
+  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:
+  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-parent@^6.0.2:
+  version "6.0.2"
+  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"
+  integrity sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.1.1"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
+globals@^13.19.0:
+  version "13.24.0"
+  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"
+  integrity sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==
+  dependencies:
+    array-union "^2.1.0"
+    dir-glob "^3.0.1"
+    fast-glob "^3.2.9"
+    ignore "^5.2.0"
+    merge2 "^1.4.1"
+    slash "^3.0.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"
+  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"
+  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"
+  integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
+
+he@^1.2.0:
+  version "1.2.0"
+  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"
+  integrity sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==
+  dependencies:
+    css-line-break "^2.1.0"
+    text-segmentation "^1.0.3"
+
+iconv-lite@^0.6.3:
+  version "0.6.3"
+  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"
+  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"
+  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"
+  integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
+  dependencies:
+    parent-module "^1.0.0"
+    resolve-from "^4.0.0"
+
+imurmurhash@^0.1.4:
+  version "0.1.4"
+  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"
+  integrity sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==
+  dependencies:
+    once "^1.3.0"
+    wrappy "1"
+
+inherits@2:
+  version "2.0.4"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==
+
+jsonfile@^6.0.1:
+  version "6.1.0"
+  resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-6.1.0.tgz"
+  integrity sha512-5dgndWOriYSm5cnYaJNhalLNDKOqFwyDB/rr1E9ZsGciGvKPs8R2xYGCacuf3z6K1YKDz182fd+fY3cn3pMqXQ==
+  dependencies:
+    universalify "^2.0.0"
+  optionalDependencies:
+    graceful-fs "^4.1.6"
+
+keycode@^2.2.0:
+  version "2.2.1"
+  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"
+  integrity sha512-p1NAIxiRMH3jYfTeXRs2uWbVJ1WpEjpi8ktzUyBJsX7/wn2qu2VRXktneBLNtKNxJmlUYxRi9gOJt1DuthXR7A==
+  dependencies:
+    "@cfcs/core" "^0.0.6"
+    "@daybrush/utils" "^1.7.1"
+    "@scena/event-emitter" "^1.0.2"
+    keycode "^2.2.0"
+
+keyv@^4.5.3:
+  version "4.5.4"
+  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@*, less@^4.1.1:
+  version "4.2.0"
+  resolved "https://registry.npmjs.org/less/-/less-4.2.0.tgz"
+  integrity sha512-P3b3HJDBtSzsXUl0im2L7gTO5Ubg8mEN6G8qoTS77iXxXX4Hvu4Qj540PZDvQ8V6DmX6iXo98k7Md0Cm1PrLaA==
+  dependencies:
+    copy-anything "^2.0.1"
+    parse-node-version "^1.0.1"
+    tslib "^2.3.0"
+  optionalDependencies:
+    errno "^0.1.1"
+    graceful-fs "^4.1.2"
+    image-size "~0.5.0"
+    make-dir "^2.1.0"
+    mime "^1.4.1"
+    needle "^3.1.0"
+    source-map "~0.6.0"
+
+levn@^0.4.1:
+  version "0.4.1"
+  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"
+    type-check "~0.4.0"
+
+locate-path@^6.0.0:
+  version "6.0.0"
+  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@*, lodash-es@^4.17.21:
+  version "4.17.21"
+  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"
+  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"
+  integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==
+
+lodash@*, lodash@^4.17.21:
+  version "4.17.21"
+  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"
+  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"
+  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"
+  integrity sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==
+  dependencies:
+    pify "^4.0.1"
+    semver "^5.6.0"
+
+memoize-one@^6.0.0:
+  version "6.0.0"
+  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"
+  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"
+  integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
+  dependencies:
+    braces "^3.0.2"
+    picomatch "^2.3.1"
+
+mime@^1.4.1:
+  version "1.6.0"
+  resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
+  integrity sha512-x0Vn8spI+wuJ1O6S7gnbaQg8Pxh4NNHb7KSINmEWKiPE4RKOplvijn+NkmYmmRgP68mc70j2EbeTFRsrswaQeg==
+
+minimatch@^3.0.5:
+  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.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"
+
+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"
+  integrity sha512-t1FK9PO187Gn0N6GVZcrQgePjiHmuj8eUhmJjH38LvTMnVVxiHzWYRx6ARFZvSFIIW4yb6BEAv4C99Bsx84nFw==
+  dependencies:
+    "@daybrush/utils" "^1.0.0"
+    scenejs "^1.4.2"
+
+moveable@^0.26.0:
+  version "0.26.0"
+  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"
+    react-compat-moveable "~0.14.0"
+
+ms@2.1.2:
+  version "2.1.2"
+  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"
+  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"
+  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"
+  integrity sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==
+
+needle@^3.1.0:
+  version "3.3.1"
+  resolved "https://registry.npmjs.org/needle/-/needle-3.3.1.tgz"
+  integrity sha512-6k0YULvhpw+RoLNiQCRKOl09Rv1dPLr8hHnVjHqdolKwDrdNyk+Hmrthi4lIGPPz3r39dLx0hsF5s40sZ3Us4Q==
+  dependencies:
+    iconv-lite "^0.6.3"
+    sax "^1.2.4"
+
+node-releases@^2.0.14:
+  version "2.0.14"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
+once@^1.3.0:
+  version "1.4.0"
+  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"
+  integrity sha512-JjCoypp+jKn1ttEFExxhetCKeJt9zhAgAve5FXHixTvFDW/5aEktX9bufBKLRRMdU7bNtpLfcGu94B3cdEJgjg==
+  dependencies:
+    "@aashutoshrathi/word-wrap" "^1.2.3"
+    deep-is "^0.1.3"
+    fast-levenshtein "^2.0.6"
+    levn "^0.4.1"
+    prelude-ls "^1.2.1"
+    type-check "^0.4.0"
+
+order-map@^0.3.1:
+  version "0.3.1"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
+
+picocolors@^1.0.0:
+  version "1.0.0"
+  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"
+  integrity sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==
+
+pify@^4.0.1:
+  version "4.0.1"
+  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"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
+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"
+  integrity sha512-u5U8qYpBCpN13BsiEB0CbR1Hhh4Gc0zLFuedrHJKMctHCHAGrMdG0PRM/KErzAL3CU6/eckEtmHNB3x6e3c0vA==
+  dependencies:
+    nanoid "^3.3.7"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
+prelude-ls@^1.2.1:
+  version "1.2.1"
+  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"
+  integrity sha512-yPw4Sng1gWghHQWj0B3ZggWUm4qVbPwPFcRG8KyxiU7J2OHFSoEHKS+EZ3fv5l1t9CyCiop6l/ZYeWbrgoQejw==
+
+punycode@^2.1.0:
+  version "2.3.1"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-YpUgTpXU1wR58aPQJVGAWq6QeEFWkafV0qq4Y8KRUwpQJLbJF2GYu5ZQ/kafHGvN3dqQX2e340NlNZ+zbZZv2w==
+  dependencies:
+    "@daybrush/utils" "^1.0.0"
+    css-styled "^1.0.0"
+    framework-utils "^1.1.0"
+    react-css-styled "~1.0.4"
+
+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"
+  integrity sha512-LkY38uGOuswRPvndwSco8znF+cOJJcXpighekRIdF+KTJ9h/2edI2RzBb0v5EvaG8gCXxGDdKMISTrDdzKnSFQ==
+  dependencies:
+    "@scena/react-guides" "~0.17.1"
+    react-compat-css-styled "^1.0.6"
+    react-compat-ruler "~0.8.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"
+  integrity sha512-z6julXupdwY1zytfDbXutdfY1wGmP+okoeC8PSb+Yd1Ju3bCTML6MQ6t6uivhqHVCQB+A6m1Ft76LlZmV8opvg==
+  dependencies:
+    "@daybrush/utils" "^1.6.0"
+    "@scena/dragscroll" "^1.0.1"
+    react-compat-css-styled "^1.0.5"
+    react-moveable "~0.29.0"
+    react-simple-compat "^1.2.1"
+
+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"
+  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"
+  integrity sha512-M7fJZ3IWFaIHcZEkoFOnkjdiUFmwd8d+gTh2bpqMOcnxy/0Gsykw4dsL4QBiKsxcGow6tETUa4NAUcmJF+/nfw==
+  dependencies:
+    css-styled "~1.0.8"
+    framework-utils "^1.1.0"
+
+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"
+  integrity sha512-nRske1bAKOCaf7Gf3o76tKQFIYggaW1qH4rutBlitH5lYnRPA7WoAYKrcxqdUPZd00oASg3SvFZSh3Mc1Wvj3w==
+  dependencies:
+    css-styled "~1.0.1"
+    framework-utils "^1.1.0"
+
+react-moveable@~0.29.0:
+  version "0.29.0"
+  resolved "https://registry.npmjs.org/react-moveable/-/react-moveable-0.29.0.tgz"
+  integrity sha512-dZ8jXc8WZQ3nsKsTh7h2h6cm8t0G2qc0Ie0a5DYgXX0N0kSrj0Q9psRTt6fZ5bRdIfonezM5r0Z4paTbbpRypA==
+  dependencies:
+    "@daybrush/utils" "^1.6.0"
+    "@egjs/agent" "^2.2.1"
+    "@egjs/children-differ" "^1.0.1"
+    "@scena/dragscroll" "^1.0.1"
+    "@scena/matrix" "^1.1.1"
+    css-to-mat "^1.0.3"
+    framework-utils "^1.1.0"
+    gesto "^1.2.1"
+    overlap-area "^1.0.0"
+    react-css-styled "^1.0.1"
+
+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"
+  integrity sha512-vYepRjSriGRyEmFtSsTQoHWVQRbBMYR4ONATeZtuf8GDY8jWGkc6R4+lIb5rVhPBIkx3ru68bpl+9r8V4YA/nA==
+  dependencies:
+    "@daybrush/utils" "^1.0.0"
+    "@egjs/list-differ" "^1.0.0"
+
+readdirp@~3.6.0:
+  version "3.6.0"
+  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"
+  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"
+  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"
+  integrity sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==
+  dependencies:
+    glob "^7.1.3"
+
+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"
+  integrity sha512-ggqQKvx/PsB0FaWXhIvVkSWh7a/PCLQAsMjBc+nA2M8Rv2/HG0X6zvixAB7KyZBRtifBUhy5k8voQX/mRnABPg==
+  dependencies:
+    "@types/estree" "1.0.5"
+  optionalDependencies:
+    "@rollup/rollup-android-arm-eabi" "4.12.1"
+    "@rollup/rollup-android-arm64" "4.12.1"
+    "@rollup/rollup-darwin-arm64" "4.12.1"
+    "@rollup/rollup-darwin-x64" "4.12.1"
+    "@rollup/rollup-linux-arm-gnueabihf" "4.12.1"
+    "@rollup/rollup-linux-arm64-gnu" "4.12.1"
+    "@rollup/rollup-linux-arm64-musl" "4.12.1"
+    "@rollup/rollup-linux-riscv64-gnu" "4.12.1"
+    "@rollup/rollup-linux-x64-gnu" "4.12.1"
+    "@rollup/rollup-linux-x64-musl" "4.12.1"
+    "@rollup/rollup-win32-arm64-msvc" "4.12.1"
+    "@rollup/rollup-win32-ia32-msvc" "4.12.1"
+    "@rollup/rollup-win32-x64-msvc" "4.12.1"
+    fsevents "~2.3.2"
+
+run-parallel@^1.1.9:
+  version "1.2.0"
+  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"
+  integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
+
+sax@^1.2.4:
+  version "1.3.0"
+  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"
+  integrity sha512-o1Xrz5sRMeVOD5R9MizY2tYVPYeRnQNttiNRD7vtfi4j4+su1nuP2R/1yv3jDNol1zFfFHwwh2G0jxyt0SIqUA==
+  dependencies:
+    "@cfcs/core" "^0.1.0"
+    "@daybrush/utils" "^1.10.2"
+    "@scena/event-emitter" "^1.0.3"
+    css-styled "^1.0.6"
+    order-map "^0.3.1"
+
+selecto@^1.13.0:
+  version "1.26.3"
+  resolved "https://registry.npmjs.org/selecto/-/selecto-1.26.3.tgz"
+  integrity sha512-gZHgqMy5uyB6/2YDjv3Qqaf7bd2hTDOpPdxXlrez4R3/L0GiEWDCFaUfrflomgqdb3SxHF2IXY0Jw0EamZi7cw==
+  dependencies:
+    "@daybrush/utils" "^1.13.0"
+    "@egjs/children-differ" "^1.0.1"
+    "@scena/dragscroll" "^1.4.0"
+    "@scena/event-emitter" "^1.0.5"
+    css-styled "^1.0.8"
+    css-to-mat "^1.1.1"
+    framework-utils "^1.1.0"
+    gesto "^1.19.4"
+    keycon "^1.2.0"
+    overlap-area "^1.1.0"
+
+semver@^5.6.0:
+  version "5.7.2"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
+
+slash@^3.0.0:
+  version "3.0.0"
+  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"
+  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"
+  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"
+  integrity sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==
+  dependencies:
+    buffer-from "^1.0.0"
+    source-map "^0.6.0"
+
+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"
+  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"
+  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"
+  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"
+  integrity sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==
+  dependencies:
+    has-flag "^4.0.0"
+
+terser@^5.28.1, terser@^5.4.0:
+  version "5.29.1"
+  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"
+    acorn "^8.8.2"
+    commander "^2.20.0"
+    source-map-support "~0.5.20"
+
+text-segmentation@^1.0.3:
+  version "1.0.3"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==
+  dependencies:
+    is-number "^7.0.0"
+
+ts-api-utils@^1.0.1:
+  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"
+  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"
+  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"
+  integrity sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==
+
+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"
+  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"
+  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"
+  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"
+  integrity sha512-A73dCu0fIMRodx1OoAZ4JruyAoenzTVFWMdukq3q7xR+vtcAy3B9uO1g3+WJMA1A9hWxo7iO5tVRGaD2lFNlWA==
+  dependencies:
+    "@rollup/pluginutils" "^5.0.2"
+    es-module-lexer "^1.3.0"
+    magic-string "^0.30.1"
+    unplugin "^1.3.2"
+
+unplugin@^1.3.2:
+  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"
+    webpack-sources "^3.2.3"
+    webpack-virtual-modules "^0.6.1"
+
+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"
+  integrity sha512-xebP81SNcPuNpPP3uzeW1NYXxI3rxyJzF3pD6sH4jE7o/IX+WtSpwnVU+qIsDPyk0d3hmFQ7mjqc6AtV604hbg==
+  dependencies:
+    escalade "^3.1.1"
+    picocolors "^1.0.0"
+
+uri-js@^4.2.2:
+  version "4.4.1"
+  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"
+  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"
+  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.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"
+  integrity sha512-BdN1xh0Of/oQafhU+FvopafUp6WaYenLU/NFoL5WyJL++GxkNfieKzBhM24H3HVsPQrlAqB7iJYTHabzaRed5Q==
+  dependencies:
+    esbuild "^0.19.3"
+    postcss "^8.4.35"
+    rollup "^4.2.0"
+  optionalDependencies:
+    fsevents "~2.3.3"
+
+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==
+
+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"
+  integrity sha512-qh3VhDLeh773wjgNTl7ss0VejY9bMMa0GoDG2fQVyDzRFdiU3L7fw74tWZDHNQXdZqxO3EveQroa9ct39D2nqg==
+  dependencies:
+    debug "^4.1.1"
+    eslint-scope "^5.1.1"
+    eslint-visitor-keys "^1.1.0"
+    espree "^6.2.1"
+    esquery "^1.4.0"
+    lodash "^4.17.21"
+    semver "^6.3.0"
+
+vue-router@^4.0.0-0:
+  version "4.3.0"
+  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"
+  integrity sha512-AYbUWAJHLGGQM7+cNTELw+KsOG9nl2CnSv467WobS5Cv9uk3wFcnr1Etsz2sEIHEZvw1U+o9mRlEO6QbZvUPGQ==
+  dependencies:
+    de-indent "^1.0.2"
+    he "^1.2.0"
+
+vue-tsc@^1.8.27:
+  version "1.8.27"
+  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@^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"
+  integrity sha512-W/7Fc9KUkajFU8dBeDluM4sRGc/aa4YJnOYck8dkjgZoXtVsn3OeTGni66FV1l3+nvPA7VBFYtPioaGKUmEADw==
+  dependencies:
+    "@vue/compiler-dom" "3.4.19"
+    "@vue/compiler-sfc" "3.4.19"
+    "@vue/runtime-dom" "3.4.19"
+    "@vue/server-renderer" "3.4.19"
+    "@vue/shared" "3.4.19"
+
+vuedraggable@^4.1.0:
+  version "4.1.0"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  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"
+  integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==