2026-01-12 00:15:20 +08:00
# 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* 包含标题元素（ ） ，
**Validates: Requirements 1.1**
### Property 2: 目录层级正确性
*For any* 生成的目录结构， （ ）
**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 生成失败：显示"无目录"提示（ ）
2. 多邻国 API 失败： （ ）
3. 动画性能问题：使用 GPU 加速属性（ ） （ ）
## Testing Strategy
### 单元测试
- TOC 生成器：测试标题解析和层级计算
- CSS 属性验证：检查动画时长、缓动函数等配置值
### 属性测试
- 使用 Jest 进行 DOM 测试
- 验证 TOC 生成的完整性和正确性（ ）
- 验证 CSS 动画配置的有效性（ ）
- 验证分享选项的视口可见性（ ）
### 手动测试
- 视觉效果验证：涟漪动画淡出效果、主题切换平滑度、分享面板动画方向
- 跨设备测试：不同屏幕尺寸下的表现
- 性能测试：动画流畅度，无抖动或卡顿
