diff --git a/panel.html b/panel.html index c5e2cfb..b64b357 100644 --- a/panel.html +++ b/panel.html @@ -381,6 +381,7 @@ +
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;