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,
  },
  {
    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 animateColumns: ColumnItem[] = [
  {
    label: "入场效果",
    dataIndex: "layout.border.style",
    component: "Select",
    props: {
      bordered: false,
      style: { backgroundColor: "#303030" },
      defaultValue: "none",
      options: [
        { label: "无", value: "none" },
        { label: "直线", value: "solid" },
        { label: "点状线", value: "dotted" },
        { label: "破折线", value: "dashed" },
      ],
    },
  },
];

export const bdColumns: ColumnItem[] = [
  {
    label: "边框样式",
    dataIndex: "layout.border.style",
    component: "Select",
    props: {
      bordered: false,
      style: { backgroundColor: "#303030" },
      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,
    getValue(v) {
      if (v == undefined) return 0;
      return v;
    },
    props: {
      defaultValue: 0,
      step: 1,
      min: 0,
      max: 2,
    },
  },
  {
    label: "边框弧度",
    dataIndex: "layout.border.radius",
    component: Slider,
    getValue(v) {
      if (v == undefined) return 0;
      return v;
    },
    // 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(true),
  },
  {
    label: "透明度",
    dataIndex: "layout.opacity",
    component: Slider,
    getValue(v) {
      if (v == undefined) return 1;
      return v;
    },
    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}
            {/* 动效 */}
            <>
              <Divider />
              {/* <div>
                <span class="text-white">动效</span>
              </div>
              <FormUI
                data={component}
                columns={animateColumns}
                onChange={changeVal}
              /> */}
            </>
          </div>
        );
      };
    },
  });
}

const formStyle = css`
  .item_label {
    color: #a9abaf !important;
  }
  & > div {
    padding: 0 !important;
  }
`;