Merge pull request #96 from wuchengji/feature/relationalGraph

feat：添加了关系图谱功能

frontend/package-lock.json

@@ -6,16 +6,19 @@
   "packages": {
     "": {
       "name": "frontend",
-      "version": "1.3.5",
+      "version": "1.3.6",
       "dependencies": {
         "@ant-design/icons": "^5.6.1",
         "@dnd-kit/core": "^6.3.1",
         "@dnd-kit/sortable": "^9.0.0",
         "@dnd-kit/utilities": "^3.2.2",
         "@types/canvas-confetti": "^1.9.0",
+        "@types/dagre": "^0.7.54",
+        "@xyflow/react": "^12.10.1",
         "antd": "^5.27.6",
         "axios": "^1.12.2",
         "canvas-confetti": "^1.9.4",
+        "dagre": "^0.8.5",
         "dayjs": "^1.11.13",
         "react": "^18.3.1",
         "react-diff-viewer-continued": "^3.4.0",
@@ -1860,6 +1863,61 @@
       "integrity": "sha512-aBGj/dULrimR1XDZLtG9JwxX1b4HPRF6CX9Yfwh3NvstZEm1ZL7RBnel4keCPSqs1ANRu1u2Aoz9R+VmtjYuTg==",
       "license": "MIT"
     },
+    "node_modules/@types/d3-color": {
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/@types/d3-color/-/d3-color-3.1.3.tgz",
+      "integrity": "sha512-iO90scth9WAbmgv7ogoq57O9YpKmFBbmoEoCHDB2xMBY0+/KVrqAaCDyCE16dUspeOvIxFFRI+0sEtqDqy2b4A==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-drag": {
+      "version": "3.0.7",
+      "resolved": "https://registry.npmmirror.com/@types/d3-drag/-/d3-drag-3.0.7.tgz",
+      "integrity": "sha512-HE3jVKlzU9AaMazNufooRJ5ZpWmLIoc90A37WU2JMmeq28w1FQqCZswHZ3xR+SuxYftzHq6WU6KJHvqxKzTxxQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-interpolate": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmmirror.com/@types/d3-interpolate/-/d3-interpolate-3.0.4.tgz",
+      "integrity": "sha512-mgLPETlrpVV1YRJIglr4Ez47g7Yxjl1lj7YKsiMCb27VJH9W8NVM6Bb9d8kkpG/uAQS5AmbA48q2IAolKKo1MA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-color": "*"
+      }
+    },
+    "node_modules/@types/d3-selection": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/@types/d3-selection/-/d3-selection-3.0.11.tgz",
+      "integrity": "sha512-bhAXu23DJWsrI45xafYpkQ4NtcKMwWnAC/vKrd2l+nxMFuvOT3XMYTIj2opv8vq8AO5Yh7Qac/nSeP/3zjTK0w==",
+      "license": "MIT"
+    },
+    "node_modules/@types/d3-transition": {
+      "version": "3.0.9",
+      "resolved": "https://registry.npmmirror.com/@types/d3-transition/-/d3-transition-3.0.9.tgz",
+      "integrity": "sha512-uZS5shfxzO3rGlu0cC3bjmMFKsXv+SmZZcgp0KD22ts4uGXp5EVYGzu/0YdwZeKmddhcAccYtREJKkPfXkZuCg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/d3-zoom": {
+      "version": "3.0.8",
+      "resolved": "https://registry.npmmirror.com/@types/d3-zoom/-/d3-zoom-3.0.8.tgz",
+      "integrity": "sha512-iqMC4/YlFCSlO8+2Ii1GGGliCAY4XdeG748w5vQUbevlbDu0zSjH/+jojorQVBK/se0j6DUFNPBGSqD3YWYnDw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-interpolate": "*",
+        "@types/d3-selection": "*"
+      }
+    },
+    "node_modules/@types/dagre": {
+      "version": "0.7.54",
+      "resolved": "https://registry.npmmirror.com/@types/dagre/-/dagre-0.7.54.tgz",
+      "integrity": "sha512-QjcRY+adGbYvBFS7cwv5txhVIwX1XXIUswWl+kSQTbI6NjgZydrZkEKX/etzVd7i+bCsCb40Z/xlBY5eoFuvWQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/estree": {
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
@@ -2208,6 +2266,66 @@
         "vite": "^4.2.0 || ^5.0.0 || ^6.0.0 || ^7.0.0"
       }
     },
+    "node_modules/@xyflow/react": {
+      "version": "12.10.1",
+      "resolved": "https://registry.npmmirror.com/@xyflow/react/-/react-12.10.1.tgz",
+      "integrity": "sha512-5eSWtIK/+rkldOuFbOOz44CRgQRjtS9v5nufk77DV+XBnfCGL9HAQ8PG00o2ZYKqkEU/Ak6wrKC95Tu+2zuK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@xyflow/system": "0.0.75",
+        "classcat": "^5.0.3",
+        "zustand": "^4.4.0"
+      },
+      "peerDependencies": {
+        "react": ">=17",
+        "react-dom": ">=17"
+      }
+    },
+    "node_modules/@xyflow/react/node_modules/zustand": {
+      "version": "4.5.7",
+      "resolved": "https://registry.npmmirror.com/zustand/-/zustand-4.5.7.tgz",
+      "integrity": "sha512-CHOUy7mu3lbD6o6LJLfllpjkzhHXSBlX8B9+qPddUsIfeF5S/UZ5q0kmCsnRqT1UHFQZchNFDDzMbQsuesHWlw==",
+      "license": "MIT",
+      "dependencies": {
+        "use-sync-external-store": "^1.2.2"
+      },
+      "engines": {
+        "node": ">=12.7.0"
+      },
+      "peerDependencies": {
+        "@types/react": ">=16.8",
+        "immer": ">=9.0.6",
+        "react": ">=16.8"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "immer": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@xyflow/system": {
+      "version": "0.0.75",
+      "resolved": "https://registry.npmmirror.com/@xyflow/system/-/system-0.0.75.tgz",
+      "integrity": "sha512-iXs+AGFLi8w/VlAoc/iSxk+CxfT6o64Uw/k0CKASOPqjqz6E0rb5jFZgJtXGZCpfQI6OQpu5EnumP5fGxQheaQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/d3-drag": "^3.0.7",
+        "@types/d3-interpolate": "^3.0.4",
+        "@types/d3-selection": "^3.0.10",
+        "@types/d3-transition": "^3.0.8",
+        "@types/d3-zoom": "^3.0.8",
+        "d3-drag": "^3.0.0",
+        "d3-interpolate": "^3.0.1",
+        "d3-selection": "^3.0.0",
+        "d3-zoom": "^3.0.0"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.15.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
@@ -2500,6 +2618,12 @@
         "url": "https://github.com/chalk/chalk?sponsor=1"
       }
     },
+    "node_modules/classcat": {
+      "version": "5.0.5",
+      "resolved": "https://registry.npmmirror.com/classcat/-/classcat-5.0.5.tgz",
+      "integrity": "sha512-JhZUT7JFcQy/EzW605k/ktHtncoo9vnyW/2GspNYwFlN1C/WmjuV/xtS04e9SOkL2sTdw0VAZ2UGCcQ9lR6p6w==",
+      "license": "MIT"
+    },
     "node_modules/classnames": {
       "version": "2.5.1",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz",
@@ -2613,6 +2737,121 @@
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
       "license": "MIT"
     },
+    "node_modules/d3-color": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/d3-color/-/d3-color-3.1.0.tgz",
+      "integrity": "sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-dispatch": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-dispatch/-/d3-dispatch-3.0.1.tgz",
+      "integrity": "sha512-rzUyPU/S7rwUflMyLc1ETDeBj0NRuHKKAcvukozwhshr6g6c5d8zh4c2gQjY2bZ0dXeGLWc1PF174P2tVvKhfg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-drag": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-drag/-/d3-drag-3.0.0.tgz",
+      "integrity": "sha512-pWbUJLdETVA8lQNJecMxoXfH6x+mO2UQo8rSmZ+QqxcbyA3hfeprFgIT//HW2nlHChWeIIMwS2Fq+gEARkhTkg==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-selection": "3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-ease": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-ease/-/d3-ease-3.0.1.tgz",
+      "integrity": "sha512-wR/XK3D3XcLIZwpbvQwQ5fK+8Ykds1ip7A2Txe0yxncXSdq1L9skcG7blcedkOX+ZcgxGAmLX1FrRGbADwzi0w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-interpolate": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz",
+      "integrity": "sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-selection": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-selection/-/d3-selection-3.0.0.tgz",
+      "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-timer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-timer/-/d3-timer-3.0.1.tgz",
+      "integrity": "sha512-ndfJ/JxxMd3nw31uyKoY2naivF+r29V+Lc0svZxe1JvvIRmi8hUsrMvdOwgS1o6uBHmiz91geQ0ylPP0aj1VUA==",
+      "license": "ISC",
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/d3-transition": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmmirror.com/d3-transition/-/d3-transition-3.0.1.tgz",
+      "integrity": "sha512-ApKvfjsSR6tg06xrL434C0WydLr7JewBB3V+/39RMHsaXTOG0zmt/OAXeng5M5LBm0ojmxJrpomQVZ1aPvBL4w==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-color": "1 - 3",
+        "d3-dispatch": "1 - 3",
+        "d3-ease": "1 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-timer": "1 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "peerDependencies": {
+        "d3-selection": "2 - 3"
+      }
+    },
+    "node_modules/d3-zoom": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmmirror.com/d3-zoom/-/d3-zoom-3.0.0.tgz",
+      "integrity": "sha512-b8AmV3kfQaqWAuacbPuNbL6vahnOJflOhexLzMMNLga62+/nh0JzvJ0aO/5a5MVgUFGS7Hu1P9P03o3fJkDCyw==",
+      "license": "ISC",
+      "dependencies": {
+        "d3-dispatch": "1 - 3",
+        "d3-drag": "2 - 3",
+        "d3-interpolate": "1 - 3",
+        "d3-selection": "2 - 3",
+        "d3-transition": "2 - 3"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/dagre": {
+      "version": "0.8.5",
+      "resolved": "https://registry.npmmirror.com/dagre/-/dagre-0.8.5.tgz",
+      "integrity": "sha512-/aTqmnRta7x7MCCpExk7HQL2O4owCT2h8NT//9I1OQ9vt29Pa0BzSAkR5lwFUcQ7491yVi/3CXU9jQ5o0Mn2Sw==",
+      "license": "MIT",
+      "dependencies": {
+        "graphlib": "^2.1.8",
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/dayjs": {
       "version": "1.11.19",
       "resolved": "https://registry.npmjs.org/dayjs/-/dayjs-1.11.19.tgz",
@@ -3218,6 +3457,15 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/graphlib": {
+      "version": "2.1.8",
+      "resolved": "https://registry.npmmirror.com/graphlib/-/graphlib-2.1.8.tgz",
+      "integrity": "sha512-jcLLfkpoVGmH7/InMC/1hIvOPSUh38oJtGhvrOFGzioE1DZ+0YW16RgmOJhHiuWTvGiJQ9Z1Ik43JvkRPRvE+A==",
+      "license": "MIT",
+      "dependencies": {
+        "lodash": "^4.17.15"
+      }
+    },
     "node_modules/has-flag": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
@@ -3480,6 +3728,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/lodash": {
+      "version": "4.17.23",
+      "resolved": "https://registry.npmmirror.com/lodash/-/lodash-4.17.23.tgz",
+      "integrity": "sha512-LgVTMpQtIopCi79SJeDiP0TfWi5CNEc/L/aRdTh3yIvmZXTnheWpKjSZhnvMl8iXbC1tFg9gdHHDMLoV7CnG+w==",
+      "license": "MIT"
+    },
     "node_modules/lodash.merge": {
       "version": "4.6.2",
       "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
@@ -4861,6 +5115,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/use-sync-external-store": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz",
+      "integrity": "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/vite": {
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/vite/-/vite-7.3.1.tgz",

frontend/package.json

@@ -15,9 +15,12 @@
     "@dnd-kit/sortable": "^9.0.0",
     "@dnd-kit/utilities": "^3.2.2",
     "@types/canvas-confetti": "^1.9.0",
+    "@types/dagre": "^0.7.54",
+    "@xyflow/react": "^12.10.1",
     "antd": "^5.27.6",
     "axios": "^1.12.2",
     "canvas-confetti": "^1.9.4",
+    "dagre": "^0.8.5",
     "dayjs": "^1.11.13",
     "react": "^18.3.1",
     "react-diff-viewer-continued": "^3.4.0",

frontend/src/App.tsx

@@ -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 />} />

frontend/src/pages/RelationshipGraph.tsx

@@ -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>
+  );
+}

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 } from 'antd';
+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';
@@ -318,6 +318,13 @@ export default function Relationships() {
           </Space>
         }
         extra={
+          <Space>
+            <Button
+              onClick={() => window.open(`/project/${projectId}/relationships-graph`, '_blank')}
+              size={isMobile ? 'small' : 'middle'}
+            >
+              关系图谱
+            </Button>
             <Button
               type="primary"
               icon={<PlusOutlined />}
@@ -326,6 +333,7 @@ export default function Relationships() {
             >
               {isMobile ? '添加' : '添加关系'}
             </Button>
+          </Space>
         }
       >
         <Tabs
@@ -352,7 +360,7 @@ export default function Relationships() {
                       setCurrentPage(page);
                       if (size !== pageSize) {
                         setPageSize(size);
-                        setCurrentPage(1); // 切换每页条数时重置到第一页
+                        setCurrentPage(1);
                       }
                     },
                     onShowSizeChange: (_, size) => {