add history ui

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

@@ -53,7 +53,7 @@ export const TipIcons = {
     icons: [IconClear],
     tips: ["清除变换"],
   }),
-  undo: createTipIcon({
+  Undo: createTipIcon({
     icons: [IconUndo],
     tips: ["撤销"],
   }),

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

@@ -29,58 +29,58 @@ export default defineUI({
       const pageRoot = helper.findRootComp();
       if (!pageRoot) return;
       return (
-        <div class="flex justify-center my-60px ">
-          <CompUI.Page.Component class={contentStyle} compId={pageRoot.id}>
-            {{
-              Container(children: any) {
-                return (
-                  <>
-                    <Container
-                      class={store.isEditPage ? "!min-h-750px" : ""}
-                      group-name="canvas"
-                      onDrop={(e: any) => {
-                        if (e.payload) {
-                          actions.addCompToDesign(e.payload, e.addedIndex);
-                        } else {
-                          actions.moveComp(e.removedIndex, e.addedIndex);
-                        }
-                      }}
-                      onDragStart={() => (state.draging = true)}
-                      onDragEnd={() => (state.draging = false)}
-                      non-drag-area-selector={".drag-disable"}
-                    >
-                      {children}
-                    </Container>
-                    {store.currCompId &&
-                      store.currCompId !== "root" &&
-                      !store.textEditingState &&
-                      !state.draging && <Transfer key={store.currCompId} />}
-                  </>
-                );
-              },
-              CompItem(comp: DesignComp) {
-                const Comp =
-                  controls.compUICtrl.state.components.get(comp.compKey)
-                    ?.Component || NotFoundComp;
-                return (
-                  <Draggable class="!flex flex-col" key={comp.id}>
-                    <Comp compId={comp.id} />
-                  </Draggable>
-                );
-              },
-            }}
-          </CompUI.Page.Component>
+        <div class="scrollbar overflow-y-auto h-1/1">
+          <div class={"w-375px my-60px mx-auto select-none " + contentCls}>
+            <CompUI.Page.Component
+              class={store.isEditPage ? "!min-h-750px" : ""}
+              compId={pageRoot.id}
+            >
+              {{
+                Container(children: any) {
+                  return (
+                    <>
+                      <Container
+                        group-name="canvas"
+                        onDrop={(e: any) => {
+                          if (e.payload) {
+                            actions.addCompToDesign(e.payload, e.addedIndex);
+                          } else {
+                            actions.moveComp(e.removedIndex, e.addedIndex);
+                          }
+                        }}
+                        onDragStart={() => (state.draging = true)}
+                        onDragEnd={() => (state.draging = false)}
+                        non-drag-area-selector={".drag-disable"}
+                      >
+                        {children}
+                      </Container>
+                      {store.currCompId &&
+                        store.currCompId !== "root" &&
+                        !store.textEditingState &&
+                        !state.draging && <Transfer key={store.currCompId} />}
+                    </>
+                  );
+                },
+                CompItem(comp: DesignComp) {
+                  const Comp =
+                    controls.compUICtrl.state.components.get(comp.compKey)
+                      ?.Component || NotFoundComp;
+                  return (
+                    <Draggable class="!flex flex-col" key={comp.id}>
+                      <Comp compId={comp.id} />
+                    </Draggable>
+                  );
+                },
+              }}
+            </CompUI.Page.Component>
+          </div>
         </div>
       );
     };
   },
 });
 
-const contentStyle = css`
-  width: 375px;
-  position: relative;
-  user-select: none;
-
+const contentCls = css`
   .dndrop-container.vertical > .dndrop-draggable-wrapper {
     overflow: unset;
   }

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

@@ -5,14 +5,26 @@ import { css } from "@linaria/core";
 
 export default defineUI({
   setup() {
-    const { actions } = useEditor();
+    const { actions, controls } = useEditor();
     return () => (
-      <div class="absolute top-20px right-20px">
-        <TipIcons.Screenshot
-          class={btnCls}
-          onClick={() => actions.updateThumbnailByScreenshot(true)}
-        />
-      </div>
+      <>
+        <div class="absolute top-20px left-20px space-x-10px">
+          <TipIcons.Undo
+            class={btnCls}
+            onClick={() => controls.historyCtrl.history.undo()}
+          />
+          <TipIcons.Redo
+            class={btnCls}
+            onClick={() => controls.historyCtrl.history.redo()}
+          />
+        </div>
+        <div class="absolute top-20px right-20px">
+          <TipIcons.Screenshot
+            class={btnCls}
+            onClick={() => actions.updateThumbnailByScreenshot(true)}
+          />
+        </div>
+      </>
     );
   },
 });

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

@@ -19,7 +19,7 @@ export default defineUI({
         <slots.Header class="p-16px bg-component border-bottom !border-2px" />
         <div class="flex flex-1 h-0">
           <slots.SliderLeft class="w-300px bg-component border-right !border-2px" />
-          <div class="flex-1 h-1/1 scrollbar overflow-y-auto relative">
+          <div class="flex-1 relative">
             <slots.Toolbar />
             <slots.Content />
           </div>