nanhaoluo
f8d7c79b86
- 新增动画系统 CSS 变量（时长、缓动函数、状态层透明度） - 新增 prefers-reduced-motion 媒体查询支持 - 优化按钮组件样式，移除渐变背景，添加涟漪效果 - 优化分享按钮错落有致的展开动画 - 优化评论区展开动画效果 - 新增设置面板 Material 3 风格分段控件 - 新增玻璃拟态（Glassmorphism）主题变体 - 新增新拟态（Neumorphism）主题变体 - 新增邮件模板系统（base.php、comment-notify.php、reply-notify.php） - 新增邮件模板后台设置（主题色、Logo、社交链接、预览功能） - 集成邮件模板到评论回复通知 - 版本更新至 1.5.0
108 lines
5.9 KiB
Markdown
108 lines
5.9 KiB
Markdown
# Requirements Document
|
||
|
||
## Introduction
|
||
|
||
本文档定义了 Argon WordPress 主题全局页面显示优化的需求，参考 Apple 设计语言和 Material Design 3 设计规范，优化设置页面外观、按钮样式、转发按钮动画效果以及评论展开动画效果。
|
||
|
||
## Glossary
|
||
|
||
- **Theme_System**: Argon 主题的核心样式系统，包含 CSS 变量和基础组件
|
||
- **Settings_Panel**: 浮动按钮栏中的博客设置弹窗组件
|
||
- **Share_Button**: 文章分享按钮组件，包含展开/收起动画
|
||
- **Comments_Toggle**: 评论区展开/折叠切换按钮和动画系统
|
||
- **Button_Component**: 主题中的通用按钮组件
|
||
- **Animation_System**: 主题的动画效果系统
|
||
- **Email_Template_System**: 邮件通知模板系统，负责生成和发送各类邮件通知
|
||
|
||
## Requirements
|
||
|
||
### Requirement 1: 按钮样式优化
|
||
|
||
**User Story:** As a 用户, I want 按钮使用纯色主题色而非渐变背景, so that 界面更加简洁现代，符合 Apple/Material 3 设计语言。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Button_Component SHALL 使用纯色主题色作为主要按钮背景，移除渐变效果
|
||
2. WHEN 按钮处于悬停状态, THE Button_Component SHALL 显示轻微的颜色加深效果和微妙的阴影提升
|
||
3. WHEN 按钮处于按下状态, THE Button_Component SHALL 显示颜色进一步加深和轻微的缩放效果
|
||
4. THE Button_Component SHALL 使用圆角设计，圆角值与卡片圆角保持一致性
|
||
5. THE Button_Component SHALL 支持涟漪效果（ripple effect）作为点击反馈
|
||
|
||
### Requirement 2: 设置页面外观优化
|
||
|
||
**User Story:** As a 用户, I want 设置弹窗具有更现代的外观设计, so that 使用体验更加愉悦。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Settings_Panel SHALL 使用更大的圆角和柔和的阴影效果
|
||
2. THE Settings_Panel SHALL 使用分组卡片布局组织设置项
|
||
3. WHEN 设置项被选中, THE Settings_Panel SHALL 使用主题色填充而非渐变背景
|
||
4. THE Settings_Panel SHALL 使用更清晰的视觉层次和间距
|
||
5. THE Settings_Panel SHALL 支持平滑的展开/收起动画
|
||
6. THE Settings_Panel SHALL 使用 Material 3 风格的分段控件（Segmented Control）替代现有按钮组
|
||
|
||
### Requirement 3: 分享按钮动画优化
|
||
|
||
**User Story:** As a 用户, I want 分享按钮具有流畅自然的展开动画, so that 交互体验更加精致。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户点击分享按钮, THE Share_Button SHALL 使用弹性缓动函数展开分享选项
|
||
2. THE Share_Button SHALL 分享选项依次出现，具有错落有致的动画效果
|
||
3. WHEN 分享面板展开时, THE Share_Button SHALL 主按钮平滑过渡为关闭状态
|
||
4. THE Share_Button SHALL 使用 Material 3 风格的容器样式
|
||
5. WHEN 用户点击分享面板外部, THE Share_Button SHALL 平滑收起分享选项
|
||
6. THE Share_Button SHALL 各分享图标按钮使用纯色背景而非渐变
|
||
|
||
### Requirement 4: 评论展开动画优化
|
||
|
||
**User Story:** As a 用户, I want 评论区展开/折叠具有流畅的动画效果, so that 页面交互更加自然。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. WHEN 用户点击展开评论按钮, THE Comments_Toggle SHALL 使用平滑的高度过渡动画展开评论区
|
||
2. THE Comments_Toggle SHALL 评论区内容使用淡入效果配合高度动画
|
||
3. WHEN 评论区展开时, THE Comments_Toggle SHALL 按钮图标平滑旋转或变换
|
||
4. THE Comments_Toggle SHALL 使用 CSS 变量控制动画时长，便于统一调整
|
||
5. WHEN 评论区折叠时, THE Comments_Toggle SHALL 使用反向动画平滑收起
|
||
6. THE Comments_Toggle SHALL 动画过程中保持页面滚动位置稳定
|
||
|
||
### Requirement 5: 全局动画系统优化
|
||
|
||
**User Story:** As a 用户, I want 全局动画效果统一且流畅, so that 整体体验一致性更好。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Animation_System SHALL 定义统一的缓动函数变量（ease-out, ease-in-out, spring）
|
||
2. THE Animation_System SHALL 定义统一的动画时长变量（fast: 150ms, normal: 250ms, slow: 400ms）
|
||
3. THE Animation_System SHALL 所有交互动画使用 GPU 加速属性（transform, opacity）
|
||
4. THE Animation_System SHALL 支持 prefers-reduced-motion 媒体查询，为需要的用户减少动画
|
||
5. THE Animation_System SHALL 悬停效果使用微妙的缩放和阴影变化
|
||
|
||
### Requirement 6: 新增设计样式
|
||
|
||
**User Story:** As a 用户, I want 主题提供更多现代化的设计样式选项, so that 可以根据喜好自定义博客外观。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Theme_System SHALL 提供玻璃拟态（Glassmorphism）样式选项
|
||
2. THE Theme_System SHALL 提供新拟态（Neumorphism）样式选项
|
||
3. THE Theme_System SHALL 提供 Material 3 动态色彩系统支持
|
||
4. WHEN 用户切换样式时, THE Theme_System SHALL 使用平滑过渡动画
|
||
5. THE Theme_System SHALL 样式选项在设置面板中可预览
|
||
|
||
### Requirement 7: 邮件模板优化
|
||
|
||
**User Story:** As a 博客管理员, I want 所有邮件通知使用统一且可配置的模板, so that 邮件外观专业一致，且能轻松自定义品牌风格。
|
||
|
||
#### Acceptance Criteria
|
||
|
||
1. THE Email_Template_System SHALL 提供统一的邮件模板基础结构，包含页眉、内容区、页脚三个区域
|
||
2. THE Email_Template_System SHALL 支持在后台设置邮件模板的主题色，自动应用到所有邮件类型
|
||
3. THE Email_Template_System SHALL 支持自定义邮件页眉的 Logo 图片和博客名称
|
||
4. THE Email_Template_System SHALL 支持自定义邮件页脚的版权信息和社交链接
|
||
5. WHEN 发送评论通知邮件, THE Email_Template_System SHALL 使用统一模板并包含评论内容、文章链接和回复按钮
|
||
6. WHEN 发送评论回复通知邮件, THE Email_Template_System SHALL 使用统一模板并包含原评论、回复内容和查看按钮
|
||
7. THE Email_Template_System SHALL 邮件模板兼容主流邮件客户端（Gmail、Outlook、Apple Mail）
|
||
8. THE Email_Template_System SHALL 提供邮件预览功能，管理员可在保存前预览邮件效果
|