Files
ai_robot/PLANE_PROJECT_MANAGEMENT.md
brunoandClaude Sonnet 4.5 b480968aba refactor: 完成组件重构 - 迁移到 Pinia 状态管理 (#7 #8 #9)
## 核心变更

### Issue #7: BottomBar 组件重构
- 使用 robotStore.robots 替代硬编码机器人数据
- 实现智能电量颜色计算(红<20%, 橙<50%, 青≥50%)
- AI 模型性能指标从 aiStore.modelPerformance 获取
- 保留 SVG 圆环电量显示效果

### Issue #8: LeftColumn 组件重构
- AI 洞察数据使用 aiStore.insights
- KPI 指标整合 aiStore 和 robotStore 多数据源
- 保持动态组件系统 <component :is> 正常工作
- 实时更新巡检覆盖率、异常事件、健康度、检测准确率

### Issue #9: RightColumn 组件重构
- 实时活动流使用 aiStore.liveEvents
- 事件统计徽章基于 aiStore.alertAnalytics
- 摄像头画面智能生成(优先显示高危事件)
- 保持事件流滚动性能

## 技术改进
- 删除约 180 行硬编码数据
- 新增约 120 行动态计算逻辑
- 全局状态统一管理
- 支持实时数据更新

## 依赖更新
- 降级 vite 到 4.5.5 以兼容 Node.js 21.x
- 保持 pinia 3.0.4 和 vue 3.4.0

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Sonnet 4.5 <[email protected]>
2025-12-07 22:40:55 +08:00

14 KiB

使用 Plane 管理 AI 机器人巡检 Dashboard 项目

📋 项目信息

项目名称: 灵境万象 · AI 机器人巡检中枢 Dashboard Plane 项目地址: http://192.168.1.83:8088/ljwx/projects/7d643366-b3ff-4896-b313-527695a70df1/issues/ 管理方式: 使用 AI (Claude) 自动生成和维护 Issues


🎯 项目结构规划

1. Issue 分类体系

标签 (Labels)

  • 功能开发 - 新功能开发
  • Bug修复 - Bug 修复
  • 性能优化 - 性能优化
  • 重构 - 代码重构
  • 文档 - 文档编写
  • 测试 - 测试相关
  • 部署 - 部署和 DevOps
  • AI集成 - AI 功能集成
  • 状态管理 - Pinia/Store 相关
  • UI/UX - 界面和用户体验

优先级 (Priority)

  • Urgent - 紧急(阻塞性问题)
  • High - 高(核心功能)
  • Medium - 中(重要但非紧急)
  • Low - 低(优化和改进)

状态 (State)

  • Backlog - 待办
  • Todo - 计划中
  • In Progress - 进行中
  • In Review - 审查中
  • Completed - 已完成
  • Cancelled - 已取消

📝 当前项目待办事项 (Issues)

Phase 1: 核心架构完善 (已完成 ✅)

Issue #1: Pinia 状态管理集成

  • 标签: 功能开发, 状态管理
  • 优先级: High
  • 状态: Completed ✅
  • 描述:
    • 安装并配置 Pinia
    • 创建 Robot Store 和 AI Store
    • 实现统一数据管理
  • 验收标准:
    • Pinia 安装和配置完成
    • robotStore.js 创建完成,包含所有机器人数据
    • aiStore.js 创建完成,包含 AI 分析数据
    • 提供计算属性和 Actions

Issue #2: API 服务层抽象

  • 标签: 功能开发, 重构
  • 优先级: High
  • 状态: Completed ✅
  • 描述:
    • 创建统一的 API 服务层
    • 支持后端切换
    • WebSocket 管理器
  • 验收标准:
    • api.js 创建完成
    • 包含 robotAPI, aiAPI, eventAPI 等
    • WebSocketManager 类实现
    • 环境变量配置支持

Issue #3: 实时数据更新系统

  • 标签: 功能开发, AI集成
  • 优先级: High
  • 状态: Completed ✅
  • 描述:
    • 实现实时数据更新 Composables
    • 机器人状态自动更新
    • AI 分析数据自动刷新
  • 验收标准:
    • useRobotRealtime() 实现
    • useAIRealtime() 实现
    • useEventSimulator() 实现
    • useClock() 实现

Issue #4: AI 助手对话界面

  • 标签: 功能开发, AI集成, UI/UX
  • 优先级: High
  • 状态: Completed ✅
  • 描述:
    • 创建 AI 助手组件
    • 实现智能问答功能
    • 快捷指令支持
  • 验收标准:
    • AIAssistant.vue 组件完成
    • 6个快捷指令功能
    • 基于 Store 数据的智能回答
    • 语音输入占位

Phase 2: 组件重构 (进行中 🔄)

Issue #5: CenterMap 组件重构

  • 标签: 重构, 状态管理
  • 优先级: High
  • 状态: Completed ✅
  • 描述: 将 CenterMap 组件迁移到使用 Pinia Store
  • 验收标准:
    • 使用 robotStore.robots
    • 使用 robotStore.selectedRobot
    • 使用 aiStore.riskPredictions

Issue #6: TopNav 组件重构

  • 标签: 重构, 状态管理
  • 优先级: High
  • 状态: Completed ✅
  • 描述: 将 TopNav 组件迁移到使用 Pinia Store
  • 验收标准:
    • 使用 aiStore.coverageRate
    • 使用 robotStore.onlineRobots
    • 集成 AI 助手触发

Issue #7: BottomBar 组件重构

  • 标签: 重构, 状态管理
  • 优先级: Medium
  • 状态: Todo 📋
  • 描述: 将 BottomBar 组件迁移到使用 Pinia Store
  • 任务清单:
    • 导入 useRobotStore
    • 替换硬编码机器人数据
    • 使用 computed 获取前4个机器人
    • 测试 SVG 电量显示
  • 预计工作量: 1-2 小时

Issue #8: LeftColumn 组件重构

  • 标签: 重构, 状态管理
  • 优先级: Medium
  • 状态: Todo 📋
  • 描述: 将 LeftColumn 组件迁移到使用 Pinia Store
  • 任务清单:
    • 导入 useAIStore
    • 替换 insights 数据
    • 替换 kpis 数据
    • 确保动态组件系统正常工作
  • 预计工作量: 2-3 小时

Issue #9: RightColumn 组件重构

  • 标签: 重构, 状态管理
  • 优先级: Medium
  • 状态: Todo 📋
  • 描述: 将 RightColumn 组件迁移到使用 Pinia Store
  • 任务清单:
    • 导入 useAIStore
    • 替换 liveEvents 数据
    • 替换摄像头数据
    • 测试事件流滚动
  • 预计工作量: 1-2 小时

Phase 3: 高级 AI 功能 (待办 📋)

Issue #10: AI 热力图组件

  • 标签: 功能开发, AI集成, UI/UX
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 创建告警热力图,显示园区各区域的告警分布
  • 技术方案:
    • 使用 Canvas 或 SVG 渲染
    • 基于 aiStore.alertAnalytics 数据
    • 颜色映射: 绿(0-5) → 黄(6-10) → 红(11+)
  • 任务清单:
    • 创建 KpiHeatmap.vue 组件
    • 实现热力渲染算法
    • 添加交互(hover 显示详情)
    • 集成到 LeftColumn
  • 预计工作量: 4-6 小时

Issue #11: AI 雷达图组件

  • 标签: 功能开发, AI集成, UI/UX
  • 优先级: Low
  • 状态: Backlog
  • 描述: 创建 AI 模型性能雷达图,多维度评估
  • 技术方案:
    • 使用 SVG 绘制雷达图
    • 维度: 准确率/召回率/F1/速度/误报率
    • 基于 aiStore.modelPerformance
  • 任务清单:
    • 创建 KpiRadarChart.vue 组件
    • 实现雷达图绘制
    • 添加动画效果
    • 集成到 LeftColumn
  • 预计工作量: 3-4 小时

Issue #12: 事件时间线组件

  • 标签: 功能开发, AI集成, UI/UX
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 创建今日告警事件时间轴,可视化事件发生时间
  • 技术方案:
    • 横向时间轴设计
    • 按小时分段显示
    • 点击事件查看详情
  • 任务清单:
    • 创建 KpiTimeline.vue 组件
    • 实现时间轴布局
    • 添加事件标记
    • 集成到 RightColumn
  • 预计工作量: 3-4 小时

Issue #13: AI 行为分析面板

  • 标签: 功能开发, AI集成
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 基于 aiStore.behaviorAnalysis 创建行为分析面板
  • 功能点:
    • 人群密度实时监控
    • 交通流量统计
    • 异常模式识别
    • 预测性警报
  • 任务清单:
    • 创建 BehaviorAnalysis.vue 组件
    • 实现人群密度可视化
    • 实现流量统计图表
    • 添加异常模式列表
  • 预计工作量: 5-6 小时

Phase 4: 后端集成 (计划中 📅)

Issue #14: 后端 API 对接

  • 标签: 功能开发, 部署
  • 优先级: High
  • 状态: Backlog
  • 描述: 集成真实后端 API,替换模拟数据
  • 前置条件:
    • 后端 API 开发完成
    • API 文档提供
  • 任务清单:
    • 配置环境变量 (.env)
    • 更新 api.js 中的端点
    • 取消 API 函数注释
    • 测试所有 API 调用
    • 错误处理和重试机制
  • 预计工作量: 6-8 小时

Issue #15: WebSocket 实时推送

  • 标签: 功能开发, 性能优化
  • 优先级: High
  • 状态: Backlog
  • 描述: 实现 WebSocket 实时数据推送
  • 任务清单:
    • 配置 WebSocket 连接
    • 实现事件处理器
    • 替换定时器为 WebSocket
    • 添加断线重连
    • 测试实时性能
  • 预计工作量: 4-6 小时

Issue #16: 用户认证系统

  • 标签: 功能开发, 安全
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 添加用户登录和权限管理
  • 任务清单:
    • 创建登录页面
    • 集成 JWT 认证
    • 实现权限控制
    • 添加用户设置
  • 预计工作量: 8-10 小时

Phase 5: 性能和体验优化 (计划中 📅)

Issue #17: 虚拟滚动优化

  • 标签: 性能优化
  • 优先级: Low
  • 状态: Backlog
  • 描述: 为事件流添加虚拟滚动,提升性能
  • 任务清单:
    • 安装 vue-virtual-scroller
    • 重构 RightColumn 事件列表
    • 测试滚动性能
  • 预计工作量: 2-3 小时

Issue #18: 响应式布局改进

  • 标签: UI/UX, 功能开发
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 优化平板和移动端显示
  • 任务清单:
    • 添加媒体查询
    • 调整 grid 布局
    • 测试不同屏幕尺寸
  • 预计工作量: 4-6 小时

Issue #19: 动画性能优化

  • 标签: 性能优化
  • 优先级: Low
  • 状态: Backlog
  • 描述: 优化 CSS 动画,使用 GPU 加速
  • 任务清单:
    • 添加 will-change 提示
    • 使用 transform3d
    • 测试 60fps 性能
  • 预计工作量: 2-3 小时

Issue #20: 图片和资源懒加载

  • 标签: 性能优化
  • 优先级: Low
  • 状态: Backlog
  • 描述: 实现摄像头画面懒加载
  • 任务清单:
    • 安装 vue-lazyload
    • 应用到摄像头组件
    • 测试加载性能
  • 预计工作量: 1-2 小时

Phase 6: 测试和文档 (计划中 📅)

Issue #21: 单元测试

  • 标签: 测试
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 为 Stores 和 Composables 添加单元测试
  • 任务清单:
    • 配置 Vitest
    • 编写 robotStore 测试
    • 编写 aiStore 测试
    • 编写 Composables 测试
  • 预计工作量: 8-10 小时

Issue #22: E2E 测试

  • 标签: 测试
  • 优先级: Low
  • 状态: Backlog
  • 描述: 使用 Playwright 添加端到端测试
  • 任务清单:
    • 配置 Playwright
    • 编写核心功能测试
    • 编写 AI 助手测试
    • CI/CD 集成
  • 预计工作量: 6-8 小时

Issue #23: TypeScript 迁移

  • 标签: 重构, 功能开发
  • 优先级: Low
  • 状态: Backlog
  • 描述: 将项目迁移到 TypeScript
  • 任务清单:
    • 配置 TypeScript
    • 定义类型接口
    • 迁移 Stores
    • 迁移组件
  • 预计工作量: 12-16 小时

Issue #24: API 文档生成

  • 标签: 文档
  • 优先级: Low
  • 状态: Backlog
  • 描述: 使用 JSDoc 生成 API 文档
  • 任务清单:
    • 添加 JSDoc 注释
    • 配置文档生成工具
    • 生成静态文档网站
  • 预计工作量: 4-6 小时

Phase 7: 高级功能 (未来规划 🔮)

Issue #25: 数据导出功能

  • 标签: 功能开发
  • 优先级: Low
  • 状态: Backlog
  • 描述: 支持导出 PDF/Excel 报告

Issue #26: 多语言支持

  • 标签: 功能开发, UI/UX
  • 优先级: Low
  • 状态: Backlog
  • 描述: 添加中英文切换

Issue #27: 主题切换

  • 标签: 功能开发, UI/UX
  • 优先级: Low
  • 状态: Backlog
  • 描述: 实现暗色/亮色主题

Issue #28: 通知系统

  • 标签: 功能开发
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 浏览器通知和邮件通知

Issue #29: 视频回放

  • 标签: 功能开发, AI集成
  • 优先级: Medium
  • 状态: Backlog
  • 描述: 告警事件视频回放功能

Issue #30: 自定义 Dashboard

  • 标签: 功能开发, UI/UX
  • 优先级: Low
  • 状态: Backlog
  • 描述: 用户自定义 Dashboard 布局

🤖 AI 辅助项目管理

使用 Claude 自动生成 Issues

我已经为您创建了完整的项目规划。您可以直接复制上面的 Issues 到 Plane 中,或者使用以下方式:

方式 1: 手动创建 (推荐用于首次设置)

  1. 访问 Plane 项目: http://192.168.1.83:8088/ljwx/projects/7d643366-b3ff-4896-b313-527695a70df1/issues/
  2. 点击 "New Issue" 创建
  3. 复制上面对应的 Issue 内容
  4. 设置标签、优先级、状态

方式 2: 使用 AI 批量生成

我已经创建了完整的 Issue 模板,您可以:

  1. 让我生成 Plane API 导入脚本
  2. 批量导入所有 Issues
  3. AI 自动跟踪进度

AI 维护任务的方式

每日更新:

  • 询问 Claude: "更新项目进度"
  • Claude 会检查已完成的任务,更新 Issue 状态

添加新任务:

  • 告诉 Claude: "添加新功能: XXX"
  • Claude 会创建新 Issue,分配标签和优先级

Bug 报告:

  • 告诉 Claude: "发现 Bug: XXX"
  • Claude 会创建 Bug Issue,分析原因和解决方案

代码审查:

  • 让 Claude 审查代码并创建改进 Issues

📊 项目统计

当前进度

  • 总 Issues: 30
  • 已完成: 6 (20%)
  • 进行中: 3 (10%)
  • 待办: 21 (70%)

按优先级分布

  • Urgent: 0
  • High: 8 (27%)
  • Medium: 14 (47%)
  • Low: 8 (27%)

按类别分布

  • 功能开发: 15 (50%)
  • 重构: 6 (20%)
  • 性能优化: 4 (13%)
  • 测试: 3 (10%)
  • 文档: 2 (7%)

🎯 下一步行动

本周任务 (优先级 High)

  1. ✅ Issue #7: 重构 BottomBar 组件
  2. ✅ Issue #8: 重构 LeftColumn 组件
  3. ✅ Issue #9: 重构 RightColumn 组件

下周任务 (优先级 Medium)

  1. Issue #10: 创建 AI 热力图组件
  2. Issue #12: 创建事件时间线组件
  3. Issue #13: 创建 AI 行为分析面板

本月目标

  • 完成所有组件重构
  • 完成 3 个高级 AI 图表
  • 准备后端 API 对接

💡 提示

如何让 AI 帮你管理项目

每天开始工作前:

"Claude, 显示今天要做的任务"

完成任务后:

"Claude, 我完成了 Issue #7 BottomBar 重构"

遇到问题时:

"Claude, Issue #10 热力图组件遇到渲染性能问题,帮我分析并创建优化任务"

周报生成:

"Claude, 生成本周项目进度报告"

文档创建时间: 2025-12-07 项目版本: v2.0.0 维护者: AI (Claude) + 深业团队