添加组件注册

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

@@ -6,11 +6,10 @@ import { View } from "../View";
 
 export const Component = defineComponent({
   props: {
-    compId: string()
+    compId: string().isRequired
   },
-  emits: ["update:compId"],
-  setup(props, { emit }) {
-    const compConf =  useCompData(props.compId || "") ;
+  setup(props,) {
+    const compConf =  useCompData(props.compId) ;
     
     const { store, controls } = useEditor();
     async function changeVal() {
@@ -23,14 +22,6 @@ export const Component = defineComponent({
       compConf.value.s = 1;
     }
 
-    //hello
-    console.log("compConf", compConf)
-
-    if (!props.compId) {
-        emit("update:compId", compConf.id)
-    } 
-
-
     return () => {
       const value = compConf.value;
       const scale = value?.s || 1;

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

@@ -1,15 +1,16 @@
 import { Dict_Imgs } from "@/dict";
 import { createAttrsForm } from "../../defines/createAttrsForm";
 import { createOptions2 } from "../../defines/createOptions";
+import { RegCompType } from "../../defines/creator";
 
 export { Component } from "./component";
 
-export const { options, useCompData } = createOptions2({
-  name: "图片",
-  compKey: "Image2",
-  thumbnail: Dict_Imgs.Default,
-  value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
-});
+export const { createCompData, useCompData } = RegCompType(
+    {type: "Image2", name: "图片", thumbnail: Dict_Imgs.Default},
+    {
+      value: {url: Dict_Imgs.Default, x: 0, y:0, s: 1},
+    }
+);
 
 export const Form = createAttrsForm([
   {

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

@@ -0,0 +1,45 @@
+import { Dict_Imgs } from "@/dict";
+import { watch } from "vue";
+import { string } from "vue-types";
+
+import { useEditor } from "../../../../..";
+import { Image, Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+import { onChangeListTotal, useCompData } from ".";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { helper } = useEditor();
+    const { value } = useCompData(props.compId);
+
+    watch(
+      () => [value.total],
+      () => {
+        onChangeListTotal(props.compId);
+      }
+    );
+
+    return () => (
+      <div
+        class="grid"
+        style={{
+          gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
+          gridGap: helper.designToNaturalSize(value.gap),
+        }}
+      >
+        {value.list.map((d:any, i:number) => (
+          <div key={i}>
+            <Image.Component
+              style={{ height: helper.designToNaturalSize(value.imgHeight) }}
+              compId={d.image.id} 
+            />
+            {value.showDesc && <Text.Component compId={d.text.id}  />}
+          </div>
+        ))}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,38 @@
+import { Dict_Imgs } from "@/dict";
+
+
+import { RegCompType } from "../../../defines/creator";
+import * as Image2 from "../../../basicUI/Image2"
+
+const {createCompData, useCompData} = RegCompType(
+    {type: "CardList", name: "CardList", thumbnail: Dict_Imgs.Default},
+    {
+        value: {
+            gap: 10,
+            columns: 3,
+            total: 3,
+            imgHeight: 120,
+            showDesc: true,
+            list: Array.from({ length: 3 }, () => ({
+                img:  Image2.createCompData({url: Dict_Imgs.Default}),
+                desc: "描述",
+            })),
+        }
+    })
+    
+const onChangeListTotal = function(compId:string) {
+    //@ts-ignore
+    const data = Ctrl.getCompData(compId)
+    const { total, list } = data.value;
+    const offset = total - list.length;
+    if (offset > 0) {
+      Array.from({ length: offset }, () => {
+        list.push({ img: Image2.createCompData({url: Dict_Imgs.Default}), desc: "描述" });
+      });
+    } else {
+      list.splice(total, offset * -1);
+    }
+    return {} as any;
+}
+
+export {createCompData, useCompData, onChangeListTotal}

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

@@ -0,0 +1,29 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { cloneDeep } from "lodash";
+import { any, object } from "vue-types";
+
+type CommPropType = Pick<DesignComp, "compKey" | "background" | "layout" | "id">
+
+
+function RegCompType<T>(info: {type:string , name:string, thumbnail:string},  defValue:  Partial<CommPropType> & {value: T}) {
+
+    const createCompData =  function(values: Partial<T>, comm?: Partial<CommPropType>) {
+
+        const defvalues = cloneDeep(defValue)
+        defvalues.compKey = info.type as any
+
+        const c = Object.assign({}, defvalues, comm, {value: values}) as CommPropType &{value: T}
+        return new DesignComp(c) as typeof c;
+    }
+
+    type ValueType = ReturnType<typeof createCompData>
+
+    function useCompData(compId: string){
+        const editor = useEditor();
+        return editor.store.designCompMap.get(compId) as ValueType;
+    }
+    return {useCompData, createCompData}
+}
+
+export {RegCompType}