KnowledgeBase_frontend/src/pages/KnowledgeBase/Detail/components/KnowledgeBaseForm.jsx

import React from 'react';

/**
 * 知识库表单组件
 */
const KnowledgeBaseForm = ({
    formData,
    formErrors,
    isSubmitting,
    onInputChange,
    onSubmit,
    onDelete,
}) => {
    return (
        <div className='card border-0 shadow-sm'>
            <div className='card-body'>
                <h5 className='card-title mb-4'>知识库设置</h5>

                <form onSubmit={onSubmit}>
                    <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={onInputChange}
                        />
                        {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={onInputChange}
                        ></textarea>
                        {formErrors.desc && <div className='invalid-feedback'>{formErrors.desc}</div>}
                    </div>

                    <div className='mb-3'>
                        <label className='form-label'>知识库类型</label>
                        <div className='form-check'>
                            <input
                                className='form-check-input'
                                type='radio'
                                name='type'
                                id='typePrivate'
                                value='private'
                                checked={formData.type === 'private'}
                                onChange={onInputChange}
                            />
                            <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={onInputChange}
                            />
                            <label className='form-check-label' htmlFor='typePublic'>
                                公共知识库
                            </label>
                        </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
                        />
                        <small className='text-muted'>部门信息根据知识库创建者自动填写</small>
                    </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
                        />
                        <small className='text-muted'>组别信息根据知识库创建者自动填写</small>
                    </div>

                    <div className='d-flex justify-content-between'>
                        <button type='submit' className='btn btn-primary' disabled={isSubmitting}>
                            {isSubmitting ? (
                                <>
                                    <span
                                        className='spinner-border spinner-border-sm me-2'
                                        role='status'
                                        aria-hidden='true'
                                    ></span>
                                    保存中...
                                </>
                            ) : (
                                '保存设置'
                            )}
                        </button>
                        <button type='button' className='btn btn-danger' onClick={onDelete} disabled={isSubmitting}>
                            删除知识库
                        </button>
                    </div>
                </form>
            </div>
        </div>
    );
};

export default KnowledgeBaseForm;