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