From a5ab93e701cf3d0dcb9a79e65ee281f74064d8ee Mon Sep 17 00:00:00 2001
From: Youzini-afk <13153778771cx@gmail.com>
Date: Fri, 27 Mar 2026 14:36:49 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=A2=E6=9D=BF=E9=A1=B6=E6=A0=8F?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=82=AC=E6=B5=AE=E7=90=83=E6=98=BE=E7=A4=BA?=
 =?UTF-8?q?/=E9=9A=90=E8=97=8F=E5=88=87=E6=8D=A2=E6=8C=89=E9=92=AE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 panel.html |  8 ++++++++
 panel.js   | 29 +++++++++++++++++++++++++++++
 style.css  | 29 +++++++++++++++++++++++++++++
 3 files changed, 66 insertions(+)

diff --git a/panel.html b/panel.html
index 0ed7cd6..f2b481b 100644
--- a/panel.html
+++ b/panel.html
@@ -8,6 +8,14 @@
           >SYSTEM_ACTIVE</span
         >
       </div>
+      <button
+        class="bme-fab-toggle-btn"
+        id="bme-fab-toggle-btn"
+        title="显示/隐藏悬浮球"
+        type="button"
+      >
+        <i class="fa-solid fa-circle-dot"></i>
+      </button>
       <div class="bme-theme-picker">
         <button
           class="bme-theme-picker-btn"
diff --git a/panel.js b/panel.js
index eef39bd..2aefd0c 100644
--- a/panel.js
+++ b/panel.js
@@ -223,13 +223,39 @@ export async function initPanel({
   _syncConfigSectionState();
   _refreshRuntimeStatus();
   _initFloatingBall();
+  _bindFabToggle();
 }
 
 // ==================== 悬浮球 ====================
 
 const FAB_STORAGE_KEY = "bme-fab-position";
+const FAB_VISIBLE_KEY = "bme-fab-visible";
 let _fabEl = null;
 
+function _getFabVisible() {
+  try {
+    const val = localStorage.getItem(FAB_VISIBLE_KEY);
+    return val === null ? true : val === "true";
+  } catch { return true; }
+}
+
+function _setFabVisible(visible) {
+  try { localStorage.setItem(FAB_VISIBLE_KEY, String(visible)); } catch {}
+  if (_fabEl) _fabEl.style.display = visible ? "flex" : "none";
+  const btn = panelEl?.querySelector("#bme-fab-toggle-btn");
+  if (btn) btn.setAttribute("data-active", String(visible));
+}
+
+function _bindFabToggle() {
+  const btn = panelEl?.querySelector("#bme-fab-toggle-btn");
+  if (!btn) return;
+  btn.setAttribute("data-active", String(_getFabVisible()));
+  btn.addEventListener("click", () => {
+    const next = !_getFabVisible();
+    _setFabVisible(next);
+  });
+}
+
 function _initFloatingBall() {
   if (document.getElementById("bme-floating-ball")) return;
 
@@ -243,6 +269,9 @@ function _initFloatingBall() {
   document.body.appendChild(fab);
   _fabEl = fab;
 
+  // 应用可见性
+  if (!_getFabVisible()) fab.style.display = "none";
+
   // 恢复位置
   const saved = _loadFabPosition();
   if (saved) {
diff --git a/style.css b/style.css
index b0d096b..eee36df 100644
--- a/style.css
+++ b/style.css
@@ -83,6 +83,35 @@
   margin-right: 4px;
 }
 
+.bme-fab-toggle-btn {
+  width: 28px;
+  height: 28px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  color: var(--bme-on-surface-dim);
+  cursor: pointer;
+  border-radius: 4px;
+  font-size: 14px;
+  transition: all 0.15s;
+  margin-right: 2px;
+}
+
+.bme-fab-toggle-btn:hover {
+  background: var(--bme-surface-highest);
+  color: var(--bme-primary);
+}
+
+.bme-fab-toggle-btn[data-active="true"] {
+  color: var(--bme-primary);
+}
+
+.bme-fab-toggle-btn[data-active="false"] {
+  opacity: 0.45;
+}
+
 .bme-theme-picker-btn {
   width: 28px;
   height: 28px;