diff --git a/.kiro/specs/privacy-page-mobile-ui/design.md b/.kiro/specs/privacy-page-mobile-ui/design.md index e69de29..fa19be7 100644 --- a/.kiro/specs/privacy-page-mobile-ui/design.md +++ b/.kiro/specs/privacy-page-mobile-ui/design.md @@ -0,0 +1,93 @@ +# Design Document: Privacy Page Mobile UI Optimization + +## Overview + +本设计文档描述了 Argon 主题隐私政策页面移动端 UI 问题的修复方案。核心问题是隐私政策页面未正确应用全局样式设置,导致侧边抽屉功能异常和文章页面转发动画问题。 + +修复策略是确保隐私政策页面正确加载和初始化全局 JavaScript 功能,同时优化相关 CSS 动画效果。 + +## Architecture + +隐私政策页面需要正确继承全局组件: +- Sidebar Drawer 侧边抽屉(包含 TOC、Duolingo、Theme Switcher) +- Share Panel 分享面板 +- Ripple Effect 涟漪点击效果 + +## Components and Interfaces + +### 1. TOC Generator (文章目录生成器) + +解析页面标题元素并生成导航目录,需确保在隐私政策页面正确初始化。 + +### 2. Duolingo Streak (多邻国连胜组件) + +显示博主的多邻国学习连胜记录,需在隐私政策页面与其他页面保持一致。 + +### 3. Ripple Effect (涟漪效果) + +涟漪动画需修改为:从点击位置扩散,结束时使用 opacity 淡出而非 scale 收缩。 + +### 4. Theme Switcher (主题切换器) + +添加 CSS transition 实现平滑的暗黑/明亮模式切换。 + +### 5. Share Panel (分享面板) + +修复退出动画方向,确保向上滑出且不出现歪斜。 + +## Data Models + +动画配置使用 CSS 变量统一管理,已在 style.css 中定义。 + +## 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.* + +由于本需求主要涉及 UI 动画和样式修复,大部分验收标准属于视觉效果验证,不适合自动化属性测试。以下为可测试的属性: + +### Property 1: TOC 生成完整性 +*For any* 包含标题元素(h1-h6)的 HTML 内容,TOC_Generator 生成的目录项数量应等于页面中标题元素的数量 +**Validates: Requirements 1.1** + +### Property 2: 目录层级正确性 +*For any* 生成的目录结构,每个目录项的层级值应与其对应标题元素的层级(h1=1, h2=2, ..., h6=6)一致 +**Validates: Requirements 1.2** + +### Property 3: 动画时长有效性 +*For any* 涟漪效果动画,其时长应在 300-400ms 范围内;*For any* 主题切换过渡,其时长应在 200-300ms 范围内 +**Validates: Requirements 3.4, 4.2** + +### Property 4: 分享面板进出动画一致性 +*For any* 分享面板的进入和退出动画,其 transition-duration 值应相等 +**Validates: Requirements 5.4** + +### Property 5: 分享选项视口可见性 +*For any* 屏幕尺寸,分享面板展开时所有分享选项应完整显示在视口范围内,且与屏幕边缘保持安全边距 +**Validates: Requirements 6.1, 6.3, 6.4** + +### Property 6: 错落动画延迟递增 +*For any* 分享面板中的按钮序列,第 n 个按钮的 transition-delay 应大于第 n-1 个按钮的 transition-delay +**Validates: Requirements 7.4** + +## Error Handling + +1. TOC 生成失败:显示"无目录"提示(Requirements 1.4) +2. 多邻国 API 失败:隐藏组件或显示友好错误提示(Requirements 2.3) +3. 动画性能问题:使用 GPU 加速属性(transform, opacity)确保流畅(Requirements 7.1) + +## Testing Strategy + +### 单元测试 +- TOC 生成器:测试标题解析和层级计算 +- CSS 属性验证:检查动画时长、缓动函数等配置值 + +### 属性测试 +- 使用 Jest 进行 DOM 测试 +- 验证 TOC 生成的完整性和正确性(Property 1, 2) +- 验证 CSS 动画配置的有效性(Property 3, 4, 6) +- 验证分享选项的视口可见性(Property 5) + +### 手动测试 +- 视觉效果验证:涟漪动画淡出效果、主题切换平滑度、分享面板动画方向 +- 跨设备测试:不同屏幕尺寸下的表现 +- 性能测试:动画流畅度,无抖动或卡顿 diff --git a/argontheme.js b/argontheme.js index 7a7d1e5..5034ac2 100644 --- a/argontheme.js +++ b/argontheme.js @@ -698,7 +698,7 @@ if (argonConfig.waterflow_columns != "1") { $backToTopBtn.on("click" , function(){ $("body,html").stop().animate({ scrollTop: 0 - }, 800, 'easeOutExpo'); + }, 600, 'easeOutExpo'); }); $toggleDarkmode.on("click" , function(){ @@ -923,16 +923,16 @@ if (argonConfig.waterflow_columns != "1") { } $("body,html").animate({ scrollTop: $('#post_comment').offset().top - 100 - }, 500, 'easeOutCirc'); - $('#post_comment_reply_info').slideDown(500, 'easeOutCirc'); + }, 400, 'easeOutCirc'); + $('#post_comment_reply_info').slideDown(350, 'easeOutCirc'); setTimeout(function(){ $("#post_comment_content").focus(); - }, 500); + }, 350); } function cancelReply(){ replying = false; replyID = 0; - $('#post_comment_reply_info').slideUp(300, 'easeOutCirc'); + $('#post_comment_reply_info').slideUp(250, 'easeOutCirc'); $("#post_comment").removeClass("post-comment-force-privatemode-on post-comment-force-privatemode-off"); } $(document).on("click" , ".comment-reply" , function(){ @@ -968,7 +968,7 @@ if (argonConfig.waterflow_columns != "1") { } $("body,html").animate({ scrollTop: $('#post_comment').offset().top - 100 - }, 500, 'easeOutCirc'); + }, 400, 'easeOutCirc'); $("#post_comment_content").focus(); } function cancelEdit(clear){ @@ -1083,9 +1083,9 @@ if (argonConfig.waterflow_columns != "1") { $(document).on("click" , "#post_comment_toggle_extra_input" , function(){ $("#post_comment").toggleClass("show-extra-input"); if ($("#post_comment").hasClass("show-extra-input")){ - $("#post_comment_extra_input").slideDown(300, 'easeOutCirc'); + $("#post_comment_extra_input").slideDown(250, 'easeOutCirc'); }else{ - $("#post_comment_extra_input").slideUp(300, 'easeOutCirc'); + $("#post_comment_extra_input").slideUp(200, 'easeOutCirc'); } }); @@ -2776,7 +2776,7 @@ $(document).on("click" , ".collapse-block .collapse-block-title" , function(){ $(block).toggleClass("collapsed"); let inner = $(".collapse-block-body", block); if (block.hasClass("collapsed")){ - inner.stop(true, false).slideUp(300, 'easeOutCirc'); + inner.stop(true, false).slideUp(250, 'easeOutCirc'); }else{ inner.stop(true, false).slideDown(300, 'easeOutCirc'); } diff --git a/style.css b/style.css index 3bfe4de..6b5c2fc 100644 --- a/style.css +++ b/style.css @@ -204,13 +204,15 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, --color-selection: #cce2ff; - /* Animation System - Duration Variables */ + /* ========== 统一动画系统 - 桌面端和移动端一致 ========== */ + /* 动画时长 - 基于 Material Design 3 规范 */ + --animation-instant: 100ms; --animation-fast: 150ms; --animation-normal: 250ms; --animation-slow: 400ms; --animation-slower: 600ms; - /* Animation System - Material 3 Easing Functions */ + /* 缓动函数 - 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); @@ -218,11 +220,12 @@ Tags: 简约, 两栏, 侧栏在左边, 浮动侧栏, 文章目录, 自适应, --ease-emphasized-decelerate: cubic-bezier(0.05, 0.7, 0.1, 1); --ease-emphasized-accelerate: cubic-bezier(0.3, 0, 0.8, 0.15); - /* Animation System - Spring & Bounce Easing */ + /* 弹性缓动 - 用于交互反馈 */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55); + --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); - /* State Layer Opacity - Material 3 */ + /* 状态层透明度 - Material 3 */ --state-hover-opacity: 0.08; --state-focus-opacity: 0.12; --state-pressed-opacity: 0.12; @@ -454,7 +457,7 @@ body { a { - transition: color 0.25s ease; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1578,7 +1581,7 @@ html.triple-column #content { opacity: 0; - transform: scale(0.8); + transform: scale(0.95) translateY(8px); } @@ -1594,13 +1597,13 @@ html.triple-column #content { #primary { - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } .card { - animation: card-show 0.25s ease-out; + animation: card-show var(--animation-normal) var(--ease-emphasized-decelerate); transform-origin: center top; @@ -1714,7 +1717,7 @@ html.darkmode #navbar-main { padding-bottom: 0.5rem; - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -1748,7 +1751,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { overflow: hidden; - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -1798,7 +1801,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { color: #fff; - transition: color 0.3s ease; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1832,7 +1835,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { color: #fff; - transition: color 0.3s ease; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1840,7 +1843,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { color: rgba(255, 255, 255, 0.7); - transition: color 0.3s ease; + transition: color var(--animation-normal) var(--ease-standard); } @@ -1868,7 +1871,7 @@ body.leftbar-can-headroom.headroom---unpinned #navbar-main { #navbar_search_input_container .input-group-text { - transition: all 0.5s cubic-bezier(0.4, 0, 0, 1); + transition: all var(--animation-slow) var(--ease-emphasized); } @@ -2309,7 +2312,7 @@ html:not(.is-home) .cover-scroll-down { font-size: 14px; - transition: background 0.2s ease-in-out; + transition: background var(--animation-fast) var(--ease-standard); } @@ -2383,9 +2386,9 @@ html:not(.is-home) .cover-scroll-down { #leftbar_search_container { - transition: width 0.3s cubic-bezier(0.4, 0, 0, 1), height 0.3s cubic-bezier(0.4, 0, 0, 1), box-shadow 0.15s ease, + transition: width var(--animation-normal) var(--ease-emphasized), height var(--animation-normal) var(--ease-emphasized), box-shadow var(--animation-fast) var(--ease-standard), - transform 0.15s ease; + transform var(--animation-fast) var(--ease-standard); height: 30px; @@ -2457,7 +2460,7 @@ html.darkmode.amoled-dark #leftbar_search_container { margin-top: 10px; - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -2543,7 +2546,7 @@ html.darkmode #leftbar_part2_inner::-webkit-scrollbar-thumb { border-bottom: 1px solid transparent; - transition: border-bottom 0.2s ease; + transition: border-bottom var(--animation-fast) var(--ease-standard); } @@ -2661,7 +2664,7 @@ html.darkmode .sidebar-tab-switcher > a.active { text-transform: none; - transition: background 0.2s ease; + transition: background var(--animation-fast) var(--ease-standard); background: var(--color-border-on-foreground); @@ -2711,7 +2714,7 @@ html.darkmode .sidebar-tab-switcher > a.active { margin-top: 5px; - transition: background 0.2s ease; + transition: background var(--animation-fast) var(--ease-standard); background: transparent; @@ -2983,7 +2986,7 @@ html.darkmode #leftbar_announcement { font-size: 14px; - transition: all 0.25s ease; + transition: all var(--animation-normal) var(--ease-standard); user-select: none; @@ -3083,7 +3086,7 @@ html.darkmode .wp-block-calendar tbody td { z-index: 1000; - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -3139,7 +3142,7 @@ html.is-home.banner-as-cover #float_action_buttons.hidden { border: none !important; - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -3925,7 +3928,7 @@ html.filter-grayscale { .page-link { - transition: background-color 0.2s ease; + transition: background-color var(--animation-fast) var(--ease-standard); } @@ -3945,7 +3948,7 @@ html.filter-grayscale { .post-preview { - transition: all 0.5s ease; + transition: all var(--animation-slow) var(--ease-emphasized); } @@ -3979,7 +3982,7 @@ html.filter-grayscale { letter-spacing: 0.5px; - transition: all 0.35s ease; + transition: all var(--animation-normal) var(--ease-standard); } @@ -3991,7 +3994,7 @@ html.filter-grayscale { #main.waterflow .post-title { - transition: all 0.3s ease; + transition: all var(--animation-normal) var(--ease-standard); display: inline-block; @@ -14938,8 +14941,8 @@ html.darkmode .card { /* 卡片悬浮提升效果 */ article.post.card { - transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), - box-shadow 0.3s ease; + transition: transform var(--animation-normal) var(--ease-spring), + box-shadow var(--animation-normal) var(--ease-standard); } article.post.card:hover {