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

src/assets/icons/components/IconPreview.tsx

@@ -0,0 +1,3 @@
+
+import { createIcon } from '@queenjs/icons';
+export const IconPreview = createIcon(<svg viewBox="0 0 20 20"><g transform="translate(-331.499 -335)"><rect fill="#fff" opacity="0.9" width="20" height="20" rx="3" transform="translate(331.499 335)"/><path fill="#262626" d="M91.33,192c2.2,0,4.163,1.388,5.884,4.1a.745.745,0,0,1,0,.8c-1.721,2.712-3.684,4.1-5.884,4.1s-4.163-1.388-5.884-4.1a.745.745,0,0,1,0-.8C87.167,193.388,89.13,192,91.33,192Zm0,1.8a2.7,2.7,0,1,0,2.7,2.7A2.7,2.7,0,0,0,91.33,193.8Zm0,4.5a1.8,1.8,0,1,0-1.8-1.8A1.8,1.8,0,0,0,91.33,198.3Z" transform="translate(250.169 148.532)"/></g></svg>)

src/assets/icons/index.ts

@@ -34,6 +34,7 @@ export * from "./components/IconMove";
 export * from "./components/IconMusic";
 export * from "./components/IconPlay";
 export * from "./components/IconPlay2";
+export * from "./components/IconPreview";
 export * from "./components/IconProfile";
 export * from "./components/IconQueen";
 export * from "./components/IconResizeY";

src/assets/icons/svg/preview.svg

@@ -0,0 +1 @@
+<svg viewBox="0 0 20 20"><g transform="translate(-331.499 -335)"><rect fill="#fff" opacity="0.9" width="20" height="20" rx="3" transform="translate(331.499 335)"/><path fill="#262626" d="M91.33,192c2.2,0,4.163,1.388,5.884,4.1a.745.745,0,0,1,0,.8c-1.721,2.712-3.684,4.1-5.884,4.1s-4.163-1.388-5.884-4.1a.745.745,0,0,1,0-.8C87.167,193.388,89.13,192,91.33,192Zm0,1.8a2.7,2.7,0,1,0,2.7,2.7A2.7,2.7,0,0,0,91.33,193.8Zm0,4.5a1.8,1.8,0,1,0-1.8-1.8A1.8,1.8,0,0,0,91.33,198.3Z" transform="translate(250.169 148.532)"/></g></svg>

src/modules/editor/components/CompUI/basicUI/View.tsx

@@ -29,6 +29,9 @@ export const View = defineComponent({
       const m = obj.worldTransform.clone();
       m.invert();
 
+      let isFocus = store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId;
+      isFocus = isFocus || store.currCompId == props.compId;
+       
       return (
         <div
           ref={compRef}
@@ -37,7 +40,7 @@ export const View = defineComponent({
             store.isEditMode && controls.selectCtrl._state != 0 && editCompStyle,
             isGroupComp && groupCompCls,
             store.currStreamCardId == props.compId && CurrCompStyle,
-            store.isEditMode && store.selected.length > 1 && store.lastSelected == props.compId && AnchorCompStyle
+            isFocus  && AnchorCompStyle
           ]}
           style={helper.createStyle(comp.layout)}
           onClick={(e) => {

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates/PreviewTplModal.tsx

@@ -0,0 +1,54 @@
+import { Button } from "ant-design-vue";
+import dayjs from "dayjs";
+import { defineUI } from "queenjs";
+import { object } from "vue-types";
+
+export default defineUI({
+  props: {
+    data: object<any>(),
+  },
+  emits: ["click"],
+  setup(props, { emit }) {
+    const shareLink = `${location.origin}/share.html?id=${props.data._id}&isSys=true`;
+
+    return () => {
+      const { data } = props;
+
+      return (
+        <div class="flex">
+          <div class="w-660px h-660px py-20px bg-[#1F1F1F]">
+            <iframe
+              class="w-375px h-full mx-140px"
+              src={shareLink}
+              frameborder="0"
+              scrolling="no"
+            ></iframe>
+          </div>
+          <div class="flex-1 ml-40px">
+            <div class="mt-35px text-22px text-light-50 leading-snug">
+              {data.title}
+            </div>
+            <div class="mt-18px text-20px text-light-50 opacity-70 leading-tight">
+              {data.desc}
+            </div>
+            <div class="mt-40px">
+              <Button
+                class=""
+                block
+                type="primary"
+                size="large"
+                onClick={() => emit("click")}
+              >
+                使用模板
+              </Button>
+            </div>
+            <div class="mt-80px flex items-center justify-between">
+              <span>上架时间：</span>
+              <span>{dayjs(data.updateTime).format("YYYY.MM.DD")}</span>
+            </div>
+          </div>
+        </div>
+      );
+    };
+  },
+});

src/modules/editor/components/Viewport/Slider/SliderLeft/Templates/index.tsx

@@ -1,9 +1,13 @@
 import Empty from "@/components/Empty";
 import { useEditor } from "@/modules/editor";
 import { useResource } from "@/modules/resource";
+import { IconEyeOn } from "@queenjs/icons";
 import { Image, Loadmore } from "@queenjs/ui";
-import { defineUI } from "queenjs";
+import { defineUI, queenApi } from "queenjs";
+import Modal from "queenjs/adapter/vue/components/modal";
 import { Container, Draggable } from "vue-dndrop";
+import PreviewTplModal from "./PreviewTplModal";
+import { IconPreview } from "@/assets/icons";
 
 export default defineUI({
   setup() {
@@ -12,6 +16,23 @@ export default defineUI({
     const ctrl = source.controls.sysTplListCtrl;
     ctrl.loadPage(1);
 
+    const preview = (record: any) => {
+      queenApi.dialog(
+        <PreviewTplModal
+          data={record}
+          onClick={async () => {
+            await editor.actions.clickTplToDesign(record);
+            Modal.clear();
+          }}
+        ></PreviewTplModal>,
+        {
+          width: "1000px",
+          title: "模板预览",
+          destroyOnClose: true,
+        }
+      );
+    };
+
     return () => {
       const dataSource = ctrl.state.list;
 
@@ -33,7 +54,7 @@ export default defineUI({
               return (
                 <Draggable key={item._id}>
                   <div
-                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                    class="draggable-item relative"
                     key={item._id}
                     title={item.title}
                     style={{ aspectRatio: 1 }}
@@ -44,6 +65,15 @@ export default defineUI({
                       src={item.thumbnail}
                       size={240}
                     />
+                    <div class="absolute w-1/1 h-1/1 top-0 left-0 bg-dark-500 bg-opacity-20 transition opacity-0 hover:(opacity-100) text-dark-500">
+                      <IconPreview
+                        class="absolute right-6px top-6px text-22px bg-light-50 rounded-2px cursor-pointer hover:opacity-80 text-dark-500 transition"
+                        onClick={(e: any) => {
+                          e.stopPropagation();
+                          preview(item);
+                        }}
+                      />
+                    </div>
                   </div>
                 </Draggable>
               );

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

@@ -27,7 +27,9 @@ export const CompTree = defineComponent({
       treeData() {
         const rootComp = helper.findRootComp();
 
-        function getCompChildren(ids: string[]): TreeItem[] {
+        function getCompChildren(ids: string[], revert = false): TreeItem[] {
+          if (revert) ids = ids.reverse();
+          
           return ids.map((id) => {
             const comp = helper.findComp(id) as DesignComp;
             return {
@@ -37,7 +39,7 @@ export const CompTree = defineComponent({
                 compUICtrl.state.components.get(comp.compKey)?.name ||
                 "未命名",
               value: comp.id,
-              children: getCompChildren(comp.getChildIds()),
+              children: getCompChildren(comp.getChildIds(), true),
             };
           });
         }

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

@@ -816,8 +816,6 @@ export const editActions = EditorModule.action({
   },
   // 取消打组
   cancelGroupComps(groupComp: DesignComp) {
-    console.log("cancel group");
-
     const childs = groupComp.children.default || [];
     const objC = this.controls.selectCtrl.objContainer as ObjsContainer;
     const parentMtrx = objC.parent.worldTransform.clone();
@@ -831,7 +829,7 @@ export const editActions = EditorModule.action({
     const card = paths[1];
     const parentChilds = (card.children.default || []).filter(item=>item != groupComp.id);
     parentChilds.push(...childs);
-    card.children.default = childs;
+    card.children.default = parentChilds;
 
     this.actions.selectObjs([childs[0]]);
   },

src/pages/h5/share/Promotion.tsx

@@ -4,7 +4,7 @@ import { defineComponent } from "vue";
 
 export default defineComponent(() => {
   const editor = initEditor();
-  const params = new URLSearchParams(location.href.split("?")[1]);
+  const params = new URLSearchParams(location.href.split("?")[1].split("#")[0]);
   const id = params.get("id");
   const isSys = params.get("isSys");
   const isWk = params.get("isWk");
@@ -15,7 +15,7 @@ export default defineComponent(() => {
     if (isWk) {
       editor.actions.initWkDesign(id);
     } else {
-      editor.actions.initDesign(id, isSys?.split("#")[0]);
+      editor.actions.initDesign(id, isSys);
     }
 
     editor.controls.wxCtrl.setup(window.location.href);
@@ -41,7 +41,7 @@ export default defineComponent(() => {
 
   return () => (
     <div class="flex items-center justify-center h-100vh bg-gray-100">
-      <div class={isPc() ? `h-668px scrollbar` : `h-full`}>
+      <div class={isPc() ? `h-668px scrollbar` : `h-full overflow-x-hidden`}>
         <editor.components.Preview />
       </div>
     </div>