diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue index 50a9b2ce0d..53fc890e16 100644 --- a/apps/desktop/src/components/grid/DataGrid.vue +++ b/apps/desktop/src/components/grid/DataGrid.vue @@ -15896,7 +15896,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-row-muted-bg: rgb(240, 240, 240); --data-grid-row-new-bg: rgb(243, 243, 243); --data-grid-row-deleted-bg: rgb(255, 244, 244); - --data-grid-cell-active-bg: rgb(244, 248, 255); + --data-grid-cell-active-bg: rgb(219, 234, 254); --data-grid-cell-crosshair-row-bg: rgb(174, 195, 224); --data-grid-cell-crosshair-col-bg: rgb(142, 170, 210); --data-grid-cell-dirty-bg: rgb(255, 248, 230); @@ -15912,7 +15912,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-row-number-new-bg: rgb(219, 244, 233); --data-grid-row-number-edited-bg: rgb(253, 241, 219); --data-grid-row-number-deleted-bg: rgb(255, 244, 244); - --data-grid-row-number-active-bg: rgb(244, 248, 255); + --data-grid-row-number-active-bg: rgb(219, 234, 254); --data-grid-row-number-selected-bg: rgb(191, 219, 254); --data-grid-scrollbar-thumb: color-mix(in oklch, var(--foreground) 30%, transparent); --data-grid-scrollbar-thumb-hover: color-mix(in oklch, var(--foreground) 48%, transparent); @@ -15930,7 +15930,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-row-muted-bg: rgb(40, 40, 43); --data-grid-row-new-bg: rgb(51, 51, 55); --data-grid-row-deleted-bg: rgb(55, 31, 32); - --data-grid-cell-active-bg: rgb(25, 34, 46); + --data-grid-cell-active-bg: rgb(27, 46, 70); --data-grid-cell-crosshair-row-bg: rgb(75, 84, 98); --data-grid-cell-crosshair-col-bg: rgb(98, 111, 130); --data-grid-cell-dirty-bg: rgb(94, 75, 26); @@ -15946,7 +15946,7 @@ useUpdateBlocker(() => (hasPendingChanges.value || hasPendingDataEditorDraft.val --data-grid-row-number-new-bg: rgb(33, 45, 40); --data-grid-row-number-edited-bg: rgb(48, 41, 28); --data-grid-row-number-deleted-bg: rgb(55, 31, 32); - --data-grid-row-number-active-bg: rgb(25, 34, 46); + --data-grid-row-number-active-bg: rgb(27, 46, 70); --data-grid-row-number-selected-bg: rgb(30, 64, 96); --data-grid-scrollbar-thumb: rgb(82, 82, 91); --data-grid-scrollbar-thumb-hover: rgb(113, 113, 122); diff --git a/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts b/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts index 7c63d78f7f..d7a7eae96b 100644 --- a/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts +++ b/apps/desktop/src/lib/__tests__/dataGrid/dataGridPaintTheme.spec.ts @@ -39,7 +39,7 @@ function contrastRatio(a: string, b: string): number { } describe("data grid paint theme", () => { - it("uses a subtle active-row surface fallback in both color schemes", () => { + it("uses the active-row surface fallback in both color schemes", () => { expect(dataGridActiveRowBackground(false)).toBe(DATA_GRID_LIGHT_ACTIVE_ROW_BG); expect(dataGridActiveRowBackground(true)).toBe(DATA_GRID_DARK_ACTIVE_ROW_BG); @@ -50,6 +50,20 @@ describe("data grid paint theme", () => { expect(resolveDataGridPaintTheme({ getVar: emptyCssVariable, isDark: true }).rowNumberActive).toBe(DATA_GRID_DARK_ACTIVE_ROW_BG); }); + it("keeps the active row clearly visible yet lighter than the selected cell (#11649)", () => { + const emptyCssVariable = () => ""; + + for (const isDark of [false, true]) { + const theme = resolveDataGridPaintTheme({ getVar: emptyCssVariable, isDark }); + + // 活动行需与普通行底色拉开差距,避免看岔行 + expect(contrastRatio(theme.background, theme.cellActive)).toBeGreaterThanOrEqual(1.15); + // 行内被点击的单元格仍须从活动行中凸显出来 + expect(theme.cellActive).not.toBe(theme.cellSelected); + expect(contrastRatio(theme.cellActive, theme.cellSelectedSingle)).toBeGreaterThanOrEqual(1.1); + } + }); + it("resolves crosshair row/col fills in both color schemes", () => { const emptyCssVariable = () => ""; diff --git a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts index c2de1026dc..d2d93a33f1 100644 --- a/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts +++ b/apps/desktop/src/lib/dataGrid/dataGridPaintTheme.ts @@ -43,8 +43,11 @@ export const DATA_GRID_DARK_SEARCH_COLORS = { current: "rgb(116, 87, 0)", currentBorder: "rgb(239, 177, 0)", } as const; -export const DATA_GRID_LIGHT_ACTIVE_ROW_BG = "rgb(244, 248, 255)"; -export const DATA_GRID_DARK_ACTIVE_ROW_BG = "rgb(25, 34, 46)"; +// 活动行底色:需在白底/斑马纹上清晰可辨(避免看岔行,#11649),同时仍比选中格底色 +// (cellSelectedSingle)浅,使行内被点击的单元格依然突出。网格组件样式里的 +// --data-grid-cell-active-bg / --data-grid-row-number-active-bg 需与此保持一致。 +export const DATA_GRID_LIGHT_ACTIVE_ROW_BG = "rgb(219, 234, 254)"; +export const DATA_GRID_DARK_ACTIVE_ROW_BG = "rgb(27, 46, 70)"; // 十字行/列底色:混入背景的实色(color-mix(in srgb, var(--primary) P%, var(--background))), // 而非透明叠加——铺在浅底上的半透明色会被冲淡到几乎不可见,对比度不足正 jira #7276 的核心痛点。 // 行/列占 primary 34%/50%(CSS 方向:P% primary + 其余 background);现有 28%/40% 在浅色