Merge pull request #113 from JeremyYu-cn/feat-upgrade-vue3

Merge: feat-pinia branch

package-lock.json

@@ -17,6 +17,7 @@
         "@webtoon/psd": "^0.4.0",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
+        "cropperjs": "^1.6.1",
         "dayjs": "^1.10.7",
         "element-plus": "^2.3.7",
         "fontfaceobserver": "^2.1.0",
@@ -26,6 +27,7 @@
         "moveable-helper": "^0.4.0",
         "nanoid": "^3.1.23",
         "normalize.css": "^8.0.1",
+        "pinia": "^2.1.7",
         "qr-code-styling": "^1.6.0-rc.1",
         "selecto": "^1.13.0",
         "throttle-debounce": "^3.0.1",
@@ -36,6 +38,7 @@
         "vuex": "^4.0.0-0"
       },
       "devDependencies": {
+        "@types/cropperjs": "^1.3.0",
         "@types/fontfaceobserver": "^2.1.3",
         "@types/node": "^20.11.24",
         "@types/throttle-debounce": "^2.1.0",
@@ -972,6 +975,16 @@
         "framework-utils": "^1.1.0"
       }
     },
+    "node_modules/@types/cropperjs": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@types/cropperjs/-/cropperjs-1.3.0.tgz",
+      "integrity": "sha512-U3a/z302duKpXUHfMneFjrWDDoq5n+nsJ/YeJHoTI9LXSBtSsqMUyxEJPIMAzfDawF5nuG5c9FN2gY//ZGl5PA==",
+      "deprecated": "This is a stub types definition. cropperjs provides its own type definitions, so you do not need this installed.",
+      "dev": true,
+      "dependencies": {
+        "cropperjs": "*"
+      }
+    },
     "node_modules/@types/estree": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.5.tgz",
@@ -1829,6 +1842,11 @@
         "url": "https://opencollective.com/core-js"
       }
     },
+    "node_modules/cropperjs": {
+      "version": "1.6.1",
+      "resolved": "https://registry.npmjs.org/cropperjs/-/cropperjs-1.6.1.tgz",
+      "integrity": "sha512-F4wsi+XkDHCOMrHMYjrTEE4QBOrsHHN5/2VsVAaRq8P7E5z7xQpT75S+f/9WikmBEailas3+yo+6zPIomW+NOA=="
+    },
     "node_modules/cross-env": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
@@ -3282,6 +3300,56 @@
         "node": ">=6"
       }
     },
+    "node_modules/pinia": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.1.7.tgz",
+      "integrity": "sha512-+C2AHFtcFqjPih0zpYuvof37SFxMQ7OEG2zV9jRI12i9BOy3YQVAHwdKtyyc8pDcDyIc33WCIsZaCFWU7WWxGQ==",
+      "dependencies": {
+        "@vue/devtools-api": "^6.5.0",
+        "vue-demi": ">=0.14.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/posva"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.4.0",
+        "typescript": ">=4.4.4",
+        "vue": "^2.6.14 || ^3.3.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        },
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/pinia/node_modules/vue-demi": {
+      "version": "0.14.7",
+      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.7.tgz",
+      "integrity": "sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==",
+      "hasInstallScript": true,
+      "bin": {
+        "vue-demi-fix": "bin/vue-demi-fix.js",
+        "vue-demi-switch": "bin/vue-demi-switch.js"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@vue/composition-api": "^1.0.0-rc.1",
+        "vue": "^3.0.0-0 || ^2.6.0"
+      },
+      "peerDependenciesMeta": {
+        "@vue/composition-api": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.35",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",

package.json

@@ -20,6 +20,7 @@
     "@webtoon/psd": "^0.4.0",
     "axios": "^0.21.1",
     "core-js": "^3.6.5",
+    "cropperjs": "^1.6.1",
     "dayjs": "^1.10.7",
     "element-plus": "^2.3.7",
     "fontfaceobserver": "^2.1.0",
@@ -29,16 +30,17 @@
     "moveable-helper": "^0.4.0",
     "nanoid": "^3.1.23",
     "normalize.css": "^8.0.1",
+    "pinia": "^2.1.7",
     "qr-code-styling": "^1.6.0-rc.1",
     "selecto": "^1.13.0",
     "throttle-debounce": "^3.0.1",
     "vite-plugin-compression": "^0.5.1",
     "vue": "3.4.19",
     "vue-router": "^4.0.0-0",
-    "vuedraggable": "^4.1.0",
+    "vuedraggable": "^4.1.0"
-    "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 "@/store"
+
+// import store from '@/store'
 
 type TInitial = {
   offsetX: number
@@ -71,7 +73,10 @@ export default class DragHelper {
    */
   public start(e: MouseEvent, finallySize: number) {
     if (!this.cloneEl) {
-      store.commit('setDraging', true)
+      const controlStore = useControlStore()
+      controlStore.setDraging(true)
+      // store.commit('setDraging', true)
+
       const app = window.document.getElementById('app')
       if (!app || !e) return
       app.classList.add('drag_active') // 整个鼠标全局变成抓取
@@ -134,12 +139,19 @@ export default class DragHelper {
   }
   // 结束/完成处理（动画）
   private finish(done = false) {
+    
     if (!this.dragging) {
       return
     }
+
+    const controlStore = useControlStore()
+    const widgetStore = useWidgetStore()
     this.dragging = false
-    store.commit('setDraging', false)
+    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 '@/store'
-export default async function setCompData(item: TCommonItemData[] | string) {
+import { TdWidgetData } from '@/store/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 '@/store'
 
 export type TItem2DataParam = {
   id?: string | number
@@ -24,8 +25,10 @@ export type TItem2DataResult = {
 }
 
 export default async function setItem2Data(item: TItem2DataParam): Promise<Required<TItem2DataParam>> {
+  const canvasStore = useCanvasStore()
+  const pageStore = usePageStore()
   const cloneItem = JSON.parse(JSON.stringify(item))
-  const { width: screenWidth, height: screenHeight } = store.getters.dPage
+  const { width: screenWidth, height: screenHeight } = pageStore.dPage
   let { width: imgWidth, height: imgHeight } = item
   if (!imgWidth || !imgHeight) {
     const actual = await getImage(item.url)
@@ -39,11 +42,11 @@ export default async function setItem2Data(item: TItem2DataParam): Promise<Requi
   }
   // 根据画布缩放比例再进行一次调整
   if (ratio < 1) {
-    cloneItem.width = cloneItem.width * ratio * (store.getters.dZoom / 100)
+    cloneItem.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/DesignFeatures/setWidgetData.ts

@@ -8,12 +8,10 @@
 // import store from '@/store'
 // import { getImage } from '../getImgDetail'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
-// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 // import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
-import wImage from '@/components/modules/widgets/wImage/wImage.vue'
+// import wImage from '@/components/modules/widgets/wImage/wImage.vue'
-// import wSvg from '@/components/modules/widgets/wSvg/wSvg.vue'
+import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 import { wSvgSetting } from '@/components/modules/widgets/wSvg/wSvgSetting'
 
 export default async function(type: string, item: TCommonItemData, data: Record<string, any>) {

src/common/methods/addMouseWheel.ts

@@ -5,7 +5,8 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>, Jeremy Yu <https://github.com/JeremyYu-cn>
  * @LastEditTime: 2024-03-02 11:50:00
  */
-import store from '@/store'
+import { useControlStore } from '@/store'
+// import store from '@/store'
 
 type TAddEventCb = (e: Event) => void
 type TAddEventObj = {
@@ -14,6 +15,7 @@ type TAddEventObj = {
 
 export default function(el: HTMLElement | string, cb: Function, altLimit: boolean = true) {
   const box = typeof el === 'string' ? document.getElementById(el) : el
+  const controlStore = useControlStore()
   if (!box) return;
   addEvent(box, 'mousewheel', (e: any) => {
     const ev = e || window.event
@@ -23,7 +25,7 @@ export default function(el: HTMLElement | string, cb: Function, altLimit: boolea
     // } else {
     //   console.log('鼠标滚轮向上++++++++++')
     // }
-    if ((altLimit && store.getters.dAltDown) || !altLimit) {
+    if ((altLimit && controlStore.dAltDown) || !altLimit) {
       ev.preventDefault()
       cb(down)
     }

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

@@ -23,19 +23,21 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, defineComponent, toRefs, reactive, nextTick } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { useControlStore } from '@/store'
 
 export default defineComponent({
   components: { ElDialog },
   emits: ['done'],
   setup(props, context) {
-    const store = useStore()
+    // const store = useStore()
     const state = reactive({
       loading: false,
       url: '',
     })
+    const controlStore = useControlStore()
     const dialogVisible = ref(false)
     const imgBox = ref<HTMLImageElement | any>()
     let cropData: any = null
@@ -49,7 +51,8 @@ export default defineComponent({
       item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
       cropData = data
       state.url = item.rawImg
-      store.commit('setShowMoveable', false)
+      // store.commit('setShowMoveable', false)
+      controlStore.setShowMoveable(false)
       dialogVisible.value = true
       await nextTick()
       setEdit()
@@ -86,7 +89,8 @@ export default defineComponent({
     }
     
     const cancel = () => {
-      store.commit('setShowMoveable', true)
+      // store.commit('setShowMoveable', true)
+      controlStore.setShowMoveable(true)
       dialogVisible.value = false
       state.url = ''
       cropData = null

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

@@ -23,9 +23,10 @@
 import api from '@/api'
 import { ElDialog } from 'element-plus'
 import { ref, reactive, nextTick, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import 'cropperjs/dist/cropper.css'
 import Cropper from 'cropperjs'
+import { useControlStore } from '@/store'
 
 type TDoneParams = {
   newImg: string,
@@ -40,7 +41,8 @@ type TOpenItem = {
   imgUrl: string
 }
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
 const state = reactive({
   loading: false,
   url: '',
@@ -61,7 +63,8 @@ const open = async (item: TOpenItem, data: Cropper.Data) => {
   item.rawImg = item.rawImg ? item.rawImg : item.imgUrl
   cropData = data
   state.url = item.rawImg
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   dialogVisible.value = true
   await nextTick()
   setEdit()
@@ -101,7 +104,8 @@ const ok = () => {
 }
 
 const cancel = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
   dialogVisible.value = false
   state.url = ''
   cropData = null

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

@@ -41,13 +41,14 @@
 
 <script lang="ts" setup>
 import { reactive, nextTick, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElProgress } from 'element-plus'
 import { UploadFilled } from '@element-plus/icons-vue'
 import uploader from '@/components/common/Uploader/index.vue'
 import _dl from '@/common/methods/download'
 import ImageExtraction from '../ImageExtraction/index.vue'
 import { selectImageFile, uploadCutPhotoToCloud } from './method'
+import { useControlStore } from '@/store'
 
 export type TImageCutoutState = {
     show: boolean;
@@ -61,7 +62,8 @@ export type TImageCutoutState = {
     loading: boolean;
 }
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
 const state = reactive<TImageCutoutState>({
   show: false,
   rawImage: '',
@@ -87,7 +89,8 @@ const matting = ref<typeof ImageExtraction | null>(null)
 const open = (file: File) => {
   state.loading = false
   state.show = true
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   nextTick(() => {
     if (file) {
       handleUploaderLoad(file)
@@ -111,7 +114,8 @@ const handleUploaderLoad = (file: File) => {
 }
 
 const handleClose = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const mousemove = (e: MouseEvent) => {

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/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 '@/store'
 
-export default function(moveable: any) {
+export default function(moveable: Moveable) {
+  const widgetStore = useWidgetStore()
   const selecto = new Selecto({
     container: document.getElementById('page-design'),
     selectableTargets: ['.layer'],
@@ -23,16 +25,22 @@ export default function(moveable: any) {
     e.added.forEach((el) => {
       if (!Array.from(el.classList).includes('layer-lock') && !el.hasAttribute('child')) {
         el.classList.add('widget-selected')
-        store.dispatch('selectWidgetsInOut', {
+        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,10 +32,11 @@
 
 <script lang="ts" setup>
 import { reactive } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import api from '@/api'
 import { TGetImageListResult } from '@/api/material'
+import { useControlStore } from '@/store'
 
 type TEmits = (event: 'select', data: TGetImageListResult) => void
 
@@ -49,7 +50,9 @@ type TState = {
 
 const emits = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   dialogVisible: false,
   imgList: [],
@@ -101,11 +104,13 @@ const loadPic = (init?: boolean) => {
 const open = () => {
   state.dialogVisible = true
   load()
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 const close = () => {
-  store.commit('setShowMoveable', true)
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
 const selectImg = (index: number, list: TGetImageListResult[]) => {

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,15 +23,22 @@ import {
   TMenuItemData, TWidgetItemData, 
 } from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { storeToRefs } from 'pinia';
+import { useControlStore, useWidgetStore } from '@/store';
 
-const store = useStore()
+// const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
 const showMenuBg = ref<boolean>(false)
 const widgetMenu = ref<TWidgetItemData[]>({...widget})
 const pageMenu = ref<TWidgetItemData[]>({...page})
 
-const {dActiveElement, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
+const widgetStore = useWidgetStore()
+// const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+
+const {dActiveElement, dWidgets, dCopyElement} = storeToRefs(widgetStore)
+const { dAltDown } = storeToRefs(useControlStore())
+
 
 const styleObj = computed(() => {
   return {
@@ -52,27 +64,30 @@ async function mouseRightClick(e: MouseEvent) {
   if (type) {
     let uuid = target.getAttribute('data-uuid') // 设置选中元素
 
-    if (uuid !== '-1' && !dAltDown) {
+    if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
       if (
-        widget.parent !== '-1' && 
+        widget?.parent !== '-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',
@@ -105,33 +120,47 @@ function closeMenu() {
 function selectMenu(type: TWidgetItemData['type']) {
   switch (type) {
     case 'copy':
-      store.dispatch('copyWidget')
+      widgetStore.copyWidget()
+      // store.dispatch('copyWidget')
       break
     case 'paste':
       if (dCopyElement.value.length === 0) {
         return
       }
-      store.dispatch('pasteWidget')
+      widgetStore.pasteWidget()
+      // store.dispatch('pasteWidget')
       break
     case 'index-up':
-      store.dispatch('updateLayerIndex', {
+      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,14 +10,19 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import html2canvas from 'html2canvas'
 import Qiniu from '@/common/methods/QiNiu'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { storeToRefs } from 'pinia';
+import { useCanvasStore, useWidgetStore } from '@/store';
 
-const store = useStore();
+// const store = useStore();
+// const { dZoom } = useSetupMapGetters(['dZoom'])
 
-const { dZoom } = useSetupMapGetters(['dZoom'])
+const canvasStore = useCanvasStore()
+const widgetStore = useWidgetStore()
+const { dZoom } = storeToRefs(canvasStore)
 
 
 // props: ['modelValue'], 
@@ -26,10 +31,15 @@ const { dZoom } = useSetupMapGetters(['dZoom'])
 async function createCover(cb: any) {
   const nowZoom = dZoom.value
   // 取消选中元素
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
-  store.dispatch('updateZoom', 100)
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
+
+  canvasStore.updateZoom(100)
+  // store.dispatch('updateZoom', 100)
 
   const opts = {
     useCORS: true, // 跨域图片
@@ -51,7 +61,8 @@ async function createCover(cb: any) {
         'image/jpeg',
         0.15,
       )
-      store.dispatch('updateZoom', nowZoom)
+      canvasStore.updateZoom(nowZoom)
+      // store.dispatch('updateZoom', nowZoom)
       clonePage.remove()
     })
   }, 10)

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,7 +84,9 @@ import PointImg from '@/utils/plugins/pointImg'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import { debounce } from 'throttle-debounce'
 import { move, moveInit } from '@/mixins/move'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useCanvasStore, useControlStore, useGroupStore, usePageStore, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
+import { TPageState } from '@/store/design/page'
 // 页面设计组件
 type TProps = {
   pageDesignCanvasId: string
@@ -80,20 +97,20 @@ type TParentData = {
   height?: number
 }
 
-type TSetting = {
+type TSetting = Partial<TPageState>
-  width?: number
+
-  height?: number
+// const store = useStore()
-  top?: number
+const controlStore = useControlStore()
-  left?: number
+const widgetStore = useWidgetStore()
-}
+const canvasStore = useCanvasStore()
 
-const store = useStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
-const {
+
-  dPaddingTop, dPage, dZoom, dScreen, dWidgets,
+const { dPage } = storeToRefs(usePageStore())
-  dActiveElement, dSelectWidgets, dAltDown, dDraging,
+const { dZoom, dPaddingTop, dScreen } = storeToRefs(canvasStore)
-  dHoverUuid, showRotatable
+const { dDraging, showRotatable, dAltDown } = storeToRefs(controlStore)
-} = useSetupMapGetters(['dPaddingTop', 'dPage', 'dZoom', 'dScreen', 'dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown', 'dDraging', 'showRotatable'])
+const { dWidgets, dActiveElement, dSelectWidgets, dHoverUuid } = storeToRefs(widgetStore)
+
 
 let _dropIn: string | null = ''
 let _srcCache: string | null = ''
@@ -116,11 +133,13 @@ onMounted(() => {
     // },
 
 async function dropOver(e: MouseEvent) {
+  if (!dActiveElement.value) return
   if (dActiveElement.value.editable || dActiveElement.value.lock) {
     return false
   }
   e.preventDefault()
-  let { data, type } = store.getters.selectItem
+  let { data, type } = widgetStore.selectItem
+  if (!data) return
   if (type !== 'image') {
     return
   }
@@ -129,7 +148,9 @@ async function dropOver(e: MouseEvent) {
   const target = await getTarget(eventTarget)
   if (!target) return
   const uuid = target.getAttribute('data-uuid')
-  store.dispatch('setDropOver', uuid)
+
+  widgetStore.setDropOver(uuid ?? "-1")
+  // store.dispatch('setDropOver', uuid)
 
   const imgEl = target?.firstElementChild?.firstElementChild as HTMLImageElement
   if (eventTarget.getAttribute('putIn')) {
@@ -150,17 +171,27 @@ async function drop(e: MouseEvent) {
   }
   if (!e || !e.target) return
   const eventTarget = e.target as HTMLElement
-  store.commit('setDraging', false)
+
+  controlStore.setDraging(false)
+  // store.commit('setDraging', false)
+
   const dropIn = _dropIn
   _dropIn = ''
-  store.dispatch('setDropOver', '-1')
+
-  store.commit('setShowMoveable', false) // 清理上一次的选择
+  widgetStore.setDropOver("-1")
+  // store.dispatch('setDropOver', '-1')
+
+  // store.commit('setShowMoveable', false) // 清理上一次的选择
+  controlStore.setShowMoveable(false) // 清理上一次的选择
+
   let lost = eventTarget.className !== 'design-canvas' // className === 'design-canvas' , id: "page-design-canvas"
   // e.stopPropagation()
   e.preventDefault()
-  let { data: item, type } = JSON.parse(JSON.stringify(store.getters.selectItem))
+  let { data: item, type } = JSON.parse(JSON.stringify(widgetStore.selectItem))
   // 清除临时数据
-  store.commit('selectItem', {})
+  widgetStore.setSelectItem({})
+  // store.commit('selectItem', {})
+
   let setting: TSetting = {}
   if (!type) {
     return
@@ -184,24 +215,25 @@ async function drop(e: MouseEvent) {
       }
     })
     const half = {
-      x: parent.width ? (parent.width * store.getters.dZoom) / 100 / 2 : 0,
+      x: parent.width ? (parent.width * dZoom.value) / 100 / 2 : 0,
-      y: parent.height ? (parent.height * store.getters.dZoom) / 100 / 2 : 0
+      y: parent.height ? (parent.height * dZoom.value) / 100 / 2 : 0
     }
     componentItem.forEach((element) => {
-      element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
+      element.left += (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
-      element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+      element.top += (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
     })
-    store.dispatch('addGroup', componentItem)
+    widgetStore.addGroup(componentItem)
+    // store.dispatch('addGroup', componentItem)
     // addGroup(item)
   }
   // 设置坐标
   const half = { 
-    x: setting.width ? (setting.width * store.getters.dZoom) / 100 / 2 : 0,
+    x: setting.width ? (setting.width * dZoom.value) / 100 / 2 : 0,
-    y: setting.height ? (setting.height * store.getters.dZoom) / 100 / 2 : 0
+    y: setting.height ? (setting.height * dZoom.value) / 100 / 2 : 0
   }
   // const half = { x: (this.dDragInitData.offsetX * this.dZoom) / 100, y: (this.dDragInitData.offsetY * this.dZoom) / 100 }
-  setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / store.getters.dZoom)
+  setting.left = (lost ? lostX - half.x : e.layerX - half.x) * (100 / dZoom.value)
-  setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / store.getters.dZoom)
+  setting.top = (lost ? lostY - half.y : e.layerY - half.y) * (100 / dZoom.value)
   if (lost && type === 'image') {
     // 如果不从画布加入，且不是图片类型，则判断是否加入到svg中
     const target = await getTarget(eventTarget)
@@ -210,8 +242,11 @@ async function drop(e: MouseEvent) {
     const uuid = target.getAttribute('data-uuid')
     if (targetType === 'w-mask') {
       // 容器
-      store.commit('setShowMoveable', true) // 恢复选择
+      // store.commit('setShowMoveable', true) // 恢复选择
+      controlStore.setShowMoveable(true) // 恢复选择
+
       const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget) return
       widget.imgUrl = item.value.url
       // if (e.target.className.baseVal) {
       //   !widget.imgs && (widget.imgs = {})
@@ -220,18 +255,24 @@ async function drop(e: MouseEvent) {
     } else {
       if (dropIn) {
         const widget = dWidgets.value.find((item: {uuid: string}) => item.uuid == dropIn)
+        if (!widget) return
         widget.imgUrl = item.value.url
         console.log('加入+', widget)
-        store.commit('setShowMoveable', true) // 恢复选择
+
+        // store.commit('setShowMoveable', true) // 恢复选择
+        controlStore.setShowMoveable(true) // 恢复选择
+
       } else {
-        store.dispatch('addWidget', setting) // 正常加入面板
+        widgetStore.addWidget(setting as Required<TPageState>)
+        // store.dispatch('addWidget', setting) // 正常加入面板
       }
     }
   } else if (type === 'bg') {
     console.log('背景图片放置')
   } else if (type !== 'group') {
     console.log(setting)
-    store.dispatch('addWidget', setting) // 正常加入面板
+    widgetStore.addWidget(setting as Required<TPageState>)
+    // store.dispatch('addWidget', setting) // 正常加入面板
   }
   // 清除临时数据
   // this.$store.commit('selectItem', {})
@@ -240,11 +281,11 @@ async function drop(e: MouseEvent) {
 function getScreen() {
   const pageDesignEl = document.getElementById('page-design')
   if (!pageDesignEl) return
-  store.dispatch('updateScreen', {
+  canvasStore.updateScreen({
     width: pageDesignEl.offsetWidth,
     height: pageDesignEl.offsetHeight,
   })
-  // updateScreen({
+  // store.dispatch('updateScreen', {
   //   width: pageDesignEl.offsetWidth,
   //   height: pageDesignEl.offsetHeight,
   // })
@@ -280,18 +321,19 @@ async function handleSelection(e: MouseEvent) {
     let uuid = target.getAttribute('data-uuid')
     if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: {uuid: string}) => item.uuid === uuid)
+      if (!widget || !dActiveElement.value) return
       if (widget.parent !== '-1' && widget.parent !== dActiveElement.value.uuid && widget.parent !== dActiveElement.value.parent) {
-        uuid = widget.parent
+        uuid = widget.parent || null
       }
     }
 
     // 设置选中元素
     // this.$store.commit('setMoveable', false)
     if (showRotatable.value !== false) {
-      store.dispatch('selectWidget', {
+      widgetStore.selectWidget({
-        uuid: uuid,
+        uuid: uuid ?? " -1",
       })
-      // selectWidget({
+      // store.dispatch('selectWidget', {
       //   uuid: uuid,
       // })
     }
@@ -301,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,8 +11,9 @@
 
 <script lang="ts" setup>
 import { watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import Guides, { GuideOptions } from '@scena/guides'
+import { useCanvasStore } from '@/store';
 
 type TProps = {
   show: boolean
@@ -34,7 +35,8 @@ const props = withDefaults(defineProps<TProps>(), {
   show: false
 })
 
-const store = useStore()
+// const store = useStore()
+const canvasStore = useCanvasStore()
 const container = 'page-design' // page-design out-page
 let guidesTop: TGuidesData | null = null
 let guidesLeft: TGuidesData | null = null
@@ -47,7 +49,7 @@ watch(
 )
 
 watch(
-  () => store.getters.dZoom,
+  () => canvasStore.dZoom,
   () => {
     changeScroll()
   },
@@ -113,7 +115,7 @@ function render() {
 
 function changeScroll() {
   if (guidesTop && guidesLeft) {
-    const zoom = store.getters.dZoom / 100
+    const zoom = canvasStore.dZoom / 100
     guidesTop.zoom = zoom
     guidesLeft.zoom = zoom
     if (zoom < 0.9) {

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

@@ -20,15 +20,17 @@
 </template>
 
 <script lang="ts" setup>
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import addMouseWheel from '@/common/methods/addMouseWheel'
 import { OtherList, TZoomData, ZoomList } from './data';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { useRoute } from 'vue-router';
+import { storeToRefs } from 'pinia';
+import { useCanvasStore, useForceStore, usePageStore } from '@/store';
 
 const route = useRoute()
-const store = useStore()
+// const store = useStore()
 
 // 组件大小控制器
 let holder: number | undefined
@@ -46,7 +48,12 @@ const otherIndex = ref(-1)
 const bestZoom = ref(0)
 const curAction = ref('')
 
-const { dPage, dScreen, zoomScreenChange, dZoom } = useSetupMapGetters(['dPage', 'dScreen', 'zoomScreenChange', 'dZoom'])
+// const { zoomScreenChange } = useSetupMapGetters(['zoomScreenChange'])
+const canvasStore = useCanvasStore()
+const { dPage } = storeToRefs(usePageStore())
+const { zoomScreenChange } = storeToRefs(useForceStore())
+const { dZoom, dScreen } = storeToRefs(canvasStore)
+
 
 watch(
   activezoomIndex,
@@ -75,7 +82,8 @@ watch(
     if (realValue === -1) {
       realValue = calcZoom()
     }
-    store.dispatch('updateZoom', realValue)
+    canvasStore.updateZoom(realValue)
+    // store.dispatch('updateZoom', realValue)
     // updateZoom(realValue)
     autoFixTop()
   }
@@ -134,11 +142,11 @@ function changeScreen() {
   holder = setTimeout(() => {
     const screen = document.getElementById('page-design')
     if (!screen) return
-    store.dispatch('updateScreen', {
+    canvasStore.updateScreen({
       width: screen.offsetWidth,
       height: screen.offsetHeight,
     })
-    // updateScreen({
+    // store.dispatch('updateScreen', {
     //   width: screen.offsetWidth,
     //   height: screen.offsetHeight,
     // })
@@ -148,7 +156,8 @@ function changeScreen() {
 function screenChange() {
   // 弹性尺寸即时修改
   if (activezoomIndex.value === zoomList.value.length - 1) {
-    store.dispatch('updateZoom', calcZoom())
+    canvasStore.updateZoom(calcZoom())
+    // store.dispatch('updateZoom', calcZoom())
     // this.updateZoom(this.calcZoom())
     autoFixTop()
   }
@@ -217,7 +226,8 @@ function sub() {
 function mousewheelZoom(down: boolean) {
   const value = Number(dZoom.value.toFixed(0))
   if (down && value <= 1) return
-  store.dispatch('updateZoom', down ? value - 1 : value + 1)
+  canvasStore.updateZoom(down ? value - 1 : value + 1)
+  // store.dispatch('updateZoom', down ? value - 1 : value + 1)
   // updateZoom(down ? value - 1 : value + 1)
   zoom.value.text = (value + '%') as any
   autoFixTop()
@@ -255,7 +265,9 @@ async function autoFixTop() {
     padding += presetPadding / 2
   }
   curAction.value === 'add' && (padding -= presetPadding)
-  store.commit('updatePaddingTop', padding > 0 ? padding : 0)
+
+  canvasStore.updatePaddingTop(padding > 0 ? padding : 0)
+  // store.commit('updatePaddingTop', padding > 0 ? padding : 0)
 }
 
 defineExpose({

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

@@ -39,8 +39,10 @@
 </template>
 
 <script lang="ts">
+import { useWidgetStore } from '@/store'
+import { TdWidgetData } from '@/store/design/widget'
 import { defineComponent, computed, reactive, ref, toRefs } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import draggable from 'vuedraggable'
 
 export default defineComponent({
@@ -48,8 +50,9 @@ export default defineComponent({
   props: ['data'],
   emits: ['change'],
   setup(props, context) {
-    let widgets: any = ref([])
+    const 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,19 +20,28 @@
 <script setup lang="ts">
 // 样式设置面板
 // const NAME = 'style-panel'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import alignIconList, { AlignListData } from '@/assets/data/AlignListData'
-import iconItemSelect from '../settings/iconItemSelect.vue'
+import iconItemSelect, { TIconItemSelectData } from '../settings/iconItemSelect.vue'
 import { ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useControlStore, useGroupStore, useHistoryStore, useWidgetStore } from '@/store';
+import { storeToRefs } from 'pinia';
+import { TdWidgetData } from '@/store/design/widget';
+import type { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
+const controlStore = useControlStore()
+const groupStore = useGroupStore()
+const historyStore = useHistoryStore()
 
 const activeTab = ref(0)
 const iconList = ref<AlignListData[]>(alignIconList)
 const showGroupCombined = ref(false)
 
-const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+// const { dActiveElement, dWidgets, dSelectWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dSelectWidgets'])
+const { dActiveElement, dWidgets, dSelectWidgets } = storeToRefs(widgetStore)
 
 watch(
   dSelectWidgets,
@@ -47,32 +56,53 @@ watch(
 )
 
 function handleCombine() {
-  store.dispatch('realCombined')
+  groupStore.realCombined()
+  // store.dispatch('realCombined')
 }
 
 // ...mapActions(['selectWidget', 'updateAlign', 'updateHoverUuid', 'getCombined', 'realCombined', 'ungroup', 'pushHistory']),
-function alignAction(item: AlignListData) {
+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('setShowMoveable', false)
+  // store.commit('setDWidgets', newLayer.toReversed())
+
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
 }
 
 </script>

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

@@ -25,9 +25,10 @@
 <script lang="ts" setup>
 import { reactive, computed } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { ElImage } from 'element-plus'
 import { TGetImageListResult } from '@/api/material';
+import { usePageStore, useWidgetStore } from '@/store';
 
 type TCommonPanelData = {
   color: string
@@ -55,7 +56,10 @@ type TState = {
 const { model } = defineProps<TProps>()
 
 
-const store = useStore()
+// const store = useStore()
+const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
+
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -113,51 +117,45 @@ const load = async (init: boolean = false) => {
 }
 
 function setBGcolor(color: string) {
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
-    key: 'backgroundImage',
+    key: "backgroundImage",
-    value: '',
+    value: ''
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundColor',
     value: color,
-    pushHistory: true,
+    pushHistory: true
   })
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1',
+  // })
 }
 
-// ...mapActions(['selectWidget', 'updatePageData']),
 async function selectItem(item: TGetImageListResult) {
   // this.$store.commit('setShowMoveable', false) // 清理掉上一次的选择
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: item.url,
     pushHistory: true,
   })
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: '-1',
+    uuid: '-1'
   })
-  // this.updatePageData({
+  // store.dispatch('selectWidget', {
-  //   key: 'backgroundTransform',
-  //   value: {},
-  // })
-  // this.updatePageData({
-  //   key: 'backgroundImage',
-  //   value: item.url,
-  //   pushHistory: true,
-  // })
-  // this.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,11 +55,12 @@
 <script lang="ts" setup>
 import { reactive, onMounted } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import getComponentsData from '@/common/methods/DesignFeatures/setComponents'
 import DragHelper from '@/common/hooks/dragHelper'
 import setItem2Data from '@/common/methods/DesignFeatures/setImage'
 import { TGetCompListResult, TGetTempDetail, TTempDetail } from '@/api/home'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 type TState = {
   loading: boolean
@@ -87,7 +88,10 @@ const state = reactive<TState>({
   types: [],
   showList: [],
 })
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const dPage = usePageStore().dPage
 const pageOptions = { type: 1, page: 0, pageSize: 20 }
 
 onMounted(async () => {
@@ -185,9 +189,11 @@ const dragStart = async (e: MouseEvent, { id, width, height, cover }: TGetCompLi
   dragHelper.start(e, img.canvasWidth)
   tempDetail = await getCompDetail({ id, type: 1 })
   if (Array.isArray(JSON.parse(tempDetail.data))) {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'group' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'group' })
   } else {
-    store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
+    widgetStore.setSelectItem({ data: JSON.parse(tempDetail.data), type: 'text' })
+    // store.commit('selectItem', { data: JSON.parse(tempDetail.data), type: 'text' })
   }
 }
 
@@ -195,12 +201,14 @@ const selectItem = async (item: TGetCompListResult) => {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+  
   tempDetail = tempDetail || (await getCompDetail({ id: item.id, type: 1 }))
   // let group = JSON.parse(tempDetail.data)
   const group: any = await getComponentsData(tempDetail.data)
   let parent: Record<string, any> = { x: 0, y: 0 }
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage
 
   Array.isArray(group) &&
     group.forEach((element) => {
@@ -211,26 +219,28 @@ const selectItem = async (item: TGetCompListResult) => {
       element.left += (pW - parent.width) / 2
       element.top += (pH - parent.height) / 2
     })
-    store.dispatch('addGroup', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addGroup', group)
   } else {
     group.text && (group.text = decodeURIComponent(group.text))
     group.left = pW / 2 - group.fontSize * (group.text.length / 2)
     group.top = pH / 2 - group.fontSize / 2
-    store.dispatch('addWidget', group)
+    widgetStore.addGroup(group)
+    // store.dispatch('addWidget', group)
   }
 }
 
-    function getCompDetail(params: TGetTempDetail): Promise<TTempDetail> {
+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

@@ -39,28 +39,56 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, onMounted } from 'vue'
+import { reactive, toRefs, onMounted } from 'vue'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
-// import wSvg from '../../widgets/wSvg/wSvg.vue'
 import { wSvgSetting } from '../../widgets/wSvg/wSvgSetting'
-import { useStore } from 'vuex'
+// import wSvg from '../../widgets/wSvg/wSvg.vue'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
 import DragHelper from '@/common/hooks/dragHelper'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { TGetListData } from '@/api/material'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   active?: boolean
 }
 
+type TState = {
+  loading: boolean
+  loadDone: boolean
+  sub: []
+  list: TGetListData[]
+  currentType: Number
+  currentCheck:number
+  colors: string[]
+  currentCategory: TCurrentCategory | null
+  types: []
+  showList: TGetListData[][]
+  searchKeyword: string
+}
+
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
+
 let isDrag = false
 let startPoint = { x: 99999, y: 99999 }
 const dragHelper = new DragHelper()
 
-const prpos = defineProps<TProps>()
+const props = defineProps<TProps>()
+
 const colors = ['#f8704b', '#5b89ff', '#2cc4cc', '#a8ba73', '#f8704b']
-const state: any = reactive({
+
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+const { dPage } = storeToRefs(usePageStore())
+const state = reactive<TState>({
   loading: false,
   loadDone: false,
   sub: [],
@@ -74,10 +102,6 @@ const state: any = reactive({
   searchKeyword: '',
 })
 const pageOptions = { page: 0, pageSize: 20 }
-const store = useStore()
-const {
-  dPage
-} = useSetupMapGetters(['dPage'])
 
 onMounted(async () => {
   if (state.types.length <= 0) {
@@ -92,17 +116,19 @@ onMounted(async () => {
     }
   }
 })
+
 // const dragHelper = new DragHelper()
 // let isDrag = false
 // let startPoint = { x: 99999, y: 99999 }
-const mouseup = (e: any) => {
+const mouseup = (e: MouseEvent) => {
   e.preventDefault()
   setTimeout(() => {
     isDrag = false
     startPoint = { x: 99999, y: 99999 }
   }, 10)
 }
-const mousemove = (e: any) => {
+
+const mousemove = (e: MouseEvent) => {
   e.preventDefault()
   if (e.x - startPoint.x > 2 || e.y - startPoint.y > 2) {
     isDrag = true
@@ -134,12 +160,12 @@ const load = async (init: boolean = false) => {
   }, 100)
 }
 
-const searchChange = (e: any) => {
+const searchChange = (_: Event) => {
   state.currentCategory = { name: '搜索结果' }
   load(true)
 }
 
-const selectTypes = (item: any) => {
+const selectTypes = (item: TCurrentCategory) => {
   state.currentCategory = item
   load(true)
 }
@@ -156,17 +182,20 @@ defineExpose({
   mousemove,
 })
 
-// ...mapGetters(['dPage'])
 
-// ...mapActions(['addWidget'])
+// computed: {
-
+//   ...mapGetters(['dPage']),
-async function selectItem(item: any) {
+// }
+// ...mapActions(['addWidget']),
+async function selectItem(item: TGetListData) {
   if (isDrag) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = item.type === 'svg' ? JSON.parse(JSON.stringify(wSvgSetting)) : JSON.parse(JSON.stringify(wImageSetting))
-  const img: any = await setImageData(item)
+  const img = await setImageData(item)
 
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
@@ -186,15 +215,17 @@ async function selectItem(item: any) {
   if (item.type === 'mask') {
     setting.mask = item.url
   }
-  store.dispatch("addWidget", setting)
+  widgetStore.addWidget(setting)
-  // addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
-async function dragStart(e: any, item: any) {
+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 })
+
+  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

@@ -3,7 +3,7 @@
  * @Date: 2022-02-11 18:48:23
  * @Description: 照片图库 Form:Unsplash无版权图片
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-10-04 19:04:39
+ * @LastEditTime: 2024-03-19 10:04:39
 -->
 <template>
   <div class="wrap">
@@ -24,16 +24,18 @@
   </div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 // 图片列表
-const NAME = 'img-list-wrap'
+// const NAME = 'img-list-wrap'
 import { toRefs, reactive, computed, onMounted } from 'vue'
 // import wImage from '../../widgets/wImage/wImage.vue'
 import wImageSetting from '../../widgets/wImage/wImageSetting'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import setImageData from '@/common/methods/DesignFeatures/setImage'
-import { TGetImageListResult } from '@/api/material';
+import { storeToRefs } from 'pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { TGetImageListResult } from '@/api/material'
 
 type TProps = {
   active?: boolean
@@ -41,16 +43,25 @@ type TProps = {
 
 type TState = {
   recommendImgList: TGetImageListResult[],
-  loadDone: boolean,
+  loadDone: boolean
-  page: 0,
+  page: number
-  currentCategory: null | Record<string, any>,
+  currentCategory: TCurrentCategory | null,
   types: [],
   showList: TGetImageListResult[][],
 }
 
+type TCurrentCategory = {
+  name: string
+  id?: number
+}
+
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+const { dPage } = storeToRefs(usePageStore())
 const state = reactive<TState>({
   recommendImgList: [],
   loadDone: false,
@@ -59,7 +70,6 @@ const state = reactive<TState>({
   types: [],
   showList: [],
 })
-const dPage = computed(() => store.getters.dPage)
 let loading = false
 
 onMounted(async () => {
@@ -75,7 +85,10 @@ onMounted(async () => {
 
 const selectImg = async (index: number, list: TGetImageListResult[]) => {
   const item = list ? list[index] : state.recommendImgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item) // await getImage(item.url)
   setting.width = img.width
@@ -84,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 () => {
@@ -93,27 +108,29 @@ const getDataList = async () => {
   }
   loading = true
   state.page += 1
-  if (!state.currentCategory) return
+  let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory?.id, page: state.page, pageSize: 30 })
-  let { list = [], total } = await api.material.getImagesList({ cate: state.currentCategory.id, page: state.page, pageSize: 30 })
   list.length <= 0 ? (state.loadDone = true) : (state.recommendImgList = state.recommendImgList.concat(list))
   setTimeout(() => {
     loading = false
   }, 100)
 }
 
-const dragStart = (index: number, list?: TGetImageListResult[]) => {
+const 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: Record<string, any>) => {
+const searchChange = (e: Event) => {
   console.log(e)
 }
 
-const selectTypes = (item: Record<string, any>) => {
+const selectTypes = (item: TCurrentCategory) => {
   state.currentCategory = item
   getDataList()
 }
+
 const back = () => {
   state.currentCategory = null
   state.page = 0

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

@@ -23,15 +23,17 @@
 <script lang="ts" setup>
 import { reactive, ref } from 'vue'
 import api from '@/api'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { LocationQueryValue, useRoute, useRouter } from 'vue-router'
 // import chooseType from './components/chooseType.vue'
 // import editModel from './components/editModel.vue'
 import searchHeader from './components/searchHeader.vue'
 import useConfirm from '@/common/methods/confirm'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore, useWidgetStore, useForceStore} from '@/store'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   loading: boolean
@@ -51,7 +53,14 @@ type TPageOptions = {
 const listRef = ref<HTMLElement | null>(null)
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
+
+// const store = useStore()
+const controlStore = useControlStore()
+
+const userStore = useUserStore()
+const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
 const state = reactive<TState>({
   loading: false,
   loadDone: false,
@@ -60,12 +69,14 @@ const state = reactive<TState>({
   searchKeyword: '',
 })
 
-const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHistoryParams'])
+// const { tempEditing } = useSetupMapGetters(['tempEditing'])
+const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
 const { cate, edit } = route.query
-cate && (pageOptions.cate = (cate as LocationQueryValue) || 1)
+cate && (pageOptions.cate = (cate as LocationQueryValue) ?? 1)
-edit && store.commit('managerEdit', true)
+// edit && store.commit('managerEdit', true)
+edit && userStore.managerEdit(true)
 
 // onMounted(async () => {})
 
@@ -109,15 +120,21 @@ function checkHeight() {
 }
 // ...mapActions(['selectWidget', 'updatePageData', 'setTemplate', 'pushHistory']),
 async function selectItem(item: IGetTempListData) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   if (dHistoryParams.value.length > 0) {
     const isPass = await useConfirm('提示', '使用模板后，当前页面将会被替换，是否继续', 'warning')
     if (!isPass) {
       return false
     }
   }
-  store.commit('managerEdit', false)
+  // store.commit('managerEdit', false)
-  store.commit('setDWidgets', [])
+  userStore.managerEdit(false)
+
+  widgetStore.setDWidgets([])
+  // store.commit('setDWidgets', [])
 
   setTempId(item.id)
 
@@ -131,15 +148,21 @@ async function selectItem(item: IGetTempListData) {
   const { page, widgets } = result
   console.log(widgets)
 
-  store.commit('setDPage', page)
+  pageStore.setDPage(page)
-  store.dispatch('setTemplate', widgets)
+  // store.commit('setDPage', page)
+  widgetStore.setTemplate(widgets)
+  // store.dispatch('setTemplate', widgets)
   // setTemplate(widgets)
   setTimeout(() => {
-    store.commit('zoomScreenChange')
+    forceStore.setZoomScreenChange()
+    // store.commit('zoomScreenChange')
   }, 300)
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
     uuid: '-1'
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: '-1'
+  // })
   // selectWidget({
   //   uuid: '-1',
   // })

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

@@ -24,9 +24,12 @@
 <script lang="ts" setup>
 // const NAME = 'text-list-wrap'
 
+import { storeToRefs } from 'pinia';
+// import wText from '../../widgets/wText/wText.vue'
 import { wTextSetting } from '../../widgets/wText/wTextSetting'
 
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store';
 
 type TBasicTextData = {
   text: string
@@ -34,20 +37,29 @@ type TBasicTextData = {
   fontWeight: string
 }
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+const { dPage } = storeToRefs(usePageStore())
 
 
 const selectBasicText = (item: TBasicTextData) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wTextSetting))
   setting.text = '双击编辑文字' // item.text
   setting.width = item.fontSize * setting.text.length
   setting.fontSize = item.fontSize
   setting.fontWeight = item.fontWeight
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - item.fontSize * 3
   setting.top = pH / 2 - item.fontSize / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 // const dragStart = (_: MouseEvent, item: any) => {

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

@@ -26,19 +26,24 @@
 // const NAME = 'tool-list-wrap'
 // import api from '@/api'
 import { ref, onMounted } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { useRoute } from 'vue-router'
 // import wQrcode from '../../widgets/wQrcode/wQrcode.vue'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wQrcodeSetting } from '../../widgets/wQrcode/wQrcodeSetting'
+import { storeToRefs } from 'pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+
+// const store = useStore()
+const controlStore = useControlStore()
 
-const store = useStore()
 const route = useRoute()
 
 const loadDone = ref(false)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
-const { dPage } = useSetupMapGetters(['dPage'])
+const widgetStore = useWidgetStore()
+const { dPage } = storeToRefs(usePageStore())
 
 onMounted(() => {
   // this.getDataList()
@@ -59,12 +64,16 @@ onMounted(() => {
 // }
 
 function addQrcode() {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wQrcodeSetting))
   const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - setting.width / 2
   setting.top = pH / 2 - setting.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
   // addWidget(setting)
 }
 

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

@@ -39,7 +39,7 @@
 import { reactive, toRefs, watch, nextTick, ref, onMounted } from 'vue'
 import { ElTabPane, ElTabs, TabPaneName } from 'element-plus'
 import { useRouter } from 'vue-router'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import uploader from '@/components/common/Uploader'
 import api from '@/api'
 // import wImage from '../../widgets/wImage/wImage.vue'
@@ -52,6 +52,8 @@ import imgWaterFall from './components/imgWaterFall.vue'
 import { TUploadDoneData } from '@/components/common/Uploader/index.vue'
 import { IGetTempListData } from '@/api/home'
 import eventBus from '@/utils/plugins/eventBus'
+import { storeToRefs } from 'pinia'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
 
 type TProps = {
   active?: number
@@ -70,7 +72,12 @@ type TState = {
 const props = defineProps<TProps>()
 
 const router = useRouter()
-const store = useStore()
+
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+
+const { dPage } = storeToRefs(usePageStore())
 const listRef = ref<HTMLElement | null>(null)
 const imgListRef = ref<typeof photoList | null>(null)
 
@@ -159,16 +166,21 @@ onMounted(() => {
 
 const selectImg = async (index: number) => {
   const item = state.imgList[index]
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
   let setting = JSON.parse(JSON.stringify(wImageSetting))
   const img = await setImageData(item)
   setting.width = img.width
   setting.height = img.height // parseInt(100 / item.value.ratio, 10)
   setting.imgUrl = item.url
-  const { width: pW, height: pH } = store.getters.dPage
+  const { width: pW, height: pH } = dPage.value
   setting.left = pW / 2 - img.width / 2
   setting.top = pH / 2 - img.height / 2
-  store.dispatch('addWidget', setting)
+
+  widgetStore.addWidget(setting)
+  // store.dispatch('addWidget', setting)
 }
 
 type controlImgParam = {
@@ -177,7 +189,10 @@ type controlImgParam = {
 }
 
 const deleteImg = async ({ i, item }: controlImgParam) => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   const isPass = await useConfirm('警告', '删除后不可找回，已引用资源将会失效，请谨慎操作', 'warning')
   if (!isPass) {
     return false
@@ -216,7 +231,8 @@ state.editOptions = {
 
 const dragStart = (index: number) => {
   const item = state.imgList[index]
-  store.commit('selectItem', { data: { value: item }, type: 'image' })
+  widgetStore.setSelectItem({ data: { value: item }, type: 'image' })
+  // store.commit('selectItem', { data: { value: item }, type: 'image' })
 }
 const uploadDone = async (res: TUploadDoneData) => {
   await api.material.addMyPhoto(res)

src/components/modules/settings/colorSelect.vue

@@ -17,8 +17,9 @@
 
 <script lang="ts" setup>
 import {reactive, onMounted, watch } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import colorPicker from '@palxp/color-picker'
+import { useControlStore } from '@/store';
 
 type TProps = {
   label?: string
@@ -52,7 +53,9 @@ const props = withDefaults(defineProps<TProps>(), {
 
 const emit = defineEmits<TEmits>()
 
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
+
 const state = reactive<TState>({
   innerColor: '',
   // colorLength: 0,
@@ -116,11 +119,13 @@ const inputBlur = (color: string) => {
 }
 
 const enter = () => {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
 }
 
 const hide = () => {
-  store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  // store.commit('setShowMoveable', true) // 恢复上一次的选择框
+  controlStore.setShowMoveable(true) // 恢复上一次的选择框
 }
 
 

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

@@ -56,7 +56,7 @@
 // 画布组件样式
 // const NAME = 'page-style'
 import { nextTick, onMounted, reactive, watch } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import numberInput from '../settings/numberInput.vue'
 import colorSelect, { colorChangeData } from '../settings/colorSelect.vue'
 import uploader, { TUploadDoneData } from '@/components/common/Uploader/index.vue'
@@ -65,7 +65,11 @@ import _dl from '@/common/methods/download'
 // import ColorPipette from '@/utils/plugins/color-pipette'
 import Tabs from '@palxp/color-picker/comps/Tabs.vue'
 import TabPanel from '@palxp/color-picker/comps/TabPanel.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { usePageStore, useWidgetStore } from '@/store'
+import { TPageState, } from '@/store/design/page'
+import { storeToRefs } from 'pinia'
+import { proxyToObject } from '@/utils/utils'
 import { Delete as iconDelete, Download as iconDownload } from '@element-plus/icons-vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
 // import setImageData from '@/common/methods/DesignFeatures/setImage'
@@ -81,7 +85,9 @@ type TState = {
   showBgLib: boolean
 }
 
-const store = useStore()
+// const store = useStore()
+const pageStore = usePageStore()
+const widgetStore = useWidgetStore()
 const state = reactive<TState>({
   activeNames: ['1', '2', '3', '4'],
   innerElement: {},
@@ -92,7 +98,8 @@ const state = reactive<TState>({
   modes: ['颜色', '图片'],
   showBgLib: false
 })
-const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 let _localTempBG: string | null = null
 
 watch(
@@ -115,7 +122,6 @@ onMounted(() => {
   change()
 })
 
-// ...mapActions(['updatePageData']),
 function colorChange(e: colorChangeData) {
   if (e.mode === '渐变') {
     console.log('渐变背景');
@@ -138,7 +144,7 @@ function onChangeMode(value: string) {
 function change() {
   state.mode = state.modes[0]
   state.tag = true
-  state.innerElement = JSON.parse(JSON.stringify(dActiveElement.value))
+  state.innerElement = proxyToObject(dActiveElement.value || {})
   state.innerElement.backgroundImage && (state.mode = state.modes[1])
 }
 function changeValue() {
@@ -147,25 +153,24 @@ function changeValue() {
     return
   }
   for (let key in state.innerElement) {
-    if (key !== 'setting' && key !== 'record' && state.innerElement[key] !== dActiveElement.value[key]) {
+    if (
+      key !== 'setting' && key !== 'record' &&
+      state.innerElement[key] !== (dActiveElement.value as Record<string, any>)[key]
+    ) {
       if (state.ingoreKeys.indexOf(key) !== -1) {
-        dActiveElement.value[key] = state.innerElement[key]
+        (dActiveElement.value as Record<string, any>)[key] = state.innerElement[key]
       } else {
-        store.dispatch('updatePageData', {
+        pageStore.updatePageData({
-          key: key,
+          key: key as keyof TPageState,
           value: state.innerElement[key],
         })
-        // updatePageData({
-        //   key: key,
-        //   value: this.innerElement[key],
-        // })
       }
     }
   }
 }
 
-function finish(key: string, value: string | number) {
+function finish(key: keyof TPageState, value: string | number) {
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: key,
     value: value,
     pushHistory: true,
@@ -173,7 +178,7 @@ function finish(key: string, value: string | number) {
 }
 async function uploadImgDone(img: TUploadDoneData) {
   await api.material.addMyPhoto(img)
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundTransform',
     value: {},
   })
@@ -181,7 +186,7 @@ async function uploadImgDone(img: TUploadDoneData) {
 }
 async function deleteBg() {
   _localTempBG = null
-  store.dispatch('updatePageData', {
+  pageStore.updatePageData({
     key: 'backgroundImage',
     value: '',
     pushHistory: true,
@@ -203,10 +208,13 @@ async function shiftOut() {
   setting.imgUrl = state.innerElement.backgroundImage
   // store.dispatch('addWidget', setting)
   setting.uuid = `bg-${(new Date()).getTime()}`
-  store.getters.dWidgets.unshift(setting)
+  widgetStore.dWidgets.unshift(setting)
-  store.dispatch('selectWidget', {
+  widgetStore.selectWidget({
-    uuid: store.getters.dWidgets[0].uuid,
+    uuid: widgetStore.dWidgets[0].uuid,
   })
+  // store.dispatch('selectWidget', {
+  //   uuid: store.getters.dWidgets[0].uuid,
+  // })
   deleteBg()
 }
 </script>

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

@@ -26,11 +26,13 @@
 // 组合组件
 const NAME = 'w-group'
 import { nextTick, onBeforeUnmount, onMounted, onUpdated, ref } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import { setTransformAttribute } from '@/common/methods/handleTransform'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { useWidgetStore } from '@/store';
+import { storeToRefs } from 'pinia';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 
-type TParamsData = {
+export type TParamsData = {
   left: number
   top: number
   width: number
@@ -50,7 +52,9 @@ const props = withDefaults(defineProps<TProps>(), {
   params: () => ({}),
   parent: () => ({})
 })
-const store = useStore();
+// const store = useStore();
+const widgetStore = useWidgetStore()
+
 const widget = ref<HTMLElement | null>(null)
 const ratio = ref(0)
 const temp = ref<Record<string, any>>({})
@@ -77,7 +81,8 @@ const compWidgetsRecord = ref<Record<string, any>>({})
 // }
 
 const timer = ref<number | null>(null)
-const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+// const { dActiveElement, dWidgets } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 // watch: {
 //   params: {
@@ -111,19 +116,19 @@ onBeforeUnmount(() => {
 // ...mapActions(['updateWidgetData']),
 
 function updateRecord(tempScale ?: number) {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  if (dActiveElement.value?.uuid === props.params.uuid) {
     // clearTimeout(this.timer)
-    let record = dActiveElement.value.record
+    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 '@/store'
+import { storeToRefs } from 'pinia'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 
 type TState = {
   activeNames: string[],
@@ -60,8 +70,10 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
+// const 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 { storeToRefs } from 'pinia'
-// import { useCanvasStore } from '@/pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
 
 type TProps = {
   params: typeof setting
@@ -82,19 +82,27 @@ const state = reactive<TState>({
   }
 })
 const route = useRoute()
-const store = useStore()
+
+// const store = useStore()
+const controlStore = useControlStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+
 const widgetRef = ref<HTMLElement | null>(null)
 const targetRef = ref<HTMLImageElement | null>(null)
 
 let rotateTemp: number | null = null
 let flipTemp: string | null = null
-let locksTemp: string[] | null = null
+let locksTemp: boolean[] | null = null
 
+// const {
+//   dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+const { dZoom } = storeToRefs(useCanvasStore())
 const {
-  dZoom,
+  dActiveElement, dWidgets, dMouseXY, dDropOverUuid
-  dActiveElement, dWidgets, dMouseXY, dDropOverUuid, dCropUuid
+} = storeToRefs(widgetStore)
-} = useSetupMapGetters(['dZoom', 'dActiveElement', 'dWidgets', 'dMouseXY', 'dDropOverUuid', 'dCropUuid'])
+const { dCropUuid } = storeToRefs(controlStore)
-// const { dZoom } = storeToRefs(useCanvasStore())
 
 // ...mapGetters(['dActiveElement', 'dWidgets', 'dZoom', 'dMouseXY', 'dDropOverUuid', 'dCropUuid']),
 const cropEdit = computed(() => {
@@ -135,7 +143,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -216,8 +225,8 @@ function move(payload?: MouseEvent) {
 }
 
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  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
@@ -245,14 +254,14 @@ function setTransform(attrName: string, value: string | number) {
   } else {
     setValue = props.params.transform + ` ${attrName}(${value})`
   }
-  store.dispatch("updateWidgetData", {
+  widgetStore.updateWidgetData({
     uuid: props.params.uuid,
     key: 'transform',
     value: setValue,
     pushHistory: false,
   })
-  // updateWidgetData({
+  // store.dispatch("updateWidgetData", {
-  //   uuid: this.params.uuid,
+  //   uuid: props.params.uuid,
   //   key: 'transform',
   //   value: setValue,
   //   pushHistory: false,
@@ -297,9 +306,11 @@ function fixRotate() {
     flipTemp = props.params.flip
     props.params.flip = null
   }
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
   setTimeout(() => {
-    store.commit('setShowMoveable', true)
+    // store.commit('setShowMoveable', true)
+    controlStore.setShowMoveable(true)
   }, 100)
 }
 
@@ -313,7 +324,7 @@ function lockOthers() {
   } else {
     locksTemp = []
     for (const widget of dWidgets.value) {
-      locksTemp.push(widget.lock)
+      locksTemp.push(widget?.lock || false)
     }
     dWidgets.value.forEach((widget: any) => {
       widget.uuid != props.params.uuid && (widget.lock = true)

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

@@ -71,7 +71,7 @@
 // 图片组件样式
 // const NAME = 'w-image-style'
 import { nextTick, reactive, ref, watch, onBeforeUnmount } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import numberInput from '../../settings/numberInput.vue'
 import iconItemSelect, { TIconItemSelectData } from '../../settings/iconItemSelect.vue'
 import numberSlider from '../../settings/numberSlider.vue'
@@ -85,9 +85,14 @@ import layerIconList from '@/assets/data/LayerIconList'
 import alignIconList from '@/assets/data/AlignListData'
 import picBox from '@/components/business/picture-selector'
 import imageCutout from '@/components/business/image-cutout'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import wImageSetting, { TImageSetting } from './wImageSetting'
 import { TGetImageListResult } from '@/api/material'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore, useControlStore, useForceStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TupdateLayerIndexData } from '@/store/design/widget/actions/layer'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   picBoxShow: boolean
@@ -129,13 +134,17 @@ const state = reactive<TState>({
 const picBoxRef = ref<typeof picBox | null>(null)
 const imageCutoutRef = ref<typeof imageCutout | null>(null)
 
-const store = useStore()
+// const store = useStore()
-const {
+const widgetStore = useWidgetStore()
-  dActiveElement, dMoving, dWidgets
+const forceStore = useForceStore()
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+const canvasStore = useCanvasStore()
-// computed: {
+// const {
-//   ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets']),
+//   dActiveElement, dWidgets
-// },
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const controlStore = useControlStore()
+const { dMoving } = storeToRefs(controlStore)
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
+
 
 let lastUuid: string | undefined = undefined
 let tag: boolean
@@ -150,6 +159,7 @@ watch(
   () => dActiveElement.value,
   (newValue, oldValue) => {
     change()
+    if (!newValue) return
     // 失焦取消编辑模式
     if (newValue.uuid != lastUuid && typeof lastUuid !== 'undefined') {
       imgCrop(false)
@@ -191,34 +201,38 @@ function changeValue() {
   }
   for (let key in state.innerElement) {
     if (state.ingoreKeys.indexOf(key) !== -1) {
-      dActiveElement.value[key] = state.innerElement[(key as keyof TImageSetting)]
+      (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,
@@ -226,15 +240,15 @@ function finishSliceData(key: string, value: number | number[]) {
   }
 }
 
-function finish(key: string = "", value: number | number[] | string | null = "") {
+function finish(key: string = "", value: string | number | (string | number)[] | null = "") {
-  store.dispatch('updateWidgetData', {
+  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,
@@ -243,30 +257,31 @@ function finish(key: string = "", value: number | number[] | string | null = "")
 
 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() {
@@ -307,8 +322,8 @@ async function changeContainer(setting: any) {
 async function selectDone(img: TGetImageListResult) {
   state.innerElement.imgUrl = img.url
   const loadImg = await getImage(img.url)
-  state.innerElement.width = loadImg.width * store.getters.dZoom / 100
+  state.innerElement.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)
 }
 
@@ -319,12 +334,16 @@ function imgCrop(val: boolean) {
   const { left, top } = el.getBoundingClientRect()
   toolBarStyle = { left: left + 'px', top: top + 'px' }
   state.innerElement.cropEdit = val
-  store.commit('setShowRotatable', !val)
+
+  // store.commit('setShowRotatable', !val)
+  controlStore.setShowRotatable(!val)
+  
 }
 
 
 function cropHandle() {
-  store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
+  controlStore.setCropUuid(state.innerElement.cropEdit ? state.innerElement.uuid : '-1')
+  // store.commit('setCropUuid', state.innerElement.cropEdit ? state.innerElement.uuid : -1)
 }
 
 // 图库选择器

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

@@ -35,12 +35,14 @@
 // 图片组件
 // const NAME = 'w-qrcode'
 
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import QRCode from '@/components/business/qrcode'
 import { TWQrcodeSetting } from './wQrcodeSetting';
 import { computed, nextTick, onMounted, onUpdated, reactive, ref, watch } from 'vue';
-import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters';
 import { Options } from 'qr-code-styling';
+import { useForceStore, useWidgetStore } from '@/store';
+import { storeToRefs } from 'pinia';
 
 type TProps = {
   params: TWQrcodeSetting & {
@@ -57,12 +59,15 @@ type TState = {
   qrCodeOptions: Options
 }
 
-const store = useStore()
+// const store = useStore()
+const forceStore = useForceStore()
+const widgetStore = useWidgetStore()
 const props = defineProps<TProps>()
 const state = reactive<TState>({
   qrCodeOptions: {}
 })
-const { dActiveElement, dZoom } = useSetupMapGetters(['dActiveElement', 'dZoom'])
+// const { dActiveElement } = useSetupMapGetters(['dActiveElement'])
+const { dActiveElement } = storeToRefs(widgetStore)
 const width = computed(() => Number(props.params.width))
 const widgetRef = ref<HTMLElement | null>(null)
 
@@ -76,7 +81,8 @@ watch(
 
 onUpdated(() => {
   updateRecord()
-  store.commit('updateRect')
+  forceStore.setUpdateRect()
+  // store.commit('updateRect')
 })
 
 onMounted(async () => {
@@ -88,8 +94,8 @@ onMounted(async () => {
 })
 // ...mapActions(['updateWidgetData']),
 function updateRecord() {
-  if (dActiveElement.value.uuid === props.params.uuid) {
+  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,7 +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, useForceStore, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -93,11 +97,18 @@ const state = reactive<TState>({
   alignIconList,
   localization,
 })
-const store = useStore()
+
-const {
+// const store = useStore()
-  dActiveElement, dMoving, dWidgets
+const controlStore = useControlStore()
-} = useSetupMapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+const widgetStore = useWidgetStore()
-// ...mapGetters(['dActiveElement', 'dMoving', 'dWidgets'])
+const forceStore = useForceStore()
+
+
+// const {
+//   dActiveElement, dWidgets
+// } = useSetupMapGetters(['dActiveElement', 'dWidgets'])
+const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement, dWidgets } = storeToRefs(widgetStore)
 
 let lastUuid: string | null = null
 
@@ -105,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,
       // })
@@ -156,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,
@@ -189,36 +204,42 @@ 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) {
-  store.commit('setShowMoveable', false)
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+
   await api.material.addMyPhoto(img)
   // this.innerElement.width = img.width
   // this.innerElement.height = img.height * (this.innerElement.width / img.width)
   state.innerElement.url = img.url
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 </script>
 

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 '@/store';
 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 '@/store/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,7 +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, useWidgetStore } from '@/store'
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget'
+import { TUpdateAlignData } from '@/store/design/widget/actions/align'
 
 type TState = {
   activeNames: string[]
@@ -64,10 +68,13 @@ const state = reactive<TState>({
   layerIconList,
   alignIconList,
 })
-const store = useStore()
+// const store = useStore()
-const {
+const widgetStore = useWidgetStore()
-  dActiveElement, dMoving
+// const {
-} = useSetupMapGetters(['dActiveElement', 'dMoving'])
+//   dActiveElement
+// } = useSetupMapGetters(['dActiveElement'])
+const { dMoving } = storeToRefs(useControlStore())
+const { dActiveElement } = storeToRefs(widgetStore)
 
 // ...mapGetters(['dActiveElement', 'dMoving']),
 
@@ -111,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],
       // })
     }
   }
@@ -132,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,
@@ -147,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 '@/store'
 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 '@/store'
 
 export type TwTextParams = {
   rotate?: number
@@ -83,7 +84,10 @@ type TProps = {
 
 const props = defineProps<TProps>()
 
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const forceStore = useForceStore()
+const historyStore = useHistoryStore()
 const route = useRoute()
 const state = reactive({
   loading: false,
@@ -93,7 +97,7 @@ const state = reactive({
 const widget = ref<HTMLElement | null>(null)
 const editWrap = ref<HTMLElement | null>(null)
 
-const dActiveElement = computed(() => store.getters.dActiveElement)
+const dActiveElement = computed(() => widgetStore.dActiveElement)
 const isDraw = computed(() => route.name === 'Draw' && fontWithDraw)
 
 onUpdated(() => {
@@ -142,18 +146,24 @@ watch(
 watch(
   () => state.editable,
   (value) => {
-    store.dispatch('updateWidgetData', {
+    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'
@@ -66,6 +66,10 @@ import effectWrap from '../../settings/EffectSelect/TextWrap.vue'
 import { useFontStore } from '@/common/methods/fonts'
 import usePageFontsFilter from './pageFontsFilter'
 import { wTextSetting ,TwTextData } from './wTextSetting';
+import { storeToRefs } from 'pinia';
+import { useControlStore, useForceStore, useWidgetStore } from '@/store';
+import { TUpdateWidgetPayload } from '@/store/design/widget/actions/widget';
+import { TUpdateAlignData } from '@/store/design/widget/actions/align';
 
 type TState = {
   activeNames: string[],
@@ -82,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: [],
@@ -98,8 +104,10 @@ 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 = computed(() => store.getters.dMoving)
+const { dMoving } = storeToRefs(useControlStore())
+
 // const isDraw = computed(() => route.name === 'Draw')
 
 watch(() => dActiveElement.value, () => {
@@ -144,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 || '')
   }
@@ -178,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) {
@@ -202,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() {
@@ -246,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,12 +8,14 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import store from './store'
+// import store from './store'
 import utils from './utils'
 import 'normalize.css/normalize.css'
 import '@/assets/styles/index.less'
 import elementConfig from './utils/widgets/elementConfig'
+import { createPinia } from 'pinia'
 
+const pinia = createPinia()
 const app = createApp(App)
 
 elementConfig.components.forEach((component) => {
@@ -25,7 +27,8 @@ elementConfig.plugins.forEach((plugin) => {
 })
 
 app
-  .use(store)
+  // .use(store)
+  .use(pinia)
   .use(router)
   .use(utils)
   .mount('#app')

src/mixins/methods/dealWithCtrl.ts

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

src/mixins/methods/handlePaste.ts

@@ -11,23 +11,28 @@
 //   console.log('主动粘贴', clipdata.getData('text/plain'))
 // })
 
-import store from '@/store'
+// import store from '@/store'
 import api from '@/api'
 import Qiniu from '@/common/methods/QiNiu'
 import _config from '@/config'
 import { getImage } from '@/common/methods/getImgDetail'
 // import wImage from '@/components/modules/widgets/wImage/wImage.vue'
 import wImageSetting from '@/components/modules/widgets/wImage/wImageSetting'
-// import wText from '@/components/modules/widgets/wText/wText.vue'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
 import eventBus from '@/utils/plugins/eventBus'
+import { useControlStore, usePageStore, useWidgetStore } from '@/store'
+// import wText from '@/components/modules/widgets/wText/wText.vue'
 
 export default () => {
   return new Promise<void>((resolve) => {
+    const pageStore = usePageStore()
+    const widgetStore = useWidgetStore()
+    const controlStore = useControlStore()
+
     navigator.clipboard
       .read()
-      .then(async (dataTransfer: any) => {
+      .then(async (dataTransfer: ClipboardItems) => {
-        if (store.getters.dActiveElement.editable) {
+        if (widgetStore.dActiveElement?.editable) {
           return
         }
         for (let i = 0; i < dataTransfer.length; i++) {
@@ -37,22 +42,27 @@ export default () => {
             const file = new File([imageBlob], 'screenshot.png', { type: 'image/png' })
             // 上传图片
             const qnOptions = { bucket: 'xp-design', prePath: 'user' }
-            const result: any = await Qiniu.upload(file, qnOptions)
+            const 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 })
             // 刷新用户列表
             eventBus.emit('refreshUserImages')
             // 添加图片到画布中
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+
             const setting = JSON.parse(JSON.stringify(wImageSetting))
             setting.width = width
             setting.height = height
             setting.imgUrl = url
-            const { width: pW, height: pH } = store.getters.dPage
+            const { width: pW, height: pH } = pageStore.dPage
             setting.left = pW / 2 - width / 2
             setting.top = pH / 2 - height / 2
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
+
             // 清空剪贴板，防止多次上传图片
             navigator.clipboard.write([
               new ClipboardItem({
@@ -61,14 +71,19 @@ export default () => {
             ])
             // 最后尝试复制，将图片替换为图片组件
             setTimeout(() => {
-              store.dispatch('copyWidget')
+              widgetStore.copyWidget()
+              // store.dispatch('copyWidget')
             }, 100)
             break
           } else if (item.types.toString().indexOf('text') !== -1) {
-            store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            // store.commit('setShowMoveable', false) // 清理掉上一次的选择
+            controlStore.setShowMoveable(false) // 清理掉上一次的选择
+            
             const setting = JSON.parse(JSON.stringify(wTextSetting))
             setting.text = await navigator.clipboard.readText()
-            store.dispatch('addWidget', setting)
+
+            widgetStore.addWidget(setting)
+            // store.dispatch('addWidget', setting)
             break
           } else resolve()
         }

src/mixins/methods/keyCodeOptions.ts

@@ -5,10 +5,15 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-11-30 10:09:55
  */
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/store'
+import { TdWidgetData } from '@/store/design/widget'
+// import store from '@/store'
 
 export default function keyCodeOptions(e: any, params: any) {
   const { f } = params
+  const controlStore = useControlStore()
+  const widgetStore = useWidgetStore()
+
   switch (e.keyCode) {
     case 38:
       udlr('top', -1 * f, e)
@@ -25,17 +30,22 @@ export default function keyCodeOptions(e: any, params: any) {
     case 46:
     case 8:
       {
-        if (store.getters.dActiveElement.isContainer) {
+        if (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 && store.getters.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
   }
@@ -43,10 +53,11 @@ export default function keyCodeOptions(e: any, params: any) {
 /**
  * 对组合的子元素某个值进行判断
  */
-function checkGroupChild(pid: number | string, key: any) {
+function checkGroupChild(pid: number | string, key: keyof TdWidgetData) {
+  const widgetStore = useWidgetStore()
   let itHas = false
-  const childs = store.getters.dWidgets.filter((x: any) => x.parent === pid) || []
+  const childs = widgetStore.dWidgets.filter((x) => x.parent === pid) || []
-  childs.forEach((element: any) => {
+  childs.forEach((element) => {
     element[key] && (itHas = true)
   })
   return itHas
@@ -54,20 +65,28 @@ function checkGroupChild(pid: number | string, key: any) {
 /**
  * TODO 键盘操作上下左右移动组件
  */
-function udlr(type: any, value: any, event: any) {
+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,21 +5,29 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
-import store from '@/store'
+import { useControlStore, useWidgetStore } from '@/store'
+// import store from '@/store'
 
 const move = {
   methods: {
     initmovement(e: any) {
       // let target = store.state.pageDesign.dActiveElement
-      const target = store.getters.dActiveElement
+      const widgetStore = useWidgetStore()
-
+      const target = widgetStore.dActiveElement
+      if (!target) return
       // 设置移动状态初始值
-      store.dispatch('initDMove', {
+      widgetStore.initDMove({
         startX: e.pageX,
         startY: e.pageY,
         originX: target.left,
         originY: target.top,
       })
+      // store.dispatch('initDMove', {
+      //   startX: e.pageX,
+      //   startY: e.pageY,
+      //   originX: target.left,
+      //   originY: target.top,
+      // })
 
       // 绑定鼠标移动事件
       document.addEventListener('mousemove', this.handlemousemove, true)
@@ -28,20 +36,27 @@ const move = {
       document.addEventListener('mouseup', this.handlemouseup, true)
     },
 
-    handlemousemove(e: any) {
+    handlemousemove(e: MouseEvent) {
+      const widgetStore = useWidgetStore()
       e.stopPropagation()
       e.preventDefault()
 
-      store.dispatch('dMove', {
+      widgetStore.dMove({
         x: e.pageX,
         y: e.pageY,
       })
+      // store.dispatch('dMove', {
+      //   x: e.pageX,
+      //   y: e.pageY,
+      // })
     },
 
     handlemouseup() {
+      const controlStore = useControlStore()
       document.removeEventListener('mousemove', this.handlemousemove, true)
       document.removeEventListener('mouseup', this.handlemouseup, true)
-      store.dispatch('stopDMove')
+      controlStore.stopDMove()
+      // store.dispatch('stopDMove')
     },
   },
 }
@@ -49,23 +64,36 @@ const move = {
 const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
-      if (!store.getters.dAltDown) {
+      const controlStore = useControlStore()
+      const widgetStore = useWidgetStore()
+      if (!controlStore.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
-        store.commit('setMouseEvent', e)
+        widgetStore.setMouseEvent(e)
+        // store.commit('setMouseEvent', e)
       }
 
-      const target = store.getters.dActiveElement
+      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/mixins/shortcuts.ts

@@ -5,13 +5,14 @@
  * @LastEditors: ShawnPhang <https://m.palxp.cn>
  * @LastEditTime: 2023-09-19 17:29:06
  */
-import store from '@/store'
+// import store from '@/store'
 // const _this: any = {}
 // _this.dHistoryParams = store.getters.dHistoryParams
 
 import keyCodeOptions from './methods/keyCodeOptions'
 import dealWithCtrl from './methods/dealWithCtrl'
 import { useStore, Store } from 'vuex'
+import { TControlStore } from '@/store/design/control'
 
 const ignoreNode = ['INPUT', 'TEXTAREA']
 
@@ -34,7 +35,7 @@ let hadDown = false
 
 const shortcuts = {
   methods: {
-    handleKeydowm(store: Store<any>, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
+    handleKeydowm(store: TControlStore, checkCtrl: number | undefined, instance: any, dealCtrl: (e: any, instance: any) => void) {
       return (e: any) => {
         const nodeName = e.target.nodeName
         if (ignoreNode.indexOf(nodeName) !== -1 || (nodeName === 'DIV' && e.target.contentEditable === 'true')) {
@@ -55,14 +56,16 @@ const shortcuts = {
         //   hadDown = false
         // }
         if (shift || ctrl) {
-          store.dispatch('updateAltDown', true)
+          store.updateAltDown(true)
+          // store.dispatch('updateAltDown', true)
           clearInterval(checkCtrl)
           checkCtrl = setInterval(() => {
             // TODO: 防止组合键导致页面失焦无法操作
             if (!document.hasFocus()) {
               clearInterval(checkCtrl)
               hadDown = false
-              store.dispatch('updateAltDown', false)
+              store.updateAltDown(false)
+              // store.dispatch('updateAltDown', false)
             }
           }, 500)
         }
@@ -114,13 +117,14 @@ const shortcuts = {
         keyCodeOptions(e, { f })
       }
     },
-    handleKeyup(store: Store<any>, checkCtrl: number | undefined) {
+    handleKeyup(store: TControlStore, checkCtrl: number | undefined) {
       return (e: any) => {
         console.log(e)
         clearInterval(checkCtrl)
         hadDown = false
         if (e.key === 'Alt' || e.key === 'Shift' || e.key === 'Control' || e.key === 'Meta') {
-          store.dispatch('updateAltDown', false)
+          store.updateAltDown(false)
+          // store.dispatch('updateAltDown', false)
         }
       }
     },

src/store/base/index.ts

@@ -0,0 +1,52 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: Base全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from 'pinia'
+
+// import actions from './actions'
+// import _config from '@/config'
+
+type TStoreBaseState = {
+  loading: boolean | null
+  scroll: boolean
+  /** fonts */
+  fonts: string[]
+  /** 抠图服务 */
+  app: string | null
+}
+
+type TUserAction = {
+  hideLoading: () => void
+  setFonts: (list: string[]) => void
+}
+
+/** Base全局状态管理 */
+const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base', {
+  state: () => ({
+    loading: null,
+    scroll: true,
+    fonts: [], // 缓存字体列表
+    app: null, // 抠图服务
+  }),
+  actions: {
+    /** 隐藏loading */
+    hideLoading() {
+      setTimeout(() => {
+        this.loading = false
+      }, 600)
+    },
+    setFonts(list: string[]) {
+      this.fonts = list
+    },
+  }
+})
+
+export type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
+
+export default useBaseStore
+

src/store/base/user.ts

@@ -0,0 +1,61 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-17 15:00:00
+ * @Description: User全局状态管理
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from "pinia"
+
+type TUserStoreState = {
+  /** 登录状态 */
+  online: boolean
+  /** 储存用户信息 */
+  user: {
+    name: string | null
+  }
+  /**是否为管理员模式 */
+  manager: string
+  /** 管理员是否正在编辑模板 */
+  tempEditing: boolean
+}
+
+type TUserAction = {
+  /** 修改登录状态 */
+  changeOnline: (state: boolean) => void
+  /** 修改登录用户 */
+  changeUser: (userName: string) => void
+  managerEdit: (status: boolean) => void
+}
+
+/** User全局状态管理 */
+const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>('userStore', {
+  state: () => ({
+    online: true, // 登录状态，
+    user: {
+      name: localStorage.getItem('username'),
+    }, // 储存用户信息
+    manager: '', // 是否为管理员模式
+    tempEditing: false, // 管理员是否正在编辑模板
+  }),
+  actions: {
+    changeOnline(status: boolean) {
+      this.online = status
+    },
+    changeUser(name: string) {
+      this.user.name = name
+      // state.user = Object.assign({}, state.user)
+      // state.user = { ...state.user }
+      localStorage.setItem('username', name)
+    },
+    managerEdit(status: boolean) {
+      this.tempEditing = status
+    },
+    
+  }
+})
+
+export type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
+
+export default useUserStore

src/store/design/canvas/index.ts

@@ -0,0 +1,96 @@
+
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: 画布全局配置
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from 'pinia'
+
+type TScreeData = {
+  /** 记录编辑界面的宽度 */
+  width: number
+  /** 记录编辑界面的高度 */
+  height: number
+}
+
+type TGuidelinesData = {
+  verticalGuidelines: number[]
+  horizontalGuidelines: number[]
+}
+
+type TCanvasState = {
+  /** 画布缩放百分比 */
+  dZoom: number
+  /** 画布垂直居中修正值 */
+  dPaddingTop: number
+  /** 编辑界面 */
+  dScreen: TScreeData
+  /** 标尺辅助线 */
+  guidelines: TGuidelinesData
+}
+
+type TStoreAction = {
+  /** 更新画布缩放百分比 */
+  updateZoom: (zoom: number) => void
+  /** 更新画布垂直居中修正值 */
+  updatePaddingTop: (num: number) => void
+  /** 更新编辑界面的宽高 */
+  updateScreen: (data: TScreeData) => void
+  /** 修改标尺线 */
+  updateGuidelines: (lines: TGuidelinesData) => void
+  /** 强制重绘画布 */
+  reChangeCanvas: () => void
+}
+
+/** 画布全局设置 */
+const CanvasStore = defineStore<"canvasStore", TCanvasState, {}, TStoreAction>("canvasStore", {
+  state: () => ({
+    dZoom: 0, // 画布缩放百分比
+    dPaddingTop: 0, // 画布垂直居中修正值
+    dScreen: {
+      width: 0, // 记录编辑界面的宽度
+      height: 0, // 记录编辑界面的高度
+    },
+    // gridSize: {
+    //   width: 0, // 网格小格子的宽度
+    //   height: 0, // 网格小格子的高度
+    // },
+    guidelines: {
+      // moveable 标尺辅助线
+      verticalGuidelines: [],
+      horizontalGuidelines: [],
+    },
+  }),
+  actions: {
+    /** 更新画布缩放百分比 */
+    updateZoom(zoom: number) {
+      this.dZoom = zoom
+    },
+    /** 更新画布垂直居中修正值 */
+    updatePaddingTop(num: number) {
+      this.dPaddingTop = num
+    },
+    /** 更新编辑界面的宽高 */
+    updateScreen({ width, height }: TScreeData) {
+      console.log(this.dScreen)
+      this.dScreen.width = width
+      this.dScreen.height = height
+    },
+    /** 修改标尺线 */
+    updateGuidelines(lines: TGuidelinesData) {
+      this.guidelines = { ...this.guidelines, ...lines }
+    },
+    /** 强制重绘画布 */
+    reChangeCanvas() {
+      // const tag = this.dPage.tag
+      // this.dPage.tag = tag === 0 ? 0.01 : 0
+    },
+  }
+})
+
+export type TCanvasStore = Store<"canvasStore", TCanvasState, {}, TStoreAction>
+
+export default CanvasStore

src/store/design/control/index.ts

@@ -0,0 +1,116 @@
+
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { useHistoryStore } from "@/store";
+import { Store, defineStore } from "pinia";
+
+type TControlState = {
+  /** 是否正在移动组件 */
+  dMoving: boolean 
+  /** 是否正在抓取组件 */
+  dDraging: boolean
+  /** 是否正在调整组件宽高 */
+  dResizeing: boolean
+  /** 是否显示参考线 */
+  dShowRefLine: boolean
+  /** 全局控制选择框的显示 */
+  showMoveable: boolean
+  /** 是否显示moveable的旋转按钮 */
+  showRotatable: boolean
+  /** 记录是否按下alt键 / 或ctrl */
+  dAltDown: boolean
+  /** 正在编辑or裁剪的组件id */
+  dCropUuid: string
+}
+
+type TControlAction = {
+  setdMoving: (isMoving: boolean) => void
+  setDraging: (isDraging: boolean) => void
+  setdResizeing: (isResizing: boolean) => void
+  showRefLine: (isRefLine: boolean) => void
+  setShowMoveable: (isShowMoveable: boolean) => void
+  setShowRotatable: (isShowRotatable: boolean) => void
+  updateAltDown: (isPressAltDown: boolean) => void
+  /** 组件调整结束 */
+  stopDResize: () => void
+  /** 组件移动结束 */
+  stopDMove: () => void
+  /** 设置正在裁剪or编辑的组件 */
+  setCropUuid: (uuid: string) => void
+}
+
+/** 全局控制配置 */
+const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
+  state: () => ({
+    dMoving: false, // 是否正在移动组件
+    dDraging: false, // 是否正在抓取组件
+    dResizeing: false, // 是否正在调整组件宽高
+    dShowRefLine: true, // 是否显示参考线
+    showMoveable: false, // 全局控制选择框的显示
+    showRotatable: true, // 是否显示moveable的旋转按钮
+    dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    dCropUuid: '-1', // 正在编辑or裁剪的组件id
+  }),
+  getters: {},
+  actions: {
+    setdMoving(bool: boolean) {
+      this.dMoving = bool
+    },
+    setDraging(drag: boolean) {
+      this.dDraging = drag
+    },
+    setdResizeing(bool: boolean) {
+      this.dResizeing = bool
+    },
+    showRefLine(show: boolean) {
+      this.dShowRefLine = show
+    },
+    setShowMoveable(show: boolean) {
+      this.showMoveable = show
+      // if (!show) {
+      //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
+      //   state.dActiveElement = state.dPage
+      // }
+    },
+    setShowRotatable(e: boolean) {
+      this.showRotatable = e
+    },
+    /** TODO 组合操作 */
+    updateAltDown(e: boolean) {
+      this.dAltDown = e
+      console.log('控制组合按键, 成组功能为: realCombined')
+    },
+    /** 组件调整结束 */
+    stopDResize() {
+      if (this.dResizeing) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory('stopDResize')
+        // store.dispatch('pushHistory', 'stopDResize')
+      }
+      this.dResizeing = false
+    },
+    /** 组件移动结束 */
+    stopDMove() {
+      if (this.dMoving) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory("stopDMove")
+        // store.dispatch('pushHistory', 'stopDMove')
+      }
+      this.dMoving = false
+    },
+    setCropUuid(uuid: string) {
+      // 设置正在裁剪or编辑的组件
+      this.dCropUuid = uuid
+    },
+  }
+})
+
+export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
+
+export default ControlStore

src/store/design/force/index.ts

@@ -0,0 +1,45 @@
+import { Store, defineStore } from "pinia";
+
+
+
+type TForceState = {
+  /** 画布强制刷新适应度 */
+  zoomScreenChange: number | null
+  /** 强制刷新操作框 */
+  updateRect: number | null
+  /** 强制设置选择元素 */
+  updateSelect: number | null
+}
+
+type TForceAction = {
+  setZoomScreenChange: () => void
+  setUpdateRect: () => void
+  setUpdateSelect: () => void
+}
+
+const ForceStore = defineStore<"forceStore", TForceState, {}, TForceAction>("forceStore", {
+  state: () => ({
+    zoomScreenChange: null, // 画布强制刷新适应度
+    updateRect: null, // 强制刷新操作框
+    updateSelect: null, // 强制设置选择元素
+  }),
+
+  actions: {
+    setZoomScreenChange() {
+      // 画布尺寸适应度强制刷新
+      this.zoomScreenChange = Math.random()
+    },
+    setUpdateRect() {
+      // 强制刷新操作框
+      this.updateRect = Math.random()
+    },
+    setUpdateSelect() {
+      // 强制触发元素选择
+      this.updateSelect = Math.random()
+    },
+  }
+})
+
+export type TForceStore = Store<"forceStore", TForceState, {}, TForceAction>
+
+export default ForceStore

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

@@ -0,0 +1,130 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { customAlphabet } from 'nanoid/non-secure'
+import { TGroupStore } from '..'
+import { useHistoryStore, usePageStore, useWidgetStore } from '@/store'
+import { TdWidgetData } from '../../widget'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+export function realCombined(store: TGroupStore) {
+  const widgetStore = useWidgetStore()
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+
+  const selectWidgets = widgetStore.dSelectWidgets
+  if (selectWidgets.length > 1) {
+    const widgets = widgetStore.dWidgets
+    const group: TdWidgetData = JSON.parse(store.dGroupJson)
+    group.uuid = nanoid()
+    widgets.push(group)
+    let left = Number(pageStore.dPage.width)
+    let top = Number(pageStore.dPage.height)
+    let right = 0
+    let bottom = 0
+    const sortWidgets = [] // 顺序取出元素
+    const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+    for (const w of widgets) {
+      selectkeys.includes(w.uuid) && sortWidgets.push(w)
+    }
+    for (let i = 0; i < sortWidgets.length; ++i) {
+      const uuid = sortWidgets[i].uuid
+      const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+      const widget = { ...widgets[index] } // clone
+      if (widget.isContainer) {
+        widgets.splice(index, 1) // 删除旧组合
+        for (let i = 0; i < widgets.length; i++) {
+          const item = widgets[i]
+          item.parent === widget.uuid && (item.parent = group.uuid)
+          // if (item.parent === widget.uuid) {
+          //   item.parent = group.uuid
+          //   // 重新排列
+          //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
+          //   // widgets.splice(index, 1)
+          //   // widgets.push(item)
+          // }
+        }
+      } else {
+        widget.parent = group.uuid
+        // 重新排列
+        widgets.splice(index, 1)
+        widgets.push(widget)
+      }
+
+      // sortWidgets.push({
+      //   index: index,
+      //   widget: widget,
+      // })
+      left = Math.min(left, widget.left)
+      top = Math.min(top, widget.top)
+      right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
+      bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
+    }
+    // sortWidgets.sort((a, b) => a.index > b.index)
+    // for (let i = 0; i < sortWidgets.length; ++i) {
+    //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
+    //     widgets.splice(index, 1)
+    //     widgets.push(sortWidgets[i].widget)
+    // }
+
+    group.left = Number(left)
+    group.top = Number(top)
+    group.width = Number(right - left)
+    group.height = Number(bottom - top)
+    widgetStore.dActiveElement = group
+    widgetStore.dSelectWidgets = []
+
+    historyStore.pushHistory('realCombined')
+    // store.dispatch('pushHistory', 'realCombined')
+    // store.dispatch('reChangeCanvas')
+  }
+}
+
+export function getCombined(store: TGroupStore): Promise<TdWidgetData> {
+  const widgetStore = useWidgetStore()
+  const pageStore = usePageStore()
+
+  const selectWidgets = widgetStore.dSelectWidgets
+  return new Promise((resolve) => {
+    if (selectWidgets.length > 1) {
+      const widgets = widgetStore.dWidgets
+      const group = JSON.parse(store.dGroupJson)
+      group.uuid = nanoid()
+      // widgets.push(group)
+      let left = pageStore.dPage.width
+      let top = pageStore.dPage.height
+      let right = 0
+      let bottom = 0
+      const sortWidgets = [] // 顺序取出元素
+      const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
+      for (const w of widgets) {
+        selectkeys.includes(w.uuid) && sortWidgets.push(w)
+      }
+      for (let i = 0; i < sortWidgets.length; ++i) {
+        const uuid = sortWidgets[i].uuid
+        const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
+        const widget = { ...widgets[index] } // clone
+        left = Math.min(left, widget.left)
+        top = Math.min(top, widget.top)
+        right = Math.max(right, Number(widget.width) + Number(widget.left))
+        bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
+      }
+
+      group.left = left
+      group.top = top
+      group.width = right - left
+      group.height = bottom - top
+
+      resolve(group)
+    }
+  })
+}
+
+export function initGroupJson(store: TGroupStore, json: string) {
+  store.dGroupJson = json
+}

src/store/design/group/index.ts

@@ -0,0 +1,38 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { Store, defineStore } from "pinia";
+import { getCombined, initGroupJson, realCombined } from "./action";
+import { TdWidgetData } from "../widget";
+
+type TGroupState = {
+  /** 组合的json数据 */
+  dGroupJson: string
+}
+
+type TGroupAction = {
+  realCombined(): void
+  getCombined(): Promise<TdWidgetData>
+  initGroupJson(data: string): void
+}
+
+const GroupStore = defineStore<"groupStore", TGroupState, {}, TGroupAction>("groupStore", {
+  state: () => ({
+    dGroupJson: "" // 组合的json数据
+  }),
+
+  actions: {
+    realCombined() { realCombined(this) },
+    getCombined() { return getCombined(this) },
+    initGroupJson(data) { initGroupJson(this, data) },
+  }
+})
+
+export type TGroupStore = Store<"groupStore", TGroupState, {}, TGroupAction>
+
+export default GroupStore

src/store/design/history/actions/handleHistory.ts

@@ -0,0 +1,40 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
+
+import { useControlStore, usePageStore } from "@/store"
+import { THistoryStore } from ".."
+
+export default function handleHistory(store: THistoryStore, action: "undo" | "redo") {
+  const pageStore = usePageStore()
+  const controlStore = useControlStore()
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  const history = store.dHistory
+  const pageHistory = store.dPageHistory
+  const historyParams = store.dHistoryParams
+  if (action === 'undo') {
+    historyParams.index -= 1 // 下标向前移1 撤销
+    console.log(historyParams.index)
+    if (historyParams.index > -1) {
+      store.state.dWidgets = JSON.parse(history[historyParams.index])
+      pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
+    }
+  } else if (action === 'redo') {
+    historyParams.index += 1 // 下标向后移1 重做
+    // 如果下标小于历史记录列表长度，直接取出历史记录
+    // if (historyParams.index < historyParams.length) {
+    store.state.dWidgets = JSON.parse(history[historyParams.index])
+    pageStore.setDPage(JSON.parse(pageHistory[historyParams.index]))
+    // } else {
+    //   // 否则设置下标为列表最后一项
+    //   historyParams.index = historyParams.length - 1
+    //   store.state.dWidgets = JSON.parse(history[historyParams.index])
+    //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
+    // }
+  }
+}

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

@@ -0,0 +1,51 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
+
+import { usePageStore, useWidgetStore } from "@/store"
+import { THistoryStore } from ".."
+import { proxyToObject } from "@/utils/utils"
+
+/** push操作历史记录 */
+export function pushHistory(store: THistoryStore, msg: string = "") {
+  const pageStore = usePageStore()
+  const selectStore = useWidgetStore()
+  console.log('history压栈', '来源: ' + msg)
+  // 如果有上一次记录，并且与新纪录相同，那么不继续操作
+  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(selectStore.dWidgets)) {
+    return
+  }
+  if (store.dHistoryParams.index < history.length - 1) {
+    const index = store.dHistoryParams.index + 1
+    const len = history.length - index
+    store.dHistory.splice(index, len)
+    store.dPageHistory.splice(index, len)
+    store.dHistoryParams.length = history.length
+    store.dHistoryParams.index = history.length - 1
+  }
+  store.dHistory.push(JSON.stringify(selectStore.dWidgets))
+  store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
+  store.dHistoryParams.index = history.length - 1
+  store.dHistoryParams.length = history.length
+}
+
+/** 添加颜色选择历史记录 */
+export function pushColorToHistory(store: THistoryStore, color: string) {
+  const history = store.dColorHistory
+  // 如果已经存在就提到前面来，避免重复
+  const index = history.indexOf(color)
+  if (index !== -1) {
+    history.splice(index, 1)
+  }
+  // 最多保存3种颜色
+  if (history.length === 4) {
+    history.splice(history.length - 1, 1)
+  }
+  // 把最新的颜色放在头部
+  const head = [color]
+  store.dColorHistory = head.concat(history)
+}

src/store/design/history/index.ts

@@ -0,0 +1,81 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-27 21:00:00
+ */
+
+import { Store, defineStore } from "pinia"
+import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
+import handleHistory from "./actions/handleHistory"
+import { usePageStore, useWidgetStore } from "@/store"
+
+export type THistoryParamData = {
+  index: number
+  length: number
+  maxLength: number
+}
+
+type THistoryState = {
+  /** 记录历史操作（保存整个画布的json数据） */
+  dHistory: string[]
+  /** 记录历史操作对应的激活的组件的uuid */
+  dActiveUuidHistory: string[]
+  /** 记录历史操作对应的page */
+  dPageHistory: string[]
+  dHistoryParams: THistoryParamData,
+  /** 记录历史选择的颜色 */
+  dColorHistory: string[]
+}
+
+type THistoryAction = {
+  /**
+   * 保存操作历史，
+   * 修改数据、移动完成后都会自动保存
+   * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
+   */
+  pushHistory: (msg?: string) => void
+  /**
+   * 操作历史记录
+   * action为undo表示撤销
+   * action为redo表示重做
+   */
+  handleHistory: (action: "undo" | "redo") => void
+  pushColorToHistory: (color: string) => void
+}
+
+/** 历史记录Store */
+const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryAction>("historyStore", {
+  state: () => ({
+    dHistory: [],
+    dHistoryParams: {
+      index: -1,
+      length: 0,
+      maxLength: 20,
+    },
+    dActiveUuidHistory: [],
+    dColorHistory: [],
+    dPageHistory: []
+  }),
+
+  actions: {
+    pushHistory(msg) {
+      pushHistory(this, msg)
+    },
+    handleHistory(action) {
+      const selectStore = useWidgetStore()
+      const pageStore = usePageStore()
+      handleHistory(this, action)
+      // 激活组件默认为page
+      selectStore.dActiveElement = pageStore.dPage
+    },
+    pushColorToHistory(color) {
+      pushColorToHistory(this, color)
+    }
+  }
+})
+
+export type THistoryStore = Store<"historyStore", THistoryState, {}, THistoryAction>
+
+export default HistoryStore

src/store/design/page/index.ts

@@ -0,0 +1,106 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Page全局配置
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from 'pinia'
+
+export type TPageState = {
+  name: string
+  type: string
+  uuid: string
+  left: number
+  top: number
+  /** 画布宽度 */
+  width: number
+  /** 画布高度 */
+  height: number
+  /** 画布背景颜色 */
+  backgroundColor: string
+  /** 画布背景图片 */
+  backgroundImage: string
+  backgroundTransform: {
+    x?: number
+    y?: number
+  }
+  /** 透明度 */
+  opacity: number
+  /** 强制刷新用 */
+  tag: number
+  setting:{
+    label: string
+    parentKey: string
+    value: boolean
+  }[]
+  record: Record<string, any>
+}
+
+type TPageGetter = {
+  dPage(state: TPageState): TPageState
+}
+
+type TPageActions = {
+  /** 更新Page数据 */
+  updatePageData<T extends keyof TPageState>(data: {
+    key: T
+    value: TPageState[T]
+    pushHistory?: boolean
+  }): void
+  /** 设置dPage */
+  setDPage(data: TPageState): void
+}
+
+/** 页面全局配置 */
+const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
+  state: () => ({
+    name: '背景页面',
+    type: 'page',
+    uuid: '-1',
+    left: 0,
+    top: 0,
+    width: 1920, // 画布宽度
+    height: 1080, // 画布高度
+    backgroundColor: '#ffffff', // 画布背景颜色
+    backgroundImage: '', // 画布背景图片
+    backgroundTransform: {},
+    opacity: 1, // 透明度
+    tag: 0, // 强制刷新用
+    setting: [
+      {
+        label: '背景颜色',
+        parentKey: 'backgroundColor',
+        value: false,
+      },
+    ],
+    record: {},
+  }),
+  getters: {
+    dPage: (state) => state
+  },
+  actions: {
+    /** 更新Page数据 */
+    updatePageData({ key, value, pushHistory }) {
+      const data = this as TPageState
+      if (data[key] !== value || pushHistory) {
+        data[key] = value
+        // 画布修改先不压入历史栈，因为替换模板后会重复压栈
+        // store.dispatch('pushHistory', 'updatePageData')
+      }
+    },
+    /** 设置dPage */
+    setDPage(data: TPageState) {
+      const cur = this as Record<string, any>
+      const keys = Object.keys(data) as (keyof TPageState)[];
+      keys.forEach(val => {
+        cur[val] = data[val]
+      })
+    }
+  }
+})
+
+export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
+
+export default PageStore

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

@@ -0,0 +1,90 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+
+type TAlign = 'left' | 'ch' | 'right' | 'top' | 'cv' | 'bottom'
+
+export type TUpdateAlignData = {
+  align: TAlign
+  uuid: string
+  group?: TdWidgetData
+}
+
+export function updateAlign(store: TWidgetStore, { align, uuid, group }: TUpdateAlignData) {
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+
+  const widgets = store.dWidgets
+  const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.dActiveElement
+  let parent = group || pageStore.dPage
+
+  if (!target) return
+
+  if (target.parent !== '-1') {
+    const tmp = widgets.find((item: any) => item.uuid === target.parent)
+    tmp && (parent = tmp)
+  }
+
+  let left = target.left
+  let top = target.top
+  let pw = parent.record.width || parent.width
+  let ph = parent.record.height || parent.height
+
+  if (parent.uuid === '-1') {
+    pw = parent.width
+    ph = parent.height
+  }
+
+  const targetW = target.width
+  const targetH = target.height
+  switch (align) {
+    case 'left':
+      left = parent.left
+      break
+    case 'ch': // 水平居中
+      left = parent.left + pw / 2 - targetW / 2
+      break
+    case 'right':
+      left = parent.left + pw - targetW
+      break
+    case 'top':
+      top = parent.top
+      break
+    case 'cv': // 垂直居中
+      top = parent.top + ph / 2 - targetH / 2
+      break
+    case 'bottom':
+      top = parent.top + ph - targetH
+      break
+  }
+
+  if (target.left !== left || target.top !== top) {
+    if (target.isContainer) {
+      const dLeft = target.left - left
+      const dTop = target.top - top
+      const len = widgets.length
+      for (let i = 0; i < len; ++i) {
+        const widget = widgets[i]
+        if (widget.parent === target.uuid) {
+          widget.left -= dLeft
+          widget.top -= dTop
+        }
+      }
+    }
+    target.left = left
+    target.top = top
+
+    historyStore.pushHistory("updateAlign")
+    // store.dispatch('pushHistory', 'updateAlign')
+    canvasStore.reChangeCanvas()
+    // store.dispatch('reChangeCanvas')
+  }
+}

src/store/design/widget/actions/clone.ts

@@ -0,0 +1,81 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore } from "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+/** 拷贝组件 */
+export function copyWidget(store: TWidgetStore) {
+  const activeElement = JSON.parse(JSON.stringify(store.dActiveElement))
+  if (activeElement.type === 'page') {
+    return
+  }
+  navigator.clipboard.writeText('') // 清空系统剪贴板内容
+  const container = []
+  const selectWidgets = store.dSelectWidgets
+  if (selectWidgets.length === 0) {
+    const uuid = activeElement.uuid
+    container.push(activeElement)
+    if (activeElement.isContainer) {
+      const widgets = store.dWidgets
+      for (let i = 0; i < widgets.length; ++i) {
+        if (widgets[i].parent === uuid) {
+          container.push(widgets[i])
+        }
+      }
+    }
+  } else {
+    for (let i = 0; i < selectWidgets.length; ++i) {
+      const uuid = selectWidgets[i].uuid
+      container.push(selectWidgets[i])
+      if (selectWidgets[i].isContainer) {
+        const widgets = store.dWidgets
+        for (let i = 0; i < widgets.length; ++i) {
+          if (widgets[i].parent === uuid) {
+            container.push(widgets[i])
+          }
+        }
+      }
+    }
+  }
+  store.dCopyElement = JSON.parse(JSON.stringify(container))
+}
+
+/** 粘贴组件 */
+export function pasteWidget(store: TWidgetStore) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  const copyElement: TdWidgetData[] = JSON.parse(JSON.stringify(store.dCopyElement))
+  const container = copyElement.find((item) => item.isContainer)
+  for (let i = 0; i < copyElement.length; ++i) {
+    copyElement[i].uuid = nanoid()
+    if (container && copyElement[i].uuid !== container.uuid) {
+      copyElement[i].parent = container.uuid
+    } else {
+      copyElement[i].parent = '-1'
+    }
+    copyElement[i].top += 30
+    copyElement[i].left += 30
+  }
+  store.dWidgets = store.dWidgets.concat(copyElement)
+  store.dActiveElement = copyElement[0]
+  store.dSelectWidgets = copyElement
+  if (container) {
+    store.dActiveElement = container
+    store.dSelectWidgets = []
+  }
+
+  historyStore.pushHistory("pasteWidget")
+  // store.dispatch('pushHistory', 'pasteWidget')
+  store.copyWidget()
+  // store.dispatch('copyWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}

src/store/design/widget/actions/group.ts

@@ -0,0 +1,36 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore } from "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+
+export function addGroup(store: TWidgetStore, group: TdWidgetData[]) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  let parent: TdWidgetData | null = null
+  group.forEach((item) => {
+    item.uuid = nanoid() // 重设id
+    item.type === 'w-group' && (parent = item) // 找出父组件
+  })
+  group.forEach((item) => {
+    !item.isContainer && parent && (item.parent = parent.uuid) // 重设父id
+    item.text && (item.text = decodeURIComponent(item.text))
+    store.dWidgets.push(item)
+  })
+  // 选中组件
+  const len = store.dWidgets.length
+  store.dActiveElement = store.dWidgets[len - 1]
+
+  historyStore.pushHistory("addGroup")
+  // store.dispatch('pushHistory', 'addGroup')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}

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

@@ -0,0 +1,125 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useControlStore, usePageStore } from "@/store"
+import { TWidgetStore } from ".."
+
+export type TInidDMovePayload = {
+  startX: number
+  startY: number
+  originX: number
+  originY: number
+}
+
+/** 设置 mousemove 操作的初始值 */
+export function initDMove(store: TWidgetStore, payload: TInidDMovePayload) {
+  store.dMouseXY.x = payload.startX
+  store.dMouseXY.y = payload.startY
+  store.dActiveWidgetXY.x = payload.originX
+  store.dActiveWidgetXY.y = payload.originY
+}
+
+export type TMovePayload = {
+  donotMove?: boolean
+  x: number
+  y: number
+}
+
+/** 移动组件 */
+export function dMove(store: TWidgetStore, payload: TMovePayload) {
+  const page = usePageStore().dPage
+  const canvasStore = useCanvasStore()
+  const controlStore = useControlStore()
+  const { donotMove } = payload // 由moveable代理移动
+  controlStore.setdMoving(true)
+
+
+  const target = store.dActiveElement
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+
+  let parent = page
+  if (!target) return
+  if (target.parent !== '-1') {
+    const widget = store.dWidgets.find((item) => item.uuid === target.parent)
+    if (widget) {
+      parent = widget
+    }
+  }
+
+  const dx = payload.x - mouseXY.x
+  const dy = payload.y - mouseXY.y
+  let left = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
+  let top = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
+
+  left = Math.max(Math.min(left, page.width - target.record.width), 0)
+  top = Math.max(Math.min(top, page.height - target.record.height), 0)
+
+  if (target.isContainer) {
+    const dLeft = target.left - left
+    const dTop = target.top - top
+    const len = store.dWidgets.length
+    for (let i = 0; i < len; ++i) {
+      const widget = store.dWidgets[i]
+      if (widget.parent === target.uuid) {
+        widget.left -= dLeft
+        widget.top -= dTop
+      }
+    }
+  }
+
+  if (!donotMove) {
+    target.left = left
+    target.top = top
+  }
+
+  if (parent.uuid !== '-1') {
+    updateGroupSize(store, parent.uuid)
+    // store.dispatch('updateGroupSize', parent.uuid)
+  }
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export function updateGroupSize(store: TWidgetStore, uuid: string) {
+  const pageStore = usePageStore()
+  const widgets = store.dWidgets
+  const group = widgets.find((item) => item.uuid === uuid)
+  if (!group) return
+  let left = pageStore.dPage.width
+  let top = pageStore.dPage.height
+  let right = 0
+  let bottom = 0
+  for (let i = 0; i < widgets.length; ++i) {
+    if (widgets[i].parent === group.uuid) {
+      left = Math.min(left, widgets[i].left)
+      top = Math.min(top, widgets[i].top)
+      right = Math.max(right, widgets[i].record.width + widgets[i].left)
+      bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
+    }
+  }
+  group.width = right - left
+  group.height = bottom - top
+  group.left = left
+  group.top = top
+}
+
+export function updateHoverUuid(store: TWidgetStore, uuid: string) {
+  store.dHoverUuid = uuid
+}
+
+/**
+ * 设置拖拽时在哪个图层
+ */
+export function setDropOver(store: TWidgetStore, uuid: string) {
+  store.dDropOverUuid = uuid
+}
+
+export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
+  state.activeMouseEvent = e
+}

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

@@ -0,0 +1,104 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useForceStore } from "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+
+export type TupdateLayerIndexData = {
+  uuid: string
+  value: number
+  isGroup?: boolean
+}
+
+export function updateLayerIndex(store: TWidgetStore, { uuid, value, isGroup }: TupdateLayerIndexData) {
+  const widgets = store.dWidgets
+  const widget = widgets.find((item) => item.uuid === uuid)
+  const index = widgets.findIndex((item) => item.uuid === uuid)
+  let group: TdWidgetData[] = []
+
+  if (!widget) return
+
+  if (isGroup) {
+    // 组合组件移动
+    group = widgets.filter((item) => item.parent === uuid)
+    for (let i = 0; i < group.length; ++i) {
+      const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
+      widgets.splice(pos, 1)
+    }
+  }
+
+  // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
+  let next = index + value
+  let move = false
+  const maxLen = widgets.length
+  let gCount = 1 // 记录跳过的组合数量
+  // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
+  while (next >= 0 && next < maxLen) {
+    const nextWidget = widgets[next]
+    if (widget.parent !== '-1') {
+      // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
+      if (nextWidget.parent === widget.parent) {
+        widgets.splice(index, 1)
+        widgets.splice(next, 0, widget)
+        move = true
+      }
+      break
+      // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
+    } else if (nextWidget.parent === '-1') {
+      if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
+        if (gCount === 0 && value > 0) {
+          next -= value
+        }
+        widgets.splice(index, 1)
+        widgets.splice(next, 0, widget)
+        move = true
+        break
+      } else if (nextWidget.isContainer) {
+        gCount = 0
+      }
+    }
+    next += value
+  }
+  next -= value
+  if (!move && next !== index) {
+    widgets.splice(index, 1)
+    widgets.splice(next, 0, widget)
+  }
+
+  // 如果是组合，要把里面的组件添加回去
+  if (isGroup) {
+    const pos = widgets.findIndex((item) => item.uuid === uuid)
+    for (let i = group.length - 1; i >= 0; --i) {
+      widgets.splice(pos + 1, 0, group[i])
+    }
+  }
+}
+
+// TODO: 取消组合
+export function ungroup(store: TWidgetStore, uuid: string) {
+  const forceStore = useForceStore()
+
+  const widgets = store.dWidgets
+  const index = widgets.findIndex((item) => item.uuid === uuid)
+  widgets.splice(index, 1)
+  const len = widgets.length
+
+  for (let i = 0; i < len; ++i) {
+    if (widgets[i].parent === uuid) {
+      widgets[i].parent = '-1'
+      // store.state.dAltDown = true
+      // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
+      store.dSelectWidgets.push(widgets[i])
+    }
+  }
+  // store.state.dAltDown = false
+  
+  forceStore.setUpdateSelect()
+  // store.commit('updateSelect')
+  // store.state.dActiveElement = store.state.dPage
+}

src/store/design/widget/actions/resize.ts

@@ -0,0 +1,126 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useControlStore, usePageStore } from "@/store"
+import { TWidgetStore } from ".."
+import { updateGroupSize } from "."
+
+export type TInitResize = {
+  startX: number
+  startY: number
+  originX: number
+  originY: number
+  width: number
+  height: number
+}
+
+/** 设置 resize 操作的初始值 */
+export function initDResize(store: TWidgetStore, payload: TInitResize) {
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+  const resizeWH = store.dResizeWH
+  mouseXY.x = payload.startX
+  mouseXY.y = payload.startY
+  widgetXY.x = payload.originX
+  widgetXY.y = payload.originY
+  resizeWH.width = payload.width
+  resizeWH.height = payload.height
+}
+
+
+export type TdResizePayload = {
+  x: number
+  y: number
+  /** 方向 */
+  dirs: "top" | "left" | "bottom" | "right"
+}
+
+/** 更新组件宽高 */
+export function dResize(store: TWidgetStore, { x, y, dirs }: TdResizePayload) {
+  const pageStore = usePageStore()
+  const canvasStore = useCanvasStore()
+  const controlStore = useControlStore()
+
+  controlStore.setdResizeing(true)
+  // store.state.dResizeing = true
+
+  const page = pageStore.dPage
+  const target = store.dActiveElement
+  const mouseXY = store.dMouseXY
+  const widgetXY = store.dActiveWidgetXY
+  const resizeWH = store.dResizeWH
+  let parent = page
+  if (!target) return
+  if (target.parent !== '-1') {
+    const tmp = store.dWidgets.find((item) => item.uuid === target.parent)
+    if (tmp) {
+      parent = tmp
+    }
+  }
+
+  const dx = x - mouseXY.x
+  const dy = y - mouseXY.y
+
+  let left = 0
+  let top = 0
+
+  for (let i = 0; i < dirs.length; ++i) {
+    const dir = dirs[i]
+
+    switch (dir) {
+      case 'top':
+        const t = widgetXY.y + Math.floor((dy * 100) / canvasStore.dZoom)
+        top = Math.max(t, 0)
+        top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
+        target.height += target.top - top
+        target.height = Math.max(target.height, target.record.minHeight)
+        target.top = top
+        break
+      case 'bottom':
+        top = Math.floor((dy * 100) / canvasStore.dZoom)
+        target.height = resizeWH.height + top
+        target.height = Math.max(target.height, target.record.minHeight)
+        target.height = Math.min(target.height, page.height - target.top)
+        break
+      case 'left':
+        const tLeft = widgetXY.x + Math.floor((dx * 100) / canvasStore.dZoom)
+        left = Math.max(tLeft, 0)
+        target.width += target.left - left
+        target.width = Math.max(target.width, target.record.minWidth)
+        left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
+        target.left = left
+        break
+      case 'right':
+        left = Math.floor((dx * 100) / canvasStore.dZoom)
+        target.width = resizeWH.width + left
+        target.width = Math.max(target.width, target.record.minWidth)
+        target.width = Math.min(target.width, page.width - target.left)
+        break
+    }
+  }
+  if (parent.uuid !== '-1') {
+    updateGroupSize(store, parent.uuid)
+    // store.dispatch('updateGroupSize', parent.uuid)
+  }
+
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export type TResize = {
+  width: number
+  height: number
+}
+
+export function resize(state: TWidgetStore, data: TResize) {
+  const { width, height } = data
+  const target = state.dActiveElement
+  if (!target) return target
+  target.width = width
+  target.height = height
+}

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

@@ -0,0 +1,107 @@
+import { useControlStore, useHistoryStore, usePageStore } from "@/store"
+import { TWidgetStore } from ".."
+import { proxyToObject } from "@/utils/utils"
+
+export type TSelectWidgetData = {
+  uuid: string
+}
+
+// TODO: 选中元件与取消选中
+export function selectWidget(store: TWidgetStore, { uuid }: TSelectWidgetData) {
+  const controlStore = useControlStore()
+  const pageStore = usePageStore()
+  const historyStore = useHistoryStore()
+
+  const alt = controlStore.dAltDown
+  const selectWidgets = store.dSelectWidgets
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+
+  if (alt) {
+    if (!widget) return
+    if (uuid !== '-1' && widget.parent === '-1') {
+      // && !widget.isContainer
+      if (selectWidgets.length === 0) {
+        if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+          selectWidgets.push(store.dActiveElement)
+        }
+      }
+      const index = selectWidgets.findIndex((item) => {
+        return item.uuid === uuid
+      })
+      // 如果已经存在则取消选择，否则加入选取
+      if (index !== -1) {
+        selectWidgets.splice(index, 1)
+        if (selectWidgets.length === 0) {
+          store.dActiveElement = pageStore.dPage
+        }
+      } else {
+        selectWidgets.push(widget)
+      }
+      if (selectWidgets.length === 1) {
+        store.dActiveElement = selectWidgets[0]
+        store.dSelectWidgets = []
+      }
+    }
+    return
+  }
+  store.dSelectWidgets = []
+  console.log("uuid", uuid);
+  
+  if (uuid === '-1') {
+    store.dActiveElement = pageStore.dPage
+    const pageHistory = historyStore.dPageHistory
+    if (pageHistory.length === 0) {
+      pageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
+    }
+    setTimeout(() => {
+      store.dSelectWidgets = []
+    }, 10)
+  } else {
+    if (!widget) return
+    // store.state.dActiveElement = {}
+    setTimeout(() => {
+      store.dActiveElement = widget
+    }, 10)
+  }
+}
+
+/** 多选元素 */
+export function selectWidgetsInOut(store: TWidgetStore, { uuid }: TSelectWidgetData) {
+  const pageStore = usePageStore()
+
+  const selectWidgets = store.dSelectWidgets
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+  if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
+    if (selectWidgets.length === 0) {
+      if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+        selectWidgets.push(store.dActiveElement)
+      }
+    }
+    const index = selectWidgets.findIndex((item) => {
+      return item.uuid === uuid
+    })
+    // 如果已经存在则取消选择，否则加入选取
+    if (index !== -1) {
+      selectWidgets.splice(index, 1)
+      if (selectWidgets.length === 0) {
+        store.dActiveElement = pageStore.dPage
+      }
+    } else {
+      selectWidgets.push(widget)
+    }
+    // if (selectWidgets.length === 1) {
+    //   store.state.dActiveElement = selectWidgets[0]
+    //   store.state.dSelectWidgets = []
+    // }
+  }
+}
+
+export type TselectItem = {
+  data?: Record<string, any>
+  type?: string
+}
+
+export function selectItem(state: TWidgetStore, { data, type }: TselectItem) {
+  state.selectItem.data = data
+  state.selectItem.type = type
+}

src/store/design/widget/actions/template.ts

@@ -0,0 +1,30 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+
+import { customAlphabet } from 'nanoid/non-secure'
+import { TWidgetStore, TdWidgetData } from '..'
+import { useCanvasStore, useHistoryStore } from '@/store'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+// TODO: 选择模板
+export function setTemplate(store: TWidgetStore, allWidgets: TdWidgetData[]) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  allWidgets.forEach((item) => {
+    Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
+    item.text && (item.text = decodeURIComponent(item.text))
+    store.dWidgets.push(item)
+  })
+
+  historyStore.pushHistory("setTemplate")
+  // store.dispatch('pushHistory', 'setTemplate')
+
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}

src/store/design/widget/actions/widget.ts

@@ -0,0 +1,237 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { useCanvasStore, useHistoryStore, usePageStore } from "@/store"
+import { TWidgetStore, TdWidgetData } from ".."
+import { customAlphabet } from 'nanoid/non-secure'
+const nanoid = customAlphabet('1234567890abcdef', 12)
+
+type TUpdateWidgetKey = keyof TdWidgetData
+
+export type TUpdateWidgetPayload = {
+  uuid: string
+  key: TUpdateWidgetKey
+  value: number | string | boolean | Record<string, any>
+  pushHistory?: boolean
+}
+
+/** 更新组件数据 */
+export function updateWidgetData(store: TWidgetStore, { uuid, key, value, pushHistory }: TUpdateWidgetPayload) {
+  const widget = store.dWidgets.find((item) => item.uuid === uuid)
+  if (widget && (widget[key] !== value || pushHistory)) {
+    switch (key) {
+      case 'width':
+        // const minWidth = widget.record.minWidth
+        // const maxWidth = store.state.dPage.width - widget.left
+        // value = Math.max(minWidth, Math.min(maxWidth, value))
+        break
+      case 'height':
+        // const minHeight = widget.record.minHeight
+        // const maxHeight = store.state.dPage.height - widget.top
+        // value = Math.max(minHeight, Math.min(maxHeight, value))
+        break
+      case 'left':
+      case 'top':
+        if (widget.isContainer) {
+          let dLeft = widget.left - Number(value)
+          let dTop = widget.top - Number(value)
+          if (key === 'left') {
+            dTop = 0
+          }
+          if (key === 'top') {
+            dLeft = 0
+          }
+          const len = store.dWidgets.length
+          for (let i = 0; i < len; ++i) {
+            const child = store.dWidgets[i]
+            if (child.parent === widget.uuid) {
+              child.left -= dLeft
+              child.top -= dTop
+            }
+          }
+        }
+        break
+    }
+    (widget[key] as TUpdateWidgetPayload['value']) = value
+    if (pushHistory) {
+      const historyStore = useHistoryStore()
+      setTimeout(() => {
+        historyStore.pushHistory("updateWidgetData")
+        // pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
+      }, 100)
+    }
+    // store.dispatch('reChangeCanvas')
+  }
+}
+
+export type TUpdateWidgetMultiplePayload = {
+  uuid: string
+  data: {
+    key: TUpdateWidgetKey
+    value: number
+  }[]
+  pushHistory?: boolean
+}
+
+/** 一次更新多个widget */
+export function updateWidgetMultiple(store: TWidgetStore, { uuid, data, pushHistory }: TUpdateWidgetMultiplePayload) {
+  for (const item of data) {
+    const { key, value } = item
+    const widget = store.dWidgets.find((item) => item.uuid === uuid)
+    if (widget && (widget[key] !== value || pushHistory)) {
+      switch (key) {
+        case 'left':
+        case 'top':
+          if (widget.isContainer) {
+            let dLeft = widget.left - value
+            let dTop = widget.top - value
+            if (key === 'left') {
+              dTop = 0
+            }
+            if (key === 'top') {
+              dLeft = 0
+            }
+            const len = store.dWidgets.length
+            for (let i = 0; i < len; ++i) {
+              const child = store.dWidgets[i]
+              if (child.parent === widget.uuid) {
+                child.left -= dLeft
+                child.top -= dTop
+              }
+            }
+          }
+          break
+      }
+      (widget[key] as number | string) = value
+    }
+  }
+  setTimeout(() => {
+    const historyStore = useHistoryStore()
+    historyStore.pushHistory("updateWidgetMultiple")
+    // store.dispatch('pushHistory', 'updateWidgetMultiple')
+  }, 100)
+}
+
+/** 添加 Widget */
+export function addWidget(store: TWidgetStore, setting: TdWidgetData) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  setting.uuid = nanoid()
+  store.dWidgets.push(setting)
+  const len = store.dWidgets.length
+  // store.state.dActiveElement = store.state.dWidgets[len - 1]
+
+  store.selectWidget({
+    uuid: store.dWidgets[len - 1].uuid,
+  })
+  // store.dispatch('selectWidget', {
+  //   uuid: store.dWidgets[len - 1].uuid,
+  // })
+
+  historyStore.pushHistory("addWidget")
+  // store.dispatch('pushHistory', 'addWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+/** 删除组件 */
+export function deleteWidget(store: TWidgetStore) {
+  const historyStore = useHistoryStore()
+  const canvasStore = useCanvasStore()
+  const widgets = store.dWidgets
+  const selectWidgets = store.dSelectWidgets
+  const activeElement = store.dActiveElement
+  if (!activeElement) return
+
+  let count = 0 // 记录容器里的组件数量
+  if (selectWidgets.length !== 0) {
+    for (let i = 0; i < selectWidgets.length; ++i) {
+      const uuid = selectWidgets[i].uuid
+      const index = widgets.findIndex((item) => item.uuid === uuid)
+      widgets.splice(index, 1)
+      try {
+        // 清除掉可能存在的选中框
+        document.getElementById(uuid)?.classList.remove('widget-selected')
+      } catch (e) {}
+    }
+    store.dSelectWidgets = []
+  } else {
+    if (activeElement.type === 'page') {
+      return
+    }
+
+    const uuid = activeElement.uuid
+    const index = widgets.findIndex((item) => item.uuid === uuid)
+
+    // 先删除组件
+    widgets.splice(index, 1)
+
+    // 如果删除的是容器，须将内部组件一并删除
+    if (activeElement.isContainer) {
+      for (let i = widgets.length - 1; i >= 0; --i) {
+        if (widgets[i].parent === uuid) {
+          widgets.splice(i, 1)
+        }
+      }
+    } else if (activeElement.parent !== '-1') {
+      for (let i = widgets.length - 1; i >= 0; --i) {
+        if (widgets[i].parent === activeElement.parent) {
+          count++
+          if (count > 1) {
+            break
+          }
+        }
+      }
+      if (count <= 1) {
+        const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
+        widgets.splice(index, 1)
+        if (count === 1) {
+          const widget = widgets.find((item) => item.parent === activeElement.parent)
+          widget && (widget.parent = '-1')
+        }
+        count = 0
+      }
+    }
+  }
+
+  if (count === 0) {
+    // 重置 activeElement
+    const pageStore = usePageStore()
+    store.dActiveElement = pageStore.dPage
+  } else {
+    const tmp = widgets.find((item) => item.uuid === activeElement.parent)
+    tmp && (store.dActiveElement = tmp)
+  }
+
+  if (store.dActiveElement && store.dActiveElement.uuid !== '-1') {
+    store.updateGroupSize(store.dActiveElement.uuid)
+    // store.dispatch('updateGroupSize', store.dActiveElement.uuid)
+  }
+
+  historyStore.pushHistory("deleteWidget")
+  // store.dispatch('pushHistory', 'deleteWidget')
+  canvasStore.reChangeCanvas()
+  // store.dispatch('reChangeCanvas')
+}
+
+export type TsetWidgetStyleData = {
+  uuid: string
+  key: keyof TdWidgetData
+  value: any
+  pushHistory?: boolean
+}
+
+export function setWidgetStyle(state: TWidgetStore, { uuid, key, value, pushHistory }: TsetWidgetStyleData) {
+  const widget = state.dWidgets.find((item) => item.uuid === uuid)
+  if (!widget) return
+  (widget[key] as Record<string, any>) = value
+}
+
+export function setDWidgets(state: TWidgetStore, e: TdWidgetData[]) {
+  state.dWidgets = e
+}

src/store/design/widget/getter/index.ts

@@ -0,0 +1,25 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-28 14:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { usePageStore } from "@/store"
+import { TWidgetState, TdWidgetData } from ".."
+import { TPageState } from "../../page"
+
+export type TWidgetJsonData = TPageState & {
+  widgets: TdWidgetData
+}
+
+/** 返回组件Json数据 */
+export function widgetJsonData(state: TWidgetState) {
+  const pageStore = usePageStore()
+  const page: TWidgetJsonData = JSON.parse(JSON.stringify(pageStore.dPage))
+  const widgets = JSON.parse(JSON.stringify(state.dWidgets))
+  page.widgets = widgets
+
+  return page
+}

src/store/design/widget/index.ts

@@ -0,0 +1,184 @@
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-28 14:00:00
+ */
+
+import { Store, defineStore } from "pinia";
+import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, updateGroupSize, updateHoverUuid } from "./actions";
+import { TPageState } from "../page";
+import { TInitResize, TResize, TdResizePayload, dResize, initDResize, resize } from "./actions/resize";
+import { TUpdateWidgetMultiplePayload, TUpdateWidgetPayload, TsetWidgetStyleData, addWidget, deleteWidget, setDWidgets, setWidgetStyle, updateWidgetData, updateWidgetMultiple } from "./actions/widget";
+import { addGroup } from "./actions/group";
+import { setTemplate } from "./actions/template";
+import { copyWidget, pasteWidget } from "./actions/clone";
+import { TSelectWidgetData, TselectItem, selectItem, selectWidget, selectWidgetsInOut } from "./actions/select";
+import { TUpdateAlignData, updateAlign } from "./actions/align";
+import { TWidgetJsonData, widgetJsonData } from "./getter";
+import { TupdateLayerIndexData, ungroup, updateLayerIndex } from "./actions/layer";
+
+export type TdWidgetData = TPageState & Partial<TCommonItemData> & {
+  parent?: string
+  isContainer?: boolean
+  text?: string
+  editable?: boolean
+  lock?: boolean
+  imgUrl?: string
+  rotate?: string
+  transform?: string
+  sliceData?: Record<string, any>
+  flip?: boolean
+  cropEdit?: boolean
+  fontClass?: Record<string, any>
+  writingMode?: string
+}
+
+export type TWidgetState = {
+  dActiveWidgetXY: {
+    /** 选中组件的横向初始值 */
+    x: number,
+    /** 选中组件的纵向初始值 */
+    y: number
+  }
+  dMouseXY: {
+    /** 鼠标按下时的横坐标 */
+    x: number
+    /** 鼠标按下时的纵坐标 */
+    y: number
+  },
+  /** 初始化调整大小时组件的宽高 */
+  dResizeWH: {
+    width: number
+    height: number
+  },
+  /** 选中的组件或页面 */
+  dActiveElement: TdWidgetData | null
+  /** 鼠标在这个图层上 */
+  dHoverUuid: string
+  /** 拖动时放在哪个图层上 */
+  dDropOverUuid: string
+  /** 已使用的组件 */
+  dWidgets: TdWidgetData[]
+  /** 记录多选的组件 */
+  dSelectWidgets: TdWidgetData[]
+  /** 复制的组件（可能是单个也可能是数组） */
+  dCopyElement: TdWidgetData[]
+  /** 记录当前选择的元素, data */
+  selectItem: { data?: Record<string, any> | null, type?: string }
+  /** 正在活动的鼠标事件 */
+  activeMouseEvent: MouseEvent | null
+}
+
+type TGetter = {
+  getWidgetJsonData(state: TWidgetState): TWidgetJsonData
+}
+
+type TAction = {
+  /** 设置 mousemove 操作的初始值 */
+  initDMove: (payload: TInidDMovePayload) => void
+  /** 移动组件 */
+  dMove: (payload: TMovePayload) => void
+  updateGroupSize: (uuid: string) => void
+  /** 设置 resize 操作的初始值 */
+  initDResize: (payload: TInitResize) => void
+  dResize: (payload: TdResizePayload) => void
+  updateHoverUuid: (uuid: string) => void
+  /** 更新组件数据 */
+  updateWidgetData: (payload: TUpdateWidgetPayload) => void
+  /** 一次更新多个widget */
+  updateWidgetMultiple: (payload: TUpdateWidgetMultiplePayload) => void
+  /** addWidget */
+  addWidget: (setting: TdWidgetData) => void
+  /** addGroup */
+  addGroup: (group: TdWidgetData[]) => void
+  /** setTemplate */
+  setTemplate: (template: TdWidgetData[]) => void
+  /** 删除组件 */
+  deleteWidget: () => void
+  /** 拷贝组件 */
+  copyWidget: () => void
+  /** 粘贴组件 */
+  pasteWidget: () => void
+  selectWidget: (data: TSelectWidgetData) => void
+  /** 多选元素 */
+  selectWidgetsInOut: (data: TSelectWidgetData) => void
+  /** updateAlign */
+  updateAlign: (data: TUpdateAlignData) => void
+  /** updateLayerIndex */
+  updateLayerIndex: (data: TupdateLayerIndexData) => void
+  /** ungroup */
+  ungroup: (uuid: string) => void
+  /** 设置拖拽时在哪个图层 */
+  setDropOver: (uuid: string) => void
+  setSelectItem: (data: TselectItem) => void
+  resize: (data: TResize) => void
+  setWidgetStyle: (data: TsetWidgetStyleData) => void
+  setDWidgets: (data: TdWidgetData[]) => void
+  setMouseEvent: (e: MouseEvent | null) => void
+}
+
+const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
+  state: () => ({
+    dActiveWidgetXY: {
+      x: 0, // 选中组件的横向初始值
+      y: 0, // 选中组件的纵向初始值
+    },
+    dMouseXY: {
+      x: 0, // 鼠标按下时的横坐标
+      y: 0, // 鼠标按下时的纵坐标
+    },
+    dResizeWH: {
+      // 初始化调整大小时组件的宽高
+      width: 0,
+      height: 0,
+    },
+    dActiveElement: null, // 选中的组件或页面
+    dHoverUuid: '-1', // 鼠标在这个图层上
+    dDropOverUuid: '', // 拖动时放在哪个图层上
+    dWidgets: [], // 已使用的组件
+    dSelectWidgets: [], // 记录多选的组件
+    selectItem: { data: null }, // 记录当前选择的元素, data
+    activeMouseEvent: null, // 正在活动的鼠标事件
+    dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
+  }),
+
+  getters: {
+    getWidgetJsonData(store) {
+      return widgetJsonData(store)
+    }
+  },
+
+  actions: {
+    initDMove(payload) { initDMove(this, payload) },
+    dMove(payload) { dMove(this, payload) },
+    updateGroupSize(uuid) { updateGroupSize(this, uuid) },
+    initDResize(payload) { initDResize(this, payload) },
+    dResize(payload) { dResize(this, payload) },
+    updateHoverUuid(uuid) { updateHoverUuid(this, uuid) },
+    updateWidgetData(payload) { updateWidgetData(this, payload) },
+    updateWidgetMultiple(payload) { updateWidgetMultiple(this, payload) },
+    addWidget(setting) { addWidget(this, setting) },
+    addGroup(group) { addGroup(this, group) },
+    setTemplate(template) { setTemplate(this, template) },
+    deleteWidget() { deleteWidget(this) },
+    copyWidget() { copyWidget(this) },
+    pasteWidget() { pasteWidget(this) },
+    selectWidget(data) { selectWidget(this, data) },
+    selectWidgetsInOut(data) { selectWidgetsInOut(this, data) },
+    updateAlign(data) { updateAlign(this, data) },
+    updateLayerIndex(data) { updateLayerIndex(this, data) },
+    ungroup(uuid) { ungroup(this, uuid) },
+    setDropOver(uuid) { setDropOver(this, uuid) },
+    setSelectItem(data: TselectItem) { selectItem(this, data) },
+    resize(data) { resize(this, data) },
+    setWidgetStyle(data) { setWidgetStyle(this, data) },
+    setDWidgets(data) { setDWidgets(this, data) },
+    setMouseEvent(event) { setMouseEvent(this, event) }
+  }
+})
+
+export type TWidgetStore = Store<"widgetStore", TWidgetState, TGetter, TAction>
+
+export default WidgetStore

src/store/index.ts

@@ -1,11 +1,29 @@
-import { createStore } from 'vuex'
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description: Store方法export
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
 
-import base from './modules/base'
+import useBaseStore from "./base";
-import design from './modules/design'
+import useUserStore from "./base/user";
+import usePageStore from "./design/page"
+import useCanvasStore from "./design/canvas"
+import useControlStore from './design/control'
+import useHistoryStore from './design/history'
+import useWidgetStore from './design/widget'
+import useGroupStore from './design/group'
+import useForceStore from './design/force'
 
-export default createStore({
+export {
-  ...base,
+  useBaseStore,
-  modules: {
+  useUserStore,
-    design,
+  usePageStore,
-  },
+  useCanvasStore,
-})
+  useControlStore,
+  useHistoryStore,
+  useWidgetStore,
+  useGroupStore,
+  useForceStore,
+}

src/store/modules/base/actions.ts

@@ -1,19 +0,0 @@
-/**
- * 异步操作 store.dispatch() 调用
- */
-
-interface Iprops {
-  commit: (a: any, b: any) => void
-  state: any
-}
-
-export default {
-  hideLoading(props: Iprops, data: Type.Object) {
-    setTimeout(() => {
-      props.commit('loading', false)
-    }, 600)
-  },
-  setFonts(store: Iprops, list: Type.Object) {
-    store.state.fonts = list
-  },
-}

src/store/modules/base/index.ts

@@ -1,52 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-12-16 16:20:16
- * @Description:
- * @LastEditors: ShawnPhang <https://m.palxp.cn>
- * @LastEditTime: 2023-09-28 17:42:25
- */
-import mutations from './mutations'
-import actions from './actions'
-import _config from '@/config'
-
-const all = {
-  state: {
-    loading: null,
-    online: true, // 登录状态，
-    user: {
-      name: localStorage.getItem('username'),
-    }, // 储存用户信息
-    scroll: true,
-    manager: '', // 是否为管理员模式
-    tempEditing: false, // 管理员是否正在编辑模板
-    fonts: [], // 缓存字体列表
-    app: null, // 抠图服务
-  },
-  getters: {
-    online: (state: Type.Object) => {
-      return state.online
-    },
-    user: (state: Type.Object) => {
-      return state.user
-    },
-    manager: (state: Type.Object) => {
-      return state.manager
-    },
-    tempEditing: (state: Type.Object) => {
-      return state.tempEditing
-    },
-    fonts: (state: Type.Object) => {
-      return state.fonts
-    },
-    app: (state: Type.Object) => {
-      return state.app
-    }
-  },
-  mutations: {
-    ...mutations,
-  },
-  actions: {
-    ...actions,
-  },
-}
-export default all

src/store/modules/base/mutations.ts

@@ -1,42 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-12-16 16:20:16
- * @Description: 同步操作 store.commit() 调用
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-13 18:29:13
- */
-
-// import { Toast } from 'vant'
-
-export default {
-  loading(state: Type.Object, data: any) {
-    // Toast.clear();
-    // let msg = ''
-    // if (typeof data === 'string') {
-    //     msg = data
-    // } else {
-    //     Toast.clear();
-    //     return false
-    // }
-    // Toast.loading({
-    //     duration: 0,       // 持续展示 toast
-    //     loadingType: 'spinner',
-    //     message: msg
-    // });
-  },
-  changeRoute(state: Type.Object, from: string) {
-    state.routeFrom = from
-  },
-  changeOnline(state: Type.Object, status: string) {
-    state.online = status
-  },
-  changeUser(state: Type.Object, name: string) {
-    state.user.name = name
-    // state.user = Object.assign({}, state.user)
-    state.user = { ...state.user }
-    localStorage.setItem('username', name)
-  },
-  managerEdit(state: Type.Object, status: string) {
-    state.tempEditing = status
-  }
-}

src/store/modules/design/actions.ts

@@ -1,828 +0,0 @@
-// import { nextTick } from 'vue'
-import { customAlphabet } from 'nanoid/non-secure'
-const nanoid = customAlphabet('1234567890abcdef', 12)
-import pushHistory from './methods/pushHistory'
-import handleHistory from './methods/handleHistory'
-
-export default {
-  /**
-   * 保存操作历史，
-   * 修改数据、移动完成后都会自动保存
-   * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
-   */
-  pushHistory(store: any, msg: string) {
-    pushHistory(store, msg)
-  },
-  /**
-   * 操作历史记录
-   * action为undo表示撤销
-   * action为redo表示重做
-   */
-  handleHistory(store: any, action: any) {
-    handleHistory(store, action)
-    // 激活组件默认为page
-    store.state.dActiveElement = store.state.dPage
-  },
-  updateZoom(store, zoom) {
-    store.state.dZoom = zoom
-  },
-  updateScreen(store, { width, height }) {
-    store.state.dScreen.width = width
-    store.state.dScreen.height = height
-  },
-  // updateGridSize(store, { width, height }) {
-  //   store.state.gridSize.width = width
-  //   store.state.gridSize.height = height
-  // },
-  updatePageData(store, { key, value, pushHistory }) {
-    const page = store.state.dPage
-    if (page[key] !== value || pushHistory) {
-      page[key] = value
-      // 画布修改先不压入历史栈，因为替换模板后会重复压栈
-      // store.dispatch('pushHistory', 'updatePageData')
-    }
-  },
-  updateWidgetData(store, { uuid, key, value, pushHistory }: any) {
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (widget && (widget[key] !== value || pushHistory)) {
-      switch (key) {
-        case 'width':
-          // const minWidth = widget.record.minWidth
-          // const maxWidth = store.state.dPage.width - widget.left
-          // value = Math.max(minWidth, Math.min(maxWidth, value))
-          break
-        case 'height':
-          // const minHeight = widget.record.minHeight
-          // const maxHeight = store.state.dPage.height - widget.top
-          // value = Math.max(minHeight, Math.min(maxHeight, value))
-          break
-        case 'left':
-        case 'top':
-          if (widget.isContainer) {
-            let dLeft = widget.left - value
-            let dTop = widget.top - value
-            if (key === 'left') {
-              dTop = 0
-            }
-            if (key === 'top') {
-              dLeft = 0
-            }
-            const len = store.state.dWidgets.length
-            for (let i = 0; i < len; ++i) {
-              const child = store.state.dWidgets[i]
-              if (child.parent === widget.uuid) {
-                child.left -= dLeft
-                child.top -= dTop
-              }
-            }
-          }
-          break
-      }
-      widget[key] = value
-      if (pushHistory) {
-        setTimeout(() => {
-          pushHistory && store.dispatch('pushHistory', 'updateWidgetData')
-        }, 100)
-      }
-      // store.dispatch('reChangeCanvas')
-    }
-  },
-  updateWidgetMultiple(store, { uuid, data, pushHistory }) {
-    for (const item of data) {
-      const { key, value } = item
-      const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-      if (widget && (widget[key] !== value || pushHistory)) {
-        switch (key) {
-          case 'left':
-          case 'top':
-            if (widget.isContainer) {
-              let dLeft = widget.left - value
-              let dTop = widget.top - value
-              if (key === 'left') {
-                dTop = 0
-              }
-              if (key === 'top') {
-                dLeft = 0
-              }
-              const len = store.state.dWidgets.length
-              for (let i = 0; i < len; ++i) {
-                const child = store.state.dWidgets[i]
-                if (child.parent === widget.uuid) {
-                  child.left -= dLeft
-                  child.top -= dTop
-                }
-              }
-            }
-            break
-        }
-
-        widget[key] = value
-      }
-    }
-    setTimeout(() => {
-      store.dispatch('pushHistory', 'updateWidgetMultiple')
-    }, 100)
-  },
-  addWidget(store: any, setting: any) {
-    setting.uuid = nanoid()
-    store.state.dWidgets.push(setting)
-    const len = store.state.dWidgets.length
-    // store.state.dActiveElement = store.state.dWidgets[len - 1]
-    store.dispatch('selectWidget', {
-      uuid: store.state.dWidgets[len - 1].uuid,
-    })
-    store.dispatch('pushHistory', 'addWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  addGroup(store: any, group: Type.Object) {
-    let parent: any = null
-    group.forEach((item: any) => {
-      item.uuid = nanoid() // 重设id
-      item.type === 'w-group' && (parent = item) // 找出父组件
-    })
-    group.forEach((item: any) => {
-      !item.isContainer && (item.parent = parent.uuid) // 重设父id
-      item.text && (item.text = decodeURIComponent(item.text))
-      store.state.dWidgets.push(item)
-    })
-    // 选中组件
-    const len = store.state.dWidgets.length
-    store.state.dActiveElement = store.state.dWidgets[len - 1]
-    store.dispatch('pushHistory', 'addGroup')
-    store.dispatch('reChangeCanvas')
-  },
-  // TODO: 选择模板
-  setTemplate(store: any, allWidgets: any[]) {
-    allWidgets.forEach((item: any) => {
-      Number(item.uuid) < 0 && (item.uuid = nanoid()) // 重设id
-      item.text && (item.text = decodeURIComponent(item.text))
-      store.state.dWidgets.push(item)
-    })
-    store.dispatch('pushHistory', 'setTemplate')
-    store.dispatch('reChangeCanvas')
-  },
-  // TODO 删除
-  deleteWidget(store: any) {
-    const widgets = store.state.dWidgets
-    const selectWidgets = store.state.dSelectWidgets
-    const activeElement = store.state.dActiveElement
-
-    let count = 0 // 记录容器里的组件数量
-    if (selectWidgets.length !== 0) {
-      for (let i = 0; i < selectWidgets.length; ++i) {
-        const uuid = selectWidgets[i].uuid
-        const index = widgets.findIndex((item) => item.uuid === uuid)
-        widgets.splice(index, 1)
-        try {
-          // 清除掉可能存在的选中框
-          document.getElementById(uuid).classList.remove('widget-selected')
-        } catch (e) {}
-      }
-      store.state.dSelectWidgets = []
-    } else {
-      if (activeElement.type === 'page') {
-        return
-      }
-
-      const uuid = activeElement.uuid
-      const index = widgets.findIndex((item) => item.uuid === uuid)
-
-      // 先删除组件
-      widgets.splice(index, 1)
-
-      // 如果删除的是容器，须将内部组件一并删除
-      if (activeElement.isContainer) {
-        for (let i = widgets.length - 1; i >= 0; --i) {
-          if (widgets[i].parent === uuid) {
-            widgets.splice(i, 1)
-          }
-        }
-      } else if (activeElement.parent !== '-1') {
-        for (let i = widgets.length - 1; i >= 0; --i) {
-          if (widgets[i].parent === activeElement.parent) {
-            count++
-            if (count > 1) {
-              break
-            }
-          }
-        }
-        if (count <= 1) {
-          const index = widgets.findIndex((item) => item.uuid === activeElement.parent)
-          widgets.splice(index, 1)
-          if (count === 1) {
-            const widget = widgets.find((item) => item.parent === activeElement.parent)
-            widget.parent = '-1'
-          }
-          count = 0
-        }
-      }
-    }
-
-    if (count === 0) {
-      // 重置 activeElement
-      store.state.dActiveElement = store.state.dPage
-    } else {
-      store.state.dActiveElement = widgets.find((item) => item.uuid === activeElement.parent)
-    }
-
-    if (store.state.dActiveElement.uuid !== '-1') {
-      store.dispatch('updateGroupSize', store.state.dActiveElement.uuid)
-    }
-
-    store.dispatch('pushHistory', 'deleteWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  copyWidget(store) {
-    const activeElement = JSON.parse(JSON.stringify(store.state.dActiveElement))
-    if (activeElement.type === 'page') {
-      return
-    }
-    navigator.clipboard.writeText('') // 清空系统剪贴板内容
-    const container = []
-    const selectWidgets = store.state.dSelectWidgets
-    if (selectWidgets.length === 0) {
-      const uuid = activeElement.uuid
-      container.push(activeElement)
-      if (activeElement.isContainer) {
-        const widgets = store.state.dWidgets
-        for (let i = 0; i < widgets.length; ++i) {
-          if (widgets[i].parent === uuid) {
-            container.push(widgets[i])
-          }
-        }
-      }
-    } else {
-      for (let i = 0; i < selectWidgets.length; ++i) {
-        const uuid = selectWidgets[i].uuid
-        container.push(selectWidgets[i])
-        if (selectWidgets[i].isContainer) {
-          const widgets = store.state.dWidgets
-          for (let i = 0; i < widgets.length; ++i) {
-            if (widgets[i].parent === uuid) {
-              container.push(widgets[i])
-            }
-          }
-        }
-      }
-    }
-    store.state.dCopyElement = JSON.parse(JSON.stringify(container))
-  },
-  pasteWidget(store) {
-    const copyElement = JSON.parse(JSON.stringify(store.state.dCopyElement))
-    const container = copyElement.find((item) => item.isContainer)
-    for (let i = 0; i < copyElement.length; ++i) {
-      copyElement[i].uuid = nanoid()
-      if (container && copyElement[i].uuid !== container.uuid) {
-        copyElement[i].parent = container.uuid
-      } else {
-        copyElement[i].parent = '-1'
-      }
-      copyElement[i].top += 30
-      copyElement[i].left += 30
-    }
-    store.state.dWidgets = store.state.dWidgets.concat(copyElement)
-    store.state.dActiveElement = copyElement[0]
-    store.state.dSelectWidgets = copyElement
-    if (container) {
-      store.state.dActiveElement = container
-      store.state.dSelectWidgets = []
-    }
-
-    store.dispatch('pushHistory', 'pasteWidget')
-    store.dispatch('copyWidget')
-    store.dispatch('reChangeCanvas')
-  },
-  // TODO: 选中元件与取消选中
-  selectWidget(store, { uuid }) {
-    const alt = store.state.dAltDown
-    const selectWidgets = store.state.dSelectWidgets
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (alt) {
-      if (uuid !== '-1' && widget.parent === '-1') {
-        // && !widget.isContainer
-        if (selectWidgets.length === 0) {
-          if (store.state.dActiveElement.uuid !== '-1') {
-            selectWidgets.push(store.state.dActiveElement)
-          }
-        }
-        const index = selectWidgets.findIndex((item) => {
-          return item.uuid === uuid
-        })
-        // 如果已经存在则取消选择，否则加入选取
-        if (index !== -1) {
-          selectWidgets.splice(index, 1)
-          if (selectWidgets.length === 0) {
-            store.state.dActiveElement = store.state.dPage
-          }
-        } else {
-          selectWidgets.push(widget)
-        }
-        if (selectWidgets.length === 1) {
-          store.state.dActiveElement = selectWidgets[0]
-          store.state.dSelectWidgets = []
-        }
-      }
-      return
-    }
-    store.state.dSelectWidgets = []
-    if (uuid === '-1') {
-      store.state.dActiveElement = store.state.dPage
-      const pageHistory = store.state.dPageHistory
-      if (pageHistory.length === 0) {
-        pageHistory.push(JSON.stringify(store.state.dPage))
-      }
-      setTimeout(() => {
-        store.state.dSelectWidgets = []
-      }, 10)
-    } else {
-      // store.state.dActiveElement = {}
-      setTimeout(() => {
-        store.state.dActiveElement = widget
-      }, 10)
-    }
-  },
-  // 多选元素
-  selectWidgetsInOut(store, { uuid }) {
-    const selectWidgets = store.state.dSelectWidgets
-    const widget = store.state.dWidgets.find((item) => item.uuid === uuid)
-    if (widget && uuid !== '-1' && widget.parent === '-1' && !widget.isContainer) {
-      if (selectWidgets.length === 0) {
-        if (store.state.dActiveElement.uuid !== '-1') {
-          selectWidgets.push(store.state.dActiveElement)
-        }
-      }
-      const index = selectWidgets.findIndex((item) => {
-        return item.uuid === uuid
-      })
-      // 如果已经存在则取消选择，否则加入选取
-      if (index !== -1) {
-        selectWidgets.splice(index, 1)
-        if (selectWidgets.length === 0) {
-          store.state.dActiveElement = store.state.dPage
-        }
-      } else {
-        selectWidgets.push(widget)
-      }
-      // if (selectWidgets.length === 1) {
-      //   store.state.dActiveElement = selectWidgets[0]
-      //   store.state.dSelectWidgets = []
-      // }
-    }
-  },
-  // 设置 mousemove 操作的初始值
-  initDMove(store, payload) {
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    mouseXY.x = payload.startX
-    mouseXY.y = payload.startY
-    widgetXY.x = payload.originX
-    widgetXY.y = payload.originY
-  },
-  // 组件移动结束
-  stopDMove(store) {
-    if (store.state.dMoving) {
-      store.dispatch('pushHistory', 'stopDMove')
-    }
-    store.state.dMoving = false
-  },
-  // 移动组件
-  dMove(store, payload) {
-    const { donotMove } = payload // 由moveable代理移动
-    store.state.dMoving = true
-
-    const page = store.state.dPage
-
-    const target = store.state.dActiveElement
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-
-    let parent = page
-
-    if (target.parent !== '-1') {
-      parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-    }
-
-    const dx = payload.x - mouseXY.x
-    const dy = payload.y - mouseXY.y
-    let left = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-    let top = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
-
-    left = Math.max(Math.min(left, page.width - target.record.width), 0)
-    top = Math.max(Math.min(top, page.height - target.record.height), 0)
-
-    if (target.isContainer) {
-      const dLeft = target.left - left
-      const dTop = target.top - top
-      const len = store.state.dWidgets.length
-      for (let i = 0; i < len; ++i) {
-        const widget = store.state.dWidgets[i]
-        if (widget.parent === target.uuid) {
-          widget.left -= dLeft
-          widget.top -= dTop
-        }
-      }
-    }
-
-    if (!donotMove) {
-      target.left = left
-      target.top = top
-    }
-
-    if (parent.uuid !== '-1') {
-      store.dispatch('updateGroupSize', parent.uuid)
-    }
-
-    store.dispatch('reChangeCanvas')
-  },
-  // 设置 resize 操作的初始值
-  initDResize(store, payload) {
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    const resizeWH = store.state.dResizeWH
-    mouseXY.x = payload.startX
-    mouseXY.y = payload.startY
-    widgetXY.x = payload.originX
-    widgetXY.y = payload.originY
-    resizeWH.width = payload.width
-    resizeWH.height = payload.height
-  },
-  // 更新组件宽高
-  dResize(store, { x, y, dirs }) {
-    store.state.dResizeing = true
-
-    const page = store.state.dPage
-    const target = store.state.dActiveElement
-    const mouseXY = store.state.dMouseXY
-    const widgetXY = store.state.dActiveWidgetXY
-    const resizeWH = store.state.dResizeWH
-    let parent = page
-
-    if (target.parent !== '-1') {
-      parent = store.state.dWidgets.find((item) => item.uuid === target.parent)
-    }
-
-    const dx = x - mouseXY.x
-    const dy = y - mouseXY.y
-
-    let left = 0
-    let top = 0
-
-    for (let i = 0; i < dirs.length; ++i) {
-      const dir = dirs[i]
-
-      switch (dir) {
-        case 'top':
-          const t = widgetXY.y + Math.floor((dy * 100) / store.state.dZoom)
-          top = Math.max(t, 0)
-          top = Math.min(widgetXY.y + resizeWH.height - target.record.minHeight, top)
-          target.height += target.top - top
-          target.height = Math.max(target.height, target.record.minHeight)
-          target.top = top
-          break
-        case 'bottom':
-          top = Math.floor((dy * 100) / store.state.dZoom)
-          target.height = resizeWH.height + top
-          target.height = Math.max(target.height, target.record.minHeight)
-          target.height = Math.min(target.height, page.height - target.top)
-          break
-        case 'left':
-          const tLeft = widgetXY.x + Math.floor((dx * 100) / store.state.dZoom)
-          left = Math.max(tLeft, 0)
-          target.width += target.left - left
-          target.width = Math.max(target.width, target.record.minWidth)
-          left = Math.min(widgetXY.x + resizeWH.width - target.record.minWidth, left)
-          target.left = left
-          break
-        case 'right':
-          left = Math.floor((dx * 100) / store.state.dZoom)
-          target.width = resizeWH.width + left
-          target.width = Math.max(target.width, target.record.minWidth)
-          target.width = Math.min(target.width, page.width - target.left)
-          break
-      }
-    }
-    if (parent.uuid !== '-1') {
-      store.dispatch('updateGroupSize', parent.uuid)
-    }
-
-    store.dispatch('reChangeCanvas')
-  },
-  // 组件调整结束
-  stopDResize(store) {
-    if (store.state.dResizeing) {
-      store.dispatch('pushHistory', 'stopDResize')
-    }
-    store.state.dResizeing = false
-  },
-  // 强制重绘画布
-  reChangeCanvas(store) {
-    // const tag = store.state.dPage.tag
-    // store.state.dPage.tag = tag === 0 ? 0.01 : 0
-  },
-  pushColorToHistory(store, color) {
-    const history = store.state.dColorHistory
-    // 如果已经存在就提到前面来，避免重复
-    const index = history.indexOf(color)
-    if (index !== -1) {
-      history.splice(index, 1)
-    }
-    // 最多保存3种颜色
-    if (history.length === 4) {
-      history.splice(history.length - 1, 1)
-    }
-    // 把最新的颜色放在头部
-    const head = [color]
-    store.state.dColorHistory = head.concat(history)
-  },
-  updateHoverUuid(store, uuid) {
-    store.state.dHoverUuid = uuid
-  },
-  showRefLine(store, show) {
-    store.state.dShowRefLine = show
-  },
-  updateAlign(store: any, { align, uuid, group }: any) {
-    const widgets = store.state.dWidgets
-    const target = uuid ? widgets.find((item: any) => item.uuid === uuid) : store.state.dActiveElement
-    let parent = group || store.state.dPage
-
-    if (target.parent !== '-1') {
-      parent = widgets.find((item: any) => item.uuid === target.parent)
-    }
-
-    let left = target.left
-    let top = target.top
-    let pw = parent.record.width || parent.width
-    let ph = parent.record.height || parent.height
-
-    if (parent.uuid === '-1') {
-      pw = parent.width
-      ph = parent.height
-    }
-
-    const targetW = target.width
-    const targetH = target.height
-    switch (align) {
-      case 'left':
-        left = parent.left
-        break
-      case 'ch': // 水平居中
-        left = parent.left + pw / 2 - targetW / 2
-        break
-      case 'right':
-        left = parent.left + pw - targetW
-        break
-      case 'top':
-        top = parent.top
-        break
-      case 'cv': // 垂直居中
-        top = parent.top + ph / 2 - targetH / 2
-        break
-      case 'bottom':
-        top = parent.top + ph - targetH
-        break
-    }
-
-    if (target.left !== left || target.top !== top) {
-      if (target.isContainer) {
-        const dLeft = target.left - left
-        const dTop = target.top - top
-        const len = widgets.length
-        for (let i = 0; i < len; ++i) {
-          const widget = widgets[i]
-          if (widget.parent === target.uuid) {
-            widget.left -= dLeft
-            widget.top -= dTop
-          }
-        }
-      }
-      target.left = left
-      target.top = top
-
-      store.dispatch('pushHistory', 'updateAlign')
-      store.dispatch('reChangeCanvas')
-    }
-  },
-  getWidgetJsonData(store) {
-    const page = JSON.parse(JSON.stringify(store.state.dPage))
-    const widgets = JSON.parse(JSON.stringify(store.state.dWidgets))
-    page.widgets = widgets
-
-    return page
-  },
-  // TODO 组合操作
-  updateAltDown(store, value) {
-    store.state.dAltDown = value
-    console.log('控制组合按键, 成组功能为: realCombined')
-  },
-  realCombined(store: any) {
-    const selectWidgets = store.state.dSelectWidgets
-    if (selectWidgets.length > 1) {
-      const widgets = store.state.dWidgets
-      const group = JSON.parse(store.state.dGroupJson)
-      group.uuid = nanoid()
-      widgets.push(group)
-      let left = Number(store.state.dPage.width)
-      let top = Number(store.state.dPage.height)
-      let right = 0
-      let bottom = 0
-      const sortWidgets = [] // 顺序取出元素
-      const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-      for (const w of widgets) {
-        selectkeys.includes(w.uuid) && sortWidgets.push(w)
-      }
-      for (let i = 0; i < sortWidgets.length; ++i) {
-        const uuid = sortWidgets[i].uuid
-        const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-        const widget = { ...widgets[index] } // clone
-        if (widget.isContainer) {
-          widgets.splice(index, 1) // 删除旧组合
-          for (let i = 0; i < widgets.length; i++) {
-            const item = widgets[i]
-            item.parent === widget.uuid && (item.parent = group.uuid)
-            // if (item.parent === widget.uuid) {
-            //   item.parent = group.uuid
-            //   // 重新排列
-            //   // const index = widgets.findIndex((x) => x.uuid === item.uuid)
-            //   // widgets.splice(index, 1)
-            //   // widgets.push(item)
-            // }
-          }
-        } else {
-          widget.parent = group.uuid
-          // 重新排列
-          widgets.splice(index, 1)
-          widgets.push(widget)
-        }
-
-        // sortWidgets.push({
-        //   index: index,
-        //   widget: widget,
-        // })
-        left = Math.min(left, widget.left)
-        top = Math.min(top, widget.top)
-        right = Math.max(right, Number(widget.width || widget.record.width) + Number(widget.left))
-        bottom = Math.max(bottom, Number(widget.height || widget.record.height) + Number(widget.top))
-      }
-      // sortWidgets.sort((a, b) => a.index > b.index)
-      // for (let i = 0; i < sortWidgets.length; ++i) {
-      //   const index = widgets.findIndex((item) => item.uuid === sortWidgets[i].widget.uuid)
-      //     widgets.splice(index, 1)
-      //     widgets.push(sortWidgets[i].widget)
-      // }
-
-      group.left = Number(left)
-      group.top = Number(top)
-      group.width = Number(right - left)
-      group.height = Number(bottom - top)
-      store.state.dActiveElement = group
-      store.state.dSelectWidgets = []
-
-      store.dispatch('pushHistory', 'realCombined')
-      // store.dispatch('reChangeCanvas')
-    }
-  },
-  getCombined(store: any) {
-    const selectWidgets = store.state.dSelectWidgets
-    return new Promise((resolve) => {
-      if (selectWidgets.length > 1) {
-        const widgets = store.state.dWidgets
-        const group = JSON.parse(store.state.dGroupJson)
-        group.uuid = nanoid()
-        // widgets.push(group)
-        let left = store.state.dPage.width
-        let top = store.state.dPage.height
-        let right = 0
-        let bottom = 0
-        const sortWidgets = [] // 顺序取出元素
-        const selectkeys = selectWidgets.map((x: Type.Object) => x.uuid)
-        for (const w of widgets) {
-          selectkeys.includes(w.uuid) && sortWidgets.push(w)
-        }
-        for (let i = 0; i < sortWidgets.length; ++i) {
-          const uuid = sortWidgets[i].uuid
-          const index = widgets.findIndex((item: Type.Object) => item.uuid === uuid)
-          const widget = { ...widgets[index] } // clone
-          left = Math.min(left, widget.left)
-          top = Math.min(top, widget.top)
-          right = Math.max(right, Number(widget.width) + Number(widget.left))
-          bottom = Math.max(bottom, Number(widget.height) + Number(widget.top))
-        }
-
-        group.left = left
-        group.top = top
-        group.width = right - left
-        group.height = bottom - top
-
-        resolve(group)
-      }
-    })
-  },
-  initGroupJson(store, json) {
-    store.state.dGroupJson = json
-  },
-  updateGroupSize(store, uuid) {
-    const widgets = store.state.dWidgets
-    const group = widgets.find((item) => item.uuid === uuid)
-    let left = store.state.dPage.width
-    let top = store.state.dPage.height
-    let right = 0
-    let bottom = 0
-    for (let i = 0; i < widgets.length; ++i) {
-      if (widgets[i].parent === group.uuid) {
-        left = Math.min(left, widgets[i].left)
-        top = Math.min(top, widgets[i].top)
-        right = Math.max(right, widgets[i].record.width + widgets[i].left)
-        bottom = Math.max(bottom, widgets[i].record.height + widgets[i].top)
-      }
-    }
-    group.width = right - left
-    group.height = bottom - top
-    group.left = left
-    group.top = top
-  },
-  updateLayerIndex(store, { uuid, value, isGroup }) {
-    const widgets = store.state.dWidgets
-    const widget = widgets.find((item) => item.uuid === uuid)
-    const index = widgets.findIndex((item) => item.uuid === uuid)
-    let group = []
-    if (isGroup) {
-      // 组合组件移动
-      group = widgets.filter((item) => item.parent === uuid)
-      for (let i = 0; i < group.length; ++i) {
-        const pos = widgets.findIndex((item) => item.uuid === group[i].uuid)
-        widgets.splice(pos, 1)
-      }
-    }
-
-    // 单个组件移动，组合的把容器内的组件取出来后也相当于是移动单个组件
-    let next = index + value
-    let move = false
-    const maxLen = widgets.length
-    let gCount = 1 // 记录跳过的组合数量
-    // 循环找出要目标位置并移动（因为存在组合，所以不能直接移动到下一个位置）
-    while (next >= 0 && next < maxLen) {
-      const nextWidget = widgets[next]
-      if (widget.parent !== '-1') {
-        // 如果是在容器里面，比较简单，只要目标组件的父容器一样就移动，不一样说明出了容器了就不移动
-        if (nextWidget.parent === widget.parent) {
-          widgets.splice(index, 1)
-          widgets.splice(next, 0, widget)
-          move = true
-        }
-        break
-        // 如果父容器一样并且（目标组件不是容器或者先上移动并且目标组件是容器），则是要移动的位置
-      } else if (nextWidget.parent === '-1') {
-        if ((gCount === 0 && nextWidget.isContainer) || !nextWidget.isContainer || (value < 0 && nextWidget.isContainer)) {
-          if (gCount === 0 && value > 0) {
-            next -= value
-          }
-          widgets.splice(index, 1)
-          widgets.splice(next, 0, widget)
-          move = true
-          break
-        } else if (nextWidget.isContainer) {
-          gCount = 0
-        }
-      }
-      next += value
-    }
-    next -= value
-    if (!move && next !== index) {
-      widgets.splice(index, 1)
-      widgets.splice(next, 0, widget)
-    }
-
-    // 如果是组合，要把里面的组件添加回去
-    if (isGroup) {
-      const pos = widgets.findIndex((item) => item.uuid === uuid)
-      for (let i = group.length - 1; i >= 0; --i) {
-        widgets.splice(pos + 1, 0, group[i])
-      }
-    }
-  },
-  // TODO: 取消组合
-  ungroup(store, uuid) {
-    const widgets = store.state.dWidgets
-    const index = widgets.findIndex((item) => item.uuid === uuid)
-    widgets.splice(index, 1)
-    const len = widgets.length
-
-    for (let i = 0; i < len; ++i) {
-      if (widgets[i].parent === uuid) {
-        widgets[i].parent = '-1'
-        // store.state.dAltDown = true
-        // store.dispatch('selectWidgetsInOut', { uuid: widgets[i].uuid })
-        store.state.dSelectWidgets.push(widgets[i])
-      }
-    }
-    // store.state.dAltDown = false
-    store.commit('updateSelect')
-    // store.state.dActiveElement = store.state.dPage
-  },
-  /**
-   * 设置拖拽时在哪个图层
-   */
-  setDropOver(store: any, uuid: string) {
-    store.state.dDropOverUuid = uuid
-  },
-}

src/store/modules/design/index.ts

@@ -1,191 +0,0 @@
-import mutations from './mutations'
-import actions from './actions'
-const all = {
-  state: {
-    dZoom: 0, // 画布缩放百分比
-    dPaddingTop: 0, // 画布垂直居中修正值
-    dScreen: {
-      width: 0, // 记录编辑界面的宽度
-      height: 0, // 记录编辑界面的高度
-    },
-    // gridSize: {
-    //   width: 0, // 网格小格子的宽度
-    //   height: 0, // 网格小格子的高度
-    // },
-    guidelines: {
-      // moveable 标尺辅助线
-      verticalGuidelines: [],
-      horizontalGuidelines: [],
-    },
-    dActiveWidgetXY: {
-      x: 0, // 选中组件的横向初始值
-      y: 0, // 选中组件的纵向初始值
-    },
-    dMouseXY: {
-      x: 0, // 鼠标按下时的横坐标
-      y: 0, // 鼠标按下时的纵坐标
-    },
-    dMoving: false, // 是否正在移动组件
-    dDraging: false, // 是否正在抓取组件
-    dResizeing: false, // 是否正在调整组件宽高
-    dShowRefLine: true, // 是否显示参考线
-    dResizeWH: {
-      // 初始化调整大小时组件的宽高
-      width: 0,
-      height: 0,
-    },
-    dActiveElement: {}, // 选中的组件或页面
-    dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
-    dHoverUuid: '-1', // 鼠标在这个图层上
-    dDropOverUuid: '', // 拖动时放在哪个图层上
-    dPage: {
-      name: '背景页面',
-      type: 'page',
-      uuid: '-1',
-      left: 0,
-      top: 0,
-      width: 1920, // 画布宽度
-      height: 1080, // 画布高度
-      backgroundColor: '#ffffff', // 画布背景颜色
-      backgroundImage: '', // 画布背景图片
-      backgroundTransform: {},
-      opacity: 1, // 透明度
-      tag: 0, // 强制刷新用
-      setting: [
-        {
-          label: '背景颜色',
-          parentKey: 'backgroundColor',
-          value: false,
-        },
-      ],
-      record: {},
-    },
-    dWidgets: [], // 已使用的组件
-    dHistory: [], // 记录历史操作（保存整个画布的json数据）
-    dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
-    dPageHistory: [], // 记录历史操作对应的page
-    dHistoryParams: {
-      index: -1,
-      length: 0,
-      maxLength: 20,
-    },
-    dColorHistory: [], // 记录历史选择的颜色
-    dAltDown: false, // 记录是否按下alt键 / 或ctrl
-    dSelectWidgets: [], // 记录多选的组件
-    dGroupJson: {}, // 组合的json数据
-    selectItem: { data: null }, // 记录当前选择的元素, data
-    activeMouseEvent: null, // 正在活动的鼠标事件
-    showMoveable: false, // 全局控制选择框的显示
-    showRotatable: true, // 是否显示moveable的旋转按钮
-    zoomScreenChange: null, // 画布强制刷新适应度
-    updateRect: null, // 强制刷新操作框
-    updateSelect: null, // 强制设置选择元素
-    dCropUuid: -1, // 正在编辑or裁剪的组件id
-    // dDragInitData: {}, // 拖拽初始化数据
-  },
-  getters: {
-    selectItem(state: any) {
-      return state.selectItem
-    },
-    dZoom(state) {
-      return state.dZoom
-    },
-    dPaddingTop(state: any) {
-      return state.dPaddingTop
-    },
-    dScreen(state) {
-      return state.dScreen
-    },
-    // gridSize(state) {
-    //   return state.gridSize
-    // },
-    dActiveWidgetXY(state) {
-      return state.dActiveWidgetXY
-    },
-    dMouseXY(state) {
-      return state.dMouseXY
-    },
-    dMoving(state) {
-      return state.dMoving
-    },
-    dDraging(state) {
-      return state.dDraging
-    },
-    dActiveElement(state) {
-      return state.dActiveElement
-    },
-    dPage(state) {
-      return state.dPage
-    },
-    dWidgets(state) {
-      return state.dWidgets
-    },
-    dHistoryParams(state) {
-      return state.dHistoryParams
-    },
-    dColorHistory(state) {
-      return state.dColorHistory
-    },
-    dHoverUuid(state) {
-      return state.dHoverUuid
-    },
-    dResizeing(state) {
-      return state.dResizeing
-    },
-    dShowRefLine(state) {
-      return state.dShowRefLine
-    },
-    dCopyElement(state) {
-      return state.dCopyElement
-    },
-    dAltDown(state) {
-      return state.dAltDown
-    },
-    dSelectWidgets(state) {
-      return state.dSelectWidgets
-    },
-    activeMouseEvent(state: any) {
-      return state.activeMouseEvent
-    },
-    showMoveable(state: any) {
-      return state.showMoveable
-    },
-    showRotatable(state: any) {
-      return state.showRotatable
-    },
-    zoomScreenChange(state: any) {
-      return state.zoomScreenChange
-    },
-    updateRect(state: any) {
-      return state.updateRect
-    },
-    updateSelect(state: any) {
-      return state.updateSelect
-    },
-    dDropOverUuid(state: any) {
-      return state.dDropOverUuid
-    },
-    guidelines(state: any) {
-      return state.guidelines
-    },
-    dCropUuid(state: any) {
-      return state.dCropUuid
-    },
-    dPageHistory(state: any) {
-      return state.dPageHistory
-    },
-    dHistory(state: any) {
-      return state.dHistory
-    },
-    // dDragInitData(state: any) {
-    //   return state.dDragInitData
-    // },
-  },
-  mutations: {
-    ...mutations,
-  },
-  actions: {
-    ...actions,
-  },
-}
-export default all

src/store/modules/design/methods/handleHistory.ts

@@ -1,88 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2022-03-10 23:05:03
- * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-11 10:13:42
- */
-export default function handleHistory(store: any, action: any) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-  const history = store.state.dHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams
-  if (action === 'undo') {
-    historyParams.index -= 1 // 下标向前移1 撤销
-    console.log(historyParams.index)
-    if (historyParams.index > -1) {
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-    }
-  } else if (action === 'redo') {
-    historyParams.index += 1 // 下标向后移1 重做
-    // 如果下标小于历史记录列表长度，直接取出历史记录
-    // if (historyParams.index < historyParams.length) {
-    store.state.dWidgets = JSON.parse(history[historyParams.index])
-    store.state.dPage = JSON.parse(pageHistory[historyParams.index])
-    // } else {
-    //   // 否则设置下标为列表最后一项
-    //   historyParams.index = historyParams.length - 1
-    //   store.state.dWidgets = JSON.parse(history[historyParams.index])
-    //   store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-    // }
-  }
-}
-
-function handleHistory_old(store: any, action: any) {
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
-  const history = store.state.dHistory
-  // const uuidHistory = store.state.dActiveUuidHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams
-
-  // let uuid = '-1'
-  console.log(action, historyParams)
-
-  if (action === 'undo') {
-    // 下标向前移1 撤销
-    historyParams.index -= 1
-    // 如果下表大于等于0，直接取出历史记录
-    if (historyParams.index >= 0) {
-      console.log(1, history)
-      console.log(2, pageHistory)
-
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-      // uuid = uuidHistory[historyParams.index]
-    } else if (historyParams.length < 10) {
-      // 否则如果历史记录长度小于10，则设置组件为空
-      historyParams.index = -1
-      store.state.dWidgets = []
-      store.state.dPage = JSON.parse(pageHistory[0])
-    } else {
-      historyParams.index = -1
-    }
-  } else if (action === 'redo') {
-    // 下标向后移1 重做
-    historyParams.index += 1
-    // 如果下标小于历史记录列表长度，直接取出历史记录
-    if (historyParams.index < historyParams.length) {
-      console.log(1, history)
-      console.log(2, pageHistory)
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1] || pageHistory[historyParams.index])
-      // uuid = uuidHistory[historyParams.index]
-    } else {
-      // 否则设置下标为列表最后一项
-      historyParams.index = historyParams.length - 1
-      store.state.dWidgets = JSON.parse(history[historyParams.index])
-      store.state.dPage = JSON.parse(pageHistory[historyParams.index + 1])
-      // uuid = uuidHistory[historyParams.index]
-    }
-  }
-  // 激活组件默认为page
-  // let element = store.state.dPage
-  // if (uuid !== '-1') {
-  //   element = store.state.dWidgets.find((item) => item.uuid === uuid)
-  // }
-  // store.state.dActiveElement = element
-}

src/store/modules/design/methods/pushHistory.ts

@@ -1,73 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2022-03-04 19:36:00
- * @Description:
- * @LastEditors: ShawnPhang
- * @LastEditTime: 2022-03-11 10:12:50
- */
-export default function pushHistory(store: any, msg: string) {
-  console.log('history压栈', '来源: ' + msg)
-  const history = store.state.dHistory
-  const pageHistory = store.state.dPageHistory
-  const historyParams = store.state.dHistoryParams // index = length - 1
-  // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-  if (history[history.length - 1] && history[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
-    return
-  }
-  if (historyParams.index < history.length - 1) {
-    const index = historyParams.index + 1
-    const len = history.length - index
-    history.splice(index, len)
-    pageHistory.splice(index, len)
-    historyParams.length = history.length
-    historyParams.index = history.length - 1
-  }
-  history.push(JSON.stringify(store.state.dWidgets))
-  pageHistory.push(JSON.stringify(store.state.dPage))
-  historyParams.index = history.length - 1
-  historyParams.length = history.length
-}
-
-function pushHistory_old(store: any) {
-  // 历史记录列表
-  const history = store.state.dHistory
-  // 历史激活组件记录列表
-  // const uuidHistory = store.state.dActiveUuidHistory
-  // 历史page记录列表
-  const pageHistory = store.state.dPageHistory
-  // 历史记录列表参数（长度和下标）
-  const historyParams = store.state.dHistoryParams
-
-  // 下标不等于-1表示已经存在历史操作记录
-  // 下标小于历史列表长度-1，则说明不是在末尾添加记录，需要先删除掉下标之后的数据，否则会出现错乱
-  if (historyParams.index < history.length - 1) {
-    const index = historyParams.index + 1
-    const len = history.length - index
-    // 删除下标之后的所有历史记录
-    history.splice(index, len)
-    // 删除下标之后的所有uuid记录
-    // uuidHistory.splice(index, len)
-    // 删除下标之后的所有page记录
-    pageHistory.splice(index + 1, len - 1)
-    historyParams.length = history.length
-  }
-  // 保存当前操作进历史记录
-  if (history[history.length - 1] !== JSON.stringify(store.state.dWidgets)) {
-    history.push(JSON.stringify(store.state.dWidgets))
-    // uuidHistory.push(store.state.dActiveElement.uuid)
-    pageHistory.push(JSON.stringify(store.state.dPage))
-    historyParams.index = history.length - 1
-    historyParams.length = history.length
-  }
-  // 历史记录最多n条，如果超过则从头部开始删，因为每次都是一条一条加的，所以只需删一条就行
-  if (history.length > 20) {
-    history.splice(0, 1)
-    // uuidHistory.splice(0, 1)
-    pageHistory.splice(0, 1)
-  }
-  if (pageHistory.length - 1 > history.length) {
-    pageHistory.splice(0, 1)
-  }
-  // historyParams.index = history.length - 1
-  // historyParams.length = history.length
-}

src/store/modules/design/mutations.ts

@@ -1,78 +0,0 @@
-/*
- * @Author: ShawnPhang
- * @Date: 2021-07-14 15:16:43
- * @Description:
- * @LastEditors: ShawnPhang <site: book.palxp.com>
- * @LastEditTime: 2023-07-11 10:22:54
- */
-/**
- * 同步操作 store.commit() 调用
- */
-interface Iprops {
-  commit: (a: any, b: any) => void
-  state: {}
-}
-export default {
-  updatePaddingTop(state: Type.Object, num: number) {
-    state.dPaddingTop = num
-  },
-  selectItem(state: Type.Object, { data, type }: any) {
-    state.selectItem.data = data
-    state.selectItem.type = type
-  },
-  resize(state: Type.Object, data: Type.Object) {
-    const { width, height } = data
-    const target = state.dActiveElement
-    target.width = width
-    target.height = height
-  },
-  setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
-    const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
-    widget[key] = value
-  },
-  setMouseEvent(state: Type.Object, e: Event | null) {
-    state.activeMouseEvent = e
-  },
-  setDWidgets(state: Type.Object, e: any) {
-    state.dWidgets = e
-  },
-  setDPage(state: Type.Object, e: any) {
-    state.dPage = e
-  },
-  setShowMoveable(state: Type.Object, show: any) {
-    state.showMoveable = show
-    // if (!show) {
-    //   // TODO: 失焦时设置面板也失去关联，但会导致某些失焦状态出错(如裁剪)
-    //   state.dActiveElement = state.dPage
-    // }
-  },
-  setShowRotatable(state: Type.Object, e: any) {
-    state.showRotatable = e
-  },
-  zoomScreenChange(state: Type.Object, e: any) {
-    // 画布尺寸适应度强制刷新
-    state.zoomScreenChange = Math.random()
-  },
-  updateRect(state: Type.Object, e: any) {
-    // 强制刷新操作框
-    state.updateRect = Math.random()
-  },
-  updateSelect(state: Type.Object, e: any) {
-    // 强制触发元素选择
-    state.updateSelect = Math.random()
-  },
-  updateGuidelines(state: Type.Object, lines: any) {
-    // 修改标尺线
-    state.guidelines = { ...state.guidelines, ...lines }
-  },
-  setCropUuid(state: Type.Object, uuid: any) {
-    // 设置正在裁剪or编辑的组件
-    state.dCropUuid = uuid
-  },
-  setDraging(state: Type.Object, drag: boolean) {
-    state.dDraging = drag
-  },
-  // setDragInitData(state: Type.Object, data: any) {
-  //   state.dDragInitData = data
-  // },
-}

src/utils/axios.ts

@@ -6,8 +6,9 @@
  * @LastEditTime: 2024-02-26 17:54:00
  */
 import axios, { AxiosRequestConfig, AxiosResponse, AxiosStatic } from 'axios'
-import store from '@/store'
+// import store from '@/store'
 import app_config, { LocalStorageKey } from '@/config'
+import { useBaseStore, useUserStore } from '@/store/index';
 
 axios.defaults.timeout = 30000
 axios.defaults.headers.authorization = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpZCI6MTAwMDEsImV4cCI6MTc4ODU3NDc1MDU4NX0.L_t6DFD48Dm6rUPfgIgOWJkz18En1m_-hhMHcpbxliY';
@@ -53,7 +54,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
     }
     if (res.data.code === 401) {
       console.log('登录失效')
-      store.commit('changeOnline', false)
+      useUserStore().changeOnline(false)
+      // store.commit('changeOnline', false)
     }
 
     if (res.data.result && res.data.code === 200) {
@@ -67,7 +69,8 @@ axios.interceptors.response.use((res: AxiosResponse<any>) => {
   (error) => {
     // if (error.response.status === 401) {
     // }
-    store.dispatch('hideLoading')
+    useBaseStore().hideLoading()
+    // store.dispatch('hideLoading')
     return Promise.reject(error)
   },
 )

src/utils/utils.ts

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

src/views/Draw.vue

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

src/views/Index.vue

@@ -58,7 +58,7 @@ import {
   CSSProperties, computed, nextTick,
   onBeforeUnmount, onMounted, reactive, ref,
 } from 'vue'
-import { useStore } from 'vuex'
+// import { useStore } from 'vuex'
 import RightClickMenu from '@/components/business/right-click-menu/RcMenu.vue'
 import Moveable from '@/components/business/moveable/Moveable.vue'
 import designBoard from '@/components/modules/layout/designBoard/index.vue'
@@ -68,9 +68,11 @@ import shortcuts from '@/mixins/shortcuts'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import HeaderOptions from './components/HeaderOptions.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
+import { storeToRefs } from 'pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore, useWidgetStore, useGroupStore } from '@/store'
 
 type TState = {
   style: CSSProperties
@@ -81,9 +83,17 @@ type TState = {
   showLineGuides: boolean
 }
 
-const {
+// const {
-  dActiveElement, dHistoryParams, dCopyElement, dPage, dZoom
+//   dActiveElement, dCopyElement
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement', 'dPage', 'dZoom'])
+// } = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+const widgetStore = useWidgetStore()
+const historyStore = useHistoryStore()
+const groupStore = useGroupStore()
+const { dPage } = storeToRefs(usePageStore())
+const { dZoom } = storeToRefs(useCanvasStore())
+const { dHistoryParams } = storeToRefs(useHistoryStore())
+const { dActiveElement, dCopyElement } = storeToRefs(widgetStore)
+
 
 const state = reactive<TState>({
   style: {
@@ -98,11 +108,12 @@ const state = reactive<TState>({
 })
 const optionsRef = ref<typeof HeaderOptions | null>(null)
 const zoomControlRef = ref<typeof zoomControl | null>(null)
-const store = useStore()
+// const store = useStore()
+const controlStore = useControlStore()
 const route = useRoute()
 
 const beforeUnload = function (e: Event): any {
-  if (store.getters.dHistoryParams.length > 0) {
+  if (dHistoryParams.value.length > 0) {
     const confirmationMessage: string = '系统不会自动保存您未修改的内容';
     (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
     return confirmationMessage // Gecko and WebKit
@@ -124,7 +135,7 @@ defineExpose({
 const undoable = computed(() => {
   return !(
     dHistoryParams.value.index === -1 || 
-    (dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
+    (dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
 })
 
 const redoable = computed(() => {
@@ -151,26 +162,28 @@ let checkCtrl: number | undefined
 const instanceFn = { save, zoomAdd, zoomSub }
 
 onMounted(() => {
-  store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
+  groupStore.initGroupJson(JSON.stringify(wGroupSetting))
+  // store.dispatch('initGroupJson', JSON.stringify(wGroupSetting))
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadData()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', fixTopBarScroll)
   // window.removeEventListener('click', this.clickListener)
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
     // ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
 
-function handleHistory(data: string) {
+function handleHistory(data: "undo" | "redo") {
-  store.dispatch('handleHistory', data)
+  historyStore.handleHistory(data)
+  // store.dispatch('handleHistory', data)
 }
 
 function changeLineGuides() {
@@ -190,11 +203,10 @@ function loadData() {
     if (!zoomControlRef.value) return
     // await nextTick()
     // zoomControlRef.value.screenChange()
+    
     // 初始化激活的控件为page
-    store.dispatch('selectWidget', { uuid: '-1' })
+    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,8 +71,10 @@ import HeaderOptions, { TEmitChangeData } from './components/UploadTemplate.vue'
 import ProgressLoading from '@/components/common/ProgressLoading/index.vue'
 // import MyWorker from '@/utils/plugins/webWorker'
 import { processPSD2Page } from '@/utils/plugins/psd'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { wTextSetting } from '@/components/modules/widgets/wText/wTextSetting'
+import { useCanvasStore, useControlStore, usePageStore, useWidgetStore } from '@/store'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   isDone: boolean
@@ -90,10 +92,17 @@ const state = reactive<TState>({
   downloadMsg: '',
   cancelText: '',
 })
-const store = useStore()
+// const store = useStore()
+const widgetStore = useWidgetStore()
+const controlStore = useControlStore()
+
 const route = useRoute()
 
-const { dPage, dZoom } = useSetupMapGetters(['dPage', 'dZoom'])
+// const { dZoom } = useSetupMapGetters(['dZoom'])
+const pageStore = usePageStore()
+const { dPage } = storeToRefs(pageStore)
+const { dZoom } = storeToRefs(useCanvasStore())
+
 const zoomControlRef = ref<typeof zoomControl | null>()
 
 let loading: ReturnType<typeof useLoading> | null = null
@@ -134,19 +143,29 @@ async function loadPSD(file: File) {
       const rawData = JSON.parse(JSON.stringify(types[x.type])) || {}
       delete x.type
       x.src && (x.imgUrl = x.src) && delete x.src
-      store.dispatch('addWidget', Object.assign(rawData, x))
+      widgetStore.addWidget(Object.assign(rawData, x))
+      // store.dispatch('addWidget', Object.assign(rawData, x))
     }
 
     const { width, height, background: bg } = data
-    store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+
+    pageStore.setDPage(Object.assign(pageStore.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    // store.commit('setDPage', Object.assign(store.getters.dPage, { width, height, backgroundColor: bg.color, backgroundImage: bg.image }))
+    
     await loadDone()
   }, 10)
 }
 
 async function clear() {
-  store.commit('setDWidgets', [])
+  widgetStore.setDWidgets([])
-  store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  // store.commit('setDWidgets', [])
-  store.commit('setShowMoveable', false)
+
+  pageStore.setDPage(Object.assign(pageStore.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  // store.commit('setDPage', Object.assign(store.getters.dPage, { width: 1920, height: 1080, backgroundColor: '#ffffff', backgroundImage: '' }))
+  
+  // store.commit('setShowMoveable', false)
+  controlStore.setShowMoveable(false)
+  
   await nextTick()
   state.isDone = false
 }
@@ -171,15 +190,15 @@ let checkCtrl: number | undefined
 
 onMounted(() => {
   const instance = getCurrentInstance()
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadJS()
 })
 
 onBeforeMount(() => {
   const instance = getCurrentInstance()
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
 // ...mapActions(['selectWidget']),
@@ -189,7 +208,8 @@ async function loadDone() {
   if (!zoomControlRef.value) return
   zoomControlRef.value.screenChange()
   setTimeout(() => {
-    store.dispatch('selectWidget', { uuid: '-1' })
+    widgetStore.selectWidget({ uuid: '-1' })
+    // store.dispatch('selectWidget', { uuid: '-1' })
     // selectWidget({
     //   uuid: '-1',
     // })

src/views/components/HeaderOptions.vue

@@ -12,7 +12,8 @@
       <span style="color: #999; font-size: 14px; margin-right: 0.5rem">{{ state.stateBollean ? '启用' : '停用' }}</span> <el-switch v-model="state.stateBollean" @change="stateChange" />
       <div class="divide__line">|</div>
       <el-button plain type="primary" @click="saveTemp">保存模板</el-button>
-      <el-button @click="$store.commit('managerEdit', false)">取消</el-button>
+      <el-button @click="userStore.managerEdit(false)">取消</el-button>
+      <!-- <el-button @click="$store.commit('managerEdit', false)">取消</el-button> -->
       <div class="divide__line">|</div>
     </template>
     <!-- <el-button @click="draw">绘制(测试)</el-button> -->
@@ -28,7 +29,7 @@
 <script lang="ts" setup>
 import api from '@/api'
 import { reactive, toRefs, ref } from 'vue'
-import { mapGetters, mapActions, useStore } from 'vuex'
+// import { mapGetters, mapActions, useStore } from 'vuex'
 import { useRoute, useRouter } from 'vue-router'
 import _dl from '@/common/methods/download'
 import useNotification from '@/common/methods/notification'
@@ -38,7 +39,9 @@ import copyRight from './CopyRight.vue'
 import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
-import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+// import { useSetupMapGetters } from '@/common/hooks/mapGetters'
+import { useBaseStore, useControlStore, useHistoryStore, usePageStore, useUserStore, useWidgetStore } from '@/store/index'
+import { storeToRefs } from 'pinia'
 
 type TProps = {
   modelValue?: boolean
@@ -59,11 +62,25 @@ const props = defineProps<TProps>()
 const emit = defineEmits<TEmits>()
 const route = useRoute()
 const router = useRouter()
-const store = useStore()
+// const store = useStore()
+const userStore = useUserStore()
+const widgetStore = useWidgetStore()
+
 const canvasImage = ref<typeof SaveImage | null>(null)
-const {
+
-  dPage, dWidgets, tempEditing, dHistory, dPageHistory
+// const {
-} = useSetupMapGetters(['dPage', 'dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+//   dWidgets, tempEditing
+// } = useSetupMapGetters(['dWidgets', 'tempEditing'])
+
+const pageStore = usePageStore()
+const controlStore = useControlStore()
+const historyStore = useHistoryStore()
+
+const { dPage } = storeToRefs(pageStore)
+const { tempEditing } = storeToRefs(userStore)
+const { dWidgets } = storeToRefs(widgetStore)
+const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
+
 
 const state = reactive<TState>({
   stateBollean: false,
@@ -77,7 +94,10 @@ async function save(hasCover: boolean = false) {
   if (dHistory.value.length <= 0) {
     return
   }
-  store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  
+  // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+  controlStore.setShowMoveable(false) // 清理掉上一次的选择框
+
   // console.log(proxy?.dPage, proxy?.dWidgets)
   const { id, tempid } = route.query
   const cover = hasCover ? await draw() : undefined
@@ -85,7 +105,9 @@ async function save(hasCover: boolean = false) {
   const { id: newId, stat, msg } = await api.home.saveWorks({ cover, id: (id as string), title: state.title || '未命名设计', data: JSON.stringify({ page: dPage.value, widgets }), temp_id: (tempid as string), width: dPage.value.width, height: dPage.value.height })
   stat !== 0 ? useNotification('保存成功', '可在"我的作品"中查看') : useNotification('保存失败', msg, { type: 'error' })
   !id && router.push({ path: '/home', query: { id: newId }, replace: true })
-  store.commit('setShowMoveable', true)
+  
+  // store.commit('setShowMoveable', true)
+  controlStore.setShowMoveable(true)
 }
 
     // 保存模板
@@ -96,6 +118,7 @@ async function saveTemp() {
     // 保存组件，组合元素要保证在最后一位，才能默认选中
     if (dWidgets.value[0].type === 'w-group') {
       const group = dWidgets.value.shift()
+      if (!group) return
       group.record.width = 0
       group.record.height = 0
       dWidgets.value.push(group)
@@ -180,20 +203,26 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
     const data = JSON.parse(content)
     state.stateBollean = !!_state
     state.title = title
-    store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    controlStore.setShowMoveable(false)
+    
     // this.$store.commit('setDWidgets', [])
     if (type == 1) {
       // 加载文字组合组件
       dPage.value.width = width
       dPage.value.height = height
-      store.dispatch('addGroup', data)
+      widgetStore.addGroup(data)
+      // store.dispatch('addGroup', data)
       // addGroup(data)
     } else {
-      store.commit('setDPage', data.page)
+      pageStore.setDPage(data.page)
-      id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
+      // store.commit('setDPage', data.page)
+      id ? widgetStore.setDWidgets(data.widgets) : widgetStore.setTemplate(data.widgets)
+      // id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
-    store.dispatch('pushHistory', '请求加载load')
+    historyStore.pushHistory('请求加载load')
+    // store.dispatch('pushHistory', '请求加载load')
     // pushHistory('请求加载load')
   }
 }

src/views/components/UploadTemplate.vue

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