# 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 任务用于阶段性验证
- 属性测试验证通用的正确性属性
- 所有测试任务均为必需，确保全面的测试覆盖