+
+ }
+ onClick={goBack}
+ >
+ 返回
+
+ 关系图谱
+
+ }
+ extra={
+
+
+ }
+ >
+
+
+ {/* 节点详情 */}
+ {selectedNodeId && nodeDetail && (
+
+ );
+}
diff --git a/frontend/src/pages/Relationships.tsx b/frontend/src/pages/Relationships.tsx
index 9ea0627..55739b0 100644
--- a/frontend/src/pages/Relationships.tsx
+++ b/frontend/src/pages/Relationships.tsx
@@ -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
+ {/* 节点颜色图例 */}
+
+
+ ●
+ 主角
+
+
+ ●
+ 反派
+
+
+ ●
+ 配角
+
+
+ ●
+ 组织
+
+ |
+ {/* 连线颜色图例 */}
+
+ —
+ 家族
+
+
+ —
+ 敌对
+
+
+ —
+ 职业
+
+
+ —
+ 社交
+
+
+
+
+
+
+
+ )}
+
+
+
+ {nodeDetail.is_organization ? '组织详情' : '角色详情'}
+ +
+ {nodeDetail.avatar_url ? (
+ 
+ ) : (
+
+
+ {nodeDetail.is_organization ? '组织' : '角色'}
+
+
+ {nodeDetail.role_type === 'protagonist' ? '主角' :
+ nodeDetail.role_type === 'antagonist' ? '反派' : '配角'}
+
+ {nodeDetail.gender && {nodeDetail.gender} }
+ {nodeDetail.age && {nodeDetail.age}岁 }
+
+
+
+ {!nodeDetail.is_organization ? (
+ <>
+ {nodeDetail.appearance && (
+
+ {nodeDetail.is_organization ? '🏛️' : '👤'}
+
+ )}
+ {nodeDetail.name}
+
+ 外貌特征：
+
+ )}
+ {nodeDetail.personality && (
+ {nodeDetail.appearance}
+
+ 性格特点：
+
+ )}
+ {nodeDetail.background && (
+ {nodeDetail.personality}
+
+ 背景故事：
+
+ )}
+ {nodeDetail.traits && (
+ {nodeDetail.background}
+
+ 特征标签：
+
+ )}
+
+ ) : (
+ <>
+ {nodeDetail.organization_type && (
+
+ {JSON.parse(nodeDetail.traits).map((trait: string, index: number) => (
+ {trait}
+ ))}
+
+
+ 组织类型：
+
+ )}
+ {nodeDetail.organization_purpose && (
+ {nodeDetail.organization_type}
+
+ 组织目的：
+
+ )}
+ {nodeDetail.location && (
+ {nodeDetail.organization_purpose}
+
+ 所在地：
+
+ )}
+ {nodeDetail.motto && (
+ {nodeDetail.location}
+
+ 组织格言：
+
+ )}
+ {nodeDetail.power_level !== undefined && (
+ {nodeDetail.motto}
+
+ 势力等级：
+
+ )}
+ {nodeDetail.organization_members && (
+ {nodeDetail.power_level}/100
+
+ 组织成员：
+
+ )}
+
+ )}
+
+ {JSON.parse(nodeDetail.organization_members).map((member: string, index: number) => (
+ {member}
+ ))}
+
+
- {!graphData && !graphLoading && (
-
- ),
- },
]}
/>
@@ -775,136 +534,6 @@ export default function Relationships() {
-
- {/* 节点详情 Modal */}
-
-
-
- )}
- {graphLoading && (
-
- 加载中...
-
- )}
- {graphData && (
- <>
-
- 节点: {graphData.nodes.length}
- 关系: {graphData.links.length}
-
-
- 提示: 拖拽画布平移 | 滚轮缩放 | 拖拽节点移动 | 点击节点查看详情
-
-
-
- {
- 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' }}
- />
-
-
-
- )}
-
- {nodeDetail.avatar_url ? (
-
- ) : (
-
-
- {nodeDetail.is_organization ? '组织' : '角色'}
-
-
- {nodeDetail.role_type === 'protagonist' ? '主角' :
- nodeDetail.role_type === 'antagonist' ? '反派' : '配角'}
-
- {nodeDetail.gender && {nodeDetail.gender} }
- {nodeDetail.age && {nodeDetail.age}岁 }
-
-
-
-
- {nodeDetail.is_organization ? '🏛️' : '👤'}
-
- )}
- {nodeDetail.name}
-
- 特征标签：
-
- )}
-
- ) : (
- // 组织详情
- <>
- {nodeDetail.organization_type && (
-
- {JSON.parse(nodeDetail.traits).map((trait: string, index: number) => (
- {trait}
- ))}
-
-
- 组织成员：
-
- )}
-
- )}
-
- )}
-
- {JSON.parse(nodeDetail.organization_members).map((member: string, index: number) => (
- {member}
- ))}
-
-