Skip to content

Comments

feat(dashboard): 实现 Web 管理面板#1

Merged
RebornQ merged 9 commits intomainfrom
feat/web-admin-panel
Dec 10, 2025
Merged

feat(dashboard): 实现 Web 管理面板#1
RebornQ merged 9 commits intomainfrom
feat/web-admin-panel

Conversation

@RebornQ
Copy link
Owner

@RebornQ RebornQ commented Dec 10, 2025

No description provided.

   - 新增 .claudeignore 配置文件,定义 AI 上下文分析时的排除规则
   - 将 CLAUDE.md 从简单说明升级为完整的 AI 上下文索引文档
     - 添加系统架构图和请求处理流程图
     - 补充核心组件详细说明和关键技术细节
     - 完善开发规范和安全最佳实践
实现完整的 Web 管理面板功能,包含实时监控、日志查看、配置管理等核心功能。

## 后端扩展

- **统计数据收集系统**:
  - 全局请求统计(总请求数、成功/失败数、字节数)
  - 性能指标追踪(最近 1000 个请求的响应时间)
  - 按路径分组的统计(请求数、字节数、错误数、平均响应时间)
  - 时间窗口统计(每分钟的请求数、错误数、字节数,保留 24 小时数据)

- **SSE 实时日志流**:
  - 日志消息队列和订阅者管理
  - 实时日志广播到所有连接的客户端
  - 支持多个并发订阅者

- **管理面板 API 端点**:
  - `/api/dashboard/stats`:获取统计数据
  - `/api/dashboard/logs/stream`:SSE 实时日志流
  - `/api/dashboard/config`:配置管理(GET/POST)
  - 基于 Bearer Token 的 API 认证

## 前端项目

- **技术栈**:Vue 3 + Vite + TypeScript + Tailwind CSS
- **核心功能**:
  - 实时监控面板(请求统计、性能图表、错误率)
  - 日志查看(实时日志流、过滤、搜索)
  - 配置管理(环境变量编辑、保存)
  - 响应式设计(支持桌面和移动端)

- **组件架构**:
  - `BaseLayout.vue`:基础布局组件(侧边栏、导航)
  - `NotificationContainer.vue`:通知系统
  - `useRealtime.ts`:SSE 实时数据 Composable
  - Pinia 状态管理(全局状态、配置、日志)

## 部署配置

- **多阶段 Docker 构建**:
  - 前端构建阶段(Node.js 20 Alpine)
  - 后端运行阶段(Python 3.12 Slim)
  - 非 root 用户运行(安全最佳实践)

- **CI/CD 工作流**:
  - 自动化测试和构建
  - Docker 镜像构建和推送
  - 多环境部署支持

- **环境变量配置**:
  - `ENABLE_DASHBOARD`:启用/禁用管理面板
  - 完整的配置文档和示例

## 文档和归档

- 新增部署文档(`docs/build-and-deploy.md`)
- 归档 Web 管理面板的 Spec 文档和实现日志
- 更新 Spec 工作流模板格式

## 依赖更新

- 新增 `sse-starlette==2.2.1`(SSE 支持)
- 更新 `.gitignore`(排除 node_modules、个人配置、临时数据)

## 影响范围

- 后端:app.py(+769 行)
- 前端:完整的 Vue 项目(42 个文件)
- 部署:Dockerfile、docker-compose.yml
- 文档:部署指南、Spec 归档
- 配置:环境变量、CI/CD 工作流

## 测试建议

1. 启动服务并访问管理面板(默认端口 8088)
2. 测试实时监控和日志流
3. 验证配置管理功能
4. 测试 Docker 多阶段构建
- 将后端代码迁移到 backend/ 目录,前端代码保留在 frontend/ 目录
- 更新 Dockerfile 支持多阶段构建,使用 pnpm 替代 npm,添加国内镜像源
- 修改 docker-compose.yml 构建上下文配置
- 更新文档中的项目结构和开发指南
- 移除旧的静态文件构建产物
- 在 .gitignore 中添加 static/ 目录忽略规则
- 更新 CLAUDE.md 中的架构图和文件路径说明

项目结构更清晰,构建速度更快,部署更方便。
## 修复内容

### 1. 时区显示错误修复
- **问题**: 请求趋势图表 X 轴时间显示错误(UTC 时间而非本地时间,相差 8 小时)
- **原因**: 后端在 Docker 容器(UTC 时区)中使用格式化字符串存储时间,前端直接显示导致时区错误
- **解决方案**:
  - 后端: 将 time_series 的 time 字段从格式化字符串改为 Unix 时间戳(秒级)
  - 前端: 增强时间格式化函数,支持秒级时间戳自动转换为本地时区显示
  - 类型定义: 更新 TypeScript 类型,time 字段从 string 改为 number

### 2. Monitoring 组件样式一致性修复
- **问题**: 成功请求显示红色背景和红色标签,与 Dashboard 样式不一致
- **原因**: Monitoring 组件错误使用 `request.status.startsWith('2')` 判断,但后端返回 'success'/'error' 字符串
- **解决方案**: 统一使用 `request.status === 'success'` 判断,与 Dashboard 保持一致

### 3. SPA 路由刷新支持
- **问题**: 在浏览器中刷新前端路由(如 /admin/dashboard)时返回 404 错误
- **原因**: 服务器尝试查找对应文件但不存在,缺少 SPA fallback 机制
- **解决方案**: 添加 SPA fallback 逻辑,前端路由路径返回 index.html,静态资源请求保持 404

## 影响范围

- 后端: backend/app.py
  - update_time_window_stats(): 时间戳生成逻辑
  - get_time_filtered_data(): 时间过滤逻辑简化
  - admin_static(): SPA fallback 机制
- 前端: frontend/src/
  - types/index.ts: 类型定义更新
  - views/Dashboard.vue: 时间戳转换修复
  - views/Monitoring.vue: 时间处理和样式判断修复

## 技术细节

- 遵循 KISS 原则: 后端只返回标准时间戳,前端负责本地化显示
- 遵循 DRY 原则: 统一使用 Unix 时间戳,避免重复的时间格式化逻辑
- 国际化友好: 前端自动使用浏览器本地时区,支持全球用户
- SPA 最佳实践: 通过文件扩展名判断区分前端路由和静态资源请求
将原 1166 行的 app.py 拆分为清晰的模块化结构,遵循 SOLID 原则:

**架构变更**:
- 创建 backend/config.py (101 行) - 配置管理模块
- 创建 backend/services/stats.py (270 行) - 统计服务模块
- 创建 backend/services/proxy.py (190 行) - 代理服务模块
- 创建 backend/routers/admin.py (449 行) - Admin 路由模块
- 精简 backend/app.py 至 309 行 (减少 73.5%)

**依赖关系**:
config.py → stats.py → proxy.py/admin.py → app.py
无循环依赖,符合依赖倒置原则 (DIP)

**部署更新**:
- 更新 Dockerfile 以支持新的包结构
- 使用模块方式启动 (python -m backend.app)

**架构优势**:
- ✅ 单一职责原则 (SRP) - 每个模块职责明确
- ✅ 开闭原则 (OCP) - 易于扩展新功能
- ✅ 接口隔离原则 (ISP) - 模块间接口简洁
- ✅ KISS 原则 - 代码简洁易懂
- ✅ DRY 原则 - 避免代码重复

代码行数对比:
- 原 app.py: 1166 行
- 新 app.py: 309 行 (-73.5%)
- 新增模块: 1017 行
- 总计: 1326 行 (+13.7% 模块化开销)
新增两份详细的技术文档,记录模块化重构的完整过程:

**ARCHITECTURE.md**:
- 整体架构图和分层架构说明
- 模块依赖关系和数据流图
- 安全设计和性能优化策略
- 扩展指南和架构原则说明

**REFACTORING_SUMMARY.md**:
- 代码行数对比和文件结构对比
- 架构设计和模块职责划分
- 关键改进点和迁移指南
- 后续优化建议

这些文档为开发者提供了清晰的架构理解和维护指南。
新增 test_imports.py 脚本用于验证重构后的代码结构:

**功能**:
- 检查所有 Python 文件的语法正确性
- 验证模块文件是否存在
- 输出详细的重构总结报告

**验证内容**:
- backend/__init__.py
- backend/config.py
- backend/app.py
- backend/services/stats.py
- backend/services/proxy.py
- backend/routers/admin.py

该脚本可在没有安装依赖的情况下快速验证代码结构的正确性。
@RebornQ RebornQ merged commit 01986d7 into main Dec 10, 2025
1 check failed
@RebornQ RebornQ deleted the feat/web-admin-panel branch December 10, 2025 05:26
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant