From ecdbe09c6c9092540029184198ff158334fb58cc Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Sat, 9 May 2026 11:31:15 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(sidebar):=20=E4=BC=98?=
 =?UTF-8?q?=E5=8C=96=E4=BE=A7=E8=BE=B9=E6=A0=8F=E6=8B=96=E6=8B=BD=E7=83=AD?=
 =?UTF-8?q?=E5=8C=BA=E5=B9=B6=E5=87=8F=E5=B0=91=E8=AF=AF=E8=A7=A6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 将右侧边缘分隔条改为独立拖拽带
- 给树内容右侧预留缓冲区，避免拖宽时误点连接、库或表
- 拖拽期间锁定光标并禁用选中，提升拖动稳定性
- 保持原有宽度边界和拖拽反馈不变
---
 frontend/src/App.tsx | 65 ++++++++++++++++++++++++++++++++------------
 1 file changed, 48 insertions(+), 17 deletions(-)

diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 4fe8a1a..6c2ee71 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -2222,10 +2222,37 @@ function App() {
   const sidebarDragRef = React.useRef<{ startX: number, startWidth: number } | null>(null);
   const rafRef = React.useRef<number | null>(null);
   const ghostRef = React.useRef<HTMLDivElement>(null);
+  const sidebarDragBodyStyleRef = React.useRef<{ cursor: string; userSelect: string; webkitUserSelect: string } | null>(null);
   const latestMouseX = React.useRef<number>(0); // Store latest mouse position
+  const sidebarResizeHandleWidth = Math.max(16, Math.round(16 * effectiveUiScale));
+
+  const restoreSidebarDragBodyStyles = () => {
+      if (!sidebarDragBodyStyleRef.current || typeof document === 'undefined') {
+          sidebarDragBodyStyleRef.current = null;
+          return;
+      }
+
+      const previous = sidebarDragBodyStyleRef.current;
+      document.body.style.cursor = previous.cursor;
+      document.body.style.userSelect = previous.userSelect;
+      (document.body.style as any).WebkitUserSelect = previous.webkitUserSelect;
+      sidebarDragBodyStyleRef.current = null;
+  };
 
   const handleSidebarMouseDown = (e: React.MouseEvent) => {
       e.preventDefault();
+      e.stopPropagation();
+
+      if (typeof document !== 'undefined') {
+          sidebarDragBodyStyleRef.current = {
+              cursor: document.body.style.cursor,
+              userSelect: document.body.style.userSelect,
+              webkitUserSelect: (document.body.style as any).WebkitUserSelect || '',
+          };
+          document.body.style.cursor = 'col-resize';
+          document.body.style.userSelect = 'none';
+          (document.body.style as any).WebkitUserSelect = 'none';
+      }
       
       if (ghostRef.current) {
           ghostRef.current.style.left = `${sidebarWidth}px`;
@@ -2271,6 +2298,7 @@ function App() {
       if (ghostRef.current) {
           ghostRef.current.style.display = 'none';
       }
+      restoreSidebarDragBodyStyles();
       
       sidebarDragRef.current = null;
       document.removeEventListener('mousemove', handleSidebarMouseMove);
@@ -2666,7 +2694,7 @@ function App() {
                     </div>
                 </div>
                 
-                <div style={{ flex: 1, overflow: 'hidden', paddingBottom: 58, position: 'relative' }}>
+                <div style={{ flex: 1, overflow: 'hidden', paddingBottom: 58, paddingRight: sidebarResizeHandleWidth, position: 'relative' }}>
                     <div style={{ height: '100%', opacity: connectionWorkbenchState.ready ? 1 : 0.72, pointerEvents: connectionWorkbenchState.ready ? 'auto' : 'none' }}>
                         <Sidebar onEditConnection={handleEditConnection} />
                     </div>
@@ -2704,6 +2732,25 @@ function App() {
                             </div>
                         </div>
                     )}
+                    <div
+                        onMouseDown={handleSidebarMouseDown}
+                        role="separator"
+                        aria-orientation="vertical"
+                        title="拖动调整宽度"
+                        style={{
+                            position: 'absolute',
+                            right: 0,
+                            top: 0,
+                            bottom: 0,
+                            width: sidebarResizeHandleWidth,
+                            cursor: 'col-resize',
+                            zIndex: 3,
+                            touchAction: 'none',
+                            userSelect: 'none',
+                            WebkitUserSelect: 'none',
+                            background: 'transparent',
+                        }}
+                    />
                 </div>
 
                 {/* Floating SQL Log Toggle */}
@@ -2743,22 +2790,6 @@ function App() {
                     </Button>
                 </div>
             </div>
-            
-            {/* Sidebar Resize Handle */}
-            <div 
-                onMouseDown={handleSidebarMouseDown}
-                style={{
-                    position: 'absolute',
-                    right: 0,
-                    top: 0,
-                    bottom: 0,
-                    width: '5px',
-                    cursor: 'col-resize',
-                    zIndex: 100,
-                    // background: 'transparent' // transparent usually, visible on hover if desired
-                }}
-                title="拖动调整宽度"
-            />
           </Sider>
            <Content style={{ background: bgContent, overflow: 'hidden', display: 'flex', flexDirection: 'column', minWidth: 0, flex: 1 }}>
              {securityUpdateEntryVisibility.showBanner && !isSecurityUpdateBannerDismissed && (