publish

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

@@ -0,0 +1,231 @@
+import { IconNext, IconPrev } from "@/assets/icons";
+import { initEditor } from "@/modules/editor";
+import { ScreenshotCtrl } from "@/modules/editor/controllers/ScreenshotCtrl";
+import { Design_Page_Size } from "@/modules/editor/dicts/CompOptions";
+import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
+import { SelectOneImage } from "@/pages/website/Material2/modal";
+import { Image } from "@queenjs/ui";
+import { Button, Form, Input } from "ant-design-vue";
+import { cloneDeep } from "lodash";
+import { Exception, queenApi } from "queenjs";
+import {
+  defineComponent,
+  nextTick,
+  provide,
+  reactive,
+  ref,
+  onMounted,
+} from "vue";
+import { any } from "vue-types";
+const NotFoundComp = () => <div>无效的组件</div>;
+const layout = {
+  labelCol: { span: 24 },
+  wrapperCol: { span: 24 },
+};
+export default defineComponent({
+  props: {
+    data: any(),
+  },
+  setup(props) {
+    const editor = initEditor();
+    const { helper, controls } = editor;
+    const page = controls.pageCtrl;
+
+    controls.pageCtrl.setDesignData(cloneDeep(props.data));
+
+    const pageRef = ref();
+    const compRef = ref();
+
+    provide("isPreview", true);
+
+    function getPageH() {
+      const rootPage = controls.pageCtrl.rootPage;
+      const pageH = rootPage?.layout.size?.[1] || Design_Page_Size[1];
+      return helper.designToNaturalSize(pageH, {
+        adaptiveH: true,
+      });
+    }
+    const formState: { [name: string]: any } = reactive({
+      thumbnail: props.data.thumbnail || "",
+      title: props.data.title || "",
+      desc: props.data.desc || "",
+    });
+    const rules = reactive({
+      title: [
+        { required: true, message: "标题不能为空", trigger: "change" },
+        {
+          min: 2,
+          max: 20,
+          message: "长度为2~20位字符",
+          trigger: "change",
+        },
+      ],
+      thumbnail: [
+        { required: true, message: "封面图不能为空", trigger: "change" },
+      ],
+    });
+    const { validate, validateInfos } = Form.useForm(formState, rules);
+    function getPageStyles() {
+      const pageRoot = page.rootPage;
+      const isPcDesign = pageRoot?.value.useFor == "pc";
+      const isLongPage = pageRoot?.value.pageMode == "long";
+      if (!isPcDesign) {
+        let mobileStle: any = {
+          height: getPageH(),
+          width: "375px",
+          margin: "0 auto",
+        };
+        if (isLongPage) {
+          mobileStle.overflowY = "auto";
+        } else {
+          mobileStle.marginBottom = "70px";
+        }
+        return mobileStle;
+      }
+      // pc
+      let s: any = { height: "100%", margin: "0 auto" };
+      if (!isLongPage) {
+        const pageLayout = {
+          height: pageRef.value?.clientHeight,
+          width: pageRef.value?.clientWidth,
+        };
+        const ph = pageLayout.height - 170;
+        const width = (ph * 16) / 9;
+        s = {
+          ...s,
+          width: width + "px",
+          padding: "48px 0 100px",
+        };
+      } else {
+        s = {
+          ...s,
+          width: "100%",
+          overflow: "auto",
+          height: "100%",
+          padding: "20px 0",
+        };
+      }
+      return s;
+    }
+
+    nextTick(() => {
+      const pageRoot = page.rootPage;
+      const isShort = pageRoot?.value.pageMode == "short";
+      if (isShort) controls.previewCtrl.initSwiper(compRef.value);
+      screenshotThumbnail();
+    });
+
+    const Content = () => {
+      const pageRoot = page.rootPage;
+      const isShort = pageRoot?.value.pageMode == "short";
+
+      const pageStyles = getPageStyles();
+
+      return (
+        <>
+          <div ref={compRef} style={pageStyles} class="overflow-hidden">
+            <div class={["page", isShort && "swiper-wrapper relative "]}>
+              {controls.pageCtrl.streamCardIds.map((item) => {
+                const c = helper.findComp(item) as DesignComp;
+                const Comp =
+                  controls.compUICtrl.state.components.get(c.compKey)
+                    ?.Component || NotFoundComp;
+                return (
+                  <Comp
+                    compId={c.id}
+                    class="swiper-slide relative !flex items-center justify-center"
+                  />
+                );
+              })}
+            </div>
+          </div>
+          {/* buttons */}
+          {isShort && (
+            <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 z-1">
+              <IconPrev class="swiper-button-prev rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+              <span class="select-none">
+                {controls.previewCtrl.state.activeIndex}/
+                {pageRoot.children.default.length}
+              </span>
+              <IconNext class="swiper-button-next rounded-4px text-36px cursor-pointer transition hover:bg-dark-600 active:bg-dark-900" />
+            </div>
+          )}
+        </>
+      );
+    };
+
+    const screenshotThumbnail = async () => {
+      try {
+        const rootComp = page.rootPage;
+        if (!rootComp) return;
+        queenApi.showLoading("截屏中");
+        const blob = await new ScreenshotCtrl().snap({
+          element: rootComp.$el,
+          ratio: 1,
+        });
+        const thumbnail = URL.createObjectURL(blob);
+        formState.thumbnail = thumbnail;
+      } catch (error: any) {
+        throw Exception.error(error.toString());
+      } finally {
+        queenApi.hideLoading();
+      }
+    };
+    const uploadThumbnail = async () => {
+      const url = await SelectOneImage();
+      if (!url) return;
+      formState.thumbnail = url;
+    };
+    const submit = () => {
+      validate().then(async (values) => {
+        console.log(formState);
+      });
+    };
+
+    return () => {
+      return (
+        <div class="h-100vh flex  overflow-hidden ">
+          <div class={"flex flex-col w-320px flex-shrink-0"}>
+            <div class={"flex-1 p-20px"}>
+              <Form {...layout} layout="vertical">
+                <Form.Item {...validateInfos.thumbnail} label={"作品封面"}>
+                  <div class={"w-full h-200px"} onClick={uploadThumbnail}>
+                    <Image
+                      src={formState.thumbnail}
+                      size={0}
+                      class={"w-full h-full"}
+                    />
+                  </div>
+                </Form.Item>
+                <Form.Item {...validateInfos.title} label={"作品标题"}>
+                  <Input
+                    placeholder={"请输入作品名称或标题"}
+                    v-model={[formState.title, "value"]}
+                  />
+                </Form.Item>
+                <Form.Item>
+                  <Input.TextArea
+                    placeholder={"作品描述"}
+                    v-model={[formState.desc, "value"]}
+                    autoSize={{ minRows: 6, maxRows: 6 }}
+                  ></Input.TextArea>
+                </Form.Item>
+              </Form>
+            </div>
+            <div class="p-20px text-right border-0  border-solid border-dark-400 border-t-1">
+              <Button type="primary" onClick={submit}>
+                发布
+              </Button>
+            </div>
+          </div>
+          <div
+            ref={pageRef}
+            class="flex-1 h-full  bg-[#0B0B0B] flex items-center overflow-hidden relative"
+          >
+            <Content />
+          </div>
+        </div>
+      );
+    };
+  },
+});

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

@@ -1,9 +1,9 @@
 import { useEditor } from "@/modules/editor";
-import { Button, Dropdown } from "ant-design-vue";
+import { Button } from "ant-design-vue";
 import { defineUI, queenApi } from "queenjs";
 import { TipIcons } from "../../TipIcons";
 import PreviewDesignModal from "./PreviewDesignModal";
-import { ShareBox } from "./ShareBox";
+import PublishDesignModal from "./PublishDesignModal";
 
 export default defineUI({
   setup() {
@@ -25,6 +25,21 @@ export default defineUI({
         }
       );
     }
+    function showPublishModal() {
+      controls.screenCtrl.saveScreenPage();
+      const rootPage = controls.pageCtrl.rootPage;
+      rootPage.value.pageMode = controls.screenCtrl.state.screen.pageMode;
+      rootPage.value.pageSizeType =
+        controls.screenCtrl.state.screen.pageSizeType;
+
+      queenApi.dialog(
+        <PublishDesignModal data={controls.pageCtrl.designData} />,
+        {
+          fullscreen: true,
+          title: "作品信息",
+        }
+      );
+    }
 
     return () => (
       <aside class="space-x-16px flex items-center">
@@ -53,13 +68,13 @@ export default defineUI({
         >
           保存
         </Button>
-        {/* <Button
-          type="default"
-          class="text-12px bg-dark-50 hover:(bg-dark-100 border-transparent text-light-50)"
-          onClick={()=>actions.publishDesign()}
+        <Button
+          type="text"
+          class="text-12px bg-dark-50 hover:(bg-dark-100 text-light-50) focus:(bg-dark-100)"
+          onClick={() => showPublishModal()}
         >
           发布
-        </Button> */}
+        </Button>
       </aside>
     );
   },

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

@@ -748,25 +748,7 @@ export const editActions = EditorModule.action({
       queenApi.hideLoading();
     }
   },
-  //发布项目
-  async publishDesign() {
-    const ctrl = this.controls.pageCtrl;
-    if (!ctrl.designData.thumbnail) {
-      await this.actions.updateThumbnailByScreenshot();
-    }
-    // this.showModal()
-
-    // await this.controls.uploader.uploadBlobs(ctrl.designData);
-    // if (this.store.isWk) {
-    //   await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
-    //     ctrl.toJson()
-    //   );
-    // } else {
-    //   await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
-    //     ctrl.toJson()
-    //   );
-    // }
-  },
+
   // 设置组件变换
   setCompTransformMatrix(comp: DesignComp, transformMatrix: string) {
     if (!comp) return;