🐛 fix(query-editor): 修复事务提交按钮缺少悬浮反馈

- 调整提交按钮 hover 和 focus 态的背景与阴影样式
- 同步增强提交计数徽标的悬浮视觉反馈
- 补充提交按钮悬浮样式回归测试
This commit is contained in:
Syngnat
2026-06-14 22:56:21 +08:00
parent 9b0e7937f9
commit 675aae16e9
2 changed files with 21 additions and 3 deletions

View File

@@ -30,8 +30,24 @@ describe('QueryEditorToolbar layout', () => {
it('keeps commit button hover styling in source and v2 css', () => {
const css = readFileSync(new URL('../v2-theme.css', import.meta.url), 'utf8');
const commitBaseCss = css.slice(
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button {'),
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,'),
);
const commitHoverCss = css.slice(
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,'),
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button .gn-v2-toolbar-kbd {'),
);
const commitKbdHoverCss = css.slice(
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover .gn-v2-toolbar-kbd,'),
css.indexOf('body[data-ui-version="v2"] .gn-v2-query-toolbar-icon-action.ant-btn,'),
);
expect(css).toContain('.gn-v2-query-transaction-commit-button:hover');
expect(css).toContain('.gn-v2-query-transaction-commit-button:focus-visible');
expect(commitBaseCss).toContain('background: var(--gn-accent-soft) !important;');
expect(commitHoverCss).not.toContain('background: var(--gn-accent-soft) !important;');
expect(commitHoverCss).toContain('box-shadow:');
expect(commitKbdHoverCss).toContain('background:');
});
});

View File

@@ -4921,15 +4921,17 @@ body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button {
background: var(--gn-accent-soft) !important;
color: var(--gn-accent-2) !important;
font-weight: 750 !important;
transition: background-color 120ms ease, box-shadow 120ms ease, border-color 120ms ease !important;
}
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover,
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus,
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible,
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active {
border-color: transparent !important;
background: var(--gn-accent-soft) !important;
border-color: rgba(22, 163, 74, 0.18) !important;
background: color-mix(in srgb, var(--gn-accent-soft) 80%, rgba(22, 163, 74, 0.28)) !important;
color: var(--gn-accent-2) !important;
box-shadow: 0 0 0 1px rgba(22, 163, 74, 0.12), 0 6px 14px rgba(22, 163, 74, 0.12) !important;
}
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button .gn-v2-toolbar-kbd {
@@ -4945,7 +4947,7 @@ body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:hover .gn-v2-t
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus .gn-v2-toolbar-kbd,
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:focus-visible .gn-v2-toolbar-kbd,
body[data-ui-version="v2"] .gn-v2-query-transaction-commit-button:active .gn-v2-toolbar-kbd {
background: rgba(22, 163, 74, 0.18);
background: rgba(22, 163, 74, 0.24);
color: var(--gn-accent-2);
}