From 3bcec8ef7f0ace0cdea0b629415f78af7c13f5d8 Mon Sep 17 00:00:00 2001
From: t8y2 <1156263951@qq.com>
Date: Tue, 12 May 2026 17:16:37 +0800
Subject: [PATCH] feat(grid): highlight active row and add first/last page
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Highlight the row containing the selected cell with a subtle
  primary-color tint so the active row is easy to spot.
- Add first-page (« ) and last-page (») pagination buttons.
  Last-page runs a COUNT(*) query to calculate the final page offset.
---
 src/components/grid/DataGrid.vue | 18 +++++++++++++++---
 1 file changed, 15 insertions(+), 3 deletions(-)

diff --git a/src/components/grid/DataGrid.vue b/src/components/grid/DataGrid.vue
index c72506448a..12c5a7e1a4 100644
--- a/src/components/grid/DataGrid.vue
+++ b/src/components/grid/DataGrid.vue
@@ -1081,6 +1081,13 @@ const {
 } = selection;
 
 const selectionSummary = computed(() => t("grid.selectedCells", { count: selectedCellCount.value }));
+
+function isRowActive(index: number): boolean {
+  const range = selectedRange.value;
+  if (!range) return false;
+  return index >= range.startRow && index <= range.endRow;
+}
+
 const contextRowItem = computed(() => (contextCell.value ? getRowItem(contextCell.value.rowId) : undefined));
 const contextColumn = computed(() => {
   if (!contextCell.value || contextCell.value.col < 0) return null;
@@ -2208,11 +2215,12 @@ defineExpose({
               >
                 <template #default="{ item, index }">
                   <div
-                    class="flex text-xs border-b border-border hover:bg-accent/50"
+                    class="flex text-xs border-b border-border"
                     :class="{
                       'bg-destructive/5 opacity-70': item.isDeleted,
-                      'bg-primary/5': item.isNew,
-                      'bg-muted/30': !item.isNew && !item.isDeleted && index % 2 === 1,
+                      'bg-primary/5': item.isNew && !isRowActive(index),
+                      'bg-muted/30': !item.isNew && !item.isDeleted && !isRowActive(index) && index % 2 === 1,
+                      'active-row': isRowActive(index) && !item.isDeleted,
                     }"
                     :style="{ height: '26px', width: 'var(--total-w)' }"
                   >
@@ -2702,6 +2710,10 @@ defineExpose({
   box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--primary) 55%, transparent);
 }
 
+.active-row > div {
+  background-color: color-mix(in oklab, var(--primary) 10%, transparent);
+}
+
 .ddl-code :deep(.ddl-kw) {
   color: oklch(0.6 0.15 250);
   font-weight: 600;