+
+ }
+ onClick={goBack}
+ >
+ 返回
+
+ 关系图谱
+
+ }
+ extra={
+
+
+ }
+ >
+
+
+ {/* 节点详情 */}
+ {selectedNodeId && nodeDetail && (
+
+ );
+}
diff --git a/frontend/src/pages/Relationships.tsx b/frontend/src/pages/Relationships.tsx
index d37398f..55739b0 100644
--- a/frontend/src/pages/Relationships.tsx
+++ b/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';
@@ -72,7 +72,7 @@ export default function Relationships() {
axios.get('/api/relationships/types'),
axios.get(`/api/characters?project_id=${projectId}`)
]);
-
+
setRelationships(relsRes.data);
setRelationshipTypes(typesRes.data);
setCharacters(charsRes.data.items || []);
@@ -130,7 +130,7 @@ export default function Relationships() {
description?: string;
}) => {
if (!editingRelationship) return;
-
+
try {
await axios.put(`/api/relationships/${editingRelationship.id}`, {
relationship_name: values.relationship_name,
@@ -318,14 +318,22 @@ export default function Relationships() {
}
extra={
- }
- onClick={() => setIsModalOpen(true)}
- size={isMobile ? 'small' : 'middle'}
- >
- {isMobile ? '添加' : '添加关系'}
-
+
+ {/* 节点颜色图例 */}
+
+
+ ●
+ 主角
+
+
+ ●
+ 反派
+
+
+ ●
+ 配角
+
+
+ ●
+ 组织
+
+ |
+ {/* 连线颜色图例 */}
+
+ —
+ 家族
+
+
+ —
+ 敌对
+
+
+ —
+ 职业
+
+
+ —
+ 社交
+
+
+
+
+
+
+
+ )}
+
+
+
+ {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}
+ ))}
+
+