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

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(),
  },
]);