Merge branch 'master' of http://124.70.149.18:10880/lianghj/queenshow

src/modules/editor/actions/edit.ts

@@ -5,12 +5,12 @@ import { DesignComp } from "../defines/DesignTemp/DesignComp";
 
 export const editActions = EditorModule.action({
   // 添加组件到画布
-  addCompToDesign(compKey: ICompKeys) {
+  addCompToDesign(compKey: ICompKeys, index?: number) {
     let designComp: DesignComp;
-    if (this.store.currComp?.compKey === "Container") {
+    if (index === undefined && this.store.currComp?.compKey === "Container") {
       designComp = this.store.insertCompContainer(compKey, this.store.currComp);
     } else {
-      designComp = this.store.insertDesignContent(compKey);
+      designComp = this.store.insertDesignContent(compKey, index);
     }
     this.actions.pickComp(designComp.id);
   },

src/modules/editor/components/CompUI/basicUI/Container/index.ts

@@ -6,7 +6,7 @@ import { GroupNumber } from "../../formItems/GroupNumber";
 export { Component } from "./component";
 
 export const { options, useCompData } = createOptions({
-  name: "定位容器",
+  name: "容器",
   thumbnail: Dict_Imgs.Default,
   value: {
     position: [0, 0],

src/modules/editor/components/CompUI/basicUI/Image/component.tsx

@@ -1,50 +1,57 @@
 import { useEditor } from "@/modules/editor";
-import { queenApi } from "queenjs";
-import { string , object} from "vue-types";
+import { defineComponent } from "vue";
+import { object, string } from "vue-types";
 import { useCompData } from ".";
-import { createUIComp } from "../../defines/createUIComp";
+import { View } from "../View";
 
-export const Component = createUIComp({
+export const Component = defineComponent({
   props: {
     compId: string(),
-    value: object<{url:string, x:number, y:number, s:number}>(),
+    value: object<{ url: string; x: number; y: number; s: number }>(),
   },
   emits: ["update:value"],
   setup(props, { emit }) {
     const comp = props.compId ? useCompData(props.compId) : null;
     const { store, controls } = useEditor();
     async function changeVal() {
-      
       const url = await controls.pickCtrl.pickOneImage();
       if (!url) return;
-      
+
       if (comp) {
         comp.value.url = url;
         comp.value.x = 0;
         comp.value.y = 0;
         comp.value.s = 1;
       } else {
-
-        emit("update:value", {url, x: 0, y: 0, s: 1});
+        emit("update:value", { url, x: 0, y: 0, s: 1 });
       }
     }
 
     return () => {
-
       const value = comp?.value || props.value;
-      const scale =  value?.s || 1;
+      const scale = value?.s || 1;
       const ox = value?.x || 0;
       const oy = value?.y || 0;
-      const objFit =  (scale + "" == "1") && (ox + "") == "0" &&  (oy + "") == "0" ? "object-cover" : "object-contain"
-      
+      const objectFit =
+        scale + "" == "1" && ox + "" == "0" && oy + "" == "0"
+          ? "cover"
+          : "contain";
+
       return (
-        <img
-          class={"w-1/1 h-1/1 " + objFit}
-          style={{transform: `scale(${scale}) translate(${ox}%,${oy}%)`}}
-          src={value?.url}
+        <View
+          compId={props.compId}
           onDblclick={store.isEditMode ? changeVal : undefined}
-        />
-      )
-    }
+        >
+          <img
+            class={"w-1/1 h-1/1 object-cover pointer-events-none"}
+            style={{
+              transform: `scale(${scale}) translate(${ox}%,${oy}%)`,
+              objectFit,
+            }}
+            src={value?.url}
+          />
+        </View>
+      );
+    };
   },
 });

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

@@ -9,7 +9,8 @@ export const View = defineComponent({
   props: {
     compId: string(),
   },
-  setup(props, { slots }) {
+  emits: ["dblclick"],
+  setup(props, { slots, emit }) {
     const { store, actions, helper } = useEditor();
     const comp =
       (props.compId && store.designCompMap.get(props.compId)) ||
@@ -83,13 +84,16 @@ export const View = defineComponent({
               actions.pickComp(props.compId as string);
             }
           }}
+          onDblclick={() => emit("dblclick")}
         >
           <div class="view_content" style={createContentStyle()}>
             {slots.default?.()}
           </div>
         </div>
       ) : (
-        <div class="view_inside">{slots.default?.()}</div>
+        <div class="view_inside" onDblclick={() => emit("dblclick")}>
+          {slots.default?.()}
+        </div>
       );
     };
   },

src/modules/editor/components/CompUI/basicUI/index.ts

@@ -0,0 +1,3 @@
+export * as Text from "./Text";
+export * as Image from "./Image";
+export * as Container from "./Container";

src/modules/editor/components/CompUI/customUI/Cover/component.tsx → src/modules/editor/components/CompUI/customUI/Covers/Cover/component.tsx

@@ -3,8 +3,8 @@ import { isPc } from "@queenjs/utils";
 import { onMounted, ref } from "vue";
 import { string } from "vue-types";
 import { useCompData } from ".";
-import { Text } from "../..";
-import { createUIComp } from "../../defines/createUIComp";
+import { Text } from "../../..";
+import { createUIComp } from "../../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {

src/modules/editor/components/CompUI/customUI/Cover/index.ts → src/modules/editor/components/CompUI/customUI/Covers/Cover/index.ts

@@ -1,6 +1,6 @@
 import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../defines/createAttrsForm";
-import { createOptions } from "../../defines/createOptions";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
 
 export { Component } from "./component";
 

src/modules/editor/components/CompUI/customUI/Covers/Cover2/component.tsx

@@ -0,0 +1,64 @@
+import { css, cx } from "@linaria/core";
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { children } = useCompData(props.compId);
+
+    return () => (
+      <div class={cx(rootStyles, "overflow-hidden")}>
+        <div class="bg flex flex-col"></div>
+        <div class="relative z-1 overflow-hidden ">
+          <div class="mt-0.4rem h-1.2rem text-30px text-center text_main">
+            <Text.Component compId={children.title.id} />
+          </div>
+          <div class="h-10.22rem mt-10px flex flex-1">
+            <div class="ml-0.64rem">
+              <Image.Component
+                compId={children.img1.id}
+                class="w-4.5rem h-10.22rem bg-gray-500 object-cover"
+              />
+            </div>
+            <div class="ml-0.3rem flex flex-col justify-between">
+              <Image.Component
+                compId={children.img2.id}
+                class="w-1.67rem h-3.06rem bg-gray-500 object-cover"
+              />
+              <Image.Component
+                compId={children.img3.id}
+                class="w-1.67rem h-2.08rem bg-gray-500 object-cover"
+              />
+            </div>
+          </div>
+          <div class="absolute"></div>
+        </div>
+      </div>
+    );
+  },
+});
+
+const rootStyles = css`
+  .bg {
+    position: absolute;
+    width: 100%;
+    z-index: 0;
+    height: 9.28rem;
+    background-image: linear-gradient(to right, #000 59%, #fff 59%);
+  }
+  .text_main {
+    color: #fff;
+    background-image: linear-gradient(to right, #000 59%, #fff 59%);
+    font-size: 0.8rem;
+    span {
+      color: #fff;
+      mix-blend-mode: difference;
+      text-transform: uppercase;
+    }
+  }
+`;

src/modules/editor/components/CompUI/customUI/Covers/Cover2/index.ts

@@ -0,0 +1,32 @@
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "标题",
+  thumbnail: require("./thumbnail.jpg"),
+  value: {},
+  children: {
+    img1: {
+      value: {
+        url: require("./img_1.png"),
+      },
+    },
+    img2: {
+      value: {
+        url: require("./img_2.jpg"),
+      },
+    },
+    img3: {
+      value: {
+        url: require("./img_3.jpg"),
+      },
+    },
+    title: {
+      value: `<p style="text-align:center;"><span style="color:hsl(0, 0%, 60%);font-size:28px;">NEW</span><span style="font-size:28px;"> &nbsp; &nbsp;FasHION</span></p><p>&nbsp;</p>`,
+    },
+  },
+});
+
+export const Form = createAttrsForm([]);

src/modules/editor/components/CompUI/index.ts

@@ -3,8 +3,8 @@ export * as Text from "./basicUI/Text";
 export * as Container from "./basicUI/Container";
 export * as Card from "./customUI/Cards/Card";
 export * as CardList from "./customUI/Cards/CardList";
-export * as Cover from "./customUI/Cover";
+export * as Cover from "./customUI/Covers/Cover";
+export * as Cover2 from "./customUI/Covers/Cover2";
 export * as Title1 from "./customUI/Titles/Title1";
 export * as Title2 from "./customUI/Titles/Title2";
 export * as Card2 from "./customUI/Cards/Card2";
-

src/modules/editor/components/Viewport/Content/index.tsx

@@ -46,8 +46,16 @@ export default defineUI({
         </div>
         {store.isEditMode ? (
           <Container
+            class="!min-h-750px"
+            group-name="canvas"
             style={store.designData.pageStyle}
-            onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
+            onDrop={(e: any) => {
+              if (e.payload) {
+                actions.addCompToDesign(e.payload, e.addedIndex);
+              } else {
+                actions.moveComp(e.removedIndex, e.addedIndex);
+              }
+            }}
             non-drag-area-selector={".drag-disable"}
           >
             {compsGroup.value.normalArr.map((d) => {
@@ -71,6 +79,7 @@ export default defineUI({
 const contentStyle = css`
   position: relative;
   border: 1px solid transparent;
+  user-select: none;
   @apply min-h-750px bg-white;
 
   .dndrop-container.vertical > .dndrop-draggable-wrapper {

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

@@ -2,6 +2,9 @@ import { useEditor } from "@/modules/editor";
 import { ICompKeys } from "@/modules/editor/typings";
 import { Radio } from "ant-design-vue";
 import { defineUI } from "queenjs";
+import { Container, Draggable } from "vue-dndrop";
+import * as basicUI from "../../CompUI/basicUI";
+import { css } from "@linaria/core";
 
 export default defineUI({
   setup() {
@@ -10,29 +13,78 @@ export default defineUI({
     return () => (
       <div class="h-full flex flex-col">
         <div class="p-16px border-bottom !border-2px">资源中心</div>
-        <div class="my-16px flex-1 flex flex-col h-0">
-          <Radio.Group  class="!mx-16px">
+        <div class="m-16px flex-1 flex flex-col h-0">
+          <Radio.Group>
             <Radio.Button>模板</Radio.Button>
             <Radio.Button>组件</Radio.Button>
           </Radio.Group>
-          <div class="p-16px space-y-10px flex-1 scrollbar ">
-            {Object.entries(editor.config.compUI).map(([compKey, uiOpt], i) => {
+          <div class="text-16px font-bold my-16px">基础组件</div>
+          <Container
+            class={basicStyle}
+            orientation="horizontal"
+            behaviour="copy"
+            group-name="canvas"
+            get-child-payload={(index: number) => {
+              return Object.keys(basicUI)[index];
+            }}
+          >
+            {Object.entries(basicUI).map(([compKey, uiOpt]) => {
               return (
-                <div
-                  class="text-center leading-50px bg-dark-50 rounded"
-                  key={i}
-                  onClick={() =>
-                    editor.actions.addCompToDesign(compKey as ICompKeys)
-                  }
-                >
-                  <img class="w-full rounded" src={uiOpt.options.thumbnail} alt="封面图" />
-                  {/* {uiOpt.options.name} */}
-                </div>
+                <Draggable key={compKey}>
+                  <div
+                    class="draggable-item text-center"
+                    onClick={() =>
+                      editor.actions.addCompToDesign(compKey as ICompKeys)
+                    }
+                  >
+                    <img
+                      class="w-full rounded pointer-events-none"
+                      src={uiOpt.options.thumbnail}
+                      alt="封面图"
+                    />
+                    {uiOpt.options.name}
+                  </div>
+                </Draggable>
               );
             })}
-          </div>
+          </Container>
+          <div class="text-16px font-bold my-16px">模块组件</div>
+          <Container
+            class="-mx-16px p-16px space-y-10px flex-1 scrollbar"
+            behaviour="copy"
+            group-name="canvas"
+            get-child-payload={(index: number) => {
+              return Object.keys(editor.config.compUI)[index];
+            }}
+          >
+            {Object.entries(editor.config.compUI).map(([compKey, uiOpt]) => {
+              return (
+                <Draggable>
+                  <div
+                    class="text-center leading-50px bg-dark-50 rounded draggable-item"
+                    key={compKey}
+                    onClick={() =>
+                      editor.actions.addCompToDesign(compKey as ICompKeys)
+                    }
+                  >
+                    <img
+                      class="w-full rounded pointer-events-none"
+                      src={uiOpt.options.thumbnail}
+                      alt="封面图"
+                    />
+                    {/* {uiOpt.options.name} */}
+                  </div>
+                </Draggable>
+              );
+            })}
+          </Container>
         </div>
       </div>
     );
   },
 });
+
+const basicStyle = css`
+  margin: -10px;
+  border-spacing: 10px;
+`;

src/modules/editor/stores/index.ts

@@ -41,7 +41,7 @@ export const store = EditorModule.store({
       this.store.initDesignCompMap();
     },
     insertDesignContent(compKey: ICompKeys, index?: number) {
-      index || (index = this.store.designData.content.length);
+      index === undefined && (index = this.store.designData.content.length);
       const options = this.config.compUI[compKey].options;
       const comp = new DesignComp({
         compKey,