update

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

@@ -0,0 +1,51 @@
+import { Dict_Imgs } from "@/dict";
+import { watch } from "vue";
+import { string } from "vue-types";
+import { useChildCreator, useCompData } from ".";
+import { useEditor } from "../../../../..";
+import { Image, Image2, Text } from "../../../basicUI";
+import { createUIComp } from "../../../defines/createUIComp";
+
+export const Component = createUIComp({
+  props: {
+    compId: string().isRequired,
+  },
+  setup(props) {
+    const { helper } = useEditor();
+    const comp = useCompData(props.compId);
+    const createList = useChildCreator("list");
+
+    watch(
+      () => [comp.value.total],
+      () => {
+        const { total } = comp.value;
+        const offset = total - comp.children.list.length;
+        if (offset > 0) {
+          comp.children.list.push(...createList(offset));
+        } else {
+          comp.children.list.splice(total, offset * -1);
+        }
+      }
+    );
+
+    return () => (
+      <div
+        class="grid"
+        style={{
+          gridTemplateColumns: `repeat(${value.columns}, 1fr)`,
+          gridGap: helper.designToNaturalSize(value.gap),
+        }}
+      >
+        {value.list.map((d, i) => (
+          <div key={i}>
+            <Image2.Component
+              style={{ height: helper.designToNaturalSize(value.imgHeight) }}
+              compId={d.id}
+            />
+            {value.showDesc && <Text.Component v-model={[d.desc, "value"]} />}
+          </div>
+        ))}
+      </div>
+    );
+  },
+});

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

@@ -0,0 +1,57 @@
+import { Dict_Imgs } from "@/dict";
+import { InputNumber } from "ant-design-vue";
+import { createAttrsForm } from "../../../defines/createAttrsForm";
+import { CompFactory, createCompHooks } from "../../../defines/createCompHooks";
+
+export { Component } from "./component";
+
+export const config = {
+  name: "卡片列表",
+  thumbnail: Dict_Imgs.Default,
+};
+
+export const { createComp, useCompData, useChildCreator } = createCompHooks({
+  value: {
+    gap: 10,
+    columns: 3,
+    total: 3,
+    imgHeight: 120,
+    showDesc: true,
+  },
+  children: {
+    list: (length = 3) =>
+      Array.from({ length }, () => ({
+        img: CompFactory.create("Image"),
+        desc: CompFactory.create("Text"),
+      })),
+    img1: () => CompFactory.create("Image"),
+  },
+});
+
+export const Form = createAttrsForm([
+  {
+    label: "卡片总数",
+    dataIndex: "value.total",
+    component: InputNumber,
+  },
+  {
+    label: "每行数量",
+    dataIndex: "value.columns",
+    component: InputNumber,
+  },
+  {
+    label: "卡片间距",
+    dataIndex: "value.gap",
+    component: InputNumber,
+  },
+  {
+    label: "图片高度",
+    dataIndex: "value.imgHeight",
+    component: InputNumber,
+  },
+  {
+    label: "显示描述",
+    dataIndex: "value.showDesc",
+    component: "Switch",
+  },
+]);

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

@@ -0,0 +1,70 @@
+import { useEditor } from "@/modules/editor";
+import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
+import { Background, Layout } from "@/modules/editor/typings";
+import { cloneDeep } from "lodash";
+import { AnyFun } from "queenjs/typing";
+
+type IOptions<T, C> = {
+  value: T;
+  layout?: Layout;
+  background?: Background;
+  children?: C;
+};
+
+function createComp(
+  defaultOpts: any,
+  opts: any,
+  onCreate: (comp: DesignComp) => void
+) {
+  const defOpts = cloneDeep(defaultOpts);
+  if (defOpts.children) {
+    Object.entries(defOpts.children).forEach(([key, fn]: any) => {
+      defOpts.children[key] = fn();
+    });
+  }
+  const options = Object.assign(defOpts, opts);
+  const comp = new DesignComp(options);
+  onCreate(comp);
+  return comp.id;
+}
+
+function useCompData(compId: string) {
+  const editor = useEditor();
+  let data = editor.store.designCompMap.get(compId);
+  return data as any;
+}
+
+export function createCompHooks<T, C extends { [name: string]: AnyFun }>(
+  defaultOpts: IOptions<T, C>
+) {
+  function useChildCreator(key: keyof C) {
+    //
+  }
+  return {
+    createComp: createComp.bind(null, defaultOpts),
+    useCompData: useCompData as (compId: string) => {
+      id: string;
+      value: T;
+      children: DeepObj<{ [name in keyof C]: ReturnType<C[name]> }>;
+    },
+    useChildCreator,
+  };
+}
+
+export interface CompType {
+  id: string;
+}
+
+export class CompFactory {
+  static create(type: string): CompType {
+    return { id: type };
+  }
+}
+
+type DeepObj<T> = T extends object
+  ? T extends CompType
+    ? string
+    : T
+  : T extends Array<infer P>
+  ? DeepObj<P>[]
+  : T;