888 lines
27 KiB
TypeScript
888 lines
27 KiB
TypeScript
/**
|
||
* 表单设计器组件（设计时）
|
||
*
|
||
* 功能：
|
||
* - 可视化拖拽设计表单
|
||
* - 支持字段属性配置
|
||
* - 支持验证规则和联动规则
|
||
* - 导入/导出 JSON Schema
|
||
*
|
||
* 使用方式：
|
||
* ```tsx
|
||
* <FormDesigner
|
||
* value={formSchema}
|
||
* onChange={setFormSchema}
|
||
* onSave={handleSave}
|
||
* readonly={false}
|
||
* />
|
||
* ```
|
||
*/
|
||
|
||
import React, { useState, useCallback, useEffect, useRef, useMemo } from 'react';
|
||
import { Button, Space, message, Modal } from 'antd';
|
||
import {
|
||
SaveOutlined,
|
||
DownloadOutlined,
|
||
UploadOutlined,
|
||
EyeOutlined,
|
||
ClearOutlined,
|
||
} from '@ant-design/icons';
|
||
import {
|
||
DndContext,
|
||
DragEndEvent,
|
||
DragStartEvent,
|
||
DragOverEvent,
|
||
DragOverlay,
|
||
PointerSensor,
|
||
useSensor,
|
||
useSensors,
|
||
pointerWithin,
|
||
closestCenter
|
||
} from '@dnd-kit/core';
|
||
import { arrayMove } from '@dnd-kit/sortable';
|
||
import ComponentPanel from './components/ComponentPanel';
|
||
import DesignCanvas from './components/DesignCanvas';
|
||
import PropertyPanel from './components/PropertyPanel';
|
||
import FormPreview, { type FormPreviewRef } from './Preview';
|
||
import { COMPONENT_LIST } from './config';
|
||
import type { FieldConfig, FormConfig, FormSchema } from './types';
|
||
import type { ComponentMeta } from './config';
|
||
import './styles.css';
|
||
|
||
// 🔌 组件列表 Context（用于插件式扩展）
|
||
export const ComponentsContext = React.createContext<ComponentMeta[]>(COMPONENT_LIST);
|
||
|
||
export interface FormDesignerProps {
|
||
value?: FormSchema; // 受控模式：表单 Schema
|
||
onChange?: (schema: FormSchema) => void; // 受控模式：Schema 变化回调
|
||
onSave?: (schema: FormSchema) => void; // 保存回调
|
||
readonly?: boolean; // 只读模式
|
||
showToolbar?: boolean; // 是否显示工具栏
|
||
extraActions?: React.ReactNode; // 额外的操作按钮
|
||
extraComponents?: ComponentMeta[]; // 🆕 扩展字段组件（如工作流字段）
|
||
}
|
||
|
||
const FormDesigner: React.FC<FormDesignerProps> = ({
|
||
value,
|
||
onChange,
|
||
onSave,
|
||
readonly = false,
|
||
showToolbar = true,
|
||
extraActions,
|
||
extraComponents = [],
|
||
}) => {
|
||
// 表单预览 ref
|
||
const formPreviewRef = useRef<FormPreviewRef>(null);
|
||
|
||
// 内部状态（非受控模式使用）
|
||
const [internalFields, setInternalFields] = useState<FieldConfig[]>([]);
|
||
const [internalFormConfig, setInternalFormConfig] = useState<FormConfig>({
|
||
labelAlign: 'right',
|
||
size: 'middle',
|
||
formWidth: 600,
|
||
});
|
||
|
||
// 使用受控值或内部值
|
||
const fields = value?.fields ?? internalFields;
|
||
const formConfig = value?.formConfig ?? internalFormConfig;
|
||
|
||
// 🔍 字段名冲突检测
|
||
const fieldNames = useMemo(() => {
|
||
const names = new Map<string, string[]>(); // name -> fieldIds[]
|
||
|
||
const collectNames = (fieldList: FieldConfig[]) => {
|
||
fieldList.forEach(field => {
|
||
// 只收集有效的 name（非空且非布局组件）
|
||
if (field.name && field.name.trim() && field.type !== 'text' && field.type !== 'divider') {
|
||
const ids = names.get(field.name) || [];
|
||
ids.push(field.id);
|
||
names.set(field.name, ids);
|
||
}
|
||
|
||
// 递归处理栅格布局
|
||
if (field.type === 'grid' && field.children) {
|
||
field.children.forEach(col => collectNames(col));
|
||
}
|
||
});
|
||
};
|
||
|
||
collectNames(fields);
|
||
return names;
|
||
}, [fields]);
|
||
|
||
// 🚨 找出所有冲突的字段 ID
|
||
const duplicateFieldIds = useMemo(() => {
|
||
const ids = new Set<string>();
|
||
fieldNames.forEach((fieldIds: string[]) => {
|
||
if (fieldIds.length > 1) {
|
||
// 该 name 被多个字段使用，标记所有这些字段为冲突
|
||
fieldIds.forEach((id: string) => ids.add(id));
|
||
}
|
||
});
|
||
return ids;
|
||
}, [fieldNames]);
|
||
|
||
const setFields = useCallback((updater: React.SetStateAction<FieldConfig[]>) => {
|
||
const newFields = typeof updater === 'function' ? updater(fields) : updater;
|
||
|
||
if (onChange) {
|
||
// 受控模式：通知父组件
|
||
onChange({
|
||
version: '1.0',
|
||
formConfig,
|
||
fields: newFields,
|
||
});
|
||
} else {
|
||
// 非受控模式：更新内部状态
|
||
setInternalFields(newFields);
|
||
}
|
||
}, [fields, formConfig, onChange]);
|
||
|
||
const setFormConfig = useCallback((updater: React.SetStateAction<FormConfig>) => {
|
||
const newConfig = typeof updater === 'function' ? updater(formConfig) : updater;
|
||
|
||
if (onChange) {
|
||
onChange({
|
||
version: '1.0',
|
||
formConfig: newConfig,
|
||
fields,
|
||
});
|
||
} else {
|
||
setInternalFormConfig(newConfig);
|
||
}
|
||
}, [fields, formConfig, onChange]);
|
||
|
||
// 选中的字段
|
||
const [selectedFieldId, setSelectedFieldId] = useState<string>();
|
||
|
||
// 待选中的字段ID（用于确保字段添加后再选中）
|
||
const [pendingSelectId, setPendingSelectId] = useState<string | null>(null);
|
||
|
||
// 剪贴板（用于复制粘贴）
|
||
const [clipboard, setClipboard] = useState<FieldConfig | null>(null);
|
||
|
||
// 预览模式
|
||
const [previewVisible, setPreviewVisible] = useState(false);
|
||
|
||
// 正在拖拽的元素ID
|
||
const [activeId, setActiveId] = useState<string | null>(null);
|
||
|
||
// 拖拽悬停的目标ID（用于显示插入指示器）
|
||
const [overId, setOverId] = useState<string | null>(null);
|
||
|
||
// 拖拽传感器 - 添加激活约束，减少误触和卡顿
|
||
const sensors = useSensors(
|
||
useSensor(PointerSensor, {
|
||
activationConstraint: {
|
||
distance: 8, // 移动8px后才激活拖拽
|
||
},
|
||
})
|
||
);
|
||
|
||
// 🔌 合并核心组件和扩展组件
|
||
const allComponents = useMemo(() => {
|
||
return [...COMPONENT_LIST, ...extraComponents];
|
||
}, [extraComponents]);
|
||
|
||
// 自定义碰撞检测策略：基于边界判断，区分"插入"和"拖入"
|
||
const customCollisionDetection = useCallback((args: any) => {
|
||
const pointerCollisions = pointerWithin(args);
|
||
|
||
if (pointerCollisions.length === 0) {
|
||
return closestCenter(args);
|
||
}
|
||
|
||
// 查找栅格字段的碰撞
|
||
const gridFieldCollisions = pointerCollisions.filter((collision: any) => {
|
||
const fieldId = collision.id.toString();
|
||
return fields.some(f => f.id === fieldId && f.type === 'grid');
|
||
});
|
||
|
||
// 如果拖到栅格字段上，使用边界检测
|
||
if (gridFieldCollisions.length > 0 && args.pointerCoordinates) {
|
||
const gridCollision = gridFieldCollisions[0];
|
||
const droppableContainer = args.droppableContainers.find(
|
||
(container: any) => container.id === gridCollision.id
|
||
);
|
||
|
||
if (droppableContainer?.rect?.current) {
|
||
const rect = droppableContainer.rect.current;
|
||
const pointer = args.pointerCoordinates;
|
||
|
||
// 计算鼠标在栅格字段中的相对垂直位置（0-1）
|
||
const relativeY = (pointer.y - rect.top) / rect.height;
|
||
|
||
// 边缘阈值：上下各 20%
|
||
const edgeThreshold = 0.2;
|
||
|
||
if (relativeY < edgeThreshold || relativeY > (1 - edgeThreshold)) {
|
||
// 在边缘区域 → 返回栅格字段本身（插入到栅格前后）
|
||
return [gridCollision];
|
||
} else {
|
||
// 在中心区域 → 查找栅格列（拖入栅格内部）
|
||
const gridColumnCollisions = pointerCollisions.filter((collision: any) => {
|
||
const id = collision.id.toString();
|
||
return id.startsWith('grid-') && id.includes('-col-');
|
||
});
|
||
|
||
if (gridColumnCollisions.length > 0) {
|
||
return gridColumnCollisions;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 非栅格字段：优先级排序
|
||
// 1. 优先选择非栅格字段
|
||
const nonGridFields = pointerCollisions.filter((collision: any) => {
|
||
const id = collision.id.toString();
|
||
return id.startsWith('field_') && !fields.some(f => f.id === id && f.type === 'grid');
|
||
});
|
||
if (nonGridFields.length > 0) {
|
||
return nonGridFields;
|
||
}
|
||
|
||
// 2. 画布或底部区域
|
||
const canvasCollisions = pointerCollisions.filter((collision: any) => {
|
||
const id = collision.id.toString();
|
||
return id === 'canvas' || id === 'canvas-bottom';
|
||
});
|
||
if (canvasCollisions.length > 0) {
|
||
return canvasCollisions;
|
||
}
|
||
|
||
// 3. 栅格列
|
||
const gridColumns = pointerCollisions.filter((collision: any) => {
|
||
const id = collision.id.toString();
|
||
return id.startsWith('grid-') && id.includes('-col-');
|
||
});
|
||
if (gridColumns.length > 0) {
|
||
return gridColumns;
|
||
}
|
||
|
||
return pointerCollisions;
|
||
}, [fields]);
|
||
|
||
// 生成唯一 ID
|
||
const generateId = () => `field_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
||
|
||
// 处理拖拽开始
|
||
const handleDragStart = useCallback((event: DragStartEvent) => {
|
||
setActiveId(event.active.id.toString());
|
||
setOverId(null);
|
||
}, []);
|
||
|
||
// 处理拖拽悬停
|
||
const handleDragOver = useCallback((event: DragOverEvent) => {
|
||
const { over } = event;
|
||
setOverId(over ? over.id.toString() : null);
|
||
}, []);
|
||
|
||
// 处理拖拽结束
|
||
const handleDragEnd = useCallback((event: DragEndEvent) => {
|
||
const { active, over } = event;
|
||
|
||
// 清除拖拽状态
|
||
setActiveId(null);
|
||
setOverId(null);
|
||
|
||
if (!over) return;
|
||
|
||
const activeData = active.data.current;
|
||
const overData = over.data.current;
|
||
|
||
// 从组件面板拖拽新组件到栅格列
|
||
if (activeData?.isNew && overData?.gridId && overData?.colIndex !== undefined) {
|
||
const componentType = active.id.toString().replace('new-', '');
|
||
const component = allComponents.find((c) => c.type === componentType);
|
||
|
||
if (component) {
|
||
const newField: FieldConfig = {
|
||
id: generateId(),
|
||
type: component.type,
|
||
label: component.label,
|
||
name: `${component.type}_${Date.now()}`,
|
||
...component.defaultConfig,
|
||
};
|
||
|
||
setFields((prev) => {
|
||
const updateGrid = (fieldList: FieldConfig[]): FieldConfig[] => {
|
||
return fieldList.map(field => {
|
||
if (field.id === overData.gridId && field.type === 'grid' && field.children) {
|
||
const newChildren = [...field.children];
|
||
newChildren[overData.colIndex] = [...newChildren[overData.colIndex], newField];
|
||
return { ...field, children: newChildren };
|
||
}
|
||
if (field.type === 'grid' && field.children) {
|
||
return {
|
||
...field,
|
||
children: field.children.map(col => updateGrid(col)),
|
||
};
|
||
}
|
||
return field;
|
||
});
|
||
};
|
||
|
||
return updateGrid(prev);
|
||
});
|
||
|
||
// 🔄 使用 pendingSelectId 确保字段添加后再选中
|
||
setPendingSelectId(newField.id);
|
||
message.success(`已添加${component.label}到栅格列`);
|
||
}
|
||
return;
|
||
}
|
||
|
||
// 从组件面板拖拽新组件到画布或字段
|
||
if (activeData?.isNew && overData?.accept === 'field') {
|
||
const componentType = active.id.toString().replace('new-', '');
|
||
const component = allComponents.find((c) => c.type === componentType);
|
||
|
||
if (component) {
|
||
const newField: FieldConfig = {
|
||
id: generateId(),
|
||
type: component.type,
|
||
label: component.label,
|
||
name: `${component.type}_${Date.now()}`,
|
||
...component.defaultConfig,
|
||
};
|
||
|
||
setFields((prev) => {
|
||
const newFields = [...prev];
|
||
|
||
// 如果拖到画布空白处或底部区域，添加到末尾
|
||
if (over.id === 'canvas' || over.id === 'canvas-bottom' || overData?.isBottom) {
|
||
newFields.push(newField);
|
||
} else {
|
||
// 如果拖到某个字段上，插入到该字段之前（修复拖拽插入位置bug）
|
||
const overIndex = newFields.findIndex((f) => f.id === over.id);
|
||
if (overIndex >= 0) {
|
||
newFields.splice(overIndex, 0, newField); // 插入到目标字段之前
|
||
} else {
|
||
newFields.push(newField);
|
||
}
|
||
}
|
||
|
||
return newFields;
|
||
});
|
||
|
||
// 🔄 使用 pendingSelectId 确保字段添加后再选中
|
||
setPendingSelectId(newField.id);
|
||
message.success(`已添加${component.label}`);
|
||
}
|
||
}
|
||
|
||
// 画布内字段排序
|
||
if (!activeData?.isNew && overData?.accept === 'field') {
|
||
setFields((prev) => {
|
||
const oldIndex = prev.findIndex((f) => f.id === active.id);
|
||
const newIndex = prev.findIndex((f) => f.id === over.id);
|
||
|
||
if (oldIndex !== -1 && newIndex !== -1) {
|
||
return arrayMove(prev, oldIndex, newIndex);
|
||
}
|
||
|
||
return prev;
|
||
});
|
||
}
|
||
}, [setFields]);
|
||
|
||
// 选择字段
|
||
const handleSelectField = useCallback((fieldId: string) => {
|
||
if (readonly) return;
|
||
setSelectedFieldId(fieldId);
|
||
}, [readonly]);
|
||
|
||
// 深拷贝字段（包括嵌套的栅格子字段）
|
||
const deepCopyField = useCallback((field: FieldConfig): FieldConfig => {
|
||
const newField: FieldConfig = {
|
||
...field,
|
||
id: generateId(),
|
||
name: field.name + '_copy_' + Date.now(),
|
||
};
|
||
|
||
// 如果是栅格布局，递归复制子字段
|
||
if (field.type === 'grid' && field.children) {
|
||
newField.children = field.children.map(columnFields =>
|
||
columnFields.map(childField => deepCopyField(childField))
|
||
);
|
||
}
|
||
|
||
return newField;
|
||
}, []);
|
||
|
||
// 复制字段到剪贴板
|
||
const handleCopyField = useCallback((fieldId: string) => {
|
||
if (readonly) return;
|
||
|
||
// 递归查找字段
|
||
const findField = (fieldList: FieldConfig[], id: string): FieldConfig | null => {
|
||
for (const field of fieldList) {
|
||
if (field.id === id) {
|
||
return field;
|
||
}
|
||
// 如果是栅格布局，递归查找子字段
|
||
if (field.type === 'grid' && field.children) {
|
||
for (const columnFields of field.children) {
|
||
const found = findField(columnFields, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
}
|
||
return null;
|
||
};
|
||
|
||
const field = findField(fields, fieldId);
|
||
if (field) {
|
||
setClipboard(field);
|
||
message.success('已复制字段到剪贴板');
|
||
}
|
||
}, [fields, readonly]);
|
||
|
||
// 粘贴字段到主列表末尾
|
||
const handlePasteToCanvas = useCallback(() => {
|
||
if (readonly || !clipboard) {
|
||
message.warning('剪贴板为空');
|
||
return;
|
||
}
|
||
|
||
const newField = deepCopyField(clipboard);
|
||
setFields(prev => [...prev, newField]);
|
||
// 🔄 使用 pendingSelectId 确保字段添加后再选中
|
||
setPendingSelectId(newField.id);
|
||
message.success('已粘贴字段');
|
||
}, [clipboard, deepCopyField, readonly, setFields]);
|
||
|
||
// 粘贴字段到栅格列
|
||
const handlePasteToGrid = useCallback((gridId: string, colIndex: number) => {
|
||
if (readonly || !clipboard) {
|
||
message.warning('剪贴板为空');
|
||
return;
|
||
}
|
||
|
||
const newField = deepCopyField(clipboard);
|
||
|
||
setFields(prev => prev.map(field => {
|
||
if (field.id === gridId && field.type === 'grid') {
|
||
const newChildren = [...(field.children || [])];
|
||
if (!newChildren[colIndex]) {
|
||
newChildren[colIndex] = [];
|
||
}
|
||
newChildren[colIndex] = [...newChildren[colIndex], newField];
|
||
return { ...field, children: newChildren };
|
||
}
|
||
return field;
|
||
}));
|
||
|
||
// 🔄 使用 pendingSelectId 确保字段添加后再选中
|
||
setPendingSelectId(newField.id);
|
||
message.success('已粘贴字段到栅格');
|
||
}, [clipboard, deepCopyField, readonly, setFields]);
|
||
|
||
// 删除字段（支持删除栅格内的字段）
|
||
const handleDeleteField = useCallback((fieldId: string) => {
|
||
if (readonly) return;
|
||
|
||
let deleted = false;
|
||
|
||
// 递归删除函数
|
||
const deleteFieldRecursive = (fieldList: FieldConfig[]): FieldConfig[] => {
|
||
return fieldList
|
||
.filter(f => {
|
||
if (f.id === fieldId) {
|
||
deleted = true;
|
||
return false;
|
||
}
|
||
return true;
|
||
})
|
||
.map(f => {
|
||
// 如果是栅格布局，递归处理其子字段
|
||
if (f.type === 'grid' && f.children) {
|
||
return {
|
||
...f,
|
||
children: f.children.map(columnFields =>
|
||
deleteFieldRecursive(columnFields)
|
||
),
|
||
};
|
||
}
|
||
return f;
|
||
});
|
||
};
|
||
|
||
setFields(prev => deleteFieldRecursive(prev));
|
||
|
||
if (deleted) {
|
||
if (selectedFieldId === fieldId) {
|
||
setSelectedFieldId(undefined);
|
||
}
|
||
message.success('已删除字段');
|
||
}
|
||
}, [selectedFieldId, readonly, setFields]);
|
||
|
||
// 更新字段属性（支持更新栅格内的字段）
|
||
const handleFieldChange = useCallback((updatedField: FieldConfig) => {
|
||
if (readonly) return;
|
||
|
||
// 递归更新函数
|
||
const updateFieldRecursive = (fieldList: FieldConfig[]): FieldConfig[] => {
|
||
return fieldList.map(f => {
|
||
if (f.id === updatedField.id) {
|
||
return updatedField;
|
||
}
|
||
// 如果是栅格布局，递归处理其子字段
|
||
if (f.type === 'grid' && f.children) {
|
||
return {
|
||
...f,
|
||
children: f.children.map(columnFields =>
|
||
updateFieldRecursive(columnFields)
|
||
),
|
||
};
|
||
}
|
||
return f;
|
||
});
|
||
};
|
||
|
||
setFields(prev => updateFieldRecursive(prev));
|
||
}, [readonly, setFields]);
|
||
|
||
// 更新表单配置
|
||
const handleFormConfigChange = useCallback((newConfig: Partial<FormConfig>) => {
|
||
if (readonly) return;
|
||
setFormConfig(prev => ({ ...prev, ...newConfig }));
|
||
}, [readonly, setFormConfig]);
|
||
|
||
// 保存表单
|
||
const handleSave = useCallback(() => {
|
||
if (fields.length === 0) {
|
||
message.warning('表单为空，请先添加字段');
|
||
return;
|
||
}
|
||
|
||
const schema: FormSchema = {
|
||
version: '1.0',
|
||
formConfig,
|
||
fields,
|
||
};
|
||
|
||
if (onSave) {
|
||
onSave(schema);
|
||
} else {
|
||
console.log('保存的表单 Schema:', JSON.stringify(schema, null, 2));
|
||
message.success('表单已保存！请查看控制台');
|
||
}
|
||
}, [fields, formConfig, onSave]);
|
||
|
||
// 导出 JSON
|
||
const handleExport = useCallback(() => {
|
||
if (fields.length === 0) {
|
||
message.warning('表单为空，无法导出');
|
||
return;
|
||
}
|
||
|
||
const schema: FormSchema = {
|
||
version: '1.0',
|
||
formConfig,
|
||
fields,
|
||
};
|
||
|
||
const dataStr = JSON.stringify(schema, null, 2);
|
||
const dataUri = 'data:application/json;charset=utf-8,' + encodeURIComponent(dataStr);
|
||
const exportFileDefaultName = `form-schema-${Date.now()}.json`;
|
||
|
||
const linkElement = document.createElement('a');
|
||
linkElement.setAttribute('href', dataUri);
|
||
linkElement.setAttribute('download', exportFileDefaultName);
|
||
linkElement.click();
|
||
|
||
message.success('JSON Schema 已导出');
|
||
}, [fields, formConfig]);
|
||
|
||
// 导入 JSON
|
||
const handleImport = useCallback(() => {
|
||
if (readonly) return;
|
||
|
||
const input = document.createElement('input');
|
||
input.type = 'file';
|
||
input.accept = '.json';
|
||
|
||
input.onchange = (e: any) => {
|
||
const file = e.target.files[0];
|
||
if (file) {
|
||
const reader = new FileReader();
|
||
reader.onload = (event: any) => {
|
||
try {
|
||
const schema: FormSchema = JSON.parse(event.target.result);
|
||
|
||
if (!schema.fields || !Array.isArray(schema.fields)) {
|
||
message.error('无效的表单 Schema 格式');
|
||
return;
|
||
}
|
||
|
||
setFields(schema.fields);
|
||
setFormConfig(schema.formConfig || formConfig);
|
||
setSelectedFieldId(undefined);
|
||
message.success('JSON Schema 导入成功');
|
||
} catch (error) {
|
||
message.error('JSON 格式错误');
|
||
console.error('导入错误:', error);
|
||
}
|
||
};
|
||
reader.readAsText(file);
|
||
}
|
||
};
|
||
|
||
input.click();
|
||
}, [formConfig, readonly, setFields, setFormConfig]);
|
||
|
||
// 清空表单
|
||
const handleClear = useCallback(() => {
|
||
if (readonly) return;
|
||
|
||
Modal.confirm({
|
||
title: '确认清空',
|
||
content: '确定要清空所有字段吗？此操作不可恢复。',
|
||
onOk: () => {
|
||
setFields([]);
|
||
setSelectedFieldId(undefined);
|
||
message.info('表单已清空');
|
||
},
|
||
});
|
||
}, [readonly, setFields]);
|
||
|
||
// 递归查找选中的字段（包括栅格内的字段）
|
||
const findFieldById = (fieldList: FieldConfig[], id?: string): FieldConfig | undefined => {
|
||
if (!id) return undefined;
|
||
|
||
for (const field of fieldList) {
|
||
if (field.id === id) {
|
||
return field;
|
||
}
|
||
// 如果是栅格布局，递归查找子字段
|
||
if (field.type === 'grid' && field.children) {
|
||
for (const columnFields of field.children) {
|
||
const found = findFieldById(columnFields, id);
|
||
if (found) return found;
|
||
}
|
||
}
|
||
}
|
||
return undefined;
|
||
};
|
||
|
||
const selectedField = findFieldById(fields, selectedFieldId) || null;
|
||
|
||
// 🔄 当有待选中的字段时，等待该字段被添加到 fields 后再选中
|
||
useEffect(() => {
|
||
if (pendingSelectId) {
|
||
const field = findFieldById(fields, pendingSelectId);
|
||
if (field) {
|
||
console.log('✅ 字段已添加，现在选中:', pendingSelectId, field.type);
|
||
setSelectedFieldId(pendingSelectId);
|
||
setPendingSelectId(null); // 清除待选中状态
|
||
} else {
|
||
console.log('⏳ 等待字段添加到 fields:', pendingSelectId);
|
||
}
|
||
}
|
||
}, [fields, pendingSelectId]);
|
||
|
||
// 获取所有字段（扁平化，包括grid中的嵌套字段）
|
||
const getAllFields = useCallback((fieldList: FieldConfig[]): FieldConfig[] => {
|
||
const result: FieldConfig[] = [];
|
||
|
||
fieldList.forEach(field => {
|
||
// 只添加实际的表单字段，不包括布局组件
|
||
if (field.type !== 'divider' && field.type !== 'grid' && field.type !== 'text') {
|
||
result.push(field);
|
||
}
|
||
|
||
// 如果是grid，递归获取其子字段
|
||
if (field.type === 'grid' && field.children) {
|
||
field.children.forEach(columnFields => {
|
||
result.push(...getAllFields(columnFields));
|
||
});
|
||
}
|
||
});
|
||
|
||
return result;
|
||
}, []);
|
||
|
||
const allFields = getAllFields(fields);
|
||
|
||
// 快捷键支持
|
||
useEffect(() => {
|
||
if (readonly) return;
|
||
|
||
const handleKeyDown = (e: KeyboardEvent) => {
|
||
// 检查是否在输入框、文本域等可编辑元素中
|
||
const target = e.target as HTMLElement;
|
||
const isEditable =
|
||
target.tagName === 'INPUT' ||
|
||
target.tagName === 'TEXTAREA' ||
|
||
target.isContentEditable;
|
||
|
||
// 如果在可编辑元素中，不触发快捷键
|
||
if (isEditable) return;
|
||
|
||
const isMac = /Mac|iPod|iPhone|iPad/.test(navigator.platform);
|
||
const ctrlKey = isMac ? e.metaKey : e.ctrlKey;
|
||
|
||
// Ctrl+C / Cmd+C: 复制选中的字段
|
||
if (ctrlKey && e.key === 'c' && selectedFieldId) {
|
||
e.preventDefault();
|
||
handleCopyField(selectedFieldId);
|
||
}
|
||
|
||
// Ctrl+V / Cmd+V: 粘贴到画布
|
||
if (ctrlKey && e.key === 'v' && clipboard) {
|
||
e.preventDefault();
|
||
handlePasteToCanvas();
|
||
}
|
||
|
||
// Delete: 删除选中的字段
|
||
if (e.key === 'Delete' && selectedFieldId) {
|
||
e.preventDefault();
|
||
handleDeleteField(selectedFieldId);
|
||
}
|
||
};
|
||
|
||
window.addEventListener('keydown', handleKeyDown);
|
||
return () => {
|
||
window.removeEventListener('keydown', handleKeyDown);
|
||
};
|
||
}, [selectedFieldId, clipboard, readonly, handleCopyField, handlePasteToCanvas, handleDeleteField]);
|
||
|
||
return (
|
||
<ComponentsContext.Provider value={allComponents}>
|
||
<div className="form-designer">
|
||
{showToolbar && (
|
||
<div className="form-designer-header">
|
||
<div className="form-designer-title">表单设计</div>
|
||
<Space>
|
||
<Button
|
||
icon={<UploadOutlined />}
|
||
onClick={handleImport}
|
||
disabled={readonly}
|
||
>
|
||
导入 JSON
|
||
</Button>
|
||
<Button icon={<DownloadOutlined />} onClick={handleExport}>
|
||
导出 JSON
|
||
</Button>
|
||
<Button icon={<EyeOutlined />} onClick={() => setPreviewVisible(true)}>
|
||
预览
|
||
</Button>
|
||
<Button
|
||
icon={<ClearOutlined />}
|
||
danger
|
||
onClick={handleClear}
|
||
disabled={readonly}
|
||
>
|
||
清空
|
||
</Button>
|
||
<Button
|
||
type="primary"
|
||
icon={<SaveOutlined />}
|
||
onClick={handleSave}
|
||
disabled={readonly}
|
||
>
|
||
保存
|
||
</Button>
|
||
{extraActions}
|
||
</Space>
|
||
</div>
|
||
)}
|
||
|
||
<DndContext
|
||
sensors={sensors}
|
||
onDragStart={handleDragStart}
|
||
onDragOver={handleDragOver}
|
||
onDragEnd={handleDragEnd}
|
||
collisionDetection={customCollisionDetection}
|
||
>
|
||
<div className="form-designer-body">
|
||
{/* 左侧组件面板 */}
|
||
<div style={{ width: 280 }}>
|
||
<ComponentPanel extraComponents={extraComponents} />
|
||
</div>
|
||
|
||
{/* 中间设计画布 */}
|
||
<DesignCanvas
|
||
fields={fields}
|
||
selectedFieldId={selectedFieldId}
|
||
onSelectField={handleSelectField}
|
||
onDeleteField={handleDeleteField}
|
||
onCopyField={handleCopyField}
|
||
onPasteToCanvas={handlePasteToCanvas}
|
||
onPasteToGrid={handlePasteToGrid}
|
||
labelAlign={formConfig.labelAlign}
|
||
hasClipboard={!!clipboard}
|
||
activeId={activeId}
|
||
overId={overId}
|
||
duplicateFieldIds={duplicateFieldIds}
|
||
/>
|
||
|
||
{/* 右侧属性面板 */}
|
||
<PropertyPanel
|
||
selectedField={selectedField}
|
||
formConfig={formConfig}
|
||
onFieldChange={handleFieldChange}
|
||
onFormConfigChange={handleFormConfigChange}
|
||
allFields={allFields}
|
||
fieldNames={fieldNames}
|
||
/>
|
||
</div>
|
||
|
||
{/* 拖拽覆盖层 - 显示正在拖拽的元素 */}
|
||
<DragOverlay dropAnimation={null}>
|
||
{activeId && activeId.startsWith('new-') ? (
|
||
<div style={{
|
||
padding: '10px 12px',
|
||
background: '#fff',
|
||
border: '2px solid #1890ff',
|
||
borderRadius: 6,
|
||
boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
|
||
cursor: 'grabbing',
|
||
}}>
|
||
{allComponents.find(c => `new-${c.type}` === activeId)?.label || '组件'}
|
||
</div>
|
||
) : null}
|
||
</DragOverlay>
|
||
</DndContext>
|
||
|
||
{/* 预览模态框 */}
|
||
<Modal
|
||
title="表单预览"
|
||
open={previewVisible}
|
||
onCancel={() => setPreviewVisible(false)}
|
||
width={formConfig.formWidth || 600}
|
||
styles={{
|
||
body: {
|
||
maxHeight: '60vh',
|
||
minHeight: '300px',
|
||
overflowY: 'auto',
|
||
overflowX: 'hidden',
|
||
padding: 0,
|
||
}
|
||
}}
|
||
footer={
|
||
<div style={{ textAlign: 'center' }}>
|
||
<Space>
|
||
<Button type="primary" onClick={() => formPreviewRef.current?.submit()}>
|
||
提交
|
||
</Button>
|
||
<Button onClick={() => formPreviewRef.current?.reset()}>
|
||
重置
|
||
</Button>
|
||
</Space>
|
||
</div>
|
||
}
|
||
>
|
||
<FormPreview ref={formPreviewRef} fields={fields} formConfig={formConfig} />
|
||
</Modal>
|
||
</div>
|
||
</ComponentsContext.Provider>
|
||
);
|
||
};
|
||
|
||
export default FormDesigner;
|
||
|