feat: 清空撤销和重做

src/assets/icons/undo.svg

@@ -1,6 +1,7 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="24" height="24" viewBox="0 0 48 48" fill="none"
+<svg width="24" height="24" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
-    xmlns="http://www.w3.org/2000/svg">
+    <g stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round">
-    <path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M11.2721 36.7279C14.5294 39.9853 19.0294 42 24 42C33.9411 42 42 33.9411 42 24C42 14.0589 33.9411 6 24 6C19.0294 6 14.5294 8.01472 11.2721 11.2721C9.61407 12.9301 6 17 6 17"/>
-    <path d="M6 9V17H14" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+        <path d="M6 9V17H14" />
+    </g>
 </svg>

src/components/webtopo-svgedit/components/center-panel/index.vue

@@ -158,7 +158,7 @@
   </div>
 </template>
 <script setup lang="ts">
-  import { computed, getCurrentInstance, reactive } from 'vue';
+  import { computed, getCurrentInstance, onMounted, reactive } from 'vue';
   import { useConfigStore } from '@/store/config';
   import { useGlobalStore } from '@/store/global';
   import {
@@ -673,6 +673,9 @@
       height: actual_bound.height * scale_y
     };
   };
+  onMounted(() => {
+    globalStore.setDoneJson([]);
+  });
 </script>
 <style lang="less" scoped>
   .canvas {

src/components/webtopo-svgedit/components/top-panel/index.vue

@@ -13,14 +13,28 @@
     </div>
     <div class="flex justify-between" style="width: calc(100% - 440px)">
       <div class="flex items-center">
-        <el-icon title="撤销" :size="20" :class="'icon-normal'" class="ml-20px">
+        <el-icon
+          title="撤销"
+          :size="20"
+          :class="`${
+            edit_private_store.getTopBtnUndoStatus ? 'icon-normal' : 'icon-disable'
+          } ml-20px`"
+          @click="() => edit_private_store.topUndoBtnClick()"
+        >
           <svg-analysis name="undo"></svg-analysis>
         </el-icon>
-        <el-icon title="重做" class="ml-5px" :class="'icon-disable'" :size="20">
+        <el-icon
+          title="重做"
+          :class="`${
+            edit_private_store.getTopBtnRedoStatus ? 'icon-normal' : 'icon-disable'
+          } ml-5px`"
+          :size="20"
+          @click="() => edit_private_store.topRedoBtnClick()"
+        >
           <svg-analysis name="redo"></svg-analysis>
         </el-icon>
         <el-divider direction="vertical"></el-divider>
-        <el-icon title="清空" class="icon-normal" :size="20">
+        <el-icon title="清空" class="icon-normal" :size="20" @click="onDeleteBtnClick">
           <svg-analysis name="delete"></svg-analysis>
         </el-icon>
         <el-divider direction="vertical"></el-divider>
@@ -66,10 +80,17 @@
   </div>
 </template>
 <script setup lang="ts">
+  import { useGlobalStore } from '@/store/global';
+  import { useEditPrivateStore } from '@/store/system';
   import { ElIcon, ElDivider } from 'element-plus';
   import SvgAnalysis from '../../../../components/svg-analysis/index.vue';
   import { useSvgEditLayoutStore } from '../../../../store/svgedit-layout';
   const svgEditLayoutStore = useSvgEditLayoutStore();
+  const globalStore = useGlobalStore();
+  const edit_private_store = useEditPrivateStore();
+  const onDeleteBtnClick = () => {
+    globalStore.setDoneJson([]);
+  };
 </script>
 <style scoped lang="less">
   .logoimg {

src/store/global/index.ts

@@ -12,6 +12,7 @@ import {
   IMouseInfo,
   IScaleInfo
 } from './types';
+import { useEditPrivateStore } from '../system';
 /**
  * 全局共享状态
  */
@@ -75,6 +76,22 @@ export const useGlobalStore = defineStore('global-store', {
       } else {
         this.done_json = objectDeepClone<IDoneJson[]>(done_json);
       }
+      const edit_private_store = useEditPrivateStore();
+      if (edit_private_store.is_record_history) {
+        if (
+          edit_private_store.history_nowindex + 1 <
+          edit_private_store.history_doneComponent.length
+        ) {
+          edit_private_store.history_doneComponent.splice(edit_private_store.history_nowindex + 1);
+        }
+        edit_private_store.history_doneComponent.push(objectDeepClone<IDoneJson[]>(this.done_json));
+        edit_private_store.history_nowindex = edit_private_store.history_doneComponent.length - 1;
+        if (edit_private_store.history_doneComponent.length > 10) {
+          edit_private_store.history_doneComponent.shift();
+          edit_private_store.history_nowindex = edit_private_store.history_doneComponent.length - 1;
+        }
+      }
+      edit_private_store.is_record_history = true;
     },
     setMouseInfo(mouse_info: IMouseInfo) {
       this.mouse_info = mouse_info;

src/store/system/index.ts

@@ -0,0 +1,54 @@
+import { defineStore } from 'pinia';
+import { useGlobalStore } from '../global';
+import { EditPrivateStoreState } from './types';
+
+/**
+ * 编辑器私有状态
+ */
+export const useEditPrivateStore = defineStore('edit-private-store', {
+  state: (): EditPrivateStoreState => {
+    return {
+      old_done_components: [], //记录预览之前的组件数据
+      history_doneComponent: [],
+      history_nowindex: 0,
+      is_record_history: true //是否需要记录当前状态，如果是操作的历史记录，则不需要记录
+    };
+  },
+  getters: {
+    getTopBtnUndoStatus(state) {
+      if (state.history_nowindex < 1) {
+        return false;
+      }
+      return true;
+    },
+    getTopBtnRedoStatus(state) {
+      if (state.history_nowindex + 1 == state.history_doneComponent.length) {
+        return false;
+      }
+      return true;
+    }
+  },
+  actions: {
+    topUndoBtnClick() {
+      console.log('撤销');
+      if (this.history_nowindex < 1) {
+        return;
+      }
+      const global_store = useGlobalStore();
+      // select_component_info.value = {};
+      this.is_record_history = false;
+      this.history_nowindex -= 1;
+      global_store.setDoneJson(this.history_doneComponent[this.history_nowindex]);
+    },
+    topRedoBtnClick() {
+      console.log('重做');
+      if (this.history_nowindex + 1 == this.history_doneComponent.length) {
+        return;
+      }
+      const global_store = useGlobalStore();
+      this.is_record_history = false;
+      this.history_nowindex += 1;
+      global_store.setDoneJson(this.history_doneComponent[this.history_nowindex]);
+    }
+  }
+});

src/store/system/types.ts

@@ -0,0 +1,8 @@
+import { IDoneJson } from '../global/types';
+
+export interface EditPrivateStoreState {
+  old_done_components: IDoneJson[];
+  history_doneComponent: IDoneJson[][];
+  history_nowindex: number;
+  is_record_history: boolean;
+}