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;