fix:修复历史回退的bug

src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

@@ -154,6 +154,7 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
       const { store, actions } = useEditor();
       function changeVal(e: { dataIndex: string; value: any }) {
         actions.updateCompData(store.currComp, e.dataIndex, e.value);
+        actions.submitUpdate();
       }
 
       return () => {

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -1,10 +1,9 @@
-import { CompObject } from "@/modules/editor/controllers/SelectCtrl/compObj";
 import { TreeToolbars } from "@/modules/editor/objects/Toolbars";
 import { css } from "@linaria/core";
 import { Image } from "@queenjs/ui";
 import { useReactive } from "@queenjs/use";
 import { Tree } from "ant-design-vue";
-import { defineComponent, watch } from "vue";
+import { defineComponent, nextTick, watch } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
@@ -47,34 +46,34 @@ export const CompTree = defineComponent({
     watch(
       () => store.currCompId,
       () => {
-        state.expandedKeys = store.currCompId
-          ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
-          : [];
+        // expandedKeys需要等Tree的内部状态更新后再赋值
+        nextTick(() => {
+          state.expandedKeys = store.currCompId
+            ? helper.getCompTrees(store.currCompId).map((comp) => comp.id)
+            : [];
+        });
       }
     );
 
-    return () => {
-      return (
-        <Tree
-          class={treeStyle}
-          treeData={state.treeData}
-          v-model={[state.expandedKeys, "expandedKeys"]}
-          selectedKeys={[store.currCompId]}
-          blockNode={true}
-          onSelect={(ids) => {
-            const id =
-              (ids[0] as string) || state.expandedKeys.at(-2) || "root";
-            actions.pickComp(id);
-          }}
-        >
-          {{
-            title: (data: any) => {
-              return <CompNode title={data.title} id={data.key} />;
-            },
-          }}
-        </Tree>
-      );
-    };
+    return () => (
+      <Tree
+        class={treeStyle}
+        treeData={state.treeData}
+        v-model={[state.expandedKeys, "expandedKeys"]}
+        selectedKeys={[store.currCompId]}
+        blockNode={true}
+        onSelect={(ids) => {
+          const id = (ids[0] as string) || state.expandedKeys.at(-2) || "root";
+          actions.pickComp(id);
+        }}
+      >
+        {{
+          title: (data: any) => {
+            return <CompNode title={data.title} id={data.key} />;
+          },
+        }}
+      </Tree>
+    );
   },
 });
 
@@ -101,11 +100,11 @@ const CompNode = defineComponent({
           <Image src={thumbnail} size={240} />
           <span class="w-0 flex-1 truncate">{props.title}</span>
           <span class="space-x-4px">
-            {actions.map((action) =>
+            {actions.map((action, i) =>
               action.getVisible.call(editor, comp) ? (
                 <action.component
+                  key={i}
                   class="p-4px"
-                  key={comp.id}
                   value={action.getValue?.(comp)}
                   onClick={(e: MouseEvent) => {
                     e.stopPropagation();

src/modules/editor/controllers/HistoryCtrl/HistoryController.ts

@@ -51,14 +51,13 @@ export class HistoryController {
     if (!this.state.canUndo) return;
     this.submit();
     this.queue[this.state.opIndex--].undo();
-    console.log(this)
   }
 
   redo() {
     if (!this.state.canRedo) return;
-    this.submit();
+    this.cacheGroupAction.undo();
+    this.cacheGroupAction.actions.length = 0;
     this.queue[++this.state.opIndex].redo();
-    console.log(this)
   }
 
   //清除操作
@@ -93,7 +92,8 @@ export class GroupAction {
     if (
       options?.combine &&
       lastAction?.root === action.root &&
-      lastAction?.path === action.path
+      lastAction?.path === action.path &&
+      lastAction?.type === action.type
     ) {
       action.oldValue = lastAction.oldValue;
       this.actions[this.actions.length - 1] = action;

src/modules/editor/controllers/HistoryCtrl/index.ts

@@ -1,11 +1,13 @@
 import { AnyFun } from "queenjs/typing";
 import { EditorModule } from "../../module";
 import { Action, HistoryController } from "./HistoryController";
+import { get } from "lodash";
 
 export class HistoryCtrl {
   history: HistoryController;
   historyActionDoing = false;
   historyCombine = false;
+  safeList = ["layout.size"];
 
   constructor(protected module: EditorModule, historyTotal = 50) {
     this.history = new HistoryController();
@@ -20,8 +22,21 @@ export class HistoryCtrl {
     oldValue: any
   ) {
     if (this.historyActionDoing) {
+      if (
+        type === "set" && 
+        !this.safeList.some((str) => paths.slice(0, -1).join(".").includes(str))
+      ) {
+        const parent = paths.length > 1 ? get(root, paths.slice(0, -1)) : root;
+        if (parent instanceof Array) {
+          console.warn(
+            `操作警告[set:${paths.join(
+              "."
+            )}],应将数组整体替换赋值,不要操作原数组对象`
+          );
+        }
+      }
       const action = new Action(type, root, paths.join("."), value, oldValue);
-      this.history.record(action, {combine: this.historyCombine});
+      this.history.record(action, { combine: this.historyCombine });
     }
   }
 

src/modules/editor/module/stores/index.ts

@@ -65,10 +65,12 @@ export const store = EditorModule.store({
       this.store.compPids[compId] = pid;
     },
     async insertDesignContent(compKey: ICompKeys, index?: number) {
-      const { pageCompIds } = this.store;
-      index === undefined && (index = pageCompIds.length);
       const compId = await this.controls.compUICtrl.createCompId(compKey);
-      pageCompIds.splice(index, 0, compId);
+      const childIds = [...this.store.pageCompIds];
+
+      index === undefined && (index = childIds.length);
+      childIds.splice(index, 0, compId);
+      this.store.designData.compMap.root.children.default = childIds;
       return compId;
     },
     async insertCompContainer(compKey: ICompKeys, container: DesignComp) {
@@ -80,10 +82,9 @@ export const store = EditorModule.store({
     },
     setCurrComp(compId: string) {
       this.store.currCompId = compId;
-
       const comps = this.helper.getCompTrees(compId);
-
-      this.store.currStreamCardId = comps[1]?.id || ''
+      
+      this.store.currStreamCardId = comps[1]?.id || "";
     },
 
     deleteComp(compId: string) {
@@ -91,7 +92,7 @@ export const store = EditorModule.store({
       const parentComp = this.helper.findParentComp(compId);
       let deleteOK = false;
       if (parentComp) {
-        const ids = [...parentComp.children.default || []];
+        const ids = [...(parentComp.children.default || [])];
         // 只能删除children.default中的组件
         if (ids?.includes(compId)) {
           const index = ids.findIndex((id) => id === compId);
@@ -113,9 +114,10 @@ export const store = EditorModule.store({
       }
     },
     moveComp(selIndex: number, targetIndex: number) {
-      const { pageCompIds } = this.store;
+      const pageCompIds = [...this.store.pageCompIds]
       const [selComp] = pageCompIds.splice(selIndex, 1);
       pageCompIds.splice(targetIndex, 0, selComp);
+      this.store.designData.compMap.root.children.default = pageCompIds;
     },
     setTextEditingState(state: boolean) {
       this.store.textEditingState = state;