KnowledgeBase_frontend/src/pages/KnowledgeBase/components/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,
    permissions,
    onClick,
    onRequestAccess,
    onDelete,
    type,
    department,
    group,
}) {
    const navigate = useNavigate();

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

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

    // 自定义样式，限制文本最多显示两行
    const descriptionStyle = {
        display: '-webkit-box',
        WebkitLineClamp: 2,
        WebkitBoxOrient: 'vertical',
        overflow: 'hidden',
        textOverflow: 'ellipsis',
        minHeight: '3rem', // 保持一致的高度，即使描述很短
    };

    return (
        <div className='knowledge-card card shadow border-0 p-0 col' onClick={onClick}>
            <div className='card-body'>
                <h5 className='card-title' dangerouslySetInnerHTML={{ __html: title }} />
                {permissions && permissions.can_delete && (
                    <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' onClick={onDelete}>
                                删除
                                <SvgIcon className={'trash'} />
                            </li>
                        </ul>
                    </div>
                )}
                <p className='card-text text-muted mb-3' style={descriptionStyle} title={description}>
                    {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-2 d-flex flex-wrap gap-2'>
                    <span className='badge bg-secondary-subtle text-secondary'>
                        {type === 'private' ? '私有' : '公开'}
                    </span>
                    {department && <span className='badge bg-info-subtle text-info'>{department}</span>}
                    {group && <span className='badge bg-primary-subtle text-primary'>{group}</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>
    );
}