feat：打开新的页面展示关系图谱，并且添加节点和连线配色

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<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>
     </>
   );