KnowledgeBase_frontend/src/pages/KnowledgeBase/KnowledgeBase.jsx

import React from 'react';
import KnowledgeCard from './KnowledgeCard';
import { useDispatch } from 'react-redux';

export default function KnowledgeBase() {
    const dispatch = useDispatch();

    const knowledgeList = [
        {
            title: '产品开发知识库',
            description: '产品开发流程及规范说明文档',
            documents: 24,
            date: '2025-02-15',
            access: 'full',
        },
        {
            title: '市场分析知识库',
            description: '2025年Q1市场分析总结',
            documents: 12,
            date: '2025-02-10',
            access: 'read',
        },
        { title: '财务知识库', description: '月度财务分析报告', documents: 8, date: '2025-02-01', access: 'none' },
    ];

    return (
        <div className='container'>
            <div className='d-flex justify-content-between align-items-center mb-3'>
                <input type='text' className='form-control w-50' placeholder='搜索知识库...' />
                <button className='btn btn-dark d-flex align-items-center gap-1'>
                    <svg xmlns='http://www.w3.org/2000/svg' height="16" width="16" viewBox='0 0 448 512'>
                        <path
                            fill='#ffffff'
                            d='M256 80c0-17.7-14.3-32-32-32s-32 14.3-32 32l0 144L48 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l144 0 0 144c0 17.7 14.3 32 32 32s32-14.3 32-32l0-144 144 0c17.7 0 32-14.3 32-32s-14.3-32-32-32l-144 0 0-144z'
                        />
                    </svg>
                    新建知识库
                </button>
            </div>

            <div className='row g-3'>
                {knowledgeList.map((item, index) => (
                    <KnowledgeCard key={index} {...item} />
                ))}
            </div>
        </div>
    );
}