From 675aae16e9e7f36bc58baf1f3bbd44b07b4d13d8 Mon Sep 17 00:00:00 2001 From: Syngnat Date: Sun, 14 Jun 2026 22:56:21 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(query-editor):=20=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D=E4=BA=8B=E5=8A=A1=E6=8F=90=E4=BA=A4=E6=8C=89=E9=92=AE?= =?UTF-8?q?=E7=BC=BA=E5=B0=91=E6=82=AC=E6=B5=AE=E5=8F=8D=E9=A6=88?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 调整提交按钮 hover 和 focus 态的背景与阴影样式 - 同步增强提交计数徽标的悬浮视觉反馈 - 补充提交按钮悬浮样式回归测试 --- .../QueryEditorToolbar.layout.test.tsx | 16 ++++++++++++++++ frontend/src/v2-theme.css | 8 +++++--- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/QueryEditorToolbar.layout.test.tsx b/frontend/src/components/QueryEditorToolbar.layout.test.tsx index 9ab58d8..839b581 100644 --- a/frontend/src/components/QueryEditorToolbar.layout.test.tsx +++ b/frontend/src/components/QueryEditorToolbar.layout.test.tsx @@ -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:'); }); }); diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css index 228dde6..23c8c76 100644 --- a/frontend/src/v2-theme.css +++ b/frontend/src/v2-theme.css @@ -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); }