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