General-AI-Platform-Web/config/defaultForm.ts

/*
 * @Author: zhoux zhouxia@supervision.ltd
 * @Date: 2023-11-13 14:19:57
 * @LastEditors: zhoux zhouxia@supervision.ltd
 * @LastEditTime: 2023-12-27 16:09:07
 * @FilePath: \general-ai-platform-web\config\defaultForm.ts
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE2
 */

import { CloseCircleOutlined, CopyOutlined, DeleteOutlined } from "@ant-design/icons";
import { StepsFormProps } from "@ant-design/pro-components";
import { ReactNode } from "react";

export type IconConfig = {
  /**
   * 新的icon的组件，我们会将其实例化
   * Icon: ()=> <div/>
   */
  Icon?: React.FC<any>;
  /**
   * tooltip 的提示文案
   */
  tooltipText?: string;
};
// 通用表单配置
export const proFormCommonOptions: Record<string,any> = {
}

const formBoxMargin = 2 * 24
const formItemGap = 16
// Small 560
export const proFormSmallModelWidth: number = 560;
export const proFormSmallItemStyleProps: Record<string, any> = {
  width: proFormSmallModelWidth - formBoxMargin,  // 一列
  // column2Width: (proFormSmallModelWidth -  2 * formBoxMargin)/2 , // 两列

  
};

// normal 804
export const proFormModelWidth: number = 804;
export const proFormItemStyleProps: Record<string, any> = {
  width: proFormModelWidth - formBoxMargin,  // 一列
  column2Width: (proFormModelWidth - formBoxMargin - formItemGap)/2 , // 两列
};

// max 968
export const proFormMaxModelWidth: number = 968;
export const proFormMaxItemStyleProps: Record<string, any> = {
  width: proFormMaxModelWidth - formBoxMargin,
  column2Width: (proFormMaxModelWidth - formBoxMargin - formItemGap)/2 , // 两列
};


/**表单具体单项配置 */


// proFormList 新增一项按钮配置
export const proFormListCreatorButtonProps : {
  creatorButtonText?: ReactNode;
  position?: 'top' | 'bottom';
  deleteIconProps?: IconConfig | false;
} = {
  position: 'bottom',
  creatorButtonText: '添加参数字段', // 设置新增一项数据的文案
  deleteIconProps: {
    Icon: CloseCircleOutlined,
    tooltipText: '不需要这行了',
  }
}

export const proFormListActionButtonProps : {
  CopyableIconProps?: IconConfig | false;
  deleteIconProps?: IconConfig | false;
} = {
  CopyableIconProps: {
    Icon: CopyOutlined,
    tooltipText: '复制',
  },
  deleteIconProps: {
    Icon: DeleteOutlined,
    tooltipText: '删除',
  }
}


// 分步表单统一配置
export const proFormStepsFormProps: StepsFormProps = {
  stepsProps: {
    labelPlacement: 'vertical',
  }
}