collect share

src/modules/editor/components/CompUI/basicUI/Page/PageMusic.tsx

@@ -358,6 +358,7 @@ const VolumeSliderStyle = css`
 `;
 const MusicEditStyle = css`
   flex: 1;
+  position: relative !important;
 `;
 const AudioPlayerStyle = css`
   width: 100%;

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

@@ -11,12 +11,21 @@ export const ShareBox = defineComponent({
     const auth = useAuth();
     const userInfo: any = auth.store.userInfo;
     const isSys = userInfo.roles?.includes("system") ? true : false;
+    const isWk = store.isWk;
+
     let shareLink =
       location.origin +
       "/share.html?id=" +
       store.designData._id +
       "&isSys=" +
       isSys;
+    if (isWk) {
+      shareLink =
+        location.origin +
+        "/share.html?id=" +
+        store.designData._id +
+        "&isWk=true";
+    }
     // if (location.host == "www.infish.cn") {
     //   shareLink =
     //     location.origin +

src/modules/editor/components/Viewport/Slider/SliderRight/CompTree.tsx

@@ -83,6 +83,8 @@ export const CompTree = defineComponent({
         parentComp = helper.findParentComp(dropKey);
       }
       const currComp = helper.findComp(dragKey);
+      const currParent = helper.findParentComp(dragKey);
+
       if (!currComp) return;
       const currParentComp = helper.findParentComp(dragKey);
       const index = currParentComp?.children.default?.indexOf(currComp.id);
@@ -90,51 +92,52 @@ export const CompTree = defineComponent({
         currParentComp?.children.default?.splice(index as number, 1);
         helper.extendStreamCard(currParentComp?.id || "");
       }
+      actions.pickComp("");
       if (!info.dropToGap) {
         parentComp?.children.default == parentComp?.children.default || [];
         parentComp?.children.default?.unshift(currComp?.id);
-        sortCompInCard(parentComp, currComp.id);
+        if (currParent?.id != parentComp.id) {
+          sortCompInCard(parentComp, 0);
+        }
       } else {
         parentComp?.children.default?.splice(info.dropPosition, 0, currComp.id);
-        sortCompInCard(parentComp, currComp.id);
+        if (currParent?.id != parentComp.id) {
+          sortCompInCard(parentComp, info.dropPosition);
+        }
       }
+      nextTick(() => {
+        actions.pickComp(currComp.id);
+        helper.extendStreamCard(parentComp.id);
+      });
     };
-    const sortCompInCard = (parentComp: DesignComp, currCompId: string) => {
+    const sortCompInCard = (parentComp: DesignComp, index: number) => {
       if (parentComp?.compKey != "Container") {
         return;
       }
       const children = parentComp.children.default || [];
       if (children?.length > 0) {
-        actions.pickComp("");
-        for (let i = 0; i < children?.length; i++) {
-          const prveCompId = children[i - 1];
-          const nowCompId = children[i];
-          const nowComp = helper.findComp(nowCompId);
-          if (!prveCompId) {
-            const nowCompBound = helper.getCardCompBound(nowCompId);
-            if (!nowComp) {
-              continue;
-            }
-            const nowObj = new CompObject(nowComp);
-            nowObj.worldTransform.translate(-nowCompBound.x, -nowCompBound.y);
-            nowComp.layout.transformMatrix =
-              nowObj.worldTransform.getMatrixStr();
-            continue;
-          }
-          const prevCompBound = helper.getCardCompBound(prveCompId);
-          const prevComp = helper.findComp(prveCompId);
-          if (!prevComp || !nowComp) {
-            continue;
+        const prveCompId = children[index - 1];
+        const nowCompId = children[index];
+        const nowComp = helper.findComp(nowCompId);
+        if (!prveCompId) {
+          const nowCompBound = helper.getCardCompBound(nowCompId);
+          if (!nowComp) {
+            return;
           }
-          const obj = new CompObject(prevComp);
-          const yOffset = prevCompBound.h;
-          obj.worldTransform.translate(0, yOffset);
-          nowComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
+          const nowObj = new CompObject(nowComp);
+          nowObj.worldTransform.translate(-nowCompBound.x, -nowCompBound.y);
+          nowComp.layout.transformMatrix = nowObj.worldTransform.getMatrixStr();
+          return;
         }
-        nextTick(() => {
-          actions.pickComp(currCompId);
-          helper.extendStreamCard(parentComp.id);
-        });
+        const prevCompBound = helper.getCardCompBound(prveCompId);
+        const prevComp = helper.findComp(prveCompId);
+        if (!prevComp || !nowComp) {
+          return;
+        }
+        const obj = new CompObject(prevComp);
+        const yOffset = prevCompBound.h;
+        obj.worldTransform.translate(0, yOffset);
+        nowComp.layout.transformMatrix = obj.worldTransform.getMatrixStr();
       }
     };
 

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

@@ -48,12 +48,11 @@ export const editActions = EditorModule.action({
       compKey != "Image" &&
       compKey != "Rectage" &&
       compKey != "Line" &&
-      compKey != "Arc" && 
+      compKey != "Arc" &&
       compKey != "Triangle" &&
-      compKey != "Ellipse" && 
+      compKey != "Ellipse" &&
       compKey != "Polygon" &&
-      compKey != "Curve"
-
+      compKey != "Curve";
 
     let yOffset = 0;
     if (
@@ -310,9 +309,16 @@ export const editActions = EditorModule.action({
       }
       queenApi.showLoading("保存中");
       await this.controls.uploader.uploadBlobs(this.store.designData);
-      await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
-        this.store.designData
-      );
+      if (this.store.isWk) {
+        await this.https[this.store.isEditPage ? "saveWkDesign" : "saveComp"](
+          this.store.designData
+        );
+      } else {
+        await this.https[this.store.isEditPage ? "saveDesign" : "saveComp"](
+          this.store.designData
+        );
+      }
+
       queenApi.messageSuccess("保存成功");
     } catch (error: any) {
       throw Exception.error(error.toString());

src/modules/editor/module/actions/init.ts

@@ -31,11 +31,19 @@ export const initActions = EditorModule.action({
     const ret = await this.https.getDesignDetail(id, { isSys });
     this.store.setDesignData(ret.result);
   },
+  async initWkDesign(id: string) {
+    this.store.setWk(true);
+    const ret = await this.https.getWkDesignDetail(id);
+    this.store.setDesignData(ret.result);
+    return ret.result;
+  },
   // 切换模式
   switchMode(v: EditorMode) {
     this.store.setMode(v);
   },
-
+  setWkFlag(v: boolean) {
+    this.store.setWk(v);
+  },
   onViewReady(pageEl, selEl, viewPort) {
     this.store.currStreamCardId = this.store.streamCardIds[0];
     this.controls.selectCtrl.initEvents(pageEl, selEl, viewPort);

src/modules/editor/module/https/index.ts

@@ -31,4 +31,18 @@ export const https = EditorModule.http({
   createComp(data: any) {
     return this.request("/frame/create", { method: "POST", data });
   },
+  getWkDesignDetail(id: string) {
+    return this.request(`/wk/h5/detail/${id}`, {
+      method: "GET",
+      params: {
+        clientId: this.helper.getClientId(),
+      },
+    });
+  },
+  saveWkDesign(data: Partial<DesignTemp>) {
+    return this.request("/wk/h5/update", {
+      method: "POST",
+      data,
+    });
+  },
 });

src/modules/editor/module/stores/index.ts

@@ -7,6 +7,7 @@ export const store = EditorModule.store({
   state: () => ({
     textEditingState: false,
     mode: "editPage" as EditorMode,
+    isWk: false, //作品集内作品
     currCompId: "root",
     currStreamCardId: "",
     designData: new DesignTemp(),
@@ -17,7 +18,7 @@ export const store = EditorModule.store({
 
     selected: [] as string[], //选中的组件
     selectId: "", //选中的id唯一标识一次选中
-    croppImage:"", //裁剪图片
+    croppImage: "", //裁剪图片
   }),
   getters: {
     isEditMode(): boolean {
@@ -35,7 +36,6 @@ export const store = EditorModule.store({
     compMap(state) {
       return state.designData.compMap;
     },
-
     currComp(state) {
       return state.designData.compMap[state.currCompId];
     },
@@ -83,6 +83,9 @@ export const store = EditorModule.store({
     setMode(v: EditorMode) {
       this.store.mode = v;
     },
+    setWk(v: boolean) {
+      this.store.isWk = v;
+    },
     setGroupMode(status: boolean) {
       this.store.groupModeStatus = status;
     },

src/modules/resource/actions/collection.tsx

@@ -52,18 +52,35 @@ export const collectionAction = ResourceModule.action({
   },
   async getCommitHistoryDetail(id: string) {
     try {
-      const res = await this.https.commitHistoryDetail(id);
+      const res = await this.https.commitDetail(id);
       return res.result;
     } catch (e) {
       queenApi.messageError("未查询到数据！");
     }
   },
+  async updateCommitFlag(data: any) {
+    try {
+      const res = await this.https.updateCommitFlag(data);
+      return res.result;
+    } catch (e) {
+      console.log(e);
+    }
+  },
   async updateCommitData(data: any) {
     try {
       const res = await this.https.updateCommitData(data);
+      queenApi.messageSuccess("保存成功！");
       return res.result;
     } catch (e) {
       console.log(e);
     }
   },
+  async deleteCommitData(record: any) {
+    const res = await queenApi.showConfirm({
+      content: `删除后无法恢复，确定要删除：${record.title}？`,
+      type: "danger",
+    });
+    if (!res) return;
+    await this.https.deleteCommitData(record);
+  },
 });

src/modules/resource/components/CollectionEditModal.tsx → src/modules/resource/components/Collection/CollectionEditModal.tsx

@@ -20,7 +20,7 @@ import weekday from "dayjs/plugin/weekday";
 import { queenApi, useModal } from "queenjs";
 import { defineComponent, reactive } from "vue";
 import { any, string } from "vue-types";
-import { useResource } from "..";
+import { useResource } from "../..";
 
 const layout = {
   labelCol: { span: 8 },

src/modules/resource/components/CollectionListModal.tsx → src/modules/resource/components/Collection/CollectionListModal.tsx

@@ -1,14 +1,16 @@
-import { css, cx } from "@linaria/core";
-import { defineComponent, onMounted } from "vue";
-import { any } from "vue-types";
 import List from "@/components/AssetsList";
-import { PageListController } from "@queenjs/controllers";
-import { defineUI } from "queenjs";
+import { useEditor } from "@/modules/editor";
+import { EyeOutlined } from "@ant-design/icons-vue";
+import { css, cx } from "@linaria/core";
+import { IconMore } from "@queenjs/icons";
 import { Image, View } from "@queenjs/ui";
-import { useResource } from "..";
+import { Divider, Dropdown, Menu, Select } from "ant-design-vue";
 import dayjs from "dayjs";
-import { useEditor } from "@/modules/editor";
-import { Select } from "ant-design-vue";
+import { defineUI } from "queenjs";
+import { defineComponent, onMounted } from "vue";
+import { any } from "vue-types";
+import { useResource } from "../../";
+import { InnerListController } from "./innerListController";
 export default defineComponent({
   props: {
     record: any(),
@@ -16,34 +18,12 @@ export default defineComponent({
   setup(props, { emit }) {
     const resource = useResource();
     const editor = useEditor();
-    const ListCtrl = new PageListController(resource.config?.httpConfig);
-    ListCtrl.setCrudPrefix("/wk/h5");
-    ListCtrl.state.query = { id: props.record._id };
+    const ctrl = InnerListController(resource, editor);
+
+    ctrl.ListCtrl.state.query = { id: props.record._id };
     onMounted(() => {
-      ListCtrl.loadPage(1);
+      ctrl.ListCtrl.loadPage(1);
     });
-    const previewInModal = async (id: string, title: string) => {
-      if (!id) {
-        return;
-      }
-      const ret = await resource.actions.getCommitHistoryDetail(id);
-      if (!ret) {
-        return;
-      }
-      editor.store.setDesignData(ret);
-      editor.actions.switchMode("preview");
-      resource.showModal(
-        <div class={"!p-0"}>
-          <div class={"h-600px scrollbar"}>
-            <editor.components.Preview class="pointer-events-none" />
-          </div>
-        </div>,
-        {
-          title: title,
-          destroyOnClose: true,
-        }
-      );
-    };
 
     return () => {
       return (
@@ -52,17 +32,16 @@ export default defineComponent({
             gap="24px"
             class={"p-24px h-full scrollbar"}
             columns={6}
-            control={ListCtrl}
+            control={ctrl.ListCtrl}
             item={(item: any) => (
               <ListItem
                 item={item}
                 record={props.record}
-                onPreview={(id, title) => {
-                  previewInModal(id, title);
+                onMenu={(menu: string, item: any) => {
+                  ctrl.onMenuClick(menu, item);
                 }}
-                onEdit={async (record) => {
-                  await resource.actions.updateCommitData(record);
-                  ListCtrl.fresh();
+                onEdit={async (id: string) => {
+                  ctrl.onEdit(id);
                 }}
               />
             )}
@@ -77,7 +56,7 @@ const ListItem = defineUI({
     item: any(),
     record: any(),
   },
-  emits: ["edit", "preview"],
+  emits: ["edit", "preview", "menu"],
   setup(props, { emit }) {
     return () => {
       const { item, record } = props;
@@ -96,9 +75,15 @@ const ListItem = defineUI({
             <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 transition-opacity hover:opacity-90 active:opacity-80"
-                onClick={() => emit("preview", wks.id, h5?.title)}
+                onClick={() => emit("edit", wks.id)}
+              >
+                编辑
+              </div>
+              <div
+                class="text-white icon_action w-60px  ml-10px  leading-60px  cursor-pointer rounded-1/2 text-center transition-opacity hover:opacity-90 active:opacity-80"
+                onClick={() => emit("menu", "share", wks.id)}
               >
-                查看
+                分享
               </div>
             </div>
             {record.flags && record.flags.length > 0 && (
@@ -109,7 +94,7 @@ const ListItem = defineUI({
                   options={options}
                   onChange={(v) => {
                     wks.flag = v;
-                    emit("edit", {
+                    emit("menu", "changeFlag", {
                       id: record._id,
                       wkId: wks.id,
                       flag: wks.flag,
@@ -124,8 +109,32 @@ const ListItem = defineUI({
               <div class="text-white text-bold truncate">{h5?.title}</div>
               <div class="flex items-center text-opacity-60 text-white text-12px mt-5px">
                 {dayjs(wks.commitTime).format("YYYY.MM.DD")} 提交
+                <Divider type="vertical"></Divider>
+                {h5.views || 0} <EyeOutlined class={"ml-6px"} />
               </div>
             </div>
+            <Dropdown
+              placement="bottom"
+              overlay={
+                <Menu class="w-90px">
+                  <Menu.Item>
+                    <div
+                      onClick={() =>
+                        emit("menu", "delete", {
+                          title: h5?.title,
+                          worksId: wks.id,
+                          id: record._id,
+                        })
+                      }
+                    >
+                      删除
+                    </div>
+                  </Menu.Item>
+                </Menu>
+              }
+            >
+              <IconMore class="ml-10px text-22px cursor-pointer" />
+            </Dropdown>
           </div>
         </div>
       );

src/modules/resource/components/Collection/CollectionShare.tsx

@@ -0,0 +1,141 @@
+import { IconWechat } from "@/assets/icons";
+import { CollectionController } from "@/modules/resource/controllers/CollectionController";
+import { clipboard } from "@/utils";
+import { Image } from "@queenjs/ui";
+import { useQRCode } from "@vueuse/integrations/useQRCode";
+import { Button, Divider, Input } from "ant-design-vue";
+import { queenApi } from "queenjs";
+import { defineComponent, reactive } from "vue";
+import { any } from "vue-types";
+import { useResource } from "../..";
+import { SelectOneImage } from "@/pages/website/Material2/modal";
+
+export default defineComponent({
+  props: {
+    record: any().isRequired,
+    controller: any<CollectionController>().isRequired,
+  },
+  setup(props, { slots }) {
+    let shareLink =
+      location.origin + "/share.html?id=" + props.record._id + "&isWk=true";
+
+    const qrUrl = useQRCode(shareLink, { margin: 2 });
+
+    const state = reactive({
+      ...props.record,
+    });
+    const resource = useResource();
+    const updateItem = () => {
+      if (state.title == "") {
+        queenApi.messageError("标题不能为空！");
+        return;
+      }
+      if (state.desc && state.desc == "") {
+        queenApi.messageError("描述不能为空！");
+        return;
+      }
+      const record = { ...props.record };
+      for (const [key, value] of Object.entries(state)) {
+        record[key] = value;
+      }
+      props.controller.onMenuClick("save", record);
+    };
+    return () => {
+      const { controller, record } = props;
+      const { desc, thumbnail, title } = state;
+
+      return (
+        <div class="flex items-start">
+          <div>
+            <div class="scrollbar h-600px relative overflow-y-auto border-1px border-solid border-dark-50">
+              {slots.preview?.()}
+            </div>
+            <div class="mt-20px text-center">
+              <Button
+                ghost
+                type="primary"
+                onClick={() => controller.onEdit(record._id)}
+              >
+                编辑作品
+              </Button>
+            </div>
+          </div>
+          <div class="flex-1 ml-40px">
+            <h3 class="mb-20px text-16px">分享设置</h3>
+            <div class="flex items-start">
+              <div class="relative">
+                <Image
+                  class="w-80px h-80px object-contain rounded-4px border-1px border-solid border-[#434343]"
+                  src={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={async () => {
+                    const res: any = await resource.helper.uploadResource();
+                    state.thumbnail = res[0]?.file?.url;
+                  }}
+                >
+                  更换封面
+                </div>
+              </div>
+              <div class="flex-1 ml-20px">
+                <Input
+                  class="w-1/1"
+                  placeholder="请输入标题"
+                  defaultValue={title}
+                  onChange={(e: any) => {
+                    const title = e.target.value;
+                    state.title = title;
+                  }}
+                />
+                <Input
+                  class="mt-10px w-1/1"
+                  placeholder="请输入描述"
+                  defaultValue={desc}
+                  onChange={(e: any) => {
+                    const desc = e.target.value;
+                    state.desc = desc;
+                  }}
+                />
+              </div>
+            </div>
+            <div class="mt-30px text-center">
+              <Button type="primary" class="w-150px" onClick={updateItem}>
+                保存
+              </Button>
+            </div>
+            <Divider />
+            <div class="mt-40px flex">
+              <div>
+                <h3 class="text-16px">二维码</h3>
+                <div class="mt-20px">
+                  <img class="w-120px" src={qrUrl.value} />
+                </div>
+                <div class="flex items-center justify-center mt-6px">
+                  <IconWechat class="mr-5px text-20px !text-[#69bb64] leading-0" />
+                  <span class="opacity-80 text-12px">微信扫一扫分享</span>
+                </div>
+              </div>
+              <div class="flex-1 w-0 ml-50px">
+                <h3 class=" text-16px">链接分享</h3>
+                <div class="mt-20px">
+                  <div class="w-1/1 py-4px px-10px rounded-2px truncate opacity-80 bg-light-50 bg-opacity-8">
+                    {shareLink}
+                  </div>
+                  <Button
+                    class="mt-10px"
+                    type="primary"
+                    ghost
+                    onClick={() => clipboard.copy(shareLink)}
+                  >
+                    复制链接
+                  </Button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/modules/resource/components/Collection/innerListController.tsx

@@ -0,0 +1,61 @@
+import { EditorModule } from "@/modules/editor/module";
+import { ResourceModule } from "@/modules/resource";
+import { CollectionController } from "@/modules/resource/controllers/CollectionController";
+import { PageListController } from "@queenjs/controllers";
+import CollectionShare from "./CollectionShare";
+import { queenApi } from "queenjs";
+
+export function InnerListController(
+  resource: ResourceModule,
+  editor: EditorModule
+) {
+  const ctrl = new CollectionController();
+
+  ctrl.ListCtrl = new PageListController(resource.config?.httpConfig);
+  ctrl.ListCtrl.setCrudPrefix("/wk/h5");
+
+  const collectionItemShare = async (id: string) => {
+    const recordDtl = await editor.actions.initWkDesign(id);
+    editor.actions.switchMode("preview");
+    resource.showModal(
+      <CollectionShare record={recordDtl} controller={ctrl}>
+        {{
+          preview: () => (
+            <editor.components.Preview class="pointer-events-none" />
+          ),
+        }}
+      </CollectionShare>,
+      {
+        title: "编辑分享",
+        width: "1000px",
+        destroyOnClose: true,
+      }
+    );
+  };
+
+  ctrl.onMenuClick = async (key: string, record: any) => {
+    if (key == "changeFlag") {
+      await resource.actions.updateCommitFlag(record);
+      ctrl.ListCtrl.fresh();
+    }
+    if (key == "share") {
+      collectionItemShare(record);
+    }
+    if (key == "delete") {
+      await resource.actions.deleteCommitData(record);
+      ctrl.ListCtrl.fresh();
+    }
+    if (key == "save") {
+      await resource.actions.updateCommitData(record);
+      ctrl.ListCtrl.fresh();
+    }
+  };
+  ctrl.onEdit = async (id: string) => {
+    const _params = new URLSearchParams(decodeURIComponent(location.search));
+    const host = _params.get("host");
+    const url = `${location.origin}/editor.html?host=${host}#/?id=${id}&isWk=ture`;
+    location.href = url;
+  };
+
+  return ctrl;
+}

src/modules/resource/components/index.ts

@@ -1,8 +1,8 @@
 import MaterialItem from "./MaterialItem";
 import PromotionItem from "./PromotionItem";
 import ResourceManager from "./ResourceManager";
-import CollectionEditModal from "./CollectionEditModal";
-import CollectionListModal from "./CollectionListModal";
+import CollectionEditModal from "./Collection/CollectionEditModal";
+import CollectionListModal from "./Collection/CollectionListModal";
 
 export const compoents = {
   MaterialItem,

src/modules/resource/http.ts

@@ -66,12 +66,18 @@ export const http = ResourceModule.http({
   commitCollection(data: any) {
     return this.request("/works/commit", { method: "POST", data });
   },
-  commitHistoryDetail(id: any) {
+  commitDetail(id: any) {
     return this.request(`/wk/h5/detail/${id}`, { method: "GET" });
   },
-  updateCommitData(data: any) {
+  updateCommitFlag(data: any) {
     return this.request("/wk/update/flag", { method: "POST", data });
   },
+  updateCommitData(data: any) {
+    return this.request("/wk/h5/update", { method: "POST", data });
+  },
+  deleteCommitData(data: any) {
+    return this.request(`/wk/h5/delete`, { method: "POST", data });
+  },
 });
 
 /**

src/pages/editor/EditPage/index.tsx

@@ -13,11 +13,15 @@ export default defineComponent(() => {
   const params = new URLSearchParams(location.hash.split("?")[1]);
   editor.actions.switchMode((params.get("mode") || "editPage") as EditorMode);
   const prodId = params.get("id");
-
+  const isWk = params.get("isWk");
   auth.actions.on("getUserInfo:success", () => {
     if (prodId) {
       const userInfo: any = auth.store.userInfo;
       const isSys = userInfo.roles?.includes("system") ? true : false;
+      if (isWk) {
+        editor.actions.initWkDesign(prodId);
+        return;
+      }
       editor.actions.initDesign(prodId, isSys);
     } else {
       editor.jumpIndexHtml();

src/pages/h5/share/Promotion.tsx

@@ -7,11 +7,17 @@ export default defineComponent(() => {
   const params = new URLSearchParams(location.href.split("?")[1]);
   const id = params.get("id");
   const isSys = params.get("isSys");
+  const isWk = params.get("isWk");
 
   editor.actions.switchMode("preview");
 
   if (id) {
-    editor.actions.initDesign(id, isSys?.split("#")[0]);
+    if (isWk) {
+      editor.actions.initWkDesign(id);
+    } else {
+      editor.actions.initDesign(id, isSys?.split("#")[0]);
+    }
+
     editor.controls.wxCtrl.setup(window.location.href);
 
     editor.actions.on("initDesign:success", () => {

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

@@ -68,11 +68,7 @@ export default defineComponent({
       previewInModal("当前提交");
     };
     const historyPreview = async (hisId: string) => {
-      const ret = await resource.actions.getCommitHistoryDetail(hisId);
-      if (!ret) {
-        return;
-      }
-      editor.store.setDesignData(ret);
+      await editor.actions.initWkDesign(hisId);
       previewInModal("历史提交");
     };
     const collectionPreview = async (collection: any) => {