🐛 Content Library 预览功能导致页面无响应 (Page Unresponsive)

[kubbot]

🔍 问题描述

在 /content-library 页面中，当鼠标悬浮在文档条目上触发左侧预览 (Preview) 功能时，等待一段时间后出现 Page Unresponsive 错误，导致整个页面卡死。

📍 复现步骤

1. 访问 /content-library 页面
2. 鼠标悬浮在任意文档条目上
3. 左侧弹出预览窗口
4. 等待一段时间（具体时间待确认）
5. 页面变得无响应，可能出现浏览器"页面无响应"提示

🎯 预期行为

• 预览功能应该快速加载并流畅显示
• 用户交互应该保持响应
• 内存使用应该保持在合理范围内

🔧 可能的根本原因分析

1. 内存泄漏问题

• 预览组件未正确卸载，导致内存累积
• 事件监听器没有在组件销毁时清理
• 大量DOM节点没有及时释放

2. 数据处理性能问题

• AI Cards 数据量过大，JSON 解析阻塞主线程
• Markdown 渲染引擎处理大文档时性能瓶颈
• 分段数据 (Segments) 过多导致渲染性能问题
• 映射关系数据 (Position Mapping) 计算复杂度过高

3. API 调用问题

• 预览时频繁调用后端 API，导致请求堆积
• AI 处理结果获取的并发请求过多
• 网络请求超时但未正确处理

4. React 状态管理问题

• useState/useEffect 依赖数组配置错误导致无限循环
• Zustand 状态管理中的循环更新
• useCallback/useMemo 使用不当导致性能问题

🛠️ 调试建议

立即可执行的诊断步骤：

1. Chrome DevTools Memory 标签页 - 检查内存使用情况和泄漏
2. Performance 标签页 - 录制用户操作，查看主线程阻塞情况
3. Network 标签页 - 检查 API 调用频率和响应时间
4. React DevTools Profiler - 分析组件渲染性能
5. Console 检查 - 查看是否有错误日志或警告

技术方案建议：

1. 添加组件清理机制

   useEffect(() => {
     return () => {
       // 清理事件监听器和定时器
     };
   }, []);

2. 实现虚拟滚动 - 对于长列表优化渲染性能

3. 添加防抖机制 - 减少 API 调用频率

4. 实现预览内容缓存 - 避免重复数据获取

5. 组件懒加载 - 减少初始渲染负担

🎨 设计考量

基于产品文档中的 "Content Library 阅读界面命名体系"，预览功能涉及：

• Original Pane (原文面板)
• Insight Pane (洞察面板)
• Card Stream (卡片流)

需要确保这些组件的性能优化和正确的生命周期管理。

📊 验收标准

• 预览功能响应时间 < 500ms (P95)
• 连续操作 10 次预览不出现性能问题
• 内存使用量保持稳定，无明显泄漏
• 支持大文档 (>10万字) 的预览
• 通过 Chrome DevTools Performance 分析测试

🔗 相关信息

• 受影响页面: /content-library
• 相关组件: Preview 组件、Document Card、AI Cards 渲染
• 技术栈: React 18 + Next.js + Tailwind + shadcn/ui + Zustand
• 优先级: 高 (影响核心用户体验)

💡 备注

这个问题可能与产品设计文档中提到的 "智能卡片系统" 和 "AI Cards 的动态生成" 功能相关。建议在修复过程中考虑：

1. 渐进式加载 - 优先加载关键内容，次要内容异步加载
2. 错误边界 - 添加 Error Boundary 防止组件错误影响整个页面
3. 性能监控 - 添加性能指标收集，便于后续优化

---

分配建议: @Neo-Neooo (前端UI相关) 或 @cubxxw (如涉及复杂架构优化)

[linear]

XEN-177 🐛 Content Library 预览功能导致页面无响应 (Page Unresponsive)