feat: Argon WordPress主题完整版本
- 基于Argon主题的WordPress博客主题 - 支持响应式设计和暗色模式 - 包含完整的文章管理和评论系统 - 集成友情链接管理功能 - 支持多种自定义设置选项 - 优化的用户界面和交互体验
This commit is contained in:
438
.kiro/specs/global-ui-optimization/design.md
Normal file
438
.kiro/specs/global-ui-optimization/design.md
Normal file
@@ -0,0 +1,438 @@
|
||||
# Design Document: Global UI Optimization
|
||||
|
||||
## Overview
|
||||
|
||||
本设计文档描述 Argon WordPress 主题的全局 UI 优化方案，参考 Apple Human Interface Guidelines 和 Material Design 3 设计规范。优化重点包括：按钮样式现代化、设置面板重构、分享按钮动画增强、评论展开动画优化，以及新增多种设计风格选项。
|
||||
|
||||
## Architecture
|
||||
|
||||
### 设计系统架构
|
||||
|
||||
```
|
||||
┌─────────────────────────────────────────────────────────────┐
|
||||
│ CSS Variables Layer │
|
||||
│ (动画时长、缓动函数、颜色、圆角、阴影等设计令牌) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Base Components Layer │
|
||||
│ (按钮、卡片、输入框等基础组件样式) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Feature Components Layer │
|
||||
│ (设置面板、分享按钮、评论切换等功能组件) │
|
||||
├─────────────────────────────────────────────────────────────┤
|
||||
│ Theme Variants Layer │
|
||||
│ (玻璃拟态、新拟态、Material 3 等主题变体) │
|
||||
└─────────────────────────────────────────────────────────────┘
|
||||
```
|
||||
|
||||
### 文件结构
|
||||
|
||||
```
|
||||
style.css # 主样式文件（修改）
|
||||
argontheme.js # 主脚本文件（修改）
|
||||
template-parts/
|
||||
└── post-actions.php # 文章操作按钮模板（修改）
|
||||
```
|
||||
|
||||
## Components and Interfaces
|
||||
|
||||
### 1. 动画系统 CSS 变量
|
||||
|
||||
```css
|
||||
:root {
|
||||
/* 动画时长 */
|
||||
--animation-fast: 150ms;
|
||||
--animation-normal: 250ms;
|
||||
--animation-slow: 400ms;
|
||||
--animation-slower: 600ms;
|
||||
|
||||
/* 缓动函数 - Material 3 标准 */
|
||||
--ease-standard: cubic-bezier(0.2, 0, 0, 1);
|
||||
--ease-standard-decelerate: cubic-bezier(0, 0, 0, 1);
|
||||
--ease-standard-accelerate: cubic-bezier(0.3, 0, 1, 1);
|
||||
--ease-emphasized: cubic-bezier(0.2, 0, 0, 1);
|
||||
--ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1);
|
||||
--ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15);
|
||||
|
||||
/* 弹性缓动 */
|
||||
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
|
||||
--ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
||||
|
||||
/* 状态层透明度 - Material 3 */
|
||||
--state-hover-opacity: 0.08;
|
||||
--state-focus-opacity: 0.12;
|
||||
--state-pressed-opacity: 0.12;
|
||||
--state-dragged-opacity: 0.16;
|
||||
}
|
||||
```
|
||||
|
||||
### 2. 按钮组件设计
|
||||
|
||||
#### 主要按钮 (Filled Button)
|
||||
```css
|
||||
.btn-primary {
|
||||
background-color: var(--themecolor);
|
||||
border: none;
|
||||
border-radius: var(--card-radius);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
transition:
|
||||
background-color var(--animation-fast) var(--ease-standard),
|
||||
box-shadow var(--animation-fast) var(--ease-standard),
|
||||
transform var(--animation-fast) var(--ease-standard);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background-color: var(--themecolor-dark);
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.btn-primary:active {
|
||||
background-color: var(--themecolor-dark2);
|
||||
transform: scale(0.98);
|
||||
}
|
||||
```
|
||||
|
||||
#### 涟漪效果 (Ripple Effect)
|
||||
```css
|
||||
.btn-ripple {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.btn-ripple::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
background-image: radial-gradient(circle, rgba(255,255,255,0.3) 10%, transparent 10.01%);
|
||||
background-repeat: no-repeat;
|
||||
background-position: 50%;
|
||||
transform: scale(10, 10);
|
||||
opacity: 0;
|
||||
transition: transform var(--animation-slow), opacity var(--animation-normal);
|
||||
}
|
||||
|
||||
.btn-ripple:active::after {
|
||||
transform: scale(0, 0);
|
||||
opacity: 1;
|
||||
transition: 0s;
|
||||
}
|
||||
```
|
||||
|
||||
### 3. 设置面板设计
|
||||
|
||||
#### 面板容器
|
||||
```css
|
||||
#fabtn_blog_settings_popup {
|
||||
background: var(--color-foreground);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 8px 32px rgba(0, 0, 0, 0.12),
|
||||
0 2px 8px rgba(0, 0, 0, 0.08);
|
||||
padding: 16px 20px;
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
}
|
||||
```
|
||||
|
||||
#### 分段控件 (Segmented Control)
|
||||
```css
|
||||
.segmented-control {
|
||||
display: inline-flex;
|
||||
background: var(--color-widgets-disabled);
|
||||
border-radius: 10px;
|
||||
padding: 3px;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.segmented-control-item {
|
||||
padding: 6px 14px;
|
||||
border-radius: 8px;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--color-text-deeper);
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all var(--animation-fast) var(--ease-standard);
|
||||
}
|
||||
|
||||
.segmented-control-item.active {
|
||||
background: var(--themecolor);
|
||||
color: #fff;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
```
|
||||
|
||||
### 4. 分享按钮动画设计
|
||||
|
||||
#### 容器样式
|
||||
```css
|
||||
#share_container {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
#share {
|
||||
display: flex;
|
||||
gap: 6px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#share > a {
|
||||
opacity: 0;
|
||||
transform: scale(0.8) translateX(10px);
|
||||
}
|
||||
```
|
||||
|
||||
#### 展开动画
|
||||
```css
|
||||
#share_container.opened #share {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
#share_container.opened #share > a {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateX(0);
|
||||
transition:
|
||||
opacity var(--animation-normal) var(--ease-emphasized-decelerate),
|
||||
transform var(--animation-normal) var(--ease-spring);
|
||||
}
|
||||
|
||||
/* 错落动画延迟 */
|
||||
#share_container.opened #share > a:nth-child(1) { transition-delay: 0ms; }
|
||||
#share_container.opened #share > a:nth-child(2) { transition-delay: 30ms; }
|
||||
#share_container.opened #share > a:nth-child(3) { transition-delay: 60ms; }
|
||||
#share_container.opened #share > a:nth-child(4) { transition-delay: 90ms; }
|
||||
#share_container.opened #share > a:nth-child(5) { transition-delay: 120ms; }
|
||||
#share_container.opened #share > a:nth-child(6) { transition-delay: 150ms; }
|
||||
#share_container.opened #share > a:nth-child(7) { transition-delay: 180ms; }
|
||||
#share_container.opened #share > a:nth-child(8) { transition-delay: 210ms; }
|
||||
```
|
||||
|
||||
#### 主按钮变换
|
||||
```css
|
||||
#share_show {
|
||||
transition:
|
||||
transform var(--animation-normal) var(--ease-standard),
|
||||
opacity var(--animation-normal) var(--ease-standard);
|
||||
}
|
||||
|
||||
#share_container.opened #share_show {
|
||||
transform: rotate(45deg) scale(0.9);
|
||||
opacity: 0.7;
|
||||
}
|
||||
```
|
||||
|
||||
### 5. 评论展开动画设计
|
||||
|
||||
#### 评论区容器
|
||||
```css
|
||||
#comments, #post_comment {
|
||||
transition:
|
||||
max-height var(--animation-slow) var(--ease-emphasized),
|
||||
opacity var(--animation-normal) var(--ease-standard),
|
||||
margin var(--animation-slow) var(--ease-standard),
|
||||
padding var(--animation-slow) var(--ease-standard);
|
||||
overflow: hidden;
|
||||
will-change: max-height, opacity;
|
||||
}
|
||||
|
||||
#comments.comments-collapsed,
|
||||
#post_comment.comments-collapsed {
|
||||
max-height: 0 !important;
|
||||
opacity: 0;
|
||||
margin-top: 0 !important;
|
||||
margin-bottom: 0 !important;
|
||||
padding-top: 0 !important;
|
||||
padding-bottom: 0 !important;
|
||||
border: none !important;
|
||||
}
|
||||
|
||||
#comments:not(.comments-collapsed),
|
||||
#post_comment:not(.comments-collapsed) {
|
||||
max-height: 9999px;
|
||||
opacity: 1;
|
||||
}
|
||||
```
|
||||
|
||||
#### 切换按钮图标动画
|
||||
```css
|
||||
#comments_toggle .btn-inner--icon i {
|
||||
transition: transform var(--animation-normal) var(--ease-spring);
|
||||
}
|
||||
|
||||
#comments_toggle.expanded .btn-inner--icon i {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
```
|
||||
|
||||
### 6. 主题变体设计
|
||||
|
||||
#### 玻璃拟态 (Glassmorphism)
|
||||
```css
|
||||
html.style-glass .card,
|
||||
html.style-glass #fabtn_blog_settings_popup {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(20px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
html.darkmode.style-glass .card,
|
||||
html.darkmode.style-glass #fabtn_blog_settings_popup {
|
||||
background: rgba(66, 66, 66, 0.7);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
```
|
||||
|
||||
#### 新拟态 (Neumorphism)
|
||||
```css
|
||||
html.style-neumorphism .card {
|
||||
background: var(--color-background);
|
||||
box-shadow:
|
||||
8px 8px 16px rgba(0, 0, 0, 0.1),
|
||||
-8px -8px 16px rgba(255, 255, 255, 0.8);
|
||||
border: none;
|
||||
}
|
||||
|
||||
html.darkmode.style-neumorphism .card {
|
||||
box-shadow:
|
||||
8px 8px 16px rgba(0, 0, 0, 0.3),
|
||||
-8px -8px 16px rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
```
|
||||
|
||||
## Data Models
|
||||
|
||||
### 设置存储结构
|
||||
|
||||
```javascript
|
||||
// localStorage 存储的设置项
|
||||
{
|
||||
'Argon_UI_Style': 'default' | 'glass' | 'neumorphism',
|
||||
'Argon_Animation_Reduced': 'true' | 'false',
|
||||
'Argon_Use_Serif': 'true' | 'false',
|
||||
'Argon_Use_Big_Shadow': 'true' | 'false',
|
||||
'Argon_Filter': 'off' | 'sunset' | 'darkness' | 'grayscale'
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## 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.*
|
||||
|
||||
### Property 1: 按钮使用纯色背景
|
||||
|
||||
*For any* 主要按钮元素（.btn-primary, #share .btn, #comments_toggle），其 background 属性应该使用纯色（var(--themecolor) 或具体颜色值），而不包含 gradient 关键字。
|
||||
|
||||
**Validates: Requirements 1.1, 3.6**
|
||||
|
||||
### Property 2: 组件使用主题色 CSS 变量
|
||||
|
||||
*For any* 使用主题色的组件（按钮、选中状态、链接等），其颜色相关属性应该使用 var(--themecolor) 或其派生变量（--themecolor-dark, --themecolor-light 等），而非硬编码的颜色值。
|
||||
|
||||
**Validates: Requirements 1.4, 2.3**
|
||||
|
||||
### Property 3: 动画系统 CSS 变量定义
|
||||
|
||||
*For any* 动画相关的 CSS 变量，:root 选择器中应该定义 --animation-fast, --animation-normal, --animation-slow 时长变量，以及 --ease-standard, --ease-emphasized, --ease-spring 等缓动函数变量。
|
||||
|
||||
**Validates: Requirements 5.1, 5.2**
|
||||
|
||||
### Property 4: 分享按钮错落动画延迟
|
||||
|
||||
*For any* 分享按钮容器中的子元素（#share > a），每个元素应该有递增的 transition-delay 值，形成错落有致的动画效果。
|
||||
|
||||
**Validates: Requirements 3.2**
|
||||
|
||||
### Property 5: 评论区过渡动画属性
|
||||
|
||||
*For any* 评论区容器（#comments, #post_comment），其 transition 属性应该包含 max-height 和 opacity，并使用 CSS 变量定义的动画时长。
|
||||
|
||||
**Validates: Requirements 4.1, 4.2, 4.4**
|
||||
|
||||
### Property 6: GPU 加速动画属性
|
||||
|
||||
*For any* 交互动画（悬停、点击、展开/收起），应该主要使用 transform 和 opacity 属性进行动画，而非 width, height, top, left 等触发重排的属性。
|
||||
|
||||
**Validates: Requirements 5.3**
|
||||
|
||||
### Property 7: 样式切换过渡动画
|
||||
|
||||
*For any* 主要容器元素（.card, #fabtn_blog_settings_popup），应该定义 transition 属性覆盖 background-color 和 box-shadow 的变化，以支持样式切换时的平滑过渡。
|
||||
|
||||
**Validates: Requirements 6.4**
|
||||
|
||||
## Error Handling
|
||||
|
||||
### CSS 兼容性处理
|
||||
|
||||
1. **backdrop-filter 不支持时的降级**
|
||||
- 使用 @supports 查询检测支持情况
|
||||
- 降级为纯色背景加透明度
|
||||
|
||||
2. **CSS 变量不支持时的降级**
|
||||
- 在变量值前提供硬编码的回退值
|
||||
- 示例：`transition: all 250ms ease; transition: all var(--animation-normal) var(--ease-standard);`
|
||||
|
||||
3. **prefers-reduced-motion 处理**
|
||||
- 检测用户偏好减少动画
|
||||
- 将所有动画时长设为 0 或极短值
|
||||
|
||||
### JavaScript 错误处理
|
||||
|
||||
1. **localStorage 不可用**
|
||||
- 使用 try-catch 包装存储操作
|
||||
- 降级为内存存储或 cookie
|
||||
|
||||
2. **动画 API 不支持**
|
||||
- 检测 Web Animations API 支持
|
||||
- 降级为 CSS transition
|
||||
|
||||
## Testing Strategy
|
||||
|
||||
### 单元测试
|
||||
|
||||
1. **CSS 变量定义测试**
|
||||
- 验证所有必需的 CSS 变量已定义
|
||||
- 验证变量值格式正确
|
||||
|
||||
2. **样式类存在性测试**
|
||||
- 验证 .style-glass, .style-neumorphism 等类已定义
|
||||
- 验证 .segmented-control 组件样式已定义
|
||||
|
||||
3. **JavaScript 功能测试**
|
||||
- 验证样式切换函数正确更新 localStorage
|
||||
- 验证分享按钮展开/收起逻辑
|
||||
|
||||
### 属性测试
|
||||
|
||||
由于本功能主要涉及 CSS 样式和视觉效果，属性测试将通过以下方式进行：
|
||||
|
||||
1. **CSS 解析验证**
|
||||
- 解析 style.css 文件
|
||||
- 验证按钮背景不包含 gradient
|
||||
- 验证动画属性使用 CSS 变量
|
||||
|
||||
2. **DOM 结构验证**
|
||||
- 验证分享按钮子元素具有递增的 transition-delay
|
||||
- 验证评论区容器具有正确的 transition 属性
|
||||
|
||||
### 视觉回归测试（可选）
|
||||
|
||||
1. 使用截图对比工具验证样式变更
|
||||
2. 在不同浏览器中验证兼容性
|
||||
91
.kiro/specs/global-ui-optimization/requirements.md
Normal file
91
.kiro/specs/global-ui-optimization/requirements.md
Normal file
@@ -0,0 +1,91 @@
|
||||
# Requirements Document
|
||||
|
||||
## Introduction
|
||||
|
||||
本文档定义了 Argon WordPress 主题全局页面显示优化的需求，参考 Apple 设计语言和 Material Design 3 设计规范，优化设置页面外观、按钮样式、转发按钮动画效果以及评论展开动画效果。
|
||||
|
||||
## Glossary
|
||||
|
||||
- **Theme_System**: Argon 主题的核心样式系统，包含 CSS 变量和基础组件
|
||||
- **Settings_Panel**: 浮动按钮栏中的博客设置弹窗组件
|
||||
- **Share_Button**: 文章分享按钮组件，包含展开/收起动画
|
||||
- **Comments_Toggle**: 评论区展开/折叠切换按钮和动画系统
|
||||
- **Button_Component**: 主题中的通用按钮组件
|
||||
- **Animation_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 样式选项在设置面板中可预览
|
||||
111
.kiro/specs/global-ui-optimization/tasks.md
Normal file
111
.kiro/specs/global-ui-optimization/tasks.md
Normal file
@@ -0,0 +1,111 @@
|
||||
# Implementation Plan: Global UI Optimization
|
||||
|
||||
## Overview
|
||||
|
||||
本实现计划将 Argon 主题的 UI 优化分为 6 个主要任务，按照依赖关系顺序执行。首先建立动画系统基础，然后逐步优化各个组件，最后添加新的主题变体。
|
||||
|
||||
## Tasks
|
||||
|
||||
- [x] 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_
|
||||
|
||||
- [x] 2. 优化按钮组件样式
|
||||
- [x] 2.1 修改 .btn-primary 样式，移除渐变背景，使用纯色主题色
|
||||
- 更新 background 属性使用 var(--themecolor)
|
||||
- 添加悬停状态颜色加深和阴影提升效果
|
||||
- 添加按下状态颜色加深和缩放效果
|
||||
- 使用 var(--card-radius) 统一圆角
|
||||
- _Requirements: 1.1, 1.2, 1.3, 1.4_
|
||||
- [x] 2.2 添加涟漪效果（ripple effect）
|
||||
- 创建 .btn-ripple 类实现 CSS 涟漪动画
|
||||
- 使用 ::after 伪元素和 radial-gradient 实现
|
||||
- _Requirements: 1.5_
|
||||
|
||||
- [x] 3. 优化分享按钮动画效果
|
||||
- [x] 3.1 更新分享按钮容器样式
|
||||
- 修改 #share_container 和 #share 的布局样式
|
||||
- 使用 flexbox 和 gap 属性优化间距
|
||||
- _Requirements: 3.4_
|
||||
- [x] 3.2 实现错落有致的展开动画
|
||||
- 为 #share > a 添加初始状态（opacity: 0, transform: scale(0.8) translateX(10px)）
|
||||
- 为每个子元素添加递增的 transition-delay（30ms 间隔）
|
||||
- 使用 --ease-spring 缓动函数
|
||||
- _Requirements: 3.1, 3.2_
|
||||
- [x] 3.3 优化主按钮变换动画
|
||||
- 修改 #share_show 的 .opened 状态样式
|
||||
- 添加旋转和缩放变换（rotate(45deg) scale(0.9)）
|
||||
- _Requirements: 3.3_
|
||||
- [x] 3.4 更新分享图标按钮为纯色背景
|
||||
- 移除 template-parts/post-actions.php 中按钮的 style 属性中的渐变
|
||||
- 使用纯色背景色
|
||||
- _Requirements: 3.6_
|
||||
|
||||
- [x] 4. 优化评论展开动画效果
|
||||
- [x] 4.1 更新评论区容器过渡动画
|
||||
- 修改 #comments 和 #post_comment 的 transition 属性
|
||||
- 使用 CSS 变量定义动画时长（var(--animation-slow)）
|
||||
- 使用 --ease-emphasized 缓动函数
|
||||
- 确保使用 max-height 和 opacity 进行动画
|
||||
- _Requirements: 4.1, 4.2, 4.4_
|
||||
- [x] 4.2 添加切换按钮图标动画
|
||||
- 为 #comments_toggle .btn-inner--icon i 添加 transition
|
||||
- 在展开状态添加旋转变换
|
||||
- 更新 template-parts/post-actions.php 中的 JavaScript 逻辑
|
||||
- _Requirements: 4.3_
|
||||
- [x] 4.3 优化滚动位置稳定性
|
||||
- 在 argontheme.js 中优化评论展开时的滚动处理
|
||||
- 使用 requestAnimationFrame 确保动画流畅
|
||||
- _Requirements: 4.6_
|
||||
|
||||
- [x] 5. 优化设置面板外观
|
||||
- [x] 5.1 更新设置面板容器样式
|
||||
- 修改 #fabtn_blog_settings_popup 的圆角（16px）和阴影
|
||||
- 添加 backdrop-filter 玻璃效果
|
||||
- 优化内边距和间距
|
||||
- _Requirements: 2.1, 2.5_
|
||||
- [x] 5.2 实现 Material 3 风格分段控件
|
||||
- 创建 .segmented-control 和 .segmented-control-item 样式
|
||||
- 更新字体和阴影选择器使用新的分段控件样式
|
||||
- 选中状态使用纯色主题色背景
|
||||
- _Requirements: 2.3, 2.6_
|
||||
|
||||
- [x] 6. 添加新主题变体样式
|
||||
- [x] 6.1 实现玻璃拟态（Glassmorphism）样式
|
||||
- 创建 html.style-glass 选择器下的卡片和面板样式
|
||||
- 使用 backdrop-filter: blur(20px) saturate(180%)
|
||||
- 添加半透明背景和边框
|
||||
- 支持暗色模式变体
|
||||
- _Requirements: 6.1_
|
||||
- [x] 6.2 实现新拟态（Neumorphism）样式
|
||||
- 创建 html.style-neumorphism 选择器下的卡片样式
|
||||
- 使用双向阴影（凸起效果）
|
||||
- 支持暗色模式变体
|
||||
- _Requirements: 6.2_
|
||||
- [x] 6.3 添加样式切换功能
|
||||
- 在 argontheme.js 中添加样式切换函数
|
||||
- 更新 localStorage 存储逻辑
|
||||
- 为主要元素添加 transition 支持样式切换动画
|
||||
- _Requirements: 6.4_
|
||||
- [x] 6.4 在设置面板中添加样式选择器
|
||||
- 添加样式预览按钮
|
||||
- 绑定点击事件切换样式
|
||||
- _Requirements: 6.5_
|
||||
|
||||
- [ ] 7. Checkpoint - 验证所有功能
|
||||
- 确保所有样式修改正确应用
|
||||
- 测试各种浏览器兼容性
|
||||
- 验证暗色模式下的显示效果
|
||||
- 确保动画流畅无卡顿
|
||||
- 如有问题请询问用户
|
||||
|
||||
## Notes
|
||||
|
||||
- 所有 CSS 修改应在 style.css 文件中进行
|
||||
- JavaScript 修改应在 argontheme.js 文件中进行
|
||||
- PHP 模板修改应在 template-parts/post-actions.php 中进行
|
||||
- 优先使用 CSS 变量以保持一致性和可维护性
|
||||
- 动画应使用 GPU 加速属性（transform, opacity）以确保性能
|
||||
23
.kiro/steering/communication.md
Normal file
23
.kiro/steering/communication.md
Normal file
@@ -0,0 +1,23 @@
|
||||
# 交流规范
|
||||
|
||||
## 语言
|
||||
- 与用户交流时使用中文
|
||||
- 代码注释可以使用英文或中文，根据项目现有风格保持一致
|
||||
|
||||
## Git 提交规范
|
||||
- 功能修复和添加功能使用不同的 git commit/push
|
||||
- 修复类提交：`fix: 简要描述修复内容`
|
||||
- 功能类提交：`feat: 简要描述新功能`
|
||||
- commit 信息应包含详细的修改说明，格式如下：
|
||||
```
|
||||
fix/feat: 简要标题
|
||||
|
||||
- 具体修改点1
|
||||
- 具体修改点2
|
||||
- ...
|
||||
```
|
||||
|
||||
## 回答风格
|
||||
- 内容详略得当，重点突出
|
||||
- 通俗易懂，避免过度技术化的表述
|
||||
- 修复报告应写在 git commit 信息中，而非对话回复中
|
||||
285
.kiro/steering/settings-page-guide.md
Normal file
285
.kiro/steering/settings-page-guide.md
Normal file
@@ -0,0 +1,285 @@
|
||||
---
|
||||
inclusion: fileMatch
|
||||
fileMatchPattern: "settings.php"
|
||||
---
|
||||
|
||||
# Argon 主题设置页开发指南
|
||||
|
||||
本文档为 AI 助手和开发者提供 `settings.php` 文件的结构说明和开发规范。
|
||||
|
||||
## 文件概述
|
||||
|
||||
`settings.php` 是 Argon 主题的核心设置页面，包含所有主题配置选项。该文件通过 WordPress 后台管理界面呈现给用户。
|
||||
|
||||
## 设置页分类结构
|
||||
|
||||
设置页采用 **二级分类** 结构：
|
||||
- **一级分类 (h2)**：主要功能模块
|
||||
- **二级分类 (h3)**：模块内的子功能
|
||||
|
||||
### 分类层级（当前结构）
|
||||
|
||||
```
|
||||
1. 基础设置 (section-basic)
|
||||
├── 主题色 (subsection-theme-color)
|
||||
└── 夜间模式 (subsection-dark-mode)
|
||||
|
||||
2. 外观样式 (section-appearance)
|
||||
├── 卡片样式 (subsection-card-style)
|
||||
└── 字体 (subsection-font)
|
||||
|
||||
3. 页面布局 (section-layout)
|
||||
└── 整体布局 (subsection-page-layout)
|
||||
|
||||
4. 顶栏设置 (section-toolbar)
|
||||
├── 基本设置 (subsection-toolbar-basic)
|
||||
├── 顶栏标题 (subsection-toolbar-title)
|
||||
├── 顶栏图标 (subsection-toolbar-icon)
|
||||
├── 顶栏外观 (subsection-toolbar-appearance)
|
||||
└── 自定义链接 (subsection-toolbar-links)
|
||||
|
||||
5. Banner 设置 (section-banner)
|
||||
├── Banner 内容 (subsection-banner-content)
|
||||
├── Banner 外观 (subsection-banner-appearance)
|
||||
└── Banner 动画 (subsection-banner-animation)
|
||||
|
||||
6. 页面背景 (section-background)
|
||||
├── 背景图片 (subsection-background-image)
|
||||
└── 透明度与毛玻璃 (subsection-transparency)
|
||||
|
||||
7. 侧边栏 (section-sidebar)
|
||||
├── 作者信息 (subsection-author-info)
|
||||
├── 扩展功能 (subsection-sidebar-features)
|
||||
└── 博客公告 (subsection-announcement)
|
||||
|
||||
8. 浮动按钮与页脚 (section-fab-footer)
|
||||
├── 浮动操作按钮 (subsection-fab)
|
||||
└── 页脚设置 (subsection-footer)
|
||||
|
||||
9. 高级设置 (section-advanced)
|
||||
├── SEO (subsection-seo)
|
||||
├── CDN (subsection-cdn)
|
||||
├── 子目录 (subsection-subdirectory)
|
||||
├── 日期格式 (subsection-date-format)
|
||||
├── 自定义脚本 (subsection-scripts)
|
||||
└── 杂项 (subsection-misc)
|
||||
|
||||
10. 文章显示 (section-post-display)
|
||||
├── Meta 信息 (subsection-post-meta)
|
||||
├── 文章头图 (subsection-thumbnail)
|
||||
├── 标题样式 (subsection-title-style)
|
||||
└── 过时提示 (subsection-post-other)
|
||||
|
||||
11. 文章功能 (section-post-features)
|
||||
├── 脚注引用 (subsection-footnote)
|
||||
├── 分享按钮 (subsection-share)
|
||||
├── 文章目录 (subsection-toc)
|
||||
├── 赞赏功能 (subsection-donate)
|
||||
├── 文末内容 (subsection-post-footer)
|
||||
└── 相似推荐 (subsection-related-posts)
|
||||
|
||||
12. 特殊页面 (section-special-pages)
|
||||
├── 归档页面 (subsection-archive)
|
||||
├── 搜索设置 (subsection-search)
|
||||
└── 友情链接 (subsection-friend-links)
|
||||
|
||||
13. 功能增强 (section-enhancements)
|
||||
├── 代码高亮 (subsection-code-highlight)
|
||||
├── 数学公式 (subsection-math)
|
||||
├── Lazyload (subsection-lazyload)
|
||||
├── 图片放大 (subsection-lightbox)
|
||||
├── Pangu.js (subsection-pangu)
|
||||
└── 动画效果 (subsection-animation)
|
||||
|
||||
14. 评论设置 (section-comment)
|
||||
├── 评论分页 (subsection-comment-pagination)
|
||||
├── 发送评论 (subsection-comment-submit)
|
||||
├── 评论功能 (subsection-comment-features)
|
||||
└── 评论区外观 (subsection-comment-appearance)
|
||||
|
||||
15. 验证码与安全 (section-security)
|
||||
├── 验证码设置 (subsection-captcha)
|
||||
├── 场景验证码 (subsection-captcha-scenes)
|
||||
└── 速率限制 (subsection-rate-limit)
|
||||
```
|
||||
|
||||
## HTML 结构规范
|
||||
|
||||
### 一级分类标题 (h2)
|
||||
```php
|
||||
<!-- ========== N. 分类名称 ========== -->
|
||||
<tr><th class="subtitle"><h2 id="section-{section-id}"><?php _e("分类名称", 'argon');?></h2></th></tr>
|
||||
```
|
||||
|
||||
### 二级分类标题 (h3)
|
||||
```php
|
||||
<tr><th class="subtitle"><h3 id="subsection-{subsection-id}"><?php _e("子分类名称", 'argon');?></h3></th></tr>
|
||||
```
|
||||
|
||||
### 设置项结构
|
||||
```php
|
||||
<tr>
|
||||
<th><label><?php _e("设置项名称", 'argon');?></label></th>
|
||||
<td>
|
||||
<!-- 输入控件 -->
|
||||
<p class="description"><?php _e("设置项说明", 'argon');?></p>
|
||||
</td>
|
||||
</tr>
|
||||
```
|
||||
|
||||
## 常用输入控件
|
||||
|
||||
### 下拉选择框
|
||||
```php
|
||||
<select name="argon_option_name">
|
||||
<?php $value = get_option('argon_option_name', 'default'); ?>
|
||||
<option value="value1" <?php if ($value=='value1'){echo 'selected';} ?>><?php _e('选项1', 'argon');?></option>
|
||||
<option value="value2" <?php if ($value=='value2'){echo 'selected';} ?>><?php _e('选项2', 'argon');?></option>
|
||||
</select>
|
||||
```
|
||||
|
||||
### 文本输入框
|
||||
```php
|
||||
<input type="text" class="regular-text" name="argon_option_name" value="<?php echo get_option('argon_option_name', ''); ?>"/>
|
||||
```
|
||||
|
||||
### 数字输入框
|
||||
```php
|
||||
<input type="number" name="argon_option_name" min="0" max="100" value="<?php echo get_option('argon_option_name', '50'); ?>"/>
|
||||
```
|
||||
|
||||
### 复选框
|
||||
```php
|
||||
<?php $checked = get_option('argon_option_name', 'false'); ?>
|
||||
<label>
|
||||
<input type="checkbox" name="argon_option_name" value="true" <?php if ($checked=='true'){echo 'checked';}?>/>
|
||||
<?php _e('选项说明', 'argon');?>
|
||||
</label>
|
||||
```
|
||||
|
||||
### 颜色选择器
|
||||
```php
|
||||
<input type="color" name="argon_option_name" value="<?php echo get_option('argon_option_name', '#5e72e4'); ?>" style="height:40px;width:80px;cursor:pointer;"/>
|
||||
```
|
||||
|
||||
### 多行文本框
|
||||
```php
|
||||
<textarea name="argon_option_name" rows="5" cols="70"><?php echo get_option('argon_option_name', ''); ?></textarea>
|
||||
```
|
||||
|
||||
## 选项保存
|
||||
|
||||
在文件末尾的 `argon_update_themeoptions()` 函数中添加选项保存：
|
||||
|
||||
```php
|
||||
// 普通选项
|
||||
argon_update_option('argon_option_name');
|
||||
|
||||
// 允许 HTML 标签的选项
|
||||
argon_update_option_allow_tags('argon_option_name');
|
||||
|
||||
// 复选框选项
|
||||
argon_update_option_checkbox('argon_option_name');
|
||||
```
|
||||
|
||||
## 国际化
|
||||
|
||||
所有用户可见文本必须使用 `_e()` 或 `__()` 函数包裹：
|
||||
|
||||
```php
|
||||
<?php _e("文本内容", 'argon');?>
|
||||
<?php echo __("文本内容", 'argon');?>
|
||||
<?php echo sprintf(__('包含 %s 的文本', 'argon'), $variable);?>
|
||||
```
|
||||
|
||||
## 设置项归属参考
|
||||
|
||||
### 应归入"基础设置"的选项
|
||||
- argon_theme_color (主题颜色)
|
||||
- argon_enable_immersion_color (沉浸式主题色)
|
||||
- argon_show_customize_theme_color_picker (允许用户自定义主题色)
|
||||
- argon_darkmode_autoswitch (夜间模式切换方案)
|
||||
- argon_enable_amoled_dark (夜间模式颜色方案)
|
||||
- argon_dateformat (日期格式)
|
||||
|
||||
### 应归入"外观样式"的选项
|
||||
- argon_card_radius (卡片圆角)
|
||||
- argon_card_shadow (卡片阴影)
|
||||
- argon_font (默认字体)
|
||||
- argon_enable_smoothscroll_type (平滑滚动)
|
||||
- argon_enable_into_article_animation (进入文章动画)
|
||||
- argon_disable_pjax_animation (禁用 Pjax 动画)
|
||||
|
||||
### 应归入"页面布局"的选项
|
||||
- argon_page_layout (页面布局)
|
||||
- argon_article_list_waterflow (文章列表布局)
|
||||
- argon_article_list_layout (文章列表卡片布局)
|
||||
|
||||
### 应归入"顶栏设置"的选项
|
||||
- argon_enable_headroom (顶栏显示状态)
|
||||
- argon_toolbar_title (顶栏标题)
|
||||
- argon_toolbar_icon (图标地址)
|
||||
- argon_toolbar_icon_link (图标链接)
|
||||
- argon_toolbar_blur (毛玻璃效果)
|
||||
- argon_toolbar_style (顶栏样式)
|
||||
- argon_toolbar_shadow (顶栏阴影)
|
||||
- argon_toolbar_border (底部边框)
|
||||
- argon_toolbar_compact (紧凑模式)
|
||||
- argon_toolbar_center (标题居中)
|
||||
- argon_toolbar_links_left (左侧自定义链接)
|
||||
- argon_toolbar_links_right (右侧自定义链接)
|
||||
|
||||
### 应归入"Banner 设置"的选项
|
||||
- argon_banner_title (Banner 标题)
|
||||
- argon_banner_subtitle (Banner 副标题)
|
||||
- argon_banner_size (Banner 显示状态)
|
||||
- argon_page_background_banner_style (Banner 透明化)
|
||||
- argon_show_toolbar_mask (顶栏遮罩)
|
||||
- argon_banner_background_url (背景图地址)
|
||||
- argon_banner_background_color_type (渐变背景样式)
|
||||
- argon_banner_background_hide_shapes (隐藏背景圆)
|
||||
- argon_enable_banner_title_typing_effect (打字动画)
|
||||
- argon_banner_typing_effect_interval (打字动画时长)
|
||||
|
||||
### 应归入"侧边栏"的选项
|
||||
- argon_sidebar_banner_title (左侧栏标题)
|
||||
- argon_sidebar_banner_subtitle (左侧栏子标题)
|
||||
- argon_sidebar_auther_name (作者名称)
|
||||
- argon_sidebar_auther_image (作者头像)
|
||||
- argon_sidebar_author_description (作者简介)
|
||||
- argon_show_todo_list (TODO 列表)
|
||||
- argon_show_duolingo_streak (多邻国连胜)
|
||||
- argon_duolingo_username (多邻国用户名)
|
||||
- argon_sidebar_announcement (公告内容)
|
||||
- argon_show_headindex_number (目录序号)
|
||||
|
||||
### 应归入"验证码与安全"的选项
|
||||
- argon_need_captcha (全局验证码开关)
|
||||
- argon_captcha_type (验证码类型)
|
||||
- argon_geetest_captcha_id (极验 ID)
|
||||
- argon_geetest_captcha_key (极验 Key)
|
||||
- argon_geetest_api_server (极验服务器)
|
||||
- argon_get_captcha_by_ajax (Ajax 获取验证码)
|
||||
- argon_comment_captcha_mode (评论验证码)
|
||||
- argon_todo_captcha_mode (TODO 验证码)
|
||||
- argon_friend_link_captcha (友链验证码)
|
||||
- argon_rate_limit_enable (速率限制)
|
||||
- argon_rate_limit_window (速率窗口)
|
||||
- argon_rate_limit_max_count (最大次数)
|
||||
- argon_rate_limit_min_interval (最小间隔)
|
||||
|
||||
## 注意事项
|
||||
|
||||
1. **选项命名**：所有选项名必须以 `argon_` 前缀开头
|
||||
2. **默认值**：使用 `get_option('name', 'default')` 的第二个参数设置默认值
|
||||
3. **安全性**：用户输入的 HTML 内容需使用 `argon_update_option_allow_tags()` 保存
|
||||
4. **响应式**：设置页需要在移动端正常显示
|
||||
5. **目录导航**：页面右侧有自动生成的目录，h2/h3 标题会被收录
|
||||
|
||||
## 相关文件
|
||||
|
||||
- `functions.php` - 主题函数，包含选项的使用逻辑
|
||||
- `header.php` - 页头，使用顶栏相关选项
|
||||
- `footer.php` - 页脚，使用页脚相关选项
|
||||
- `style.css` - 主题样式
|
||||
- `admin.css` - 后台样式
|
||||
Reference in New Issue
Block a user