KnowledgeBase_frontend/src/pages/KnowledgeBase/KnowledgeCard.jsx

import React from 'react';
import SvgIcon from '../../components/SvgIcon';

export default function KnowledgeCard({ title, description, documents, date, access }) {
    return (
        <div className='col-sm-6 col-md-6 col-lg-4 col-xl-3'>
            <div className='knowledge-card card shadow border-0'>
                <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'>
                                <SvgIcon className={'chat-dot'} />
                                新聊天
                            </button>
                        ) : (
                            <button className='btn btn-outline-dark btn-sm d-flex align-items-center gap-1'>
                                <SvgIcon className={'key'} />
                                申请权限
                            </button>
                        )}
                    </div>
                </div>
            </div>
        </div>
    );
}