200 lines
9.5 KiB
TypeScript
200 lines
9.5 KiB
TypeScript
import * as React from 'react'
|
|
import { BookOpen, Grid2X2, List, Plus, Search } from 'lucide-react'
|
|
|
|
import { AppCreateDialog } from '@/components/app/AppCreateDialog'
|
|
import { AppDataTable, type AppDataTableColumn } from '@/components/app/AppDataTable'
|
|
import { AppEmptyState } from '@/components/app/AppEmptyState'
|
|
import { AppField } from '@/components/app/AppField'
|
|
import { AppPage } from '@/components/app/AppPage'
|
|
import { AppPageHeader } from '@/components/app/AppPageHeader'
|
|
import { Badge } from '@/components/ui/badge'
|
|
import { Button } from '@/components/ui/button'
|
|
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
|
|
import { Input } from '@/components/ui/input'
|
|
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group'
|
|
import { Textarea } from '@/components/ui/textarea'
|
|
import { useAgentPageContext } from '@/features/agent-workspace/AgentWorkspaceProvider'
|
|
import { formatDateTime } from '@/lib/format'
|
|
|
|
import { createKnowledgeBase, listKnowledgeBases } from './api'
|
|
import type { KnowledgeBase } from './types'
|
|
|
|
type KnowledgeBaseForm = {
|
|
name: string
|
|
description: string
|
|
scope: string
|
|
}
|
|
|
|
const emptyForm: KnowledgeBaseForm = {
|
|
name: '',
|
|
description: '',
|
|
scope: ''
|
|
}
|
|
|
|
const columns: AppDataTableColumn<KnowledgeBase>[] = [
|
|
{
|
|
key: 'name',
|
|
header: '名称',
|
|
cell: (base) => (
|
|
<div>
|
|
<p className="font-medium text-foreground">{base.name}</p>
|
|
<p className="mt-1 line-clamp-1 text-sm text-muted-foreground">
|
|
{base.description || '暂无描述'}
|
|
</p>
|
|
</div>
|
|
)
|
|
},
|
|
{
|
|
key: 'scope',
|
|
header: '范围',
|
|
cell: (base) => <span className="text-muted-foreground">{base.scope || '-'}</span>
|
|
},
|
|
{
|
|
key: 'enabled',
|
|
header: '启用状态',
|
|
cell: (base) => (
|
|
<Badge variant={base.enabled ? 'success' : 'secondary'}>
|
|
{base.enabled ? '已启用' : '已停用'}
|
|
</Badge>
|
|
)
|
|
},
|
|
{
|
|
key: 'updated_at',
|
|
header: '更新时间',
|
|
cell: (base) => <span className="text-muted-foreground">{formatDateTime(base.updated_at)}</span>
|
|
}
|
|
]
|
|
|
|
export function KnowledgeBaseListPage() {
|
|
const [bases, setBases] = React.useState<KnowledgeBase[]>([])
|
|
const [form, setForm] = React.useState<KnowledgeBaseForm>(emptyForm)
|
|
const [createOpen, setCreateOpen] = React.useState(false)
|
|
const [creating, setCreating] = React.useState(false)
|
|
const [createError, setCreateError] = React.useState('')
|
|
const [error, setError] = React.useState('')
|
|
const [query, setQuery] = React.useState('')
|
|
const [viewMode, setViewMode] = React.useState<'grid' | 'list'>('grid')
|
|
const visibleBases = React.useMemo(() => {
|
|
const keyword = query.trim().toLowerCase()
|
|
return keyword ? bases.filter((base) => `${base.name} ${base.description} ${base.scope}`.toLowerCase().includes(keyword)) : bases
|
|
}, [bases, query])
|
|
const agentContext = React.useMemo(() => ({ routeKey: 'knowledge', entityType: 'knowledge-base-list', title: `知识库 · ${bases.length} 个`, status: error ? '加载异常' : '已同步页面数据', metadata: { 启用: String(bases.filter((base) => base.enabled).length), 当前显示: String(visibleBases.length) } }), [bases, error, visibleBases.length])
|
|
useAgentPageContext(agentContext)
|
|
|
|
async function load() {
|
|
try {
|
|
setBases(await listKnowledgeBases())
|
|
setError('')
|
|
} catch (reason) {
|
|
setError(reason instanceof Error ? reason.message : '加载知识库失败')
|
|
}
|
|
}
|
|
|
|
React.useEffect(() => {
|
|
void load()
|
|
}, [])
|
|
|
|
async function handleCreate(event: React.FormEvent<HTMLFormElement>) {
|
|
event.preventDefault()
|
|
setCreating(true)
|
|
setCreateError('')
|
|
try {
|
|
await createKnowledgeBase(form)
|
|
setForm(emptyForm)
|
|
setCreateOpen(false)
|
|
await load()
|
|
} catch (reason) {
|
|
setCreateError(reason instanceof Error ? reason.message : '创建知识库失败')
|
|
} finally {
|
|
setCreating(false)
|
|
}
|
|
}
|
|
|
|
return (
|
|
<AppPage
|
|
contentClassName="gap-5"
|
|
header={<AppPageHeader
|
|
title="知识库"
|
|
description="集中管理支持知识、文档范围与检索入口"
|
|
actions={
|
|
<div className="flex gap-2">
|
|
<Button variant="outline" onClick={() => (window.location.hash = '/knowledge/search')}>
|
|
<Search data-icon="inline-start" />
|
|
知识检索
|
|
</Button>
|
|
<Button variant="outline" onClick={() => (window.location.hash = '/knowledge/items/new')}>
|
|
<Plus data-icon="inline-start" />
|
|
新建知识条目
|
|
</Button>
|
|
<Button onClick={() => setCreateOpen(true)}>
|
|
<Plus data-icon="inline-start" />
|
|
新增知识库
|
|
</Button>
|
|
</div>
|
|
}
|
|
/>}
|
|
>
|
|
|
|
<div className="grid grid-cols-2 gap-3 lg:grid-cols-3">
|
|
{[['知识库总数', bases.length], ['已启用', bases.filter((base) => base.enabled).length], ['当前结果', visibleBases.length]].map(([label, value], index) => <Card key={String(label)} className={index === 2 ? 'hidden lg:flex' : ''}><CardContent className="flex items-center gap-3 px-4"><span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary"><BookOpen className="size-4" /></span><span><span className="block text-xs text-muted-foreground">{label}</span><strong className="mt-1 block text-2xl font-semibold tabular-nums">{value}</strong></span></CardContent></Card>)}
|
|
</div>
|
|
|
|
<Card className="py-0"><CardContent className="flex flex-col gap-3 p-3 sm:flex-row sm:items-center"><InputGroup className="flex-1"><InputGroupAddon><Search /></InputGroupAddon><InputGroupInput value={query} onChange={(event) => setQuery(event.target.value)} placeholder="搜索知识库、范围或描述" /></InputGroup><div className="flex rounded-lg border bg-muted/30 p-0.5"><Button variant={viewMode === 'grid' ? 'secondary' : 'ghost'} size="icon-sm" aria-label="卡片视图" onClick={() => setViewMode('grid')}><Grid2X2 /></Button><Button variant={viewMode === 'list' ? 'secondary' : 'ghost'} size="icon-sm" aria-label="列表视图" onClick={() => setViewMode('list')}><List /></Button></div></CardContent></Card>
|
|
|
|
<AppCreateDialog
|
|
open={createOpen}
|
|
onOpenChange={(open) => { setCreateOpen(open); if (!open) setCreateError('') }}
|
|
title="新增知识库"
|
|
description="按业务领域建立知识边界，后续可持续维护文档和知识条目。"
|
|
submitLabel="创建知识库"
|
|
onSubmit={handleCreate}
|
|
pending={creating}
|
|
error={createError}
|
|
>
|
|
<div className="grid gap-5">
|
|
<AppField label="名称" htmlFor="knowledge-base-name" required>
|
|
<Input
|
|
id="knowledge-base-name"
|
|
autoFocus
|
|
required
|
|
value={form.name}
|
|
onChange={(event) => setForm((current) => ({ ...current, name: event.target.value }))}
|
|
placeholder="例如：税务采集知识库"
|
|
/>
|
|
</AppField>
|
|
<AppField label="范围" htmlFor="knowledge-base-scope">
|
|
<Input
|
|
id="knowledge-base-scope"
|
|
value={form.scope}
|
|
onChange={(event) => setForm((current) => ({ ...current, scope: event.target.value }))}
|
|
placeholder="例如：数据采集"
|
|
/>
|
|
</AppField>
|
|
<AppField label="描述" htmlFor="knowledge-base-description" description="简要说明适用场景，方便支持人员判断是否使用。">
|
|
<Textarea
|
|
id="knowledge-base-description"
|
|
value={form.description}
|
|
onChange={(event) => setForm((current) => ({ ...current, description: event.target.value }))}
|
|
placeholder="知识库用途说明"
|
|
/>
|
|
</AppField>
|
|
</div>
|
|
</AppCreateDialog>
|
|
|
|
{error ? <AppEmptyState title="无法加载知识库" description={error} /> : null}
|
|
{!error && viewMode === 'list' ? (
|
|
<AppDataTable
|
|
columns={columns}
|
|
rows={visibleBases}
|
|
getRowKey={(base) => base.id}
|
|
emptyTitle="暂无知识库"
|
|
emptyDescription="创建知识库后，可继续维护文档、知识条目和检索内容。"
|
|
footer={<p className="text-sm text-muted-foreground">当前显示 {visibleBases.length} 个知识库</p>}
|
|
/>
|
|
) : null}
|
|
{!error && viewMode === 'grid' ? <div className="grid gap-3 md:grid-cols-2 xl:grid-cols-3">{visibleBases.map((base) => <Card key={base.id} className="app-card-hover"><CardHeader><div className="flex items-start justify-between gap-3"><span className="flex size-9 items-center justify-center rounded-lg bg-primary/10 text-primary"><BookOpen className="size-4" /></span><Badge variant={base.enabled ? 'success' : 'secondary'}>{base.enabled ? '已启用' : '已停用'}</Badge></div><CardTitle className="mt-2">{base.name}</CardTitle><CardDescription className="line-clamp-2 min-h-10">{base.description || '暂无描述'}</CardDescription></CardHeader><CardContent><Badge variant="outline">{base.scope || '未设置范围'}</Badge></CardContent><CardFooter className="justify-between text-xs text-muted-foreground"><span>{formatDateTime(base.updated_at)}</span><Button variant="ghost" size="sm" onClick={() => (window.location.hash = '/knowledge/search')}>检索<Search data-icon="inline-end" /></Button></CardFooter></Card>)}</div> : null}
|
|
{!error && visibleBases.length === 0 ? <AppEmptyState title="未找到知识库" description="请调整搜索关键词，或创建新的知识库。" /> : null}
|
|
</AppPage>
|
|
)
|
|
}
|