update

src/modules/editor/components/Canvas/index.tsx

@@ -3,26 +3,14 @@ import { useEditor } from "../..";
 
 export default defineUI({
   setup() {
-    const editor = useEditor();
-    const { store } = editor;
-    return () => {
-      const { content } = store.designData;
-      return (
-        <div>
-          {content.map((d) => {
-            const Comp: any = editor.config.compUI[d.compKey];
-            return (
-              <Comp
-                key={d.id}
-                compId={d.id}
-                v-model={[d.value, "value"]}
-                background={d.background}
-                layout={d.layout}
-              />
-            );
-          })}
-        </div>
-      );
-    };
+    const { store, config } = useEditor();
+    return () => (
+      <div>
+        {store.designData.content.map((d) => {
+          const Comp: any = config.compUI[d.compKey].Component;
+          return <Comp key={d.id} compId={d.id} />;
+        })}
+      </div>
+    );
   },
 });

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

@@ -1,8 +1,8 @@
 import { useEditor } from "@/modules/editor";
 import { queenApi } from "queenjs";
 import { string } from "vue-types";
-import { createUIComp } from "../../defines/createUIComp";
 import { useCompData } from ".";
+import { createUIComp } from "../../defines/createUIComp";
 
 export const Component = createUIComp({
   props: {

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

@@ -72,7 +72,7 @@ export const View = defineComponent({
       return isComp ? (
         <div
           class={[
-            store.isEditMode && viewStyle,
+            viewStyle,
             store.isEditMode && isSelected && "view_selected",
             bgClasses,
           ]}
@@ -98,10 +98,6 @@ export const View = defineComponent({
 const viewStyle = css`
   position: relative;
   font-size: 0;
-  /* 
-  > * {
-    pointer-events: none;
-  } */
 
   .view_content {
     display: inline-block;
@@ -115,14 +111,6 @@ const viewStyle = css`
   }
 
   &.view_selected {
-    > * {
-      pointer-events: auto;
-    }
-
-    &::after {
-      display: none;
-    }
-
     > .view_content {
       outline: 1px solid @inf-primary-color;
     }

src/modules/editor/components/CompUI/customUI/Cards/Card/component.tsx

@@ -0,0 +1,28 @@
+import { string } from "vue-types";
+import { useCompData } from ".";
+import { Image, Text } from "../../..";
+import { useEditor } from "../../../../..";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { designToNaturalSize } = useEditor().helper;
+    const { value } = useCompData(props.compId);
+
+    return () => (
+      <div class="flex">
+        <Image.Component
+          style={{
+            width: designToNaturalSize(value.imgSize[0]),
+            height: designToNaturalSize(value.imgSize[1]),
+          }}
+          v-model={[value.img, "value"]}
+        />
+        <Text.Component class="flex-1 ml-0.1rem" v-model={[value.desc, "value"]} />
+      </div>
+    );
+  },
+});

src/modules/editor/components/CompUI/customUI/Cards/Card/index.tsx

@@ -0,0 +1,26 @@
+import { Dict_Imgs } from "@/dict";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { createOptions } from "../../../defines/createOptions";
+import { GroupNumber } from "../../../formItems/GroupNumber";
+
+export { Component } from "./component";
+
+export const { options, useCompData } = createOptions({
+  name: "卡片",
+  value: {
+    img: Dict_Imgs.Default,
+    imgSize: [240, 240],
+    desc: "描述",
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "图片尺寸",
+    dataIndex: "value.imgSize",
+    component: GroupNumber,
+    props: {
+      labels: ["宽", "高"],
+    },
+  },
+]);

src/modules/editor/components/CompUI/customUI/Cards/Card1/component.tsx

@@ -1,75 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { css } from "@linaria/core";
-import { reactive, watch } from "vue";
-import { string } from "vue-types";
-import { Image, Text } from "../../..";
-import { createUIComp } from "../../../defines/createUIComp";
-import { useCompData } from ".";
-
-export const Component = createUIComp({
-  props: {
-    compId: string().isRequired,
-  },
-  setup(props) {
-    const { value, children } = useCompData(props.compId);
-
-    watch(
-      () => [value.cardColumns],
-      () => {
-        const { cardColumns, list } = value;
-        const offset = cardColumns - list.length;
-        if (offset > 0) {
-          Array.from({ length: offset }, () => {
-            list.push({ name: "name", img: Dict_Imgs.Default, desc: "xxx" });
-          });
-        } else {
-          list.splice(cardColumns, offset * -1);
-        }
-      }
-    );
-
-    return () => (
-      <>
-        <Text.Component compId={children.title.id} />
-        <Text.Component compId={children.desc.id} />
-        <div class="flex space-x-16px">
-          {value.list.map((d, i) => (
-            <div class="w-0 flex-1 relative">
-              <Image.Component
-                class={imgStyle}
-                style={{ borderColor: value.themeColor }}
-                v-model={[d.img, "value"]}
-              />
-              <div
-                class={numberStyle}
-                style={{ backgroundColor: value.themeColor }}
-              >
-                {(++i / 100).toString().split(".")[1]}
-              </div>
-              <Text.Component class="mt-24px" v-model={[d.name, "value"]} />
-              <Text.Component v-model={[d.desc, "value"]} />
-            </div>
-          ))}
-        </div>
-      </>
-    );
-  },
-});
-
-const imgStyle = css`
-  border-bottom: 2px solid;
-`;
-
-const numberStyle = css`
-  position: absolute;
-  left: 50%;
-  border-radius: 50%;
-  width: 0.8rem;
-  height: 0.8rem;
-  text-align: center;
-  font-size: 0.18rem;
-  line-height: 0.8rem;
-  box-sizing: content-box;
-  border: 3px solid #fff;
-  transform: translate(-50%, -50%);
-`;

src/modules/editor/components/CompUI/customUI/Cards/Card1/index.tsx

@@ -1,42 +0,0 @@
-import { Dict_Imgs } from "@/dict";
-import { createAttrsForm } from "../../../defines/createAttrsForm";
-import { createOptions } from "../../../defines/createOptions";
-import { createColorOpts } from "../../../defines/formOpts/createColorOpts";
-
-export { Component } from "./component";
-
-export const { options, useCompData } = createOptions({
-  name: "卡片",
-  value: {
-    cardColumns: 3,
-    themeColor: "#333333",
-    list: Array.from({ length: 3 }, (d, i) => ({
-      name: `demo${i + 1}`,
-      desc: "xxxxx",
-      img: Dict_Imgs.Default,
-    })),
-  },
-  background: { color: "#333333" },
-  children: {
-    title: {
-      value: "新科技反光面料 引领潮流新风尚",
-    },
-    desc: {
-      value: "时尚 ｜ 精致 ｜ 百搭",
-    },
-  },
-});
-
-export const Form = createAttrsForm([
-  {
-    label: "卡片数量",
-    dataIndex: "value.cardColumns",
-    component: "Input",
-  },
-  {
-    label: "主题颜色",
-    dataIndex: "value.themeColor",
-    component: "ColorPicker",
-    ...createColorOpts(),
-  },
-]);

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

@@ -20,10 +20,4 @@ export const { options, useCompData } = createOptions({
   },
 });
 
-export const Form = createAttrsForm([
-  {
-    label: "标题",
-    dataIndex: "value.title",
-    component: "Input",
-  },
-]);
+export const Form = createAttrsForm([]);

src/modules/editor/components/CompUI/defines/createOptions.ts

@@ -10,10 +10,6 @@ type IOptions<T, C> = {
   children?: C;
 };
 
-// export function createOptions<T>(opts: IOptions<T>) {
-//   return opts;
-// }
-
 export function createOptions<T, C>(options: IOptions<T, C>) {
   function useCompData(compId: string): {
     value: T;

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

@@ -1,6 +1,6 @@
 export * as Image from "./basicUI/Image";
 export * as Text from "./basicUI/Text";
-export * as Card1 from "./customUI/Cards/Card1";
+export * as Card from "./customUI/Cards/Card";
 export * as CardList from "./customUI/Cards/CardList";
 export * as Cover from "./customUI/Cover";
 export * as Title1 from "./customUI/Titles/Title1";

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

@@ -18,10 +18,9 @@ export default defineUI({
     });
 
     return () => (
-      <div class="min-h-750px bg-white">
+      <div class={contentStyle}>
         {store.isEditMode ? (
           <Container
-            class={dragContainerStyle}
             style={store.designData.pageStyle}
             onDrop={(e: any) => actions.moveComp(e.removedIndex, e.addedIndex)}
             non-drag-area-selector={".drag-disable"}
@@ -43,8 +42,11 @@ export default defineUI({
   },
 });
 
-const dragContainerStyle = css`
-  &.dndrop-container.vertical > .dndrop-draggable-wrapper {
+const contentStyle = css`
+  border: 1px solid transparent;
+  @apply min-h-750px bg-white;
+
+  .dndrop-container.vertical > .dndrop-draggable-wrapper {
     overflow: unset;
   }
 `;