nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
main
argon-theme/.kiro/specs/loading-animation-cleanup/tasks.md
nanhaoluo 5c0abfd5da fix-backdrop-filter
2026-03-03 14:58:17 +08:00

4.4 KiB
Raw Permalink Blame History

加载动画系统清理与文本效果修复 - 任务列表

1. 准备工作

  • 1.1 备份 argontheme.js 到 tmp/ 目录
  • 1.2 备份 style.css 到 tmp/ 目录
  • 1.3 确认 PageLoader 模块正常工作

2. 清理旧加载动画代码

  • 2.1 定位并移除 argontheme.js 第 4970-5040 行的旧代码
    • 移除页面初始加载的旧实现
    • 移除 initPjaxAnimations() 函数
    • 移除相关的 article-loading-overlay 创建代码
  • 2.2 添加 PJAX 集成代码
    • 在 PageLoader 模块后添加 PJAX 事件监听
    • pjax:start 时调用 PageLoader.show()
    • pjax:end 时调用 PageLoader.hide() 并重新初始化动画
  • 2.3 测试页面加载动画
    • 刷新页面，验证加载动画正常显示和隐藏
    • 检查控制台无错误
  • 2.4 测试 PJAX 导航动画
    • 点击文章链接，验证加载动画正常显示和隐藏
    • 验证页面内容正确更新
    • 检查控制台无错误

3. 修复彩色黑幕样式

  • 3.1 重构 .color-curtain 基础样式
    • 添加 article .entry-content .color-curtain 选择器
    • 添加 .article-content .color-curtain 选择器
    • 保持原有样式属性
  • 3.2 重构 .color-curtain 链接样式
    • 添加文章容器选择器支持
    • 确保链接继承父元素样式
  • 3.3 重构 .color-curtain 悬停样式
    • 添加文章容器选择器支持
    • 确保悬停时正确显示文本
  • 3.4 添加夜间模式优化
    • 设置 --curtain-bg: #1a1a1a
    • 设置 --curtain-fg: #e0e0e0
  • 3.5 测试彩色黑幕效果
    • 在文章中添加测试内容
    • 验证默认状态和悬停状态
    • 验证夜间模式颜色

4. 修复模糊文本样式

  • 4.1 重构 .text-blur 基础样式
    • 添加 article .entry-content .text-blur 选择器
    • 添加 .article-content .text-blur 选择器
    • 保持 filter: blur(2px) 效果
  • 4.2 重构 .text-blur 链接样式
    • 添加文章容器选择器支持
    • 确保链接也应用模糊效果
  • 4.3 重构 .text-blur 悬停样式
    • 添加文章容器选择器支持
    • 确保悬停时取消模糊
  • 4.4 测试模糊文本效果
    • 在文章中添加测试内容
    • 验证默认模糊和悬停清晰
    • 验证夜间模式正常

5. 修复划掉文本样式

  • 5.1 重构 .huhua 基础样式
    • 添加 article .entry-content .huhua 选择器
    • 添加 .article-content .huhua 选择器
    • 保持 text-decoration: line-through 效果
  • 5.2 重构 .huhua 链接样式
    • 添加文章容器选择器支持
    • 确保链接继承样式
  • 5.3 重构 .huhua 悬停样式
    • 添加文章容器选择器支持
    • 确保悬停时颜色变深
  • 5.4 添加夜间模式优化
    • 设置基础颜色 #6a7075
    • 设置悬停颜色 #555a5f
  • 5.5 测试划掉文本效果
    • 在文章中添加测试内容
    • 验证默认状态和悬停状态
    • 验证夜间模式颜色

6. 代码优化和注释

  • 6.1 在 style.css 中添加结构化注释
    • 添加 "文章文本特效" 大区块注释
    • 为每个效果添加小区块注释
    • 为关键样式添加说明注释
  • 6.2 检查代码规范
    • 验证 Tab 缩进正确
    • 验证属性独占一行
    • 验证属性之间无多余空行
    • 验证 JavaScript 使用 let/const

7. 测试和验证

  • 7.1 完整功能测试
    • 测试页面初始加载
    • 测试 PJAX 导航
    • 测试所有文本效果（日间模式）
    • 测试所有文本效果（夜间模式）
  • 7.2 回归测试
    • 验证其他页面功能正常
    • 验证移动端响应式布局
    • 验证浏览器兼容性
  • 7.3 性能检查
    • 检查页面加载时间
    • 检查控制台无警告
    • 检查 DOM 元素数量合理

8. 提交代码

  • 8.1 编写详细的 Git commit 信息
    • 标题：refactor: 清理旧加载动画代码并修复文本效果样式
    • 详细说明：
      • 移除 argontheme.js 第 4970-5040 行旧代码
      • 添加 PJAX 集成到 PageLoader 系统
      • 为 color-curtain、text-blur、huhua 添加文章容器选择器
      • 优化夜间模式颜色
      • 添加结构化注释
  • 8.2 提交代码到 Git
  • 8.3 验证提交成功

9. 文档更新（可选）

  • * 9.1 更新 doc/argon-theme-training.md
    • 记录新的加载动画系统架构
    • 记录文本效果的使用方法
  • * 9.2 创建文本效果使用示例
    • 提供 HTML 代码示例
    • 提供效果预览截图
Reference in New Issue View Git Blame Copy Permalink