← 返回知识库 # MCP Hub 大屏维修清单 ## 现有环境 - 服务：5号服务器 kanban_mcp_hub.py，端口 18901 - 前端：单页 HTML + SSE 实时流 - 反代：nginx → localhost:18901 ## 问题点 ### P0（影响使用） | # | 问题 | 原因 | 修法 | |:-:|:-----|:-----|:------| | 1 | SSE 流经 nginx 被缓冲，页面"连接中..."不更新 | nginx 默认缓冲 SSE 响应 | nginx 加 `proxy_buffering off;` | | 2 | 中文字符 + emoji（🐜🟢🟡）在部分浏览器显示错位 | emoji 宽度不统一，`agent-name` 字号 16px 偏小 | `agent-name` 字号改 18px，加 `white-space: nowrap` | ### P1（视觉优化） | # | 问题 | 原因 | 修法 | |:-:|:-----|:-----|:------| | 3 | 事件日志时间列 `min-width:50px` 太窄，中文时间溢出 | 50px 装不下 `15:30:45` | 改 `min-width:75px` | | 4 | 无事件时只显示一行小字"等待蚂蚁上报事件"，不明显 | 纯文本无背景区分 | 加背景色/边框，或显示 SVG 动效 | | 5 | AI 状态闪烁动画只闪一次，后续事件无反馈 | `classList.remove` + `offsetWidth` 有时不触发重排 | 改用 `requestAnimationFrame` 触发重绘 | | 6 | 卡片 hover 效果在移动端/touch 设备无效 | `:hover` 无触屏回退 | 加 `@media (hover: hover)` 区分 | ### P2（体验提升） | # | 问题 | 原因 | 修法 | |:-:|:-----|:-----|:------| | 7 | 连接断开后不自动重连 | EventSource 默认重连但浏览器行为不一致 | 加 `evtSource.close()` + `setTimeout` 显式重连 | | 8 | 卡片 `event-log` 滚动条与内容重叠 | 系统默认滚动条样式与深色主题不搭 | 加自定义滚动条 CSS（`::-webkit-scrollbar`） | | 9 | 无任何数据时页面空白感强 | 只有一行文字 | 加骨架屏动画或蚂蚁图标 | ## 验收标准 - [ ] SSE 连接稳定，页面 5 秒内显示"已连接" - [ ] 中文 + emoji 不溢出、不错位 - [ ] 事件日志时间列完整显示 - [ ] 无事件状态有明显占位提示 - [ ] 断线后 10 秒内自动重连 - [ ] 深色主题滚动条不突兀