nanhaoluo/argon-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
Files
43b695bd66048529240756367d5a82ffa800ba80
argon-theme/.kiro/specs/privacy-page-mobile-ui/tasks.md
nanhaoluo db24ca2043 fix: 修复移动端 UI 问题 
- 修复侧边抽屉文章目录在 PJAX 页面切换后不重新初始化的问题
- 优化涟漪点击效果：将结束动画从 scale 收缩改为 opacity 淡出
- 添加暗黑/明亮模式切换过渡动画（250ms 平滑过渡）
- 优化分享面板动画：添加退出时的反向错落延迟
- 添加分享面板移动端响应式适配，防止视口溢出
2026-01-11 22:43:57 +08:00

4.1 KiB
Raw Blame History

Implementation Plan: Privacy Page Mobile UI Optimization

Overview

本实现计划将修复隐私政策页面移动端 UI 问题，确保页面正确应用全局样式和功能。实现分为三个主要部分：侧边抽屉功能修复、涟漪效果和主题切换优化、分享面板动画修复。

Tasks

  • 1. 修复侧边抽屉文章目录生成

    • 1.1 检查并修复 TOC 生成器在隐私政策页面的初始化
      • 确保 argontheme.js 中的 TOC 生成逻辑在页面加载时正确执行
      • 检查页面模板是否正确引入必要的 JavaScript
      • Requirements: 1.1, 1.2
    • 1.2 实现目录项点击平滑滚动
      • headIndex 插件已内置平滑滚动功能（easeOutExpo 动画）
      • Requirements: 1.3
    • 1.3 添加无目录时的提示显示
      • headIndex 插件已实现无目录提示（显示"暂无目录"）
      • Requirements: 1.4

  • [~] 2. 修复多邻国连胜记录显示

    • [~] 2.1 确保多邻国组件在隐私政策页面正确初始化
      • 跳过：代码库中未发现多邻国相关功能实现
      • Requirements: 2.1, 2.2, 2.4
    • [~] 2.2 添加 API 失败时的错误处理
      • 跳过：功能不存在
      • Requirements: 2.3

  • 3. 优化涟漪点击效果

    • 3.1 修改涟漪动画结束行为
      • 将结束动画从 scale 收缩改为 opacity 淡出
      • 更新 CSS transition 定义
      • Requirements: 3.2, 3.3
    • 3.2 调整涟漪动画时长
      • 动画时长设置为 350ms
      • Requirements: 3.4
    • 3.3 编写涟漪动画时长属性测试
      • Property 3: 动画时长有效性
      • Validates: Requirements 3.4

  • 4. 优化暗黑/明亮模式切换

    • 4.1 添加主题切换 CSS transition
      • 为 background-color, color, border-color, box-shadow 添加 250ms 过渡
      • 使用 theme-transitioning 类控制过渡时机
      • Requirements: 4.1, 4.2, 4.3, 4.4
    • 4.2 编写主题切换过渡时长属性测试
      • Property 3: 动画时长有效性
      • Validates: Requirements 4.2

  • 5. Checkpoint - 侧边抽屉功能验证

    • 所有侧边抽屉功能已实现并验证
    • TOC 生成、平滑滚动、无目录提示均正常工作

  • 6. 修复转发面板退出动画

    • 6.1 修正退出动画方向
      • 退出动画使用向上滑出（translateY）
      • 添加反向错落延迟实现平滑退出
      • Requirements: 5.1, 5.2, 5.3
    • 6.2 统一进入和退出动画时长
      • 使用 var(--animation-normal) 统一时长
      • Requirements: 5.4
    • 6.3 编写动画一致性属性测试
      • Property 4: 分享面板进出动画一致性
      • Validates: Requirements 5.4

  • 7. 修复转发选项溢出问题

    • 7.1 修复分享选项视口溢出
      • 移动端使用 fixed 定位，限制在视口内
      • 添加 max-height 和 overflow-y: auto
      • Requirements: 6.1, 6.4
    • 7.2 添加响应式适配
      • 移动端（<576px）使用垂直布局
      • 添加背景和圆角提升可读性
      • Requirements: 6.2, 6.3
    • 7.3 编写视口可见性属性测试
      • Property 5: 分享选项视口可见性
      • Validates: Requirements 6.1, 6.3, 6.4

  • 8. 优化转发动画流畅性

    • 8.1 确保使用 GPU 加速属性
      • 使用 transform 和 opacity 实现动画
      • 添加 will-change 属性
      • Requirements: 7.1
    • 8.2 优化缓动函数
      • 使用 ease-spring 和 ease-emphasized-decelerate
      • Requirements: 7.2, 7.3
    • 8.3 实现错落有致的出现动画
      • 进入时递增延迟（0-210ms）
      • 退出时递减延迟（120-0ms）
      • Requirements: 7.4
    • 8.4 编写错落动画延迟属性测试
      • Property 6: 错落动画延迟递增
      • Validates: Requirements 7.4

  • 9. Final Checkpoint - 完整功能验证

    • 所有 UI 修复已完成
    • 涟漪效果、主题切换、分享面板动画均已优化

Notes

  • 每个任务都引用了具体的需求以便追溯
  • Checkpoint 任务用于阶段性验证
  • 属性测试验证通用的正确性属性
  • 所有测试任务均为必需，确保全面的测试覆盖
Reference in New Issue View Git Blame Copy Permalink