From 101d042b0e07539d97ffc15bc3b4395bd6585102 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Thu, 27 Nov 2025 15:31:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=E8=B0=83=E6=95=B4=E5=AE=A2=E6=9C=8DUI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/BytedeskWidget.jsx             | 53 +++++++++++++++++++
 src/styles/bytedesk-override.css              | 34 ++++++++++++
 2 files changed, 87 insertions(+)

diff --git a/src/bytedesk-integration/components/BytedeskWidget.jsx b/src/bytedesk-integration/components/BytedeskWidget.jsx
index 07b7dbc2..58127331 100644
--- a/src/bytedesk-integration/components/BytedeskWidget.jsx
+++ b/src/bytedesk-integration/components/BytedeskWidget.jsx
@@ -63,6 +63,59 @@ const BytedeskWidget = ({
             bytedesk.init();
             widgetRef.current = bytedesk;
 
+            // ⚡ H5 端样式适配：使用 MutationObserver 立即应用样式（避免闪烁）
+            const isMobile = window.innerWidth <= 768;
+
+            const applyBytedeskStyles = () => {
+              const allElements = document.querySelectorAll('body > div');
+              allElements.forEach(el => {
+                const style = window.getComputedStyle(el);
+                // 检查是否是右下角固定定位的元素（Bytedesk 按钮）
+                if (style.position === 'fixed' && style.right && style.bottom) {
+                  const rightVal = parseInt(style.right);
+                  const bottomVal = parseInt(style.bottom);
+                  if (rightVal >= 0 && rightVal < 100 && bottomVal >= 0 && bottomVal < 100) {
+                    // H5 端设置按钮尺寸为 48x48（只执行一次）
+                    if (isMobile && !el.dataset.bytedeskStyled) {
+                      el.dataset.bytedeskStyled = 'true';
+                      const button = el.querySelector('button');
+                      if (button) {
+                        button.style.width = '48px';
+                        button.style.height = '48px';
+                        button.style.minWidth = '48px';
+                        button.style.minHeight = '48px';
+                      }
+                    }
+                    // 提示框 3 秒后隐藏（查找白色气泡框）
+                    const children = el.querySelectorAll('div');
+                    children.forEach(child => {
+                      if (child.dataset.bytedeskTooltip) return; // 已处理过
+                      const childStyle = window.getComputedStyle(child);
+                      // 白色背景的提示框
+                      if (childStyle.backgroundColor === 'rgb(255, 255, 255)') {
+                        child.dataset.bytedeskTooltip = 'true';
+                        setTimeout(() => {
+                          child.style.transition = 'opacity 0.3s';
+                          child.style.opacity = '0';
+                          setTimeout(() => child.remove(), 300);
+                        }, 3000);
+                      }
+                    });
+                  }
+                }
+              });
+            };
+
+            // 立即执行一次
+            applyBytedeskStyles();
+
+            // 监听 DOM 变化，新元素出现时立即应用样式
+            const observer = new MutationObserver(applyBytedeskStyles);
+            observer.observe(document.body, { childList: true, subtree: true });
+
+            // 5 秒后停止监听（避免性能问题）
+            setTimeout(() => observer.disconnect(), 5000);
+
             // ⚡ 屏蔽 STOMP WebSocket 错误日志（不影响功能）
             const originalConsoleError = console.error;
             console.error = function(...args) {
diff --git a/src/styles/bytedesk-override.css b/src/styles/bytedesk-override.css
index 8cd81c2c..2e705635 100644
--- a/src/styles/bytedesk-override.css
+++ b/src/styles/bytedesk-override.css
@@ -36,3 +36,37 @@ iframe[src*="/visitor/"] {
 [class*="bytedesk-badge"] {
   z-index: 1000000 !important;
 }
+
+/* ========== H5 端客服组件整体缩小 ========== */
+@media (max-width: 768px) {
+  /* 整个客服容器缩小（包括按钮和提示框） */
+  [class*="bytedesk"],
+  [id*="bytedesk"],
+  [class*="BytedeskWeb"] {
+    transform: scale(0.7) !important;
+    transform-origin: bottom right !important;
+  }
+}
+
+/* ========== 提示框 3 秒后自动消失 ========== */
+/* 提示框（"在线客服 点击咨询"气泡）- 扩展选择器 */
+[class*="bytedesk-bubble"],
+[class*="bytedesk-tooltip"],
+[class*="BytedeskWeb"] [class*="bubble"],
+[class*="BytedeskWeb"] [class*="tooltip"],
+[class*="bytedesk"] > div:not(button):not(iframe),
+[class*="BytedeskWeb"] > div:not(button):not(iframe),
+[id*="bytedesk"] > div:not(button):not(iframe) {
+  animation: bytedeskFadeOut 0.3s ease-out 3s forwards !important;
+}
+
+@keyframes bytedeskFadeOut {
+  from {
+    opacity: 1;
+    visibility: visible;
+  }
+  to {
+    opacity: 0;
+    visibility: hidden;
+  }
+}