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

import React from 'react';

/**
 * 删除确认模态框组件
 */
const DeleteConfirmModal = ({ show, title, isSubmitting, onCancel, onConfirm }) => {
    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: '400px',
                    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={onCancel}
                        disabled={isSubmitting}
                        aria-label='Close'
                    ></button>
                </div>
                <div className='modal-body'>
                    <p>您确定要删除知识库 "{title}" 吗？此操作不可撤销。</p>
                </div>
                <div className='modal-footer'>
                    <button type='button' className='btn btn-secondary' onClick={onCancel} disabled={isSubmitting}>
                        取消
                    </button>
                    <button type='button' className='btn btn-danger' onClick={onConfirm} disabled={isSubmitting}>
                        {isSubmitting ? (
                            <>
                                <span
                                    className='spinner-border spinner-border-sm me-2'
                                    role='status'
                                    aria-hidden='true'
                                ></span>
                                删除中...
                            </>
                        ) : (
                            '确认删除'
                        )}
                    </button>
                </div>
            </div>
        </div>
    );
};

export default DeleteConfirmModal;