toolbar

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

@@ -2,15 +2,25 @@ import { useEditor } from "@/modules/editor";
 import { Button, Dropdown } from "ant-design-vue";
 import { defineUI } from "queenjs";
 import { ShareBox } from "./ShareBox";
+import History from "../Toolbar/History";
 
 export default defineUI({
   setup() {
     const { store, actions, jumpIndexHtml } = useEditor();
+
     return () => (
-      <div class="flex justify-between">
-        <aside>
-          <img class="h-40px cursor-pointer" src={require("@/assets/imgs/Logo.png")} alt="logo" onClick={() => jumpIndexHtml()}/>
-        </aside>
+      <div class="relative flex justify-between">
+        <div class="flex items-center">
+          <aside>
+            <img
+              class="h-40px cursor-pointer"
+              src={require("@/assets/imgs/Logo.png")}
+              alt="logo"
+              onClick={() => jumpIndexHtml()}
+            />
+          </aside>
+          <History class="ml-100px" />
+        </div>
         {/* <Radio.Group
           value={store.mode}
           onChange={(e) => actions.switchMode(e.target.value)}
@@ -20,7 +30,11 @@ export default defineUI({
           </Radio.Button>
           <Radio.Button value="preview">预览</Radio.Button>
         </Radio.Group> */}
-
+        <div class="absolute left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2">
+          <div class="text-16px font-bold text-light-50 max-w-240px truncate">
+            {store.designData?.title}
+          </div>
+        </div>
         <aside class="space-x-10px">
           {store.isEditPage && (
             <Dropdown

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

@@ -0,0 +1,42 @@
+import { useEditor } from "@/modules/editor";
+import { css } from "@linaria/core";
+import { defineUI } from "queenjs";
+import { TipIcons } from "../../TipIcons";
+
+export default defineUI({
+  setup() {
+    const { controls } = useEditor();
+
+    const { history } = controls.historyCtrl;
+
+    return () => {
+      return (
+        <div class="space-x-20px z-999">
+          <TipIcons.Undo
+            disable={
+              !controls.historyCtrl.state.enable || !history.state.canUndo
+            }
+            class={btnCls}
+            onClick={() => history.undo()}
+          />
+          <TipIcons.Redo
+            disable={
+              !controls.historyCtrl.state.enable || !history.state.canRedo
+            }
+            class={btnCls}
+            onClick={() => history.redo()}
+          />
+        </div>
+      );
+    };
+  },
+});
+
+const btnCls = css`
+  color: #fff;
+  font-size: 22px;
+  &.icon_disable {
+    color: #fff;
+    opacity: 0.5;
+  }
+`;

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

@@ -1,35 +1,26 @@
 import { useEditor } from "@/modules/editor";
+import { useLauncher } from "@/modules/launcher";
+import { css, cx } from "@linaria/core";
+import { Dropdown } from "ant-design-vue";
 import { defineUI } from "queenjs";
+import { reactive } from "vue";
 import { TipIcons } from "../../TipIcons";
-import { Dropdown } from "ant-design-vue";
-import { css } from "@linaria/core";
-import { useLauncher } from "@/modules/launcher";
 import AiText from "./AiText";
-import { reactive } from "vue";
+
 export default defineUI({
   setup() {
     const { actions, controls } = useEditor();
     const launcher = useLauncher();
-    const { history } = controls.historyCtrl;
+
     const state = reactive({
       aiVisible: false,
     });
+
     return () => (
-      <>
-        <div class="absolute top-20px left-20px space-x-10px z-999">
-          <TipIcons.Undo
-            disable={ !controls.historyCtrl.state.enable || !history.state.canUndo}
-            class={btnCls}
-            onClick={() => history.undo()}
-          />
-          <TipIcons.Redo
-            disable={ !controls.historyCtrl.state.enable || !history.state.canRedo}
-            class={btnCls}
-            onClick={() => history.redo()}
-          />
-        </div>
-        <div class="absolute top-20px right-20px space-x-10px z-999">
+      <div class="flex items-center justify-between px-15px py-12px">
+        <div class="space-x-10px z-999">
           <Dropdown
+            overlayClassName={dropdownStyles}
             overlay={
               <AiText
                 onVisible={(v) => {
@@ -38,16 +29,18 @@ export default defineUI({
               />
             }
             destroyPopupOnHide={true}
-            placement="bottom"
+            placement="bottomLeft"
             visible={state.aiVisible}
           >
             <TipIcons.AiText
-              class={btnCls}
+              class={cx(btnCls, state.aiVisible && "active")}
               onClick={() => {
                 state.aiVisible = !state.aiVisible;
               }}
             />
           </Dropdown>
+        </div>
+        <div class="space-x-10px z-999">
           <TipIcons.Screenshot
             class={btnCls}
             onClick={() => actions.updateThumbnailByScreenshot(true)}
@@ -55,7 +48,7 @@ export default defineUI({
         </div>
         <div class="absolute bottom-20px right-20px z-999">
           <TipIcons.QueenService
-            class={btnCls}
+            class={bottomBtnStyles}
             onClick={() => {
               launcher.showModal(<launcher.components.Viewport />, {
                 width: "400px",
@@ -63,14 +56,25 @@ export default defineUI({
             }}
           />
         </div>
-      </>
+      </div>
     );
   },
 });
 
 const btnCls = css`
+  padding: 5px;
+  &.active {
+    background: #1d1d1d;
+  }
+`;
+
+const bottomBtnStyles = css`
   padding: 10px;
   border-radius: 50%;
   background-color: #333;
   @apply shadow;
 `;
+
+const dropdownStyles = css`
+  /* transform: translateY(-20px); */
+`;

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

@@ -13,14 +13,14 @@ export default defineUI({
     Content,
     Toolbar,
   },
-  
+
   setup(props, { slots }) {
     return () => (
       <div class="flex flex-col h-1/1">
         <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 relative">
+          <div class="flex-1 relative flex flex-col">
             <slots.Toolbar />
             <slots.Content />
           </div>