# relationship-visualizer

**Repository Path**: v587xpt/relationship-visualizer

## Basic Information

- **Project Name**: relationship-visualizer
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-03-19
- **Last Updated**: 2026-03-20

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 人物关系可视化系统

一个基于 Web 的人物关系可视化系统，通过圆形头像节点和动态连线展示人与人之间的关系网络。

## 功能特性

- **人物管理**：添加、编辑、删除人物信息
  - 姓名、性别、出生日期、简介
  - 8 个预设头像可选（彩色卡通风格）
  - 支持自定义头像上传

- **关系管理**：定义人物间的关系
  - 实线连接：父子、母子、兄弟姐妹
  - 虚线连接：朋友、同事

- **可视化展示**：
  - 圆形头像节点展示
  - SVG 连线表示关系
  - 贝塞尔曲线平滑路径

- **交互功能**：
  - 拖拽人物头像自由移动
  - 连线路径自动调整
  - 流畅的动画过渡效果

## 技术栈

- **前端**：React 18 + TypeScript + Vite + Tailwind CSS
- **后端**：Express.js + Node.js
- **数据存储**：JSON 文件（便于部署）

## 项目结构

```
├── client/                 # 前端 React 应用
│   ├── src/
│   │   ├── components/     # React 组件
│   │   ├── pages/          # 页面组件
│   │   ├── hooks/          # 自定义 Hooks
│   │   └── types/          # TypeScript 类型定义
│   └── ...
├── server/                 # 后端 Express 应用
│   ├── routes/             # API 路由
│   ├── data/               # JSON 数据文件
│   └── index.js            # 服务器入口
├── uploads/                # 用户上传的头像文件
└── package.json            # 根目录 package.json
```

## 快速开始

### 环境要求

- Node.js >= 16.0.0
- npm >= 8.0.0

### 安装依赖

```bash
# 安装所有依赖（根目录 + 前端 + 后端）
npm run install:all
```

### 开发模式运行

```bash
# 同时启动前端和后端（根目录下执行）
npm run dev
```

- 前端地址：http://localhost:5173
- 后端地址：http://localhost:3001

### 分别运行

```bash
# 后端
cd server
node index.js

# 前端
cd client
npm run dev
```

## 部署

### 构建前端

```bash
npm run build
```

构建产物在 `client/dist/` 目录。

### 生产环境部署

1. **使用 Express 静态文件服务**

```javascript
// server/index.js 添加
app.use(express.static(path.join(__dirname, '..', 'client', 'dist')));

app.get('*', (req, res) => {
  res.sendFile(path.join(__dirname, '..', 'client', 'dist', 'index.html'));
});
```

2. **设置环境变量**

```bash
export PORT=3001
```

3. **启动服务**

```bash
cd server
node index.js
```

访问 http://localhost:3001

### 使用 PM2 部署

```bash
# 安装 PM2
npm install -g pm2

# 启动服务
cd server
PORT=3001 pm2 start index.js --name relationship-app

# 保存进程列表
pm2 save

# 设置开机自启
pm2 startup
```

### Docker 部署

```dockerfile
# Dockerfile
FROM node:18-alpine

WORKDIR /app

COPY package*.json ./
RUN npm install

COPY . .

EXPOSE 3001

CMD ["node", "server/index.js"]
```

```bash
# 构建镜像
docker build -t relationship-visualizer .

# 运行容器
docker run -d -p 3001:3001 --name relationship-app relationship-visualizer
```

## API 接口

### 人物接口

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/persons | 获取所有人物 |
| GET | /api/persons/:id | 获取单个人物 |
| POST | /api/persons | 创建人物 |
| PUT | /api/persons/:id | 更新人物 |
| DELETE | /api/persons/:id | 删除人物 |

### 关系接口

| 方法 | 路径 | 描述 |
|------|------|------|
| GET | /api/relations | 获取所有关系 |
| POST | /api/relations | 创建关系 |
| DELETE | /api/relations/:id | 删除关系 |

### 上传接口

| 方法 | 路径 | 描述 |
|------|------|------|
| POST | /api/upload | 上传头像图片 |

## 数据模型

### 人物 (Person)

```json
{
  "id": "uuid",
  "name": "姓名",
  "gender": "male | female",
  "birthDate": "YYYY-MM-DD",
  "bio": "简介",
  "avatar": "avatar-1 | avatar-2 | ... | filename.jpg",
  "position": { "x": 100, "y": 200 }
}
```

### 关系 (Relation)

```json
{
  "id": "uuid",
  "fromPersonId": "人物1 ID",
  "toPersonId": "人物2 ID",
  "type": "father-son | mother-son | brother | sister | friend | colleague"
}
```

## 使用说明

1. **添加人物**：进入"管理"页面，点击"添加人物"按钮，填写信息并选择头像
2. **建立关系**：在"管理"页面点击"添加关系"，选择两个人物和关系类型
3. **查看关系图**：切换到"可视化"页面，可以看到所有人物和关系
4. **调整布局**：拖拽人物头像到合适位置，连线会自动调整

## 浏览器兼容性

- Chrome >= 90
- Firefox >= 88
- Safari >= 14
- Edge >= 90

## License

MIT