From d75596921c612ddb887920feb0d6e3ffe2f9b238 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Wed, 18 Mar 2026 15:01:56 +0800
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20feat(sidebar):=20=E5=A2=9E=E5=8A=A0?=
 =?UTF-8?q?=E5=B7=B2=E4=BF=9D=E5=AD=98=E6=9F=A5=E8=AF=A2=E5=88=A0=E9=99=A4?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=B9=B6=E6=89=A9=E5=B1=95=E8=BF=90=E8=A1=8C?=
 =?UTF-8?q?=E5=A4=96=E9=83=A8SQL=E6=96=87=E4=BB=B6=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 已存查询节点增加右键菜单：打开查询 / 删除查询（含确认弹窗）
- 连接节点右键菜单增加"运行外部SQL文件"入口
- 侧栏工具栏增加"运行外部SQL文件"按钮，使用当前活跃连接上下文
- 统一所有 SQL 文件相关文案为"运行外部SQL文件"
- 表头字段备注过长溢出修复（overflow: hidden）
- 列宽调整与拖拽排序隔离（onPointerDown stopPropagation + isResizingRef guard）
- refs #247
---
 frontend/src/components/Sidebar.tsx | 90 ++++++++++++++++++++++++++++-
 1 file changed, 88 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index 520602d..45e8ec5 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -89,6 +89,7 @@ const SEARCH_SCOPE_ICON_MAP: Record<SearchScope, React.ReactNode> = {
 const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }> = ({ onEditConnection }) => {
   const connections = useStore(state => state.connections);
   const savedQueries = useStore(state => state.savedQueries);
+  const deleteQuery = useStore(state => state.deleteQuery);
   const addConnection = useStore(state => state.addConnection);
   const addTab = useStore(state => state.addTab);
   const setActiveContext = useStore(state => state.setActiveContext);
@@ -2064,7 +2065,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
           const { dbName, id } = node.dataRef;
           addTab({
               id: `query-${Date.now()}`,
-              title: `Import SQL`,
+              title: `运行外部SQL文件`,
               type: 'query',
               connectionId: node.type === 'connection' ? node.key : node.dataRef.id,
               dbName: dbName,
@@ -2075,6 +2076,27 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
       }
   };
 
+  const handleOpenSQLFileFromToolbar = async () => {
+      const ctx = useStore.getState().activeContext;
+      if (!ctx?.connectionId) {
+          message.warning('请先选择一个连接或数据库');
+          return;
+      }
+      const res = await (window as any).go.app.App.OpenSQLFile();
+      if (res.success) {
+          addTab({
+              id: `query-${Date.now()}`,
+              title: `运行外部SQL文件`,
+              type: 'query',
+              connectionId: ctx.connectionId,
+              dbName: ctx.dbName || undefined,
+              query: res.data
+          });
+      } else if (res.message !== '已取消') {
+          message.error('读取文件失败: ' + res.message);
+      }
+  };
+
   const handleCreateDatabase = async () => {
       try {
           const values = await createDbForm.validateFields();
@@ -3071,6 +3093,12 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
                    });
                }
              },
+             {
+                 key: 'open-sql-file',
+                 label: '运行外部SQL文件',
+                 icon: <FileAddOutlined />,
+                 onClick: () => handleRunSQLFile(node)
+             },
              { type: 'divider' },
              {
                  key: 'edit',
@@ -3257,7 +3285,7 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
              },
              {
                  key: 'run-sql',
-                 label: '运行 SQL 文件...',
+                 label: '运行外部SQL文件',
                  icon: <FileAddOutlined />,
                  onClick: () => handleRunSQLFile(node)
              }
@@ -3414,6 +3442,56 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
             }
         ];
     }
+
+    // 已存查询节点的右键菜单
+    if (node.type === 'saved-query') {
+        const q = node.dataRef;
+        return [
+            {
+                key: 'open-query',
+                label: '打开查询',
+                icon: <ConsoleSqlOutlined />,
+                onClick: () => {
+                    addTab({
+                        id: q.id,
+                        title: q.name,
+                        type: 'query',
+                        connectionId: q.connectionId,
+                        dbName: q.dbName,
+                        query: q.sql,
+                        savedQueryId: q.id,
+                    });
+                }
+            },
+            { type: 'divider' },
+            {
+                key: 'delete-query',
+                label: '删除查询',
+                icon: <DeleteOutlined />,
+                danger: true,
+                onClick: () => {
+                    Modal.confirm({
+                        title: '确认删除',
+                        content: `确定要删除已保存的查询 "${q.name}" 吗？此操作不可恢复。`,
+                        okButtonProps: { danger: true },
+                        onOk: () => {
+                            deleteQuery(q.id);
+                            // 从树中移除节点
+                            setTreeData(origin => {
+                                const removeNode = (list: TreeNode[]): TreeNode[] =>
+                                    list
+                                        .filter(n => n.key !== node.key)
+                                        .map(n => n.children ? { ...n, children: removeNode(n.children) } : n);
+                                return removeNode(origin);
+                            });
+                            message.success('查询已删除');
+                        }
+                    });
+                }
+            }
+        ];
+    }
+
     return [];
   };
 
@@ -3626,6 +3704,14 @@ const Sidebar: React.FC<{ onEditConnection?: (conn: SavedConnection) => void }>
             >
                 批量操作库
             </Button>
+            <Button
+                size="small"
+                icon={<FileAddOutlined />}
+                onClick={handleOpenSQLFileFromToolbar}
+                style={{ flex: '1 1 auto' }}
+            >
+                运行外部SQL文件
+            </Button>
         </div>
 
         <div ref={treeContainerRef} style={{ flex: 1, overflow: 'hidden', minHeight: 0 }}>