fix: 知识库key格式统一、过滤逻辑修复、布局宽度稳定
This commit is contained in:
@@ -32,7 +32,7 @@ export default function KnowledgeBase() {
|
||||
const [sources, setSources] = useState([]) // 出处下拉选项
|
||||
const [sourceTypeFilter, setSourceTypeFilter] = useState('')
|
||||
const [sourceDetailFilter, setSourceDetailFilter] = useState('')
|
||||
const [selectedTreeNode, setSelectedTreeNode] = useState(null) // { type, secondaryField, secondaryValue }
|
||||
const [selectedTreeNode, setSelectedTreeNode] = useState(null) // { key, type, secondaryField, secondaryValue }
|
||||
|
||||
const fetchItems = async () => {
|
||||
setLoading(true)
|
||||
@@ -110,13 +110,15 @@ export default function KnowledgeBase() {
|
||||
}
|
||||
|
||||
// 树节点选中 → 联动过滤
|
||||
// 新格式回调:{ key, type, secondaryField, secondaryValue }
|
||||
// 回调参数:{ key, type, secondaryField, secondaryValue } | null
|
||||
const handleNodeSelect = (node) => {
|
||||
setSelectedTreeNode(node)
|
||||
}
|
||||
|
||||
// 根据树节点过滤列表
|
||||
// 支持新旧两种 key 格式兼容(secondaryField 为 null 时走旧逻辑)
|
||||
// 二级节点 key 格式:type|fieldName|fieldValue
|
||||
// secondaryField === 'source_detail' → 用 item.source_detail 过滤
|
||||
// secondaryField === 'author' → 用 item.author 过滤
|
||||
const displayedItems = (() => {
|
||||
let result = items
|
||||
|
||||
@@ -124,16 +126,19 @@ export default function KnowledgeBase() {
|
||||
const { type, secondaryField, secondaryValue } = selectedTreeNode
|
||||
result = result.filter(i => {
|
||||
if (i.source_type !== type) return false
|
||||
// 二级过滤:新格式(type|field|value)
|
||||
if (secondaryField !== null && secondaryValue !== null) {
|
||||
// 按指定二级字段过滤
|
||||
const itemFieldVal = (i[secondaryField] || '').trim() || null
|
||||
if (itemFieldVal !== secondaryValue) return false
|
||||
if (secondaryField === 'source_detail') {
|
||||
if (i.source_detail !== secondaryValue) return false
|
||||
} else {
|
||||
// 其他二级字段(如 author)直接用字段名匹配
|
||||
const itemFieldVal = (i[secondaryField] || '').trim() || null
|
||||
if (itemFieldVal !== secondaryValue) return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
} else if (sourceDetailFilter) {
|
||||
// 保留原有的 source_detail 筛选逻辑
|
||||
// 保留原有的 source_detail 筛选逻辑(来自右侧 Select 下拉)
|
||||
result = result.filter(i => i.source_detail === sourceDetailFilter)
|
||||
}
|
||||
|
||||
@@ -141,7 +146,7 @@ export default function KnowledgeBase() {
|
||||
})()
|
||||
|
||||
// 构建 selectedKey 供 KnowledgeTree 高亮
|
||||
// 格式:type|field|value(与 useKnowledgeGrouping 输出的 key 格式一致)
|
||||
// 格式:type|field|value(三段,与后端 get_grouped_items 输出的 key 一致)
|
||||
const buildSelectedKey = () => {
|
||||
if (!selectedTreeNode) return 'all'
|
||||
const { type, secondaryField, secondaryValue } = selectedTreeNode
|
||||
@@ -239,12 +244,13 @@ export default function KnowledgeBase() {
|
||||
</div>
|
||||
|
||||
{/* 双列对齐布局:左侧树 | 右侧筛选+列表 */}
|
||||
<Row gutter={12} align="stretch">
|
||||
{/* 左列:树 */}
|
||||
<Col span={5} style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* 左列固定 280px,右列撑满,ant-row gutter=12 保持两列间距 */}
|
||||
<Row gutter={12}>
|
||||
{/* 左列:树(固定宽度,min-width 防止收缩) */}
|
||||
<Col span={5} style={{ minWidth: 280 }}>
|
||||
<Card
|
||||
style={{ borderRadius: 14, flex: 1 }}
|
||||
bodyStyle={{ padding: 0, flex: 1, display: 'flex', flexDirection: 'column' }}
|
||||
style={{ borderRadius: 14 }}
|
||||
bodyStyle={{ padding: 0 }}
|
||||
>
|
||||
<KnowledgeTree
|
||||
treeData={treeData}
|
||||
@@ -254,10 +260,10 @@ export default function KnowledgeBase() {
|
||||
</Card>
|
||||
</Col>
|
||||
|
||||
{/* 右列:筛选栏 + 列表 */}
|
||||
<Col span={19} style={{ display: 'flex', flexDirection: 'column' }}>
|
||||
{/* 筛选栏 */}
|
||||
<Card style={{ borderRadius: 14, marginBottom: 12 }}>
|
||||
{/* 右列:筛选栏 + 列表(两栏独立等高,顶部对齐) */}
|
||||
<Col span={19} style={{ display: 'flex', flexDirection: 'column', gap: 12 }}>
|
||||
{/* 筛选栏(顶部对齐,与左列卡片顶线平齐) */}
|
||||
<Card style={{ borderRadius: 14 }}>
|
||||
<Space size="middle" wrap>
|
||||
<span style={{ fontSize: 14, color: '#666' }}>筛选:</span>
|
||||
<Select
|
||||
|
||||
Reference in New Issue
Block a user