58656da983
将教材模块图谱从基本无用状态升级为完整知识图谱可视化系统。 数据层：新增 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 一致性。
46 lines
925 B
TypeScript
46 lines
925 B
TypeScript
"use client"
|
|
|
|
import { memo } from "react"
|
|
import { BaseEdge, getSmoothStepPath, type EdgeProps } from "@xyflow/react"
|
|
import { cn } from "@/shared/lib/utils"
|
|
|
|
function GraphPrerequisiteEdgeComponent({
|
|
id,
|
|
sourceX,
|
|
sourceY,
|
|
targetX,
|
|
targetY,
|
|
sourcePosition,
|
|
targetPosition,
|
|
data,
|
|
}: EdgeProps) {
|
|
const [edgePath] = getSmoothStepPath({
|
|
sourceX,
|
|
sourceY,
|
|
sourcePosition,
|
|
targetX,
|
|
targetY,
|
|
targetPosition,
|
|
})
|
|
|
|
const isHighlighted = (data as { isHighlighted?: boolean } | undefined)?.isHighlighted ?? false
|
|
|
|
return (
|
|
<BaseEdge
|
|
id={id}
|
|
path={edgePath}
|
|
className={cn(
|
|
"transition-opacity",
|
|
isHighlighted ? "opacity-100" : "opacity-30",
|
|
)}
|
|
style={{
|
|
stroke: "currentColor",
|
|
strokeWidth: 2,
|
|
strokeDasharray: "6 4",
|
|
}}
|
|
/>
|
|
)
|
|
}
|
|
|
|
export const GraphPrerequisiteEdge = memo(GraphPrerequisiteEdgeComponent)
|