update

src/pages/website/MyComps/components/CompItem.tsx

@@ -1,7 +1,7 @@
 import { css, cx } from "@linaria/core";
 import { IconMore } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { Divider, Dropdown, Menu, Tag } from "ant-design-vue";
+import { Dropdown, Menu, Tag } from "ant-design-vue";
 import dayjs from "dayjs";
 import { defineUI } from "queenjs";
 import { any } from "vue-types";
@@ -11,24 +11,27 @@ export default defineUI({
     record: any(),
   },
   emits: ["edit", "preview", "menu"],
-  setup(props, {emit}) {
+  setup(props, { emit }) {
     return () => {
       const { record } = props;
       return (
         <div class={cx(itemStyles, "relative")}>
           <View ratio={1.4} class="overflow-hidden relative">
-            <Image class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]" src={record?.thumbnail} />
-            <Tag
+            <Image
+              class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
+              src={record?.thumbnail}
+            />
+            {/* <Tag
               color="#E88B00"
               // color="rgba(0, 0, 0, 0.4)"
               class="absolute top-0 left-0 z-1 !rounded-none"
             >
               未发布
-            </Tag>
+            </Tag> */}
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
                 class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center"
-                onClick={()=>emit("edit", props.record)}
+                onClick={() => emit("edit", props.record)}
               >
                 编辑
               </div>
@@ -38,9 +41,7 @@ export default defineUI({
             <div>
               <div class="text-white text-bold">{record.title}</div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
-                {dayjs(record.updateTime).format("YYYY.MM.DD")} 发布{" "}
-                <Divider type="vertical"></Divider>
-                0次浏览
+                {dayjs(record.updateTime).format("YYYY.MM.DD")}
               </div>
             </div>
             <Dropdown
@@ -48,18 +49,10 @@ export default defineUI({
               overlay={
                 <Menu class="w-90px">
                   <Menu.Item>
-                    <div
-                      onClick={() => emit("menu", "rename")}
-                    >
-                      重命名
-                    </div>
+                    <div onClick={() => emit("menu", "rename")}>重命名</div>
                   </Menu.Item>
                   <Menu.Item>
-                    <div
-                      onClick={() => emit("menu", "delete")}
-                    >
-                      删除
-                    </div>
+                    <div onClick={() => emit("menu", "delete")}>删除</div>
                   </Menu.Item>
                 </Menu>
               }

src/pages/website/Promotion2/components/PromotionItem.tsx

@@ -52,13 +52,13 @@ export default defineUI({
               class="h-1/1 w-1/1 !object-contain bg-[#ebebeb]"
               src={record?.thumbnail}
             />
-            <Tag
+            {/* <Tag
               color="#E88B00"
               // color="rgba(0, 0, 0, 0.4)"
               class="absolute top-0 left-0 z-1 !rounded-none"
             >
               未发布
-            </Tag>
+            </Tag> */}
             <div class="absolute inset-0 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity">
               <div
                 class="text-white icon_action w-60px leading-60px orange cursor-pointer rounded-1/2 text-center"
@@ -82,9 +82,10 @@ export default defineUI({
             <div>
               <div class="text-white text-bold">{record.title}</div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
-                {dayjs(record.updateTime).format("YYYY.MM.DD")} 发布
-                <Divider type="vertical"></Divider>
-                0次浏览
+                {dayjs(record.updateTime).format("YYYY.MM.DD")}
+                {/* 发布 */}
+                {/* <Divider type="vertical"></Divider>
+                0次浏览 */}
               </div>
             </div>
             <Dropdown

src/pages/website/Promotion2/components/ShareModal.tsx

@@ -1,39 +1,110 @@
+import { Image } from "@queenjs/ui";
+import { useClipboard } from "@vueuse/core";
+import { useQRCode } from "@vueuse/integrations/useQRCode";
 import { Button, Input } from "ant-design-vue";
 import { defineComponent } from "vue";
 import { any } from "vue-types";
-import { Image } from "@queenjs/ui";
 
 export default defineComponent({
   props: {
     record: any().isRequired,
   },
-  setup(props, { slots }) {
+  emits: ["edit", "update"],
+  setup(props, { slots, emit }) {
+    let shareLink = location.origin + "/share.html?id=" + props.record._id;
+    if (location.host == "www.infish.cn") {
+      shareLink =
+        location.origin +
+        "/projects/queenshow/share.html?id=" +
+        props.record._id;
+    }
+
+    const { copy } = useClipboard();
+
+    const qrUrl = useQRCode(shareLink, { margin: 2 });
+
+    const savaData = (key: string, value: string) => {
+      emit("update", {
+        _id: props.record._id,
+        [key]: value,
+      });
+    };
+
+    const changeThumbnail = () => {
+      savaData(
+        "thumbnail",
+        "https://infishwaibao.oss-cn-chengdu.aliyuncs.com/queenshow/img/Logo.8478c1b4.png"
+      );
+    };
+
     return () => {
       const { record } = props;
+
+      console.log("qrUrl: ", qrUrl);
+
       return (
         <div class="flex items-start">
           <div>
-            <div class="scroll w-375px max-h-600px overflow-y-auto bg-light-50">
+            <div class="scroll w-375px h-600px overflow-y-auto bg-light-50">
               {slots.preview?.()}
             </div>
-            <div class="mt-20px">
-              <Button type="primary" ghost>
+            <div class="mt-20px text-center">
+              <Button type="primary" ghost onClick={() => emit("edit")}>
                 编辑作品
               </Button>
             </div>
           </div>
           <div class="flex-1 ml-40px">
-            <h3>设置</h3>
+            <h3 class="mb-20px text-16px">设置</h3>
+
             <div class="flex">
-              <div>
+              <div class="relative">
                 <Image
-                  class="w-80px h-80px object-contain rounded-4px border-1px border-solid border-light-50"
+                  class="w-80px h-80px object-contain rounded-4px border-1px border-solid border-[#434343]"
                   src={record.thumbnail}
                 />
+                <div
+                  class="absolute left-0 bottom-0 w-1/1 text-center py-5px text-14px bg-dark-200 bg-opacity-80 cursor-pointer"
+                  onClick={changeThumbnail}
+                >
+                  更换封面
+                </div>
               </div>
               <div class="flex-1 ml-20px">
-                <Input placeholder="请输入分享标题" class="w-1/1" />
-                <Input placeholder="请输入分享标题" class="mt-10px w-1/1" />
+                <Input
+                  class="w-1/1"
+                  defaultValue={record.title}
+                  placeholder="请输入标题"
+                  onBlur={(e: any) => savaData("title", e.target.value)}
+                />
+                <Input placeholder="请输入描述" class="mt-10px w-1/1" />
+              </div>
+            </div>
+            <div class="mt-40px flex">
+              <div>
+                <h3 class=" text-16px">二维码</h3>
+                <img class="mt-20px w-120px" src={qrUrl.value} />
+                <div class="mt-10px text-center">
+                  <span class="ml-5px text-12px opacity-80">
+                    微信扫一扫分享
+                  </span>
+                </div>
+              </div>
+              <div class="flex-1 w-0 ml-60px">
+                <h3 class=" text-16px">链接分享</h3>
+                <div class="mt-20px">
+                  <div class="w-1/1 py-4px px-10px border-solid border-1px border-[#434343] rounded-2px truncate opacity-80">
+                    {shareLink}
+                  </div>
+                  <Button
+                    class="mt-10px"
+                    type="primary"
+                    ghost
+                    onClick={() => copy(shareLink)}
+                  >
+                    复制链接
+                  </Button>
+                </div>
               </div>
             </div>
           </div>

src/pages/website/Promotion2/components/controller.tsx → src/pages/website/Promotion2/controller.tsx

@@ -2,7 +2,7 @@ import { EditorModule } from "@/modules/editor/module";
 import { ResourceModule } from "@/modules/resource";
 import { PromotionController } from "@/modules/resource/controllers/PromotionController";
 import { PageListController } from "@queenjs/controllers";
-import ShareModal from "./ShareModal";
+import ShareModal from "./components/ShareModal";
 
 export function createPromotinController(
   resource: ResourceModule,
@@ -18,7 +18,11 @@ export function createPromotinController(
     editor.actions.initDesign(record._id);
     editor.actions.switchMode("preview");
     resource.showModal(
-      <ShareModal record={record}>
+      <ShareModal
+        record={record}
+        onEdit={() => ctrl.onEdit(record)}
+        onUpdate={(data) => editor.https.saveDesign(data)}
+      >
         {{
           preview: () => <editor.components.Preview />,
         }}

src/pages/website/Promotion2/index.tsx

@@ -2,7 +2,7 @@ import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
 import { defineComponent } from "vue";
 import PromotionUI from "./components";
-import { createPromotinController } from "./components/controller";
+import { createPromotinController } from "./controller";
 
 export default defineComponent({
   setup() {