87 lines
2.2 KiB
TypeScript
87 lines
2.2 KiB
TypeScript
/**
|
|
* 左侧组件面板
|
|
* 显示可拖拽的表单组件列表
|
|
*/
|
|
|
|
import React from 'react';
|
|
import { useDraggable } from '@dnd-kit/core';
|
|
import { CSS } from '@dnd-kit/utilities';
|
|
import { Collapse, Typography } from 'antd';
|
|
import type { ComponentMeta } from '../config';
|
|
import { getComponentsByCategory } from '../config';
|
|
import '../styles.css';
|
|
|
|
const { Panel } = Collapse;
|
|
const { Text } = Typography;
|
|
|
|
// 可拖拽组件项
|
|
const DraggableComponent: React.FC<{ component: ComponentMeta }> = ({ component }) => {
|
|
const { attributes, listeners, setNodeRef, transform } = useDraggable({
|
|
id: `new-${component.type}`,
|
|
data: {
|
|
type: component.type,
|
|
isNew: true,
|
|
},
|
|
});
|
|
|
|
const style = {
|
|
transform: CSS.Translate.toString(transform),
|
|
cursor: 'move',
|
|
};
|
|
|
|
const Icon = component.icon;
|
|
|
|
return (
|
|
<div
|
|
ref={setNodeRef}
|
|
style={style}
|
|
{...listeners}
|
|
{...attributes}
|
|
className="form-designer-component-item"
|
|
>
|
|
<Icon style={{ marginRight: 8, fontSize: 16 }} />
|
|
<Text>{component.label}</Text>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// 组件面板
|
|
const ComponentPanel: React.FC = () => {
|
|
const componentsByCategory = getComponentsByCategory();
|
|
|
|
// 定义分类显示顺序
|
|
const categoryOrder = ['布局字段', '基础字段', '高级字段'];
|
|
|
|
return (
|
|
<div className="form-designer-component-panel">
|
|
<div className="form-designer-component-panel-header">
|
|
<Text strong>组件列表</Text>
|
|
</div>
|
|
|
|
<Collapse
|
|
defaultActiveKey={['基础字段', '高级字段', '布局字段']}
|
|
ghost
|
|
bordered={false}
|
|
>
|
|
{categoryOrder.map((category) => {
|
|
const components = componentsByCategory[category];
|
|
if (!components || components.length === 0) return null;
|
|
|
|
return (
|
|
<Panel header={category} key={category}>
|
|
<div className="form-designer-component-list">
|
|
{components.map((component) => (
|
|
<DraggableComponent key={component.type} component={component} />
|
|
))}
|
|
</div>
|
|
</Panel>
|
|
);
|
|
})}
|
|
</Collapse>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default ComponentPanel;
|
|
|