feat: 知识库管理前端页面，含上传/列表/筛选/删除
This commit is contained in:
simonkoson
@@ -1,17 +1,238 @@
|
||||
import { Card } from 'antd'
|
||||
import { BookOutlined } from '@ant-design/icons'
|
||||
import { useState, useEffect } from 'react'
|
||||
import { Card, Upload, Table, Button, Space, Select, Popconfirm, message, Tag } from 'antd'
|
||||
import { InboxOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons'
|
||||
import useAuthStore from '../../stores/authStore'
|
||||
import knowledgeService from '../../services/knowledgeService'
|
||||
|
||||
function KnowledgeBase() {
|
||||
return (
|
||||
<Card style={{ borderRadius: 16 }}>
|
||||
<div style={{ textAlign: 'center', padding: '48px 0', color: '#999' }}>
|
||||
<BookOutlined style={{ fontSize: 48, marginBottom: 16 }} />
|
||||
<h3 style={{ color: '#666' }}>知识库</h3>
|
||||
<p>模块 C · Phase 3 实施</p>
|
||||
<small>往期报题单 / 文稿 / 军报语义检索</small>
|
||||
</div>
|
||||
</Card>
|
||||
)
|
||||
const { Dragger } = Upload
|
||||
|
||||
// source_type 枚举值（固定五类，不写死但供 Select 用）
|
||||
const SOURCE_TYPE_OPTIONS = [
|
||||
{ label: '全部类型', value: '' },
|
||||
{ label: '杂志文章', value: 'military_report' },
|
||||
{ label: '节目文稿', value: 'manuscript' },
|
||||
{ label: '报题单', value: 'baoti' },
|
||||
]
|
||||
|
||||
// source_type 中文标签
|
||||
const SOURCE_TYPE_LABEL = {
|
||||
military_report: '杂志文章',
|
||||
manuscript: '节目文稿',
|
||||
baoti: '报题单',
|
||||
manual: '其他',
|
||||
}
|
||||
|
||||
export default KnowledgeBase
|
||||
export default function KnowledgeBase() {
|
||||
const { user } = useAuthStore()
|
||||
const [items, setItems] = useState([])
|
||||
const [sources, setSources] = useState([])
|
||||
const [loading, setLoading] = useState(false)
|
||||
const [uploading, setUploading] = useState(false)
|
||||
const [sourceTypeFilter, setSourceTypeFilter] = useState('')
|
||||
const [sourceDetailFilter, setSourceDetailFilter] = useState('')
|
||||
|
||||
const fetchItems = async () => {
|
||||
setLoading(true)
|
||||
try {
|
||||
const data = await knowledgeService.listItems(sourceTypeFilter || null)
|
||||
setItems(data)
|
||||
} catch {
|
||||
message.error('加载知识库失败')
|
||||
} finally {
|
||||
setLoading(false)
|
||||
}
|
||||
}
|
||||
|
||||
const fetchSources = async () => {
|
||||
try {
|
||||
const data = await knowledgeService.listSources()
|
||||
setSources(data.map(s => ({ label: s.source, value: s.source })))
|
||||
} catch {
|
||||
// ignore
|
||||
}
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
fetchItems()
|
||||
fetchSources()
|
||||
}, [sourceTypeFilter])
|
||||
|
||||
// 上传
|
||||
const handleUpload = async (file) => {
|
||||
if (!file.name.endsWith('.md')) {
|
||||
message.warning('仅支持 .md 文件')
|
||||
return false
|
||||
}
|
||||
setUploading(true)
|
||||
try {
|
||||
const result = await knowledgeService.uploadFiles([file])
|
||||
const { uploaded, errors } = result
|
||||
if (uploaded.length > 0) {
|
||||
message.success(`成功入库 ${uploaded.length} 篇`)
|
||||
fetchItems()
|
||||
fetchSources()
|
||||
}
|
||||
if (errors.length > 0) {
|
||||
errors.forEach(e => message.error(`${e.file}: ${e.error}`))
|
||||
}
|
||||
} catch {
|
||||
message.error('上传失败')
|
||||
} finally {
|
||||
setUploading(false)
|
||||
}
|
||||
return false // 阻止默认上传行为
|
||||
}
|
||||
|
||||
// 删除
|
||||
const handleDelete = async (id) => {
|
||||
try {
|
||||
await knowledgeService.deleteItem(id)
|
||||
message.success('删除成功')
|
||||
fetchItems()
|
||||
fetchSources()
|
||||
} catch {
|
||||
message.error('删除失败')
|
||||
}
|
||||
}
|
||||
|
||||
// 列表筛选后过滤 source_detail
|
||||
const displayedItems = sourceDetailFilter
|
||||
? items.filter(i => i.source_detail === sourceDetailFilter)
|
||||
: items
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '标题',
|
||||
dataIndex: 'title',
|
||||
key: 'title',
|
||||
render: (text, record) => (
|
||||
<span style={{ fontWeight: 500, color: '#3b4a3b' }}>{text}</span>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '作者',
|
||||
dataIndex: 'author',
|
||||
key: 'author',
|
||||
render: (val) => val || null, // 无则不显示
|
||||
},
|
||||
{
|
||||
title: '播出/发表时间',
|
||||
dataIndex: 'publish_date',
|
||||
key: 'publish_date',
|
||||
render: (val) => val || null, // 无则不显示
|
||||
},
|
||||
{
|
||||
title: '出处',
|
||||
dataIndex: 'source_detail',
|
||||
key: 'source_detail',
|
||||
render: (val) => val || '-',
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'source_type',
|
||||
key: 'source_type',
|
||||
render: (val) => (
|
||||
<Tag color="default" style={{ borderRadius: 8 }}>
|
||||
{SOURCE_TYPE_LABEL[val] || val}
|
||||
</Tag>
|
||||
),
|
||||
},
|
||||
{
|
||||
title: '入库时间',
|
||||
dataIndex: 'created_at',
|
||||
key: 'created_at',
|
||||
render: (val) => val ? new Date(val).toLocaleString('zh-CN') : '-',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
render: (_, record) => (
|
||||
<Popconfirm
|
||||
title="确认删除"
|
||||
description="删除后不可恢复，该篇及其向量将一并清除"
|
||||
onConfirm={() => handleDelete(record.id)}
|
||||
okText="确认删除"
|
||||
cancelText="取消"
|
||||
placement="left"
|
||||
>
|
||||
<Button size="small" danger icon={<DeleteOutlined />}>
|
||||
删除
|
||||
</Button>
|
||||
</Popconfirm>
|
||||
),
|
||||
},
|
||||
]
|
||||
|
||||
return (
|
||||
<div style={{ maxWidth: 1100, padding: '12px' }}>
|
||||
<div style={{ marginBottom: 12 }}>
|
||||
<h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: '#3b4a3b' }}>知识库</h2>
|
||||
<p style={{ margin: '4px 0 0', fontSize: 12, color: '#888' }}>上传 md 笔记 · 语义检索 · 报题参考</p>
|
||||
</div>
|
||||
|
||||
{/* 上传区 */}
|
||||
<Card style={{ borderRadius: 14, marginBottom: 12 }} bodyStyle={{ padding: 0 }}>
|
||||
<Dragger
|
||||
accept=".md"
|
||||
multiple
|
||||
showUploadList={false}
|
||||
beforeUpload={handleUpload}
|
||||
disabled={uploading}
|
||||
style={{ padding: '28px 20px', borderRadius: 14 }}
|
||||
>
|
||||
<p className="ant-upload-drag-icon" style={{ marginBottom: 8 }}>
|
||||
<InboxOutlined style={{ fontSize: 40, color: '#6b8e6b' }} />
|
||||
</p>
|
||||
<p className="ant-upload-text" style={{ fontSize: 15, fontWeight: 500, color: '#3b4a3b' }}>
|
||||
{uploading ? '正在上传并生成向量…' : '点击或拖拽 .md 文件上传'}
|
||||
</p>
|
||||
<p className="ant-upload-hint" style={{ fontSize: 12, color: '#888' }}>
|
||||
支持批量上传，系统自动解析 yaml frontmatter 并生成语义向量
|
||||
</p>
|
||||
</Dragger>
|
||||
</Card>
|
||||
|
||||
{/* 筛选栏 */}
|
||||
<Card style={{ borderRadius: 14, marginBottom: 12 }}>
|
||||
<Space size="middle" wrap>
|
||||
<span style={{ fontSize: 13, color: '#666' }}>筛选：</span>
|
||||
<Select
|
||||
placeholder="按类型"
|
||||
options={SOURCE_TYPE_OPTIONS}
|
||||
value={sourceTypeFilter}
|
||||
onChange={val => { setSourceTypeFilter(val); setSourceDetailFilter('') }}
|
||||
style={{ width: 140 }}
|
||||
allowClear
|
||||
/>
|
||||
<Select
|
||||
placeholder="按出处"
|
||||
options={[{ label: '全部出处', value: '' }, ...sources]}
|
||||
value={sourceDetailFilter}
|
||||
onChange={setSourceDetailFilter}
|
||||
style={{ width: 200 }}
|
||||
allowClear
|
||||
/>
|
||||
<Button
|
||||
icon={<ReloadOutlined />}
|
||||
onClick={() => { fetchItems(); fetchSources() }}
|
||||
size="small"
|
||||
>
|
||||
刷新
|
||||
</Button>
|
||||
</Space>
|
||||
</Card>
|
||||
|
||||
{/* 列表 */}
|
||||
<Card style={{ borderRadius: 14 }}>
|
||||
<Table
|
||||
columns={columns}
|
||||
dataSource={displayedItems}
|
||||
rowKey="id"
|
||||
loading={loading}
|
||||
pagination={{ pageSize: 10, size: 'small' }}
|
||||
locale={{ emptyText: '暂无知识库条目，上传 md 文件开始入库' }}
|
||||
/>
|
||||
</Card>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,49 @@
|
||||
/**
|
||||
* 知识库 API 服务
|
||||
*/
|
||||
|
||||
import http from './http'
|
||||
|
||||
const knowledgeService = {
|
||||
/**
|
||||
* 上传 md 文件（单个或多个）
|
||||
* @param {File[]} files - File 对象数组
|
||||
*/
|
||||
async uploadFiles(files) {
|
||||
const formData = new FormData()
|
||||
files.forEach(f => formData.append('files', f))
|
||||
const resp = await http.post('/knowledge/upload', formData, {
|
||||
headers: { 'Content-Type': 'multipart/form-data' },
|
||||
})
|
||||
return resp.data
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取知识库条目列表
|
||||
* @param {string|null} sourceType - 可选，按 source_type 筛选
|
||||
*/
|
||||
async listItems(sourceType = null) {
|
||||
const params = sourceType ? { source_type: sourceType } : {}
|
||||
const resp = await http.get('/knowledge/items', { params })
|
||||
return resp.data
|
||||
},
|
||||
|
||||
/**
|
||||
* 删除知识库条目
|
||||
* @param {number} id
|
||||
*/
|
||||
async deleteItem(id) {
|
||||
const resp = await http.delete(`/knowledge/items/${id}`)
|
||||
return resp.data
|
||||
},
|
||||
|
||||
/**
|
||||
* 获取所有不重复的具体出处（供筛选下拉）
|
||||
*/
|
||||
async listSources() {
|
||||
const resp = await http.get('/knowledge/sources')
|
||||
return resp.data
|
||||
},
|
||||
}
|
||||
|
||||
export default knowledgeService
|
||||
Reference in New Issue
Block a user