KnowledgeBase_frontend/src/pages/KnowledgeBase/KnowledgeCard.jsx

import React from 'react';
import SvgIcon from '../../components/SvgIcon';
import { useNavigate } from 'react-router-dom';

export default function KnowledgeCard({ id, title, description, documents, date, access, onClick, onRequestAccess }) {
    const navigate = useNavigate();

    const handleNewChat = (e) => {
        e.preventDefault();
        e.stopPropagation();
        navigate(`/chat/${id}`);
    };

    const handleRequestAccess = (e) => {
        e.preventDefault();
        e.stopPropagation();
        onRequestAccess(id, title);
    };

    return (
        <div className='knowledge-card card shadow border-0 p-0 col' onClick={onClick}>
            <div className='card-body'>
                <h5 className='card-title'>{title}</h5>
                <div className='hoverdown position-absolute end-0 top-0'>
                    <button type='button' className='detail-btn btn'>
                        <SvgIcon className={'more-dot'} />
                    </button>
                    <ul className='hoverdown-menu shadow bg-white p-1 rounded'>
                        <li className='p-1 hoverdown-item px-2'>
                            删除
                            <SvgIcon className={'trash'} />
                        </li>
                    </ul>
                </div>
                <p className='card-text text-muted'>{description}</p>
                <div className='text-muted d-flex align-items-center gap-1'>
                    <SvgIcon className={'file'} />
                    {documents} 文档
                    <span className='ms-3 d-flex align-items-center gap-1'>
                        <SvgIcon className={'clock'} />
                        {date}
                    </span>
                </div>
                <div className='mt-3 d-flex justify-content-between align-items-end'>
                    {access === 'full' ? (
                        <span className='badge bg-success-subtle text-success d-flex align-items-center gap-1'>
                            <SvgIcon className={'circle-yes'} />
                            完全访问
                        </span>
                    ) : access === 'read' ? (
                        <span className='badge bg-warning-subtle text-warning d-flex align-items-center gap-1'>
                            <SvgIcon className={'eye'} />
                            只读访问
                        </span>
                    ) : (
                        <span className='badge bg-dark-subtle d-flex align-items-center gap-1'>
                            <SvgIcon className={'lock'} />
                            无访问权限
                        </span>
                    )}
                    {access === 'full' || access === 'read' ? (
                        <button
                            className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'
                            onClick={handleNewChat}
                        >
                            <SvgIcon className={'chat-dot'} />
                            新聊天
                        </button>
                    ) : (
                        <button
                            className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'
                            onClick={handleRequestAccess}
                        >
                            <SvgIcon className={'key'} />
                            申请权限
                        </button>
                    )}
                </div>
            </div>
        </div>
    );
}