feat(web): 角色关系图谱（灵感⑥缩减版/D4）
设定库人物 tab 新增 React Flow 关系图谱，仅用现有角色读端点数据
（CharacterRelationView={name,kind,note}）：边按 name-join、kind 作中文
标签、节点按 role 上色，无 closeness/阵营（数据不存在，不硬造）。
- lib/characters/graphLayout.ts：纯逻辑（role→分组配色关键词映射 / 节点
去空重名 / kind→标签+DEFAULT_RELATION_LABEL / 悬空边跳过并计数 / 自指
跳过 / 互指无向去重 / @dagrejs/dagre 一次性确定性初始坐标、中心→左上、
不可变更新）+22 单测。
- components/characters/RelationshipGraph.tsx：'use client'，经 CodexPage
dynamic(ssr:false) 挂载；显式容器高度 + import RF CSS + prefers-reduced-
motion 关 fitView 动画 + 纸感 CSS 变量配色 + 悬空计数提示。
- 依赖：@xyflow/react@^12.11.2 + @dagrejs/dagre@^3.0.0。
无后端契约变更/迁移/gen:api。门禁：lint/typecheck 干净、vitest 565、
coverage lib 95.4%(graphLayout 97.6%)、build OK。
This commit is contained in:
Yaojia Wang
149
apps/web/components/characters/RelationshipGraph.tsx
Normal file
149
apps/web/components/characters/RelationshipGraph.tsx
Normal file
@@ -0,0 +1,149 @@
|
||||
"use client";
|
||||
|
||||
import { useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Background,
|
||||
BackgroundVariant,
|
||||
Controls,
|
||||
ReactFlow,
|
||||
type Edge,
|
||||
type Node,
|
||||
} from "@xyflow/react";
|
||||
import { Users } from "lucide-react";
|
||||
|
||||
// React Flow 样式必须显式引入（组件经 dynamic ssr:false 加载，样式随该 chunk 打包）。
|
||||
import "@xyflow/react/dist/style.css";
|
||||
|
||||
import { EmptyState } from "@/components/ui/EmptyState";
|
||||
import {
|
||||
buildRelationshipGraph,
|
||||
NODE_WIDTH,
|
||||
type GraphNode,
|
||||
} from "@/lib/characters/graphLayout";
|
||||
import type { CharacterCardView } from "@/lib/api/types";
|
||||
|
||||
interface RelationshipGraphProps {
|
||||
characters: CharacterCardView[];
|
||||
}
|
||||
|
||||
// 纸感节点样式：面板底 + 细线框 + 左侧按分组配色的强调条（色值走主题 CSS 变量）。
|
||||
function paperNodeStyle(colorVar: string): React.CSSProperties {
|
||||
return {
|
||||
width: NODE_WIDTH,
|
||||
padding: "8px 10px",
|
||||
borderRadius: 6,
|
||||
background: "var(--color-panel)",
|
||||
color: "var(--color-ink)",
|
||||
border: "1px solid var(--color-line)",
|
||||
borderLeft: `4px solid var(${colorVar})`,
|
||||
boxShadow: "0 1px 3px var(--shadow-paper)",
|
||||
fontSize: 12,
|
||||
textAlign: "left",
|
||||
};
|
||||
}
|
||||
|
||||
// 节点内容：角色名（宋体）+ 定位副标题。
|
||||
function NodeLabel({ name, role }: { name: string; role: string }) {
|
||||
return (
|
||||
<div className="min-w-0">
|
||||
<p className="truncate font-serif text-sm text-ink">{name}</p>
|
||||
{role ? <p className="truncate text-2xs text-ink-soft">{role}</p> : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function toReactFlowNodes(nodes: GraphNode[]): Node[] {
|
||||
return nodes.map((node) => ({
|
||||
id: node.id,
|
||||
position: node.position,
|
||||
data: { label: <NodeLabel name={node.data.label} role={node.data.role} /> },
|
||||
style: paperNodeStyle(node.data.colorVar),
|
||||
// 只读可视化：可拖动重排，不可新建连线。
|
||||
connectable: false,
|
||||
}));
|
||||
}
|
||||
|
||||
function toReactFlowEdges(
|
||||
edges: { id: string; source: string; target: string; label: string }[],
|
||||
): Edge[] {
|
||||
return edges.map((edge) => ({
|
||||
id: edge.id,
|
||||
source: edge.source,
|
||||
target: edge.target,
|
||||
label: edge.label,
|
||||
labelStyle: { fill: "var(--color-ink-soft)", fontSize: 11 },
|
||||
labelBgStyle: { fill: "var(--color-bg)", fillOpacity: 0.9 },
|
||||
labelBgPadding: [4, 2] as [number, number],
|
||||
labelBgBorderRadius: 4,
|
||||
style: { stroke: "var(--color-line)", strokeWidth: 1.5 },
|
||||
}));
|
||||
}
|
||||
|
||||
// 尊重 prefers-reduced-motion：减动偏好下关闭 fitView 平滑动画与边流动动画。
|
||||
function usePrefersReducedMotion(): boolean {
|
||||
const [reduced, setReduced] = useState(false);
|
||||
useEffect(() => {
|
||||
const media = window.matchMedia("(prefers-reduced-motion: reduce)");
|
||||
const update = () => setReduced(media.matches);
|
||||
update();
|
||||
media.addEventListener("change", update);
|
||||
return () => media.removeEventListener("change", update);
|
||||
}, []);
|
||||
return reduced;
|
||||
}
|
||||
|
||||
// 角色关系图谱（灵感⑥ 缩减版 / D4）：只用现有 relations 数据，节点按 role 上色、
|
||||
// 边按 name-join、kind 作中文标签。悬空边（引用未入库角色）已在 graphLayout 略过并计数。
|
||||
export function RelationshipGraph({ characters }: RelationshipGraphProps) {
|
||||
const reducedMotion = usePrefersReducedMotion();
|
||||
|
||||
const graph = useMemo(
|
||||
() => buildRelationshipGraph(characters),
|
||||
[characters],
|
||||
);
|
||||
const nodes = useMemo(() => toReactFlowNodes(graph.nodes), [graph.nodes]);
|
||||
const edges = useMemo(() => toReactFlowEdges(graph.edges), [graph.edges]);
|
||||
|
||||
if (graph.nodes.length === 0) {
|
||||
return (
|
||||
<EmptyState
|
||||
icon={Users}
|
||||
title="暂无可视化的人物"
|
||||
description="先入库角色并登记彼此关系，这里会绘制出关系图谱。"
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2">
|
||||
{/* React Flow 必须有显式尺寸的容器，否则画布高度为 0。 */}
|
||||
<div className="h-[28rem] w-full overflow-hidden rounded border border-line bg-bg">
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2, duration: reducedMotion ? 0 : 400 }}
|
||||
nodesConnectable={false}
|
||||
edgesFocusable={false}
|
||||
proOptions={{ hideAttribution: false }}
|
||||
minZoom={0.2}
|
||||
maxZoom={1.75}
|
||||
defaultEdgeOptions={{ animated: false }}
|
||||
>
|
||||
<Background
|
||||
variant={BackgroundVariant.Dots}
|
||||
gap={20}
|
||||
size={1}
|
||||
color="var(--color-line)"
|
||||
/>
|
||||
<Controls showInteractive={false} />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
{graph.danglingCount > 0 ? (
|
||||
<p className="text-2xs text-ink-soft">
|
||||
有 {graph.danglingCount} 条关系引用了未入库的角色，已略过。
|
||||
</p>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,7 +1,8 @@
|
||||
"use client";
|
||||
|
||||
import { useMemo, useState } from "react";
|
||||
import { Clock3, Globe2, Sparkles, UserRound } from "lucide-react";
|
||||
import dynamic from "next/dynamic";
|
||||
import { Clock3, Globe2, Share2, Sparkles, UserRound } from "lucide-react";
|
||||
|
||||
import { AppShell } from "@/components/AppShell";
|
||||
import { CharacterGenerator } from "@/components/generation/CharacterGenerator";
|
||||
@@ -39,6 +40,23 @@ const TABS: { key: CodexTab; label: string }[] = [
|
||||
{ key: "timeline", label: "时间线" },
|
||||
];
|
||||
|
||||
// 关系图谱（React Flow）只在客户端渲染：ssr:false 绕开 canvas/window 依赖，
|
||||
// 并把 React Flow 及其样式拆到独立 chunk，进人物 tab 才加载。
|
||||
const RelationshipGraph = dynamic(
|
||||
() =>
|
||||
import("@/components/characters/RelationshipGraph").then(
|
||||
(mod) => mod.RelationshipGraph,
|
||||
),
|
||||
{
|
||||
ssr: false,
|
||||
loading: () => (
|
||||
<div className="flex h-[28rem] items-center justify-center rounded border border-line bg-bg text-sm text-ink-soft">
|
||||
关系图谱加载中…
|
||||
</div>
|
||||
),
|
||||
},
|
||||
);
|
||||
|
||||
// 设定库 Codex（UX §6.5）：管理人物 / 世界观 / 时间线。
|
||||
// 初始列表来自后端读端点（跨会话全量真源）；本会话新入库的角色卡再合并补显，
|
||||
// 故刷新后不再为空、且不与真源重复（按 name 去重，见 mergeCharacterCards）。
|
||||
@@ -143,6 +161,15 @@ export function CodexPage({
|
||||
/>
|
||||
)}
|
||||
</Card>
|
||||
{characters.length > 0 ? (
|
||||
<Card as="section" className="p-4">
|
||||
<h3 className="mb-3 flex items-center gap-2 font-serif text-sm text-ink">
|
||||
<Share2 className="h-4 w-4 text-cinnabar" aria-hidden="true" />
|
||||
关系图谱
|
||||
</h3>
|
||||
<RelationshipGraph characters={characters} />
|
||||
</Card>
|
||||
) : null}
|
||||
<div id="character-generator">
|
||||
<CharacterGenerator
|
||||
projectId={project.id}
|
||||
|
||||
Reference in New Issue
Block a user