From fcade0f860f1f2fe98d42ba586aa9522432e1ab1 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Sat, 11 Apr 2026 21:53:52 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(sidebar):=20=E6=94=AF=E6=8C=81?=
 =?UTF-8?q?=E7=AA=84=E4=BE=A7=E6=A0=8F=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8?=
 =?UTF-8?q?=E6=9F=A5=E7=9C=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Fixes #329
---
 .../2026-04-11-issue-backlog-tracking.md      |  9 +++-
 frontend/src/App.css                          | 31 ++++++++++++
 frontend/src/components/Sidebar.tsx           | 48 ++++++++++---------
 3 files changed, 64 insertions(+), 24 deletions(-)

diff --git a/docs/issues/2026-04-11-issue-backlog-tracking.md b/docs/issues/2026-04-11-issue-backlog-tracking.md
index e2e7018..8c5ddce 100644
--- a/docs/issues/2026-04-11-issue-backlog-tracking.md
+++ b/docs/issues/2026-04-11-issue-backlog-tracking.md
@@ -22,9 +22,10 @@
 | #317 | 驱动管理增加导入 jar 功能 | Blocked | - |
 | #318 | mysql,bit 列，修改成 1 失败 | Fixed | `bee78be` |
 | #319 | 关于运行外部 sql 文件的一些建议 | Deferred | - |
-| #320 | 无法连接达梦数据库 | Fixed | Pending |
+| #320 | 无法连接达梦数据库 | Fixed | `dc17133` |
 | #327 | SHOW DATABASES 报错 | Fixed | `5ac0221` |
 | #328 | [Bug] 安装更新失败 | Fixed | `436f130` |
+| #329 | 如果调整了左侧导航栏的宽度后，建议左侧导航栏内增加横向滚动查看 | Fixed | Pending |
 
 ## Notes
 
@@ -64,6 +65,12 @@
 - 处理：更新脚本统一输出为 CRLF，块内错误码改为延迟展开，旧文件回退路径统一为 `TARGET_OLD`，并将脚本启动方式收敛为 `cmd.exe /D /C call <script>`。
 - 验证：补充 `internal/app/methods_update_windows_script_test.go`，覆盖批处理语法、Win10 回退路径、CRLF 行尾、延迟展开和启动命令构造。
 
+### #329
+
+- 根因：侧边栏连接树被全局 Tree 样式固定为 `width: 100%`，标题同时启用了省略截断，导致缩窄侧栏后长节点无法形成横向溢出。
+- 处理：为 Sidebar 树增加专用横向滚动容器，并在 Sidebar 作用域内覆写 Tree 宽度与标题截断规则，让节点宽度随内容扩展且保留最小占满。
+- 验证：执行 `frontend` 下 `npm run build`，确认 TS/CSS 改动编译通过且仅作用于 Sidebar 树。
+
 ## Next
 
 - 继续处理下一个最早且可直接落地的开放 issue。
diff --git a/frontend/src/App.css b/frontend/src/App.css
index cadcc28..8abe429 100644
--- a/frontend/src/App.css
+++ b/frontend/src/App.css
@@ -37,6 +37,37 @@ body, #root {
   padding-right: 8px;
 }
 
+.sidebar-tree-scroll-shell {
+  overflow-x: auto;
+  overflow-y: hidden;
+}
+
+.sidebar-tree-scroll-shell .ant-tree {
+  min-width: 100%;
+}
+
+.sidebar-tree-scroll-shell .ant-tree .ant-tree-list-holder,
+.sidebar-tree-scroll-shell .ant-tree .ant-tree-list-holder-inner {
+  min-width: max-content;
+}
+
+.sidebar-tree-scroll-shell .ant-tree .ant-tree-treenode {
+  width: max-content;
+  min-width: 100%;
+}
+
+.sidebar-tree-scroll-shell .ant-tree .ant-tree-node-content-wrapper {
+  width: max-content !important;
+  min-width: 100%;
+}
+
+.sidebar-tree-scroll-shell .ant-tree .ant-tree-title {
+  flex: 0 0 auto;
+  min-width: max-content;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .redis-viewer-workbench .ant-tree {
     background: transparent;
 }
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ed3743b..f6fb258 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -3787,29 +3787,31 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
             </Tooltip>
         </div>
 
-        <div ref={treeContainerRef} style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
-            <Tree
-                showIcon
-                draggable={{
-                    icon: false,
-                    nodeDraggable: (node: any) => node.type === 'connection' || node.type === 'tag'
-                }}
-                onDrop={handleDrop}
-                loadData={onLoadData}
-                treeData={displayTreeData}
-                onDoubleClick={onDoubleClick}
-                onSelect={onSelect}
-                titleRender={titleRender}
-                expandedKeys={expandedKeys}
-                onExpand={onExpand}
-                loadedKeys={loadedKeys}
-                onLoad={setLoadedKeys}
-                autoExpandParent={autoExpandParent}
-                selectedKeys={selectedKeys}
-                blockNode
-                height={treeHeight}
-                onRightClick={onRightClick}
-            />
+        <div ref={treeContainerRef} className="sidebar-tree-scroll-shell" style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>
+            <div className="sidebar-tree-scroll-content">
+                <Tree
+                    showIcon
+                    draggable={{
+                        icon: false,
+                        nodeDraggable: (node: any) => node.type === 'connection' || node.type === 'tag'
+                    }}
+                    onDrop={handleDrop}
+                    loadData={onLoadData}
+                    treeData={displayTreeData}
+                    onDoubleClick={onDoubleClick}
+                    onSelect={onSelect}
+                    titleRender={titleRender}
+                    expandedKeys={expandedKeys}
+                    onExpand={onExpand}
+                    loadedKeys={loadedKeys}
+                    onLoad={setLoadedKeys}
+                    autoExpandParent={autoExpandParent}
+                    selectedKeys={selectedKeys}
+                    blockNode
+                    height={treeHeight}
+                    onRightClick={onRightClick}
+                />
+            </div>
         </div>
 
         {contextMenu && (