## 核心变更 ### 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]>
14 KiB
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 修复性能优化- 性能优化重构- 代码重构文档- 文档编写测试- 测试相关部署- 部署和 DevOpsAI集成- 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: 手动创建 (推荐用于首次设置)
- 访问 Plane 项目: http://192.168.1.83:8088/ljwx/projects/7d643366-b3ff-4896-b313-527695a70df1/issues/
- 点击 "New Issue" 创建
- 复制上面对应的 Issue 内容
- 设置标签、优先级、状态
方式 2: 使用 AI 批量生成
我已经创建了完整的 Issue 模板,您可以:
- 让我生成 Plane API 导入脚本
- 批量导入所有 Issues
- 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)
- ✅ Issue #7: 重构 BottomBar 组件
- ✅ Issue #8: 重构 LeftColumn 组件
- ✅ Issue #9: 重构 RightColumn 组件
下周任务 (优先级 Medium)
- Issue #10: 创建 AI 热力图组件
- Issue #12: 创建事件时间线组件
- Issue #13: 创建 AI 行为分析面板
本月目标
- 完成所有组件重构
- 完成 3 个高级 AI 图表
- 准备后端 API 对接
💡 提示
如何让 AI 帮你管理项目
每天开始工作前:
"Claude, 显示今天要做的任务"
完成任务后:
"Claude, 我完成了 Issue #7 BottomBar 重构"
遇到问题时:
"Claude, Issue #10 热力图组件遇到渲染性能问题,帮我分析并创建优化任务"
周报生成:
"Claude, 生成本周项目进度报告"
文档创建时间: 2025-12-07 项目版本: v2.0.0 维护者: AI (Claude) + 深业团队