style: 知识库页面三处样式收尾:内容区扩展、隐藏入库时间列、上传区收小

This commit is contained in:
simonkoson
2026-05-27 13:21:04 +08:00
parent d849bc1539
commit b3157216bb
@@ -1,6 +1,6 @@
import { useState, useEffect } from 'react' import { useState, useEffect } from 'react'
import { Card, Upload, Table, Button, Space, Select, Popconfirm, message, Tag } from 'antd' import { Card, Upload, Table, Button, Space, Select, Popconfirm, message, Tag } from 'antd'
import { InboxOutlined, DeleteOutlined, ReloadOutlined } from '@ant-design/icons' import { InboxOutlined, DeleteOutlined, ReloadOutlined, UploadOutlined } from '@ant-design/icons'
import useAuthStore from '../../stores/authStore' import useAuthStore from '../../stores/authStore'
import knowledgeService from '../../services/knowledgeService' import knowledgeService from '../../services/knowledgeService'
import KnowledgeTree from '../../components/KnowledgeTree/KnowledgeTree' import KnowledgeTree from '../../components/KnowledgeTree/KnowledgeTree'
@@ -139,7 +139,7 @@ export default function KnowledgeBase() {
title: '标题', title: '标题',
dataIndex: 'title', dataIndex: 'title',
key: 'title', key: 'title',
width: 240, width: 280,
render: (text) => ( render: (text) => (
<span style={{ fontWeight: 500, color: '#3b4a3b', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{text}</span> <span style={{ fontWeight: 500, color: '#3b4a3b', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', display: 'block' }}>{text}</span>
), ),
@@ -148,45 +148,38 @@ export default function KnowledgeBase() {
title: '作者', title: '作者',
dataIndex: 'author', dataIndex: 'author',
key: 'author', key: 'author',
width: 80, width: 100,
render: (val) => val || '-', render: (val) => val || '-',
}, },
{ {
title: '播出/发表时间', title: '播出/发表时间',
dataIndex: 'publish_date', dataIndex: 'publish_date',
key: 'publish_date', key: 'publish_date',
width: 156, width: 160,
render: (val) => val || '-', render: (val) => val || '-',
}, },
{ {
title: '出处', title: '出处',
dataIndex: 'source_detail', dataIndex: 'source_detail',
key: 'source_detail', key: 'source_detail',
width: 170, width: 200,
render: (val) => val || '-', render: (val) => val || '-',
}, },
{ {
title: '类型', title: '类型',
dataIndex: 'source_type', dataIndex: 'source_type',
key: 'source_type', key: 'source_type',
width: 88, width: 96,
render: (val) => ( render: (val) => (
<Tag color="default" style={{ borderRadius: 8 }}> <Tag color="default" style={{ borderRadius: 8 }}>
{SOURCE_TYPE_LABEL[val] || val} {SOURCE_TYPE_LABEL[val] || val}
</Tag> </Tag>
), ),
}, },
{
title: '入库时间',
dataIndex: 'created_at',
key: 'created_at',
width: 140,
render: (val) => val ? new Date(val).toLocaleString('zh-CN', { hour12: false }).replace(' ', ' ') : '-',
},
{ {
title: '操作', title: '操作',
key: 'action', key: 'action',
width: 86, width: 90,
render: (_, record) => ( render: (_, record) => (
<Popconfirm <Popconfirm
title="确认删除" title="确认删除"
@@ -205,33 +198,28 @@ export default function KnowledgeBase() {
] ]
return ( return (
<div style={{ maxWidth: 1200, padding: '12px' }}> <div style={{ padding: '12px 16px' }}>
<div style={{ marginBottom: 12 }}> {/* 标题栏 */}
<h2 style={{ margin: 0, fontSize: 18, fontWeight: 600, color: '#3b4a3b' }}>知识库</h2> <div style={{ marginBottom: 10 }}>
<p style={{ margin: '4px 0 0', fontSize: 12, color: '#888' }}>上传 md 笔记 · 语义检索 · 报题参考</p> <h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: '#3b4a3b' }}>知识库</h2>
<p style={{ margin: '4px 0 0', fontSize: 13, color: '#888' }}>上传 md 笔记 · 语义检索 · 报题参考</p>
</div> </div>
{/* 上传区 */} {/* 上传区(收小为一行) */}
<Card style={{ borderRadius: 14, marginBottom: 12 }} bodyStyle={{ padding: 0 }}> <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
<Dragger <Dragger
accept=".md" accept=".md"
multiple multiple
showUploadList={false} showUploadList={false}
beforeUpload={handleUpload} beforeUpload={handleUpload}
disabled={uploading} disabled={uploading}
style={{ padding: '28px 20px', borderRadius: 14 }}
> >
<p className="ant-upload-drag-icon" style={{ marginBottom: 8 }}> <Button icon={<UploadOutlined />} size="middle" style={{ borderRadius: 10 }}>
<InboxOutlined style={{ fontSize: 40, color: '#6b8e6b' }} /> {uploading ? '正在上传并生成向量…' : '上传 md 文件入库'}
</p> </Button>
<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> </Dragger>
</Card> <span style={{ fontSize: 12, color: '#aaa' }}>支持批量上传系统自动解析 yaml frontmatter 并生成语义向量</span>
</div>
{/* 主体:左侧树 + 右侧列表 */} {/* 主体:左侧树 + 右侧列表 */}
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}> <div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
@@ -252,7 +240,7 @@ export default function KnowledgeBase() {
{/* 筛选栏 */} {/* 筛选栏 */}
<Card style={{ borderRadius: 14, marginBottom: 12 }}> <Card style={{ borderRadius: 14, marginBottom: 12 }}>
<Space size="middle" wrap> <Space size="middle" wrap>
<span style={{ fontSize: 13, color: '#666' }}>筛选</span> <span style={{ fontSize: 14, color: '#666' }}>筛选</span>
<Select <Select
placeholder="按类型" placeholder="按类型"
options={SOURCE_TYPE_OPTIONS} options={SOURCE_TYPE_OPTIONS}