From f66c17095b27f0db0ee8cafde9a8ee387e27d49f Mon Sep 17 00:00:00 2001
From: hehh <lingtinzhe@icloud.com>
Date: Thu, 27 Nov 2025 15:59:24 +0800
Subject: [PATCH] =?UTF-8?q?refactor(css):=20=E6=B7=BB=E5=8A=A0=20contain?=
 =?UTF-8?q?=20=E5=B1=9E=E6=80=A7=E4=BC=98=E5=8C=96=E5=B8=83=E5=B1=80?=
 =?UTF-8?q?=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在多个组件样式中添加 contain: layout style 提升渲染性能
- 移除移动端浮动按钮的拖拽功能实现
- 简化 JavaScript 中的 FAB 元素初始化逻辑
- 清理未使用的拖拽相关事件监听器绑定代码
---
 css/about.css  |  7 +++++
 css/artalk.css |  1 +
 js/about.js    | 69 --------------------------------------------------
 3 files changed, 8 insertions(+), 69 deletions(-)

diff --git a/css/about.css b/css/about.css
index ac14217..a96f239 100644
--- a/css/about.css
+++ b/css/about.css
@@ -322,6 +322,7 @@ body {
     /* 确保不继承任何可能影响文字的滤镜或动画 */
     filter: none;
     animation: none;
+    contain: layout style;
 }
 
 /* 黑夜模式下个人卡片发光效果 */
@@ -701,6 +702,7 @@ body {
     flex-direction: column;
     position: relative;
     overflow: hidden;
+    contain: layout style;
 }
 
 
@@ -708,6 +710,7 @@ body {
 /* --- Interests --- */
 .area-interests {
     padding: 20px;
+    contain: layout style;
 }
 
 
@@ -1563,6 +1566,7 @@ body {
     text-align: center;
     /* 创建独立的层叠上下文，防止动画影响子元素 */
     isolation: isolate;
+    contain: layout style;
 }
 
 /* 增强版呼吸动画：多层光晕 + 色彩流动 */
@@ -1982,6 +1986,7 @@ body {
     flex-direction: column;
     position: relative;
     overflow: hidden;
+    contain: layout style;
 }
 
 .card-header {
@@ -2048,6 +2053,7 @@ body {
     text-decoration: none;
     pointer-events: none; /* 禁用鼠标事件避免干扰 */
     z-index: 10;
+    contain: layout style;
 }
 
 /* 白天模式下为 tag-color 类增强可读性 */
@@ -2851,6 +2857,7 @@ body {
         text-decoration: none;
         pointer-events: none;
         z-index: 10;
+        contain: layout style;
     }
 
     /* Mobile Social */
diff --git a/css/artalk.css b/css/artalk.css
index 4353522..095fec2 100644
--- a/css/artalk.css
+++ b/css/artalk.css
@@ -3,6 +3,7 @@
 /* Base Artalk container styles */
 #artalk-container {
   border-radius: 12px;
+  contain: layout style;
 }
 
 /* 确保评论区域适配白天/黑夜模式 */
diff --git a/js/about.js b/js/about.js
index aae17d4..a9d75f3 100644
--- a/js/about.js
+++ b/js/about.js
@@ -962,8 +962,6 @@ class UIManager {
         const fMusic = document.getElementById('fab-music');
         if (!main || !menu || !fLang || !fTheme || !fMusic) return;
 
-        // 添加拖拽功能
-        this.initDraggableFab();
 
         const updateLabels = () => {
             // 使用requestAnimationFrame避免强制重排
@@ -1012,73 +1010,6 @@ class UIManager {
         requestAnimationFrame(updateLabels);
     }
 
-    // 初始化拖拽功能
-    initDraggableFab() {
-        const fab = document.querySelector('.mobile-fab');
-        if (!fab) return;
-
-        let isDragging = false;
-        let initialX, initialY, currentX, currentY, xOffset = 0, yOffset = 0;
-        fab.style.willChange = 'transform';
-
-        // 拖拽相关方法
-        const setTranslate = (xPos, yPos, el) => {
-            el.style.transform = `translate3d(${xPos}px, ${yPos}px, 0)`;
-        };
-
-        const dragStart = (e) => {
-            if (e.type === 'touchstart') {
-                initialX = e.touches[0].clientX - xOffset;
-                initialY = e.touches[0].clientY - yOffset;
-            } else {
-                initialX = e.clientX - xOffset;
-                initialY = e.clientY - yOffset;
-            }
-            isDragging = true;
-        };
-
-        const dragEnd = () => {
-            initialX = currentX;
-            initialY = currentY;
-            isDragging = false;
-        };
-
-        const drag = (e) => {
-            if (isDragging) {
-                e.preventDefault();
-                if (e.type === 'touchmove') {
-                    currentX = e.touches[0].clientX - initialX;
-                    currentY = e.touches[0].clientY - initialY;
-                } else {
-                    currentX = e.clientX - initialX;
-                    currentY = e.clientY - initialY;
-                }
-
-                // 使用requestAnimationFrame优化拖拽动画
-                requestAnimationFrame(() => {
-                    const ww = window.innerWidth;
-                    const wh = window.innerHeight;
-                    const rect = fab.getBoundingClientRect();
-                    const fw = rect.width;
-                    const fh = rect.height;
-                    currentX = Math.max(0, Math.min(currentX, ww - fw));
-                    currentY = Math.max(0, Math.min(currentY, wh - fh));
-
-                    xOffset = currentX;
-                    yOffset = currentY;
-                    setTranslate(currentX, currentY, fab);
-                });
-            }
-        };
-
-        // 绑定事件
-        fab.addEventListener('touchstart', dragStart, { passive: false });
-        fab.addEventListener('touchend', dragEnd, { passive: false });
-        fab.addEventListener('touchmove', drag, { passive: false });
-        fab.addEventListener('mousedown', dragStart, { passive: false });
-        fab.addEventListener('mouseup', dragEnd, { passive: false });
-        fab.addEventListener('mousemove', drag, { passive: false });
-    }
 
     initAudio() {
         const el = document.getElementById('site-audio');