queenshow/src/modules/editor/components/CompUI/basicUI/Page/PageForm.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 { createColorOpts } from "../../defines/formOpts/createColorOpts";

const styleColumns: ColumnItem[] = [
  {
    label: "内边距",
    dataIndex: "layout.padding",
    component: "Input",
  },
  {
    label: "背景颜色",
    dataIndex: "layout.background.color",
    ...createColorOpts(),
  },
];

export const PageForm = defineComponent({
  props: {
    component: any<DesignComp>().isRequired,
  },
  setup(props) {
    const { actions } = useEditor();
    function changeVal(e: { dataIndex: string; value: any }) {
      actions.updateCompDataByForm(props.component, e.dataIndex, e.value);
    }

    return () => {
      const { layout } = props.component;
      return (
        <>
          <div>页面样式</div>
          <FormUI data={layout} columns={styleColumns} onChange={changeVal} />
        </>
      );
    };
  },
});