feat：打开新的页面展示关系图谱，并且添加节点和连线配色
This commit is contained in:
wuchengji
@@ -10,6 +10,7 @@ import Outline from './pages/Outline';
|
||||
import Characters from './pages/Characters';
|
||||
import Careers from './pages/Careers';
|
||||
import Relationships from './pages/Relationships';
|
||||
import RelationshipGraph from './pages/RelationshipGraph';
|
||||
import Organizations from './pages/Organizations';
|
||||
import Chapters from './pages/Chapters';
|
||||
import ChapterReader from './pages/ChapterReader';
|
||||
@@ -61,6 +62,7 @@ function App() {
|
||||
<Route path="outline" element={<Outline />} />
|
||||
<Route path="characters" element={<Characters />} />
|
||||
<Route path="relationships" element={<Relationships />} />
|
||||
<Route path="relationships-graph" element={<RelationshipGraph />} />
|
||||
<Route path="organizations" element={<Organizations />} />
|
||||
<Route path="chapters" element={<Chapters />} />
|
||||
<Route path="chapter-analysis" element={<ChapterAnalysis />} />
|
||||
|
||||
@@ -0,0 +1,487 @@
|
||||
import { useState, useEffect, useCallback } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Card, Tag, Button, Space, message } from 'antd';
|
||||
import { ArrowLeftOutlined } from '@ant-design/icons';
|
||||
import axios from 'axios';
|
||||
import dagre from 'dagre';
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
BackgroundVariant,
|
||||
MarkerType,
|
||||
} from '@xyflow/react';
|
||||
import type { Node, Edge } from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
|
||||
// 使用 dagre 进行自动布局
|
||||
const getLayoutedElements = (nodes: Node[], edges: Edge[]) => {
|
||||
const dagreGraph = new dagre.graphlib.Graph();
|
||||
dagreGraph.setDefaultEdgeLabel(() => ({}));
|
||||
dagreGraph.setGraph({ rankdir: 'TB', nodesep: 80, ranksep: 100 });
|
||||
|
||||
nodes.forEach((node) => {
|
||||
dagreGraph.setNode(node.id, { width: 140, height: 60 });
|
||||
});
|
||||
|
||||
edges.forEach((edge) => {
|
||||
dagreGraph.setEdge(edge.source, edge.target);
|
||||
});
|
||||
|
||||
dagre.layout(dagreGraph);
|
||||
|
||||
const layoutedNodes = nodes.map((node) => {
|
||||
const nodeWithPosition = dagreGraph.node(node.id);
|
||||
return {
|
||||
...node,
|
||||
position: {
|
||||
x: nodeWithPosition.x - 70,
|
||||
y: nodeWithPosition.y - 30,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
return { nodes: layoutedNodes, edges };
|
||||
};
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
role_type: string;
|
||||
avatar: string | null;
|
||||
}
|
||||
|
||||
interface GraphLink {
|
||||
source: string;
|
||||
target: string;
|
||||
relationship: string;
|
||||
intimacy: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface GraphData {
|
||||
nodes: GraphNode[];
|
||||
links: GraphLink[];
|
||||
}
|
||||
|
||||
interface RelationshipType {
|
||||
id: number;
|
||||
name: string;
|
||||
category: string;
|
||||
reverse_name: string;
|
||||
intimacy_range: string;
|
||||
icon: string;
|
||||
description: string;
|
||||
created_at: string;
|
||||
}
|
||||
|
||||
interface CharacterDetail {
|
||||
id: string;
|
||||
project_id: string;
|
||||
name: string;
|
||||
age: string;
|
||||
gender: string;
|
||||
is_organization: boolean;
|
||||
role_type: string;
|
||||
personality: string;
|
||||
background: string;
|
||||
appearance: string;
|
||||
organization_type: string;
|
||||
organization_purpose: string;
|
||||
organization_members: string;
|
||||
traits: string;
|
||||
avatar_url: string;
|
||||
power_level: number;
|
||||
location: string;
|
||||
motto: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function RelationshipGraph() {
|
||||
const { projectId } = useParams<{ projectId: string }>();
|
||||
const [graphData, setGraphData] = useState<GraphData | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
||||
const [nodeDetail, setNodeDetail] = useState<CharacterDetail | null>(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
const [relationshipTypes, setRelationshipTypes] = useState<RelationshipType[]>([]);
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
|
||||
useEffect(() => {
|
||||
if (projectId) {
|
||||
loadRelationshipTypes();
|
||||
}
|
||||
}, [projectId]);
|
||||
|
||||
// 当 relationshipTypes 加载完成后再加载图数据
|
||||
useEffect(() => {
|
||||
if (projectId && relationshipTypes.length > 0) {
|
||||
loadGraphData();
|
||||
}
|
||||
}, [projectId, relationshipTypes]);
|
||||
|
||||
const loadRelationshipTypes = async () => {
|
||||
try {
|
||||
const res = await axios.get('/api/relationships/types');
|
||||
setRelationshipTypes(res.data || []);
|
||||
} catch (error) {
|
||||
console.error('加载关系类型失败', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 根据关系名称获取分类颜色
|
||||
const getCategoryColor = (relationshipName: string, isActive: boolean) => {
|
||||
// 找到对应的关系类型
|
||||
const relType = relationshipTypes.find(rt => rt.name === relationshipName);
|
||||
const category = relType?.category || 'default';
|
||||
|
||||
// 分类颜色映射 - 重新设计更符合语义
|
||||
const categoryColors: Record<string, { active: string; inactive: string }> = {
|
||||
family: { active: '#f39c12', inactive: '#fcd59e' }, // 家族关系 - 橙黄色(温馨)
|
||||
hostile: { active: '#e74c3c', inactive: '#f5a49a' }, // 敌对关系 - 红色
|
||||
professional: { active: '#3498db', inactive: '#a9d4ed' }, // 职业关系 - 蓝色(专业)
|
||||
social: { active: '#27ae60', inactive: '#a3d9b5' }, // 社交关系 - 绿色(友好)
|
||||
default: { active: '#95a5a6', inactive: '#c8d0d2' }, // 默认 - 灰色
|
||||
};
|
||||
|
||||
const colors = categoryColors[category] || categoryColors.default;
|
||||
return isActive ? colors.active : colors.inactive;
|
||||
};
|
||||
|
||||
const loadGraphData = async () => {
|
||||
if (!projectId) return;
|
||||
setLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/relationships/graph/${projectId}`);
|
||||
const data = res.data as GraphData;
|
||||
|
||||
const getNodeColors = (type: string, roleType: string) => {
|
||||
// 节点颜色 - 重新设计更清晰
|
||||
if (type === 'character') {
|
||||
if (roleType === 'protagonist') return { border: '#e74c3c', bg: '#e74c3c' }; // 主角 - 红色
|
||||
if (roleType === 'antagonist') return { border: '#9b59b6', bg: '#9b59b6' }; // 反派 - 紫色
|
||||
return { border: '#3498db', bg: '#3498db' }; // 配角 - 蓝色
|
||||
}
|
||||
return { border: '#27ae60', bg: '#27ae60' }; // 组织 - 绿色
|
||||
};
|
||||
|
||||
const flowNodes: Node[] = data.nodes.map((node) => {
|
||||
const colors = getNodeColors(node.type, node.role_type);
|
||||
return {
|
||||
id: node.id,
|
||||
type: 'default',
|
||||
position: { x: 0, y: 0 },
|
||||
data: {
|
||||
label: node.name,
|
||||
type: node.type,
|
||||
role_type: node.role_type,
|
||||
},
|
||||
style: {
|
||||
border: `2px solid ${colors.border}`,
|
||||
borderRadius: 8,
|
||||
backgroundColor: `${colors.bg}33`,
|
||||
padding: '10px 15px',
|
||||
minWidth: 100,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const flowEdges: Edge[] = data.links.map(link => {
|
||||
const edgeColor = getCategoryColor(link.relationship, link.status === 'active');
|
||||
return {
|
||||
id: `${link.source}-${link.target}`,
|
||||
source: link.source,
|
||||
target: link.target,
|
||||
label: link.relationship,
|
||||
type: 'smoothstep',
|
||||
style: {
|
||||
stroke: edgeColor,
|
||||
strokeWidth: 2,
|
||||
},
|
||||
labelStyle: {
|
||||
fill: '#666',
|
||||
fontSize: 10,
|
||||
},
|
||||
labelBgStyle: {
|
||||
fill: '#fff',
|
||||
fillOpacity: 0.9,
|
||||
},
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: edgeColor,
|
||||
},
|
||||
data: {
|
||||
intimacy: link.intimacy,
|
||||
status: link.status,
|
||||
category: relationshipTypes.find(rt => rt.name === link.relationship)?.category || 'social',
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
// 使用 dagre 进行自动布局
|
||||
const layouted = getLayoutedElements(flowNodes, flowEdges);
|
||||
setNodes(layouted.nodes);
|
||||
setEdges(layouted.edges);
|
||||
setGraphData(data);
|
||||
} catch (error) {
|
||||
message.error('加载关系图谱失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadNodeDetail = async (nodeId: string) => {
|
||||
if (!projectId) return;
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/characters?project_id=${projectId}`);
|
||||
const characters = res.data.items || [];
|
||||
const character = characters.find((c: CharacterDetail) => c.id === nodeId);
|
||||
if (character) {
|
||||
setNodeDetail(character);
|
||||
} else {
|
||||
message.error('未找到该角色详细信息');
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('加载角色详情失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeClick = (_: unknown, node: { id: string }) => {
|
||||
setSelectedNodeId(node.id);
|
||||
loadNodeDetail(node.id);
|
||||
};
|
||||
|
||||
const handleCloseDetail = () => {
|
||||
setSelectedNodeId(null);
|
||||
setNodeDetail(null);
|
||||
};
|
||||
|
||||
const goBack = () => {
|
||||
window.close();
|
||||
};
|
||||
|
||||
return (
|
||||
<div style={{ height: '100vh', display: 'flex', flexDirection: 'column', backgroundColor: '#f5f5f5' }}>
|
||||
<Card
|
||||
size="small"
|
||||
title={
|
||||
<Space>
|
||||
<Button
|
||||
type="text"
|
||||
icon={<ArrowLeftOutlined />}
|
||||
onClick={goBack}
|
||||
>
|
||||
返回
|
||||
</Button>
|
||||
<span>关系图谱</span>
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Space>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 16, fontSize: 12 }}>
|
||||
{/* 节点颜色图例 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#e74c3c', fontWeight: 'bold' }}>●</span>
|
||||
<span>主角</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#9b59b6', fontWeight: 'bold' }}>●</span>
|
||||
<span>反派</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#3498db', fontWeight: 'bold' }}>●</span>
|
||||
<span>配角</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#27ae60', fontWeight: 'bold' }}>●</span>
|
||||
<span>组织</span>
|
||||
</div>
|
||||
<span style={{ color: '#d9d9d9' }}>|</span>
|
||||
{/* 连线颜色图例 */}
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#f39c12', fontWeight: 'bold' }}>—</span>
|
||||
<span>家族</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#e74c3c', fontWeight: 'bold' }}>—</span>
|
||||
<span>敌对</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#3498db', fontWeight: 'bold' }}>—</span>
|
||||
<span>职业</span>
|
||||
</div>
|
||||
<div style={{ display: 'flex', alignItems: 'center', gap: 4 }}>
|
||||
<span style={{ color: '#27ae60', fontWeight: 'bold' }}>—</span>
|
||||
<span>社交</span>
|
||||
</div>
|
||||
</div>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<div style={{ height: 'calc(100vh - 80px)' }}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={handleNodeClick}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
attributionPosition="bottom-left"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={20} size={1} />
|
||||
<Controls position="top-left" />
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
{/* 节点详情 */}
|
||||
{selectedNodeId && nodeDetail && (
|
||||
<div style={{
|
||||
position: 'fixed',
|
||||
right: 20,
|
||||
top: 80,
|
||||
width: 320,
|
||||
maxHeight: 'calc(100vh - 120px)',
|
||||
overflow: 'auto',
|
||||
backgroundColor: '#fff',
|
||||
borderRadius: 8,
|
||||
boxShadow: '0 2px 8px rgba(0,0,0,0.15)',
|
||||
padding: 16,
|
||||
zIndex: 1000,
|
||||
}}>
|
||||
<div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
|
||||
<h3 style={{ margin: 0 }}>{nodeDetail.is_organization ? '组织详情' : '角色详情'}</h3>
|
||||
<Button type="text" size="small" onClick={handleCloseDetail}>×</Button>
|
||||
</div>
|
||||
|
||||
<div style={{ textAlign: 'center', marginBottom: 16 }}>
|
||||
{nodeDetail.avatar_url ? (
|
||||
<img
|
||||
src={nodeDetail.avatar_url}
|
||||
alt={nodeDetail.name}
|
||||
style={{ width: 60, height: 60, borderRadius: '50%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: nodeDetail.color || '#1890ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
fontSize: 24,
|
||||
color: '#fff'
|
||||
}}>
|
||||
{nodeDetail.is_organization ? '🏛️' : '👤'}
|
||||
</div>
|
||||
)}
|
||||
<h4 style={{ marginTop: 8, marginBottom: 4 }}>{nodeDetail.name}</h4>
|
||||
<Space size="small" wrap>
|
||||
<Tag color={nodeDetail.is_organization ? 'green' : 'blue'}>
|
||||
{nodeDetail.is_organization ? '组织' : '角色'}
|
||||
</Tag>
|
||||
<Tag color={
|
||||
nodeDetail.role_type === 'protagonist' ? 'red' :
|
||||
nodeDetail.role_type === 'antagonist' ? 'orange' : 'blue'
|
||||
}>
|
||||
{nodeDetail.role_type === 'protagonist' ? '主角' :
|
||||
nodeDetail.role_type === 'antagonist' ? '反派' : '配角'}
|
||||
</Tag>
|
||||
{nodeDetail.gender && <Tag>{nodeDetail.gender}</Tag>}
|
||||
{nodeDetail.age && <Tag>{nodeDetail.age}岁</Tag>}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
{!nodeDetail.is_organization ? (
|
||||
<>
|
||||
{nodeDetail.appearance && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>外貌特征：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.appearance}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.personality && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>性格特点：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.personality}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.background && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>背景故事：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.background}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.traits && (
|
||||
<div>
|
||||
<strong>特征标签：</strong>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{JSON.parse(nodeDetail.traits).map((trait: string, index: number) => (
|
||||
<Tag key={index} color="blue">{trait}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{nodeDetail.organization_type && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>组织类型：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.organization_type}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.organization_purpose && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>组织目的：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.organization_purpose}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.location && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>所在地：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.location}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.motto && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>组织格言：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.motto}</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.power_level !== undefined && (
|
||||
<div style={{ marginBottom: 8 }}>
|
||||
<strong>势力等级：</strong>
|
||||
<p style={{ margin: '4px 0', color: '#666', fontSize: 13 }}>{nodeDetail.power_level}/100</p>
|
||||
</div>
|
||||
)}
|
||||
{nodeDetail.organization_members && (
|
||||
<div>
|
||||
<strong>组织成员：</strong>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{JSON.parse(nodeDetail.organization_members).map((member: string, index: number) => (
|
||||
<Tag key={index} color="green">{member}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -1,20 +1,9 @@
|
||||
import { useState, useEffect, useCallback, useMemo } from 'react';
|
||||
import { useState, useEffect } from 'react';
|
||||
import { useParams } from 'react-router-dom';
|
||||
import { Card, Table, Tag, Button, Space, message, Modal, Form, Select, Slider, Input, Tabs, AutoComplete, Descriptions, Divider } from 'antd';
|
||||
import { PlusOutlined, ApartmentOutlined, UserOutlined, EditOutlined } from '@ant-design/icons';
|
||||
import { useStore } from '../store';
|
||||
import axios from 'axios';
|
||||
import {
|
||||
ReactFlow,
|
||||
Background,
|
||||
Controls,
|
||||
MiniMap,
|
||||
useNodesState,
|
||||
useEdgesState,
|
||||
BackgroundVariant,
|
||||
MarkerType,
|
||||
} from '@xyflow/react';
|
||||
import '@xyflow/react/dist/style.css';
|
||||
|
||||
const { TextArea } = Input;
|
||||
|
||||
@@ -43,48 +32,6 @@ interface Character {
|
||||
is_organization: boolean;
|
||||
}
|
||||
|
||||
interface GraphNode {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
role_type: string;
|
||||
avatar: string | null;
|
||||
}
|
||||
|
||||
interface GraphLink {
|
||||
source: string;
|
||||
target: string;
|
||||
relationship: string;
|
||||
intimacy: number;
|
||||
status: string;
|
||||
}
|
||||
|
||||
interface GraphData {
|
||||
nodes: GraphNode[];
|
||||
links: GraphLink[];
|
||||
}
|
||||
|
||||
interface CharacterDetail {
|
||||
project_id: string;
|
||||
name: string;
|
||||
age: string;
|
||||
gender: string;
|
||||
is_organization: boolean;
|
||||
role_type: string;
|
||||
personality: string;
|
||||
background: string;
|
||||
appearance: string;
|
||||
organization_type: string;
|
||||
organization_purpose: string;
|
||||
organization_members: string;
|
||||
traits: string;
|
||||
avatar_url: string;
|
||||
power_level: number;
|
||||
location: string;
|
||||
motto: string;
|
||||
color: string;
|
||||
}
|
||||
|
||||
export default function Relationships() {
|
||||
const { projectId } = useParams<{ projectId: string }>();
|
||||
const { currentProject } = useStore();
|
||||
@@ -100,14 +47,6 @@ export default function Relationships() {
|
||||
const [isMobile, setIsMobile] = useState(window.innerWidth <= 768);
|
||||
const [pageSize, setPageSize] = useState(10);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const [graphData, setGraphData] = useState<GraphData | null>(null);
|
||||
const [graphLoading, setGraphLoading] = useState(false);
|
||||
const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
|
||||
const [nodeDetail, setNodeDetail] = useState<CharacterDetail | null>(null);
|
||||
const [detailLoading, setDetailLoading] = useState(false);
|
||||
|
||||
const [nodes, setNodes, onNodesChange] = useNodesState([]);
|
||||
const [edges, setEdges, onEdgesChange] = useEdgesState([]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleResize = () => {
|
||||
@@ -145,126 +84,6 @@ export default function Relationships() {
|
||||
}
|
||||
};
|
||||
|
||||
const loadGraphData = async () => {
|
||||
if (!projectId) return;
|
||||
setGraphLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/relationships/graph/${projectId}`);
|
||||
const data = res.data as GraphData;
|
||||
|
||||
// 转换为 React Flow 的节点和边
|
||||
const getNodeColors = (type: string, roleType: string) => {
|
||||
// 人物颜色
|
||||
if (type === 'character') {
|
||||
if (roleType === 'protagonist') return { border: '#f5222d', bg: '#f5222d' };
|
||||
if (roleType === 'antagonist') return { border: '#cf1322', bg: '#cf1322' };
|
||||
return { border: '#1890ff', bg: '#1890ff' };
|
||||
}
|
||||
// 组织颜色
|
||||
return { border: '#52c41a', bg: '#52c41a' };
|
||||
};
|
||||
|
||||
const flowNodes: Node[] = data.nodes.map((node, index) => {
|
||||
const colors = getNodeColors(node.type, node.role_type);
|
||||
return {
|
||||
id: node.id,
|
||||
type: 'default',
|
||||
position: {
|
||||
x: 100 + (index % 4) * 200,
|
||||
y: 100 + Math.floor(index / 4) * 150,
|
||||
},
|
||||
data: {
|
||||
label: node.name,
|
||||
type: node.type,
|
||||
role_type: node.role_type,
|
||||
},
|
||||
style: {
|
||||
border: `2px solid ${colors.border}`,
|
||||
borderRadius: 8,
|
||||
backgroundColor: `${colors.bg}33`, // 20% 透明度
|
||||
padding: '10px 15px',
|
||||
minWidth: 100,
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
const flowEdges: Edge[] = data.links.map(link => ({
|
||||
id: `${link.source}-${link.target}`,
|
||||
source: link.source,
|
||||
target: link.target,
|
||||
label: link.relationship,
|
||||
type: 'smoothstep',
|
||||
style: {
|
||||
stroke: link.status === 'active' ? '#a3b1bf' : '#ffccc7',
|
||||
strokeWidth: 2,
|
||||
},
|
||||
labelStyle: {
|
||||
fill: '#666',
|
||||
fontSize: 10,
|
||||
},
|
||||
labelBgStyle: {
|
||||
fill: '#fff',
|
||||
fillOpacity: 0.9,
|
||||
},
|
||||
markerEnd: {
|
||||
type: MarkerType.ArrowClosed,
|
||||
color: link.status === 'active' ? '#a3b1bf' : '#ffccc7',
|
||||
},
|
||||
data: {
|
||||
intimacy: link.intimacy,
|
||||
status: link.status,
|
||||
},
|
||||
}));
|
||||
|
||||
setNodes(flowNodes);
|
||||
setEdges(flowEdges);
|
||||
setGraphData(data);
|
||||
} catch (error) {
|
||||
message.error('加载关系图谱失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setGraphLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const loadNodeDetail = async (nodeId: string) => {
|
||||
if (!projectId) return;
|
||||
setDetailLoading(true);
|
||||
try {
|
||||
const res = await axios.get(`/api/characters?project_id=${projectId}`);
|
||||
const characters = res.data.items || [];
|
||||
// 通过 id 查找角色
|
||||
const character = characters.find((c: { id: string }) => c.id === nodeId);
|
||||
if (character) {
|
||||
setNodeDetail(character);
|
||||
} else {
|
||||
// 如果没找到，尝试通过 name 查找
|
||||
const nodeLabel = nodes.find(n => n.id === nodeId)?.data.label;
|
||||
const characterByName = characters.find((c: { name: string }) => c.name === nodeLabel);
|
||||
if (characterByName) {
|
||||
setNodeDetail(characterByName);
|
||||
} else {
|
||||
message.error('未找到该角色详细信息');
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
message.error('加载角色详情失败');
|
||||
console.error(error);
|
||||
} finally {
|
||||
setDetailLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleNodeClick = (_: unknown, node: { id: string }) => {
|
||||
setSelectedNodeId(node.id);
|
||||
loadNodeDetail(node.id);
|
||||
};
|
||||
|
||||
const handleCloseDetail = () => {
|
||||
setSelectedNodeId(null);
|
||||
setNodeDetail(null);
|
||||
};
|
||||
|
||||
const handleCreateRelationship = async (values: {
|
||||
character_from_id: string;
|
||||
character_to_id: string;
|
||||
@@ -499,14 +318,22 @@ export default function Relationships() {
|
||||
</Space>
|
||||
}
|
||||
extra={
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
>
|
||||
{isMobile ? '添加' : '添加关系'}
|
||||
</Button>
|
||||
<Space>
|
||||
<Button
|
||||
onClick={() => window.open(`/project/${projectId}/relationships-graph`, '_blank')}
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
>
|
||||
关系图谱
|
||||
</Button>
|
||||
<Button
|
||||
type="primary"
|
||||
icon={<PlusOutlined />}
|
||||
onClick={() => setIsModalOpen(true)}
|
||||
size={isMobile ? 'small' : 'middle'}
|
||||
>
|
||||
{isMobile ? '添加' : '添加关系'}
|
||||
</Button>
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
<Tabs
|
||||
@@ -580,74 +407,6 @@ export default function Relationships() {
|
||||
</div>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'graph',
|
||||
label: '关系图谱',
|
||||
children: (
|
||||
<div style={{ height: isMobile ? 'calc(100vh - 400px)' : 'calc(100vh - 350px)' }}>
|
||||
{!graphData && !graphLoading && (
|
||||
<div style={{ textAlign: 'center', padding: '50px 0' }}>
|
||||
<Button type="primary" onClick={loadGraphData} loading={graphLoading}>
|
||||
加载关系图谱
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
{graphLoading && (
|
||||
<div style={{ textAlign: 'center', padding: '50px 0' }}>
|
||||
加载中...
|
||||
</div>
|
||||
)}
|
||||
{graphData && (
|
||||
<>
|
||||
<div style={{
|
||||
marginBottom: 12,
|
||||
display: 'flex',
|
||||
gap: 16,
|
||||
flexWrap: 'wrap',
|
||||
alignItems: 'center'
|
||||
}}>
|
||||
<Tag color="blue">节点: {graphData.nodes.length}</Tag>
|
||||
<Tag color="green">关系: {graphData.links.length}</Tag>
|
||||
<div style={{ fontSize: 12, color: '#8c8c8c' }}>
|
||||
提示: 拖拽画布平移 | 滚轮缩放 | 拖拽节点移动 | 点击节点查看详情
|
||||
</div>
|
||||
</div>
|
||||
<div style={{
|
||||
width: '100%',
|
||||
height: isMobile ? 'calc(100% - 60px)' : 'calc(100% - 60px)',
|
||||
minHeight: 400,
|
||||
border: '1px solid #e8e8e8',
|
||||
borderRadius: 4,
|
||||
backgroundColor: '#fafafa'
|
||||
}}>
|
||||
<ReactFlow
|
||||
nodes={nodes}
|
||||
edges={edges}
|
||||
onNodesChange={onNodesChange}
|
||||
onEdgesChange={onEdgesChange}
|
||||
onNodeClick={handleNodeClick}
|
||||
fitView
|
||||
fitViewOptions={{ padding: 0.2 }}
|
||||
attributionPosition="bottom-left"
|
||||
>
|
||||
<Background variant={BackgroundVariant.Dots} gap={20} size={1} />
|
||||
<Controls />
|
||||
<MiniMap
|
||||
nodeColor={(node) => {
|
||||
const data = node.data as { type?: string; role_type?: string };
|
||||
if (data?.type === 'organization') return '#52c41a';
|
||||
if (data?.role_type === 'protagonist') return '#f5222d';
|
||||
return '#1890ff';
|
||||
}}
|
||||
style={{ backgroundColor: '#f5f5f5' }}
|
||||
/>
|
||||
</ReactFlow>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
),
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
@@ -775,136 +534,6 @@ export default function Relationships() {
|
||||
</Form.Item>
|
||||
</Form>
|
||||
</Modal>
|
||||
|
||||
{/* 节点详情 Modal */}
|
||||
<Modal
|
||||
title={nodeDetail?.is_organization ? '组织详情' : '角色详情'}
|
||||
open={!!selectedNodeId}
|
||||
onCancel={handleCloseDetail}
|
||||
footer={[
|
||||
<Button key="close" onClick={handleCloseDetail}>
|
||||
关闭
|
||||
</Button>
|
||||
]}
|
||||
width={isMobile ? '100%' : 700}
|
||||
loading={detailLoading}
|
||||
>
|
||||
{nodeDetail && (
|
||||
<>
|
||||
<div style={{ textAlign: 'center', marginBottom: 16 }}>
|
||||
{nodeDetail.avatar_url ? (
|
||||
<img
|
||||
src={nodeDetail.avatar_url}
|
||||
alt={nodeDetail.name}
|
||||
style={{ width: 80, height: 80, borderRadius: '50%', objectFit: 'cover' }}
|
||||
/>
|
||||
) : (
|
||||
<div style={{
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: '50%',
|
||||
backgroundColor: nodeDetail.color || '#1890ff',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
margin: '0 auto',
|
||||
fontSize: 32,
|
||||
color: '#fff'
|
||||
}}>
|
||||
{nodeDetail.is_organization ? '🏛️' : '👤'}
|
||||
</div>
|
||||
)}
|
||||
<h2 style={{ marginTop: 8, marginBottom: 4 }}>{nodeDetail.name}</h2>
|
||||
<Space>
|
||||
<Tag color={nodeDetail.is_organization ? 'green' : 'blue'}>
|
||||
{nodeDetail.is_organization ? '组织' : '角色'}
|
||||
</Tag>
|
||||
<Tag color={
|
||||
nodeDetail.role_type === 'protagonist' ? 'red' :
|
||||
nodeDetail.role_type === 'antagonist' ? 'orange' : 'blue'
|
||||
}>
|
||||
{nodeDetail.role_type === 'protagonist' ? '主角' :
|
||||
nodeDetail.role_type === 'antagonist' ? '反派' : '配角'}
|
||||
</Tag>
|
||||
{nodeDetail.gender && <Tag>{nodeDetail.gender}</Tag>}
|
||||
{nodeDetail.age && <Tag>{nodeDetail.age}岁</Tag>}
|
||||
</Space>
|
||||
</div>
|
||||
|
||||
<Divider />
|
||||
|
||||
{!nodeDetail.is_organization ? (
|
||||
// 角色详情
|
||||
<>
|
||||
{nodeDetail.appearance && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }}>
|
||||
<Descriptions.Item label="外貌特征">{nodeDetail.appearance}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.personality && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="性格特点">{nodeDetail.personality}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.background && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="背景故事">{nodeDetail.background}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.traits && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<strong>特征标签：</strong>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{JSON.parse(nodeDetail.traits).map((trait: string, index: number) => (
|
||||
<Tag key={index} color="blue">{trait}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
// 组织详情
|
||||
<>
|
||||
{nodeDetail.organization_type && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }}>
|
||||
<Descriptions.Item label="组织类型">{nodeDetail.organization_type}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.organization_purpose && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="组织目的">{nodeDetail.organization_purpose}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.location && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="所在地">{nodeDetail.location}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.motto && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="组织格言">{nodeDetail.motto}</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.power_level !== undefined && (
|
||||
<Descriptions column={1} size="small" bordered labelStyle={{ minWidth: 100 }} style={{ marginTop: 8 }}>
|
||||
<Descriptions.Item label="势力等级">{nodeDetail.power_level}/100</Descriptions.Item>
|
||||
</Descriptions>
|
||||
)}
|
||||
{nodeDetail.organization_members && (
|
||||
<div style={{ marginTop: 8 }}>
|
||||
<strong>组织成员：</strong>
|
||||
<div style={{ marginTop: 4 }}>
|
||||
{JSON.parse(nodeDetail.organization_members).map((member: string, index: number) => (
|
||||
<Tag key={index} color="green">{member}</Tag>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</Modal>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
|
||||
Reference in New Issue
Block a user