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 - 提交表单的回调函数
 * @param {Object} props.currentUser - 当前用户信息
 */
const CreateKnowledgeBaseModal = ({ 
    show, 
    formData, 
    formErrors, 
    isSubmitting, 
    onClose, 
    onChange, 
    onSubmit,
    currentUser 
}) => {
    if (!show) return null;

    // 根据用户角色确定可以创建的知识库类型
    const isAdmin = currentUser?.role === 'admin';
    const isLeader = currentUser?.role === 'leader';
    
    // 获取当前用户可以创建的知识库类型
    const getAvailableTypes = () => {
        if (isAdmin) {
            return [
                { value: 'admin', label: 'Admin 级知识库' },
                { value: 'leader', label: 'Leader 级知识库' },
                { value: 'member', label: 'Member 级知识库' },
                { value: 'private', label: '私有知识库' },
                { value: 'secret', label: '保密知识库' }
            ];
        } else if (isLeader) {
            return [
                { value: 'member', label: 'Member 级知识库' },
                { value: 'private', label: '私有知识库' }
            ];
        } else {
            return [
                { value: 'private', label: '私有知识库' }
            ];
        }
    };

    const availableTypes = getAvailableTypes();

    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 flex-wrap gap-3'>
                            {availableTypes.map((type, index) => (
                                <div className='form-check' key={index}>
                                    <input
                                        className='form-check-input'
                                        type='radio'
                                        name='type'
                                        id={`type${type.value}`}
                                        value={type.value}
                                        checked={formData.type === type.value}
                                        onChange={onChange}
                                    />
                                    <label className='form-check-label' htmlFor={`type${type.value}`}>
                                        {type.label}
                                    </label>
                                </div>
                            ))}
                        </div>
                        {!isAdmin && !isLeader && (
                            <small className='text-muted d-block mt-1'>
                                注意：您当前只能创建私有知识库。其他类型需要更高权限。
                            </small>
                        )}
                        {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;