# Design Document: Privacy Page Mobile UI Optimization

## Overview

本设计文档描述了 Argon 主题隐私政策页面移动端 UI 问题的修复方案。核心问题是隐私政策页面未正确应用全局样式设置，导致侧边抽屉功能异常和文章页面转发动画问题。

修复策略是确保隐私政策页面正确加载和初始化全局 JavaScript 功能，同时优化相关 CSS 动画效果。

## Architecture

隐私政策页面需要正确继承全局组件：
- Sidebar Drawer 侧边抽屉（包含 TOC、Duolingo、Theme Switcher）
- Share Panel 分享面板
- Ripple Effect 涟漪点击效果

## Components and Interfaces

### 1. TOC Generator (文章目录生成器)

解析页面标题元素并生成导航目录，需确保在隐私政策页面正确初始化。

### 2. Duolingo Streak (多邻国连胜组件)

显示博主的多邻国学习连胜记录，需在隐私政策页面与其他页面保持一致。

### 3. Ripple Effect (涟漪效果)

涟漪动画需修改为：从点击位置扩散，结束时使用 opacity 淡出而非 scale 收缩。

### 4. Theme Switcher (主题切换器)

添加 CSS transition 实现平滑的暗黑/明亮模式切换。

### 5. Share Panel (分享面板)

修复退出动画方向，确保向上滑出且不出现歪斜。

## Data Models

动画配置使用 CSS 变量统一管理，已在 style.css 中定义。

## Correctness Properties

*A property is a characteristic or behavior that should hold true across all valid executions of a system-essentially, a formal statement about what the system should do. Properties serve as the bridge between human-readable specifications and machine-verifiable correctness guarantees.*

由于本需求主要涉及 UI 动画和样式修复，大部分验收标准属于视觉效果验证，不适合自动化属性测试。以下为可测试的属性：

### Property 1: TOC 生成完整性
*For any* 包含标题元素（h1-h6）的 HTML 内容，TOC_Generator 生成的目录项数量应等于页面中标题元素的数量
**Validates: Requirements 1.1**

### Property 2: 目录层级正确性
*For any* 生成的目录结构，每个目录项的层级值应与其对应标题元素的层级（h1=1, h2=2, ..., h6=6）一致
**Validates: Requirements 1.2**

### Property 3: 动画时长有效性
*For any* 涟漪效果动画，其时长应在 300-400ms 范围内；*For any* 主题切换过渡，其时长应在 200-300ms 范围内
**Validates: Requirements 3.4, 4.2**

### Property 4: 分享面板进出动画一致性
*For any* 分享面板的进入和退出动画，其 transition-duration 值应相等
**Validates: Requirements 5.4**

### Property 5: 分享选项视口可见性
*For any* 屏幕尺寸，分享面板展开时所有分享选项应完整显示在视口范围内，且与屏幕边缘保持安全边距
**Validates: Requirements 6.1, 6.3, 6.4**

### Property 6: 错落动画延迟递增
*For any* 分享面板中的按钮序列，第 n 个按钮的 transition-delay 应大于第 n-1 个按钮的 transition-delay
**Validates: Requirements 7.4**

## Error Handling

1. TOC 生成失败：显示"无目录"提示（Requirements 1.4）
2. 多邻国 API 失败：隐藏组件或显示友好错误提示（Requirements 2.3）
3. 动画性能问题：使用 GPU 加速属性（transform, opacity）确保流畅（Requirements 7.1）

## Testing Strategy

### 单元测试
- TOC 生成器：测试标题解析和层级计算
- CSS 属性验证：检查动画时长、缓动函数等配置值

### 属性测试
- 使用 Jest 进行 DOM 测试
- 验证 TOC 生成的完整性和正确性（Property 1, 2）
- 验证 CSS 动画配置的有效性（Property 3, 4, 6）
- 验证分享选项的视口可见性（Property 5）

### 手动测试
- 视觉效果验证：涟漪动画淡出效果、主题切换平滑度、分享面板动画方向
- 跨设备测试：不同屏幕尺寸下的表现
- 性能测试：动画流畅度，无抖动或卡顿