nanhaoluo
4cbc405ebf
- 整合 CSS 动画变量系统，添加 --animation-instant (100ms) 时长 - 添加 --ease-smooth 缓动函数用于平滑过渡 - 优化卡片入场动画，使用 scale(0.95) + translateY(8px) 更自然 - 统一链接、按钮、标签等元素的过渡动画时长和缓动函数 - 优化顶栏搜索框展开/收起动画 - 优化侧边栏搜索框和菜单项的交互动画 - 优化文章卡片悬浮效果，使用 spring 缓动 - 统一 JS 中的滚动动画时长 (回顶 600ms, 评论回复 400ms) - 优化折叠区块展开/收起动画时长 - 更新分页按钮、日历导航等组件的过渡动画
3.9 KiB
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
- TOC 生成失败：显示"无目录"提示（Requirements 1.4）
- 多邻国 API 失败：隐藏组件或显示友好错误提示（Requirements 2.3）
- 动画性能问题：使用 GPU 加速属性（transform, opacity）确保流畅（Requirements 7.1）
Testing Strategy
单元测试
- TOC 生成器：测试标题解析和层级计算
- CSS 属性验证：检查动画时长、缓动函数等配置值
属性测试
- 使用 Jest 进行 DOM 测试
- 验证 TOC 生成的完整性和正确性（Property 1, 2）
- 验证 CSS 动画配置的有效性（Property 3, 4, 6）
- 验证分享选项的视口可见性（Property 5）
手动测试
- 视觉效果验证：涟漪动画淡出效果、主题切换平滑度、分享面板动画方向
- 跨设备测试：不同屏幕尺寸下的表现
- 性能测试：动画流畅度，无抖动或卡顿