nanhaoluo
f8d7c79b86
- 新增动画系统 CSS 变量（时长、缓动函数、状态层透明度） - 新增 prefers-reduced-motion 媒体查询支持 - 优化按钮组件样式，移除渐变背景，添加涟漪效果 - 优化分享按钮错落有致的展开动画 - 优化评论区展开动画效果 - 新增设置面板 Material 3 风格分段控件 - 新增玻璃拟态（Glassmorphism）主题变体 - 新增新拟态（Neumorphism）主题变体 - 新增邮件模板系统（base.php、comment-notify.php、reply-notify.php） - 新增邮件模板后台设置（主题色、Logo、社交链接、预览功能） - 集成邮件模板到评论回复通知 - 版本更新至 1.5.0
107 lines
5.1 KiB
Markdown
107 lines
5.1 KiB
Markdown
# Requirements Document
|
||
|
||
## Introduction
|
||
|
||
本文档定义了 ArgonAve 主题隐私政策页面及相关移动端 UI 问题的修复需求。主要涉及侧边抽屉栏功能缺失、转发按钮动画异常、以及首页文章特色图片显示问题。
|
||
|
||
## Glossary
|
||
|
||
- **Sidebar_Drawer**: 移动端侧边折叠抽屉组件，包含文章目录、多邻国连胜记录等功能
|
||
- **TOC_Generator**: 文章目录生成器，根据文章标题自动生成导航目录
|
||
- **Duolingo_Streak**: 多邻国连胜记录显示组件
|
||
- **Ripple_Effect**: 涟漪点击效果动画
|
||
- **Theme_Switcher**: 暗黑/明亮模式切换组件
|
||
- **Share_Panel**: 文章分享面板组件
|
||
- **Featured_Image**: 文章特色图片/缩略图组件
|
||
|
||
## Requirements
|
||
|
||
### Requirement 1: 侧边抽屉文章目录生成
|
||
|
||
**User Story:** As a 移动端用户, I want 在侧边抽屉中看到正常的文章目录, so that 我可以快速导航到文章的各个章节。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户在隐私政策页面打开侧边抽屉, THE TOC_Generator SHALL 正确解析页面中的标题元素（h1-h6）并生成目录
|
||
2. WHEN 页面包含多级标题, THE TOC_Generator SHALL 以层级缩进方式显示目录结构
|
||
3. WHEN 用户点击目录项, THE Sidebar_Drawer SHALL 平滑滚动到对应的标题位置
|
||
4. IF 页面没有可识别的标题元素, THEN THE TOC_Generator SHALL 显示"无目录"提示而非空白
|
||
|
||
### Requirement 2: 多邻国连胜记录显示
|
||
|
||
**User Story:** As a 用户, I want 在侧边抽屉中看到多邻国连胜记录, so that 我可以了解博主的学习进度。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户打开侧边抽屉且多邻国功能已启用, THE Duolingo_Streak SHALL 正确显示连胜天数
|
||
2. WHEN 多邻国 API 请求成功, THE Duolingo_Streak SHALL 显示用户头像、用户名和连胜火焰图标
|
||
3. IF 多邻国 API 请求失败, THEN THE Duolingo_Streak SHALL 显示友好的错误提示或隐藏该组件
|
||
4. THE Duolingo_Streak SHALL 在隐私政策页面与其他页面保持一致的显示效果
|
||
|
||
### Requirement 3: 涟漪点击效果优化
|
||
|
||
**User Story:** As a 用户, I want 点击按钮时看到自然的涟漪效果, so that 交互反馈更加流畅自然。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户点击侧边抽屉中的按钮, THE Ripple_Effect SHALL 从点击位置向外扩散
|
||
2. WHEN 涟漪动画结束, THE Ripple_Effect SHALL 以淡出方式消失，而非倒放收缩
|
||
3. THE Ripple_Effect SHALL 使用 opacity 淡出而非 scale 收缩作为结束动画
|
||
4. THE Ripple_Effect SHALL 动画时长控制在 300-400ms 范围内
|
||
|
||
### Requirement 4: 暗黑/明亮模式切换流畅性
|
||
|
||
**User Story:** As a 用户, I want 暗黑和明亮模式之间的切换更加流畅, so that 视觉体验不会突兀。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户切换主题模式, THE Theme_Switcher SHALL 使用平滑的颜色过渡动画
|
||
2. THE Theme_Switcher SHALL 所有颜色变化使用 CSS transition，时长为 200-300ms
|
||
3. THE Theme_Switcher SHALL 背景色、文字色、边框色同步过渡
|
||
4. THE Theme_Switcher SHALL 避免闪烁或跳变效果
|
||
|
||
### Requirement 5: 转发按钮退出动画优化
|
||
|
||
**User Story:** As a 用户, I want 转发面板关闭时有正确的退出动画, so that 交互体验更加自然。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户关闭转发面板, THE Share_Panel SHALL 使用向上滑出的退出动画
|
||
2. THE Share_Panel SHALL 退出动画方向与进入动画方向一致（上滑进入则上滑退出）
|
||
3. THE Share_Panel SHALL 退出动画不应出现歪斜或偏移
|
||
4. THE Share_Panel SHALL 退出动画时长与进入动画时长一致
|
||
|
||
### Requirement 6: 转发选项溢出修复
|
||
|
||
**User Story:** As a 用户, I want 转发选项完整显示在窗口内, so that 我可以看到并点击所有分享选项。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Share_Panel SHALL 所有分享选项完整显示在视口范围内
|
||
2. WHEN 分享选项数量较多, THE Share_Panel SHALL 使用滚动或换行方式适配
|
||
3. THE Share_Panel SHALL 在各种屏幕尺寸下保持选项可见性
|
||
4. THE Share_Panel SHALL 与屏幕边缘保持适当的安全边距
|
||
|
||
### Requirement 7: 转发动画流畅性优化
|
||
|
||
**User Story:** As a 用户, I want 转发面板的动画更加流畅顺滑, so that 整体交互体验更好。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Share_Panel SHALL 使用 GPU 加速属性（transform, opacity）进行动画
|
||
2. THE Share_Panel SHALL 动画使用合适的缓动函数（ease-out 或 cubic-bezier）
|
||
3. THE Share_Panel SHALL 避免动画过程中出现抖动或卡顿
|
||
4. THE Share_Panel SHALL 分享图标按钮使用错落有致的出现动画
|
||
|
||
### Requirement 8: 首页文章特色图片显示
|
||
|
||
**User Story:** As a 用户, I want 在首页看到文章的特色图片, so that 我可以通过视觉预览了解文章内容。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 文章设置了特色图片, THE Featured_Image SHALL 在首页文章列表中正确显示
|
||
2. THE Featured_Image SHALL 图片尺寸和比例与卡片布局适配
|
||
3. IF 文章没有设置特色图片, THEN THE Featured_Image SHALL 显示默认占位图或隐藏图片区域
|
||
4. THE Featured_Image SHALL 支持懒加载以优化页面性能
|
||
|