rebuilt: history store to pinia

src/common/methods/addMouseWheel.ts

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

src/components/business/moveable/Moveable.vue

@@ -27,7 +27,7 @@ const {
 } = useSetupMapGetters(['dSelectWidgets', 'dActiveElement', 'activeMouseEvent', 'dWidgets', 'updateRect', 'updateSelect'])
 const controlStore = useControlStore()
 const { guidelines } = storeToRefs(useCanvasStore())
-const { showMoveable, showRotatable } = storeToRefs(controlStore)
+const { showMoveable, showRotatable, dAltDown } = storeToRefs(controlStore)
 
 let _target: string | null = null
 
@@ -153,7 +153,7 @@ watch(
   () => dSelectWidgets.value,
   (items) => {
     if (!moveable) return
-    const alt = store.getters.dAltDown
+    const alt = dAltDown.value
     // if (items.length > 1) {
     //   console.log('打开组合面板')
     // }

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

@@ -19,6 +19,8 @@ import {
 } from './rcMenuData'
 import { getTarget } from '@/common/methods/target'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters';
+import { storeToRefs } from 'pinia';
+import { useControlStore } from '@/pinia';
 
 const store = useStore()
 const menuListData = ref<TMenuItemData>({...menu})
@@ -26,7 +28,9 @@ const showMenuBg = ref<boolean>(false)
 const widgetMenu = ref<TWidgetItemData[]>({...widget})
 const pageMenu = ref<TWidgetItemData[]>({...page})
 
-const {dActiveElement, dAltDown, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dAltDown', 'dWidgets', 'dCopyElement'])
+const {dActiveElement, dWidgets, dCopyElement} = useSetupMapGetters(['dActiveElement', 'dWidgets', 'dCopyElement'])
+const { dAltDown } = storeToRefs(useControlStore())
+
 
 const styleObj = computed(() => {
   return {
@@ -52,7 +56,7 @@ async function mouseRightClick(e: MouseEvent) {
   if (type) {
     let uuid = target.getAttribute('data-uuid') // 设置选中元素
 
-    if (uuid !== '-1' && !dAltDown) {
+    if (uuid !== '-1' && !dAltDown.value) {
       let widget = dWidgets.value.find((item: any) => item.uuid === uuid)
       if (
         widget.parent !== '-1' && 

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

@@ -94,12 +94,12 @@ const controlStore = useControlStore()
 const { pageDesignCanvasId } = defineProps<TProps>()
 const {
   dWidgets,
-  dActiveElement, dSelectWidgets, dAltDown,
+  dActiveElement, dSelectWidgets,
   dHoverUuid
-} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets', 'dAltDown'])
+} = useSetupMapGetters(['dWidgets', 'dActiveElement', 'dHoverUuid', 'dSelectWidgets'])
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom, dPaddingTop, dScreen } = storeToRefs(useCanvasStore())
-const { dDraging, showRotatable } = storeToRefs(useControlStore())
+const { dDraging, showRotatable, dAltDown } = storeToRefs(useControlStore())
 
 
 let _dropIn: string | null = ''

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

@@ -32,7 +32,8 @@ import useConfirm from '@/common/methods/confirm'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import imgWaterFall from './components/imgWaterFall.vue'
 import { IGetTempListData } from '@/api/home'
-import {useControlStore, usePageStore, useUserStore} from '@/pinia'
+import {useControlStore, usePageStore, useUserStore, useHistoryStore} from '@/pinia'
+import { storeToRefs } from 'pinia'
 
 type TState = {
   loading: boolean
@@ -66,7 +67,8 @@ const state = reactive<TState>({
   searchKeyword: '',
 })
 
-const { tempEditing, dHistoryParams } = useSetupMapGetters(['tempEditing', 'dHistoryParams'])
+const { tempEditing } = useSetupMapGetters(['tempEditing'])
+const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 const pageOptions: TPageOptions = { page: 0, pageSize: 20, cate: 1 }
 const { cate, edit } = route.query

src/mixins/methods/dealWithCtrl.ts

@@ -7,6 +7,7 @@
  */
 import store from '@/store'
 import handlePaste from './handlePaste'
+import { useHistoryStore } from '@/pinia'
 
 export default function dealWithCtrl(e: any, _this: any) {
   switch (e.keyCode) {
@@ -77,13 +78,14 @@ function paste() {
  * 撤销
  */
 function undo(shiftKey: any) {
+  const historyStore = useHistoryStore()
   if (shiftKey) {
-    if (!(store.getters.dHistoryParams.index === store.getters.dHistoryParams.length - 1)) {
+    if (!(historyStore.dHistoryParams.index === historyStore.dHistoryParams.length - 1)) {
-      // this.handleHistory('redo')
+      historyStore.handleHistory("redo")
-      store.dispatch('handleHistory', 'redo')
+      // store.dispatch('handleHistory', 'redo')
     }
-  } else if (!(store.getters.dHistoryParams.index === -1 || (store.getters.dHistoryParams === 0 && store.getters.dHistoryParams.length === 10))) {
+  } else if (!(historyStore.dHistoryParams.index === -1 || (historyStore.dHistoryParams.index === 0 && historyStore.dHistoryParams.length === 10))) {
-    // this.handleHistory('undo')
+    historyStore.handleHistory("undo")
-    store.dispatch('handleHistory', 'undo')
+    // store.dispatch('handleHistory', 'undo')
   }
 }

src/mixins/move.ts

@@ -5,6 +5,7 @@
  * @LastEditors: ShawnPhang <site: book.palxp.com>
  * @LastEditTime: 2023-07-31 09:31:52
  */
+import { useControlStore } from '@/pinia'
 import store from '@/store'
 
 const move = {
@@ -49,7 +50,8 @@ const move = {
 const moveInit = {
   methods: {
     initmovement(e: MouseEvent) {
-      if (!store.getters.dAltDown) {
+      const controlStore = useControlStore()
+      if (!controlStore.dAltDown) {
         // 设置mouseevent给moveable初始
         // 在组合操作时排除
         store.commit('setMouseEvent', e)

src/mixins/shortcuts.ts

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

src/pinia/base/index.ts

@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
 // import actions from './actions'
 // import _config from '@/config'
@@ -46,5 +46,7 @@ const useBaseStore = defineStore<'base', TStoreBaseState, {}, TUserAction>('base
   }
 })
 
+export type TBaseStore = Store<'base', TStoreBaseState, {}, TUserAction>
+
 export default useBaseStore
 

src/pinia/base/user.ts

@@ -6,7 +6,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from "pinia"
+import { Store, defineStore } from "pinia"
 
 type TUserStoreState = {
   /** 登录状态 */
@@ -56,4 +56,6 @@ const useUserStore = defineStore<'userStore', TUserStoreState, {}, TUserAction>(
   }
 })
 
+export type TUserStore = Store<'userStore', TUserStoreState, {}, TUserAction>
+
 export default useUserStore

src/pinia/design/canvas/index.ts

@@ -7,7 +7,7 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
 type TScreeData = {
   /** 记录编辑界面的宽度 */
@@ -21,7 +21,7 @@ type TGuidelinesData = {
   horizontalGuidelines: number[]
 }
 
-type TCanvasStore = {
+type TCanvasState = {
   /** 画布缩放百分比 */
   dZoom: number
   /** 画布垂直居中修正值 */
@@ -33,10 +33,10 @@ type TCanvasStore = {
 }
 
 type TStoreGetter = {
-  dZoom: (state: TCanvasStore) => number
+  dZoom: (state: TCanvasState) => number
-  dPaddingTop: (state: TCanvasStore) => number
+  dPaddingTop: (state: TCanvasState) => number
-  dScreen: (state: TCanvasStore) => TScreeData
+  dScreen: (state: TCanvasState) => TScreeData
-  guidelines: (state: TCanvasStore) => TGuidelinesData
+  guidelines: (state: TCanvasState) => TGuidelinesData
 }
 
 type TStoreAction = {
@@ -50,7 +50,8 @@ type TStoreAction = {
   updateGuidelines: (lines: TGuidelinesData) => void
 }
 
-export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreAction>("canvasStore", {
+/** 画布全局设置 */
+const CanvasStore = defineStore<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>("canvasStore", {
   state: () => ({
     dZoom: 0, // 画布缩放百分比
     dPaddingTop: 0, // 画布垂直居中修正值
@@ -94,3 +95,7 @@ export default defineStore<"canvasStore", TCanvasStore, TStoreGetter, TStoreActi
     }
   }
 })
+
+export type TCanvasStore = Store<"canvasStore", TCanvasState, TStoreGetter, TStoreAction>
+
+export default CanvasStore

src/pinia/design/control/index.ts

@@ -1,4 +1,13 @@
-import { defineStore } from "pinia";
+
+/*
+ * @Author: Jeremy Yu
+ * @Date: 2024-03-18 21:00:00
+ * @Description:
+ * @LastEditors: Jeremy Yu <https://github.com/JeremyYu-cn>
+ * @LastEditTime: 2024-03-18 21:00:00
+ */
+
+import { Store, defineStore } from "pinia";
 
 type TControlState = {
   /** 是否正在移动组件 */
@@ -13,6 +22,8 @@ type TControlState = {
   showMoveable: boolean
   /** 是否显示moveable的旋转按钮 */
   showRotatable: boolean
+  /** 记录是否按下alt键 / 或ctrl */
+  dAltDown: boolean
 }
 
 type TControlAction = {
@@ -22,9 +33,11 @@ type TControlAction = {
   showRefLine: (isRefLine: boolean) => void
   setShowMoveable: (isShowMoveable: boolean) => void
   setShowRotatable: (isShowRotatable: boolean) => void
+  updateAltDown: (isPressAltDown: boolean) => void
 }
 
-export default defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
+/** 全局控制配置 */
+const ControlStore =  defineStore<"controlStore", TControlState, {}, TControlAction>("controlStore", {
   state: () => ({
     dMoving: false, // 是否正在移动组件
     dDraging: false, // 是否正在抓取组件
@@ -32,6 +45,7 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
     dShowRefLine: true, // 是否显示参考线
     showMoveable: false, // 全局控制选择框的显示
     showRotatable: true, // 是否显示moveable的旋转按钮
+    dAltDown: false, // 记录是否按下alt键 / 或ctrl
   }),
   getters: {},
   actions: {
@@ -57,5 +71,14 @@ export default defineStore<"controlStore", TControlState, {}, TControlAction>("c
     setShowRotatable(e: boolean) {
       this.showRotatable = e
     },
+    /** TODO 组合操作 */
+    updateAltDown(e: boolean) {
+      this.dAltDown = e
+      console.log('控制组合按键, 成组功能为: realCombined')
+    }
   }
 })
+
+export type TControlStore = Store<"controlStore", TControlState, {}, TControlAction>
+
+export default ControlStore

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

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

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

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

src/pinia/design/history/index.ts

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

src/pinia/design/page/index.ts

@@ -6,9 +6,9 @@
  * @LastEditTime: 2024-03-18 21:00:00
  */
 
-import { defineStore } from 'pinia'
+import { Store, defineStore } from 'pinia'
 
-export type TPageStore = {
+export type TPageState = {
   name: string
   type: string
   uuid: string
@@ -39,21 +39,22 @@ export type TPageStore = {
 }
 
 type TPageGetter = {
-  dPage(state: TPageStore): TPageStore
+  dPage(state: TPageState): TPageState
 }
 
 type TPageActions = {
   /** 更新Page数据 */
-  updatePageData<T extends keyof TPageStore>(data: {
+  updatePageData<T extends keyof TPageState>(data: {
     key: T
-    value: TPageStore[T]
+    value: TPageState[T]
     pushHistory?: boolean
   }): void
   /** 设置dPage */
-  setDPage(data: TPageStore): void
+  setDPage(data: TPageState): void
 }
 
-export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("pageStore", {
+/** 页面全局配置 */
+const PageStore = defineStore<"pageStore", TPageState, TPageGetter, TPageActions>("pageStore", {
   state: () => ({
     name: '背景页面',
     type: 'page',
@@ -82,7 +83,7 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
   actions: {
     /** 更新Page数据 */
     updatePageData({ key, value, pushHistory }) {
-      const data = this as TPageStore
+      const data = this as TPageState
       if (data[key] !== value || pushHistory) {
         data[key] = value
         // 画布修改先不压入历史栈，因为替换模板后会重复压栈
@@ -90,12 +91,16 @@ export default defineStore<"pageStore", TPageStore, TPageGetter, TPageActions>("
       }
     },
     /** 设置dPage */
-    setDPage(data: TPageStore) {
+    setDPage(data: TPageState) {
       const cur = this as Record<string, any>
-      const keys = Object.keys(data) as (keyof TPageStore)[];
+      const keys = Object.keys(data) as (keyof TPageState)[];
       keys.forEach(val => {
         cur[val] = data[val]
       })
     }
   }
 })
+
+export type TPageStore = Store<"pageStore", TPageState, TPageGetter, TPageActions>
+
+export default PageStore

src/pinia/index.ts

@@ -11,11 +11,13 @@ import useUserStore from "./base/user";
 import usePageStore from "./design/page"
 import useCanvasStore from "./design/canvas"
 import useControlStore from './design/control'
+import useHistoryStore from './design/history'
 
 export {
   useBaseStore,
   useUserStore,
   usePageStore,
   useCanvasStore,
-  useControlStore
+  useControlStore,
+  useHistoryStore,
 }

src/store/modules/design/actions.ts

@@ -1,8 +1,8 @@
 // import { nextTick } from 'vue'
 import { customAlphabet } from 'nanoid/non-secure'
 const nanoid = customAlphabet('1234567890abcdef', 12)
-import pushHistory from './methods/pushHistory'
+// import pushHistory from './methods/pushHistory'
-import handleHistory from './methods/handleHistory'
+// import handleHistory from './methods/handleHistory'
 
 export default {
   /**
@@ -10,19 +10,19 @@ export default {
    * 修改数据、移动完成后都会自动保存
    * 同时会保存当前激活的组件的uuid，方便撤回时自动激活
    */
-  pushHistory(store: any, msg: string) {
+  // pushHistory(store: any, msg: string) {
-    pushHistory(store, msg)
+  //   pushHistory(store, msg)
-  },
+  // },
   /**
    * 操作历史记录
    * action为undo表示撤销
    * action为redo表示重做
    */
-  handleHistory(store: any, action: any) {
+  // handleHistory(store: any, action: any) {
-    handleHistory(store, action)
+  //   handleHistory(store, action)
-    // 激活组件默认为page
+  //   // 激活组件默认为page
-    store.state.dActiveElement = store.state.dPage
+  //   store.state.dActiveElement = store.state.dPage
-  },
+  // },
   
   // updateZoom(store, zoom) {
   //   store.state.dZoom = zoom
@@ -523,21 +523,21 @@ export default {
     // const tag = store.state.dPage.tag
     // store.state.dPage.tag = tag === 0 ? 0.01 : 0
   },
-  pushColorToHistory(store, color) {
+  // pushColorToHistory(store, color) {
-    const history = store.state.dColorHistory
+  //   const history = store.state.dColorHistory
-    // 如果已经存在就提到前面来，避免重复
+  //   // 如果已经存在就提到前面来，避免重复
-    const index = history.indexOf(color)
+  //   const index = history.indexOf(color)
-    if (index !== -1) {
+  //   if (index !== -1) {
-      history.splice(index, 1)
+  //     history.splice(index, 1)
-    }
+  //   }
-    // 最多保存3种颜色
+  //   // 最多保存3种颜色
-    if (history.length === 4) {
+  //   if (history.length === 4) {
-      history.splice(history.length - 1, 1)
+  //     history.splice(history.length - 1, 1)
-    }
+  //   }
-    // 把最新的颜色放在头部
+  //   // 把最新的颜色放在头部
-    const head = [color]
+  //   const head = [color]
-    store.state.dColorHistory = head.concat(history)
+  //   store.state.dColorHistory = head.concat(history)
-  },
+  // },
   updateHoverUuid(store, uuid) {
     store.state.dHoverUuid = uuid
   },
@@ -614,10 +614,10 @@ export default {
     return page
   },
   // TODO 组合操作
-  updateAltDown(store, value) {
+  // updateAltDown(store, value) {
-    store.state.dAltDown = value
+  //   store.state.dAltDown = value
-    console.log('控制组合按键, 成组功能为: realCombined')
+  //   console.log('控制组合按键, 成组功能为: realCombined')
-  },
+  // },
   realCombined(store: any) {
     const selectWidgets = store.state.dSelectWidgets
     if (selectWidgets.length > 1) {

src/store/modules/design/index.ts

@@ -61,16 +61,16 @@ const all = {
     //   record: {},
     // },
     dWidgets: [], // 已使用的组件
-    dHistory: [], // 记录历史操作（保存整个画布的json数据）
+    // dHistory: [], // 记录历史操作（保存整个画布的json数据）
-    dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
+    // dActiveUuidHistory: [], // 记录历史操作对应的激活的组件的uuid
-    dPageHistory: [], // 记录历史操作对应的page
+    // dPageHistory: [], // 记录历史操作对应的page
-    dHistoryParams: {
+    // dHistoryParams: {
-      index: -1,
+    //   index: -1,
-      length: 0,
+    //   length: 0,
-      maxLength: 20,
+    //   maxLength: 20,
-    },
+    // },
-    dColorHistory: [], // 记录历史选择的颜色
+    // dColorHistory: [], // 记录历史选择的颜色
-    dAltDown: false, // 记录是否按下alt键 / 或ctrl
+    // dAltDown: false, // 记录是否按下alt键 / 或ctrl
     dSelectWidgets: [], // 记录多选的组件
     dGroupJson: {}, // 组合的json数据
     selectItem: { data: null }, // 记录当前选择的元素, data
@@ -120,12 +120,12 @@ const all = {
     dWidgets(state) {
       return state.dWidgets
     },
-    dHistoryParams(state) {
+    // dHistoryParams(state) {
-      return state.dHistoryParams
+    //   return state.dHistoryParams
-    },
+    // },
-    dColorHistory(state) {
+    // dColorHistory(state) {
-      return state.dColorHistory
+    //   return state.dColorHistory
-    },
+    // },
     dHoverUuid(state) {
       return state.dHoverUuid
     },
@@ -138,9 +138,9 @@ const all = {
     dCopyElement(state) {
       return state.dCopyElement
     },
-    dAltDown(state) {
+    // dAltDown(state) {
-      return state.dAltDown
+    //   return state.dAltDown
-    },
+    // },
     dSelectWidgets(state) {
       return state.dSelectWidgets
     },
@@ -171,12 +171,12 @@ const all = {
     dCropUuid(state: any) {
       return state.dCropUuid
     },
-    dPageHistory(state: any) {
+    // dPageHistory(state: any) {
-      return state.dPageHistory
+    //   return state.dPageHistory
-    },
+    // },
-    dHistory(state: any) {
+    // dHistory(state: any) {
-      return state.dHistory
+    //   return state.dHistory
-    },
+    // },
     // dDragInitData(state: any) {
     //   return state.dDragInitData
     // },

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

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

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

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

src/views/Index.vue

@@ -72,7 +72,7 @@ import { useSetupMapGetters } from '@/common/hooks/mapGetters'
 import { useRoute } from 'vue-router'
 import { wGroupSetting } from '@/components/modules/widgets/wGroup/groupSetting'
 import { storeToRefs } from 'pinia'
-import { useCanvasStore, usePageStore } from '@/pinia'
+import { useCanvasStore, useControlStore, usePageStore, useHistoryStore } from '@/pinia'
 
 type TState = {
   style: CSSProperties
@@ -84,10 +84,12 @@ type TState = {
 }
 
 const {
-  dActiveElement, dHistoryParams, dCopyElement
+  dActiveElement, dCopyElement
-} = useSetupMapGetters(['dActiveElement', 'dHistoryParams', 'dCopyElement'])
+} = useSetupMapGetters(['dActiveElement', 'dCopyElement'])
+const historyStore = useHistoryStore()
 const { dPage } = storeToRefs(usePageStore())
 const { dZoom } = storeToRefs(useCanvasStore())
+const { dHistoryParams } = storeToRefs(useHistoryStore())
 
 
 const state = reactive<TState>({
@@ -104,10 +106,11 @@ const state = reactive<TState>({
 const optionsRef = ref<typeof HeaderOptions | null>(null)
 const zoomControlRef = ref<typeof zoomControl | null>(null)
 const store = useStore()
+const controlStore = useControlStore()
 const route = useRoute()
 
 const beforeUnload = function (e: Event): any {
-  if (store.getters.dHistoryParams.length > 0) {
+  if (dHistoryParams.value.length > 0) {
     const confirmationMessage: string = '系统不会自动保存您未修改的内容';
     (e || window.event).returnValue = (confirmationMessage as any) // Gecko and Trident
     return confirmationMessage // Gecko and WebKit
@@ -129,7 +132,7 @@ defineExpose({
 const undoable = computed(() => {
   return !(
     dHistoryParams.value.index === -1 || 
-    (dHistoryParams.value === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
+    (dHistoryParams.value.index === 0 && dHistoryParams.value.length === dHistoryParams.value.maxLength))
 })
 
 const redoable = computed(() => {
@@ -160,22 +163,23 @@ onMounted(() => {
   // initGroupJson(JSON.stringify(wGroup.setting))
   window.addEventListener('scroll', fixTopBarScroll)
   // window.addEventListener('click', this.clickListener)
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadData()
 })
 
 onBeforeUnmount(() => {
   window.removeEventListener('scroll', fixTopBarScroll)
   // window.removeEventListener('click', this.clickListener)
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instanceFn, dealCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instanceFn, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
     // ...mapActions(['selectWidget', 'initGroupJson', 'handleHistory']),
 
-function handleHistory(data: string) {
+function handleHistory(data: "undo" | "redo") {
-  store.dispatch('handleHistory', data)
+  historyStore.handleHistory(data)
+  // store.dispatch('handleHistory', data)
 }
 
 function changeLineGuides() {

src/views/Psd.vue

@@ -187,15 +187,15 @@ let checkCtrl: number | undefined
 
 onMounted(() => {
   const instance = getCurrentInstance()
-  document.addEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.addEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
-  document.addEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.addEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   loadJS()
 })
 
 onBeforeMount(() => {
   const instance = getCurrentInstance()
-  document.removeEventListener('keydown', handleKeydowm(store, checkCtrl, instance, dealCtrl), false)
+  document.removeEventListener('keydown', handleKeydowm(controlStore, checkCtrl, instance, dealCtrl), false)
-  document.removeEventListener('keyup', handleKeyup(store, checkCtrl), false)
+  document.removeEventListener('keyup', handleKeyup(controlStore, checkCtrl), false)
   document.oncontextmenu = null
 })
 // ...mapActions(['selectWidget']),

src/views/components/HeaderOptions.vue

@@ -40,7 +40,7 @@ import _config from '@/config'
 import useConfirm from '@/common/methods/confirm'
 // import wGroup from '@/components/modules/widgets/wGroup/wGroup.vue'
 import { useSetupMapGetters } from '@/common/hooks/mapGetters'
-import { useControlStore, usePageStore, useUserStore } from '@/pinia/index'
+import { useControlStore, useHistoryStore, usePageStore, useUserStore } from '@/pinia/index'
 import { storeToRefs } from 'pinia'
 
 type TProps = {
@@ -66,12 +66,13 @@ const store = useStore()
 const userStore = useUserStore()
 const canvasImage = ref<typeof SaveImage | null>(null)
 const {
-  dWidgets, tempEditing, dHistory, dPageHistory
+  dWidgets, tempEditing
-} = useSetupMapGetters(['dWidgets', 'tempEditing', 'dHistory', 'dPageHistory'])
+} = useSetupMapGetters(['dWidgets', 'tempEditing'])
 const pageStore = usePageStore()
 const controlStore = useControlStore()
 
 const { dPage } = storeToRefs(pageStore)
+const { dHistory, dPageHistory } = storeToRefs(useHistoryStore())
 
 
 const state = reactive<TState>({