feat(textbooks): 知识图谱功能全面重构 — 前置依赖 + dagre 布局 + React Flow 可视化 + 师生双视角
将教材模块图谱从基本无用状态升级为完整知识图谱可视化系统。 数据层:新增 knowledgePointPrerequisites 表(复合主键+双外键 cascade);新增 data-access-graph.ts(server-only)知识点关联聚合、学生/班级掌握度查询;utils.ts 新增 hasCycleAfterAddingEdge(DFS 循环依赖检测)。 业务层:3 个新 Server Action(getKnowledgeGraphDataAction 三视图模式、createPrerequisiteAction 含循环检测、deletePrerequisiteAction);graph-layout.ts 重写为 dagre 分层有向图布局。 视图层:knowledge-graph.tsx 重写为 React Flow 主组件(全书视图+搜索高亮+关联节点高亮+章节着色);4 个新组件(graph-kp-node/graph-prerequisite-edge/graph-toolbar/graph-node-detail-panel);use-graph-data.ts 派生值模式避免 effect 中 setState。 架构:严格三层架构,客户端通过 Server Action 间接访问 server-only 数据层;权限校验+ i18n 全覆盖;架构文档 004/005 同步。 测试:utils.test.ts 新增 5 个循环检测测试,graph-layout.test.ts 重写 5 个 dagre 布局测试,全部 30 个教材模块单元测试通过。 附带提交 drizzle/0005 error-book 迁移文件以保持 journal 一致性。
This commit is contained in:
91
src/modules/textbooks/components/graph-kp-node.tsx
Normal file
91
src/modules/textbooks/components/graph-kp-node.tsx
Normal file
@@ -0,0 +1,91 @@
|
||||
"use client"
|
||||
|
||||
import { memo } from "react"
|
||||
import { Handle, Position, type NodeProps } from "@xyflow/react"
|
||||
import { useTranslations } from "next-intl"
|
||||
import { cn } from "@/shared/lib/utils"
|
||||
import type { GraphNodeData, MasteryLevel } from "../types"
|
||||
import type { GraphLayoutNodeData } from "../graph-layout"
|
||||
|
||||
/** 根据掌握度计算色彩等级 */
|
||||
function getMasteryLevel(mastery: number | null): MasteryLevel {
|
||||
if (mastery === null) return "unassessed"
|
||||
if (mastery < 60) return "low"
|
||||
if (mastery < 85) return "medium"
|
||||
return "high"
|
||||
}
|
||||
|
||||
const MASTERY_COLORS: Record<MasteryLevel, string> = {
|
||||
low: "border-red-500 bg-red-50 dark:bg-red-950/30",
|
||||
medium: "border-yellow-500 bg-yellow-50 dark:bg-yellow-950/30",
|
||||
high: "border-green-500 bg-green-50 dark:bg-green-950/30",
|
||||
unassessed: "border-border bg-card",
|
||||
}
|
||||
|
||||
const MASTERY_BAR_COLORS: Record<MasteryLevel, string> = {
|
||||
low: "bg-red-500",
|
||||
medium: "bg-yellow-500",
|
||||
high: "bg-green-500",
|
||||
unassessed: "bg-muted",
|
||||
}
|
||||
|
||||
function GraphKpNodeComponent({ data, selected }: NodeProps) {
|
||||
const t = useTranslations("textbooks")
|
||||
const nodeData = data as unknown as GraphLayoutNodeData
|
||||
const { kp } = nodeData
|
||||
const graphData = (data as unknown as { graphData?: GraphNodeData }).graphData
|
||||
const mastery = graphData?.mastery ?? null
|
||||
const masteryLevel = getMasteryLevel(mastery?.masteryLevel ?? null)
|
||||
const showMastery = graphData?.viewMode === "student-mastery" || graphData?.viewMode === "class-mastery"
|
||||
|
||||
return (
|
||||
<div
|
||||
className={cn(
|
||||
"rounded-lg border-2 px-3 py-2 shadow-sm transition-all",
|
||||
MASTERY_COLORS[masteryLevel],
|
||||
selected && "ring-2 ring-primary ring-offset-1",
|
||||
graphData?.isHighlighted && "ring-2 ring-primary",
|
||||
!graphData?.isHighlighted && graphData !== undefined && "opacity-40",
|
||||
)}
|
||||
style={{ width: 180 }}
|
||||
>
|
||||
<Handle type="target" position={Position.Top} className="opacity-0" />
|
||||
|
||||
<div className="flex items-start justify-between gap-2 mb-1">
|
||||
<span className="text-xs font-medium line-clamp-2 flex-1">{kp.name}</span>
|
||||
{kp.questionCount > 0 && (
|
||||
<span className="text-[10px] px-1.5 py-0.5 rounded-full bg-primary/10 text-primary shrink-0">
|
||||
{kp.questionCount} {t("graph.node.questions")}
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{showMastery && (
|
||||
<div className="mt-2">
|
||||
<div className="flex items-center justify-between text-[10px] text-muted-foreground mb-1">
|
||||
<span>{t("graph.node.mastery")}</span>
|
||||
<span>
|
||||
{mastery ? `${Math.round(mastery.masteryLevel)}%` : t("graph.detail.masteryNotAssessed")}
|
||||
</span>
|
||||
</div>
|
||||
<div className="h-1.5 rounded-full bg-muted overflow-hidden">
|
||||
<div
|
||||
className={cn("h-full transition-all", MASTERY_BAR_COLORS[masteryLevel])}
|
||||
style={{ width: `${mastery?.masteryLevel ?? 0}%` }}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{kp.chapterTitle && (
|
||||
<div className="mt-1 text-[10px] text-muted-foreground truncate">
|
||||
{kp.chapterTitle}
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Handle type="source" position={Position.Bottom} className="opacity-0" />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export const GraphKpNode = memo(GraphKpNodeComponent)
|
||||
Reference in New Issue
Block a user