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

import React, { useRef } from 'react';

/**
 * 文件上传模态框组件
 */
const FileUploadModal = ({
    show,
    newFile,
    fileErrors,
    isSubmitting,
    onClose,
    onDescriptionChange,
    onFileChange,
    onFileDrop,
    onDragOver,
    onUploadAreaClick,
    onUpload,
}) => {
    const fileInputRef = useRef(null);

    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'></button>
                </div>
                <div className='modal-body'>
                    <div
                        className={`mb-3 p-4 border rounded text-center ${
                            fileErrors.file ? 'border-danger' : 'border-dashed'
                        }`}
                        style={{ cursor: 'pointer' }}
                        onClick={onUploadAreaClick}
                        onDrop={onFileDrop}
                        onDragOver={onDragOver}
                    >
                        <input type='file' ref={fileInputRef} className='d-none' onChange={onFileChange} />
                        {newFile.file ? (
                            <div>
                                <p className='mb-1'>已选择文件：</p>
                                <p className='fw-bold mb-0'>{newFile.file.name}</p>
                            </div>
                        ) : (
                            <div>
                                <p className='mb-1'>点击或拖拽文件到此处上传</p>
                                <p className='text-muted small mb-0'>支持 PDF, DOCX, TXT, CSV 等格式</p>
                            </div>
                        )}
                        {fileErrors.file && <div className='text-danger mt-2'>{fileErrors.file}</div>}
                    </div>
                    <div className='mb-3'>
                        <label htmlFor='fileDescription' className='form-label'>
                            文件描述
                        </label>
                        <textarea
                            className='form-control'
                            id='fileDescription'
                            rows='3'
                            value={newFile.description}
                            onChange={onDescriptionChange}
                            placeholder='请输入文件描述（可选）'
                        ></textarea>
                    </div>
                </div>
                <div className='modal-footer'>
                    <button type='button' className='btn btn-secondary' onClick={onClose}>
                        取消
                    </button>
                    <button
                        type='button'
                        className='btn btn-primary'
                        onClick={onUpload}
                        disabled={!newFile.file || isSubmitting}
                    >
                        {isSubmitting ? (
                            <>
                                <span
                                    className='spinner-border spinner-border-sm me-2'
                                    role='status'
                                    aria-hidden='true'
                                ></span>
                                上传中...
                            </>
                        ) : (
                            '上传'
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default FileUploadModal;