deploy-ease-platform/frontend/src/pages/FormDesigner/config.ts

/**
 * 表单设计器组件配置
 */

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<FieldConfig>;
}

// 组件列表配置
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<string, ComponentMeta[]> = {};
  
  COMPONENT_LIST.forEach((comp) => {
    if (!grouped[comp.category]) {
      grouped[comp.category] = [];
    }
    grouped[comp.category].push(comp);
  });
  
  return grouped;
};