update

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/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/defines/DesignTemp/DesignComp.ts

@@ -12,14 +12,14 @@ export class DesignComp {
 
   constructor(data?: Partial<DesignComp>) {
     if (!data) return;
-    const newData = filterObj(data);
+    const newData = cloneDeep(filterObj(data));
 
     if (newData.children) {
       Object.entries(newData.children).forEach(([key, value]) => {
         newData.children[key] = new DesignComp(value as any);
       });
     }
-    Object.assign(this, cloneDeep(newData));
+    Object.assign(this, newData);
   }
 }
 

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,