From 04ef48dbcd0d2801906cd3f91ac60f0ed8474e1c Mon Sep 17 00:00:00 2001
From: Youzini-afk <13153778771cx@gmail.com>
Date: Tue, 24 Mar 2026 17:56:10 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=B7=A6=E5=8F=B3=E9=9D=A2=E6=9D=BF?=
 =?UTF-8?q?=E5=8F=AF=E6=8B=96=E6=8B=BD=E8=B0=83=E6=95=B4=E6=AF=94=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在侧边栏与图谱区之间添加拖拽分隔条
- hover 时显示主题色高亮和小手柄
- 拖拽范围 180px~600px
- 拖拽时禁用文字选中，确保流畅操作
---
 panel.html |  1 +
 panel.js   | 37 +++++++++++++++++++++++++++++++++++++
 style.css  | 34 ++++++++++++++++++++++++++++++++++
 3 files changed, 72 insertions(+)

diff --git a/panel.html b/panel.html
index c5e2cfb..b64b357 100644
--- a/panel.html
+++ b/panel.html
@@ -381,6 +381,7 @@
         </div>
       </div>
 
+      <div class="bme-resize-handle" id="bme-resize-handle"></div>
       <!-- Main Graph Area (Desktop) -->
       <div class="bme-panel-main">
         <div class="bme-graph-toolbar">
diff --git a/panel.js b/panel.js
index 90a4ebf..8e5945d 100644
--- a/panel.js
+++ b/panel.js
@@ -163,6 +163,7 @@ export async function initPanel({
 
     _bindTabs();
     _bindClose();
+    _bindResizeHandle();
     _bindGraphControls();
     _bindActions();
     _bindConfigControls();
@@ -528,6 +529,42 @@ function _bindClose() {
     });
 }
 
+function _bindResizeHandle() {
+    const handle = document.getElementById("bme-resize-handle");
+    const sidebar = panelEl?.querySelector(".bme-panel-sidebar");
+    if (!handle || !sidebar) return;
+
+    let dragging = false;
+    let startX = 0;
+    let startWidth = 0;
+
+    handle.addEventListener("mousedown", (e) => {
+        e.preventDefault();
+        dragging = true;
+        startX = e.clientX;
+        startWidth = sidebar.offsetWidth;
+        handle.classList.add("dragging");
+        document.body.style.cursor = "col-resize";
+        document.body.style.userSelect = "none";
+    });
+
+    document.addEventListener("mousemove", (e) => {
+        if (!dragging) return;
+        const delta = e.clientX - startX;
+        const newWidth = Math.max(180, Math.min(600, startWidth + delta));
+        sidebar.style.width = newWidth + "px";
+        sidebar.style.minWidth = newWidth + "px";
+    });
+
+    document.addEventListener("mouseup", () => {
+        if (!dragging) return;
+        dragging = false;
+        handle.classList.remove("dragging");
+        document.body.style.cursor = "";
+        document.body.style.userSelect = "";
+    });
+}
+
 // ==================== 操作绑定 ====================
 
 function _bindActions() {
diff --git a/style.css b/style.css
index 79633e5..edb1ef8 100644
--- a/style.css
+++ b/style.css
@@ -311,6 +311,40 @@
     overflow: hidden;
 }
 
+.bme-resize-handle {
+    width: 5px;
+    cursor: col-resize;
+    background: transparent;
+    transition: background 0.15s;
+    flex-shrink: 0;
+    position: relative;
+    z-index: 10;
+}
+
+.bme-resize-handle::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 3px;
+    height: 32px;
+    border-radius: 2px;
+    background: var(--bme-on-surface-dim, rgba(228,225,230,0.3));
+    opacity: 0;
+    transition: opacity 0.15s;
+}
+
+.bme-resize-handle:hover,
+.bme-resize-handle.dragging {
+    background: var(--bme-primary-dim, rgba(233, 69, 96, 0.15));
+}
+
+.bme-resize-handle:hover::after,
+.bme-resize-handle.dragging::after {
+    opacity: 1;
+}
+
 /* --- Sidebar (Desktop) --- */
 .bme-panel-sidebar {
     width: 280px;