🐛 fix(sidebar): 修复 V2 当前连接新建查询入口

- 在当前连接头部增加更明显的新建查询按钮
- 使用文档图标区分连接创建入口,避免与加号按钮混淆
- 通过连接树节点上下文触发新建查询,修复点击无响应
- 补充 V2 侧边栏入口位置与图标回归断言
This commit is contained in:
Syngnat
2026-06-25 18:42:31 +08:00
parent 8a56367d02
commit bdb60a656a
3 changed files with 75 additions and 1 deletions

View File

@@ -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();

View File

@@ -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

View File

@@ -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;