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 { 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 knowledgeService from '../../services/knowledgeService'
import KnowledgeTree from '../../components/KnowledgeTree/KnowledgeTree'
@@ -139,7 +139,7 @@ export default function KnowledgeBase() {
title: '标题',
dataIndex: 'title',
key: 'title',
width: 240,
width: 280,
render: (text) => (
<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: '作者',
dataIndex: 'author',
key: 'author',
width: 80,
width: 100,
render: (val) => val || '-',
},
{
title: '播出/发表时间',
dataIndex: 'publish_date',
key: 'publish_date',
width: 156,
width: 160,
render: (val) => val || '-',
},
{
title: '出处',
dataIndex: 'source_detail',
key: 'source_detail',
width: 170,
width: 200,
render: (val) => val || '-',
},
{
title: '类型',
dataIndex: 'source_type',
key: 'source_type',
width: 88,
width: 96,
render: (val) => (
<Tag color="default" style={{ borderRadius: 8 }}>
{SOURCE_TYPE_LABEL[val] || val}
</Tag>
),
},
{
title: '入库时间',
dataIndex: 'created_at',
key: 'created_at',
width: 140,
render: (val) => val ? new Date(val).toLocaleString('zh-CN', { hour12: false }).replace(' ', ' ') : '-',
},
{
title: '操作',
key: 'action',
width: 86,
width: 90,
render: (_, record) => (
<Popconfirm
title="确认删除"
@@ -205,33 +198,28 @@ export default function KnowledgeBase() {
]
return (
<div style={{ maxWidth: 1200, 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 style={{ padding: '12px 16px' }}>
{/* 标题栏 */}
<div style={{ marginBottom: 10 }}>
<h2 style={{ margin: 0, fontSize: 20, fontWeight: 600, color: '#3b4a3b' }}>知识库</h2>
<p style={{ margin: '4px 0 0', fontSize: 13, color: '#888' }}>上传 md 笔记 · 语义检索 · 报题参考</p>
</div>
{/* 上传区 */}
<Card style={{ borderRadius: 14, marginBottom: 12 }} bodyStyle={{ padding: 0 }}>
{/* 上传区(收小为一行) */}
<div style={{ display: 'flex', alignItems: 'center', gap: 10, marginBottom: 12 }}>
<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>
<Button icon={<UploadOutlined />} size="middle" style={{ borderRadius: 10 }}>
{uploading ? '正在上传并生成向量…' : '上传 md 文件入库'}
</Button>
</Dragger>
</Card>
<span style={{ fontSize: 12, color: '#aaa' }}>支持批量上传系统自动解析 yaml frontmatter 并生成语义向量</span>
</div>
{/* 主体:左侧树 + 右侧列表 */}
<div style={{ display: 'flex', gap: 12, alignItems: 'flex-start' }}>
@@ -252,7 +240,7 @@ export default function KnowledgeBase() {
{/* 筛选栏 */}
<Card style={{ borderRadius: 14, marginBottom: 12 }}>
<Space size="middle" wrap>
<span style={{ fontSize: 13, color: '#666' }}>筛选</span>
<span style={{ fontSize: 14, color: '#666' }}>筛选</span>
<Select
placeholder="按类型"
options={SOURCE_TYPE_OPTIONS}