rebuilt: store to pinia

src/pinia/design/canvas/index.ts

@@ -48,6 +48,8 @@ type TStoreAction = {
   updateScreen: (data: TScreeData) => void
   /** 修改标尺线 */
   updateGuidelines: (lines: TGuidelinesData) => void
+  /** 强制重绘画布 */
+  reChangeCanvas: () => void
 }
 
 /** 画布全局设置 */
@@ -92,7 +94,12 @@ const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStor
     /** 修改标尺线 */
     updateGuidelines(lines: TGuidelinesData) {
       this.guidelines = { ...this.guidelines, ...lines }
-    }
+    },
+    /** 强制重绘画布 */
+    reChangeCanvas() {
+      // const tag = this.dPage.tag
+      // this.dPage.tag = tag === 0 ? 0.01 : 0
+    },
   }
 })
 

src/pinia/design/control/index.ts

@@ -7,6 +7,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
+import { useHistoryStore } from "@/pinia";
 import { Store, defineStore } from "pinia";
 
 type TControlState = {
@@ -24,6 +25,8 @@ type TControlState = {
   showRotatable: boolean
   /** 记录是否按下alt键 / 或ctrl */
   dAltDown: boolean
+  /** 正在编辑or裁剪的组件id */
+  dCropUuid: string
 }
 
 type TControlAction = {
@@ -34,6 +37,12 @@ type TControlAction = {
   setShowMoveable: (isShowMoveable: boolean) => void
   setShowRotatable: (isShowRotatable: boolean) => void
   updateAltDown: (isPressAltDown: boolean) => void
+  /** 组件调整结束 */
+  stopDResize: () => void
+  /** 组件移动结束 */
+  stopDMove: () => void
+  /** 设置正在裁剪or编辑的组件 */
+  setCropUuid: (uuid: string) => void
 }
 
 /** 全局控制配置 */
@@ -46,6 +55,7 @@ const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAct
     showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
     dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    dCropUuid: '-1', // 正在编辑or裁剪的组件id
   }),
   getters: {},
   actions: {
@@ -75,7 +85,29 @@ const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAct
     updateAltDown(e: boolean) {
       this.dAltDown = e
       console.log('控制组合按键, 成组功能为: realCombined')
-    }
+    },
+    /** 组件调整结束 */
+    stopDResize() {
+      if (this.dResizeing) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory('stopDResize')
+        // store.dispatch('pushHistory', 'stopDResize')
+      }
+      this.dResizeing = false
+    },
+    /** 组件移动结束 */
+    stopDMove() {
+      if (this.dMoving) {
+        const historyStore = useHistoryStore()
+        historyStore.pushHistory("stopDMove")
+        // store.dispatch('pushHistory', 'stopDMove')
+      }
+      this.dMoving = false
+    },
+    setCropUuid(uuid: string) {
+      // 设置正在裁剪or编辑的组件
+      this.dCropUuid = uuid
+    },
   }
 })
 

src/pinia/design/force/index.ts

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

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

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

src/pinia/design/group/index.ts

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

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

@@ -6,15 +6,16 @@
  * @LastEditTime: 2024-03-27 21:00:00
  */
 
-import { usePageStore } from "@/pinia"
+import { usePageStore, useWidgetStore } from "@/pinia"
 import { THistoryStore } from ".."
 
 /** push操作历史记录 */
 export function pushHistory(store: THistoryStore, msg: string) {
   const pageStore = usePageStore()
+  const selectStore = useWidgetStore()
   console.log('history压栈', '来源: ' + msg)
   // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(store.state.dWidgets)) {
+  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(selectStore.dWidgets)) {
     return
   }
   if (store.dHistoryParams.index < history.length - 1) {
@@ -25,7 +26,7 @@ export function pushHistory(store: THistoryStore, msg: string) {
     store.dHistoryParams.length = history.length
     store.dHistoryParams.index = history.length - 1
   }
-  store.dHistory.push(JSON.stringify(store.state.dWidgets))
+  store.dHistory.push(JSON.stringify(selectStore.dWidgets))
   store.dPageHistory.push(JSON.stringify(pageStore.dPage))
   store.dHistoryParams.index = history.length - 1
   store.dHistoryParams.length = history.length

src/pinia/design/history/index.ts

@@ -9,6 +9,7 @@
 import { Store, defineStore } from "pinia"
 import {pushHistory, pushColorToHistory} from "./actions/pushHistory"
 import handleHistory from "./actions/handleHistory"
+import { usePageStore, useWidgetStore } from "@/pinia"
 
 export type THistoryParamData = {
   index: number
@@ -63,9 +64,11 @@ const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryActi
       pushHistory(this, msg)
     },
     handleHistory(action) {
+      const selectStore = useWidgetStore()
+      const pageStore = usePageStore()
       handleHistory(this, action)
       // 激活组件默认为page
-      store.state.dActiveElement = store.state.dPage
+      selectStore.dActiveElement = pageStore.dPage
     },
     pushColorToHistory(color) {
       pushColorToHistory(this, color)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

src/pinia/design/widget/index.ts

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

src/pinia/index.ts

@@ -12,6 +12,9 @@ import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
 import useControlStore from './design/control'
 import useHistoryStore from './design/history'
+import useWidgetStore from './design/widget'
+import useGroupStore from './design/group'
+import useForceStore from './design/force'
 
 export {
   useBaseStore,
@@ -20,4 +23,7 @@ export {
   useCanvasStore,
   useControlStore,
   useHistoryStore,
+  useWidgetStore,
+  useGroupStore,
+  useForceStore,
 }

src/store/modules/design/index.ts

@@ -17,27 +17,27 @@ const all = {
     //   verticalGuidelines: [],
     //   horizontalGuidelines: [],
     // },
-    dActiveWidgetXY: {
+    // dActiveWidgetXY: {
-      x: 0, // 选中组件的横向初始值
+    //   x: 0, // 选中组件的横向初始值
-      y: 0, // 选中组件的纵向初始值
+    //   y: 0, // 选中组件的纵向初始值
-    },
+    // },
-    dMouseXY: {
+    // dMouseXY: {
-      x: 0, // 鼠标按下时的横坐标
+    //   x: 0, // 鼠标按下时的横坐标
-      y: 0, // 鼠标按下时的纵坐标
+    //   y: 0, // 鼠标按下时的纵坐标
-    },
+    // },
     // dMoving: false, // 是否正在移动组件
     // dDraging: false, // 是否正在抓取组件
     // dResizeing: false, // 是否正在调整组件宽高
     // dShowRefLine: true, // 是否显示参考线
-    dResizeWH: {
+    // dResizeWH: {
-      // 初始化调整大小时组件的宽高
+    //   // 初始化调整大小时组件的宽高
-      width: 0,
+    //   width: 0,
-      height: 0,
+    //   height: 0,
-    },
+    // },
-    dActiveElement: {}, // 选中的组件或页面
+    // dActiveElement: {}, // 选中的组件或页面
-    dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
+    // dCopyElement: [], // 复制的组件（可能是单个也可能是数组）
-    dHoverUuid: '-1', // 鼠标在这个图层上
+    // dHoverUuid: '-1', // 鼠标在这个图层上
-    dDropOverUuid: '', // 拖动时放在哪个图层上
+    // dDropOverUuid: '', // 拖动时放在哪个图层上
     // dPage: {
     //   name: '背景页面',
     //   type: 'page',
@@ -60,7 +60,7 @@ const all = {
     //   ],
     //   record: {},
     // },
-    dWidgets: [], // 已使用的组件
+    // dWidgets: [], // 已使用的组件
     // dHistory: [], // 记录历史操作（保存整个画布的json数据）
     // dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
     // dPageHistory: [], // 记录历史操作对应的page
@@ -71,22 +71,22 @@ const all = {
     // },
     // dColorHistory: [], // 记录历史选择的颜色
     // dAltDown: false, // 记录是否按下alt键 / 或ctrl
-    dSelectWidgets: [], // 记录多选的组件
+    // dSelectWidgets: [], // 记录多选的组件
-    dGroupJson: {}, // 组合的json数据
+    // dGroupJson: {}, // 组合的json数据
-    selectItem: { data: null }, // 记录当前选择的元素, data
+    // selectItem: { data: null }, // 记录当前选择的元素, data
-    activeMouseEvent: null, // 正在活动的鼠标事件
+    // activeMouseEvent: null, // 正在活动的鼠标事件
     // showMoveable: false, // 全局控制选择框的显示
     // showRotatable: true, // 是否显示moveable的旋转按钮
-    zoomScreenChange: null, // 画布强制刷新适应度
+    // zoomScreenChange: null, // 画布强制刷新适应度
-    updateRect: null, // 强制刷新操作框
+    // updateRect: null, // 强制刷新操作框
-    updateSelect: null, // 强制设置选择元素
+    // updateSelect: null, // 强制设置选择元素
-    dCropUuid: -1, // 正在编辑or裁剪的组件id
+    // dCropUuid: -1, // 正在编辑or裁剪的组件id
     // dDragInitData: {}, // 拖拽初始化数据
   },
   getters: {
-    selectItem(state: any) {
+    // selectItem(state: any) {
-      return state.selectItem
+    //   return state.selectItem
-    },
+    // },
     // dZoom(state) {
     //   return state.dZoom
     // },
@@ -99,78 +99,78 @@ const all = {
     // gridSize(state) {
     //   return state.gridSize
     // },
-    dActiveWidgetXY(state) {
+    // dActiveWidgetXY(state) {
-      return state.dActiveWidgetXY
+    //   return state.dActiveWidgetXY
-    },
+    // },
-    dMouseXY(state) {
+    // dMouseXY(state) {
-      return state.dMouseXY
+    //   return state.dMouseXY
-    },
+    // },
     // dMoving(state) {
     //   return state.dMoving
     // },
     // dDraging(state) {
     //   return state.dDraging
     // },
-    dActiveElement(state) {
+    // dActiveElement(state) {
-      return state.dActiveElement
+    //   return state.dActiveElement
-    },
+    // },
     // dPage(state) {
     //   return state.dPage
     // },
-    dWidgets(state) {
+    // dWidgets(state) {
-      return state.dWidgets
+    //   return state.dWidgets
-    },
+    // },
     // dHistoryParams(state) {
     //   return state.dHistoryParams
     // },
     // dColorHistory(state) {
     //   return state.dColorHistory
     // },
-    dHoverUuid(state) {
+    // dHoverUuid(state) {
-      return state.dHoverUuid
+    //   return state.dHoverUuid
-    },
+    // },
     // dResizeing(state) {
     //   return state.dResizeing
     // },
     // dShowRefLine(state) {
     //   return state.dShowRefLine
     // },
-    dCopyElement(state) {
+    // dCopyElement(state) {
-      return state.dCopyElement
+    //   return state.dCopyElement
-    },
+    // },
     // dAltDown(state) {
     //   return state.dAltDown
     // },
-    dSelectWidgets(state) {
+    // dSelectWidgets(state) {
-      return state.dSelectWidgets
+    //   return state.dSelectWidgets
-    },
+    // },
-    activeMouseEvent(state: any) {
+    // activeMouseEvent(state: any) {
-      return state.activeMouseEvent
+    //   return state.activeMouseEvent
-    },
+    // },
     // showMoveable(state: any) {
     //   return state.showMoveable
     // },
     // showRotatable(state: any) {
     //   return state.showRotatable
     // },
-    zoomScreenChange(state: any) {
+    // zoomScreenChange(state: any) {
-      return state.zoomScreenChange
+    //   return state.zoomScreenChange
-    },
+    // },
-    updateRect(state: any) {
+    // updateRect(state: any) {
-      return state.updateRect
+    //   return state.updateRect
-    },
+    // },
-    updateSelect(state: any) {
+    // updateSelect(state: any) {
-      return state.updateSelect
+    //   return state.updateSelect
-    },
+    // },
-    dDropOverUuid(state: any) {
+    // dDropOverUuid(state: any) {
-      return state.dDropOverUuid
+    //   return state.dDropOverUuid
-    },
+    // },
     // guidelines(state: any) {
     //   return state.guidelines
     // },
-    dCropUuid(state: any) {
+    // dCropUuid(state: any) {
-      return state.dCropUuid
+    //   return state.dCropUuid
-    },
+    // },
     // dPageHistory(state: any) {
     //   return state.dPageHistory
     // },

src/store/modules/design/mutations.ts

@@ -16,26 +16,26 @@ export default {
   // updatePaddingTop(state: Type.Object, num: number) {
   //   state.dPaddingTop = num
   // },
-  selectItem(state: Type.Object, { data, type }: any) {
+  // selectItem(state: Type.Object, { data, type }: any) {
-    state.selectItem.data = data
+  //   state.selectItem.data = data
-    state.selectItem.type = type
+  //   state.selectItem.type = type
-  },
+  // },
-  resize(state: Type.Object, data: Type.Object) {
+  // resize(state: Type.Object, data: Type.Object) {
-    const { width, height } = data
+  //   const { width, height } = data
-    const target = state.dActiveElement
+  //   const target = state.dActiveElement
-    target.width = width
+  //   target.width = width
-    target.height = height
+  //   target.height = height
-  },
+  // },
-  setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
+  // setWidgetStyle(state: Type.Object, { uuid, key, value, pushHistory }: Type.Object) {
-    const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
+  //   const widget = state.dWidgets.find((item: any) => item.uuid === uuid)
-    widget[key] = value
+  //   widget[key] = value
-  },
+  // },
-  setMouseEvent(state: Type.Object, e: Event | null) {
+  // setMouseEvent(state: Type.Object, e: Event | null) {
-    state.activeMouseEvent = e
+  //   state.activeMouseEvent = e
-  },
+  // },
-  setDWidgets(state: Type.Object, e: any) {
+  // setDWidgets(state: Type.Object, e: any) {
-    state.dWidgets = e
+  //   state.dWidgets = e
-  },
+  // },
 
   // setDPage(state: Type.Object, e: any) {
   //   state.dPage = e
@@ -51,26 +51,26 @@ export default {
   // setShowRotatable(state: Type.Object, e: any) {
   //   state.showRotatable = e
   // },
-  zoomScreenChange(state: Type.Object, e: any) {
+  // zoomScreenChange(state: Type.Object, e: any) {
-    // 画布尺寸适应度强制刷新
+  //   // 画布尺寸适应度强制刷新
-    state.zoomScreenChange = Math.random()
+  //   state.zoomScreenChange = Math.random()
-  },
+  // },
-  updateRect(state: Type.Object, e: any) {
+  // updateRect(state: Type.Object, e: any) {
-    // 强制刷新操作框
+  //   // 强制刷新操作框
-    state.updateRect = Math.random()
+  //   state.updateRect = Math.random()
-  },
+  // },
-  updateSelect(state: Type.Object, e: any) {
+  // updateSelect(state: Type.Object, e: any) {
-    // 强制触发元素选择
+  //   // 强制触发元素选择
-    state.updateSelect = Math.random()
+  //   state.updateSelect = Math.random()
-  },
+  // },
   // updateGuidelines(state: Type.Object, lines: any) {
   //   // 修改标尺线
   //   state.guidelines = { ...state.guidelines, ...lines }
   // },
-  setCropUuid(state: Type.Object, uuid: any) {
+  // setCropUuid(state: Type.Object, uuid: any) {
-    // 设置正在裁剪or编辑的组件
+  //   // 设置正在裁剪or编辑的组件
-    state.dCropUuid = uuid
+  //   state.dCropUuid = uuid
-  },
+  // },
   // setDraging(state: Type.Object, drag: boolean) {
   //   state.dDraging = drag
   // },