/** * 表单设计器组件配置 */ import { FormOutlined, FontSizeOutlined, NumberOutlined, DownOutlined, CheckCircleOutlined, CheckSquareOutlined, CalendarOutlined, ClockCircleOutlined, FieldTimeOutlined, SwitcherOutlined, SlidersOutlined, StarOutlined, UploadOutlined, ApartmentOutlined, MinusOutlined, FileTextOutlined, BorderOutlined, } from '@ant-design/icons'; import type { FieldType, FieldConfig } from './types'; // 组件元数据 export interface ComponentMeta { type: FieldType; label: string; icon: any; category: '基础字段' | '高级字段' | '布局字段'; defaultConfig: Partial; } // 组件列表配置 export const COMPONENT_LIST: ComponentMeta[] = [ // 布局字段 { type: 'grid', label: '栅格布局', icon: BorderOutlined, category: '布局字段', defaultConfig: { columns: 2, columnSpans: [12, 12], // 默认两列,各占12格 gutter: 16, children: [[], []], // 初始化两列空数组 }, }, { type: 'divider', label: '分割线', icon: MinusOutlined, category: '布局字段', defaultConfig: {}, }, // 基础字段 { type: 'input', label: '单行文本', icon: FormOutlined, category: '基础字段', defaultConfig: { placeholder: '请输入', }, }, { type: 'textarea', label: '多行文本', icon: FontSizeOutlined, category: '基础字段', defaultConfig: { placeholder: '请输入', rows: 4, }, }, { type: 'number', label: '数字输入', icon: NumberOutlined, category: '基础字段', defaultConfig: { placeholder: '请输入数字', }, }, { type: 'select', label: '下拉选择', icon: DownOutlined, category: '基础字段', defaultConfig: { placeholder: '请选择', dataSourceType: 'static', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, ], }, }, { type: 'radio', label: '单选框组', icon: CheckCircleOutlined, category: '基础字段', defaultConfig: { dataSourceType: 'static', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, ], }, }, { type: 'checkbox', label: '多选框组', icon: CheckSquareOutlined, category: '基础字段', defaultConfig: { dataSourceType: 'static', options: [ { label: '选项1', value: '1' }, { label: '选项2', value: '2' }, { label: '选项3', value: '3' }, ], }, }, { type: 'date', label: '日期选择', icon: CalendarOutlined, category: '基础字段', defaultConfig: { placeholder: '请选择日期', }, }, { type: 'datetime', label: '日期时间', icon: FieldTimeOutlined, category: '基础字段', defaultConfig: { placeholder: '请选择日期时间', showTime: true, }, }, { type: 'time', label: '时间选择', icon: ClockCircleOutlined, category: '基础字段', defaultConfig: { placeholder: '请选择时间', }, }, { type: 'text', label: '文字', icon: FileTextOutlined, category: '基础字段', defaultConfig: { content: '这是一段文字', }, }, // 高级字段 { type: 'switch', label: '开关', icon: SwitcherOutlined, category: '高级字段', defaultConfig: {}, }, { type: 'slider', label: '滑块', icon: SlidersOutlined, category: '高级字段', defaultConfig: { min: 0, max: 100, }, }, { type: 'rate', label: '评分', icon: StarOutlined, category: '高级字段', defaultConfig: {}, }, { type: 'upload', label: '文件上传', icon: UploadOutlined, category: '高级字段', defaultConfig: { maxCount: 1, }, }, { type: 'cascader', label: '级联选择', icon: ApartmentOutlined, category: '高级字段', defaultConfig: { placeholder: '请选择', dataSourceType: 'static', options: [ { label: '浙江', value: 'zhejiang', }, ] as any, }, }, ]; // 根据分类分组组件 export const getComponentsByCategory = () => { const grouped: Record = {}; COMPONENT_LIST.forEach((comp) => { if (!grouped[comp.category]) { grouped[comp.category] = []; } grouped[comp.category].push(comp); }); return grouped; };