Merge branch 'devliwei2' of http://124.70.149.18:10880/lianghj/queenshow into devliwei2

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()}
           >

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/EditVideoModal.tsx

@@ -6,11 +6,12 @@ import { Button } from "ant-design-vue";
 import { queenApi } from "queenjs";
 import Modal from "queenjs/adapter/vue/components/modal";
 import { defineComponent, reactive, ref } from "vue";
-import { object } from "vue-types";
+import { bool, object } from "vue-types";
 
 export default defineComponent({
   props: {
     record: object().isRequired,
+    isSystem: bool().isRequired,
   },
   setup(props) {
     const resource = useResource();
@@ -35,7 +36,7 @@ export default defineComponent({
         end: state.endTime,
         id: props.record._id,
       };
-      const res = await resource.https.cutVideo(data);
+      const res = await resource.https.cutVideo(data, props.isSystem);
       const { url, jobId } = res.result;
 
       const videoStatusCtrl = new TimeController({
@@ -70,6 +71,7 @@ export default defineComponent({
         await resource.controls.custVideoListCtrl.loadPage(1);
         Modal.clear();
         queenApi.hideLoading();
+        queenApi.messageSuccess("已保存，请到我的-视频中查看！");
       }, 800);
     };
 
@@ -118,7 +120,7 @@ export default defineComponent({
     }
 
     return () => {
-      const { record } = props;
+      const { record, isSystem } = props;
       const { duration, startTime, endTime, previewObj } = state;
       const submitDisabled = previewObj.file ? false : true;
 
@@ -189,16 +191,18 @@ export default defineComponent({
             </Button>
           </div>
           <div class="mt-60px text-center space-x-30px">
-            <Button
-              ghost
-              type="primary"
-              size="large"
-              class="w-300px"
-              disabled={submitDisabled}
-              onClick={replaceVideo}
-            >
-              替换原视频
-            </Button>
+            {!isSystem && (
+              <Button
+                ghost
+                type="primary"
+                size="large"
+                class="w-300px"
+                disabled={submitDisabled}
+                onClick={replaceVideo}
+              >
+                替换原视频
+              </Button>
+            )}
             <Button
               type="primary"
               size="large"

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/List.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, watch } from "vue";
+import { defineComponent, onMounted, provide } from "vue";
 import { Container, Draggable } from "vue-dndrop";
 import { string } from "vue-types";
 
@@ -6,9 +6,9 @@ import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { Loadmore } from "@queenjs/ui";
+import { Button } from "ant-design-vue";
 import { queenApi } from "queenjs";
 import SourceItem from "./SourceItem";
-import { Button } from "ant-design-vue";
 
 import ListFilter from "../ListFilter";
 
@@ -20,6 +20,7 @@ export const Sources = defineComponent({
   setup(props) {
     const editor = useEditor();
     const resource = useResource();
+    provide("sourceFrom", props.sourceFrom);
 
     function getCurrCtrl() {
       // sysImageListCtrl sysVideoListCtrl custImageListCtrl custVideoListCtrl
@@ -35,12 +36,11 @@ export const Sources = defineComponent({
     }
 
     function clickToDesign(url: string) {
-      
       if (props.sourceType == "Image") {
-          editor.actions.addImageToDesign(url);
-          return;
+        editor.actions.addImageToDesign(url);
+        return;
       }
-      
+
       editor.actions.clickCompToDesign(props.sourceType, (comp) => {
         comp.value.url = url;
       });

src/modules/editor/components/Viewport/Slider/SliderLeft/Sources/SourceItem.tsx

@@ -6,7 +6,7 @@ import { IconMore } from "@queenjs/icons";
 import { Dropdown, Menu, Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineUI, queenApi } from "queenjs";
-import { defineComponent, reactive } from "vue";
+import { defineComponent, inject, reactive } from "vue";
 import { any, bool, object } from "vue-types";
 import EditVideoModal from "./EditVideoModal";
 
@@ -19,13 +19,17 @@ const VideoItem = defineComponent({
     const state = reactive({
       play: false,
     });
+    const sourceFrom = inject("sourceFrom");
 
     function showModal(record: any) {
-      queenApi.dialog(<EditVideoModal record={record} />, {
-        title: "编辑视频",
-        width: "1100px",
-        centered: true,
-      });
+      queenApi.dialog(
+        <EditVideoModal record={record} isSystem={sourceFrom == "system"} />,
+        {
+          title: "编辑视频",
+          width: "1100px",
+          centered: true,
+        }
+      );
     }
 
     return () => {

src/modules/resource/http.ts

@@ -19,9 +19,15 @@ export const http = ResourceModule.http({
   updateResouce(data: any) {
     return this.request("/source/update", { method: "POST", data });
   },
-
-  cutVideo(data: { id: string; start: number; end: number }) {
-    return this.request("/video/cut", { method: "POST", data });
+  // sys/video/cut  /video/cut
+  cutVideo(
+    data: { id: string; start: number; end: number },
+    isSystem: boolean
+  ) {
+    return this.request(isSystem ? "sys/video/cut" : "/video/cut", {
+      method: "POST",
+      data,
+    });
   },
   queryVideoStatus(id: string) {
     return this.request(`/video/cut/${id}`, { method: "GET" });