nanhaoluo
db24ca2043
- 修复侧边抽屉文章目录在 PJAX 页面切换后不重新初始化的问题 - 优化涟漪点击效果：将结束动画从 scale 收缩改为 opacity 淡出 - 添加暗黑/明亮模式切换过渡动画（250ms 平滑过渡） - 优化分享面板动画：添加退出时的反向错落延迟 - 添加分享面板移动端响应式适配，防止视口溢出
105 lines
4.1 KiB
Markdown
105 lines
4.1 KiB
Markdown
# Implementation Plan: Privacy Page Mobile UI Optimization
|
||
|
||
## Overview
|
||
|
||
本实现计划将修复隐私政策页面移动端 UI 问题，确保页面正确应用全局样式和功能。实现分为三个主要部分：侧边抽屉功能修复、涟漪效果和主题切换优化、分享面板动画修复。
|
||
|
||
## Tasks
|
||
|
||
- [x] 1. 修复侧边抽屉文章目录生成
|
||
- [x] 1.1 检查并修复 TOC 生成器在隐私政策页面的初始化
|
||
- 确保 argontheme.js 中的 TOC 生成逻辑在页面加载时正确执行
|
||
- 检查页面模板是否正确引入必要的 JavaScript
|
||
- _Requirements: 1.1, 1.2_
|
||
- [x] 1.2 实现目录项点击平滑滚动
|
||
- headIndex 插件已内置平滑滚动功能（easeOutExpo 动画）
|
||
- _Requirements: 1.3_
|
||
- [x] 1.3 添加无目录时的提示显示
|
||
- headIndex 插件已实现无目录提示（显示"暂无目录"）
|
||
- _Requirements: 1.4_
|
||
|
||
- [~] 2. 修复多邻国连胜记录显示
|
||
- [~] 2.1 确保多邻国组件在隐私政策页面正确初始化
|
||
- 跳过：代码库中未发现多邻国相关功能实现
|
||
- _Requirements: 2.1, 2.2, 2.4_
|
||
- [~] 2.2 添加 API 失败时的错误处理
|
||
- 跳过：功能不存在
|
||
- _Requirements: 2.3_
|
||
|
||
- [x] 3. 优化涟漪点击效果
|
||
- [x] 3.1 修改涟漪动画结束行为
|
||
- 将结束动画从 scale 收缩改为 opacity 淡出
|
||
- 更新 CSS transition 定义
|
||
- _Requirements: 3.2, 3.3_
|
||
- [x] 3.2 调整涟漪动画时长
|
||
- 动画时长设置为 350ms
|
||
- _Requirements: 3.4_
|
||
- [x] 3.3 编写涟漪动画时长属性测试
|
||
- **Property 3: 动画时长有效性**
|
||
- **Validates: Requirements 3.4**
|
||
|
||
- [x] 4. 优化暗黑/明亮模式切换
|
||
- [x] 4.1 添加主题切换 CSS transition
|
||
- 为 background-color, color, border-color, box-shadow 添加 250ms 过渡
|
||
- 使用 theme-transitioning 类控制过渡时机
|
||
- _Requirements: 4.1, 4.2, 4.3, 4.4_
|
||
- [x] 4.2 编写主题切换过渡时长属性测试
|
||
- **Property 3: 动画时长有效性**
|
||
- **Validates: Requirements 4.2**
|
||
|
||
- [x] 5. Checkpoint - 侧边抽屉功能验证
|
||
- 所有侧边抽屉功能已实现并验证
|
||
- TOC 生成、平滑滚动、无目录提示均正常工作
|
||
|
||
- [x] 6. 修复转发面板退出动画
|
||
- [x] 6.1 修正退出动画方向
|
||
- 退出动画使用向上滑出（translateY）
|
||
- 添加反向错落延迟实现平滑退出
|
||
- _Requirements: 5.1, 5.2, 5.3_
|
||
- [x] 6.2 统一进入和退出动画时长
|
||
- 使用 var(--animation-normal) 统一时长
|
||
- _Requirements: 5.4_
|
||
- [x] 6.3 编写动画一致性属性测试
|
||
- **Property 4: 分享面板进出动画一致性**
|
||
- **Validates: Requirements 5.4**
|
||
|
||
- [x] 7. 修复转发选项溢出问题
|
||
- [x] 7.1 修复分享选项视口溢出
|
||
- 移动端使用 fixed 定位，限制在视口内
|
||
- 添加 max-height 和 overflow-y: auto
|
||
- _Requirements: 6.1, 6.4_
|
||
- [x] 7.2 添加响应式适配
|
||
- 移动端（<576px）使用垂直布局
|
||
- 添加背景和圆角提升可读性
|
||
- _Requirements: 6.2, 6.3_
|
||
- [x] 7.3 编写视口可见性属性测试
|
||
- **Property 5: 分享选项视口可见性**
|
||
- **Validates: Requirements 6.1, 6.3, 6.4**
|
||
|
||
- [x] 8. 优化转发动画流畅性
|
||
- [x] 8.1 确保使用 GPU 加速属性
|
||
- 使用 transform 和 opacity 实现动画
|
||
- 添加 will-change 属性
|
||
- _Requirements: 7.1_
|
||
- [x] 8.2 优化缓动函数
|
||
- 使用 ease-spring 和 ease-emphasized-decelerate
|
||
- _Requirements: 7.2, 7.3_
|
||
- [x] 8.3 实现错落有致的出现动画
|
||
- 进入时递增延迟（0-210ms）
|
||
- 退出时递减延迟（120-0ms）
|
||
- _Requirements: 7.4_
|
||
- [x] 8.4 编写错落动画延迟属性测试
|
||
- **Property 6: 错落动画延迟递增**
|
||
- **Validates: Requirements 7.4**
|
||
|
||
- [x] 9. Final Checkpoint - 完整功能验证
|
||
- 所有 UI 修复已完成
|
||
- 涟漪效果、主题切换、分享面板动画均已优化
|
||
|
||
## Notes
|
||
|
||
- 每个任务都引用了具体的需求以便追溯
|
||
- Checkpoint 任务用于阶段性验证
|
||
- 属性测试验证通用的正确性属性
|
||
- 所有测试任务均为必需，确保全面的测试覆盖
|