From 9a365dd1a118b18ee405da3331aedcb6091591ee Mon Sep 17 00:00:00 2001
From: lhj <403133128@qq.com>
Date: Sun, 10 Nov 2024 20:37:55 +0800
Subject: [PATCH] =?UTF-8?q?add:=E5=9F=BA=E6=9C=AC=E5=AE=9E=E7=8E=B0?=
 =?UTF-8?q?=E6=92=A4=E9=94=80=E3=80=81=E6=81=A2=E5=A4=8D=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                 |  1 +
 preview/views/MainView.vue   |  6 ++--
 src/stores/useSchemeStore.ts | 64 +++++++++++++++++++++++++++++++-----
 3 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/package.json b/package.json
index 3139ecc..03dc273 100644
--- a/package.json
+++ b/package.json
@@ -12,6 +12,7 @@
   "dependencies": {
     "@arco-plugins/vite-vue": "^1.4.5",
     "@vueuse/core": "^10.11.0",
+    "js-sha256": "^0.11.0",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "lsp-uuid": "^3.2.0",
diff --git a/preview/views/MainView.vue b/preview/views/MainView.vue
index 629d4f9..0f5f31d 100644
--- a/preview/views/MainView.vue
+++ b/preview/views/MainView.vue
@@ -5,12 +5,12 @@
       <div class="web">pc</div>
       <div class="btn">
         <a-space>
-          <a-button  @click="">
+          <a-button :disabled="!store.canUndo" @click="store.undo">
             <template #icon>
               <icon-left />
             </template>
           </a-button>
-          <a-button  @click="">
+          <a-button :disabled="!store.canRedo" @click="store.redo">
             <template #icon>
               <icon-right />
             </template>
@@ -112,7 +112,7 @@ store.$onAction(
        onError, // action 抛出或拒绝的钩子
      }) => {
       after((result) => {
-        console.log(`store action-${name}回调后：` + result);
+        // console.log(`store action-${name}回调后：` + result);
       })
       // 如果 action 抛出或返回一个拒绝的 promise，这将触发
       onError((error) => {
diff --git a/src/stores/useSchemeStore.ts b/src/stores/useSchemeStore.ts
index 46df15e..fc69647 100644
--- a/src/stores/useSchemeStore.ts
+++ b/src/stores/useSchemeStore.ts
@@ -1,5 +1,6 @@
 import { defineStore } from 'pinia';
 import { IPageComponent } from '@/type/IPageComponent';
+import sha256 from 'js-sha256';
 
 // 缓存对象
 const idToObjectCache = new Map<string, IPageComponent>();
@@ -24,18 +25,31 @@ function findObjectById(obj, targetId) {
     return null; // 如果没有找到，则返回null
 }
 
+const HISTORY_LENGTH = 20; // 默认队列长度
+
 export const useSchemeStore = defineStore('scheme', {
     state: () => ({
         components: [],
         previewScheme: [],
-        nowComponentsData: {}
+        nowComponentsData: {},
+        history: Array(HISTORY_LENGTH).fill(null), // 循环队列
+        currentIndex: -1, // 当前索引
+        currentLength: 0, // 当前队列中有效元素的数量
+        currentHash: '', // 当前状态的哈希值
     }),
+    getters: {
+        canUndo: (state) => state.currentIndex >= 0,
+        canRedo: (state) => state.currentIndex < state.currentLength - 1,
+    },
     actions: {
         initPreviewScheme(value) {
             this.previewScheme = value;
             this.nowComponentsData = value[0];
-            // 清空缓存
             idToObjectCache.clear();
+            this.history.fill(null); // 初始化队列
+            this.currentIndex = -1;
+            this.currentLength = 0;
+            this.currentHash = ''; // 初始化当前哈希值
         },
         initComponents(value) {
             this.components = value;
@@ -53,14 +67,46 @@ export const useSchemeStore = defineStore('scheme', {
             return obj;
         },
         updateScheme(id, updates) {
-            console.log("更新数据",JSON.stringify(updates));
-            const obj = this.getSchemeObj(id);
-            console.log("更新目标",JSON.stringify(obj));
+            const currentStateHash = this.currentHash;
+            const newObj = this.getSchemeObj(id);
+            if (newObj) {
+                Object.assign(newObj, updates);
+            }
+            const newStateHash = sha256(JSON.stringify(this.previewScheme));
 
-            if (obj) {
-                // 更新对象属性
-                Object.assign(obj, updates);
-                console.log("更新后目标",JSON.stringify(obj));
+            // 如果新状态与当前状态不同，才保存到历史记录中
+            if (currentStateHash !== newStateHash) {
+                this.currentHash = newStateHash;
+                // 如果不是最新的状态，则清除之后的所有状态
+                if (this.currentIndex < this.currentLength - 1) {
+                    this.history.fill(null, this.currentIndex + 1);
+                    this.currentLength = this.currentIndex + 1;
+                }
+                this.currentIndex++;
+                this.currentLength = this.currentIndex + 1;
+                this.history[this.currentIndex % HISTORY_LENGTH] = JSON.parse(JSON.stringify(this.previewScheme));
+            }
+        },
+        undo() {
+            if (this.canUndo) {
+                this.currentIndex--;
+                const prevState = this.history[this.currentIndex % HISTORY_LENGTH];
+                if (prevState) {
+                    this.previewScheme = prevState;
+                    this.nowComponentsData = this.previewScheme[0];
+                    this.currentHash = sha256(JSON.stringify(this.previewScheme));
+                }
+            }
+        },
+        redo() {
+            if (this.canRedo) {
+                this.currentIndex++;
+                const nextState = this.history[this.currentIndex % HISTORY_LENGTH];
+                if (nextState) {
+                    this.previewScheme = nextState;
+                    this.nowComponentsData = this.previewScheme[0];
+                    this.currentHash = sha256(JSON.stringify(this.previewScheme));
+                }
             }
         }
     }