From bff0b529d228bf213ebd1d4da71458d786e501a6 Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Sun, 30 Nov 2025 15:25:56 +0800
Subject: [PATCH] =?UTF-8?q?fix(audio):=20=E4=BF=AE=E5=A4=8D=E9=9F=B3?=
 =?UTF-8?q?=E9=A2=91=E8=87=AA=E5=8A=A8=E6=92=AD=E6=94=BE=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 使用 requestAnimationFrame 包装音频播放逻辑
- 确保在用户交互后正确触发播放
- 保留原有的静默错误处理机制

style(artalk): 优化移动端评论样式

- 移除重复的 CSS 选择器定义
- 调整评论区域 padding 和字体大小
- 优化黑夜模式下评论背景透明度
- 修复移动端头像拉伸显示问题
- 移除夜间模式下不必要的边框和圆角
- 完全移除评论容器的边框和阴影样式
- 更新分页按钮的内边距和字体大小
- 修复移动端输入框背景色问题
---
 css/artalk.css | 36 ++++++++++++++++--------------------
 js/about.js    |  9 +++++----
 2 files changed, 21 insertions(+), 24 deletions(-)

diff --git a/css/artalk.css b/css/artalk.css
index 43b5b50..192041c 100644
--- a/css/artalk.css
+++ b/css/artalk.css
@@ -32,7 +32,7 @@
   background: rgba(128, 128, 128, 0.08);
 }
 
-#artalk-container .atk-dialog, 
+#artalk-container .atk-dialog,
 #artalk-container .atk-layer .atk-dialog {
   background: var(--glass-bg);
   color: var(--text-primary);
@@ -45,7 +45,6 @@
 
 /* Light theme styles */
 .atk-main-editor {
-  background: rgba(255, 255, 255, 0.85) !important;
   backdrop-filter: blur(28px) saturate(180%) !important;
   -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
   border: 1px solid rgba(108, 92, 231, 0.2) !important;
@@ -398,42 +397,42 @@
   .atk-header {
     padding: 15px !important;
   }
-  
+
   .atk-editor-plug-wrap {
     padding: 0 15px 15px !important;
   }
-  
+
   .atk-editor-textarea {
     padding: 12px !important;
   }
-  
+
   .atk-editor-bottom {
     padding: 0 15px 15px !important;
   }
-  
+
   .atk-list-header {
     padding: 15px !important;
   }
-  
+
   .atk-comment-wrap {
     padding: 15px !important;
   }
-  
+
   .atk-pagination {
     padding: 15px !important;
   }
-  
+
   .atk-pagination .atk-page-item {
     padding: 6px 12px !important;
     margin: 0 3px !important;
     font-size: 0.9rem !important;
   }
-  
+
   /* 移动端增强样式 */
   .atk-main-editor {
     border-radius: 16px !important;
   }
-  
+
   .atk-comment-wrap {
     padding: 12px 0 !important;
     font-size: 0.95rem !important;
@@ -445,24 +444,24 @@
     border-top: none !important;
     background: transparent !important;
   }
-  
+
   .atk-avatar {
     width: 28px !important;
     height: 28px !important;
     object-fit: cover; /* 修复移动端头像拉伸问题 */
   }
-  
+
   .atk-meta {
     font-size: 12px !important;
   }
-  
+
   /* 修复移动端输入框底色问题 */
   [data-theme="night"] .atk-editor-textarea {
     background: rgba(40, 40, 45, 0.5) !important;
     color: #dfe6e9 !important;
     border: 1px solid rgba(255, 255, 255, 0.08) !important;
   }
-  
+
   /* 完全移除评论区域的容器样式以节省宽度 */
   #artalk-container {
     border-radius: 0 !important;
@@ -471,12 +470,12 @@
     border: none !important;
     box-shadow: none !important;
   }
-  
+
   /* 黑夜模式下移动端评论背景色优化 */
   [data-theme="night"] .atk-comment-wrap {
     background: rgba(40, 40, 45, 0.9) !important; /* 提高移动端黑夜模式下的背景不透明度 */
   }
-  
+
   [data-theme="night"] .atk-comment-wrap:hover {
     background: rgba(45, 45, 50, 0.95) !important;
   }
@@ -748,9 +747,6 @@
 
 [data-theme="night"] .atk-dropdown-wrap {
     background: rgba(30, 30, 35, 0.95) !important;
-    border: 1px solid rgba(255, 255, 255, 0.15) !important;
-    border-radius: 20px !important;
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
 }
 
 [data-theme="night"] .atk-dropdown-item {
diff --git a/js/about.js b/js/about.js
index 88511ab..87e5212 100644
--- a/js/about.js
+++ b/js/about.js
@@ -1132,12 +1132,13 @@ class UIManager {
         window.addEventListener('load', () => {
             // 检查是否在24小时内用户暂停过音乐
             const shouldRemainPaused = this.shouldMusicRemainPaused();
-
             // 如果不应该保持暂停状态，则尝试播放
             if (!shouldRemainPaused) {
-                this.audio.play().catch(() => {
-                    // 静默处理播放失败
-                    console.error('Failed to play audio.');
+                requestAnimationFrame(() => {
+                    this.audio.play().catch(() => {
+                        // 静默处理播放失败
+                        console.error('Failed to play audio.');
+                    });
                 });
             }
         });