queenshow/src/modules/editor/components/CompUI/defines/createAttrsForm.tsx

import { DesignComp } from "@/modules/editor/defines/DesignTemp/DesignComp";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { set } from "lodash";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { GroupNumber } from "../formItems/GroupNumber";
import { InputNumber } from "ant-design-vue";
import { createColorOpts } from "./formOpts/createColorOpts";
import { ImagePicker } from "../formItems/ImagePicker";

const layoutColumns: ColumnItem[] = [
  {
    label: "尺寸",
    dataIndex: "layout.size",
    component: GroupNumber,
    props: {
      labels: ["宽度", "高度"],
    },
  },
  {
    label: "对齐",
    dataIndex: "layout.textAlign",
    component: "Select",
    props: {
      options: [
        { label: "左对齐", value: "left" },
        { label: "居中", value: "center" },
        { label: "右对齐", value: "right" },
      ],
    },
  },
  {
    label: "外边距",
    dataIndex: "layout.margin",
    component: "Input",
  },
  {
    label: "内边距",
    dataIndex: "layout.padding",
    component: "Input",
  },
  // {
  //   label: "左右偏移",
  //   dataIndex: "layout.offsetX",
  //   component: "Slider",
  //   props: {
  //     min: -375,
  //     max: 375,
  //   },
  //   getValue: (v) => v || 0,
  // },
  // {
  //   label: "上下偏移",
  //   dataIndex: "layout.offsetY",
  //   component: "Slider",
  //   props: {
  //     min: -375,
  //     max: 375,
  //   },
  //   getValue: (v) => v || 0,
  // },
  {
    label: "层级",
    dataIndex: "layout.zIndex",
    component: InputNumber,
    props: {
      min: 0,
      max: 99,
    },
  },
];

const bgColumns: ColumnItem[] = [
  {
    label: "背景颜色",
    dataIndex: "background.color",
    ...createColorOpts(),
  },
  {
    label: "背景图片",
    dataIndex: "background.image",
    component: ImagePicker,
  },
  {
    label: "repeat",
    dataIndex: "background.repeat",
    component: "Select",
    props: {
      options: [
        "repeat",
        "no-repeat",
        "repeat-x",
        "repeat-y",
        "repeat-round",
        "repeat-space",
      ].map((v) => ({ label: v, value: v })),
    },
  },
  {
    label: "position",
    dataIndex: "background.position",
    component: "Select",
    props: {
      options: [
        "center",
        "top",
        "bottom",
        "left",
        "left-top",
        "left-bottom",
        "right",
        "right-top",
        "right-bottom",
      ].map((v) => ({ label: v, value: v })),
    },
  },
  {
    label: "size",
    dataIndex: "background.size",
    component: "Select",
    props: {
      options: ["auto", "cover", "contain"].map((v) => ({
        label: v,
        value: v,
      })),
    },
  },
  {
    label: "clipPath",
    dataIndex: "background.clipPath",
    component: "Input",
  },
];

export function createAttrsForm(valueColumns: ColumnItem[]) {
  return defineComponent({
    props: {
      component: any<DesignComp>().isRequired,
    },
    setup(props) {
      function changeVal(e: { dataIndex: string; value: any }) {
        set(props.component, e.dataIndex, e.value);
      }

      return () => {
        const { component } = props;
        return (
          <div>
            {valueColumns.length ? (
              <>
                <div>组件属性</div>
                <FormUI
                  data={component}
                  columns={valueColumns}
                  onChange={changeVal}
                />
              </>
            ) : null}
            <div>组件布局</div>
            <FormUI
              data={component}
              columns={layoutColumns}
              onChange={changeVal}
            />
            <div>组件背景</div>
            <FormUI data={component} columns={bgColumns} onChange={changeVal} />
          </div>
        );
      };
    },
  });
}