KnowledgeBase_frontend/src/components/CreateKnowledgeBaseModal.jsx

import React from 'react';
import SvgIcon from './SvgIcon';

/**
 * 创建知识库模态框组件
 * @param {Object} props
 * @param {boolean} props.show - 是否显示弹窗
 * @param {Object} props.formData - 表单数据
 * @param {Object} props.formErrors - 表单错误信息
 * @param {boolean} props.isSubmitting - 是否正在提交
 * @param {Function} props.onClose - 关闭弹窗的回调函数
 * @param {Function} props.onChange - 表单输入变化的回调函数
 * @param {Function} props.onSubmit - 提交表单的回调函数
 */
const CreateKnowledgeBaseModal = ({ show, formData, formErrors, isSubmitting, onClose, onChange, onSubmit }) => {
    if (!show) return null;

    return (
        <div
            className='modal-backdrop'
            style={{
                position: 'fixed',
                top: 0,
                left: 0,
                right: 0,
                bottom: 0,
                backgroundColor: 'rgba(0, 0, 0, 0.5)',
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                zIndex: 1050,
            }}
        >
            <div
                className='modal-content bg-white rounded shadow'
                style={{
                    width: '500px',
                    maxWidth: '90%',
                    padding: '20px',
                }}
            >
                <div className='modal-header d-flex justify-content-between align-items-center mb-3'>
                    <h5 className='modal-title m-0'>新建知识库</h5>
                    <button
                        type='button'
                        className='btn-close'
                        onClick={onClose}
                        aria-label='Close'
                        disabled={isSubmitting}
                    ></button>
                </div>
                <div className='modal-body'>
                    <div className='mb-3'>
                        <label htmlFor='name' className='form-label'>
                            知识库名称 <span className='text-danger'>*</span>
                        </label>
                        <input
                            type='text'
                            className={`form-control ${formErrors.name ? 'is-invalid' : ''}`}
                            id='name'
                            name='name'
                            value={formData.name}
                            onChange={onChange}
                        />
                        {formErrors.name && <div className='invalid-feedback'>{formErrors.name}</div>}
                    </div>
                    <div className='mb-3'>
                        <label htmlFor='desc' className='form-label'>
                            知识库描述 <span className='text-danger'>*</span>
                        </label>
                        <textarea
                            className={`form-control ${formErrors.desc ? 'is-invalid' : ''}`}
                            id='desc'
                            name='desc'
                            rows='3'
                            value={formData.desc}
                            onChange={onChange}
                        ></textarea>
                        {formErrors.desc && <div className='invalid-feedback'>{formErrors.desc}</div>}
                    </div>
                    <div className='mb-3'>
                        <label className='form-label'>
                            知识库类型 <span className='text-danger'>*</span>
                        </label>
                        <div className='d-flex gap-3'>
                            <div className='form-check'>
                                <input
                                    className='form-check-input'
                                    type='radio'
                                    name='type'
                                    id='typePrivate'
                                    value='private'
                                    checked={formData.type === 'private'}
                                    onChange={onChange}
                                />
                                <label className='form-check-label' htmlFor='typePrivate'>
                                    私有知识库
                                </label>
                            </div>
                            <div className='form-check'>
                                <input
                                    className='form-check-input'
                                    type='radio'
                                    name='type'
                                    id='typePublic'
                                    value='public'
                                    checked={formData.type === 'public'}
                                    onChange={onChange}
                                />
                                <label className='form-check-label' htmlFor='typePublic'>
                                    公共知识库
                                </label>
                            </div>
                        </div>
                        {formErrors.type && <div className='text-danger small mt-1'>{formErrors.type}</div>}
                    </div>
                    <div className='mb-3'>
                        <label htmlFor='department' className='form-label'>
                            部门
                        </label>
                        <input
                            type='text'
                            className='form-control bg-light'
                            id='department'
                            name='department'
                            value={formData.department || ''}
                            readOnly
                        />
                    </div>
                    <div className='mb-3'>
                        <label htmlFor='group' className='form-label'>
                            组别
                        </label>
                        <input
                            type='text'
                            className='form-control bg-light'
                            id='group'
                            name='group'
                            value={formData.group || ''}
                            readOnly
                        />
                    </div>
                </div>
                <div className='modal-footer gap-2'>
                    <button type='button' className='btn btn-secondary' onClick={onClose} disabled={isSubmitting}>
                        取消
                    </button>
                    <button type='button' className='btn btn-dark' onClick={onSubmit} disabled={isSubmitting}>
                        {isSubmitting ? (
                            <>
                                <span
                                    className='spinner-border spinner-border-sm me-2'
                                    role='status'
                                    aria-hidden='true'
                                ></span>
                                处理中...
                            </>
                        ) : (
                            '创建'
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default CreateKnowledgeBaseModal;