From 0ce6fde347648765f7ec6032e3ef47a98f200dc5 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 9 Jun 2026 01:01:50 +0800
Subject: [PATCH] fix(grid): unify selected cell border thickness in DOM and
 canvas mode

DOM mode: replace box-shadow with outline to avoid stacking with row border-b.
Canvas mode: draw row border before selected cell overlay so selection uses
uniform color on all four sides; clamp top edge to prevent canvas clipping.
---
 apps/desktop/src/components/grid/DataGrid.vue | 15 ++++++++----
 .../desktop/src/lib/canvasDataGridRenderer.ts | 24 +++++++++----------
 2 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/apps/desktop/src/components/grid/DataGrid.vue b/apps/desktop/src/components/grid/DataGrid.vue
index 92b6fc411e..a998a4e98b 100644
--- a/apps/desktop/src/components/grid/DataGrid.vue
+++ b/apps/desktop/src/components/grid/DataGrid.vue
@@ -8775,17 +8775,20 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
 
 .cell-selected {
   background-color: var(--data-grid-cell-selected-bg);
-  box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
+  outline: 1px solid var(--data-grid-cell-selected-border);
+  outline-offset: -1px;
 }
 
 .row-cell-selected {
   background-color: var(--data-grid-cell-selected-bg);
-  box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
+  outline: 1px solid var(--data-grid-cell-selected-border);
+  outline-offset: -1px;
 }
 
 .transpose-record-header-selected {
   background-color: var(--data-grid-row-number-selected-bg);
-  box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
+  outline: 1px solid var(--data-grid-cell-selected-border);
+  outline-offset: -1px;
 }
 
 .transpose-record-header-active {
@@ -8794,12 +8797,14 @@ const gridContextMenuItems = computed<ContextMenuItem[]>(() => {
 
 .cell-selected-dirty {
   background-color: var(--data-grid-cell-selected-dirty-bg);
-  box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
+  outline: 1px solid var(--data-grid-cell-selected-border);
+  outline-offset: -1px;
 }
 
 .row-cell-selected-dirty {
   background-color: var(--data-grid-cell-selected-dirty-bg);
-  box-shadow: inset 0 0 0 1px var(--data-grid-cell-selected-border);
+  outline: 1px solid var(--data-grid-cell-selected-border);
+  outline-offset: -1px;
 }
 
 .data-grid-row-number.bg-emerald-500\/15 {
diff --git a/apps/desktop/src/lib/canvasDataGridRenderer.ts b/apps/desktop/src/lib/canvasDataGridRenderer.ts
index 707161bb33..ccef705dd8 100644
--- a/apps/desktop/src/lib/canvasDataGridRenderer.ts
+++ b/apps/desktop/src/lib/canvasDataGridRenderer.ts
@@ -351,6 +351,13 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
     ctx.fillText(String(item.displayIndex + 1), rowNumberTextX, textY);
     ctx.font = normalFont;
 
+    const rowBorderY = crispCanvasLine(y + CANVAS_DATA_GRID_ROW_HEIGHT - 1, dpr);
+    ctx.strokeStyle = theme.border;
+    ctx.beginPath();
+    ctx.moveTo(0, rowBorderY);
+    ctx.lineTo(width, rowBorderY);
+    ctx.stroke();
+
     let x = rowNumberWidth + columnOffset - scrollLeft;
     for (let visibleColIdx = firstCol; visibleColIdx < renderedColumnWidths.length && x < width; visibleColIdx++) {
       const colWidth = renderedColumnWidths[visibleColIdx] ?? 0;
@@ -449,21 +456,20 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
         if (selectedBorderVisual && cellPaintWidth >= 2) {
           const selectedLeftX = clippedX + 0.5;
           const selectedRightX = clippedX + cellPaintWidth - 1.5;
-          const selectedTopY = y + 0.5;
-          const selectedBottomY = y + CANVAS_DATA_GRID_ROW_HEIGHT - 1.5;
+          const selectedTopY = Math.max(y + 0.5, 1);
           const drawSelectedLeftBorder = selectedLeftX > rowNumberWidth + 0.5;
           ctx.strokeStyle = theme.cellSelectedBorder;
           ctx.beginPath();
           ctx.moveTo(selectedLeftX, selectedTopY);
           ctx.lineTo(selectedRightX, selectedTopY);
-          ctx.moveTo(selectedLeftX, selectedBottomY);
-          ctx.lineTo(selectedRightX, selectedBottomY);
+          ctx.moveTo(selectedLeftX, rowBorderY);
+          ctx.lineTo(selectedRightX, rowBorderY);
           if (drawSelectedLeftBorder) {
             ctx.moveTo(selectedLeftX, selectedTopY);
-            ctx.lineTo(selectedLeftX, selectedBottomY);
+            ctx.lineTo(selectedLeftX, rowBorderY);
           }
           ctx.moveTo(selectedRightX, selectedTopY);
-          ctx.lineTo(selectedRightX, selectedBottomY);
+          ctx.lineTo(selectedRightX, rowBorderY);
           ctx.stroke();
         }
 
@@ -476,12 +482,6 @@ export function drawCanvasDataGrid(options: DrawCanvasDataGridOptions) {
       }
       x += colWidth;
     }
-    ctx.strokeStyle = theme.border;
-    ctx.beginPath();
-    const rowBorderY = crispCanvasLine(y + CANVAS_DATA_GRID_ROW_HEIGHT - 1, dpr);
-    ctx.moveTo(0, rowBorderY);
-    ctx.lineTo(width, rowBorderY);
-    ctx.stroke();
     ctx.globalAlpha = 1;
   }
 }