chore(history): import initial web product snapshot
This commit is contained in:
wmq
@@ -0,0 +1,199 @@
|
||||
import { useState } from 'react'
|
||||
import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
|
||||
import { Plus, Search, Upload, BookOpen, BarChart3, Zap, FileText, Download, RefreshCw } from 'lucide-react'
|
||||
import { toast, errorMessage } from '@/app/store/toast'
|
||||
import { confirmDialog } from '@/app/store/confirm'
|
||||
import { PageLoading, ErrorState, EmptyState } from '@/components/ui/feedback'
|
||||
import { PageHeader } from '@/components/common/PageHeader'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Badge } from '@/components/ui/badge'
|
||||
import { Card, CardHeader } from '@/components/ui/card'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { Input, Textarea, Field } from '@/components/ui/input'
|
||||
import { Tabs } from '@/components/ui/tabs'
|
||||
import { Dialog } from '@/components/ui/dialog'
|
||||
import { DemoNote } from '@/components/common/DemoNote'
|
||||
import {
|
||||
getKnowledge, createKnowledge, updateKnowledge, deleteKnowledge,
|
||||
uploadKnowledgeFiles, knowledgeSearchTest, getKnowledgeStats,
|
||||
} from '@/services/api/knowledge'
|
||||
import { KNOWLEDGE_CATEGORIES } from '@/config/constants'
|
||||
import { formatRelative } from '@/utils/format'
|
||||
import { cn } from '@/utils/cn'
|
||||
import type { KnowledgeItem } from '@/types'
|
||||
|
||||
export function KnowledgePage() {
|
||||
const queryClient = useQueryClient()
|
||||
const [tab, setTab] = useState('list')
|
||||
const [category, setCategory] = useState('')
|
||||
const [keyword, setKeyword] = useState('')
|
||||
const [createOpen, setCreateOpen] = useState(false)
|
||||
const [editItem, setEditItem] = useState<KnowledgeItem | null>(null)
|
||||
const [searchQ, setSearchQ] = useState('')
|
||||
|
||||
const { data, isLoading, isError, refetch } = useQuery({
|
||||
queryKey: ['knowledge', category, keyword],
|
||||
queryFn: () => getKnowledge({ category, keyword }),
|
||||
})
|
||||
const { data: stats } = useQuery({ queryKey: ['knowledge-stats'], queryFn: getKnowledgeStats, enabled: tab === 'stats' })
|
||||
const [searchResult, setSearchResult] = useState<any>(null)
|
||||
const [searchLoading, setSearchLoading] = useState(false)
|
||||
const [uploadFiles, setUploadFiles] = useState<{ name: string; type: string }[]>([])
|
||||
const [uploadDialog, setUploadDialog] = useState(false)
|
||||
|
||||
const createMut = useMutation({
|
||||
mutationFn: (p: any) => createKnowledge(p),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['knowledge'] }); toast.success('知识已创建'); setCreateOpen(false) },
|
||||
onError: (e) => toast.error(errorMessage(e)),
|
||||
})
|
||||
|
||||
const toggleMut = useMutation({
|
||||
mutationFn: ({ id, enabled }: any) => updateKnowledge(id, { enabled }),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['knowledge'] }) },
|
||||
})
|
||||
|
||||
const deleteMut = useMutation({
|
||||
mutationFn: (id: string) => deleteKnowledge(id),
|
||||
onSuccess: () => { queryClient.invalidateQueries({ queryKey: ['knowledge'] }); toast.success('已删除') },
|
||||
})
|
||||
|
||||
const list = data?.list ?? []
|
||||
|
||||
if (isLoading) return <PageLoading />
|
||||
if (isError) return <ErrorState onRetry={() => refetch()} />
|
||||
|
||||
return (
|
||||
<div className="p-4 md:p-6">
|
||||
<PageHeader
|
||||
title="企业知识库"
|
||||
description={`${list.length} 条知识 · AI 回复与翻译的精准来源`}
|
||||
actions={
|
||||
<>
|
||||
<Button size="sm" variant="outline" onClick={() => setUploadDialog(true)}><Upload className="h-4 w-4" />上传文件</Button>
|
||||
<Button size="sm" onClick={() => setCreateOpen(true)}><Plus className="h-4 w-4" />新建知识</Button>
|
||||
</>
|
||||
}
|
||||
/>
|
||||
|
||||
<Tabs value={tab} onChange={setTab} className="mb-4" items={[
|
||||
{ value: 'list', label: '知识列表' },
|
||||
{ value: 'search', label: '检索测试' },
|
||||
{ value: 'stats', label: '使用统计' },
|
||||
]} />
|
||||
|
||||
{tab === 'list' && (
|
||||
<div className="flex gap-4">
|
||||
<div className="w-48 shrink-0 space-y-1 hidden md:block">
|
||||
<button onClick={() => setCategory('')} className={cn('block w-full text-start rounded px-2 py-1.5 text-sm', !category ? 'bg-primary-50 font-medium text-primary-700' : 'text-muted-foreground hover:text-foreground')}>全部分类</button>
|
||||
{KNOWLEDGE_CATEGORIES.map((c) => (
|
||||
<button key={c.value} onClick={() => setCategory(c.value)} className={cn('block w-full text-start rounded px-2 py-1.5 text-sm', category === c.value ? 'bg-primary-50 font-medium text-primary-700' : 'text-muted-foreground hover:text-foreground')}>{c.label}</button>
|
||||
))}
|
||||
</div>
|
||||
<div className="flex-1 min-w-0">
|
||||
<div className="mb-3 flex items-center gap-2">
|
||||
<div className="relative flex-1 max-w-xs">
|
||||
<Search className="absolute left-2.5 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground" />
|
||||
<input placeholder="搜索知识标题/内容/标签" value={keyword} onChange={(e) => setKeyword(e.target.value)} className="h-9 w-full rounded-md border border-input bg-card pl-8 pr-3 text-sm focus:border-primary focus:outline-none" />
|
||||
</div>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{list.map((item) => (
|
||||
<Card key={item.id} className="p-4">
|
||||
<div className="flex items-start justify-between gap-3">
|
||||
<div className="min-w-0 flex-1">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="text-sm font-medium">{item.title}</span>
|
||||
<Badge variant="outline">{KNOWLEDGE_CATEGORIES.find(c => c.value === item.category)?.label}</Badge>
|
||||
<span className="text-xs text-muted-foreground">v{item.version}</span>
|
||||
</div>
|
||||
<p className="mt-1 text-xs text-muted-foreground line-clamp-2">{item.content}</p>
|
||||
<div className="mt-2 flex items-center gap-2 text-xs text-muted-foreground">
|
||||
<span>引用 {item.citedCount} 次</span>
|
||||
<span>·</span>
|
||||
<span>{formatRelative(item.updatedAt)}</span>
|
||||
<span>·</span>
|
||||
<span>{item.status === 'parsing' ? '解析中…' : item.status === 'failed' ? '解析失败' : ''}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center gap-2 shrink-0">
|
||||
<Switch checked={item.enabled} onCheckedChange={(v) => toggleMut.mutate({ id: item.id, enabled: v })} />
|
||||
<Button variant="ghost" size="icon-sm" onClick={() => confirmDialog({ title: '删除知识', description: `确认删除「${item.title}」？`, danger: true, onConfirm: () => deleteMut.mutate(item.id) })}><span className="font-bold text-red-500">×</span></Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{tab === 'search' && (
|
||||
<Card className="p-4">
|
||||
<div className="flex gap-2">
|
||||
<Input placeholder="输入跨境问题，测试知识库检索与 AI 答案生成" value={searchQ} onChange={(e) => setSearchQ(e.target.value)} className="flex-1" />
|
||||
<Button loading={searchLoading} onClick={async () => {
|
||||
if (!searchQ.trim()) return
|
||||
setSearchLoading(true)
|
||||
try {
|
||||
const res = await knowledgeSearchTest(searchQ)
|
||||
setSearchResult(res)
|
||||
} catch (e) { toast.error(errorMessage(e)) } finally { setSearchLoading(false) }
|
||||
}}><Search className="h-4 w-4" />检索</Button>
|
||||
</div>
|
||||
{searchResult && (
|
||||
<div className="mt-4 space-y-3">
|
||||
<Card className="p-3 bg-primary-50/30">
|
||||
<p className="text-xs font-semibold text-muted-foreground mb-1">AI 答案</p>
|
||||
<p className="text-sm">{searchResult.answer}</p>
|
||||
</Card>
|
||||
<p className="text-xs font-semibold text-muted-foreground">命中知识 ({searchResult.hits.length})</p>
|
||||
{searchResult.hits.map((h: any) => (
|
||||
<div key={h.item.id} className="rounded-md border border-border p-3">
|
||||
<div className="flex items-center justify-between"><span className="text-sm font-medium">{h.item.title}</span><Badge variant="primary">{(h.score * 100).toFixed(0)}%</Badge></div>
|
||||
<p className="mt-1 text-xs text-muted-foreground">{h.snippet}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</Card>
|
||||
)}
|
||||
|
||||
{tab === 'stats' && stats && (
|
||||
<div className="grid grid-cols-1 gap-4 md:grid-cols-2">
|
||||
<Card className="p-4">
|
||||
<h3 className="text-sm font-semibold mb-3">知识引用概况</h3>
|
||||
<p className="text-2xl font-semibold">{stats.totalCitations} <span className="text-sm text-muted-foreground">次总引用</span></p>
|
||||
<p className="text-sm text-muted-foreground mt-1">AI回复引用率：{(stats.aiReplyCitationRate * 100).toFixed(1)}%</p>
|
||||
</Card>
|
||||
<Card className="p-4">
|
||||
<h3 className="text-sm font-semibold mb-3">最常引用</h3>
|
||||
{stats.topUsed.map((k) => (
|
||||
<div key={k.id} className="flex items-center justify-between text-sm py-1"><span>{k.title}</span><span className="text-muted-foreground">{k.citedCount}次</span></div>
|
||||
))}
|
||||
</Card>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Dialog open={createOpen} onOpenChange={setCreateOpen} title="新建知识条目" footer={
|
||||
<Button onClick={() => {
|
||||
const title = (document.querySelector('#k-title') as HTMLInputElement)?.value
|
||||
const content = (document.querySelector('#k-content') as HTMLTextAreaElement)?.value
|
||||
if (!title) { toast.warning('请输入标题'); return }
|
||||
createMut.mutate({ title, content, category: category || 'faq' })
|
||||
}}>创建</Button>
|
||||
}>
|
||||
<Field label="标题" required><Input id="k-title" placeholder="知识条目标题" /></Field>
|
||||
<Field label="内容" className="mt-3"><Textarea id="k-content" rows={5} placeholder="知识内容…" /></Field>
|
||||
</Dialog>
|
||||
|
||||
<Dialog open={uploadDialog} onOpenChange={setUploadDialog} title="上传文件" footer={
|
||||
<Button onClick={() => {
|
||||
uploadKnowledgeFiles([{ name: '产品手册-2026Q3.pdf', type: 'pdf' }, { name: '报价政策.docx', type: 'docx' }])
|
||||
.then(() => { toast.success('文件已开始解析，约3—5秒完成'); queryClient.invalidateQueries({ queryKey: ['knowledge'] }); setUploadDialog(false) })
|
||||
}}>上传</Button>
|
||||
}>
|
||||
<p className="text-sm text-muted-foreground">支持 Word/PDF/TXT/Excel/图片，AI 将自动解析为可引用的知识条目。</p>
|
||||
</Dialog>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user