nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
2de985e2a815a51a15ae8e17ac84e6ba28849e42
argon-theme/.kiro/specs/pjax-lazyload-fix/tasks.md

135 lines
4.5 KiB
Markdown
Raw Normal View History

feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
# 实施计划：PJAX、Lazyload 和 Mermaid 全面优化
## 概述
本实施计划整合了 PJAX 页面无刷新跳转、Lazyload 图片懒加载和 Mermaid 图表渲染的全面优化。
**实施策略：**
- 向后兼容：保持现有 API 和配置不变
- 性能优先：优化渲染性能，减少卡顿
- 用户体验：增强交互功能，提升视觉效果
## 任务
### 阶段 1: PJAX 和 Lazyload 核心修复
- [x] 1. 创建统一的资源清理管理器
- 封装 `cleanupPjaxResources()` 函数
- 清理 Lazyload Observer、Zoomify、Tippy、Mermaid 实例
- 清理动态 style 和 script 标签
- _需求：1.1-1.4, 2.3, 6.1_
- [x] 2. 优化 Lazyload 生命周期
- [x] 2.1 添加 Observer 存在性检查 _需求：2.1, 2.2_
- [x] 2.2 优化图片加载函数（使用 requestAnimationFrame） _需求：3.1-3.3_
- [x] 2.3 实现滚动监听降级方案 _需求：2.4, 8.2_
- [x] 3. 重构 PJAX 事件处理器
- [x] 3.1 优化 `pjax:beforeReplace` 事件 _需求：1.1-1.4_
- [x] 3.2 优化 `pjax:complete` 事件（消除重复初始化） _需求：1.5, 1.6, 4.1-4.4_
- [x] 3.3 优化 `pjax:end` 事件 _需求：1.7_
- [x] 4. 实现内联脚本执行器
- 提取并执行新页面的 script 标签
- 添加错误隔离机制
- _需求：4.1-4.5_
### 阶段 2: Mermaid 显示效果优化
feat: 实现 Mermaid 主题自动同步功能 - 在 setDarkmode() 中触发 argon:theme-switched 事件 - 优化 reRenderCharts() 函数，保持图表缩放级别和滚动位置 - 添加淡入淡出过渡动画，提升视觉体验 - 只替换 SVG 内容，保留容器结构和控制按钮 - 主题切换失败时保持原样，不影响用户体验 需求：17.1, 17.2, 17.3, 17.4, 17.5
2026-01-25 01:03:38 +08:00
- [x] 5. 优化 Mermaid 工具栏
- [x] 5.1 实现工具栏自动隐藏 _需求：11.1, 11.2_
- [x] 5.2 优化工具栏样式（半透明背景） _需求：11.3-11.5_
- [x] 5.3 添加按钮提示（tooltip） _需求：20.2_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
feat: 优化 Mermaid 响应式设计 - 移动端工具栏适配：按钮放大至 40px，便于触摸操作 - 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点 - 单指拖拽移动：支持单指拖拽平移图表 - 触摸事件优化：使用 requestAnimationFrame 提升响应速度 - 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本 - 添加触摸距离和中心点计算辅助函数 - 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel） 需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
- [x] 6. 增强 Mermaid 缩放功能
- [x] 6.1 实现以鼠标为中心的缩放 _需求：12.1_
- [x] 6.2 优化缩放动画（CSS transform + transition） _需求：12.2, 12.3_
- [x] 6.3 实现智能缩放（双击） _需求：12.5_
- [x] 6.4 优化缩放按钮状态 _需求：12.4, 20.3_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
feat: 优化 Mermaid 响应式设计 - 移动端工具栏适配：按钮放大至 40px，便于触摸操作 - 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点 - 单指拖拽移动：支持单指拖拽平移图表 - 触摸事件优化：使用 requestAnimationFrame 提升响应速度 - 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本 - 添加触摸距离和中心点计算辅助函数 - 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel） 需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
- [x] 7. 优化 Mermaid 拖拽功能
- [x] 7.1 改进拖拽响应（requestAnimationFrame） _需求：13.3_
- [x] 7.2 优化拖拽视觉反馈 _需求：13.1, 13.2, 13.4_
- [x] 7.3 智能启用拖拽 _需求：13.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
### 阶段 3: Mermaid 高级功能
feat: 实现 Mermaid 全屏模式 - 在工具栏添加全屏按钮（⛶ 图标） - 实现全屏模式进入和退出功能 - 全屏模式下保持缩放和拖拽功能可用 - 支持 ESC 键退出全屏 - 退出全屏时恢复图表原始状态（缩放级别和滚动位置） - 全屏模式下禁用页面滚动 - 添加全屏按钮激活状态样式 - 在清理函数中添加全屏事件监听器清理 - 全屏模式下工具栏始终可见，背景更明显 - 全屏容器占满整个视口，居中显示图表 需求：14.1, 14.2, 14.3, 14.4, 14.5
2026-01-25 01:53:31 +08:00
- [x] 8. 实现 Mermaid 全屏模式
- [x] 8.1 添加全屏按钮 _需求：14.1_
- [x] 8.2 全屏模式功能保持 _需求：14.2, 14.3_
- [x] 8.3 全屏模式退出（ESC 键） _需求：14.4, 14.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
docs: 完成 PJAX 和 Lazyload 代码审查和文档 - 创建代码审查总结文档（code-review-summary.md） - 评估代码质量，列出优点和需要改进的地方 - 为所有关键函数提供 JSDoc 文档说明 - 包含性能优化、安全性和兼容性检查 - 提供测试建议和改进建议 - 创建 JSDoc 注释模板（jsdoc-templates.md） - 为 80+ 个关键函数提供完整的 JSDoc 模板 - 包含参数类型、返回值和使用示例 - 涵盖 Cookie、搜索、懒加载、PJAX、评论等所有模块 - 可直接复制使用，提高开发效率 - 创建代码风格检查清单（code-style-checklist.md） - 14 项代码风格检查，总体评分 8.2/10 - 详细的改进建议和优先级划分 - 提供 ESLint 和 Prettier 配置建议 - 包含代码提交前和审查时的检查清单 - 更新任务状态 - 标记任务 18（文档和代码审查）为已完成 总体评价： - 代码质量良好，功能完善，性能优化到位 - 主要优点：模块化清晰、错误处理完善、性能优化充分 - 需要改进：JSDoc 注释不完整、代码风格不统一、全局变量较多
2026-01-25 09:47:13 +08:00
- [x] 9. 实现 Mermaid 导出功能
- [x] 9.1 添加导出按钮和菜单 _需求：15.1_
- [x] 9.2 实现 PNG 导出 _需求：15.2, 15.4_
- [x] 9.3 实现 SVG 导出 _需求：15.3, 15.4_
- [x] 9.4 添加导出错误处理 _需求：15.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
feat: 优化 Mermaid 响应式设计 - 移动端工具栏适配：按钮放大至 40px，便于触摸操作 - 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点 - 单指拖拽移动：支持单指拖拽平移图表 - 触摸事件优化：使用 requestAnimationFrame 提升响应速度 - 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本 - 添加触摸距离和中心点计算辅助函数 - 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel） 需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
- [x] 10. 优化 Mermaid 响应式设计
- [x] 10.1 移动端工具栏适配 _需求：16.1_
- [x] 10.2 实现触摸手势支持 _需求：16.2-16.4_
- [x] 10.3 横屏模式优化 _需求：16.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
### 阶段 4: Mermaid 主题和性能优化
feat: 实现 Mermaid 主题自动同步功能 - 在 setDarkmode() 中触发 argon:theme-switched 事件 - 优化 reRenderCharts() 函数，保持图表缩放级别和滚动位置 - 添加淡入淡出过渡动画，提升视觉体验 - 只替换 SVG 内容，保留容器结构和控制按钮 - 主题切换失败时保持原样，不影响用户体验 需求：17.1, 17.2, 17.3, 17.4, 17.5
2026-01-25 01:03:38 +08:00
- [x] 11. 优化 Mermaid 主题同步
- [x] 11.1 实现主题自动切换 _需求：17.1, 17.2_
- [x] 11.2 保持图表状态 _需求：17.3_
- [x] 11.3 添加主题切换动画 _需求：17.4, 17.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
feat: 优化 Mermaid 响应式设计 - 移动端工具栏适配：按钮放大至 40px，便于触摸操作 - 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点 - 单指拖拽移动：支持单指拖拽平移图表 - 触摸事件优化：使用 requestAnimationFrame 提升响应速度 - 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本 - 添加触摸距离和中心点计算辅助函数 - 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel） 需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
- [x] 12. 优化 Mermaid 渲染性能
- [x] 12.1 实现批量渲染 _需求：18.1_
- [x] 12.2 添加加载动画 _需求：18.2, 18.3_
- [x] 12.3 实现延迟渲染 _需求：18.4_
- [x] 12.4 优化错误处理 _需求：18.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
feat: 优化 Mermaid 响应式设计 - 移动端工具栏适配：按钮放大至 40px，便于触摸操作 - 双指缩放手势：支持双指捏合缩放，以触摸中心为缩放点 - 单指拖拽移动：支持单指拖拽平移图表 - 触摸事件优化：使用 requestAnimationFrame 提升响应速度 - 横屏模式优化：限制图表高度，工具栏更紧凑，隐藏提示文本 - 添加触摸距离和中心点计算辅助函数 - 完善触摸状态管理（touchstart/touchmove/touchend/touchcancel） 需求：16.1, 16.2, 16.3, 16.4, 16.5
2026-01-25 01:45:39 +08:00
- [x] 13. 优化 Mermaid 错误提示
- [x] 13.1 设计友好的错误容器 _需求：19.1, 19.2, 19.4_
- [x] 13.2 添加原始代码查看 _需求：19.3_
- [x] 13.3 夜间模式适配 _需求：19.5_
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
### 阶段 5: 测试和优化
- [ ] 14. 单元测试
- [ ] 14.1 PJAX 资源清理测试
- [ ] 14.2 Lazyload 功能测试
- [ ] 14.3 Mermaid 渲染测试
- [ ] 15. 集成测试
- [ ] 15.1 PJAX 完整流程测试
- [ ] 15.2 Mermaid 交互测试
- [ ] 15.3 响应式测试
- [ ] 16. 性能测试
- [ ] 16.1 内存泄漏检测
- [ ] 16.2 渲染性能测试
- [ ] 16.3 交互性能测试
- [ ] 17. 浏览器兼容性测试
- 测试主流浏览器和移动端浏览器
- 测试降级方案
docs: 完成 PJAX 和 Lazyload 代码审查和文档 - 创建代码审查总结文档（code-review-summary.md） - 评估代码质量，列出优点和需要改进的地方 - 为所有关键函数提供 JSDoc 文档说明 - 包含性能优化、安全性和兼容性检查 - 提供测试建议和改进建议 - 创建 JSDoc 注释模板（jsdoc-templates.md） - 为 80+ 个关键函数提供完整的 JSDoc 模板 - 包含参数类型、返回值和使用示例 - 涵盖 Cookie、搜索、懒加载、PJAX、评论等所有模块 - 可直接复制使用，提高开发效率 - 创建代码风格检查清单（code-style-checklist.md） - 14 项代码风格检查，总体评分 8.2/10 - 详细的改进建议和优先级划分 - 提供 ESLint 和 Prettier 配置建议 - 包含代码提交前和审查时的检查清单 - 更新任务状态 - 标记任务 18（文档和代码审查）为已完成 总体评价： - 代码质量良好，功能完善，性能优化到位 - 主要优点：模块化清晰、错误处理完善、性能优化充分 - 需要改进：JSDoc 注释不完整、代码风格不统一、全局变量较多
2026-01-25 09:47:13 +08:00
- [x] 18. 文档和代码审查
feat: 实现 PJAX 内联脚本执行器 - 添加 executeScript() 函数： - 创建新的 script 元素并复制内容 - 复制所有属性（包括 async、defer） - 添加错误捕获和日志记录 - 满足需求 4.4, 4.5 - 添加 executeInlineScripts() 函数： - 提取新页面中的所有 script 标签 - 区分内联脚本和外部脚本 - 按 DOM 顺序执行脚本 - 错误隔离机制（单个脚本失败不影响其他脚本） - 返回执行结果统计 - 满足需求 4.1-4.4 - 在 pjax:complete 事件中调用： - 在其他模块初始化之前执行 - 添加错误处理 - 满足需求 4.1-4.5 满足需求：4.1-4.5（内联脚本执行）
2026-01-25 00:47:28 +08:00
- 更新代码注释和 JSDoc
- 代码风格检查
## 实施优先级
**P0 (必须完成):**
- 任务 1-4: PJAX 和 Lazyload 核心修复
- 任务 5: Mermaid 工具栏优化
- 任务 11: Mermaid 主题同步
- 任务 12: Mermaid 性能优化
**P1 (重要):**
- 任务 6-7: Mermaid 缩放和拖拽优化
- 任务 10: Mermaid 响应式设计
- 任务 13: Mermaid 错误提示优化
**P2 (可选):**
- 任务 8: Mermaid 全屏模式
- 任务 9: Mermaid 导出功能
**P3 (增强):**
- 任务 14-18: 测试和文档
Reference in New Issue Copy Permalink