From e553689940bb2984dfb27dc7209eea82713fa157 Mon Sep 17 00:00:00 2001
From: "Crane.z" <1481445951@qq.com>
Date: Thu, 12 Mar 2026 17:22:49 +0800
Subject: [PATCH 1/2] fix: SQL favorites background becomes white when
 scrolling quickly

---
 .../QueryConsole/SelectSnippetDialog.vue      | 20 ++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue b/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
index 6280ae0..873cbec 100644
--- a/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
+++ b/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
@@ -68,24 +68,26 @@ export default {
 </script>
 
 <style scoped>
-::v-deep .el-table tr {
+::v-deep .el-table {
   background-color: #383a3c;
 }
 
-::v-deep .el-table tr:hover {
-  background-color: #7c7c7e !important;
+::v-deep .el-table tr {
+  background-color: #383a3c !important;
 }
 
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-  background-color: #7c7c7e !important;
+::v-deep .el-table td.el-table__cell {
+  background-color: #383a3c !important;
+  border-bottom: 1px solid #7c7c7e;
 }
 
-::v-deep .el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf {
-  border-bottom: 1px solid #7c7c7e
+::v-deep .el-table th.el-table__cell {
+  background-color: #383a3c !important;
+  border-bottom: 1px solid #7c7c7e;
 }
 
-::v-deep .el-table th.el-table__cell {
-  background-color: #383a3c;
+::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
+  background-color: #4a4d50 !important;
 }
 
 .el-table {

From 8d678c96fb6103ef36b314a681e1408bf3059ee1 Mon Sep 17 00:00:00 2001
From: "Crane.z" <1481445951@qq.com>
Date: Thu, 12 Mar 2026 18:31:44 +0800
Subject: [PATCH 2/2] refactor: refine fix for SQL favorites background flicker

---
 .../QueryConsole/SelectSnippetDialog.vue      | 36 ++++++++-----------
 1 file changed, 14 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue b/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
index 873cbec..68be4c9 100644
--- a/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
+++ b/frontend/src/components/Main/Explore/QueryConsole/SelectSnippetDialog.vue
@@ -6,20 +6,19 @@
     width="40%"
     :modal="false"
   >
-    <span>
-      <el-table :data="snippets">
+    <div>
+      <el-table class="snippet-table" :data="snippets">
         <el-table-column property="name" :label="$tc('Name')" width="120px" />
         <el-table-column show-overflow-tooltip property="args" :label="$tc('Content')" />
         <el-table-column width="80px" label="">
           <template slot-scope="scope">
-            <el-button type="text" size="small" @click="onSelectSnippet(scope.row)">{{
-              $tc('Insert')
-            }}</el-button>
+            <el-button type="text" size="small" @click="onSelectSnippet(scope.row)">
+              {{ $tc('Insert') }}
+            </el-button>
           </template>
         </el-table-column>
       </el-table>
-
-    </span>
+    </div>
   </el-dialog>
 </template>
 
@@ -68,29 +67,22 @@ export default {
 </script>
 
 <style scoped>
-::v-deep .el-table {
-  background-color: #383a3c;
-}
-
-::v-deep .el-table tr {
-  background-color: #383a3c !important;
-}
 
-::v-deep .el-table td.el-table__cell {
-  background-color: #383a3c !important;
+::v-deep .snippet-table td.el-table__cell {
+  background: #383a3c;
   border-bottom: 1px solid #7c7c7e;
 }
 
-::v-deep .el-table th.el-table__cell {
-  background-color: #383a3c !important;
-  border-bottom: 1px solid #7c7c7e;
+::v-deep .snippet-table tr:hover td.el-table__cell {
+  background: #4a4d50;
 }
 
-::v-deep .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell {
-  background-color: #4a4d50 !important;
+::v-deep .snippet-table th.el-table__cell {
+  background: #383a3c;
 }
 
-.el-table {
+.snippet-table {
   color: #e9e9e9;
 }
+
 </style>