Merge pull request #118 from palxiao/feature-vue3

Feature vue3

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

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

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

@@ -13,10 +13,10 @@ import { proxyToObject } from "@/utils/utils"
 /** push操作历史记录 */
 export function pushHistory(store: THistoryStore, msg: string = "") {
   const pageStore = usePageStore()
-  const selectStore = useWidgetStore()
+  const widgetStore = useWidgetStore()
   console.log('history压栈', '来源: ' + msg)
   // 如果有上一次记录，并且与新纪录相同，那么不继续操作
-  if (store.dHistory[history.length - 1] && store.dHistory[history.length - 1] === JSON.stringify(selectStore.dWidgets)) {
+  if (store.dHistory[store.dHistory.length - 1] && store.dHistory[store.dHistory.length - 1] === JSON.stringify(widgetStore.dWidgets)) {
     return
   }
   if (store.dHistoryParams.index < history.length - 1) {
@@ -24,13 +24,13 @@ export function pushHistory(store: THistoryStore, msg: string = "") {
     const len = history.length - index
     store.dHistory.splice(index, len)
     store.dPageHistory.splice(index, len)
-    store.dHistoryParams.length = history.length
+    store.dHistoryParams.length = store.dHistory.length
-    store.dHistoryParams.index = history.length - 1
+    store.dHistoryParams.index = store.dHistory.length - 1
   }
-  store.dHistory.push(JSON.stringify(selectStore.dWidgets))
+  store.dHistory.push(JSON.stringify(widgetStore.dWidgets))
   store.dPageHistory.push(JSON.stringify(proxyToObject(pageStore.dPage)))
-  store.dHistoryParams.index = history.length - 1
+  store.dHistoryParams.index = store.dHistory.length - 1
-  store.dHistoryParams.length = history.length
+  store.dHistoryParams.length = store.dHistory.length
 }
 
 /** 添加颜色选择历史记录 */

src/store/design/history/index.ts

@@ -64,11 +64,11 @@ const HistoryStore = defineStore<"historyStore", THistoryState, {}, THistoryActi
       pushHistory(this, msg)
     },
     handleHistory(action) {
-      const selectStore = useWidgetStore()
+      const widgetStore = useWidgetStore()
       const pageStore = usePageStore()
       handleHistory(this, action)
       // 激活组件默认为page
-      selectStore.dActiveElement = pageStore.dPage
+      widgetStore.setdActiveElement(pageStore.dPage)
     },
     pushColorToHistory(color) {
       pushColorToHistory(this, color)

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

@@ -12,15 +12,16 @@ import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
 
 
-export function addGroup(store: TWidgetStore, group: TdWidgetData[]) {
+export function addGroup(store: TWidgetStore, group: TdWidgetData[] | TdWidgetData) {
   const historyStore = useHistoryStore()
   const canvasStore = useCanvasStore()
   let parent: TdWidgetData | null = null
-  group.forEach((item) => {
+  const tmpGroup: TdWidgetData[] = !Array.isArray(group) ? [group] : group
+  tmpGroup.forEach((item) => {
     item.uuid = nanoid() // 重设id
     item.type === 'w-group' && (parent = item) // 找出父组件
   })
-  group.forEach((item) => {
+  tmpGroup.forEach((item) => {
     !item.isContainer && parent && (item.parent = parent.uuid) // 重设父id
     item.text && (item.text = decodeURIComponent(item.text))
     store.dWidgets.push(item)

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

@@ -7,7 +7,7 @@
  */
 
 import { useCanvasStore, useControlStore, usePageStore } from "@/store"
-import { TWidgetStore } from ".."
+import { TWidgetStore, TdWidgetData } from ".."
 
 export type TInidDMovePayload = {
   startX: number
@@ -123,3 +123,7 @@ export function setDropOver(store: TWidgetStore, uuid: string) {
 export function setMouseEvent(state: TWidgetStore, e: MouseEvent | null) {
   state.activeMouseEvent = e
 }
+
+export function setdActiveElement(state: TWidgetStore, data: TdWidgetData) {
+  state.dActiveElement = data
+}

src/store/design/widget/index.ts

@@ -7,7 +7,7 @@
  */
 
 import { Store, defineStore } from "pinia";
-import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, updateGroupSize, updateHoverUuid } from "./actions";
+import { TInidDMovePayload, TMovePayload, dMove, initDMove, setDropOver, setMouseEvent, setdActiveElement, 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";
@@ -117,6 +117,7 @@ type TAction = {
   setWidgetStyle: (data: TsetWidgetStyleData) => void
   setDWidgets: (data: TdWidgetData[]) => void
   setMouseEvent: (e: MouseEvent | null) => void
+  setdActiveElement: (data: TdWidgetData) => void
 }
 
 const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("widgetStore", {
@@ -175,7 +176,8 @@ const WidgetStore = defineStore<"widgetStore", TWidgetState, TGetter, TAction>("
     resize(data) { resize(this, data) },
     setWidgetStyle(data) { setWidgetStyle(this, data) },
     setDWidgets(data) { setDWidgets(this, data) },
-    setMouseEvent(event) { setMouseEvent(this, event) }
+    setMouseEvent(event) { setMouseEvent(this, event) },
+    setdActiveElement(data) { setdActiveElement(this, data) },
   }
 })
 

src/views/components/HeaderOptions.vue

@@ -203,8 +203,7 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
     const data = JSON.parse(content)
     state.stateBollean = !!_state
     state.title = title
-    // store.commit('setShowMoveable', false) // 清理掉上一次的选择框
+    controlStore.setShowMoveable(false) // 清理掉上一次的选择框
-    controlStore.setShowMoveable(false)
     
     // this.$store.commit('setDWidgets', [])
     if (type == 1) {
@@ -212,18 +211,12 @@ async function load(id: number, tempId: number, type: number, cb: () => void) {
       dPage.value.width = width
       dPage.value.height = height
       widgetStore.addGroup(data)
-      // store.dispatch('addGroup', data)
-      // addGroup(data)
     } else {
       pageStore.setDPage(data.page)
-      // store.commit('setDPage', data.page)
       id ? widgetStore.setDWidgets(data.widgets) : widgetStore.setTemplate(data.widgets)
-      // id ? store.commit('setDWidgets', data.widgets) : store.dispatch('setTemplate', data.widgets)
     }
     cb()
     historyStore.pushHistory('请求加载load')
-    // store.dispatch('pushHistory', '请求加载load')
-    // pushHistory('请求加载load')
   }
 }