Network-Topology-Vulnerability-Analysis-System

KO | EN

gitlite — search

#react #ai #typescript #llm #go #android #machine-learning #rust #linux #macos #java #windows #security #openai

Network-Topology-Vulnerability-Analysis-System

(★ 22)

Network Topology Vulnerability Analysis System

Network-Topology-Vulnerability-Analysis-System Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 网络拓扑与脆弱性评估系统

一个现代化的网络拓扑管理、脆弱性评估和网络补全的可视化平台，基于 React + TypeScript + Vite 构建。

## ✨ 功能特性

### 核心功能
- 🔍 **网络拓扑管理** - 可视化网络结构，支持节点和边的交互式编辑
  - 多拓扑切换和管理（支持多个拓扑实例）
  - 节点和边的拖拽、添加、删除、编辑
  - 属性面板和 JSON 编辑器（支持表单视图和 JSON 视图）
  - 文件导入导出（支持 JSON/XML/CSV 格式）
  - 撤销/重做功能（最多 50 条历史记录）
  - 搜索功能（支持正则表达式）
  - 多选功能（Ctrl/Cmd + 点击，框选）
  - 键盘快捷键支持

- 🛡️ **脆弱性评估** - 基于图论指标的风险评估和攻击路径分析
  - 多维度风险分析（中心性、聚类系数等）
  - 攻击路径识别和可视化
  - 风险等级着色和统计图表
  - 实时风险状态更新

- 🔍 **网络测度** - 自动发现网络设备和连接关系
  - 多种扫描模式（网络扫描、端口扫描、路由追踪等）
  - 实时扫描进度显示
  - 扫描结果自动导入

- 🔗 **网络补全** - AI 驱动的网络优化建议
  - 智能连接建议
  - 风险优化推荐
  - 可视化建议展示

### 系统功能
- 📊 **实时可视化** - 动态图表和交互式数据展示
- 🔐 **安全认证** - JWT 认证和权限管理
- ⚡ **性能优化** - 大规模节点渲染优化、虚拟化滚动
- 🎨 **现代化 UI** - Tailwind CSS + DaisyUI 响应式设计

## 🚀 快速开始

### 环境要求

- Node.js ≥ 18.0.0
- npm ≥ 8.0.0

### 安装和运行

```bash
# 1. 克隆项目
git clone <repository-url>
cd Network-Topology-Vulnerability-Analysis-System

# 2. 安装依赖
npm install

# 3. 配置环境变量
cp env.example .env.local
# 编辑 .env.local 文件，设置你的配置

# 4. 启动开发服务器
npm run dev

# 5. 打开浏览器访问
# http://localhost:5173
```

### 构建生产版本

```bash
# 构建
npm run build

# 预览构建结果
npm run preview
```

## 📁 项目结构

```
Network-Topology-Vulnerability-Analysis-System/
├── components/          # 可复用组件
│   ├── auth/           # 认证相关组件
│   ├── charts/         # 图表组件
│   ├── common/         # 通用组件（对话框、搜索框、Toast 等）
│   ├── icons/          # 图标组件
│   ├── layout/         # 布局组件（Header、Sidebar、Footer）
│   ├── panels/         # 面板组件（属性面板、JSON 编辑器）
│   ├── tables/         # 表格组件
│   └── topology/       # 拓扑图组件（核心可视化组件）
├── hooks/              # 自定义 React Hooks
│   ├── useAuth.ts      # 认证 Hook
│   ├── useErrorHandler.ts  # 错误处理 Hook
│   ├── useHistory.ts   # 撤销/重做 Hook
│   ├── useToast.ts     # Toast 通知 Hook
│   └── ...
├── pages/              # 页面组件
│   ├── TopologyManagementPage.tsx    # 拓扑管理页面
│   ├── VulnerabilityAnalysisPage.tsx # 脆弱性评估页面
│   ├── NetworkScanPage.tsx           # 网络测度页面
│   ├── NetworkCompletionPage.tsx     # 网络补全页面
│   └── SettingsPage.tsx              # 设置页面
├── services/           # API 服务层
│   ├── apiClient.ts    # API 客户端（统一请求处理）
│   ├── topologyService.ts    # 拓扑服务
│   ├── vulnerabilityService.ts # 脆弱性评估服务
│   ├── scanService.ts        # 扫描服务
│   └── ...
├── models/             # 数据模型和适配器
│   ├── adapters/       # 数据适配器（后端数据格式转换）
│   └── types/          # 类型定义
├── config/             # 配置文件
│   ├── apiEndpoints.ts # API 端点配置
│   └── constants.ts    # 常量定义
├── utils/              # 工具函数
│   ├── env.ts          # 环境变量工具
│   ├── errorMessages.ts # 错误消息
│   └── validation.ts   # 验证工具
├── docs/               # 项目文档
├── samples/             # 示例数据
├── types.ts            # TypeScript 类型定义
├── App.tsx             # 主应用组件
└── index.tsx           # 应用入口
```

## ⚙️ 配置说明

### 环境变量

#### API 配置
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `VITE_API_BASE_URL` | string | `""` | 后端 API 基础地址 |
| `VITE_USE_MOCK` | boolean | `true` | 是否使用 Mock 数据 |
| `VITE_WS_BASE_URL` | string | `""` | WebSocket 基础地址（用于实时更新） |

#### 认证配置
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `VITE_ENABLE_AUTH` | boolean | `true` | 是否启用认证功能 |
| `VITE_AUTH_TOKEN_KEY` | string | `"auth_token"` | JWT Token 存储键名 |
| `VITE_TOKEN_EXPIRES_IN` | number | `86400` | Token 过期时间（秒） |

#### 性能配置
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `VITE_MAX_NODES_BEFORE_CLUSTERING` | number | `1000` | 启用聚类优化的节点数阈值 |
| `VITE_CACHE_TTL` | number | `300000` | 请求缓存时间（毫秒，默认 5 分钟） |
| `VITE_DEBOUNCE_DELAY` | number | `300` | 防抖延迟（毫秒，用于搜索等） |

#### 开发配置
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `VITE_DEBUG_MODE` | boolean | `false` | 是否启用调试模式 |
| `VITE_ENABLE_PERFORMANCE_MONITORING` | boolean | `true` | 是否启用性能监控 |

#### 功能开关
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `VITE_ENABLE_REALTIME` | boolean | `true` | 是否启用实时更新（WebSocket） |
| `VITE_ENABLE_EXPORT` | boolean | `true` | 是否启用数据导出功能 |

#### 第三方服务
| 变量名 | 类型 | 默认值 | 说明 |
|--------|------|--------|------|
| `GEMINI_API_KEY` | string | `""` | Gemini API 密钥（用于 AI 分析功能） |

详细配置请参考 [环境配置文档](env.example) 和 [快速开始指南](QUICK_START.md)。

### 数据源切换

项目支持两种数据源模式：

- **Mock 模式** (`VITE_USE_MOCK=true`): 使用本地模拟数据，无需后端
- **API 模式** (`VITE_USE_MOCK=false`): 连接真实后端 API

## 🔧 开发指南

### 技术栈

- **前端框架**: React 19.1.1 + TypeScript 5.8.2
- **构建工具**: Vite 6.2.0
- **可视化**: D3.js 7.9.0
- **图表库**: Recharts 3.2.1
- **样式**: Tailwind CSS + DaisyUI
- **代码规范**: ESLint 9.39.1 + TypeScript ESLint

### 代码规范

- 使用 TypeScript 进行类型检查
- 遵循 React Hooks 最佳实践
- 组件采用函数式组件 + Hooks
- 统一的错误处理和加载状态管理

### 开发命令

```bash
# 开发服务器（默认端口 5173）
npm run dev

# 类型检查
npm run type-check

# 类型检查（监听模式）
npm run type-check:watch

# 代码检查
npm run lint

# 代码检查并自动修复
npm run lint:fix

# 构建生产版本
npm run build

# 预览构建结果
npm run preview
```

### 键盘快捷键

#### 拓扑管理页面
- `Ctrl/Cmd + A` - 全选
- `Ctrl/Cmd + Z` - 撤销
- `Ctrl/Cmd + Shift + Z` 或 `Ctrl/Cmd + Y` - 重做
- `Delete` 或 `Backspace` - 删除选中元素
- `Escape` - 清空选择
- `Ctrl/Cmd + F` - 打开/关闭搜索

## 🔌 后端集成

### API 规范

项目定义了完整的后端 API 规范，包括：

- **认证与授权** - 登录、登出、用户信息获取
- **拓扑管理** - CRUD 操作、多拓扑支持、导入导出
- **网络测度** - 扫描任务创建、状态查询、结果获取
- **脆弱性评估** - 分析任务创建、报告获取
- **网络补全** - 连接建议、优化推荐

详细 API 规范请参考：
- [API 文档](docs/api/BACKEND_API_SPEC.md)
- [后端集成检查清单](docs/api/BACKEND_INTEGRATION_CHECKLIST.md)
- [后端 API 文档](backend_docs/backend_api.md)

### 数据源切换

项目支持两种数据源模式，可通过环境变量 `VITE_USE_MOCK` 切换：

- **Mock 模式** (`VITE_USE_MOCK=true`): 使用本地模拟数据，无需后端，适合开发和演示
- **API 模式** (`VITE_USE_MOCK=false`): 连接真实后端 API，用于生产环境

### 开发代理

开发环境下，Vite 已配置代理，所有 `/api/*` 请求会自动代理到后端服务器（配置在 `vite.config.ts` 中）。

## 📊 功能模块

### 1. 拓扑管理

#### 核心功能
- **多拓扑管理** - 支持多个拓扑实例的切换和管理
- **交互式编辑** - 节点和边的拖拽、添加、删除、编辑
- **属性编辑** - 属性面板支持节点和边的详细属性编辑
- **JSON 编辑器** - 支持表单视图和 JSON 视图的双向同步
- **文件操作** - 支持 JSON/XML/CSV 格式的导入和导出
- **撤销/重做** - 支持最多 50 条历史记录的撤销和重做

#### 交互功能
- **搜索功能** - 支持普通搜索和正则表达式搜索
- **多选功能** - Ctrl/Cmd + 点击多选，支持框选
- **右键菜单** - 节点、边、背景右键菜单
- **键盘快捷键** - 丰富的键盘快捷键支持
- **视图控制** - 鼠标滚轮缩放、拖拽平移

### 2. 脆弱性评估

- **风险评估** - 基于图论指标（中心性、聚类系数等）的风险评估
- **攻击路径** - 攻击路径识别和可视化展示
- **风险图表** - 多维度风险分析图表（风险分布、风险维度等）
- **实时更新** - 实时风险状态更新和可视化
- **漏洞列表** - 详细的漏洞信息列表展示

### 3. 网络测度

- **多种扫描模式** - 网络扫描、端口扫描、路由追踪、主机发现等
- **实时进度** - 实时扫描进度显示和状态更新
- **结果导入** - 扫描结果自动解析和导入到拓扑
- **任务管理** - 扫描任务的状态查询和结果获取

### 4. 网络补全

- **智能建议** - AI 驱动的连接建议和风险优化推荐
- **可视化展示** - 建议的可视化展示和对比
- **一键应用** - 支持一键应用建议到拓扑

## 🚀 部署指南

### 快速部署（Docker - 推荐）

```bash
# 1. 配置环境变量
cp env.example .env.production
vim .env.production  # 编辑配置，特别是 VITE_API_BASE_URL

# 2. 使用部署脚本
chmod +x deploy.sh
./deploy.sh prod

# 3. 访问应用
# http://localhost:8080
```

### 开发环境

1. 克隆项目并安装依赖
   ```bash
   git clone <repository-url>
   cd Network-Topology-Vulnerability-Analysis-System
   npm install
   ```

2. 配置环境变量
   ```bash
   cp env.example .env.local
   # 编辑 .env.local 文件，设置你的配置
   ```

3. 启动开发服务器
   ```bash
   npm run dev
   ```

### 生产环境部署方式

#### 方式1: Docker 部署（推荐）

```bash
# 使用 Docker Compose
docker-compose -f docker-compose.prod.yml up -d

# 或使用部署脚本
./deploy.sh prod
```

#### 方式2: 传统部署

```bash
# 1. 构建生产版本
npm run build

# 2. 部署到 Nginx
sudo cp -r dist/* /usr/share/nginx/html/
sudo cp nginx.conf /etc/nginx/sites-available/network-topology
sudo systemctl reload nginx
```

### 环境变量配置

**重要**: 生产环境必须配置以下变量：

- `VITE_API_BASE_URL` - 后端 API 地址（必需）
- `VITE_USE_MOCK=false` - 必须设置为 false
- 其他配置根据实际需求设置

详细部署文档请参考 [部署文档](DEPLOYMENT.md)。

## 🤝 贡献指南

1. Fork 项目
2. 创建功能分支 (`git checkout -b feature/AmazingFeature`)
3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
4. 推送到分支 (`git push origin feature/AmazingFeature`)
5. 创建 Pull Request

## 📄 许可证

本项目采用 MIT 许可证 - 查看 [LICENSE](LICENSE) 文件了解详情。

## 📚 文档

项目包含完整的文档：

- [快速开始指南](QUICK_START.md) - 快速上手指南和 CORS 修复
- [常见问题](docs/FAQ.md) - 常见问题解答
- [API 文档](docs/api/) - 完整的 API 规范和集成指南
- [优化文档](docs/optimization/) - 性能优化方案和总结
- [故障排除](docs/troubleshooting/) - 常见问题解决方案
- [项目文档](docs/project/) - 项目分析和总结

## 🐛 故障排除

### CORS 问题

如果遇到 CORS 错误，请参考：
- [CORS 修复指南](docs/troubleshooting/CORS_FIX_GUIDE.md)
- [快速开始指南](QUICK_START.md)

### 性能问题

对于大规模节点渲染性能问题，请参考：
- [拓扑图大规模节点显示性能优化方案](docs/拓扑图大规模节点显示性能优化方案.md)
- [性能优化文档](docs/optimization/)

## 📞 支持

如果您遇到问题或有任何建议，请：

1. 查看 [常见问题](docs/FAQ.md)
2. 查看 [故障排除文档](docs/troubleshooting/)
3. 提交 [Issue](../../issues)
4. 联系开发团队

## 🔄 更新日志

### 最新更新
- ✅ 修复拓扑选择状态在页面切换后丢失的问题
- ✅ 支持多拓扑切换和管理
- ✅ 优化搜索和多选功能
- ✅ 增强撤销/重做功能
- ✅ 性能优化和监控

---

**网络拓扑与脆弱性评估系统** - 让网络安全可视化更简单 🛡️

Network-Topology-Vulnerability-Analysis-System

Network-Topology-Vulnerability-Analysis-System Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Network-Topology-Vulnerability-Analysis-System

Network-Topology-Vulnerability-Analysis-System Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README