shalu-bigscreen-desiner/src/views/designer/component/useComponentConfig.ts

import type { IFormItem } from "shalu-dashboard-ui";
import { computed } from "vue";
import { cloneDeep } from "lodash";
import { useProjectStore } from "@/store/modules/project";

export const useComponentConfig = () => {

  const projectStore = useProjectStore();

  const formItems = computed((): IFormItem[] => {
    const element = projectStore.currentSelectedElements[0];
    const containerStyle = element?.container?.style || {};
    const containerProps = element?.container?.props || {};
    
    return [
      {
        label: "组件样式",
        prop: "style",
        type: "group",
        children: [
          {
            label: "边框背景",
            prop: "style.background",
            type: "backgroundSelect",
            defaultValue: cloneDeep(containerStyle?.background) ?? {
              type: "none",
              color: "",
              image: "",
              fillType: "cover",
            },
          },
          {
            label: "不透明度",
            prop: "style.opacity",
            type: "slider",
            defaultValue: containerStyle?.opacity ?? 1,
          },
          {
            label: "边框线",
            prop: "style.borderStyle",
            type: "select",
            fieldProps: {
              options: [
                { label: "无", value: "none" },
                { label: "实线", value: "solid" },
                { label: "虚线", value: "dashed" },
                { label: "点线", value: "dotted" },
              ],
            },
            defaultValue: containerStyle?.borderStyle || "none",
          },
          {
            label: '',
            prop: "",
            type: 'dependency',
            name: ['style.borderStyle'],
            children: (model: any) => {
              return model['style.borderStyle'] !== 'none' ? [
                {
                  label: "边框颜色",
                  prop: "style.borderColor",
                  type: "colorSelect",
                  defaultValue: containerStyle?.borderColor ?? "#EEEEEEFF",
                  fieldProps: {
                    gradient: false
                  }
                },
                {
                  label: "边框宽度",
                  prop: "style.borderWidth",
                  type: "inputNumber",
                  fieldProps: {
                    min: 0,
                    addonAfter: "px",
                  },
                  defaultValue: containerStyle?.borderWidth ?? 1,
                },
              ] : [];
            }
          },
          {
            label: "圆角",
            prop: "style.borderRadius",
            type: "boderRadiusSelect",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerStyle?.borderRadius ?? 0,
          },
          {
            label: "毛玻璃",
            prop: "style.backdropFilter",
            type: "radioGroup",
            fieldProps: {
              options: [
                { label: "开启", value: "blur(10px)" },
                { label: "关闭", value: "" },
              ],
            },
            defaultValue: containerStyle?.backdropFilter || "",
          },
          {
            label: "阴影",
            prop: "style.boxShadow",
            type: "radioGroup",
            fieldProps: {
              options: [
                {
                  label: "开启",
                  value: "rgba(0,0,0,0.3) 15px 20px 20px",
                },
                { label: "关闭", value: "" },
              ],
            },
            defaultValue: containerStyle?.boxShadowEnabled || "",
          },
          {
            label: "倒影",
            prop: "style.webkitBoxReflect",
            type: "radioGroup",
            fieldProps: {
              options: [
                {
                  label: "开启",
                  value:
                    "below 2px linear-gradient(transparent, rgba(0,0,0,0.5))",
                },
                { label: "关闭", value: "" },
              ],
            },
            defaultValue: containerStyle?.webkitBoxReflect || "",
          },
        ],
      },
      {
        label: "组件属性",
        prop: "props",
        type: "group",
        children: [
          {
            label: "名称",
            prop: "name",
            type: "input",
            defaultValue: element?.name ?? "",
          },
          {
            label: "宽高",
            type: 'divider',
            prop: "",
          },
          {
            label: "宽度",
            prop: "props.width",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.width ?? 400,
          },
          {
            label: "高度",
            prop: "props.height",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.height ?? 260,
          },
          {
            label: "位置",
            type: 'divider',
            prop: "",
          },
          {
            label: "X",
            prop: "props.x",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.x ?? 0,
          },
          {
            label: "Y",
            prop: "props.y",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.y ?? 0,
          },
          {
            label: "边距",
            type: 'divider',
            prop: "",
          },
          {
            label: "顶边距",
            prop: "props.paddingTop",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.paddingTop ?? 0,
          },
          {
            label: "右边距",
            prop: "props.paddingRight",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.paddingRight ?? 0,
          },
          {
            label: "底边距",
            prop: "props.paddingBottom",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.paddingBottom ?? 0,
          },
          {
            label: "左边距",
            prop: "props.paddingLeft",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "px",
            },
            defaultValue: containerProps?.paddingLeft ?? 0,
          },
          {
            label: "旋转",
            type: 'divider',
            prop: "",
          },
          {
            label: "X轴旋转",
            prop: "props.rotateX",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "deg",
            },
            defaultValue: containerProps?.rotateX ?? 0,
          },
          {
            label: "Y轴旋转",
            prop: "props.rotateY",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "deg",
            },
            defaultValue: containerProps?.rotateY ?? 0,
          },
          {
            label: "Z轴旋转",
            prop: "props.rotateZ",
            type: "inputNumber",
            fieldProps: {
              min: 0,
              addonAfter: "deg",
            },
            defaultValue: containerProps?.rotateZ ?? 0,
          },
          {
            label: "整体",
            type: 'divider',
            prop: "",
          },
          {
            label: "不透明度",
            prop: "props.opacity",
            type: "slider",
            defaultValue: containerProps?.opacity ?? 100,
          },
        ],
      },
    ];
  });

  return {
    formItems
  }
};