update: 优化关系图谱交互逻辑

frontend/src/pages/RelationshipGraph.tsx

@@ -1,5 +1,5 @@
 import { useState, useEffect, useCallback } from 'react';
-import { useParams } from 'react-router-dom';
+import { useNavigate, useParams } from 'react-router-dom';
 import { Card, Tag, Button, Space, message } from 'antd';
 import { ArrowLeftOutlined } from '@ant-design/icons';
 import axios from 'axios';
@@ -102,15 +102,16 @@ interface CharacterDetail {
 
 export default function RelationshipGraph() {
   const { projectId } = useParams<{ projectId: string }>();
-  const [graphData, setGraphData] = useState<GraphData | null>(null);
-  const [loading, setLoading] = useState(false);
+  const navigate = useNavigate();
+  const [, setGraphData] = useState<GraphData | null>(null);
+  const [, setLoading] = useState(false);
   const [selectedNodeId, setSelectedNodeId] = useState<string | null>(null);
   const [nodeDetail, setNodeDetail] = useState<CharacterDetail | null>(null);
-  const [detailLoading, setDetailLoading] = useState(false);
+  const [, setDetailLoading] = useState(false);
   const [relationshipTypes, setRelationshipTypes] = useState<RelationshipType[]>([]);
 
-  const [nodes, setNodes, onNodesChange] = useNodesState([]);
-  const [edges, setEdges, onEdgesChange] = useEdgesState([]);
+  const [nodes, setNodes, onNodesChange] = useNodesState<Node>([]);
+  const [edges, setEdges, onEdgesChange] = useEdgesState<Edge>([]);
 
   useEffect(() => {
     if (projectId) {
@@ -118,13 +119,6 @@ export default function RelationshipGraph() {
     }
   }, [projectId]);
 
-  // 当 relationshipTypes 加载完成后再加载图数据
-  useEffect(() => {
-    if (projectId && relationshipTypes.length > 0) {
-      loadGraphData();
-    }
-  }, [projectId, relationshipTypes]);
-
   const loadRelationshipTypes = async () => {
     try {
       const res = await axios.get('/api/relationships/types');
@@ -135,7 +129,7 @@ export default function RelationshipGraph() {
   };
 
   // 根据关系名称获取分类颜色
-  const getCategoryColor = (relationshipName: string, isActive: boolean) => {
+  const getCategoryColor = useCallback((relationshipName: string, isActive: boolean) => {
     // 找到对应的关系类型
     const relType = relationshipTypes.find(rt => rt.name === relationshipName);
     const category = relType?.category || 'default';
@@ -151,10 +145,10 @@ export default function RelationshipGraph() {
 
     const colors = categoryColors[category] || categoryColors.default;
     return isActive ? colors.active : colors.inactive;
-  };
+  }, [relationshipTypes]);
 
-  const loadGraphData = async () => {
-    if (!projectId) return;
+  const loadGraphData = useCallback(async () => {
+    if (!projectId || relationshipTypes.length === 0) return;
     setLoading(true);
     try {
       const res = await axios.get(`/api/relationships/graph/${projectId}`);
@@ -234,7 +228,12 @@ export default function RelationshipGraph() {
     } finally {
       setLoading(false);
     }
-  };
+  }, [projectId, relationshipTypes, getCategoryColor, setNodes, setEdges]);
+
+  // 当 relationshipTypes 加载完成后再加载图数据
+  useEffect(() => {
+    void loadGraphData();
+  }, [loadGraphData]);
 
   const loadNodeDetail = async (nodeId: string) => {
     if (!projectId) return;
@@ -267,7 +266,11 @@ export default function RelationshipGraph() {
   };
 
   const goBack = () => {
-    window.close();
+    if (projectId) {
+      navigate(`/project/${projectId}/relationships`);
+      return;
+    }
+    navigate('/projects');
   };
 
   return (

frontend/src/pages/Relationships.tsx

@@ -1,6 +1,6 @@
 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 { useParams, useNavigate } from 'react-router-dom';
+import { Card, Table, Tag, Button, Space, message, Modal, Form, Select, Slider, Input, Tabs, AutoComplete } from 'antd';
 import { PlusOutlined, ApartmentOutlined, UserOutlined, EditOutlined } from '@ant-design/icons';
 import { useStore } from '../store';
 import axios from 'axios';
@@ -35,6 +35,7 @@ interface Character {
 export default function Relationships() {
   const { projectId } = useParams<{ projectId: string }>();
   const { currentProject } = useStore();
+  const navigate = useNavigate();
   const [relationships, setRelationships] = useState<Relationship[]>([]);
   const [relationshipTypes, setRelationshipTypes] = useState<RelationshipType[]>([]);
   const [characters, setCharacters] = useState<Character[]>([]);
@@ -320,7 +321,7 @@ export default function Relationships() {
         extra={
           <Space>
             <Button
-              onClick={() => window.open(`/project/${projectId}/relationships-graph`, '_blank')}
+              onClick={() => projectId && navigate(`/project/${projectId}/relationships-graph`)}
               size={isMobile ? 'small' : 'middle'}
             >
               关系图谱