fix-backdrop-filter

2026-03-03 14:58:17 +08:00
parent e34bfe5047
commit 5c0abfd5da
12 changed files with 38098 additions and 4794 deletions
--- a/.kiro/specs/loading-animation-cleanup/design.md
+++ b/.kiro/specs/loading-animation-cleanup/design.md
@@ -0,0 +1,369 @@
+# 加载动画系统清理与文本效果修复 - 设计文档
+
+## 1. 架构概述
+
+本次优化分为两个独立模块：
+1. **加载动画清理模块**：移除旧代码，统一使用 `PageLoader`
+2. **文本效果修复模块**：为文本特效添加文章容器选择器支持
+
+## 2. 加载动画清理设计
+
+### 2.1 问题分析
+
+**旧代码位置**：`argontheme.js` 第 4970-5040 行
+
+**旧代码特征**：
+- 使用 `article-loading-overlay` ID
+- 手动创建 DOM 元素和骨架屏 HTML
+- 使用 `setInterval` 模拟进度
+- 监听 `window.load` 事件
+- PJAX 事件处理中重复创建相同元素
+
+**新系统特征**：
+- 使用 `PageLoader` 模块（IIFE 封装）
+- 统一的 `loading-*` 类名前缀
+- SVG 圆环进度指示器
+- 智能进度算法（缓动函数）
+- 延迟显示和最小显示时间控制
+
+### 2.2 清理策略
+
+#### 2.2.1 页面初始加载
+**旧代码**（需移除）：
+```javascript
+// 第 4970-4995 行
+var bar = document.getElementById('page-loading-bar');
+// ... 创建 article-loading-overlay ...
+window.addEventListener('load', function() { ... });
+```
+
+**新方案**：
+- 在 `DOMContentLoaded` 时调用 `PageLoader.show()`
+- 在 `window.load` 时调用 `PageLoader.hide()`
+- 已在现有代码中实现，无需修改
+
+#### 2.2.2 PJAX 加载动画
+**旧代码**（需移除）：
+```javascript
+// 第 4997-5033 行
+function initPjaxAnimations() {
+    jQuery(document).on('pjax:start', function() {
+        // ... 创建 article-loading-overlay ...
+    });
+    jQuery(document).on('pjax:end', function() {
+        // ... 移除 overlay ...
+    });
+}
+```
+
+**新方案**：
+- `pjax:start` 时调用 `PageLoader.show()`
+- `pjax:end` 时调用 `PageLoader.hide()`
+- 需要新增此部分代码
+
+### 2.3 实现步骤
+
+1. **定位旧代码**：确认第 4970-5040 行的完整范围
+2. **移除旧代码**：删除整个旧的加载动画实现
+3. **添加 PJAX 支持**：在 `PageLoader` 模块后添加 PJAX 事件监听
+4. **测试验证**：确保页面加载和 PJAX 导航都正常
+
+### 2.4 新增 PJAX 集成代码
+
+```javascript
+// PJAX 加载动画集成
+if (typeof jQuery !== 'undefined') {
+	jQuery(document).on('pjax:start', function() {
+		PageLoader.show();
+	});
+	
+	jQuery(document).on('pjax:end', function() {
+		PageLoader.hide();
+		// 重新初始化页面动画
+		setTimeout(function() {
+			initImageLoadAnimation();
+			initScrollAnimations();
+			initSmoothScroll();
+		}, 100);
+	});
+}
+```
+
+## 3. 文本效果修复设计
+
+### 3.1 问题分析
+
+**当前样式选择器**：
+```css
+.color-curtain { ... }
+.text-blur { ... }
+.huhua { ... }
+```
+
+**问题**：
+- 缺少文章容器选择器（`article .entry-content`、`.article-content`）
+- 在某些文章布局中可能不生效
+
+### 3.2 修复策略
+
+参考黑幕样式的修复方式，为每个文本效果添加文章容器选择器。
+
+#### 3.2.1 彩色黑幕（color-curtain）
+
+**当前样式**：
+```css
+.color-curtain, .color-curtain a, a .color-curtain, .color-curtain a.new {
+    background-color: var(--curtain-bg, #252525) !important;
+    color: var(--curtain-bg, #252525) !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+/* 基础样式 */
+.color-curtain,
+article .entry-content .color-curtain,
+.article-content .color-curtain {
+    background-color: var(--curtain-bg, #252525) !important;
+    color: var(--curtain-bg, #252525) !important;
+    /* ... */
+}
+
+/* 链接样式 */
+.color-curtain a,
+article .entry-content .color-curtain a,
+.article-content .color-curtain a {
+    color: inherit !important;
+    /* ... */
+}
+
+/* 悬停样式 */
+.color-curtain:hover,
+article .entry-content .color-curtain:hover,
+.article-content .color-curtain:hover {
+    color: var(--curtain-fg, #fff) !important;
+}
+```
+
+**夜间模式优化**：
+```css
+html.darkmode .color-curtain,
+html.darkmode article .entry-content .color-curtain,
+html.darkmode .article-content .color-curtain {
+    --curtain-bg: #1a1a1a;
+    --curtain-fg: #e0e0e0;
+}
+```
+
+#### 3.2.2 模糊文本（text-blur）
+
+**当前样式**：
+```css
+.text-blur, .text-blur a, a .text-blur, .text-blur a.new {
+    filter: blur(2px) !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+.text-blur,
+article .entry-content .text-blur,
+.article-content .text-blur {
+    filter: blur(2px) !important;
+    transition: filter var(--text-blur-transition-time, .2s) ease;
+    display: inline-block;
+}
+
+.text-blur:hover,
+article .entry-content .text-blur:hover,
+.article-content .text-blur:hover {
+    filter: none !important;
+}
+```
+
+#### 3.2.3 划掉文本（huhua）
+
+**当前样式**：
+```css
+.huhua {
+    color: #9ea3a9 !important;
+    text-decoration: line-through !important;
+    /* ... */
+}
+```
+
+**修复方案**：
+```css
+.huhua,
+article .entry-content .huhua,
+.article-content .huhua {
+    color: #9ea3a9 !important;
+    text-decoration: line-through !important;
+    text-shadow: none !important;
+    transition: color .2s ease;
+}
+
+.huhua:hover,
+article .entry-content .huhua:hover,
+.article-content .huhua:hover {
+    color: #7f858b !important;
+}
+```
+
+**夜间模式优化**：
+```css
+html.darkmode .huhua,
+html.darkmode article .entry-content .huhua,
+html.darkmode .article-content .huhua {
+    color: #6a7075 !important;
+}
+
+html.darkmode .huhua:hover,
+html.darkmode article .entry-content .huhua:hover,
+html.darkmode .article-content .huhua:hover {
+    color: #555a5f !important;
+}
+```
+
+### 3.3 代码组织
+
+在 `style.css` 中重新组织文本效果样式：
+
+```
+/* ==========================================================================
+   文章文本特效（Text Effects in Articles）
+   ========================================================================== */
+
+/* ---------- 彩色黑幕（Color Curtain） ---------- */
+/* 基础样式 */
+/* 链接样式 */
+/* 悬停样式 */
+/* 夜间模式 */
+
+/* ---------- 模糊文本（Text Blur） ---------- */
+/* 基础样式 */
+/* 悬停样式 */
+
+/* ---------- 划掉文本（Strikethrough） ---------- */
+/* 基础样式 */
+/* 悬停样式 */
+/* 夜间模式 */
+```
+
+## 4. 正确性属性（Correctness Properties）
+
+### 4.1 加载动画属性
+
+**Property 1.1**: 页面加载时必须显示加载动画
+- **验证方式**：刷新页面，观察是否出现 SVG 圆环进度指示器
+- **预期行为**：`DOMContentLoaded` 后显示，`window.load` 后隐藏
+
+**Property 1.2**: PJAX 导航时必须显示加载动画
+- **验证方式**：点击文章链接，观察是否出现加载动画
+- **预期行为**：`pjax:start` 后显示，`pjax:end` 后隐藏
+
+**Property 1.3**: 不存在旧的 `article-loading-overlay` 元素
+- **验证方式**：检查 DOM 树和控制台
+- **预期行为**：只有 `loading-overlay` 元素，无 `article-loading-overlay`
+
+### 4.2 文本效果属性
+
+**Property 2.1**: 文本效果在文章中可见
+- **验证方式**：在文章中添加 `<span class="color-curtain">测试</span>`
+- **预期行为**：文本被彩色背景遮盖
+
+**Property 2.2**: 悬停时文本效果正确响应
+- **验证方式**：鼠标悬停在文本效果上
+- **预期行为**：
+  - `color-curtain`：显示文本内容
+  - `text-blur`：取消模糊
+  - `huhua`：颜色变深
+
+**Property 2.3**: 夜间模式下颜色正确
+- **验证方式**：切换到夜间模式，检查文本效果颜色
+- **预期行为**：使用夜间模式专用颜色变量
+
+## 5. 测试策略
+
+### 5.1 单元测试（手动）
+
+1. **页面初始加载**
+   - 刷新页面
+   - 观察加载动画是否正常显示和隐藏
+   - 检查控制台是否有错误
+
+2. **PJAX 导航**
+   - 点击文章链接
+   - 观察加载动画是否正常显示和隐藏
+   - 检查页面内容是否正确更新
+
+3. **文本效果显示**
+   - 在文章编辑器中添加测试内容：
+     ```html
+     <span class="color-curtain">彩色黑幕测试</span>
+     <span class="text-blur">模糊文本测试</span>
+     <span class="huhua">划掉文本测试</span>
+     ```
+   - 发布文章并查看效果
+
+4. **文本效果交互**
+   - 鼠标悬停在每个文本效果上
+   - 验证交互行为是否正确
+
+5. **夜间模式**
+   - 切换到夜间模式
+   - 重复步骤 3 和 4
+
+### 5.2 回归测试
+
+- 验证其他页面功能未受影响
+- 验证移动端响应式布局正常
+- 验证浏览器兼容性（Chrome、Firefox、Safari、Edge）
+
+## 6. 风险评估
+
+### 6.1 高风险
+- **PJAX 功能失效**：移除旧代码可能影响 PJAX 导航
+  - **缓解措施**：仔细测试 PJAX 导航，确保新代码正确集成
+
+### 6.2 中风险
+- **样式冲突**：新增选择器可能与现有样式冲突
+  - **缓解措施**：使用 `!important` 确保优先级，参考黑幕样式的成功经验
+
+### 6.3 低风险
+- **性能影响**：新增选择器可能轻微影响 CSS 性能
+  - **缓解措施**：选择器数量有限，影响可忽略
+
+## 7. 实施计划
+
+### Phase 1: 清理旧加载动画代码
+1. 备份 `argontheme.js`
+2. 移除第 4970-5040 行旧代码
+3. 添加 PJAX 集成代码
+4. 测试页面加载和 PJAX 导航
+
+### Phase 2: 修复文本效果样式
+1. 备份 `style.css`
+2. 重构 `color-curtain` 样式
+3. 重构 `text-blur` 样式
+4. 重构 `huhua` 样式
+5. 添加夜间模式优化
+6. 测试所有文本效果
+
+### Phase 3: 验证和提交
+1. 完整回归测试
+2. 检查代码规范
+3. 编写详细的 Git commit 信息
+4. 提交代码
+
+## 8. 成功标准
+
+- ✅ 旧加载动画代码完全移除
+- ✅ 页面加载和 PJAX 导航动画正常工作
+- ✅ 所有文本效果在文章中正常显示和交互
+- ✅ 夜间模式下颜色正确
+- ✅ 无控制台错误或警告
+- ✅ 代码遵循项目规范
+- ✅ Git commit 信息详细清晰
--- a/.kiro/specs/loading-animation-cleanup/requirements.md
+++ b/.kiro/specs/loading-animation-cleanup/requirements.md
@@ -0,0 +1,69 @@
+# 加载动画系统清理与文本效果修复
+
+## 1. 概述
+
+清理旧的加载动画代码，统一使用新的 `PageLoader` 系统，并修复文章中文本特效样式不显示的问题。
+
+## 2. 背景
+
+在之前的优化中：
+- 创建了全新的 `PageLoader` 模块（SVG 圆环进度、智能进度算法、骨架屏）
+- 移除了向后兼容函数 `showLoadingOverlay()` 和 `hideLoadingOverlay()`
+- 修复了黑幕（`.heimu`）样式在文章中不显示的问题
+
+但仍存在以下问题：
+1. `argontheme.js` 第 4970-5040 行存在旧的加载动画代码，使用旧的 `article-loading-overlay` ID
+2. 其他文本效果（`color-curtain`、`text-blur`、`huhua`）可能在文章中不显示
+3. 代码冗余，维护困难
+
+## 3. 用户故事
+
+### 3.1 作为开发者
+我希望代码库中只有一套加载动画系统，这样：
+- 代码更易维护
+- 避免新旧系统冲突
+- 减少代码体积
+
+### 3.2 作为用户
+我希望在文章中使用的所有文本特效都能正常显示，包括：
+- 彩色黑幕（`color-curtain`）
+- 模糊文本（`text-blur`）
+- 划掉文本（`huhua`）
+
+## 4. 验收标准
+
+### 4.1 清理旧加载动画代码
+- [ ] 移除 `argontheme.js` 中第 4970-5040 行的旧加载动画代码
+- [ ] 确保所有加载动画调用都使用新的 `PageLoader` 系统
+- [ ] PJAX 加载动画正常工作
+- [ ] 页面初始加载动画正常工作
+
+### 4.2 修复文本效果样式
+- [ ] `color-curtain` 在文章中正常显示和交互
+- [ ] `text-blur` 在文章中正常显示和交互
+- [ ] `huhua` 在文章中正常显示和交互
+- [ ] 夜间模式下所有文本效果颜色正确
+
+### 4.3 代码质量
+- [ ] 遵循项目代码规范（Tab 缩进、单引号、严格相等）
+- [ ] 添加清晰的注释
+- [ ] 无控制台错误或警告
+
+## 5. 技术约束
+
+- 必须保持与现有 `PageLoader` 系统的兼容性
+- 不能破坏 PJAX 功能
+- 样式修复需要参考黑幕样式的修复方式（添加 `article .entry-content` 和 `.article-content` 选择器）
+- 遵循 Argon 主题代码规范
+
+## 6. 非功能性需求
+
+- 加载动画性能不能下降
+- 文本效果不能影响页面渲染性能
+- 代码体积应该减少（移除冗余代码）
+
+## 7. 排除范围
+
+- 不涉及其他页面元素的样式修复
+- 不涉及新功能开发
+- 不涉及其他 JavaScript 模块的重构
--- a/.kiro/specs/loading-animation-cleanup/tasks.md
+++ b/.kiro/specs/loading-animation-cleanup/tasks.md
@@ -0,0 +1,123 @@
+# 加载动画系统清理与文本效果修复 - 任务列表
+
+## 1. 准备工作
+- [ ] 1.1 备份 `argontheme.js` 到 `tmp/` 目录
+- [ ] 1.2 备份 `style.css` 到 `tmp/` 目录
+- [ ] 1.3 确认 `PageLoader` 模块正常工作
+
+## 2. 清理旧加载动画代码
+- [ ] 2.1 定位并移除 `argontheme.js` 第 4970-5040 行的旧代码
+  - 移除页面初始加载的旧实现
+  - 移除 `initPjaxAnimations()` 函数
+  - 移除相关的 `article-loading-overlay` 创建代码
+- [ ] 2.2 添加 PJAX 集成代码
+  - 在 `PageLoader` 模块后添加 PJAX 事件监听
+  - `pjax:start` 时调用 `PageLoader.show()`
+  - `pjax:end` 时调用 `PageLoader.hide()` 并重新初始化动画
+- [ ] 2.3 测试页面加载动画
+  - 刷新页面，验证加载动画正常显示和隐藏
+  - 检查控制台无错误
+- [ ] 2.4 测试 PJAX 导航动画
+  - 点击文章链接，验证加载动画正常显示和隐藏
+  - 验证页面内容正确更新
+  - 检查控制台无错误
+
+## 3. 修复彩色黑幕样式
+- [ ] 3.1 重构 `.color-curtain` 基础样式
+  - 添加 `article .entry-content .color-curtain` 选择器
+  - 添加 `.article-content .color-curtain` 选择器
+  - 保持原有样式属性
+- [ ] 3.2 重构 `.color-curtain` 链接样式
+  - 添加文章容器选择器支持
+  - 确保链接继承父元素样式
+- [ ] 3.3 重构 `.color-curtain` 悬停样式
+  - 添加文章容器选择器支持
+  - 确保悬停时正确显示文本
+- [ ] 3.4 添加夜间模式优化
+  - 设置 `--curtain-bg: #1a1a1a`
+  - 设置 `--curtain-fg: #e0e0e0`
+- [ ] 3.5 测试彩色黑幕效果
+  - 在文章中添加测试内容
+  - 验证默认状态和悬停状态
+  - 验证夜间模式颜色
+
+## 4. 修复模糊文本样式
+- [ ] 4.1 重构 `.text-blur` 基础样式
+  - 添加 `article .entry-content .text-blur` 选择器
+  - 添加 `.article-content .text-blur` 选择器
+  - 保持 `filter: blur(2px)` 效果
+- [ ] 4.2 重构 `.text-blur` 链接样式
+  - 添加文章容器选择器支持
+  - 确保链接也应用模糊效果
+- [ ] 4.3 重构 `.text-blur` 悬停样式
+  - 添加文章容器选择器支持
+  - 确保悬停时取消模糊
+- [ ] 4.4 测试模糊文本效果
+  - 在文章中添加测试内容
+  - 验证默认模糊和悬停清晰
+  - 验证夜间模式正常
+
+## 5. 修复划掉文本样式
+- [ ] 5.1 重构 `.huhua` 基础样式
+  - 添加 `article .entry-content .huhua` 选择器
+  - 添加 `.article-content .huhua` 选择器
+  - 保持 `text-decoration: line-through` 效果
+- [ ] 5.2 重构 `.huhua` 链接样式
+  - 添加文章容器选择器支持
+  - 确保链接继承样式
+- [ ] 5.3 重构 `.huhua` 悬停样式
+  - 添加文章容器选择器支持
+  - 确保悬停时颜色变深
+- [ ] 5.4 添加夜间模式优化
+  - 设置基础颜色 `#6a7075`
+  - 设置悬停颜色 `#555a5f`
+- [ ] 5.5 测试划掉文本效果
+  - 在文章中添加测试内容
+  - 验证默认状态和悬停状态
+  - 验证夜间模式颜色
+
+## 6. 代码优化和注释
+- [ ] 6.1 在 `style.css` 中添加结构化注释
+  - 添加 "文章文本特效" 大区块注释
+  - 为每个效果添加小区块注释
+  - 为关键样式添加说明注释
+- [ ] 6.2 检查代码规范
+  - 验证 Tab 缩进正确
+  - 验证属性独占一行
+  - 验证属性之间无多余空行
+  - 验证 JavaScript 使用 `let`/`const`
+
+## 7. 测试和验证
+- [ ] 7.1 完整功能测试
+  - 测试页面初始加载
+  - 测试 PJAX 导航
+  - 测试所有文本效果（日间模式）
+  - 测试所有文本效果（夜间模式）
+- [ ] 7.2 回归测试
+  - 验证其他页面功能正常
+  - 验证移动端响应式布局
+  - 验证浏览器兼容性
+- [ ] 7.3 性能检查
+  - 检查页面加载时间
+  - 检查控制台无警告
+  - 检查 DOM 元素数量合理
+
+## 8. 提交代码
+- [ ] 8.1 编写详细的 Git commit 信息
+  - 标题：`refactor: 清理旧加载动画代码并修复文本效果样式`
+  - 详细说明：
+    - 移除 argontheme.js 第 4970-5040 行旧代码
+    - 添加 PJAX 集成到 PageLoader 系统
+    - 为 color-curtain、text-blur、huhua 添加文章容器选择器
+    - 优化夜间模式颜色
+    - 添加结构化注释
+- [ ] 8.2 提交代码到 Git
+- [ ] 8.3 验证提交成功
+
+## 9. 文档更新（可选）
+- [ ]* 9.1 更新 `doc/argon-theme-training.md`
+  - 记录新的加载动画系统架构
+  - 记录文本效果的使用方法
+- [ ]* 9.2 创建文本效果使用示例
+  - 提供 HTML 代码示例
+  - 提供效果预览截图