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

import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import FormUI, { ColumnItem } from "@queenjs/components/FormUI";
import { defineComponent } from "vue";
import { any } from "vue-types";
import { Size } from "../formItems/Size";
import Slider from "../formItems/Slider";
import { createColorOpts } from "./formOpts/createColorOpts";
import { Divider } from "ant-design-vue";
import Align from "./align";
import { css } from "@linaria/core";

export const layoutColumns: ColumnItem[] = [
  {
    // label: "尺寸",
    dataIndex: "layout.size",
    component: Size,
    props: {
      labels: ["宽度", "高度"],
    },
  },
  {
    label: "对齐",
    component: Align,
    dataIndex: "id",
  },
  // {
  //   label: "对齐",
  //   dataIndex: "layout.alignSelf",
  //   component: Select,
  //   props: {
  //     class: "w-full",
  //     options: [
  //       { label: "左对齐", value: "start" },
  //       { label: "居中", value: "center" },
  //       { label: "右对齐", value: "end" },
  //     ],
  //   },
  // },
  // {
  //   label: "外边距",
  //   dataIndex: "layout.margin",
  //   component: "Input",
  // },
  // {
  //   label: "内边距",
  //   dataIndex: "layout.padding",
  //   component: "Input",
  // },
  // {
  //   label: "偏移矩阵",
  //   dataIndex: "layout.transformMatrix",
  //   component: Input,
  // },
  // {
  //   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,
  //   },
  // },
  // {
  //   label: "遮罩",
  //   dataIndex: "layout.mask",
  //   component: Select,
  //   props: {
  //     class: "w-full",
  //     options: [{ label: "无", value: "" }].concat(
  //       Object.entries(compMasks).map(([key, value]) => {
  //         return {
  //           label: value.name,
  //           value: key,
  //         };
  //       })
  //     ),
  //   },
  // },
  // {
  //   label: "锁定",
  //   dataIndex: "layout.locked",
  //   component: "Switch",
  // },
];

export const bdColumns: ColumnItem[] = [
  {
    label: "边框样式",
    dataIndex: "layout.border.style",
    component: "Select",
    props: {
      defaultValue: "none",
      options: [
        { label: "无", value: "none" },
        { label: "直线", value: "solid" },
        { label: "点状线", value: "dotted" },
        { label: "破折线", value: "dashed" },
      ],
    },
  },
  {
    label: "边框颜色",
    dataIndex: "layout.border.color",
    ...createColorOpts(),
  },
  {
    label: "边框尺寸",
    dataIndex: "layout.border.width",
    component: Slider,
    props: {
      defaultValue: 0,
      step: 1,
      min: 0,
      max: 2,
    },
  },
  {
    label: "边框弧度",
    dataIndex: "layout.border.radius",
    component: Slider,
    // isVisible: (value, data) =>
    //   ["Web3D", "Container", "Video"].includes(data.compKey) ? false : true,
    props: {
      defaultValue: 0,
      min: 0,
      max: 100,
      step: 1,
    },
  },
];

export const bgColumns: ColumnItem[] = [
  {
    label: "背景颜色",
    dataIndex: "layout.background.color",
    ...createColorOpts(),
  },
  {
    label: "透明度",
    dataIndex: "layout.opacity",
    component: Slider,
    isVisible: (value, data) =>
      ["Web3D", "Video"].includes(data.compKey) ? false : true,
    props: {
      defaultValue: 1,
      min: 0,
      max: 1,
      step: 0.01,
    },
  },
  // {
  //   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[], columnsUI?: any) {
  return defineComponent({
    props: {
      component: any<DesignComp>().isRequired,
    },
    setup(props) {
      const { store, actions } = useEditor();
      function changeVal(e: { dataIndex: string; value: any }) {
        actions.updateCompData(store.currComp, e.dataIndex, e.value);
        actions.submitUpdate();
      }

      return () => {
        const { component } = props;
        return (
          <div class={formStyle}>
            {valueColumns.length ? (
              <>
                <div> <span class="text-white">属性</span></div>
                <FormUI
                  data={component}
                  columns={valueColumns}
                  onChange={changeVal}
                />
                <Divider></Divider>
              </>
            ) : null}
            {columnsUI && <columnsUI component={component} />}
            <div><span class="text-white">布局</span></div>
            <FormUI
              data={component}
              columns={layoutColumns}
              style={{color: "red"}}
              onChange={changeVal}
            />
            {["Web3D", "Video", "Map"].includes(component.compKey) ? null : (
              <>
                <Divider></Divider>
                <div> <span class="text-white">背景</span> </div>
                <FormUI
                  data={component}
                  columns={bgColumns}
                  onChange={changeVal}
                />
              </>
            )}
            {["Text", "Image", "Map"].includes(component.compKey) ? (
              <>
                <Divider></Divider>
                <div><span class="text-white">边框</span></div>
                <FormUI
                  data={component}
                  columns={bdColumns}
                  onChange={changeVal}
                />
              </>
            ) : null}
          </div>
        );
      };
    },
  });
}

const formStyle = css`

  .item_label {
    color: #A9ABAF !important;
  }
`