nanhaoluo
f8d7c79b86
- 新增动画系统 CSS 变量（时长、缓动函数、状态层透明度） - 新增 prefers-reduced-motion 媒体查询支持 - 优化按钮组件样式，移除渐变背景，添加涟漪效果 - 优化分享按钮错落有致的展开动画 - 优化评论区展开动画效果 - 新增设置面板 Material 3 风格分段控件 - 新增玻璃拟态（Glassmorphism）主题变体 - 新增新拟态（Neumorphism）主题变体 - 新增邮件模板系统（base.php、comment-notify.php、reply-notify.php） - 新增邮件模板后台设置（主题色、Logo、社交链接、预览功能） - 集成邮件模板到评论回复通知 - 版本更新至 1.5.0
7.3 KiB
7.3 KiB
Implementation Plan: Global UI Optimization
Overview
本实现计划将 Argon 主题的 UI 优化分为多个主要任务，按照依赖关系顺序执行。首先建立动画系统基础，然后逐步优化各个组件，添加新的主题变体，最后实现统一的邮件模板系统。
Tasks
-
1. 建立动画系统 CSS 变量基础
- 在 style.css 的 :root 中添加动画时长变量（--animation-fast, --animation-normal, --animation-slow, --animation-slower）
- 添加 Material 3 标准缓动函数变量（--ease-standard, --ease-emphasized, --ease-spring 等）
- 添加状态层透明度变量（--state-hover-opacity, --state-pressed-opacity 等）
- 添加 prefers-reduced-motion 媒体查询支持
- Requirements: 5.1, 5.2, 5.4
-
2. 优化按钮组件样式
- 2.1 修改 .btn-primary 样式，移除渐变背景，使用纯色主题色
- 更新 background 属性使用 var(--themecolor)
- 添加悬停状态颜色加深和阴影提升效果
- 添加按下状态颜色加深和缩放效果
- 使用 var(--card-radius) 统一圆角
- Requirements: 1.1, 1.2, 1.3, 1.4
- 2.2 添加涟漪效果（ripple effect）
- 创建 .btn-ripple 类实现 CSS 涟漪动画
- 使用 ::after 伪元素和 radial-gradient 实现
- Requirements: 1.5
- 2.1 修改 .btn-primary 样式，移除渐变背景，使用纯色主题色
-
3. 优化分享按钮动画效果
- 3.1 更新分享按钮容器样式
- 修改 #share_container 和 #share 的布局样式
- 使用 flexbox 和 gap 属性优化间距
- Requirements: 3.4
- 3.2 实现错落有致的展开动画
- 为 #share > a 添加初始状态（opacity: 0, transform: scale(0.8) translateX(10px)）
- 为每个子元素添加递增的 transition-delay（30ms 间隔）
- 使用 --ease-spring 缓动函数
- Requirements: 3.1, 3.2
- 3.3 优化主按钮变换动画
- 修改 #share_show 的 .opened 状态样式
- 添加旋转和缩放变换（rotate(45deg) scale(0.9)）
- Requirements: 3.3
- 3.4 更新分享图标按钮为纯色背景
- 移除 template-parts/post-actions.php 中按钮的 style 属性中的渐变
- 使用纯色背景色
- Requirements: 3.6
- 3.1 更新分享按钮容器样式
-
4. 优化评论展开动画效果
- 4.1 更新评论区容器过渡动画
- 修改 #comments 和 #post_comment 的 transition 属性
- 使用 CSS 变量定义动画时长（var(--animation-slow)）
- 使用 --ease-emphasized 缓动函数
- 确保使用 max-height 和 opacity 进行动画
- Requirements: 4.1, 4.2, 4.4
- 4.2 添加切换按钮图标动画
- 为 #comments_toggle .btn-inner--icon i 添加 transition
- 在展开状态添加旋转变换
- 更新 template-parts/post-actions.php 中的 JavaScript 逻辑
- Requirements: 4.3
- 4.3 优化滚动位置稳定性
- 在 argontheme.js 中优化评论展开时的滚动处理
- 使用 requestAnimationFrame 确保动画流畅
- Requirements: 4.6
- 4.1 更新评论区容器过渡动画
-
5. 优化设置面板外观
- 5.1 更新设置面板容器样式
- 修改 #fabtn_blog_settings_popup 的圆角（16px）和阴影
- 添加 backdrop-filter 玻璃效果
- 优化内边距和间距
- Requirements: 2.1, 2.5
- 5.2 实现 Material 3 风格分段控件
- 创建 .segmented-control 和 .segmented-control-item 样式
- 更新字体和阴影选择器使用新的分段控件样式
- 选中状态使用纯色主题色背景
- Requirements: 2.3, 2.6
- 5.1 更新设置面板容器样式
-
6. 添加新主题变体样式
- 6.1 实现玻璃拟态（Glassmorphism）样式
- 创建 html.style-glass 选择器下的卡片和面板样式
- 使用 backdrop-filter: blur(20px) saturate(180%)
- 添加半透明背景和边框
- 支持暗色模式变体
- Requirements: 6.1
- 6.2 实现新拟态（Neumorphism）样式
- 创建 html.style-neumorphism 选择器下的卡片样式
- 使用双向阴影（凸起效果）
- 支持暗色模式变体
- Requirements: 6.2
- 6.3 添加样式切换功能
- 在 argontheme.js 中添加样式切换函数
- 更新 localStorage 存储逻辑
- 为主要元素添加 transition 支持样式切换动画
- Requirements: 6.4
- 6.4 在设置面板中添加样式选择器
- 添加样式预览按钮
- 绑定点击事件切换样式
- Requirements: 6.5
- 6.1 实现玻璃拟态（Glassmorphism）样式
-
7. Checkpoint - 验证 UI 优化功能
- 确保所有样式修改正确应用
- 测试各种浏览器兼容性
- 验证暗色模式下的显示效果
- 确保动画流畅无卡顿
- 如有问题请询问用户
-
8. 实现邮件模板基础系统
- 8.1 创建邮件模板目录和基础模板文件
- 创建 email-templates/ 目录
- 创建 email-templates/base.php 基础模板
- 实现页眉、内容区、页脚三段式结构
- 使用表格布局确保邮件客户端兼容性
- Requirements: 7.1, 7.7
- 8.2 实现邮件模板渲染函数
- 在 functions.php 中添加 argon_get_email_template() 函数
- 添加 argon_render_email() 模板变量替换函数
- 添加 argon_send_email() 统一邮件发送函数
- Requirements: 7.1
- 8.1 创建邮件模板目录和基础模板文件
-
9. 实现邮件模板后台设置
- 9.1 添加邮件模板设置选项
- 在 settings.php 中添加"邮件模板"设置区域
- 添加主题色选择器（颜色选择器控件）
- 添加 Logo 图片上传控件
- 添加博客显示名称输入框
- Requirements: 7.2, 7.3
- 9.2 添加页脚和社交链接设置
- 添加页脚版权信息文本框
- 添加社交链接输入组（Twitter、GitHub、微博等）
- 实现设置保存和读取逻辑
- Requirements: 7.4
- 9.3 实现邮件预览功能
- 添加 AJAX 预览接口 argon_preview_email
- 创建预览模态框 UI
- 支持预览评论通知和回复通知两种类型
- Requirements: 7.8
- 9.1 添加邮件模板设置选项
-
10. 实现具体邮件类型模板
- 10.1 创建评论通知邮件模板
- 创建 email-templates/comment-notify.php
- 包含评论者名称、文章标题、评论内容
- 添加"查看评论"按钮链接
- Requirements: 7.5
- 10.2 创建评论回复通知邮件模板
- 创建 email-templates/reply-notify.php
- 包含原评论内容、回复者名称、回复内容
- 添加"查看回复"按钮链接
- Requirements: 7.6
- 10.3 集成邮件模板到现有通知逻辑
- 修改 functions.php 中的评论通知发送逻辑
- 替换原有邮件内容为新模板渲染结果
- 确保向后兼容（设置为空时使用默认值）
- Requirements: 7.5, 7.6
- 10.1 创建评论通知邮件模板
-
11. Checkpoint - 验证邮件模板功能
- 测试邮件模板设置保存和读取
- 测试邮件预览功能
- 发送测试邮件验证实际效果
- 在 Gmail、Outlook 中验证显示效果
- 如有问题请询问用户
Notes
- 所有 CSS 修改应在 style.css 文件中进行
- JavaScript 修改应在 argontheme.js 文件中进行
- PHP 模板修改应在 template-parts/post-actions.php 中进行
- 邮件模板文件放置在 email-templates/ 目录
- 邮件模板设置添加到 settings.php
- 邮件模板函数添加到 functions.php
- 优先使用 CSS 变量以保持一致性和可维护性
- 动画应使用 GPU 加速属性（transform, opacity）以确保性能
- 邮件模板必须使用内联样式和表格布局以确保客户端兼容性