From bdb60a656a0a7ca44902536f260da592743b2413 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Thu, 25 Jun 2026 18:42:31 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(sidebar):=20=E4=BF=AE?=
 =?UTF-8?q?=E5=A4=8D=20V2=20=E5=BD=93=E5=89=8D=E8=BF=9E=E6=8E=A5=E6=96=B0?=
 =?UTF-8?q?=E5=BB=BA=E6=9F=A5=E8=AF=A2=E5=85=A5=E5=8F=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在当前连接头部增加更明显的新建查询按钮
- 使用文档图标区分连接创建入口，避免与加号按钮混淆
- 通过连接树节点上下文触发新建查询，修复点击无响应
- 补充 V2 侧边栏入口位置与图标回归断言
---
 .../Sidebar.locate-toolbar.test.tsx           | 42 +++++++++++++++++++
 frontend/src/components/Sidebar.tsx           | 18 ++++++++
 frontend/src/v2-theme.css                     | 16 ++++++-
 3 files changed, 75 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/Sidebar.locate-toolbar.test.tsx b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
index e386cb0..a13ac2a 100644
--- a/frontend/src/components/Sidebar.locate-toolbar.test.tsx
+++ b/frontend/src/components/Sidebar.locate-toolbar.test.tsx
@@ -745,6 +745,7 @@ describe('Sidebar locate toolbar', () => {
     expect(markup).toContain('data-sidebar-batch-database-action="true"');
     expect(markup).toContain('data-sidebar-open-external-sql-file-action="true"');
     expect(markup).toContain('data-sidebar-locate-current-tab-action="true"');
+    expect(markup).toContain('data-gonavi-new-query-action="true"');
     expect(markup).toContain('data-gonavi-create-connection-action="true"');
     expect(markup).toContain('aria-label="AI 助手"');
     expect(markup).toContain('data-gonavi-ai-entry-action="true"');
@@ -1001,9 +1002,50 @@ describe('Sidebar locate toolbar', () => {
     expect(css).toMatch(/\.gn-v2-rail-tool \{[^}]*height: calc\(32px \* var\(--gn-ui-scale, 1\)\);/s);
     expect(css).toMatch(/\.gn-v2-rail-tool \{[^}]*width: calc\(24px \* var\(--gn-ui-scale, 1\)\);/s);
     expect(css).toMatch(/\.gn-v2-active-connection-trigger \{[^}]*height: 34px;[^}]*border: 0;[^}]*background: transparent;/s);
+    expect(css).toMatch(/\.gn-v2-active-connection-query-action \{[^}]*max-width: 96px;[^}]*font-size: 12px;/s);
     expect(css).not.toContain('.gn-v2-active-connection-trigger:hover');
   });
 
+  it('shows a prominent v2 new query action before connection creation without reusing the plus icon', () => {
+    mocks.state.connections = [{
+      id: 'conn-local',
+      name: '开发240',
+      config: {
+        type: 'mysql',
+        host: 'front_end_sys_dev',
+        port: 3306,
+      },
+    }];
+    mocks.state.activeContext = { connectionId: 'conn-local', dbName: 'front_end_sys_dev' };
+    mocks.state.appearance = {
+      enabled: true,
+      opacity: 1,
+      blur: 0,
+      uiVersion: 'v2',
+    };
+
+    const markup = renderSidebarMarkup({ uiVersion: 'v2', onCreateConnection: mocks.noop });
+    const sidebarSource = readSourceFile('./Sidebar.tsx');
+    const headerSource = sidebarSource.slice(
+      sidebarSource.indexOf('<div className="gn-v2-active-connection-actions">'),
+      sidebarSource.indexOf('<Tooltip title={v2ConnectionActionsLabel}>', sidebarSource.indexOf('<div className="gn-v2-active-connection-actions">')),
+    );
+    const newQueryActionSource = headerSource.slice(
+      headerSource.indexOf('<Tooltip title={t(\'sidebar.menu.new_query\')}>'),
+      headerSource.indexOf('{onCreateConnection && ('),
+    );
+
+    expect(markup).toContain('data-gonavi-new-query-action="true"');
+    expect(markup).toContain('aria-label="新建查询"');
+    expect(markup).toContain('新建查询');
+    expect(markup.indexOf('data-gonavi-new-query-action="true"')).toBeLessThan(markup.indexOf('data-gonavi-create-connection-action="true"'));
+    expect(newQueryActionSource).toContain('icon={<FileTextOutlined />}');
+    expect(newQueryActionSource).not.toContain('icon={<PlusOutlined />}');
+    expect(newQueryActionSource).toContain("handleV2ConnectionContextMenuAction(getConnectionNodeForAction(activeConnection), 'new-query')");
+    expect(newQueryActionSource).not.toContain("handleV2ConnectionContextMenuAction(activeConnection, 'new-query')");
+    expect(newQueryActionSource).toContain('disabled={!activeConnection}');
+  });
+
   it('keeps v2 explorer filter tabs on a single line when Oracle object filters are present', () => {
     const css = readV2ThemeCss();
 
diff --git a/frontend/src/components/Sidebar.tsx b/frontend/src/components/Sidebar.tsx
index ef0c4d8..1d8cd6e 100644
--- a/frontend/src/components/Sidebar.tsx
+++ b/frontend/src/components/Sidebar.tsx
@@ -2554,6 +2554,24 @@ const Sidebar: React.FC<{
                     </div>
                 </div>
                 <div className="gn-v2-active-connection-actions">
+                    <Tooltip title={t('sidebar.menu.new_query')}>
+                        <Button
+                            size="small"
+                            type="text"
+                            className="gn-v2-active-connection-query-action"
+                            icon={<FileTextOutlined />}
+                            aria-label={t('sidebar.menu.new_query')}
+                            data-gonavi-new-query-action="true"
+                            disabled={!activeConnection}
+                            onClick={() => {
+                                if (activeConnection) {
+                                    handleV2ConnectionContextMenuAction(getConnectionNodeForAction(activeConnection), 'new-query');
+                                }
+                            }}
+                        >
+                            {t('sidebar.menu.new_query')}
+                        </Button>
+                    </Tooltip>
                     {onCreateConnection && (
                         <Tooltip title={t('connection.new')}>
                             <Button
diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css
index 3c46753..28cd4ef 100644
--- a/frontend/src/v2-theme.css
+++ b/frontend/src/v2-theme.css
@@ -2145,10 +2145,24 @@ body[data-ui-version="v2"] .gn-v2-active-connection-copy span {
 body[data-ui-version="v2"] .gn-v2-active-connection-actions {
   display: inline-flex;
   align-items: center;
-  gap: 2px;
+  gap: 4px;
   flex: 0 0 auto;
 }
 
+body[data-ui-version="v2"] .gn-v2-active-connection-query-action {
+  padding: 0 8px;
+  max-width: 96px;
+  font-size: 12px;
+  font-weight: 500;
+}
+
+body[data-ui-version="v2"] .gn-v2-active-connection-query-action > span:not(.anticon) {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 body[data-ui-version="v2"] .gn-v2-explorer-search {
   padding: 10px 10px 6px !important;
   border-bottom: none !important;