xiaozhi/jk-rag-platform/src/pages/knowledgeLib/list/KnowledgeDrawer.tsx

import * as React from 'react';
import { Drawer, Form, Input, Select, Button, Space, Divider, message, Radio } from 'antd';
import { Database, Scissors, Text, AlignLeft } from 'lucide-react';
import './KnowledgeDrawer.scss';

interface KnowledgeDrawerProps {
    open: boolean;
    onClose: () => void;
    form: any;
    onSubmit: (values: any) => void;
    editingData?: any;
}

const KnowledgeDrawer: React.FC<KnowledgeDrawerProps> = ({
    open,
    onClose,
    form,
    onSubmit,
    editingData,
}) => {
    const [splittingType, setSplittingType] = React.useState('1');

    React.useEffect(() => {
        if (editingData && open) {
            form.setFieldsValue(editingData);
            setSplittingType(editingData.splittingType || '1');
        } else {
            form.resetFields();
            setSplittingType('1');
        }
    }, [editingData, open, form]);

    const handleSubmit = async () => {
        try {
            const values = await form.validateFields();
            onSubmit(values);
        } catch (error) {
            console.error('验证失败:', error);
        }
    };

    return (
        <Drawer
            title={editingData ? '编辑知识库' : '创建知识库'}
            placement="right"
            width={720}
            open={open}
            onClose={onClose}
            className='knowledge-drawer'
            destroyOnClose
            extra={
                <Space>
                    <Button onClick={onClose}>取消</Button>
                    <Button type="primary" onClick={handleSubmit}>
                        {editingData ? '保存' : '创建'}
                    </Button>
                </Space>
            }
        >
            <div className='drawer-form-container'>
                {/* 基本信息 */}
                <div className='icon-select-section'>
                    <div className='section-icon'>
                        <Database size={24} />
                    </div>
                    <div className='section-info'>
                        <div className='section-title'>基本信息</div>
                        <div className='section-desc'>填写知识库的基本信息</div>
                    </div>
                </div>

                <Form form={form} layout='vertical' autoComplete="off">
                    <Form.Item
                        label='知识库名称'
                        name='name'
                        rules={[{ required: true, message: '请输入知识库名称' }]}
                        extra='尽量概括知识库的主要内容'
                    >
                        <Input placeholder="请输入知识库名称" maxLength={50} showCount />
                    </Form.Item>

                    <Form.Item
                        label='知识库描述'
                        name='description'
                        rules={[{ required: true, message: '请输入知识库描述' }]}
                        extra='描述知识库的文件内容和用途'
                    >
                        <Input.TextArea
                            showCount
                            maxLength={500}
                            placeholder="请输入知识库描述"
                            rows={4}
                        />
                    </Form.Item>

                    <Form.Item
                        label='知识库分类'
                        name='standardClassification'
                        rules={[{ required: true, message: '请选择知识库分类' }]}
                        extra='选择知识库的实际分类'
                    >
                        <Select placeholder='请选择分类'>
                            <Select.Option value='0'>公文类</Select.Option>
                            <Select.Option value='1'>法律类</Select.Option>
                            <Select.Option value='2'>政策类</Select.Option>
                        </Select>
                    </Form.Item>
                </Form>

                <Divider className='section-divider'>切片设置</Divider>

                <div className='icon-select-section'>
                    <div className='section-icon'>
                        <Scissors size={24} />
                    </div>
                    <div className='section-info'>
                        <div className='section-title'>切片设置</div>
                        <div className='section-desc'>配置文档切片的规则和方式</div>
                    </div>
                </div>

                <Form form={form} layout='vertical' autoComplete="off">
                    <Form.Item
                        label='切片方式'
                        name='splittingType'
                        rules={[{ required: true, message: '请选择切片方式' }]}
                        extra='选择文档的切片方式'
                    >
                        <Radio.Group
                            buttonStyle="solid"
                            className='splitting-radio'
                            onChange={(e) => setSplittingType(e.target.value)}
                        >
                            <Radio.Button value='1'>
                                <Text size={16} style={{ marginRight: 4 }} />
                                按段落
                            </Radio.Button>
                            <Radio.Button value='2'>
                                <AlignLeft size={16} style={{ marginRight: 4 }} />
                                按章节
                            </Radio.Button>
                        </Radio.Group>
                    </Form.Item>

                    {splittingType === '1' && (
                        <Form.Item
                            label='段落长度'
                            name='paragraphLength'
                            extra='每个段落的最大字符数'
                        >
                            <Select placeholder='请选择段落长度'>
                                <Select.Option value='500'>500 字</Select.Option>
                                <Select.Option value='1000'>1000 字</Select.Option>
                                <Select.Option value='2000'>2000 字</Select.Option>
                            </Select>
                        </Form.Item>
                    )}

                    {splittingType === '2' && (
                        <Form.Item
                            label='章节识别'
                            name='chapterRecognition'
                            extra='自动识别文档的章节结构'
                        >
                            <Radio.Group>
                                <Radio value='auto'>自动识别</Radio>
                                <Radio value='manual'>手动指定</Radio>
                            </Radio.Group>
                        </Form.Item>
                    )}
                </Form>
            </div>
        </Drawer>
    );
};

export default KnowledgeDrawer;