From e117ec2c8c320112cbf9d93ead5a381814e55a7b Mon Sep 17 00:00:00 2001 From: Syngnat Date: Fri, 31 Jul 2026 17:48:32 +0800 Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(datagrid):=20=E6=81=A2?= =?UTF-8?q?=E5=A4=8D=E7=BB=93=E6=9E=9C=E8=A7=86=E5=9B=BE=E9=80=89=E4=B8=AD?= =?UTF-8?q?=E4=B8=BB=E9=A2=98=E8=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 选中状态恢复主题强调色与对应前景色 - 补齐聚焦、悬停和按下状态的主题派生色 - 增加回归断言，避免样式退回中性背景 --- .../src/components/DataGrid.layout.test.tsx | 10 +++++++++ frontend/src/v2-theme.css | 22 ++++++++++++++++--- 2 files changed, 29 insertions(+), 3 deletions(-) diff --git a/frontend/src/components/DataGrid.layout.test.tsx b/frontend/src/components/DataGrid.layout.test.tsx index 560a375d..9b8d8a10 100644 --- a/frontend/src/components/DataGrid.layout.test.tsx +++ b/frontend/src/components/DataGrid.layout.test.tsx @@ -1327,6 +1327,10 @@ describe('DataGrid layout', () => { css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button:disabled {'), css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid .gn-v2-commit-button .gn-v2-toolbar-kbd {'), ); + const viewTabSelectionCss = css.slice( + css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary {'), + css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid-statusbar .gn-v2-data-grid-toolbar-action.ant-btn {'), + ); const resultViewSelectionCss = css.slice( css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid-result-switcher .ant-segmented-item-selected,'), css.indexOf('body[data-ui-version="v2"] .gn-v2-data-grid-page-find-overlay {'), @@ -1340,6 +1344,12 @@ describe('DataGrid layout', () => { expect(commitDisabledCss).toContain('background: var(--gn-bg-active) !important;'); expect(commitDisabledCss).toContain('color: var(--gn-fg-5) !important;'); expect(commitDisabledCss).not.toContain('var(--gn-accent-soft)'); + expect(viewTabSelectionCss).toContain('background: var(--gn-accent-strong, var(--gn-accent)) !important;'); + expect(viewTabSelectionCss).toContain('color: var(--gn-on-accent, #fff) !important;'); + expect(viewTabSelectionCss).not.toContain('background: var(--gn-bg-active) !important;'); + expect(viewTabSelectionCss).toContain(':focus-visible'); + expect(viewTabSelectionCss).toContain('background: var(--gn-accent-strong-hover, var(--gn-accent-2)) !important;'); + expect(viewTabSelectionCss).toContain('background: var(--gn-accent-strong-active, var(--gn-accent-2)) !important;'); expect(resultViewSelectionCss).toContain('background: var(--gn-accent-strong, var(--gn-accent)) !important;'); expect(resultViewSelectionCss).toContain('border: 0 !important;'); expect(resultViewSelectionCss).toContain('box-shadow: none !important;'); diff --git a/frontend/src/v2-theme.css b/frontend/src/v2-theme.css index f03c3ce0..013827fa 100644 --- a/frontend/src/v2-theme.css +++ b/frontend/src/v2-theme.css @@ -4726,9 +4726,25 @@ body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn { } body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary { - background: var(--gn-bg-active) !important; - color: var(--gn-fg-1) !important; - border-color: transparent !important; + background: var(--gn-accent-strong, var(--gn-accent)) !important; + color: var(--gn-on-accent, #fff) !important; + border-color: var(--gn-accent-strong, var(--gn-accent-2)) !important; + box-shadow: var(--gn-shadow-sm), inset 0 0.5px 0 rgba(255, 255, 255, 0.15) !important; +} + +body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary:hover, +body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary:focus, +body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary:focus-visible { + background: var(--gn-accent-strong-hover, var(--gn-accent-2)) !important; + color: var(--gn-on-accent, #fff) !important; + border-color: var(--gn-accent-strong-hover, var(--gn-accent-2)) !important; + box-shadow: var(--gn-shadow-sm), inset 0 0.5px 0 rgba(255, 255, 255, 0.15) !important; +} + +body[data-ui-version="v2"] .gn-v2-data-grid-view-tabs .ant-btn-primary:active { + background: var(--gn-accent-strong-active, var(--gn-accent-2)) !important; + color: var(--gn-on-accent, #fff) !important; + border-color: var(--gn-accent-strong-active, var(--gn-accent-2)) !important; box-shadow: none !important; }