表单设计器

This commit is contained in:
dengqichen 2025-10-23 21:41:08 +08:00
parent 46232db651
commit f880c5f59d
5 changed files with 3448 additions and 82 deletions

File diff suppressed because it is too large Load Diff

View File

@ -72,6 +72,7 @@ const FieldRenderer: React.FC<FieldRendererProps> = ({
selectedFieldId={selectedFieldId} selectedFieldId={selectedFieldId}
onSelectField={onSelectField} onSelectField={onSelectField}
onDeleteField={onDeleteField} onDeleteField={onDeleteField}
labelAlign={labelAlign}
/> />
); );
} }

View File

@ -89,7 +89,11 @@ const GridColumn: React.FC<GridColumnProps> = ({
<div> <div>
{fields.map((childField) => ( {fields.map((childField) => (
<div key={childField.id} style={{ marginBottom: 8 }}> <div key={childField.id} style={{ marginBottom: 8 }}>
<FieldRenderer field={childField} isPreview={isPreview} /> <FieldRenderer
field={childField}
isPreview={isPreview}
labelAlign={labelAlign}
/>
</div> </div>
))} ))}
</div> </div>

View File

@ -23,10 +23,10 @@ const { Text } = Typography;
const { TabPane } = Tabs; const { TabPane } = Tabs;
interface PropertyPanelProps { interface PropertyPanelProps {
selectedField?: FieldConfig; selectedField: FieldConfig | null;
formConfig: FormConfig; formConfig: FormConfig;
onFieldChange: (field: FieldConfig) => void; onFieldChange: (field: FieldConfig) => void;
onFormConfigChange: (config: FormConfig) => void; onFormConfigChange: (newConfig: Partial<FormConfig>) => void;
} }
const PropertyPanel: React.FC<PropertyPanelProps> = ({ const PropertyPanel: React.FC<PropertyPanelProps> = ({

View File

@ -185,6 +185,11 @@ const FormDesigner: React.FC = () => {
setFields(prev => updateFieldRecursive(prev)); setFields(prev => updateFieldRecursive(prev));
}, []); }, []);
// 更新表单配置
const handleFormConfigChange = useCallback((newConfig: Partial<FormConfig>) => {
setFormConfig(prev => ({ ...prev, ...newConfig }));
}, []);
// 保存表单 // 保存表单
const handleSave = useCallback(() => { const handleSave = useCallback(() => {
if (fields.length === 0) { if (fields.length === 0) {
@ -294,7 +299,7 @@ const FormDesigner: React.FC = () => {
return undefined; return undefined;
}; };
const selectedField = findFieldById(fields, selectedFieldId); const selectedField = findFieldById(fields, selectedFieldId) || null;
return ( return (
<div style={{ height: '100vh', width: '100%', display: 'flex', flexDirection: 'column' }}> <div style={{ height: '100vh', width: '100%', display: 'flex', flexDirection: 'column' }}>
@ -354,7 +359,7 @@ const FormDesigner: React.FC = () => {
selectedField={selectedField} selectedField={selectedField}
formConfig={formConfig} formConfig={formConfig}
onFieldChange={handleFieldChange} onFieldChange={handleFieldChange}
onFormConfigChange={setFormConfig} onFormConfigChange={handleFormConfigChange}
/> />
</div> </div>