预览

src/assets/icons/components/IconExit.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconExit = createIcon(<svg viewBox="0 0 20 20"><g transform="translate(-1650.02 -24.02)"><rect fill="none" width="20" height="20" transform="translate(1650.02 24.02)"/><g transform="translate(1648.205 22.207)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.627,12.54V6.969A.969.969,0,0,0,16.658,6H6.969A.969.969,0,0,0,6,6.969v9.689a.969.969,0,0,0,.969.969h4.118"/><path fill="none" stroke="currentColor" stroke-linecap="round" d="M29.813,34H24" transform="translate(-12.187 -18.957)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M25.641,31.44,24,29.938l1.641-1.649" transform="translate(-12.188 -14.895)"/></g></g></svg>)

src/assets/icons/components/IconNext.tsx

@@ -0,0 +1,7 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconNext = createIcon(<svg viewBox="0 0 36 36">
+    <rect fill="none" width="36" height="36" rx="4" />
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px"
+        d="M9.756,4.878,4.878,0,0,4.878" transform="translate(20.439 13.122) rotate(90)" />
+</svg>)

src/assets/icons/components/IconPrev.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPrev = createIcon(<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M9.756,0,4.878,4.878,0,0" transform="translate(1386.439 964.122) rotate(90)"/></g></svg>)

src/assets/icons/index.ts

@@ -24,6 +24,7 @@ export * from "./components/IconCube";
 export * from "./components/IconCut";
 export * from "./components/IconDelete";
 export * from "./components/IconEmpty";
+export * from "./components/IconExit";
 export * from "./components/IconFit";
 export * from "./components/IconFloatOff";
 export * from "./components/IconFloatOn";
@@ -37,10 +38,12 @@ export * from "./components/IconLock";
 export * from "./components/IconLocked";
 export * from "./components/IconMove";
 export * from "./components/IconMusic";
+export * from "./components/IconNext";
 export * from "./components/IconPalette";
 export * from "./components/IconPicker";
 export * from "./components/IconPlay";
 export * from "./components/IconPlay2";
+export * from "./components/IconPrev";
 export * from "./components/IconPreview";
 export * from "./components/IconProfile";
 export * from "./components/IconQueen";

src/assets/icons/svg/exit.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20"><g transform="translate(-1650.02 -24.02)"><rect fill="none" width="20" height="20" transform="translate(1650.02 24.02)"/><g transform="translate(1648.205 22.207)"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M17.627,12.54V6.969A.969.969,0,0,0,16.658,6H6.969A.969.969,0,0,0,6,6.969v9.689a.969.969,0,0,0,.969.969h4.118"/><path fill="none" stroke="currentColor" stroke-linecap="round" d="M29.813,34H24" transform="translate(-12.187 -18.957)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="M25.641,31.44,24,29.938l1.641-1.649" transform="translate(-12.188 -14.895)"/></g></g></svg>

src/assets/icons/svg/next.svg

@@ -0,0 +1,5 @@
+<svg viewBox="0 0 36 36">
+    <rect fill="none" width="36" height="36" rx="4" />
+    <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px"
+        d="M9.756,4.878,4.878,0,0,4.878" transform="translate(20.439 13.122) rotate(90)" />
+</svg>

src/assets/icons/svg/prev.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 36 36"><g transform="translate(-1366 -951)"><rect fill="none" width="36" height="36" rx="4" transform="translate(1366 951)"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.4px" d="M9.756,0,4.878,4.878,0,0" transform="translate(1386.439 964.122) rotate(90)"/></g></svg>

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

@@ -30,6 +30,7 @@ import {
   IconRelateLocked,
   IconTextLink,
   IconMove,
+  IconArrowUp,
 } from "@/assets/icons";
 import {
   IconCamera,
@@ -46,6 +47,10 @@ import { createTipIcon } from "./create";
 import { FontSize } from "./TipIcon";
 
 export const TipIcons = {
+  Preview: createTipIcon({
+    icons: [IconArrowUp],
+    tips: ["预览"],
+  }),
   Move: createTipIcon({
     icons: [IconMove],
     tips: ["平移"],

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

@@ -0,0 +1,49 @@
+import { IconExit, IconNext, IconPrev } from "@/assets/icons";
+import { Button, Dropdown } from "ant-design-vue";
+import Modal from "queenjs/adapter/vue/components/modal";
+import { defineComponent } from "vue";
+import { any } from "vue-types";
+import { ShareBox } from "./ShareBox";
+
+export default defineComponent({
+  props: {
+    data: any(),
+  },
+  setup(props) {
+    // const editor = useEditor();
+    // const resource = useResource();
+
+    return () => {
+      const { data } = props;
+      return (
+        <div class="h-100vh flex flex-col bg-[#0B0B0B]">
+          <div class="h-64px flex items-center justify-between px-20px bg-[#262626]">
+            <Button
+              class="flex items-center text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
+              onClick={() => Modal.clear()}
+            >
+              <IconExit class="text-20px mr-5px" /> 退出预览
+            </Button>
+            <span class="text-14px select-none">{data.title}</span>
+            <Dropdown
+              overlay={<ShareBox />}
+              trigger="click"
+              placement="bottomRight"
+            >
+              <Button class="text-dark-500 hover:text-dark-500" type="primary">
+                分享
+              </Button>
+            </Dropdown>
+          </div>
+          <div class="flex-1">
+            <div class="absolute bottom-30px left-1/2 w-130px h-44px px-4px flex items-center justify-between bg-[#262626] rounded-4px transform -translate-x-1/2">
+              <IconPrev class="rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+              <span class="select-none">1/2</span>
+              <IconNext class="rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,13 +1,25 @@
 import { useEditor } from "@/modules/editor";
 import { Button, Dropdown } from "ant-design-vue";
-import { defineUI } from "queenjs";
-import { ShareBox } from "./ShareBox";
+import { defineUI, queenApi } from "queenjs";
+import { TipIcons } from "../../TipIcons";
 import History from "../Toolbar/History";
-import { IconArrowUp } from "@/assets/icons";
+import { ShareBox } from "./ShareBox";
+import PreviewDesignModal from "./PreviewDesignModal";
 
 export default defineUI({
   setup() {
-    const { store, actions, controls, jumpIndexHtml } = useEditor();
+    const editor =  useEditor();
+    const { store, actions, controls, jumpIndexHtml } = editor;
+
+    function showPreviewModal() {
+      editor.showModal(
+        <PreviewDesignModal data={controls.pageCtrl.designData} />,
+        {
+          fullscreen: true,
+          closable: false,
+        }
+      );
+    }
 
     return () => (
       <div class="relative flex justify-between items-center">
@@ -37,18 +49,26 @@ export default defineUI({
           </div>
         </div>
         <aside class="space-x-16px flex items-center">
-          <IconArrowUp class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:opacity-80 !hidden" />
+          <TipIcons.Preview
+            class="text-20px text-light-50 bg-dark-50 p-6px transform rotate-90 rounded cursor-pointer transition hover:(!bg-dark-100)"
+            onClick={showPreviewModal}
+          />
           {store.isEditPage && (
             <Dropdown
               overlay={<ShareBox />}
               trigger="click"
               placement="bottomRight"
             >
-              <Button class="text-12px">预览</Button>
+              <Button
+                type="default"
+                class="text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
+              >
+                分享
+              </Button>
             </Dropdown>
           )}
           <Button
-            class="text-12px"
+            class="text-12px text-dark-500 hover:text-dark-500"
             type="primary"
             onClick={() => actions.saveDesign()}
           >