251 lines
9.9 KiB
TypeScript
251 lines
9.9 KiB
TypeScript
"use client"
|
|
|
|
import { useEffect, useState } from "react"
|
|
import { Star, Pencil, Trash2, Repeat, ExternalLink, Maximize2, Minimize2, Mic, Loader2, Copy } from "lucide-react"
|
|
import { toast } from "sonner"
|
|
import {
|
|
Dialog,
|
|
DialogContent,
|
|
DialogHeader,
|
|
DialogTitle,
|
|
} from "@/components/ui/dialog"
|
|
import { Button } from "@/components/ui/button"
|
|
import { Badge } from "@/components/ui/badge"
|
|
import { cn } from "@/lib/utils"
|
|
import type { KnowledgeItem } from "@/lib/types"
|
|
import { DIFFICULTY_META, MASTERY_META } from "@/lib/types"
|
|
import { AIChatPanel } from "@/components/ai/ai-chat-panel"
|
|
import { Markdown } from "@/components/ai/markdown"
|
|
import { useAISettings } from "@/components/ai/ai-settings-provider"
|
|
import { requestOpenAICompatible } from "@/lib/ai/client"
|
|
import { validateForRequest } from "@/lib/ai/settings"
|
|
import { buildInterviewPrompt } from "@/lib/ai/prompts"
|
|
import { saveInterviewAnswer } from "@/lib/knowledge"
|
|
|
|
function formatDate(value: string | null) {
|
|
if (!value) return "—"
|
|
return new Date(value).toLocaleDateString("zh-CN", { month: "short", day: "numeric" })
|
|
}
|
|
|
|
export function DetailDialog({
|
|
item,
|
|
onOpenChange,
|
|
onEdit,
|
|
onDelete,
|
|
onReview,
|
|
onToggleFav,
|
|
onItemUpdated,
|
|
}: {
|
|
item: KnowledgeItem | null
|
|
onOpenChange: (open: boolean) => void
|
|
onEdit: (item: KnowledgeItem) => void
|
|
onDelete: (id: string) => void
|
|
onReview: (item: KnowledgeItem) => void
|
|
onToggleFav: (item: KnowledgeItem) => void
|
|
onItemUpdated?: (item: KnowledgeItem) => void
|
|
}) {
|
|
const { settings } = useAISettings()
|
|
const [fullscreen, setFullscreen] = useState(false)
|
|
const [interview, setInterview] = useState<string | null>(null)
|
|
const [interviewLoading, setInterviewLoading] = useState(false)
|
|
|
|
// 切换知识点时加载该卡片已保存的面试回答，避免不同卡片间串味
|
|
useEffect(() => {
|
|
setInterview(item?.interview_answer ?? null)
|
|
setInterviewLoading(false)
|
|
}, [item?.id, item?.interview_answer])
|
|
|
|
async function handleInterview(current: KnowledgeItem) {
|
|
const err = validateForRequest(settings)
|
|
if (err) return toast.error(err)
|
|
setInterviewLoading(true)
|
|
try {
|
|
const reply = await requestOpenAICompatible({
|
|
baseUrl: settings.baseUrl,
|
|
apiKey: settings.apiKey,
|
|
model: settings.model,
|
|
customPrompt: buildInterviewPrompt(current),
|
|
messages: [],
|
|
temperature: settings.temperature,
|
|
maxTokens: settings.maxTokens,
|
|
})
|
|
const answer = reply.trim()
|
|
setInterview(answer)
|
|
// 持久化到数据库，新回答覆盖旧回答
|
|
await saveInterviewAnswer(current.id, answer)
|
|
onItemUpdated?.({ ...current, interview_answer: answer })
|
|
} catch (e) {
|
|
toast.error((e as Error).message)
|
|
} finally {
|
|
setInterviewLoading(false)
|
|
}
|
|
}
|
|
|
|
if (!item) return null
|
|
const diff = DIFFICULTY_META[item.difficulty]
|
|
const mastery = MASTERY_META[item.mastery]
|
|
|
|
return (
|
|
<Dialog open={!!item} onOpenChange={onOpenChange}>
|
|
<DialogContent
|
|
className={cn(
|
|
"flex flex-col gap-0 overflow-hidden",
|
|
fullscreen
|
|
? "left-0 top-0 h-screen max-h-screen w-screen max-w-none translate-x-0 translate-y-0 rounded-none sm:max-w-none"
|
|
: "max-h-[90vh] sm:max-w-3xl",
|
|
)}
|
|
>
|
|
<button
|
|
type="button"
|
|
onClick={() => setFullscreen((v) => !v)}
|
|
aria-label={fullscreen ? "退出全屏" : "全屏"}
|
|
className="absolute right-12 top-2.5 inline-flex size-6 items-center justify-center rounded-md text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
>
|
|
{fullscreen ? <Minimize2 className="size-3" /> : <Maximize2 className="size-3" />}
|
|
</button>
|
|
<DialogHeader className="shrink-0 pr-16">
|
|
<div className="flex flex-wrap items-center gap-2">
|
|
<Badge variant="outline" className="font-mono text-[10px] uppercase">
|
|
{item.category}
|
|
</Badge>
|
|
<span className={cn("inline-flex items-center gap-1 rounded-md border px-2 py-0.5 text-[10px]", mastery.color)}>
|
|
<span className={cn("size-1.5 rounded-full", mastery.dot)} />
|
|
{mastery.label}
|
|
</span>
|
|
<span className={cn("rounded-md border px-2 py-0.5 text-[10px]", diff.color)}>{diff.label}</span>
|
|
</div>
|
|
<DialogTitle className="text-pretty text-xl">{item.title}</DialogTitle>
|
|
{item.summary && <p className="text-sm leading-relaxed text-muted-foreground">{item.summary}</p>}
|
|
</DialogHeader>
|
|
|
|
<div className="grid min-w-0 flex-1 gap-5 overflow-y-auto py-2">
|
|
{item.content && (
|
|
<section className="min-w-0">
|
|
<h4 className="mb-1.5 font-mono text-xs uppercase tracking-wide text-muted-foreground">详细内容</h4>
|
|
<p className="whitespace-pre-wrap break-words text-sm leading-relaxed">{item.content}</p>
|
|
</section>
|
|
)}
|
|
|
|
{item.code_snippet && (
|
|
<section className="min-w-0">
|
|
<h4 className="mb-1.5 font-mono text-xs uppercase tracking-wide text-muted-foreground">代码片段</h4>
|
|
<pre className="max-w-full overflow-x-auto rounded-lg border border-border bg-secondary/40 p-3 text-sm">
|
|
<code className="font-mono text-foreground">{item.code_snippet}</code>
|
|
</pre>
|
|
</section>
|
|
)}
|
|
|
|
{item.notes && (
|
|
<section className="min-w-0">
|
|
<h4 className="mb-1.5 font-mono text-xs uppercase tracking-wide text-muted-foreground">个人笔记</h4>
|
|
<p className="whitespace-pre-wrap break-words rounded-lg border border-border bg-muted/30 p-3 text-sm leading-relaxed">
|
|
{item.notes}
|
|
</p>
|
|
</section>
|
|
)}
|
|
|
|
{item.tags.length > 0 && (
|
|
<div className="flex flex-wrap gap-1.5">
|
|
{item.tags.map((t) => (
|
|
<Badge key={t} variant="secondary" className="font-mono text-xs">
|
|
#{t}
|
|
</Badge>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<div className="grid grid-cols-3 gap-3 rounded-lg border border-border bg-card/50 p-3 text-center font-mono">
|
|
<div>
|
|
<p className="text-lg font-semibold text-primary">{item.review_count}</p>
|
|
<p className="text-[11px] text-muted-foreground">复习次数</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold">{formatDate(item.last_reviewed_at)}</p>
|
|
<p className="text-[11px] text-muted-foreground">上次复习</p>
|
|
</div>
|
|
<div>
|
|
<p className="text-sm font-semibold">{formatDate(item.next_review_at)}</p>
|
|
<p className="text-[11px] text-muted-foreground">下次复习</p>
|
|
</div>
|
|
</div>
|
|
|
|
{item.source_url && (
|
|
<a
|
|
href={item.source_url}
|
|
target="_blank"
|
|
rel="noreferrer"
|
|
className="inline-flex items-center gap-1.5 text-sm text-primary hover:underline"
|
|
>
|
|
<ExternalLink className="size-3.5" />
|
|
查看来源
|
|
</a>
|
|
)}
|
|
|
|
{/* AI 面试回答版 */}
|
|
<section className="min-w-0">
|
|
<div className="mb-1.5 flex items-center justify-between">
|
|
<h4 className="font-mono text-xs uppercase tracking-wide text-muted-foreground">面试回答版</h4>
|
|
<Button
|
|
variant="ghost"
|
|
size="sm"
|
|
onClick={() => handleInterview(item)}
|
|
disabled={interviewLoading}
|
|
className="h-7 gap-1 px-2 text-xs text-primary hover:text-primary"
|
|
>
|
|
{interviewLoading ? <Loader2 className="size-3.5 animate-spin" /> : <Mic className="size-3.5" />}
|
|
{interview ? "重新生成" : "AI 生成面试回答"}
|
|
</Button>
|
|
</div>
|
|
{interview && (
|
|
<div className="group relative rounded-lg border border-border bg-secondary/40 p-3">
|
|
<Markdown content={interview} />
|
|
<button
|
|
type="button"
|
|
onClick={() => {
|
|
navigator.clipboard.writeText(interview)
|
|
toast.success("已复制")
|
|
}}
|
|
aria-label="复制面试回答"
|
|
className="absolute right-2 top-2 hidden rounded-md border border-border bg-background p-1 text-muted-foreground hover:text-foreground group-hover:block"
|
|
>
|
|
<Copy className="size-3" />
|
|
</button>
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* AI 追问聊天 */}
|
|
<AIChatPanel key={item.id} item={item} />
|
|
</div>
|
|
|
|
<div className="flex shrink-0 flex-wrap items-center justify-between gap-2 border-t border-border pt-4">
|
|
<div className="flex gap-2">
|
|
<Button onClick={() => onReview(item)} className="gap-1.5">
|
|
<Repeat className="size-4" />
|
|
完成复习
|
|
</Button>
|
|
<Button variant="outline" onClick={() => onToggleFav(item)} className="gap-1.5">
|
|
<Star className={cn("size-4", item.is_favorite && "fill-amber-400 text-amber-400")} />
|
|
{item.is_favorite ? "已收藏" : "收藏"}
|
|
</Button>
|
|
</div>
|
|
<div className="flex gap-2">
|
|
<Button variant="ghost" size="icon" onClick={() => onEdit(item)} aria-label="编辑">
|
|
<Pencil className="size-4" />
|
|
</Button>
|
|
<Button
|
|
variant="ghost"
|
|
size="icon"
|
|
onClick={() => onDelete(item.id)}
|
|
aria-label="删除"
|
|
className="text-destructive hover:text-destructive"
|
|
>
|
|
<Trash2 className="size-4" />
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</DialogContent>
|
|
</Dialog>
|
|
)
|
|
}
|