nanhaoluo
4cbc405ebf
- 整合 CSS 动画变量系统，添加 --animation-instant (100ms) 时长 - 添加 --ease-smooth 缓动函数用于平滑过渡 - 优化卡片入场动画，使用 scale(0.95) + translateY(8px) 更自然 - 统一链接、按钮、标签等元素的过渡动画时长和缓动函数 - 优化顶栏搜索框展开/收起动画 - 优化侧边栏搜索框和菜单项的交互动画 - 优化文章卡片悬浮效果，使用 spring 缓动 - 统一 JS 中的滚动动画时长 (回顶 600ms, 评论回复 400ms) - 优化折叠区块展开/收起动画时长 - 更新分页按钮、日历导航等组件的过渡动画
94 lines
3.9 KiB
Markdown
94 lines
3.9 KiB
Markdown
# 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）
|
||
|
||
### 手动测试
|
||
- 视觉效果验证：涟漪动画淡出效果、主题切换平滑度、分享面板动画方向
|
||
- 跨设备测试：不同屏幕尺寸下的表现
|
||
- 性能测试：动画流畅度，无抖动或卡顿
|