rebuilt: vuex to pinia

package-lock.json

@@ -17,6 +17,7 @@
         "@webtoon/psd": "^0.4.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
+        "cropperjs": "^1.6.1",
         "dayjs": "^1.10.7",
         "element-plus": "^2.3.7",
         "fontfaceobserver": "^2.1.0",
@@ -37,6 +38,7 @@
         "vuex": "^4.0.0-0"
       },
       "devDependencies": {
+        "@types/cropperjs": "^1.3.0",
         "@types/fontfaceobserver": "^2.1.3",
         "@types/node": "^20.11.24",
         "@types/throttle-debounce": "^2.1.0",
@@ -973,6 +975,16 @@
         "framework-utils": "^1.1.0"
       }
     },
+    "node_modules/@types/cropperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz",
+      "integrity": "sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==",
+      "deprecated": "This is a stub types definition. cropperjs provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "cropperjs": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1830,6 +1842,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cropperjs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz",
+      "integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA=="
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",

package.json

@@ -20,6 +20,7 @@
     "@webtoon/psd": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.10.7",
     "element-plus": "^2.3.7",
     "fontfaceobserver": "^2.1.0",
@@ -40,6 +41,7 @@
     "vuex": "^4.0.0-0"
   },
   "devDependencies": {
+    "@types/cropperjs": "^1.3.0",
     "@types/fontfaceobserver": "^2.1.3",
     "@types/node": "^20.11.24",
     "@types/throttle-debounce": "^2.1.0",

src/common/hooks/dragHelper.ts

@@ -6,7 +6,9 @@
  * @LastEditTime: 2023-11-22 18:11:15
  */
 
-import store from '@/store'
+import { useControlStore, useWidgetStore } from "@/pinia"
+
+// import store from '@/store'
 
 type TInitial = {
   offsetX: number
@@ -71,7 +73,10 @@ export default class DragHelper {
    */
   public start(e: MouseEvent, finallySize: number) {
     if (!this.cloneEl) {
-      store.commit('setDraging', true)
+      const controlStore = useControlStore()
+      controlStore.setDraging(true)
+      // store.commit('setDraging', true)
+
       const app = window.document.getElementById('app')
       if (!app || !e) return
       app.classList.add('drag_active') // 整个鼠标全局变成抓取
@@ -134,12 +139,19 @@ export default class DragHelper {
   }
   // 结束/完成处理（动画）
   private finish(done = false) {
+    
     if (!this.dragging) {
       return
     }
+
+    const controlStore = useControlStore()
+    const widgetStore = useWidgetStore()
     this.dragging = false
-    store.commit('setDraging', false)
+    controlStore.setDraging(false)
-    store.commit('selectItem', {})
+    // store.commit('setDraging', false)
+
+    widgetStore.setSelectItem({})
+    // store.commit('selectItem', {})
 
     if (!done) {
       const { pageX, offsetX, pageY, offsetY } = this.initial as TInitial

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[]) {
+// import { ComputedRef, computed } from 'vue'
-  const mapData: Partial<{[x in T]: ComputedRef}> = {}
+// import { useStore } from 'vuex'
-  const getters = useStore().getters
 
-  strList.forEach(val => {
+// export function useSetupMapGetters<T extends string>(strList: T[]) {
-    mapData[val] = computed(() => getters[val])
+//   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}
+// }

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'
+import { useCanvasStore, usePageStore } from '@/pinia'
-export default async function setCompData(item: TCommonItemData[] | string) {
+import { TdWidgetData } from '@/pinia/design/widget'
-  const group: TCommonItemData[] = typeof item === 'string' ? JSON.parse(item) : JSON.parse(JSON.stringify(item))
+// import store from '@/store'
-  let parent: Partial<TCommonItemData> = {}
+
+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

src/common/methods/DesignFeatures/setImage.ts

@@ -5,8 +5,9 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-01 20:55:51
  */
-import store from '@/store'
+// import store from '@/store'
 import { getImage } from '../getImgDetail'
+import { useCanvasStore, usePageStore } from '@/pinia'
 
 export type TItem2DataParam = {
   id?: string | number
@@ -24,8 +25,10 @@ export type TItem2DataResult = {
 }
 
 export default async function setItem2Data(item: TItem2DataParam): Promise<Required<TItem2DataParam>> {
+  const canvasStore = useCanvasStore()
+  const pageStore = usePageStore()
   const cloneItem = JSON.parse(JSON.stringify(item))
-  const { width: screenWidth, height: screenHeight } = store.getters.dPage
+  const { width: screenWidth, height: screenHeight } = pageStore.dPage
   let { width: imgWidth, height: imgHeight } = item
   if (!imgWidth || !imgHeight) {
     const actual = await getImage(item.url)
@@ -39,11 +42,11 @@ export default async function setItem2Data(item: TItem2DataParam): Promise<Requi
   }
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
-    cloneItem.width = cloneItem.width * ratio * (store.getters.dZoom / 100)
+    cloneItem.width = cloneItem.width * ratio * (canvasStore.dZoom / 100)
-    cloneItem.height = cloneItem.height * ratio * (store.getters.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
 }

src/common/methods/addMouseWheel.ts

@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-02 11:50:00
  */
 import { useControlStore } from '@/pinia'
-import store from '@/store'
+// import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
 type TAddEventObj = {

src/components/business/cropper/CropImage/CropImage.vue

@@ -23,17 +23,16 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
-import { storeToRefs } from 'pinia'
 import { useControlStore } from '@/pinia'
 
 export default defineComponent({
   components: { ElDialog },
   emits: ['done'],
   setup(props, context) {
-    const store = useStore()
+    // const store = useStore()
     const state = reactive({
       loading: false,
       url: '',

src/components/business/cropper/CropImage/index.vue

@@ -23,7 +23,7 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, reactive, nextTick, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
 import { useControlStore } from '@/pinia'
@@ -41,7 +41,7 @@ type TOpenItem = {
   imgUrl: string
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const state = reactive({
   loading: false,

src/components/business/image-cutout/ImageCutout/index.vue

@@ -41,7 +41,7 @@
 
 <script lang="ts" setup>
 import { reactive, nextTick, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElProgress } from 'element-plus'
 import { UploadFilled } from '@element-plus/icons-vue'
 import uploader from '@/components/common/Uploader/index.vue'
@@ -62,7 +62,7 @@ export type TImageCutoutState = {
     loading: boolean;
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const state = reactive<TImageCutoutState>({
   show: false,

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.radius = Number(mattingOptions.radius)
-  state.hardness = mattingOptions.hardness
+  state.hardness = Number(mattingOptions.hardness)
   state.constants = mattingOptions.constants
   mattingParam = mattingOptions
 }

src/components/business/moveable/Moveable.vue

@@ -9,25 +9,26 @@
   <div id="empty" class="moveable__remove-item zk-moveable-style"></div>
 </template>
 <script lang="ts" setup>
-import { defineComponent, nextTick, onMounted, watch } from 'vue'
+import { nextTick, onMounted, watch } from 'vue'
 
 import Moveable, { EVENTS } from 'moveable' // PROPERTIES, METHODS,
 import MoveableHelper from 'moveable-helper'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 // import { setTransformAttribute } from '@/common/methods/handleTransform'
 import useSelecto from './Selecto'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useWidgetStore, useForceStore, useHistoryStore } from '@/pinia'
 
-const store = useStore()
+// const store = useStore()
-//  computed: mapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'showMoveable', 'showRotatable', 'dWidgets', 'updateRect', 'updateSelect', 'guidelines']),
+const widgetStore = useWidgetStore()
-const {
-  dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets, updateRect, updateSelect
-} = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
 const controlStore = useControlStore()
+const forceStore = useForceStore()
+const historyStore = useHistoryStore()
 const { guidelines } = storeToRefs(useCanvasStore())
 const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
+const { dSelectWidgets, dActiveElement, activeMouseEvent, dWidgets } = storeToRefs(widgetStore)
+const { updateRect, updateSelect } = storeToRefs(forceStore)
 
 let _target: string | null = null
 
@@ -38,12 +39,12 @@ watch(
       await nextTick()
       checkMouseEvent()
     }, 10);
-    if (!val.record) {
+    if (!val || !val.record) {
       return
     }
     if (!moveable) return
     // 选中非面板 并且不是组合内的元素
-    if (val.uuid != -1) {
+    if (Number(val.uuid) != -1) {
       await nextTick()
       const target = `[id="${val.uuid}"]`
       _target = `[id="${val.uuid}"]`
@@ -70,7 +71,8 @@ watch(
         checkMouseEvent()
       })
       // // End
-      store.commit('setShowMoveable', true)
+      controlStore.setShowMoveable(true)
+      // store.commit('setShowMoveable', true)
       // 参考线设置
       if (moveable.elementGuidelines && !moveable.elementGuidelines.includes(target)) {
         moveable.elementGuidelines.push(target)
@@ -126,7 +128,7 @@ watch(
 watch(
   () => updateSelect.value,
   () => {
-    const items = store.getters.dSelectWidgets
+    const items = widgetStore.dSelectWidgets
     setTimeout(async () => {
       if (!moveable) return
       moveable.updateRect()
@@ -299,6 +301,7 @@ onMounted(() => {
 
   moveable
   .on('dragStart', ({ inputEvent, target, stop }) => {
+    if (!dActiveElement.value) return
     if (inputEvent.target.nodeName === 'PRE') {
       dActiveElement.value.editable && stop()
     }
@@ -313,25 +316,39 @@ onMounted(() => {
   .on('dragEnd', ({ target, isDrag, inputEvent }) => {
     // console.log('onDragEnd', inputEvent)
     // TODO 清理mouseevent
-    store.commit('setMouseEvent', null)
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
+
     inputEvent.stopPropagation()
     inputEvent.preventDefault()
     // console.log(this.holdPosition, inputEvent.pageX, inputEvent.pageY)
     if (holdPosition) {
-      store.dispatch("updateWidgetData", {
+      widgetStore.updateWidgetData({
-        uuid: dActiveElement.value.uuid,
+        uuid: dActiveElement.value?.uuid || "",
         key: 'left',
         value: Number(holdPosition?.left),
       })
-      store.dispatch("updateWidgetData", {
+      // store.dispatch("updateWidgetData", {
-        uuid: dActiveElement.value.uuid,
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'left',
+      //   value: Number(holdPosition?.left),
+      // })
+
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
         key: 'top',
         value: Number(holdPosition?.top),
       })
+      // store.dispatch("updateWidgetData", {
+      //   uuid: dActiveElement.value.uuid,
+      //   key: 'top',
+      //   value: Number(holdPosition?.top),
+      // })
+
       holdPosition = null // important
       setTimeout(() => {
-        store.dispatch("pushHistory")
+        historyStore.pushHistory()
-        // pushHistory()
+        // store.dispatch("pushHistory")
       }, 100)
     }
   })
@@ -352,19 +369,25 @@ onMounted(() => {
       const half = tf.substring(index + 1)
       rotate = half.slice(0, half.indexOf(')'))
     }
-    rotate &&
+    rotate && widgetStore.updateWidgetData({
-      store.dispatch("updateWidgetData", {
+      uuid: dActiveElement.value?.uuid || "",
-        uuid: dActiveElement.value.uuid,
+      key: 'rotate',
-        key: 'rotate',
+      value: rotate,
-        value: rotate,
+    })
-      })
+
+    // rotate &&
+    //   store.dispatch("updateWidgetData", {
+    //     uuid: dActiveElement.value.uuid,
+    //     key: 'rotate',
+    //     value: rotate,
+    //   })
   })
   .on('resizeStart', (args) => {
     console.log(args.target.style.transform)
     if (!moveable) return
     
     moveable.snappable = false
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       if (String(args.direction) === '1,0') {
         moveable.keepRatio = false
         moveable.scalable = false
@@ -376,7 +399,7 @@ onMounted(() => {
         startLS = Number(args.target!.style.letterSpacing.replace('px', ''))
         resetRatio = 1
       }
-    } else if (dActiveElement.value.type === 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+    } else if (dActiveElement.value?.type === 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
       const dirs = ['1,0', '0,-1', '-1,0', '0,1']
       dirs.includes(String(args.direction)) && (moveable.keepRatio = false)
     }
@@ -384,10 +407,10 @@ onMounted(() => {
   .on('resize', (args: any) => {
     const { target, width, height, dist, delta, clientX, clientY, direction } = args
     console.log(2, args)
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       if (String(direction) === '1,1') {
         resetRatio = width / resizeStartWidth
-        target!.style.fontSize = dActiveElement.value.fontSize * resetRatio + 'px'
+        target!.style.fontSize = (dActiveElement.value?.fontSize || 0) * resetRatio + 'px'
         target!.style.letterSpacing = startLS * resetRatio + 'px'
         target!.style.lineHeight = startHL * resetRatio + 'px'
       }
@@ -397,19 +420,23 @@ onMounted(() => {
       // moveable.updateRect()
       target.style.backgroundImage = 'none'
       // moveable.keepRatio !== this.resetRatio > 1 && (moveable.keepRatio = this.resetRatio > 1)
-    } else if (dActiveElement.value.type == 'w-image' || dActiveElement.value.type === 'w-qrcode' || dActiveElement.value.type === 'w-svg') {
+    } else if (dActiveElement.value?.type == 'w-image' || dActiveElement.value?.type === 'w-qrcode' || dActiveElement.value?.type === 'w-svg') {
       resizeTempData = { width, height }
-    } else if (dActiveElement.value.type == 'w-group') {
+    } else if (dActiveElement.value?.type == 'w-group') {
       // let record = this.dActiveElement.record
       // this.dActiveElement.tempScale = width / record.width
-      store.commit('resize', { width: width, height: height })
+
+      widgetStore.resize({ width: width, height: height })
+      // store.commit('resize', { width: width, height: height })
+
       // this.resizeTempData = { width, height }
       // let record = this.dActiveElement.record
       // setTransformAttribute(target, 'scale', width / record.width)
     } else {
-      store.commit('resize', { width: width, height: height })
+      widgetStore.resize({ width: width, height: height })
+      // store.commit('resize', { width: width, height: height })
     }
-    dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value.rotate}`))
+    dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('(0deg', `(${dActiveElement.value?.rotate}`))
   })
   .on('resizeEnd', (e: any) => {
     if (!moveable) return
@@ -435,19 +462,32 @@ onMounted(() => {
       // }
       const left = e.lastEvent.drag.translate[0]
       const top = e.lastEvent.drag.translate[1]
-      store.dispatch("updateWidgetMultiple", {
+      widgetStore.updateWidgetMultiple({
-        uuid: dActiveElement.value.uuid,
+        uuid: dActiveElement.value?.uuid || "",
         data: [
           {
             key: 'left',
-            value: Number(dActiveElement.value.left) + left,
+            value: Number(dActiveElement.value?.left) + left,
           },
           {
             key: 'top',
-            value: Number(dActiveElement.value.top) + top,
+            value: Number(dActiveElement.value?.top) + top,
           },
         ],
       })
+      // store.dispatch("updateWidgetMultiple", {
+      //   uuid: dActiveElement.value.uuid,
+      //   data: [
+      //     {
+      //       key: 'left',
+      //       value: Number(dActiveElement.value.left) + left,
+      //     },
+      //     {
+      //       key: 'top',
+      //       value: Number(dActiveElement.value.top) + top,
+      //     },
+      //   ],
+      // })
       // 重置translate
       const tf = e.target.style.transform
       const iof = tf.indexOf('translate')
@@ -459,26 +499,30 @@ onMounted(() => {
       // }, 10)
     }
     if (resizeTempData) {
-      store.commit('resize', resizeTempData)
+      widgetStore.resize(resizeTempData)
+      // store.commit('resize', resizeTempData)
+
       resizeTempData = null
       // await this.$nextTick()
       moveable.updateRect()
       // 临时处理缩放后细线问题 https://github.com/palxiao/poster-design/issues/75
-      store.commit('setShowMoveable', false)
+      controlStore.setShowMoveable(false)
+      // store.commit('setShowMoveable', false)
       setTimeout(() => {
-        store.commit('setShowMoveable', true)
+        controlStore.setShowMoveable(true)
+        // store.commit('setShowMoveable', true)
       }, 10);
     }
     try {
-      if (dActiveElement.value.type === 'w-text') {
+      if (dActiveElement.value?.type === 'w-text') {
         const d = e.direction || e.lastEvent.direction
-        String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value?.fontSize) * resetRatio)
       }
     } catch (err) {}
     moveable.keepRatio = true
   })
   .on('scaleStart', (e) => {
-    if (dActiveElement.value.type === 'w-text') {
+    if (dActiveElement.value?.type === 'w-text') {
       startHL = Number(e.target!.style.lineHeight.replace('px', ''))
       startLS = Number(e.target!.style.letterSpacing.replace('px', ''))
       resetRatio = 1
@@ -493,7 +537,7 @@ onMounted(() => {
     const { target, scale, transform } = e
     resetRatio = scale[0]
     target!.style.transform = transform
-    dActiveElement.value.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
+    dActiveElement.value?.rotate && (target!.style.transform = target!.style.transform.replace('0deg', dActiveElement.value.rotate))
   })
   .on('scaleEnd', (e: any) => {
     if (!moveable) return
@@ -502,9 +546,9 @@ onMounted(() => {
     moveable.keepRatio = true
     console.log(e.target.style.transform)
     try {
-      if (dActiveElement.value.type === 'w-text') {
+      if (dActiveElement.value?.type === 'w-text') {
         const d = e.direction || e.lastEvent.direction
-        String(d) === '1,1' && (dActiveElement.value.fontSize = dActiveElement.value.fontSize * resetRatio)
+        String(d) === '1,1' && (dActiveElement.value.fontSize = Number(dActiveElement.value.fontSize) * resetRatio)
       }
     } catch (err) {}
   })
@@ -516,13 +560,13 @@ onMounted(() => {
     for (let i = 0; i < events.length; i++) {
       const ev = events[i]
       const currentWidget = dWidgets.value.find((item: any) => item.uuid === ev.target.getAttribute('data-uuid'))
-      const left = Number(currentWidget.left) + ev.beforeTranslate[0]
+      const left = Number(currentWidget?.left) + ev.beforeTranslate[0]
       // debug -- start --
       if (i === 1) {
-        console.log(Number(currentWidget.left), ev.beforeTranslate[0])
+        console.log(Number(currentWidget?.left), ev.beforeTranslate[0])
       }
       // debug -- end --
-      const top = Number(currentWidget.top) + ev.beforeTranslate[1]
+      const top = Number(currentWidget?.top) + ev.beforeTranslate[1]
       ev.target.style.left = `${left}px`
       ev.target.style.top = `${top}px`
       holdGroupPosition[`${ev.target.getAttribute('data-uuid')}`] = { left, top }
@@ -532,16 +576,27 @@ onMounted(() => {
     for (const key in holdGroupPosition) {
       if (Object.prototype.hasOwnProperty.call(holdGroupPosition, key)) {
         const item = holdGroupPosition[key]
-        store.dispatch("updateWidgetData", {
+        widgetStore.updateWidgetData({
           uuid: key,
           key: 'left',
           value: item.left,
         })
-        store.dispatch("updateWidgetData", {
+        // store.dispatch("updateWidgetData", {
+        //   uuid: key,
+        //   key: 'left',
+        //   value: item.left,
+        // })
+
+        widgetStore.updateWidgetData({
           uuid: key,
           key: 'top',
           value: item.top,
         })
+        // store.dispatch("updateWidgetData", {
+        //   uuid: key,
+        //   key: 'top',
+        //   value: item.top,
+        // })
       }
     }
     holdGroupPosition = null
@@ -603,7 +658,8 @@ function checkMouseEvent() {
   if (activeMouseEvent.value && moveable) {
     moveable.dragStart(activeMouseEvent.value)
     // 使用后销毁mouseevent
-    store.commit('setMouseEvent', null)
+    widgetStore.setMouseEvent(null)
+    // store.commit('setMouseEvent', null)
   }
 }
 </script>

src/components/business/moveable/Selecto.ts

@@ -1,8 +1,10 @@
 import Selecto from 'selecto'
-import { getElementInfo } from 'moveable'
+import Moveable, { getElementInfo } from 'moveable'
-import store from '@/store'
+// import store from '@/store'
+import { useWidgetStore } from '@/pinia'
 
-export default function(moveable: any) {
+export default function(moveable: Moveable) {
+  const widgetStore = useWidgetStore()
   const selecto = new Selecto({
     container: document.getElementById('page-design'),
     selectableTargets: ['.layer'],
@@ -23,16 +25,22 @@ export default function(moveable: any) {
     e.added.forEach((el) => {
       if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) {
         el.classList.add('widget-selected')
-        store.dispatch('selectWidgetsInOut', {
+        widgetStore.selectWidgetsInOut({
-          uuid: el.getAttribute('data-uuid'),
+          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', {
+      widgetStore.selectWidgetsInOut({
-        uuid: el.getAttribute('data-uuid'),
+        uuid: el.getAttribute('data-uuid') || "",
       })
+      // store.dispatch('selectWidgetsInOut', {
+      //   uuid: el.getAttribute('data-uuid'),
+      // })
     })
     moveable.renderDirections = [] // ['nw', 'ne', 'sw', 'se'] // []
     moveable.rotatable = false

src/components/business/picture-selector/index.vue

@@ -32,7 +32,7 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
@@ -50,7 +50,7 @@ type TState = {
 
 const emits = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const state = reactive<TState>({

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'

src/components/business/right-click-menu/RcMenu.vue

@@ -1,7 +1,12 @@
 <template>
   <div v-show="showMenuBg" id="menu-bg" class="menu-bg" @click="closeMenu">
     <ul ref="menuList" class="menu-list" :style="styleObj">
-      <li v-for="(item, index) in menuListData.list" :key="index" :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }" @click.stop="selectMenu(item.type)">
+      <li
+        v-for="(item, index) in menuListData.list"
+        :key="index"
+        :class="{ 'menu-item': true, 'disable-menu': dCopyElement.length === 0 && item.type === 'paste' }"
+        @click.stop="selectMenu(item.type)"
+      >
         {{ item.text }}
       </li>
     </ul>
@@ -10,7 +15,7 @@
 
 <script lang="ts" setup>
 import { computed, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { 
   widgetMenu as widget, 
   pageMenu as page,
@@ -18,17 +23,20 @@ import {
   TMenuItemData, TWidgetItemData, 
 } from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { storeToRefs } from 'pinia';
-import { useControlStore } from '@/pinia';
+import { useControlStore, useWidgetStore } from '@/pinia';
 
-const store = useStore()
+// const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
 const showMenuBg = ref<boolean>(false)
 const widgetMenu = ref<TWidgetItemData[]>({...widget})
 const pageMenu = ref<TWidgetItemData[]>({...page})
 
-const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+const widgetStore = useWidgetStore()
+// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+
+const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
 const { dAltDown } = storeToRefs(useControlStore())
 
 
@@ -59,24 +67,27 @@ async function mouseRightClick(e: MouseEvent) {
     if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
       if (
-        widget.parent !== '-1' && 
+        widget?.parent !== '-1' && 
-        widget.parent !== dActiveElement.value.uuid &&
+        widget?.parent !== dActiveElement.value?.uuid &&
-        widget.parent !== dActiveElement.value.parent
+        widget?.parent !== dActiveElement.value?.parent
       ) {
-        uuid = widget.parent
+        uuid = widget?.parent || ""
       }
     }
-    store.dispatch('selectWidget', {
+    widgetStore.selectWidget({
       uuid: uuid ?? '-1',
     })
+    // store.dispatch('selectWidget', {
+    //   uuid: uuid ?? '-1',
+    // })
     showMenu(e)
   }
 }
 
 function showMenu(e: MouseEvent) {
-  let isPage = dActiveElement.value.uuid === '-1'
+  let isPage = dActiveElement.value?.uuid === '-1'
   menuListData.value.list = isPage ? pageMenu.value : widgetMenu.value
-  if (dActiveElement.value.isContainer) {
+  if (dActiveElement.value?.isContainer) {
     let ungroup: TWidgetItemData[] = [
       {
         type: 'ungroup',
@@ -109,33 +120,47 @@ function closeMenu() {
 function selectMenu(type: TWidgetItemData['type']) {
   switch (type) {
     case 'copy':
-      store.dispatch('copyWidget')
+      widgetStore.copyWidget()
+      // store.dispatch('copyWidget')
       break
     case 'paste':
       if (dCopyElement.value.length === 0) {
         return
       }
-      store.dispatch('pasteWidget')
+      widgetStore.pasteWidget()
+      // store.dispatch('pasteWidget')
       break
     case 'index-up':
-      store.dispatch('updateLayerIndex', {
+      widgetStore.updateLayerIndex({
-        uuid: dActiveElement.value.uuid,
+        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', {
+      widgetStore.updateLayerIndex({
-        uuid: dActiveElement.value.uuid,
+        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()

src/components/business/save-download/CreateCover.vue

@@ -10,17 +10,18 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import html2canvas from 'html2canvas'
 import Qiniu from '@/common/methods/QiNiu'
 // import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia';
-import { useCanvasStore } from '@/pinia';
+import { useCanvasStore, useWidgetStore } from '@/pinia';
-
-const store = useStore();
 
+// const store = useStore();
 // const { dZoom } = useSetupMapGetters(['dZoom'])
+
 const canvasStore = useCanvasStore()
+const widgetStore = useWidgetStore()
 const { dZoom } = storeToRefs(canvasStore)
 
 
@@ -30,9 +31,13 @@ const { dZoom } = storeToRefs(canvasStore)
 async function createCover(cb: any) {
   const nowZoom = dZoom.value
   // 取消选中元素
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
+
   canvasStore.updateZoom(100)
   // store.dispatch('updateZoom', 100)
 

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 { onMounted } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import {useStore } from 'vuex'
 import { getTarget } from '@/common/methods/target'
 // import { ElScrollbar } from 'element-plus'
 import setWidgetData from '@/common/methods/DesignFeatures/setWidgetData'
@@ -69,9 +84,9 @@ import PointImg from '@/utils/plugins/pointImg'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
-import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
+import { TPageState } from '@/pinia/design/page'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -82,24 +97,19 @@ type TParentData = {
   height?: number
 }
 
-type TSetting = {
+type TSetting = Partial<TPageState>
-  width?: number
-  height?: number
-  top?: number
-  left?: number
-}
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const canvasStore = useCanvasStore()
+
 const { pageDesignCanvasId } = defineProps<TProps>()
-const {
+
-  dWidgets,
-  dActiveElement, dSelectWidgets,
-  dHoverUuid
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
 const { dPage } = storeToRefs(usePageStore())
-const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
+const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
-const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
+const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
+const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
 
 
 let _dropIn: string | null = ''
@@ -123,11 +133,13 @@ onMounted(() => {
     // },
 
 async function dropOver(e: MouseEvent) {
+  if (!dActiveElement.value) return
   if (dActiveElement.value.editable || dActiveElement.value.lock) {
     return false
   }
   e.preventDefault()
-  let { data, type } = store.getters.selectItem
+  let { data, type } = widgetStore.selectItem
+  if (!data) return
   if (type !== 'image') {
     return
   }
@@ -136,7 +148,9 @@ async function dropOver(e: MouseEvent) {
   const target = await getTarget(eventTarget)
   if (!target) return
   const uuid = target.getAttribute('data-uuid')
-  store.dispatch('setDropOver', uuid)
+
+  widgetStore.setDropOver(uuid ?? "-1")
+  // store.dispatch('setDropOver', uuid)
 
   const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
   if (eventTarget.getAttribute('putIn')) {
@@ -157,10 +171,15 @@ async function drop(e: MouseEvent) {
   }
   if (!e || !e.target) return
   const eventTarget = e.target as HTMLElement
-  store.commit('setDraging', false)
+
+  controlStore.setDraging(false)
+  // store.commit('setDraging', false)
+
   const dropIn = _dropIn
   _dropIn = ''
-  store.dispatch('setDropOver', '-1')
+
+  widgetStore.setDropOver("-1")
+  // store.dispatch('setDropOver', '-1')
 
   // store.commit('setShowMoveable', false) // 清理上一次的选择
   controlStore.setShowMoveable(false) // 清理上一次的选择
@@ -168,9 +187,11 @@ async function drop(e: MouseEvent) {
   let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
   // e.stopPropagation()
   e.preventDefault()
-  let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
+  let { data: item, type } = JSON.parse(JSON.stringify(widgetStore.selectItem))
   // 清除临时数据
-  store.commit('selectItem', {})
+  widgetStore.setSelectItem({})
+  // store.commit('selectItem', {})
+
   let setting: TSetting = {}
   if (!type) {
     return
@@ -201,7 +222,8 @@ async function drop(e: MouseEvent) {
       element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
       element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
     })
-    store.dispatch('addGroup', componentItem)
+    widgetStore.addGroup(componentItem)
+    // store.dispatch('addGroup', componentItem)
     // addGroup(item)
   }
   // 设置坐标
@@ -224,6 +246,7 @@ async function drop(e: MouseEvent) {
       controlStore.setShowMoveable(true) // 恢复选择
 
       const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget) return
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
       //   !widget.imgs && (widget.imgs = {})
@@ -232,6 +255,7 @@ async function drop(e: MouseEvent) {
     } else {
       if (dropIn) {
         const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
+        if (!widget) return
         widget.imgUrl = item.value.url
         console.log('加入+', widget)
 
@@ -239,14 +263,16 @@ async function drop(e: MouseEvent) {
         controlStore.setShowMoveable(true) // 恢复选择
 
       } else {
-        store.dispatch('addWidget', setting) // 正常加入面板
+        widgetStore.addWidget(setting as Required<TPageState>)
+        // store.dispatch('addWidget', setting) // 正常加入面板
       }
     }
   } else if (type === 'bg') {
     console.log('背景图片放置')
   } else if (type !== 'group') {
     console.log(setting)
-    store.dispatch('addWidget', setting) // 正常加入面板
+    widgetStore.addWidget(setting as Required<TPageState>)
+    // store.dispatch('addWidget', setting) // 正常加入面板
   }
   // 清除临时数据
   // this.$store.commit('selectItem', {})
@@ -255,11 +281,11 @@ async function drop(e: MouseEvent) {
 function getScreen() {
   const pageDesignEl = document.getElementById('page-design')
   if (!pageDesignEl) return
-  store.dispatch('updateScreen', {
+  canvasStore.updateScreen({
     width: pageDesignEl.offsetWidth,
     height: pageDesignEl.offsetHeight,
   })
-  // updateScreen({
+  // store.dispatch('updateScreen', {
   //   width: pageDesignEl.offsetWidth,
   //   height: pageDesignEl.offsetHeight,
   // })
@@ -295,18 +321,19 @@ async function handleSelection(e: MouseEvent) {
     let uuid = target.getAttribute('data-uuid')
     if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget || !dActiveElement.value) return
       if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
-        uuid = widget.parent
+        uuid = widget.parent || null
       }
     }
 
     // 设置选中元素
     // this.$store.commit('setMoveable', false)
     if (showRotatable.value !== false) {
-      store.dispatch('selectWidget', {
+      widgetStore.selectWidget({
-        uuid: uuid,
+        uuid: uuid || " -1",
       })
-      // selectWidget({
+      // store.dispatch('selectWidget', {
       //   uuid: uuid,
       // })
     }
@@ -316,21 +343,21 @@ async function handleSelection(e: MouseEvent) {
     }
   } else {
     // 取消选中元素
-    store.dispatch('selectWidget', {
+    widgetStore.selectWidget({
-      uuid: '-1',
+      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) {

src/components/modules/layout/lineGuides.vue

@@ -11,7 +11,7 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
 import { useCanvasStore } from '@/pinia';
 
@@ -35,7 +35,7 @@ const props = withDefaults(defineProps<TProps>(), {
   show: false
 })
 
-const store = useStore()
+// const store = useStore()
 const canvasStore = useCanvasStore()
 const container = 'page-design' // page-design out-page
 let guidesTop: TGuidesData | null = null

src/components/modules/layout/zoomControl/index.vue

@@ -20,17 +20,17 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import addMouseWheel from '@/common/methods/addMouseWheel'
 import { OtherList, TZoomData, ZoomList } from './data';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
 import { storeToRefs } from 'pinia';
-import { useCanvasStore, usePageStore } from '@/pinia';
+import { useCanvasStore, useForceStore, usePageStore } from '@/pinia';
 
 const route = useRoute()
-const store = useStore()
+// const store = useStore()
 
 // 组件大小控制器
 let holder: number | undefined
@@ -48,9 +48,10 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
+// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
 const canvasStore = useCanvasStore()
 const { dPage } = storeToRefs(usePageStore())
+const { zoomScreenChange } = storeToRefs(useForceStore())
 const { dZoom, dScreen } = storeToRefs(canvasStore)
 
 
@@ -141,11 +142,11 @@ function changeScreen() {
   holder = setTimeout(() => {
     const screen = document.getElementById('page-design')
     if (!screen) return
-    store.dispatch('updateScreen', {
+    canvasStore.updateScreen({
       width: screen.offsetWidth,
       height: screen.offsetHeight,
     })
-    // updateScreen({
+    // store.dispatch('updateScreen', {
     //   width: screen.offsetWidth,
     //   height: screen.offsetHeight,
     // })
@@ -264,7 +265,9 @@ async function autoFixTop() {
     padding += presetPadding / 2
   }
   curAction.value === 'add' && (padding -= presetPadding)
-  store.commit('updatePaddingTop', padding > 0 ? padding : 0)
+
+  canvasStore.updatePaddingTop(padding > 0 ? padding : 0)
+  // store.commit('updatePaddingTop', padding > 0 ? padding : 0)
 }
 
 defineExpose({

src/components/modules/panel/components/layerList.vue

@@ -39,8 +39,10 @@
 </template>
 
 <script lang="ts">
+import { useWidgetStore } from '@/pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
 import { defineComponent, computed, reactive, ref, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import draggable from 'vuedraggable'
 
 export default defineComponent({
@@ -48,8 +50,9 @@ export default defineComponent({
   props: ['data'],
   emits: ['change'],
   setup(props, context) {
-    let widgets: any = ref([])
+    const widgetStore = useWidgetStore()
-    const state: any = reactive({
+    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) => {
+    const getIsActive = (uuid: string) => {
-      if (store.getters.dSelectWidgets.length > 0) {
+      if (widgetStore.dSelectWidgets.length > 0) {
-        let widget = store.getters.dSelectWidgets.find((item: any) => item.uuid === uuid)
+        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
     }
 

src/components/modules/panel/stylePanel.vue

@@ -9,7 +9,7 @@
         <el-button plain type="primary" class="gounp__btn" @click="handleCombine">成组</el-button>
         <icon-item-select label="" :data="iconList" @finish="alignAction" />
       </div>
-      <component :is="dActiveElement.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement.type" />
+      <component :is="dActiveElement?.type + '-style'" v-show="!showGroupCombined" v-if="dActiveElement?.type" />
     </div>
     <div v-show="activeTab === 1" class="layer-wrap">
       <layer-list :data="dWidgets" @change="layerChange" />
@@ -20,21 +20,28 @@
 <script setup lang="ts">
 // 样式设置面板
 // const NAME = 'style-panel'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
 import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
-import { useControlStore } from '@/pinia';
+import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
+import { TdWidgetData } from '@/pinia/design/widget';
+import type { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
+const groupStore = useGroupStore()
+const historyStore = useHistoryStore()
 
 const activeTab = ref(0)
 const iconList = ref<AlignListData[]>(alignIconList)
 const showGroupCombined = ref(false)
 
-const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+// const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+const { dActiveElement, dWidgets, dSelectWidgets } = storeToRefs(widgetStore)
 
 watch(
   dSelectWidgets,
@@ -49,31 +56,50 @@ watch(
 )
 
 function handleCombine() {
-  store.dispatch('realCombined')
+  groupStore.realCombined()
+  // store.dispatch('realCombined')
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
 function alignAction(item: TIconItemSelectData) {
-  const sWidgets = JSON.parse(JSON.stringify(dSelectWidgets.value))
+  const sWidgets: TdWidgetData[] = JSON.parse(JSON.stringify(dSelectWidgets.value))
-  store.dispatch('getCombined').then((group) => {
+  groupStore.getCombined().then(group => {
-    sWidgets.forEach((element: Record<string, any>) => {
+    sWidgets.forEach((element) => {
-      store.dispatch('updateAlign', {
+      widgetStore.updateAlign({
-        align: item.value,
+        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>[]) {
+function layerChange(newLayer: TdWidgetData[]) {
-  store.commit('setDWidgets', newLayer.toReversed())
+  widgetStore.setDWidgets(newLayer.toReversed())
+  // store.commit('setDWidgets', newLayer.toReversed())
 
   // store.commit('setShowMoveable', false)
   controlStore.setShowMoveable(false)

src/components/modules/panel/wrap/BgImgListWrap.vue

@@ -25,10 +25,10 @@
 <script lang="ts" setup>
 import { reactive, computed } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
-import { usePageStore } from '@/pinia';
+import { usePageStore, useWidgetStore } from '@/pinia';
 
 type TCommonPanelData = {
   color: string
@@ -56,8 +56,9 @@ type TState = {
 const { model } = defineProps<TProps>()
 
 
-const store = useStore()
+// const store = useStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
 
 const state = reactive<TState>({
   loading: false,
@@ -125,9 +126,12 @@ function setBGcolor(color: string) {
     value: color,
     pushHistory: true
   })
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
 }
 
 async function selectItem(item: TGetImageListResult) {
@@ -141,13 +145,17 @@ async function selectItem(item: TGetImageListResult) {
     value: item.url,
     pushHistory: true,
   })
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
 }
 
 function dragStart(_: MouseEvent, _item: TGetImageListResult) {
-  store.commit('selectItem', { data: {}, type: 'bg' })
+  widgetStore.setSelectItem({ data: {}, type: 'bg' })
+  // store.commit('selectItem', { data: {}, type: 'bg' })
 }
 
 

src/components/modules/panel/wrap/CompListWrap.vue

@@ -55,12 +55,12 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TState = {
   loading: boolean
@@ -88,8 +88,9 @@ const state = reactive<TState>({
   types: [],
   showList: [],
 })
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
@@ -188,9 +189,11 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
   dragHelper.start(e, img.canvasWidth)
   tempDetail = await getCompDetail({ id, type: 1 })
   if (Array.isArray(JSON.parse(tempDetail.data))) {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'group' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
   } else {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'text' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
   }
 }
 
@@ -216,26 +219,28 @@ const selectItem = async (item: TGetCompListResult) => {
       element.left += (pW - parent.width) / 2
       element.top += (pH - parent.height) / 2
     })
-    store.dispatch('addGroup', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addGroup', group)
   } else {
     group.text && (group.text = decodeURIComponent(group.text))
     group.left = pW / 2 - group.fontSize * (group.text.length / 2)
     group.top = pH / 2 - group.fontSize / 2
-    store.dispatch('addWidget', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addWidget', group)
   }
 }
 
-    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
+function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
-      // 有缓存则直接返回组件数据，否则请求获取数据
+  // 有缓存则直接返回组件数据，否则请求获取数据
-      return new Promise((resolve) => {
+  return new Promise((resolve) => {
-        if (compsCache[params.id]) {
+    if (compsCache[params.id]) {
-          resolve(compsCache[params.id])
+      resolve(compsCache[params.id])
-        } else api.home.getTempDetail(params).then((res: any) => {
+    } else api.home.getTempDetail(params).then((res: any) => {
-          resolve(res)
+      resolve(res)
-          compsCache[params.id] = res // 缓存请求的组件数据
+      compsCache[params.id] = res // 缓存请求的组件数据
-        })
+    })
-      })
+  })
-    }
+}
 
 defineExpose({
   load,

src/components/modules/panel/wrap/GraphListWrap.vue

@@ -44,11 +44,11 @@ import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 import wSvg from '../../widgets/wSvg/wSvg.vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
 import { TGetListData } from '@/api/material'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -82,8 +82,9 @@ const props = defineProps<TProps>()
 
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
@@ -213,15 +214,17 @@ async function selectItem(item: TGetListData) {
   if (item.type === 'mask') {
     setting.mask = item.url
   }
-  store.dispatch('addWidget', setting)
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 async function dragStart(e: MouseEvent, item: TGetListData) {
   startPoint = { x: e.x, y: e.y }
   const { width, height, thumb, url } = item
   const img = await setImageData({ width, height, url: thumb || url })
   dragHelper.start(e, img.canvasWidth)
-  store.commit('selectItem', { data: { value: item }, type: item.type })
+
-  // this.$store.commit('selectItem', { data: { value: item }, type: item.type })
+  widgetStore.setSelectItem({ data: { value: item }, type: item.type })
+  // store.commit('selectItem', { data: { value: item }, type: item.type })
 }
 </script>
 

src/components/modules/panel/wrap/PhotoListWrap.vue

@@ -31,10 +31,10 @@ import { toRefs, reactive, computed, onMounted } from 'vue'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
@@ -57,8 +57,9 @@ type TCurrentCategory = {
 
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
@@ -96,7 +97,9 @@ const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 const getDataList = async () => {
@@ -114,7 +117,9 @@ const getDataList = async () => {
 
 const dragStart = (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
-  store.commit('selectItem', { data: { value: item }, type: 'image' })
+
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 
 const searchChange = (e: Event) => {

src/components/modules/panel/wrap/TempListWrap.vue

@@ -23,16 +23,16 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router'
 // import chooseType from './components/chooseType.vue'
 // import editModel from './components/editModel.vue'
 import searchHeader from './components/searchHeader.vue'
 import useConfirm from '@/common/methods/confirm'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -54,11 +54,13 @@ const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const userStore = useUserStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -67,7 +69,7 @@ const state = reactive<TState>({
   searchKeyword: '',
 })
 
-const { tempEditing } = useSetupMapGetters(['tempEditing'])
+// const { tempEditing } = useSetupMapGetters(['tempEditing'])
 const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
@@ -130,7 +132,9 @@ async function selectItem(item: IGetTempListData) {
   }
   // store.commit('managerEdit', false)
   userStore.managerEdit(false)
-  store.commit('setDWidgets', [])
+
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   setTempId(item.id)
 
@@ -146,15 +150,19 @@ async function selectItem(item: IGetTempListData) {
 
   pageStore.setDPage(page)
   // store.commit('setDPage', page)
-  
+  widgetStore.setTemplate(widgets)
-  store.dispatch('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',
   // })

src/components/modules/panel/wrap/TextListWrap.vue

@@ -28,8 +28,8 @@ import { storeToRefs } from 'pinia';
 // import wText from '../../widgets/wText/wText.vue'
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
-import { useControlStore, usePageStore } from '@/pinia';
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia';
 
 type TBasicTextData = {
   text: string
@@ -37,8 +37,9 @@ type TBasicTextData = {
   fontWeight: string
 }
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 
@@ -56,7 +57,9 @@ const selectBasicText = (item: TBasicTextData) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 // const dragStart = (_: MouseEvent, item: any) => {

src/components/modules/panel/wrap/ToolsListWrap.vue

@@ -26,22 +26,23 @@
 // const NAME = 'tool-list-wrap'
 // import api from '@/api'
 import { ref, onMounted } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 // import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
+const widgetStore = useWidgetStore()
 const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
@@ -70,7 +71,9 @@ function addQrcode() {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
   // addWidget(setting)
 }
 

src/components/modules/panel/wrap/UserWrap.vue

@@ -39,7 +39,7 @@
 import { reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
@@ -53,7 +53,7 @@ import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
 import { storeToRefs } from 'pinia'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TProps = {
   active?: number
@@ -73,8 +73,9 @@ const props = defineProps<TProps>()
 
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
 
 const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
@@ -177,7 +178,9 @@ const selectImg = async (index: number) => {
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 type controlImgParam = {
@@ -228,7 +231,8 @@ state.editOptions = {
 
 const dragStart = (index: number) => {
   const item = state.imgList[index]
-  store.commit('selectItem', { data: { value: item }, type: 'image' })
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 const uploadDone = async (res: TUploadDoneData) => {
   await api.material.addMyPhoto(res)

src/components/modules/settings/colorSelect.vue

@@ -17,7 +17,7 @@
 
 <script lang="ts" setup>
 import {reactive, onMounted, watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
 import { useControlStore } from '@/pinia';
 
@@ -53,7 +53,7 @@ const props = withDefaults(defineProps<TProps>(), {
 
 const emit = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 
 const state = reactive<TState>({

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

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"

src/components/modules/widgets/pageStyle.vue

@@ -38,7 +38,7 @@
 // 画布组件样式
 // const NAME = 'page-style'
 import { nextTick, onMounted, reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../settings/numberInput.vue'
 import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
 import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
@@ -47,9 +47,10 @@ import _dl from '@/common/methods/download'
 // import ColorPipette from '@/utils/plugins/color-pipette'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { usePageStore } from '@/pinia'
+import { usePageStore, useWidgetStore } from '@/pinia'
-import { TPageStore } from '@/pinia/design/page'
+import { TPageState, } from '@/pinia/design/page'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   activeNames: string[]
@@ -62,8 +63,9 @@ type TState = {
   showBgLib: boolean
 }
 
-const store = useStore()
+// const store = useStore()
 const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
 const state = reactive<TState>({
   activeNames: ['1', '2', '3', '4'],
   innerElement: {},
@@ -74,7 +76,8 @@ const state = reactive<TState>({
   modes: ['颜色', '图片'],
   showBgLib: false
 })
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 let _localTempBG: string | null = null
 
 watch(
@@ -126,12 +129,15 @@ function changeValue() {
     return
   }
   for (let key in state.innerElement) {
-    if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+    if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[key] !== (dActiveElement.value as Record<string, any>)[key]
+    ) {
       if (state.ingoreKeys.indexOf(key) !== -1) {
-        dActiveElement.value[key] = state.innerElement[key]
+        (dActiveElement.value as Record<string, any>)[key] = state.innerElement[key]
       } else {
         pageStore.updatePageData({
-          key: key as keyof TPageStore,
+          key: key as keyof TPageState,
           value: state.innerElement[key],
         })
       }
@@ -139,7 +145,7 @@ function changeValue() {
   }
 }
 
-function finish(key: keyof TPageStore, value: string | number) {
+function finish(key: keyof TPageState, value: string | number) {
   pageStore.updatePageData({
     key: key,
     value: value,

src/components/modules/widgets/wGroup/wGroup.vue

@@ -26,11 +26,13 @@
 // 组合组件
 const NAME = 'w-group'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-type TParamsData = {
+export type TParamsData = {
   left: number
   top: number
   width: number
@@ -50,7 +52,9 @@ const props = withDefaults(defineProps<TProps>(), {
   params: () => ({}),
   parent: () => ({})
 })
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
+
 const widget = ref<HTMLElement | null>(null)
 const ratio = ref(0)
 const temp = ref<Record<string, any>>({})
@@ -77,7 +81,8 @@ const compWidgetsRecord = ref<Record<string, any>>({})
 // }
 
 const timer = ref<number | null>(null)
-const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 // watch: {
 //   params: {
@@ -111,19 +116,19 @@ onBeforeUnmount(() => {
 // ...mapActions(['updateWidgetData']),
 
 function updateRecord(tempScale ?: number) {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
     // clearTimeout(this.timer)
-    let record = dActiveElement.value.record
+    let record = dActiveElement.value?.record
-    if (record.width <= 0) {
+    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)
+    const widget = dWidgets.value.find((item) => item.uuid === uuid)
-    widget[key] = value + Number(props.params[key] || '')
+    if (!widget) return
+    (widget[key] as Number) = value + Number(props.params[key] || '')
   }, 10)
 }
 

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>
+        <!-- <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> -->
+        <div
+          class="ungroup style-item"
+          @click="widgetStore.ungroup(String(state.innerElement.uuid))"
+        >
+          取消组合
+        </div>
         <number-slider v-model="state.innerElement.opacity" class="style-item" label="不透明" :step="0.05" :maxValue="1" @finish="(value) => finish('opacity', value)" />
         <br />
         <icon-item-select class="style-item" label="" :data="layerIconList" @finish="layerAction" />
@@ -32,14 +37,19 @@
 // 组合组件样式
 // const NAME = 'w-group-style'
 import { reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wGroupSetting } from './groupSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useWidgetStore } from '@/pinia'
+import { storeToRefs } from 'pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TState = {
   activeNames: string[],
@@ -60,8 +70,10 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
+// const store = useStore()
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+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]
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]) {
-      store.dispatch("updateWidgetData", {
+      widgetStore.updateWidgetData({
-        uuid: dActiveElement.value.uuid,
+        uuid: dActiveElement.value?.uuid || "",
-        key: key,
+        key: (key as TUpdateWidgetPayload['key']),
-        value: state.innerElement[itemKey],
+        value: (state.innerElement[itemKey] as TUpdateWidgetPayload['value']),
       })
-      // this.updateWidgetData({
+      // store.dispatch("updateWidgetData", {
-      //   uuid: this.dActiveElement.uuid,
+      //   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", {
+  widgetStore.updateWidgetData({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
-    key: key,
+    key: key as TUpdateWidgetPayload['key'],
-    value: value,
+    value: value  as TUpdateWidgetPayload['value'],
     pushHistory: true,
   })
-  // this.updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.dActiveElement.uuid,
+  //   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", {
+  widgetStore.updateLayerIndex({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
-    value: item.value,
+    value: (item.value as TupdateLayerIndexData['value']),
     isGroup: true,
   })
-  // this.updateLayerIndex({
+  // store.dispatch("updateLayerIndex", {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   //   isGroup: true,
   // })
 }
 
 function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
+  widgetStore.updateAlign({
-    align: item.value,
+    align: (item.value as TUpdateAlignData['align']),
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
   })
+  // store.dispatch("updateAlign", {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
 }
 </script>
 

src/components/modules/widgets/wImage/wImage.vue

@@ -35,14 +35,14 @@
 // 图片组件
 // const NAME = 'w-image'
 import { CSSProperties, StyleValue, computed, nextTick, onBeforeUnmount, onMounted, onUpdated, reactive, ref, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import { getMatrix } from '@/common/methods/handleTransform'
 import setting from "./wImageSetting"
 import PointImg from '@/utils/plugins/pointImg'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
 
 type TProps = {
   params: typeof setting
@@ -83,20 +83,26 @@ const state = reactive<TState>({
 })
 const route = useRoute()
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 
 const widgetRef = ref<HTMLElement | null>(null)
 const targetRef = ref<HTMLImageElement | null>(null)
 
 let rotateTemp: number | null = null
 let flipTemp: string | null = null
-let locksTemp: string[] | null = null
+let locksTemp: boolean[] | null = null
 
-const {
+// const {
-  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+//   dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
-} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
 const { dZoom } = storeToRefs(useCanvasStore())
+const {
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid
+} = storeToRefs(widgetStore)
+const { dCropUuid } = storeToRefs(controlStore)
 
 // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
 const cropEdit = computed(() => {
@@ -137,7 +143,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -218,8 +225,8 @@ function move(payload?: MouseEvent) {
 }
 
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
-    let record = dActiveElement.value.record
+    let record = dActiveElement.value?.record
     if (widgetRef.value) {
       record.width = widgetRef.value.offsetWidth
       record.height = widgetRef.value.offsetHeight
@@ -247,14 +254,14 @@ function setTransform(attrName: string, value: string | number) {
   } else {
     setValue = props.params.transform + ` ${attrName}(${value})`
   }
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
     uuid: props.params.uuid,
     key: 'transform',
     value: setValue,
     pushHistory: false,
   })
-  // updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.params.uuid,
+  //   uuid: props.params.uuid,
   //   key: 'transform',
   //   value: setValue,
   //   pushHistory: false,
@@ -317,7 +324,7 @@ function lockOthers() {
   } else {
     locksTemp = []
     for (const widget of dWidgets.value) {
-      locksTemp.push(widget.lock)
+      locksTemp.push(widget?.lock || false)
     }
     dWidgets.value.forEach((widget: any) => {
       widget.uuid != props.params.uuid && (widget.lock = true)

src/components/modules/widgets/wImage/wImageStyle.vue

@@ -72,7 +72,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -86,11 +86,14 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import wImageSetting, { TImageSetting } from './wImageSetting'
 import { TGetImageListResult } from '@/api/material'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/pinia/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   picBoxShow: boolean
@@ -132,15 +135,17 @@ const state = reactive<TState>({
 const picBoxRef = ref<typeof picBox | null>(null)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
 
-const store = useStore()
+// const store = useStore()
-const {
+const widgetStore = useWidgetStore()
-  dActiveElement, dWidgets
+const forceStore = useForceStore()
-} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const canvasStore = useCanvasStore()
+// const {
+//   dActiveElement, dWidgets
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
 const controlStore = useControlStore()
 const { dMoving } = storeToRefs(controlStore)
-// computed: {
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
-//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+
-// },
 
 let lastUuid: string | undefined = undefined
 let tag: boolean
@@ -155,6 +160,7 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
       imgCrop(false)
@@ -196,34 +202,38 @@ function changeValue() {
   }
   for (let key in state.innerElement) {
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
+      (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[key]) {
+    } else if (
-      store.dispatch('updateWidgetData', {
+      key !== 'cropEdit' && key !== 'record' &&
-        uuid: dActiveElement.value.uuid,
+      state.innerElement[(key as keyof TImageSetting)] !== (dActiveElement.value as Record<string, any>)[key]
-        key: key,
+    ) {
-        value: state.innerElement[(key as keyof TImageSetting)],
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: (key as TUpdateWidgetPayload['key']),
+        value: (state.innerElement[(key as keyof TImageSetting)] as TUpdateWidgetPayload['value']),
       })
-      // updateWidgetData({
+      // store.dispatch('updateWidgetData', {
-      //   uuid: this.dActiveElement.uuid,
+      //   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({
+    // store.dispatch('updateWidgetData', {
-    //   uuid: dActiveElement.uuid,
+    //   uuid: dActiveElement.value.uuid,
     //   key: 'sliceData',
     //   value: data,
     //   pushHistory: true,
@@ -232,14 +242,14 @@ function finishSliceData(key: string, value: number | number[]) {
 }
 
 function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
-  store.dispatch('updateWidgetData', {
+  widgetStore.updateWidgetData({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
-    key: key,
+    key: (key as TUpdateWidgetPayload['key']),
-    value: value,
+    value: value as TUpdateWidgetPayload['value'],
     pushHistory: true,
   })
-  // this.updateWidgetData({
+  // store.dispatch('updateWidgetData', {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -248,30 +258,31 @@ function finish(key: string = "", value: string | number | (string | number)[] |
 
 function layerAction(item: TIconItemSelectData) {
   if (item.key === 'zIndex') {
-    store.dispatch("updateLayerIndex", {
+    widgetStore.updateLayerIndex({
-      uuid: dActiveElement.value.uuid,
+      uuid: dActiveElement.value?.uuid || "",
-      value: item.value,
+      value: (item.value as TupdateLayerIndexData['value']),
     })
-    // this.updateLayerIndex({
+    // store.dispatch("updateLayerIndex", {
-    //   uuid: this.dActiveElement.uuid,
+    //   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", {
+  widgetStore.updateAlign({
-    align: item.value,
+    align: (item.value as TUpdateAlignData['align']),
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 function openCropper() {
@@ -311,8 +322,8 @@ function openCropper() {
 async function selectDone(img: TGetImageListResult) {
   state.innerElement.imgUrl = img.url
   const loadImg = await getImage(img.url)
-  state.innerElement.width = loadImg.width * store.getters.dZoom / 100
+  state.innerElement.width = loadImg.width * canvasStore.dZoom / 100
-  state.innerElement.height = loadImg.height * store.getters.dZoom / 100
+  state.innerElement.height = loadImg.height * canvasStore.dZoom / 100
   // this.imgCrop(true)
 }
 
@@ -331,7 +342,8 @@ function imgCrop(val: boolean) {
 
 
 function cropHandle() {
-  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+  controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1')
+  // store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
 }
 
 // 图库选择器

src/components/modules/widgets/wQrcode/wQrcode.vue

@@ -35,12 +35,14 @@
 // 图片组件
 // const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import QRCode from '@/components/business/qrcode'
 import { TWQrcodeSetting } from './wQrcodeSetting';
 import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { Options } from 'qr-code-styling';
+import { useForceStore, useWidgetStore } from '@/pinia';
+import { storeToRefs } from 'pinia';
 
 type TProps = {
   params: TWQrcodeSetting & {
@@ -57,12 +59,15 @@ type TState = {
   qrCodeOptions: Options
 }
 
-const store = useStore()
+// const store = useStore()
+const forceStore = useForceStore()
+const widgetStore = useWidgetStore()
 const props = defineProps<TProps>()
 const state = reactive<TState>({
   qrCodeOptions: {}
 })
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 const width = computed(() => Number(props.params.width))
 const widgetRef = ref<HTMLElement | null>(null)
 
@@ -76,7 +81,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -88,8 +94,8 @@ onMounted(async () => {
 })
 // ...mapActions(['updateWidgetData']),
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
-    let record = dActiveElement.value.record
+    let record = dActiveElement.value?.record
     if (!widgetRef.value) return
     record.width = widgetRef.value.offsetWidth
     record.height = widgetRef.value.offsetHeight

src/components/modules/widgets/wQrcode/wQrcodeStyle.vue

@@ -58,7 +58,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { nextTick, reactive, watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElSelect, ElOption } from 'element-plus'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
@@ -72,9 +72,11 @@ import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vu
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { wQrcodeSetting, TWQrcodeSetting } from './wQrcodeSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useControlStore, useForceStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -96,15 +98,17 @@ const state = reactive<TState>({
   localization,
 })
 
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 
 
-const {
+// const {
-  dActiveElement, dWidgets
+//   dActiveElement, dWidgets
-} = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
 const { dMoving } = storeToRefs(useControlStore())
-// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 let lastUuid: string | null = null
 
@@ -112,16 +116,17 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
-    if (newValue.uuid == -1) {
+    if (Number(newValue.uuid) == -1) {
       state.innerElement.cropEdit = false
-      store.dispatch("updateWidgetData", {
+      widgetStore.updateWidgetData({
-        uuid: lastUuid,
+        uuid: lastUuid ?? "",
         key: 'cropEdit',
         value: false,
       })
-      // this.updateWidgetData({
+      // store.dispatch("updateWidgetData", {
-      //   uuid: this.lastUuid,
+      //   uuid: lastUuid,
       //   key: 'cropEdit',
       //   value: false,
       // })
@@ -163,31 +168,34 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TWQrcodeSetting
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      dActiveElement.value[itemKey] = state.innerElement[itemKey]
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+    } else if (
-      store.dispatch("updateWidgetData", {
+      key !== 'setting' && key !== 'record' &&
-        uuid: dActiveElement.value.uuid,
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
-        key: key,
+    ) {
-        value: state.innerElement[itemKey],
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: key as TUpdateWidgetPayload['key'],
+        value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
       })
-      // this.updateWidgetData({
+      // store.dispatch("updateWidgetData", {
-      //   uuid: this.dActiveElement.uuid,
+      //   uuid: dActiveElement.value.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[itemKey],
       // })
     }
   }
 }
 
 function finish(key: string, value: number | number[] | string) {
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
-    key: key,
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -196,27 +204,29 @@ function finish(key: string, value: number | number[] | string) {
 
 function layerAction(item: TIconItemSelectData) {
   console.log(item)
-  store.dispatch("updateLayerIndex", {
+  widgetStore.updateLayerIndex({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
-    value: item.value,
+    value: item.value as number,
   })
-  // this.updateLayerIndex({
+  // store.dispatch("updateLayerIndex", {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   // })
 }
 
 async function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
+  widgetStore.updateAlign({
-    align: item.value,
+    align: item.value as TUpdateAlignData['align'],
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || "",
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
+
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 async function uploadImgDone(img: TUploadDoneData) {

src/components/modules/widgets/wSvg/wSvg.vue

@@ -20,10 +20,13 @@
 <script lang="ts" setup>
 // svg
 // const NAME = 'w-svg'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
+import { useCanvasStore, useForceStore, useWidgetStore } from '@/pinia';
 import { TWSvgSetting } from './wSvgSetting'
 import { CSSProperties, computed, nextTick, onBeforeMount, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { storeToRefs } from 'pinia';
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
 type TProps = {
   params: TWSvgSetting
@@ -55,11 +58,15 @@ const state = reactive<TState>({
   attrRecord: {}, // 记录可更改的属性
   svgImg: null
 })
-const store = useStore()
+// const store = useStore()
-// ...mapGetters(['dActiveElement', 'dZoom', 'dMouseXY']),
+const widgetStore = useWidgetStore()
-const {
+const canvasStore = useCanvasStore()
-  dActiveElement, dZoom, dMouseXY
+const forceStore = useForceStore()
-} = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
+// const {
+//   dActiveElement, dZoom, dMouseXY
+// } = useSetupMapGetters(['dActiveElement', 'dZoom', 'dMouseXY'])
+const { dZoom } = storeToRefs(canvasStore)
+const { dActiveElement, dMouseXY } = storeToRefs(widgetStore)
 
 const widgetRef = ref<HTMLElement | null>(null)
 
@@ -116,7 +123,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -272,7 +280,7 @@ function color2obj() {
 }
 
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
     let record = dActiveElement.value.record
     if (widgetRef.value) {
       record.width = widgetRef.value.offsetWidth
@@ -311,14 +319,14 @@ function updateZoom() {
 }
 
 function changeFinish(key: string, value: number) {
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
     uuid: props.params.uuid,
-    key: key,
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.params.uuid,
+  //   uuid: props.params.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -336,7 +344,7 @@ function move(payload: Record<string, any>) {
 }
 
 function attrsChange() {
-  if (dActiveElement.value.uuid === props.params.uuid && svgElements) {
+  if (dActiveElement.value?.uuid === props.params.uuid && svgElements) {
     for (const element of svgElements) {
       const { item, attrsColor } = element
       for (const key in attrsColor) {

src/components/modules/widgets/wSvg/wSvgStyle.vue

@@ -37,7 +37,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -45,9 +45,11 @@ import colorSelect from '../../settings/colorSelect.vue'
 import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import { TWSvgSetting, wSvgSetting } from './wSvgSetting'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { storeToRefs } from 'pinia'
-import { useControlStore } from '@/pinia'
+import { useControlStore, useWidgetStore } from '@/pinia'
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -66,11 +68,13 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
+// const store = useStore()
-const {
+const widgetStore = useWidgetStore()
-  dActiveElement
+// const {
-} = useSetupMapGetters(['dActiveElement'])
+//   dActiveElement
+// } = useSetupMapGetters(['dActiveElement'])
 const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement } = storeToRefs(widgetStore)
 
 // ...mapGetters(['dActiveElement', 'dMoving']),
 
@@ -114,17 +118,20 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TWSvgSetting
     if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      dActiveElement.value[key] = state.innerElement[itemKey]
+      (dActiveElement.value as Record<string, any>)[key] = state.innerElement[itemKey]
-    } else if (itemKey !== 'setting' && itemKey !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+    } else if (
-      store.dispatch("updateWidgetData", {
+      itemKey !== 'setting' && itemKey !== 'record' &&
-        uuid: dActiveElement.value.uuid,
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
-        key: key,
+    ) {
-        value: state.innerElement[itemKey],
+      widgetStore.updateWidgetData({
+        uuid: dActiveElement.value?.uuid || "",
+        key: key as TUpdateWidgetPayload['key'],
+        value: state.innerElement[itemKey] as TUpdateWidgetPayload['value'],
       })
-      // this.updateWidgetData({
+      // store.dispatch("updateWidgetData", {
-      //   uuid: this.dActiveElement.uuid,
+      //   uuid: dActiveElement.value.uuid,
       //   key: key,
-      //   value: this.innerElement[key],
+      //   value: state.innerElement[itemKey],
       // })
     }
   }
@@ -135,14 +142,14 @@ function colorFinish(key: keyof TWSvgSetting) {
 }
 
 function finish(key: string, value: any) {
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
-    key: key,
+    key: key as TUpdateWidgetPayload['key'],
     value: value,
     pushHistory: true,
   })
-  // this.updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   key: key,
   //   value: value,
   //   pushHistory: true,
@@ -150,24 +157,24 @@ function finish(key: string, value: any) {
 }
 
 function layerAction(item: TIconItemSelectData) {
-  store.dispatch("updateLayerIndex", {
+  widgetStore.updateLayerIndex({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
-    value: item.value,
+    value: Number(item.value),
   })
-  // this.updateLayerIndex({
+  // store.dispatch("updateLayerIndex", {
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   //   value: item.value,
   // })
 }
 
 function alignAction(item: TIconItemSelectData) {
-  store.dispatch("updateAlign", {
+  widgetStore.updateAlign({
-    align: item.value,
+    align: item.value as TUpdateAlignData['align'],
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
   })
-  // this.updateAlign({
+  // store.dispatch("updateAlign", {
   //   align: item.value,
-  //   uuid: this.dActiveElement.uuid,
+  //   uuid: dActiveElement.value.uuid,
   // })
 }
 </script>

src/components/modules/widgets/wText/pageFontsFilter.ts

@@ -5,17 +5,19 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-10-14 20:29:26
  */
-import store from '@/store'
+// import store from '@/store'
+import { useWidgetStore } from '@/pinia'
 import { toRaw } from 'vue'
 export default () => {
+  const widgetStore = useWidgetStore()
   const collector = new Set<string>()
   const fonts: Record<string, any> = {}
-  const { dWidgets: widgets } = store.getters
+  const { dWidgets: widgets } = widgetStore
   for (let i = 0; i < widgets.length; i++) {
     const { type, fontClass } = widgets[i]
     if (type === 'w-text') {
-      collector.add(fontClass.id)
+      fontClass && collector.add(fontClass.id)
-      fonts[fontClass.id] = toRaw(fontClass)
+      fontClass && (fonts[fontClass.id] = toRaw(fontClass))
     }
   }
   return Array.from(collector).map((id: string) => fonts[id])

src/components/modules/widgets/wText/wText.vue

@@ -60,11 +60,12 @@
 // const NAME = 'w-text'
 
 import { reactive, toRefs, computed, onUpdated, watch, onMounted, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import { fontWithDraw } from '@/utils/widgets/loadFontRule'
 import getGradientOrImg from './getGradientOrImg'
 import { wTextSetting } from './wTextSetting'
+import { useForceStore, useHistoryStore, useWidgetStore } from '@/pinia'
 
 export type TwTextParams = {
   rotate?: number
@@ -83,7 +84,10 @@ type TProps = {
 
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+const historyStore = useHistoryStore()
 const route = useRoute()
 const state = reactive({
   loading: false,
@@ -93,7 +97,7 @@ const state = reactive({
 const widget = ref<HTMLElement | null>(null)
 const editWrap = ref<HTMLElement | null>(null)
 
-const dActiveElement = computed(() => store.getters.dActiveElement)
+const dActiveElement = computed(() => widgetStore.dActiveElement)
 const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
 
 onUpdated(() => {
@@ -142,18 +146,24 @@ watch(
 watch(
   () => state.editable,
   (value) => {
-    store.dispatch('updateWidgetData', {
+    widgetStore.updateWidgetData({
-      uuid: props.params.uuid,
+      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', {
+    widgetStore.updateWidgetData({
-      uuid: props.params.uuid,
+      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', {
+  widgetStore.updateWidgetData({
-    uuid: props.params.uuid,
+    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)
 }

src/components/modules/widgets/wText/wTextStyle.vue

@@ -52,7 +52,7 @@
 // 文本组件样式
 const NAME = 'w-text-style'
 import { defineComponent, reactive, toRefs, computed, watch, nextTick, onMounted } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 import { styleIconList1, styleIconList2, alignIconList, TStyleIconData, TStyleIconData2 } from '@/assets/data/TextIconsData'
 import layerIconList from '@/assets/data/LayerIconList'
@@ -67,7 +67,9 @@ import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
 import { storeToRefs } from 'pinia';
-import { useControlStore } from '@/pinia';
+import { useControlStore, useForceStore, useWidgetStore } from '@/pinia';
+import { TUpdateWidgetPayload } from '@/pinia/design/widget/actions/widget';
+import { TUpdateAlignData } from '@/pinia/design/widget/actions/align';
 
 type TState = {
   activeNames: string[],
@@ -84,7 +86,9 @@ type TState = {
   alignIconList: TIconItemSelectData[],
 }
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 const route = useRoute()
 const state = reactive<TState>({
   activeNames: [],
@@ -100,7 +104,7 @@ const state = reactive<TState>({
   styleIconList2,
   alignIconList,
 })
-const dActiveElement = computed(() => store.getters.dActiveElement)
+const dActiveElement = computed(() => widgetStore.dActiveElement)
 // const dMoving = computed(() => store.getters.dMoving)
 const { dMoving } = storeToRefs(useControlStore())
 
@@ -148,22 +152,32 @@ function changeValue() {
   for (let key in state.innerElement) {
     const itemKey = key as keyof TwTextData
     if (state.ingoreKeys.indexOf(itemKey) !== -1) {
-      dActiveElement.value[itemKey] = state.innerElement[itemKey]
+      (dActiveElement.value as Record<string, any>)[itemKey] = state.innerElement[itemKey]
-    } else if (key !== 'setting' && key !== 'record' && state.innerElement[itemKey] !== dActiveElement.value[itemKey]) {
+    } else if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[itemKey] !== (dActiveElement.value as Record<string, any>)[itemKey]
+    ) {
       // const pushHistory = !['textEffects', 'transformData', 'fontClass'].includes(key)
-      store.dispatch('updateWidgetData', {
+      widgetStore.updateWidgetData({
-        uuid: dActiveElement.value.uuid,
+        uuid: dActiveElement.value?.uuid || '',
-        key,
+        key: key as TUpdateWidgetPayload['key'],
         value: state.innerElement[itemKey],
         pushHistory: false,
       })
+      // store.dispatch('updateWidgetData', {
+      //   uuid: dActiveElement.value.uuid,
+      //   key,
+      //   value: state.innerElement[itemKey],
+      //   pushHistory: false,
+      // })
     }
   }
 }
 
 function selectTextEffect({ key, value, style }: any) {
-  const uuid = dActiveElement.value.uuid
+  const uuid = dActiveElement.value?.uuid || ''
-  store.commit('setWidgetStyle', { uuid, key, value })
+  widgetStore.setWidgetStyle({ uuid, key, value })
+  // store.commit('setWidgetStyle', { uuid, key, value })
   if (style) {
     finish('color', style.color || '')
   }
@@ -182,22 +196,32 @@ function loadFonts() {
 }
 
 function finish(key: string, value: number | Record<string, any> | string) {
-  store.dispatch('updateWidgetData', {
+  widgetStore.updateWidgetData({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
-    key,
+    key: key as TUpdateWidgetPayload['key'],
     value,
     pushHistory: false,
   })
+  // store.dispatch('updateWidgetData', {
+  //   uuid: dActiveElement.value.uuid,
+  //   key,
+  //   value,
+  //   pushHistory: false,
+  // })
   setTimeout(() => {
     key === 'fontClass' && (state.fontClassList['当前页面'] = usePageFontsFilter())
   }, 300)
 }
 
 function layerAction(item: TIconItemSelectData) {
-  store.dispatch('updateLayerIndex', {
+  widgetStore.updateLayerIndex({
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
-    value: item.value,
+    value: Number(item.value),
   })
+  // store.dispatch('updateLayerIndex', {
+  //   uuid: dActiveElement.value.uuid,
+  //   value: item.value,
+  // })
 }
 
 async function textStyleAction(item: TIconItemSelectData) {
@@ -206,16 +230,22 @@ async function textStyleAction(item: TIconItemSelectData) {
   // TODO: 对竖版文字的特殊处理
   item.key === 'writingMode' && relationChange()
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 async function alignAction(item: TIconItemSelectData) {
-  store.dispatch('updateAlign', {
+  widgetStore.updateAlign({
-    align: item.value,
+    align: item.value as TUpdateAlignData['align'],
-    uuid: dActiveElement.value.uuid,
+    uuid: dActiveElement.value?.uuid || '',
   })
+  // store.dispatch('updateAlign', {
+  //   align: item.value,
+  //   uuid: dActiveElement.value.uuid,
+  // })
   await nextTick()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 }
 
 function changeStyleIconList() {
@@ -250,7 +280,7 @@ function changeStyleIconList() {
 
 function relationChange() {
   setTimeout(() => {
-    if (dActiveElement.value.writingMode) {
+    if (dActiveElement.value && dActiveElement.value.writingMode) {
       const w_record = dActiveElement.value.width
       state.innerElement.width = dActiveElement.value.height
       state.innerElement.height = w_record

src/main.ts

@@ -8,7 +8,7 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+// import store from './store'
 import utils from './utils'
 import 'normalize.css/normalize.css'
 import '@/assets/styles/index.less'
@@ -27,7 +27,7 @@ elementConfig.plugins.forEach((plugin) => {
 })
 
 app
-  .use(store)
+  // .use(store)
   .use(pinia)
   .use(router)
   .use(utils)

src/mixins/methods/dealWithCtrl.ts

@@ -5,15 +5,17 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2024-03-15 17:34:51
  */
-import store from '@/store'
+// import store from '@/store'
 import handlePaste from './handlePaste'
-import { useHistoryStore } from '@/pinia'
+import { useGroupStore, useHistoryStore, useWidgetStore } from '@/pinia'
 
-export default function dealWithCtrl(e: any, _this: any) {
+export default function dealWithCtrl(e: KeyboardEvent, _this: any) {
+  const groupStore = useGroupStore()
   switch (e.keyCode) {
     case 71: // g
       e.preventDefault()
-      store.dispatch('realCombined')
+      groupStore.realCombined()
+      // store.dispatch('realCombined')
       break
     case 67: // c
       copy()
@@ -43,8 +45,9 @@ export default function dealWithCtrl(e: any, _this: any) {
  * 对组合的子元素某个值进行判断
  */
 function checkGroupChild(pid: number | string, key: any) {
+  const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
+  const childs = widgetStore.dWidgets.filter((x: any) => x.parent === pid) || []
   childs.forEach((element: any) => {
     element[key] && (itHas = true)
   })
@@ -54,24 +57,27 @@ function checkGroupChild(pid: number | string, key: any) {
  * 复制元素
  */
 function copy() {
-  if (store.getters.dActiveElement.uuid === '-1') {
+  const widgetStore = useWidgetStore()
+  if (widgetStore.dActiveElement?.uuid === '-1') {
     return
-  } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+  } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
     return
   }
-  !store.getters.dActiveElement.editable && store.dispatch('copyWidget')
+  !widgetStore.dActiveElement?.editable && widgetStore.copyWidget()
+  // !widgetStore.dActiveElement?.editable && store.dispatch('copyWidget')
 }
 /**
  * 粘贴
  */
 function paste() {
   handlePaste().then(() => {
-    if (store.getters.dCopyElement.length === 0) {
+    const widgetStore = useWidgetStore()
+    if (widgetStore.dCopyElement.length === 0) {
       return
-    } else if (store.getters.dActiveElement.isContainer && checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+    } else if (widgetStore.dActiveElement?.isContainer && checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
       return
     }
-    !store.getters.dActiveElement.editable && store.dispatch('pasteWidget')
+    !widgetStore.dActiveElement?.editable && widgetStore.pasteWidget()
   })
 }
 /**
@@ -79,7 +85,7 @@ function paste() {
  */
 function undo(shiftKey: any) {
   const historyStore = useHistoryStore()
-  console.log(store.getters.dHistoryParams);
+  console.log(historyStore.dHistoryParams);
   
   if (shiftKey) {
     if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
@@ -88,6 +94,7 @@ function undo(shiftKey: any) {
     }
   } else if (historyStore.dHistoryParams.index !== -1) {
     // this.handleHistory('undo')
-    store.dispatch('handleHistory', 'undo')
+    historyStore.handleHistory('undo')
+    // store.dispatch('handleHistory', 'undo')
   }
 }

src/mixins/methods/handlePaste.ts

@@ -11,7 +11,7 @@
 //   console.log('主动粘贴', clipdata.getData('text/plain'))
 // })
 
-import store from '@/store'
+// import store from '@/store'
 import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
@@ -20,18 +20,19 @@ import { getImage } from '@/common/methods/getImgDetail'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {
     const pageStore = usePageStore()
+    const widgetStore = useWidgetStore()
     const controlStore = useControlStore()
 
     navigator.clipboard
       .read()
-      .then(async (dataTransfer: any) => {
+      .then(async (dataTransfer: ClipboardItems) => {
-        if (store.getters.dActiveElement.editable) {
+        if (widgetStore.dActiveElement?.editable) {
           return
         }
         for (let i = 0; i < dataTransfer.length; i++) {
@@ -41,8 +42,8 @@ export default () => {
             const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
             // 上传图片
             const qnOptions = { bucket: 'xp-design', prePath: 'user' }
-            const result: any = await Qiniu.upload(file, qnOptions)
+            const result = await Qiniu.upload(file, qnOptions)
-            const { width, height }: any = await getImage(file)
+            const { width, height } = await getImage(file)
             const url = _config.IMG_URL + result.key
             await api.material.addMyPhoto({ width, height, url })
             // 刷新用户列表
@@ -58,7 +59,10 @@ export default () => {
             const { width: pW, height: pH } = pageStore.dPage
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
+
             // 清空剪贴板，防止多次上传图片
             navigator.clipboard.write([
               new ClipboardItem({
@@ -67,7 +71,8 @@ export default () => {
             ])
             // 最后尝试复制，将图片替换为图片组件
             setTimeout(() => {
-              store.dispatch('copyWidget')
+              widgetStore.copyWidget()
+              // store.dispatch('copyWidget')
             }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
@@ -76,7 +81,9 @@ export default () => {
             
             const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
             break
           } else resolve()
         }

src/mixins/methods/keyCodeOptions.ts

@@ -5,12 +5,14 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
-import { useControlStore } from '@/pinia'
+import { useControlStore, useWidgetStore } from '@/pinia'
-import store from '@/store'
+import { TdWidgetData } from '@/pinia/design/widget'
+// import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
   const { f } = params
   const controlStore = useControlStore()
+  const widgetStore = useWidgetStore()
 
   switch (e.keyCode) {
     case 38:
@@ -28,17 +30,22 @@ export default function keyCodeOptions(e: any, params: any) {
     case 46:
     case 8:
       {
-        if (store.getters.dActiveElement.isContainer) {
+        if (widgetStore.dActiveElement?.isContainer) {
-          if (checkGroupChild(store.getters.dActiveElement.uuid, 'editable')) {
+          if (checkGroupChild(widgetStore.dActiveElement?.uuid, 'editable')) {
             return
           }
         }
-        const { type, editable }: any = store.getters.dActiveElement
+        if (!widgetStore.dActiveElement) return
+        const { type, editable } = widgetStore.dActiveElement
 
         if (type === 'w-text') {
           // 不在编辑状态则执行删除
-          !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
+          !editable && controlStore.showMoveable && widgetStore.deleteWidget()
-        } else store.dispatch('deleteWidget')
+          // !editable && controlStore.showMoveable && store.dispatch('deleteWidget')
+        } else {
+          widgetStore.deleteWidget()
+          // store.dispatch('deleteWidget')
+        }
       }
       break
   }
@@ -46,10 +53,11 @@ export default function keyCodeOptions(e: any, params: any) {
 /**
  * 对组合的子元素某个值进行判断
  */
-function checkGroupChild(pid: number | string, key: any) {
+function checkGroupChild(pid: number | string, key: keyof TdWidgetData) {
+  const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
+  const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || []
-  childs.forEach((element: any) => {
+  childs.forEach((element) => {
     element[key] && (itHas = true)
   })
   return itHas
@@ -57,20 +65,28 @@ function checkGroupChild(pid: number | string, key: any) {
 /**
  * TODO 键盘操作上下左右移动组件
  */
-function udlr(type: any, value: any, event: any) {
+function udlr(type: keyof TdWidgetData, value: any, event: any) {
-  if (store.getters.dActiveElement.uuid != -1) {
+  const widgetStore = useWidgetStore()
-    if (store.getters.dActiveElement.editable) {
+  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
+    const result = Number(widgetStore.dActiveElement[type]) + value
-    store.dispatch('updateWidgetData', {
+    widgetStore.updateWidgetData({
-      uuid: store.getters.dActiveElement.uuid,
+      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()

src/mixins/move.ts

@@ -5,22 +5,29 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
-import { useControlStore } from '@/pinia'
+import { useControlStore, useWidgetStore } from '@/pinia'
-import store 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)
@@ -29,20 +36,27 @@ const move = {
       document.addEventListener('mouseup', this.handlemouseup, true)
     },
 
-    handlemousemove(e: any) {
+    handlemousemove(e: MouseEvent) {
+      const widgetStore = useWidgetStore()
       e.stopPropagation()
       e.preventDefault()
 
-      store.dispatch('dMove', {
+      widgetStore.dMove({
         x: e.pageX,
         y: e.pageY,
       })
+      // store.dispatch('dMove', {
+      //   x: e.pageX,
+      //   y: e.pageY,
+      // })
     },
 
     handlemouseup() {
+      const controlStore = useControlStore()
       document.removeEventListener('mousemove', this.handlemousemove, true)
       document.removeEventListener('mouseup', this.handlemouseup, true)
-      store.dispatch('stopDMove')
+      controlStore.stopDMove()
+      // store.dispatch('stopDMove')
     },
   },
 }
@@ -51,23 +65,35 @@ const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
       const controlStore = useControlStore()
+      const widgetStore = useWidgetStore()
       if (!controlStore.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
-        store.commit('setMouseEvent', e)
+        widgetStore.setMouseEvent(e)
+        // store.commit('setMouseEvent', e)
       }
 
-      const target = store.getters.dActiveElement
+      const target = widgetStore.dActiveElement
-      store.dispatch('initDMove', {
+      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 = () => {
-        // 销毁选中即刻移动
+        const widgetStore = useWidgetStore()
-        store.commit('setMouseEvent', null)
+        // 销毁选中即刻移
+        widgetStore.setMouseEvent(null)
+        // store.commit('setMouseEvent', null)
+        
         document.removeEventListener('mouseup', handlemouseup, true)
       }
       document.addEventListener('mouseup', handlemouseup, true)

src/pinia/design/canvas/index.ts

@@ -32,13 +32,6 @@ type TCanvasState = {
   guidelines: TGuidelinesData
 }
 
-type TStoreGetter = {
-  dZoom: (state: TCanvasState) => number
-  dPaddingTop: (state: TCanvasState) => number
-  dScreen: (state: TCanvasState) => TScreeData
-  guidelines: (state: TCanvasState) => TGuidelinesData
-}
-
 type TStoreAction = {
   /** 更新画布缩放百分比 */
   updateZoom: (zoom: number) => void
@@ -53,7 +46,7 @@ type TStoreAction = {
 }
 
 /** 画布全局设置 */
-const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
+const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
   state: () => ({
     dZoom: 0, // 画布缩放百分比
     dPaddingTop: 0, // 画布垂直居中修正值
@@ -71,12 +64,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
       horizontalGuidelines: [],
     },
   }),
-  getters: {
-    dZoom: state => state.dZoom,
-    dPaddingTop: state => state.dPaddingTop,
-    dScreen: state => state.dScreen,
-    guidelines: state => state.guidelines
-  },
   actions: {
     /** 更新画布缩放百分比 */
     updateZoom(zoom: number) {
@@ -88,6 +75,7 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
     },
     /** 更新编辑界面的宽高 */
     updateScreen({ width, height }: TScreeData) {
+      console.log(this.dScreen)
       this.dScreen.width = width
       this.dScreen.height = height
     },
@@ -103,6 +91,6 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
   }
 })
 
-export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
+export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
 
 export default CanvasStore

src/pinia/design/group/action/index.ts

@@ -20,7 +20,7 @@ export function realCombined(store: TGroupStore) {
   const selectWidgets = widgetStore.dSelectWidgets
   if (selectWidgets.length > 1) {
     const widgets = widgetStore.dWidgets
-    const group: TdWidgetData = JSON.parse(JSON.stringify(store.dGroupJson))
+    const group: TdWidgetData = JSON.parse(store.dGroupJson)
     group.uuid = nanoid()
     widgets.push(group)
     let left = Number(pageStore.dPage.width)

src/pinia/design/history/actions/pushHistory.ts

@@ -8,9 +8,10 @@
 
 import { usePageStore, useWidgetStore } from "@/pinia"
 import { THistoryStore } from ".."
+import { proxyToObject } from "@/utils/utils"
 
 /** push操作历史记录 */
-export function pushHistory(store: THistoryStore, msg: string) {
+export function pushHistory(store: THistoryStore, msg: string = "") {
   const pageStore = usePageStore()
   const selectStore = useWidgetStore()
   console.log('history压栈', '来源: ' + msg)
@@ -27,7 +28,7 @@ export function pushHistory(store: THistoryStore, msg: string) {
     store.dHistoryParams.index = history.length - 1
   }
   store.dHistory.push(JSON.stringify(selectStore.dWidgets))
-  store.dPageHistory.push(JSON.stringify(pageStore.dPage))
+  store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
   store.dHistoryParams.index = history.length - 1
   store.dHistoryParams.length = history.length
 }

src/pinia/design/history/index.ts

@@ -35,7 +35,7 @@ type THistoryAction = {
    * 修改数据、移动完成后都会自动保存
    * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
    */
-  pushHistory: (msg: string) => void
+  pushHistory: (msg?: string) => void
   /**
    * 操作历史记录
    * action为undo表示撤销

src/pinia/design/widget/actions/align.ts

@@ -14,7 +14,7 @@ type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
 export type TUpdateAlignData = {
   align: TAlign
   uuid: string
-  group: TdWidgetData
+  group?: TdWidgetData
 }
 
 export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {

src/pinia/design/widget/actions/index.ts

@@ -25,7 +25,7 @@ export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
 }
 
 export type TMovePayload = {
-  donotMove: boolean
+  donotMove?: boolean
   x: number
   y: number
 }
@@ -120,6 +120,6 @@ export function setDropOver(store: TWidgetStore, uuid: string) {
   store.dDropOverUuid = uuid
 }
 
-export function setMouseEvent(state: TWidgetStore, e: Event | null) {
+export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
   state.activeMouseEvent = e
 }

src/pinia/design/widget/actions/layer.ts

@@ -12,7 +12,7 @@ import { TWidgetStore, TdWidgetData } from ".."
 export type TupdateLayerIndexData = {
   uuid: string
   value: number
-  isGroup: boolean
+  isGroup?: boolean
 }
 
 export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {

src/pinia/design/widget/actions/select.ts

@@ -94,8 +94,8 @@ export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetD
 }
 
 export type TselectItem = {
-  data: Record<string, any>
+  data?: Record<string, any>
-  type: string
+  type?: string
 }
 
 export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {

src/pinia/design/widget/actions/widget.ts

@@ -11,13 +11,13 @@ import { TWidgetStore, TdWidgetData } from ".."
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
 
-type TUpdateWidgetKey =  'width' | 'height' | 'left' | 'top'
+type TUpdateWidgetKey = keyof TdWidgetData
 
 export type TUpdateWidgetPayload = {
   uuid: string
   key: TUpdateWidgetKey
-  value: number
+  value: number | string | boolean | Record<string, any>
-  pushHistory: boolean
+  pushHistory?: boolean
 }
 
 /** 更新组件数据 */
@@ -38,8 +38,8 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
       case 'left':
       case 'top':
         if (widget.isContainer) {
-          let dLeft = widget.left - value
+          let dLeft = widget.left - Number(value)
-          let dTop = widget.top - value
+          let dTop = widget.top - Number(value)
           if (key === 'left') {
             dTop = 0
           }
@@ -57,7 +57,7 @@ export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHi
         }
         break
     }
-    widget[key] = value
+    (widget[key] as TUpdateWidgetPayload['value']) = value
     if (pushHistory) {
       const historyStore = useHistoryStore()
       setTimeout(() => {
@@ -75,7 +75,7 @@ export type TUpdateWidgetMultiplePayload = {
     key: TUpdateWidgetKey
     value: number
   }[]
-  pushHistory: boolean
+  pushHistory?: boolean
 }
 
 /** 一次更新多个widget */
@@ -107,7 +107,7 @@ export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHist
           }
           break
       }
-      widget[key] = value
+      (widget[key] as number | string) = value
     }
   }
   setTimeout(() => {

src/pinia/design/widget/index.ts

@@ -19,10 +19,20 @@ import { TUpdateAlignData, updateAlign } from "./actions/align";
 import { TWidgetJsonData, widgetJsonData } from "./getter";
 import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
 
-export type TdWidgetData = TPageState & {
+export type TdWidgetData = TPageState & Partial<TCommonItemData> & {
   parent?: string
   isContainer?: boolean
   text?: string
+  editable?: boolean
+  lock?: boolean
+  imgUrl?: string
+  rotate?: string
+  transform?: string
+  sliceData?: Record<string, any>
+  flip?: boolean
+  cropEdit?: boolean
+  fontClass?: Record<string, any>
+  writingMode?: string
 }
 
 export type TWidgetState = {
@@ -54,11 +64,11 @@ export type TWidgetState = {
   /** 记录多选的组件 */
   dSelectWidgets: TdWidgetData[]
   /** 复制的组件（可能是单个也可能是数组） */
-  dCopyElement: TdWidgetData[] | TdWidgetData
+  dCopyElement: TdWidgetData[]
   /** 记录当前选择的元素, data */
-  selectItem: { data: Record<string, any> | null, type?: string }
+  selectItem: { data?: Record<string, any> | null, type?: string }
   /** 正在活动的鼠标事件 */
-  activeMouseEvent: Event | null
+  activeMouseEvent: MouseEvent | null
 }
 
 type TGetter = {
@@ -80,7 +90,7 @@ type TAction = {
   /** 一次更新多个widget */
   updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
   /** addWidget */
-  addWidget: (setting: TPageState) => void
+  addWidget: (setting: TdWidgetData) => void
   /** addGroup */
   addGroup: (group: TdWidgetData[]) => void
   /** setTemplate */
@@ -102,11 +112,11 @@ type TAction = {
   ungroup: (uuid: string) => void
   /** 设置拖拽时在哪个图层 */
   setDropOver: (uuid: string) => void
-  selectItem: (data: TselectItem) => void
+  setSelectItem: (data: TselectItem) => void
   resize: (data: TResize) => void
   setWidgetStyle: (data: TsetWidgetStyleData) => void
   setDWidgets: (data: TdWidgetData[]) => void
-  setMouseEvent: (e: Event | null) => void
+  setMouseEvent: (e: MouseEvent | null) => void
 }
 
 const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
@@ -161,7 +171,7 @@ const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("
     updateLayerIndex(data) { updateLayerIndex(this, data) },
     ungroup(uuid) { ungroup(this, uuid) },
     setDropOver(uuid) { setDropOver(this, uuid) },
-    selectItem(data: TselectItem) { selectItem(this, data) },
+    setSelectItem(data: TselectItem) { selectItem(this, data) },
     resize(data) { resize(this, data) },
     setWidgetStyle(data) { setWidgetStyle(this, data) },
     setDWidgets(data) { setDWidgets(this, data) },

src/utils/utils.ts

@@ -78,4 +78,32 @@ export const rndNum = (n: number, m: number) => {
   return random
 }
 
+/** Proxy 转 Object */
+export const proxyToObject = <P extends Record<string, any>>(proxy: P, seen = new WeakMap()): P => {
+  if (proxy === null || typeof proxy !== 'object') {
+    return proxy;
+  }
+
+  // 检查是否已经处理过该对象
+  if (seen.has(proxy)) {
+    return '[Circular Reference]' as any;
+  }
+
+  let obj: Record<string, any>;
+
+  if (Array.isArray(proxy)) {
+    obj = proxy.map(val => proxyToObject(val, seen)) as any;
+  } else {
+    obj = {};
+    // 将当前对象添加到已处理对象集合
+    seen.set(proxy, obj);
+    for (let key in proxy) {
+      if (proxy.hasOwnProperty(key)) {
+        obj[key] = proxyToObject(proxy[key], seen);
+      }
+    }
+  }
+  return obj as P;
+};
+
 export default {}

src/views/Draw.vue

@@ -10,7 +10,7 @@
 
 <script lang="ts" setup>
 import { StyleValue, onMounted, reactive, nextTick } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import api from '@/api'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import Preload from '@/utils/plugins/preload'
@@ -18,17 +18,17 @@ import FontFaceObserver from 'fontfaceobserver'
 import { fontWithDraw, font2style } from '@/utils/widgets/loadFontRule'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
 import zoomControl from '@/components/modules/layout/zoomControl/index.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { usePageStore } from '@/pinia'
+import { useGroupStore, usePageStore, useWidgetStore } from '@/pinia'
 
 type TState = {
   style: StyleValue
 }
 
-const store = useStore()
+// const store = useStore()
 const route = useRoute()
 const state = reactive<TState>({
   style: {
@@ -36,11 +36,14 @@ const state = reactive<TState>({
   },
 })
 const pageStore = usePageStore()
+const groupStore = useGroupStore()
+const widgetStore = useWidgetStore()
 const { dPage } = storeToRefs(pageStore)
 // const { dPage } = useSetupMapGetters(['dPage'])
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
+  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
+  // store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   nextTick(() => {
     load()
@@ -64,7 +67,8 @@ async function load() {
       dPage.value.width = width
       dPage.value.height = height
       dPage.value.backgroundColor = '#ffffff00'
-      store.dispatch('addGroup', content)
+      widgetStore.addGroup(content)
+      // store.dispatch('addGroup', content)
       // addGroup(content)
     } else {
       pageStore.setDPage(content.page)
@@ -72,11 +76,14 @@ async function load() {
       // 移除背景图，作为独立事件
       backgroundImage = content.page?.backgroundImage
       backgroundImage && delete content.page.backgroundImage
-      store.commit('setDPage', content.page)
+      pageStore.setDPage(content.page)
+      // store.commit('setDPage', content.page)
       if (id) {
-        store.commit('setDWidgets', widgets)
+        widgetStore.setDWidgets(widgets)
+        // store.commit('setDWidgets', widgets)
       } else {
-        store.dispatch('setTemplate', widgets)
+        widgetStore.setTemplate(widgets)
+        // store.dispatch('setTemplate', widgets)
       }
     }
 
@@ -118,7 +125,8 @@ async function load() {
     if (backgroundImage) {
       const preloadBg = new Preload([backgroundImage])
       await preloadBg.imgs()
-      store.commit('setDPage', {...content.page, ...{backgroundImage}})
+      pageStore.setDPage({...content.page, ...{backgroundImage}})
+      // store.commit('setDPage', {...content.page, ...{backgroundImage}})
     }
     try {
       fontWithDraw && (await font2style(fontContent, fontData))

src/views/Index.vue

@@ -58,7 +58,7 @@ import {
   CSSProperties, computed, nextTick,
   onBeforeUnmount, onMounted, reactive, ref,
 } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -68,11 +68,11 @@ import shortcuts from '@/mixins/shortcuts'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import HeaderOptions from './components/HeaderOptions.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -83,13 +83,16 @@ type TState = {
   showLineGuides: boolean
 }
 
-const {
+// const {
-  dActiveElement, dCopyElement
+//   dActiveElement, dCopyElement
-} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+// } = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+const widgetStore = useWidgetStore()
 const historyStore = useHistoryStore()
+const groupStore = useGroupStore()
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom } = storeToRefs(useCanvasStore())
 const { dHistoryParams } = storeToRefs(useHistoryStore())
+const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
 
 
 const state = reactive<TState>({
@@ -105,7 +108,7 @@ const state = reactive<TState>({
 })
 const optionsRef = ref<typeof HeaderOptions | null>(null)
 const zoomControlRef = ref<typeof zoomControl | null>(null)
-const store = useStore()
+// const store = useStore()
 const controlStore = useControlStore()
 const route = useRoute()
 
@@ -159,7 +162,8 @@ let checkCtrl: number | undefined
 const instanceFn = { save, zoomAdd, zoomSub }
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
+  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
+  // store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
@@ -199,11 +203,10 @@ function loadData() {
     if (!zoomControlRef.value) return
     // await nextTick()
     // zoomControlRef.value.screenChange()
+    
     // 初始化激活的控件为page
-    store.dispatch('selectWidget', { uuid: '-1' })
+    widgetStore.selectWidget({ uuid: '-1' })
-    // selectWidget({
+    // store.dispatch('selectWidget', { uuid: '-1' })
-    //   uuid: '-1',
-    // })
   })
 }
 

src/views/Psd.vue

@@ -56,7 +56,7 @@
 <script lang="ts" setup>
 import { reactive, onMounted, nextTick, onBeforeMount, ref, getCurrentInstance } from 'vue'
 import { useRoute } from 'vue-router'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import shortcuts from '@/mixins/shortcuts'
@@ -71,9 +71,9 @@ import HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'
 import { processPSD2Page } from '@/utils/plugins/psd'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import { useCanvasStore, useControlStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
 
 type TState = {
@@ -92,7 +92,8 @@ const state = reactive<TState>({
   downloadMsg: '',
   cancelText: '',
 })
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
 
 const route = useRoute()
@@ -142,7 +143,8 @@ async function loadPSD(file: File) {
       const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
       delete x.type
       x.src && (x.imgUrl = x.src) && delete x.src
-      store.dispatch('addWidget', Object.assign(rawData, x))
+      widgetStore.addWidget(Object.assign(rawData, x))
+      // store.dispatch('addWidget', Object.assign(rawData, x))
     }
 
     const { width, height, background: bg } = data
@@ -155,7 +157,8 @@ async function loadPSD(file: File) {
 }
 
 async function clear() {
-  store.commit('setDWidgets', [])
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
   // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
@@ -205,7 +208,8 @@ async function loadDone() {
   if (!zoomControlRef.value) return
   zoomControlRef.value.screenChange()
   setTimeout(() => {
-    store.dispatch('selectWidget', { uuid: '-1' })
+    widgetStore.selectWidget({ uuid: '-1' })
+    // store.dispatch('selectWidget', { uuid: '-1' })
     // selectWidget({
     //   uuid: '-1',
     // })

src/views/components/HeaderOptions.vue

@@ -29,7 +29,7 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { reactive, toRefs, ref } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import _dl from '@/common/methods/download'
 import useNotification from '@/common/methods/notification'
@@ -39,8 +39,8 @@ import copyRight from './CopyRight.vue'
 import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
+import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -62,16 +62,23 @@ const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
+// const store = useStore()
 const userStore = useUserStore()
+const widgetStore = useWidgetStore()
+
 const canvasImage = ref<typeof SaveImage | null>(null)
-const {
+
-  dWidgets, tempEditing
+// const {
-} = useSetupMapGetters(['dWidgets', 'tempEditing'])
+//   dWidgets, tempEditing
+// } = useSetupMapGetters(['dWidgets', 'tempEditing'])
+
 const pageStore = usePageStore()
 const controlStore = useControlStore()
+const historyStore = useHistoryStore()
 
 const { dPage } = storeToRefs(pageStore)
+const { tempEditing } = storeToRefs(userStore)
+const { dWidgets } = storeToRefs(widgetStore)
 const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
 
 
@@ -111,6 +118,7 @@ async function saveTemp() {
     // 保存组件，组合元素要保证在最后一位，才能默认选中
     if (dWidgets.value[0].type === 'w-group') {
       const group = dWidgets.value.shift()
+      if (!group) return
       group.record.width = 0
       group.record.height = 0
       dWidgets.value.push(group)
@@ -203,15 +211,18 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
       // 加载文字组合组件
       dPage.value.width = width
       dPage.value.height = height
-      store.dispatch('addGroup', data)
+      widgetStore.addGroup(data)
+      // store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
       pageStore.setDPage(data.page)
       // store.commit('setDPage', data.page)
-      id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
+      id ? widgetStore.setDWidgets(data.widgets) : widgetStore.setTemplate(data.widgets)
+      // id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
-    store.dispatch('pushHistory', '请求加载load')
+    historyStore.pushHistory('请求加载load')
+    // store.dispatch('pushHistory', '请求加载load')
     // pushHistory('请求加载load')
   }
 }

src/views/components/UploadTemplate.vue

@@ -14,16 +14,17 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { reactive, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import useNotification from '@/common/methods/notification'
 import SaveImage from '@/components/business/save-download/CreateCover.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import _config from '@/config'
 import github from '@/api/github'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore } from '@/pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/pinia'
 import { storeToRefs } from 'pinia'
+import { TdWidgetData } from '@/pinia/design/widget'
 
 type TProps = {
   modelValue?: string
@@ -48,7 +49,7 @@ type TState = {
   loading: false,
 }
 
-const { dWidgets } = useSetupMapGetters(['dWidgets'])
+// const { dWidgets } = useSetupMapGetters(['dWidgets'])
 const { dPage } = storeToRefs(usePageStore())
 
 const props = defineProps<TProps>()
@@ -57,8 +58,10 @@ const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
 const controlStore = useControlStore()
+const { dWidgets } = storeToRefs(widgetStore)
 
 const canvasImage = ref<typeof SaveImage | null>(null)
 const state = reactive<TState>({
@@ -85,8 +88,8 @@ const draw = () => {
 let addition = 0 // 累加大小
 let lenCount = 0 // 全部大小
 let lens = 0 // 任务数
-const queue: { type: string, imgUrl: string }[] = [] // 队列
+const queue: TdWidgetData[] = [] // 队列
-let widgets: { type: string, imgUrl: string }[] = []
+let widgets: TdWidgetData[] = []
 let page: Record<string, any> = {}
 
 async function prepare() {
@@ -105,7 +108,7 @@ async function prepare() {
 
   for (const item of widgets) {
     if (item.type === 'w-image') {
-      lenCount += item.imgUrl.length
+      lenCount += (item.imgUrl?.length || 0)
       queue.push(item)
     }
   }
@@ -117,8 +120,8 @@ async function uploadImgs() {
   if (queue.length > 0) {
     const item = queue.pop()
     if (!item) return
-    const url = await github.putPic(item.imgUrl.split(',')[1])
+    const url = await github.putPic((item?.imgUrl || '').split(',')[1])
-    addition += item.imgUrl.length
+    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}` })

yarn.lock

@@ -282,6 +282,13 @@
     "@daybrush/utils" "^1.6.0"
     framework-utils "^1.1.0"
 
+"@types/cropperjs@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz"
+  integrity sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==
+  dependencies:
+    cropperjs "*"
+
 "@types/estree@^1.0.0", "@types/estree@1.0.5":
   version "1.0.5"
   resolved "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz"
@@ -778,6 +785,11 @@ core-js@^3.6.5:
   resolved "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz"
   integrity sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==
 
+cropperjs@*, cropperjs@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz"
+  integrity sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA==
+
 cross-env@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz"
@@ -1544,6 +1556,11 @@ minimatch@^9.0.3, minimatch@9.0.3:
   dependencies:
     brace-expansion "^2.0.1"
 
+mitt@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.npmjs.org/mitt/-/mitt-3.0.1.tgz"
+  integrity sha512-vKivATfr97l2/QBCYAkXYDbrIWPM2IIKEl7YPhjCvKlG3kE2gm+uBo6nEXK3M5/Ffh/FLpKExzOQ3JJoJGFKBw==
+
 moveable-helper@^0.4.0:
   version "0.4.0"
   resolved "https://registry.npmjs.org/moveable-helper/-/moveable-helper-0.4.0.tgz"