From 38f25d8629d11173feeaa1afee24f2425b1f41a0 Mon Sep 17 00:00:00 2001 From: t8y2 <1156263951@qq.com> Date: Tue, 2 Jun 2026 21:40:51 +0800 Subject: [PATCH] feat(grid): enable canvas renderer by default --- apps/desktop/src/i18n/locales/en.ts | 2 +- apps/desktop/src/i18n/locales/es.ts | 2 +- apps/desktop/src/i18n/locales/zh-CN.ts | 2 +- apps/desktop/src/i18n/locales/zh-TW.ts | 2 +- apps/desktop/src/lib/canvasDataGridRenderer.ts | 15 +++++++-------- apps/desktop/src/lib/dataGridPaintTheme.ts | 18 +++++++++++++++--- apps/desktop/src/stores/settingsStore.ts | 2 +- 7 files changed, 27 insertions(+), 16 deletions(-) diff --git a/apps/desktop/src/i18n/locales/en.ts b/apps/desktop/src/i18n/locales/en.ts index ad8c92223d..ebda41856c 100644 --- a/apps/desktop/src/i18n/locales/en.ts +++ b/apps/desktop/src/i18n/locales/en.ts @@ -441,7 +441,7 @@ export default { copyFailed: "Copy failed: {message}", domRenderMode: "DOM", canvasRenderMode: "Canvas", - renderModeHint: "Switch between the stable DOM grid and experimental Canvas rendering.", + renderModeHint: "Switch between Canvas rendering and the DOM fallback grid.", filter: "Filter", filterBuilder: "Filters", filterBuilderTitle: "Filters", diff --git a/apps/desktop/src/i18n/locales/es.ts b/apps/desktop/src/i18n/locales/es.ts index 37f301fd64..cf1395c58f 100644 --- a/apps/desktop/src/i18n/locales/es.ts +++ b/apps/desktop/src/i18n/locales/es.ts @@ -434,7 +434,7 @@ export default { copyFailed: "Error al copiar: {message}", domRenderMode: "DOM", canvasRenderMode: "Canvas", - renderModeHint: "Alterna entre la cuadrícula DOM estable y el renderizado Canvas experimental.", + renderModeHint: "Alterna entre el renderizado Canvas y la cuadrícula DOM de respaldo.", filter: "Filtrar", filterBuilder: "Filtros", filterBuilderTitle: "Filtros", diff --git a/apps/desktop/src/i18n/locales/zh-CN.ts b/apps/desktop/src/i18n/locales/zh-CN.ts index 46635c81ef..9a1f014320 100644 --- a/apps/desktop/src/i18n/locales/zh-CN.ts +++ b/apps/desktop/src/i18n/locales/zh-CN.ts @@ -437,7 +437,7 @@ export default { copyFailed: "复制失败：{message}", domRenderMode: "DOM", canvasRenderMode: "Canvas", - renderModeHint: "在稳定 DOM 表格和实验性 Canvas 渲染之间切换。", + renderModeHint: "在 Canvas 渲染和 DOM 兜底表格之间切换。", filter: "筛选", filterBuilder: "筛选器", filterBuilderTitle: "筛选器", diff --git a/apps/desktop/src/i18n/locales/zh-TW.ts b/apps/desktop/src/i18n/locales/zh-TW.ts index a39f215d8f..2b734a8118 100644 --- a/apps/desktop/src/i18n/locales/zh-TW.ts +++ b/apps/desktop/src/i18n/locales/zh-TW.ts @@ -437,7 +437,7 @@ export default { copyFailed: "複製失敗：{message}", domRenderMode: "DOM", canvasRenderMode: "Canvas", - renderModeHint: "在穩定 DOM 表格和實驗性 Canvas 渲染之間切換。", + renderModeHint: "在 Canvas 渲染和 DOM 備援表格之間切換。", filter: "篩選", filterBuilder: "篩選器", filterBuilderTitle: "篩選器", diff --git a/apps/desktop/src/lib/canvasDataGridRenderer.ts b/apps/desktop/src/lib/canvasDataGridRenderer.ts index 685453ef37..d88ad24daf 100644 --- a/apps/desktop/src/lib/canvasDataGridRenderer.ts +++ b/apps/desktop/src/lib/canvasDataGridRenderer.ts @@ -280,9 +280,10 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) { const rowSelectionVisual = rowCellsUseSelectionVisual(item.id); const isSingleSelectedCell = singleSelectedCell?.rowIndex === item.displayIndex && singleSelectedCell.visibleColIdx === visibleColIdx; - const selectedFillVisual = rowSelectionVisual || (selectedCell && !isSingleSelectedCell); - const selectedBorderVisual = rowSelectionVisual || selectedCell; const isDirtyCell = item.isDirtyCol[actualColIdx]; + const selectedFillVisual = + rowSelectionVisual || (selectedCell && !isSingleSelectedCell && (!rowIsActive || isDirtyCell)); + const selectedBorderVisual = rowSelectionVisual || selectedCell; const isSearchMatch = paintSearchMatches && searchMatchKeys.has(`${item.displayIndex}:${actualColIdx}`); const isCurrentSearchMatch = paintSearchMatches && @@ -363,12 +364,10 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) { const selectedBottomY = y + CANVAS_DATA_GRID_ROW_HEIGHT - 1.5; ctx.strokeStyle = theme.cellSelectedBorder; ctx.beginPath(); - if (!rowSelectionVisual) { - ctx.moveTo(selectedLeftX, selectedTopY); - ctx.lineTo(selectedRightX, selectedTopY); - ctx.moveTo(selectedLeftX, selectedBottomY); - ctx.lineTo(selectedRightX, selectedBottomY); - } + ctx.moveTo(selectedLeftX, selectedTopY); + ctx.lineTo(selectedRightX, selectedTopY); + ctx.moveTo(selectedLeftX, selectedBottomY); + ctx.lineTo(selectedRightX, selectedBottomY); ctx.moveTo(selectedLeftX, selectedTopY); ctx.lineTo(selectedLeftX, selectedBottomY); ctx.moveTo(selectedRightX, selectedTopY); diff --git a/apps/desktop/src/lib/dataGridPaintTheme.ts b/apps/desktop/src/lib/dataGridPaintTheme.ts index 82b64346a3..621f4b11bd 100644 --- a/apps/desktop/src/lib/dataGridPaintTheme.ts +++ b/apps/desktop/src/lib/dataGridPaintTheme.ts @@ -40,10 +40,22 @@ export function cssVarColor(getVar: (name: string) => string, name: string, fall return value.startsWith("#") || /^(rgb|hsl|oklch|oklab|lab|lch|color-mix)\(/.test(value) ? value : `hsl(${value})`; } +function resolveCssVarReferences(value: string, getVar: (name: string) => string, depth = 0): string { + if (depth > 6 || !value.includes("var(")) return value; + return value.replace(/var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/g, (_match, name: string, fallback?: string) => { + const resolved = getVar(name).trim() || fallback?.trim() || ""; + if (!resolved) return ""; + const nested = resolveCssVarReferences(resolved, getVar, depth + 1); + return cssVarColor(() => nested, name, nested); + }); +} + function paintToken(getVar: (name: string) => string, name: string, fallback: string): string { - const value = getVar(name).trim(); - if (!value || value.includes("var(")) return fallback; - return cssVarColor(getVar, name, fallback); + const value = resolveCssVarReferences(getVar(name).trim(), getVar); + if (!value) return fallback; + return value.startsWith("#") || /^(rgb|hsl|oklch|oklab|lab|lch|color-mix)\(/.test(value) + ? value + : cssVarColor(() => value, name, fallback); } export function resolveDataGridPaintTheme(options: { diff --git a/apps/desktop/src/stores/settingsStore.ts b/apps/desktop/src/stores/settingsStore.ts index e9941f021c..3f937c10f1 100644 --- a/apps/desktop/src/stores/settingsStore.ts +++ b/apps/desktop/src/stores/settingsStore.ts @@ -255,7 +255,7 @@ export const DEFAULT_EDITOR_SETTINGS: EditorSettings = { mongoViewMode: "document", showColumnCommentsInHeader: false, compactColumnHeaderActions: true, - dataGridRenderMode: "dom", + dataGridRenderMode: "canvas", structureEditorDensity: "compact", tableInfoDrawerWidth: 320, cellDetailDrawerWidth: 320,