update

src/modules/editor/components/CompUI/basicUI/Page/PageForm.tsx

@@ -1,6 +1,6 @@
+import { useEditor } from "@/modules/editor";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
-import { set } from "lodash";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { createColorOpts } from "../../defines/formOpts/createColorOpts";
@@ -8,12 +8,12 @@ import { createColorOpts } from "../../defines/formOpts/createColorOpts";
 const styleColumns: ColumnItem[] = [
   {
     label: "内边距",
-    dataIndex: "padding",
+    dataIndex: "layout.padding",
     component: "Input",
   },
   {
     label: "背景颜色",
-    dataIndex: "background.color",
+    dataIndex: "layout.background.color",
     ...createColorOpts(),
   },
 ];
@@ -23,8 +23,9 @@ export const PageForm = defineComponent({
     component: any<DesignComp>().isRequired,
   },
   setup(props) {
+    const { actions } = useEditor();
     function changeVal(e: { dataIndex: string; value: any }) {
-      set(props.component.layout, e.dataIndex, e.value);
+      actions.updateCompDataByForm(props.component, e.dataIndex, e.value);
     }
 
     return () => {

src/modules/editor/components/CompUI/basicUI/Transfer/index.tsx

@@ -29,12 +29,13 @@ export const Transfer = defineComponent({
       const toolbarOpts =
         CompToolbars[store.currComp.compKey] || CompToolbars.default;
 
-      const showTransfer =
-        store.isEditComp || store.pageCompIds.includes(comp.id);
+      // const showTransfer =
+      //   store.isEditComp || store.pageCompIds.includes(comp.id);
+      const showTransfer = true;
       return (
         transferStyle.width && (
           <div
-            class={rootStyle}
+            class="transfer absolute"
             style={{
               top: transferStyle.top,
               left: transferStyle.left,
@@ -107,10 +108,6 @@ export const Transfer = defineComponent({
   },
 });
 
-const rootStyle = css`
-  position: absolute;
-`;
-
 const borderStyle = css`
   position: absolute;
   top: 0;

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

@@ -1,8 +1,9 @@
+import { useEditor } from "@/modules/editor";
 import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
 import { compMasks } from "@/modules/editor/objects/DesignTemp/creates/CompMasks";
 import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
 import { InputNumber, Select } from "ant-design-vue";
-import { isEmpty, set } from "lodash";
+import { isEmpty } from "lodash";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
 import { GroupNumber } from "../formItems/GroupNumber";
@@ -155,8 +156,9 @@ export function createAttrsForm(valueColumns: ColumnItem[]) {
       component: any<DesignComp>().isRequired,
     },
     setup(props) {
+      const { store, actions } = useEditor();
       function changeVal(e: { dataIndex: string; value: any }) {
-        set(props.component, e.dataIndex, e.value);
+        actions.updateCompDataByForm(store.currComp, e.dataIndex, e.value);
       }
 
       return () => {

src/modules/editor/components/TipIcons/TipIcon.tsx

@@ -31,7 +31,6 @@ const iconStyle = css`
   }
 
   &:hover {
-    color: #333;
     background: rgba(0, 0, 0, 0.1);
   }
 `;

src/modules/editor/components/TipIcons/index.ts

@@ -18,7 +18,7 @@ import {
   IconLock,
   IconRedo,
   IconUndo,
-  IconUnlock
+  IconUnlock,
 } from "@queenjs/icons";
 import { createTipIcon } from "./create";
 
@@ -57,11 +57,11 @@ export const TipIcons = {
   }),
   Undo: createTipIcon({
     icons: [IconUndo],
-    tips: ["撤销"],
+    tips: ["撤销(Ctrl+Z)"],
   }),
   Redo: createTipIcon({
     icons: [IconRedo],
-    tips: ["重做"],
+    tips: ["重做(Ctrl+Shift+Z)"],
   }),
   LayerUp: createTipIcon({
     icons: [IconLayerUp],
@@ -72,7 +72,7 @@ export const TipIcons = {
     tips: ["层级下移"],
   }),
   ParentComp: createTipIcon({
-    icons: [IconBtnNext],
+    icons: [IconLayerUp],
     tips: ["切换到父组件"],
   }),
 };

src/modules/editor/components/Viewport/Content/index.tsx

@@ -57,7 +57,7 @@ export default defineUI({
                       {store.currCompId &&
                         store.currCompId !== "root" &&
                         !store.textEditingState &&
-                        !state.draging && <Transfer class="transfer" key={store.currCompId} />}
+                        !state.draging && <Transfer key={store.currCompId} />}
                     </>
                   );
                 },

src/modules/editor/components/Viewport/Slider/SliderLeft/CustomComps.tsx

@@ -34,10 +34,7 @@ export default defineUI({
                 key={item.compKey}
                 title={item.name}
                 onClick={() =>
-                  editor.actions.addCompToDesign(
-                    item.compKey as ICompKeys,
-                    editor.store.pageCompIds.length
-                  )
+                  editor.actions.addCompToDesign(item.compKey as ICompKeys)
                 }
               >
                 <Image

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

@@ -1,12 +1,12 @@
 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 } from "vue";
+import { defineComponent, effect } from "vue";
 import { string } from "vue-types";
 import { useEditor } from "../../../..";
 import { DesignComp } from "../../../../objects/DesignTemp/DesignComp";
-import { Image } from "@queenjs/ui";
 
 type TreeItem = {
   key: string;
@@ -20,10 +20,7 @@ export const CompTree = defineComponent({
     const { store, actions, helper, controls } = useEditor();
     const { compUICtrl } = controls;
     const state = useReactive(() => ({
-      expandedKeys() {
-        const comps = helper.getCompTrees(store.currCompId);
-        return comps.map((comp) => comp.id);
-      },
+      expandedKeys: [] as string[],
       treeData() {
         const rootComp = helper.findRootComp();
         function getCompChildren(ids: string[]): TreeItem[] {
@@ -42,11 +39,17 @@ export const CompTree = defineComponent({
       },
     }));
 
+    effect(() => {
+      state.expandedKeys = helper
+        .getCompTrees(store.currCompId)
+        .map((comp) => comp.id);
+    });
+
     return () => (
       <Tree
         class={treeStyle}
         treeData={state.treeData}
-        expandedKeys={state.expandedKeys}
+        v-model={[state.expandedKeys, "expandedKeys"]}
         selectedKeys={[store.currCompId]}
         blockNode={true}
         onSelect={(ids) =>
@@ -119,6 +122,7 @@ const nodeStyle = css`
   align-items: center;
   padding: 6px;
   @apply rounded;
+
   > img {
     width: 24px;
     height: 24px;

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

@@ -2,6 +2,7 @@ import { Empty } from "@queenjs/ui";
 import { defineUI } from "queenjs";
 import { useEditor } from "../../../..";
 import { CompTree } from "./CompTree";
+import { css } from "@linaria/core";
 
 export default defineUI({
   setup() {
@@ -20,10 +21,16 @@ export default defineUI({
           </div>
           <div class="p-16px border-bottom !border-2px border-top">组件树</div>
           <div class="h-300px py-20px pr-20px scrollbar">
-            <CompTree />
+            <CompTree class={compTreeCls} />
           </div>
         </div>
       );
     };
   },
 });
+
+const compTreeCls = css`
+  .ant-tree-node-content-wrapper.ant-tree-node-selected {
+    background-color: #404040;
+  }
+`;

src/modules/editor/components/Viewport/Toolbar/index.tsx

@@ -6,16 +6,19 @@ import { css } from "@linaria/core";
 export default defineUI({
   setup() {
     const { actions, controls } = useEditor();
+    const { history } = controls.historyCtrl;
     return () => (
       <>
         <div class="absolute top-20px left-20px space-x-10px">
           <TipIcons.Undo
+            disable={!history.state.canUndo}
             class={btnCls}
-            onClick={() => controls.historyCtrl.history.undo()}
+            onClick={() => history.undo()}
           />
           <TipIcons.Redo
+            disable={!history.state.canRedo}
             class={btnCls}
-            onClick={() => controls.historyCtrl.history.redo()}
+            onClick={() => history.redo()}
           />
         </div>
         <div class="absolute top-20px right-20px">

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

@@ -80,7 +80,7 @@ export class HistoryController {
 
   undo() {
     const state = this.state;
-    if (!state.enable) return;
+    if (!state.canUndo) return;
 
     if (state.opIndex < 0) return; //已经退到第一步了
 
@@ -92,7 +92,7 @@ export class HistoryController {
 
   redo() {
     const state = this.state;
-    if (!state.enable) return;
+    if (!state.canRedo) return;
 
     if (state.opIndex >= this.queue.length - 1) return; //已经是最后一步操作了
 
@@ -171,7 +171,7 @@ export class Action {
     let paths: string | string[] = parentPath.split(".");
     if (type == "add" && attrName) {
       if (parentPath) {
-        paths.push(attrName);
+        +attrName >= 0 && paths.push(attrName);
       } else {
         paths = attrName;
       }
@@ -187,12 +187,11 @@ export class Action {
           }
         } else {
           if (actionType === "redo") {
-            parent[attrName] = value
+            parent[attrName] = value;
           } else {
             delete parent[attrName];
           }
         }
-       
         break;
       case "set":
         parent[attrName] = value;

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

@@ -31,7 +31,6 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
         this.actions.removeComp(this.store.currCompId);
       },
     },
-
     {
       hotKey: "q,w,a,s,d,e",
       action(key) {
@@ -40,6 +39,20 @@ export class HotKeyCtrl extends ModuleControl<EditorModule> {
         this.actions.handleImageHotKey(key);
       },
     },
+    // 回退
+    {
+      hotKey: "ctrl+z",
+      action() {
+        this.controls.historyCtrl.history.undo();
+      },
+    },
+    // 重做
+    {
+      hotKey: "ctrl+shift+z",
+      action() {
+        this.controls.historyCtrl.history.redo();
+      },
+    },
   ]);
 
   init() {

src/modules/editor/controllers/TransferCtrl/transforms/transform.ts

@@ -18,7 +18,10 @@ function getTransform(this: TransferCtrl, transType: string) {
       offset.r = (offset.r + transEvent.offsetX * -1) % 360;
       break;
     case "scale":
-      offset.s = +((offset.s * (1 + (transEvent.offsetX * 2) / transEvent.width)).toFixed(2))
+      offset.s = +(
+        offset.s *
+        (1 + (transEvent.offsetX * 2) / transEvent.width)
+      ).toFixed(2);
   }
 
   return offset;
@@ -34,7 +37,10 @@ const transform: TransCreateFn = (transType: string) => ({
     });
   },
   mouseup() {
-    this.currComp.layout.transform = getTransform.call(this, transType);
+    this.module.actions.setCompTransform(
+      this.currComp,
+      getTransform.call(this, transType)
+    );
   },
 });
 

src/modules/editor/module/actions/edit.ts

@@ -1,14 +1,18 @@
+import { pick, set } from "lodash";
 import { Exception, queenApi } from "queenjs";
 import { EditorModule } from "..";
 import { DesignComp } from "../../objects/DesignTemp/DesignComp";
-import { ICompKeys } from "../../typings";
-import { pick } from "lodash";
+import { ICompKeys, Layout } from "../../typings";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
   async addCompToDesign(compKey: ICompKeys, index?: number) {
     let compId: string;
-    if (index === undefined && this.store.currComp?.compKey === "Container") {
+    if (
+      index === undefined &&
+      this.store.currComp?.compKey === "Container" &&
+      this.store.pageCompIds.includes(this.store.currComp.id)
+    ) {
       compId = await this.store.insertCompContainer(
         compKey,
         this.store.currComp
@@ -38,12 +42,12 @@ export const editActions = EditorModule.action({
   removeComp(compId: string) {
     if (this.helper.isCompCanDelete(compId)) {
       if (compId === this.store.currCompId) {
-        this.store.setCurrComp("");
+        this.store.setCurrComp("root");
       }
       this.store.deleteComp(compId);
     }
   },
-  // 移动组件
+  // 移动组件顺序
   moveComp(selIndex: number, targetIndex: number) {
     if (selIndex === targetIndex) return;
     this.store.moveComp(selIndex, targetIndex);
@@ -97,6 +101,15 @@ export const editActions = EditorModule.action({
     }
   },
 
+  // 设置组件变换
+  setCompTransform(comp: DesignComp, transform: Layout["transform"]) {
+    comp.layout.transform = transform;
+  },
+
+  updateCompDataByForm(comp: DesignComp, path: string, value: any) {
+    set(comp, path, value);
+  },
+
   // 设置组件显示隐藏
   setCompPosition(comp: DesignComp) {
     comp.layout.position =

src/modules/editor/module/actions/init.ts

@@ -10,12 +10,11 @@ export const initActions = EditorModule.action({
     historyCtrl.proxyActions(Object.keys(editActions));
     this.controls.compUICtrl.init();
 
-    // createProxyEffect(this.store, (type, paths, value) => {
-    //   console.log(type, paths, value);
-    //   if(paths[0] === "designData" || paths[0] === "currCompId"){
-    //     historyCtrl.onChange(this.store, type, paths, value);
-    //   }
-    // });
+    createProxyEffect(this.store, (type, paths, value) => {
+      if (paths[0] === "designData" || paths[0] === "currCompId") {
+        historyCtrl.onChange(this.store, type, paths, value);
+      }
+    });
   },
 
   // 初始化数据

src/modules/editor/module/index.ts

@@ -23,7 +23,7 @@ export class EditorModule extends ModuleRoot {
 
   actions = this.createActions([initActions, editActions, ImgCompActions]);
   https = this.createHttps(https);
-  store = this.createStore(store);
+  store = this.createStore(store, { useProxy: true });
   helper = this.createHelper(helpers);
 
   controls = {

src/styles/global.less

@@ -51,11 +51,11 @@ each(@direction, {
     background: transparent;
   }
   &::-webkit-scrollbar-thumb {
-    background: @inf-primary-bg;
+    background: #404040;
     border-radius: 8px;
   }
   &::-webkit-scrollbar-thumb:hover {
-    background: @inf-primary-hover-bg;
+    background: #606060;
   }
 }