Optimize: The query result cancels in-cell scrolling and instead uses hover to view cell contents

shanhexi · shanhexi · commit 3c98b1f3c67f · 2023-12-25T19:14:20.000+08:00
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -8,6 +8,7 @@
 - ⭐【New Features】Run record sql to open the console directly
 - ⭐【New Features】The SQL column on the right of execution record and save can be expanded and dragged
 - 🐞【Fixed】Some databases could not display the Database/Schema structure
+- ⚡️【Optimize】The query result cancels in-cell scrolling and instead uses hover to view cell contents
 
 ## 3.1.15
 
diff --git a/CHANGELOG_CN.md b/CHANGELOG_CN.md
@@ -8,6 +8,7 @@
 - ⭐【新功能】执行记录sql可直接打开控制台
 - ⭐【新功能】右侧执行记录、保存SQL栏展开大小可拖动
 - 🐞【修复】部分数据库无法显示数据库/Schema结构的问题
+- ⚡️【优化】查询结果取消单元格内滚动，改为hover查看单元格内容
 
 ## 3.1.15
 
diff --git a/chat2db-client/src/components/SearchResult/components/TableBox/index.less b/chat2db-client/src/components/SearchResult/components/TableBox/index.less
@@ -30,14 +30,17 @@
     }
   }
   :global {
+    .table{
+      overflow: hidden;
+    }
     .art-table {
       table colgroup col:nth-of-type(1) {
         min-width: 60px;
       }
-      th,
-      td {
-        overflow: hidden;
-      }
+      // th,
+      // td {
+      //   overflow: hidden;
+      // }
       .fnWppk {
         // word-break: break-all;
         // display: -webkit-box;
@@ -202,14 +205,14 @@
 
 .tableItem {
   height: 31px;
-  cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: space-between;
   position: relative;
   padding-left: 4px;
   user-select: none;
   background-color: var(--color-bg-base);
+  cursor: pointer;
 
   .tableItemContent {
     max-height: 31px;
@@ -218,16 +221,33 @@
     width: 100%;
     overflow: hidden;
     white-space: nowrap;
-    &:hover {
-      overflow-x: auto;
-      // line-height: 14px;
-    }
+    text-overflow: ellipsis;
+  }
+
+  .previewTableItemContent{
+    display: none;
+    position: absolute;
+    left: 0px;
+    top: 0px;
+    bottom: 0px;
+    width: fit-content;
+    min-width: 100%;
+    padding: 0px 4px;
+    max-height: 31px;
+    line-height: 31px;
+    background-color: var(--color-bg-layout);
+    z-index: 2;
+    color: var(--color-text);
+    white-space: nowrap;
   }
 
   &:hover {
-    .tableHoverBox {
+    .previewTableItemContent {
       display: flex;
     }
+    .previewTableItemContent {
+      display: block;
+    }
   }
 
   .cellValueNull {
@@ -241,20 +261,24 @@
 
 .tableItemEdit {
   background-color: var(--color-success-bg);
-  .tableHoverBox {
+  .previewTableItemContent {
     background-color: var(--color-success-bg);
   }
+  
 }
 .tableItemHighlight {
   background-color: var(--color-bg-subtle);
-  .tableHoverBox {
+  .previewTableItemContent {
     background-color: var(--color-bg-subtle);
   }
 }
 .tableItemFocus {
   background-color: var(--color-primary-hover);
   color: var(--color-bg-base);
-  .tableHoverBox {
+  .previewTableItemContent {
+    background-color: var(--color-primary-hover);
+  }
+  .previewTableItemContent{
     background-color: var(--color-primary-hover);
   }
   .cellValueNull {
@@ -263,13 +287,13 @@
 }
 .tableItemSuccess {
   background-color: var(--color-success-bg);
-  .tableHoverBox {
+  .previewTableItemContent {
     background-color: var(--color-success-bg);
   }
 }
 .tableItemError {
   background-color: var(--color-error-bg);
-  .tableHoverBox {
+  .previewTableItemContent {
     background-color: var(--color-error-bg);
   }
 }
@@ -279,24 +303,6 @@
   text-align: center;
 }
 
-.tableHoverBox {
-  position: sticky;
-  height: 31px;
-  top: 0px;
-  bottom: 0px;
-  right: 0px;
-  width: 40px;
-  display: none;
-  align-items: center;
-  cursor: pointer;
-  background-color: var(--color-bg-base);
-
-  i {
-    font-size: 15px;
-    margin: 0px 2px;
-  }
-}
-
 .pagination {
   :global {
     .ant-pagination-prev,
diff --git a/chat2db-client/src/components/SearchResult/components/TableBox/index.tsx b/chat2db-client/src/components/SearchResult/components/TableBox/index.tsx
@@ -656,6 +656,7 @@ export default function TableBox(props: ITableProps) {
         // title: <div>{name}</div>,
         render: (value: any, rowData) => {
           const rowId = rowData[colNoCode];
+          const content = renderTableCellValue(value);
           return (
             <div
               data-chat2db-general-can-copy-element
@@ -679,7 +680,14 @@ export default function TableBox(props: ITableProps) {
                   }}
                 />
               ) : (
-                <div className={styles.tableItemContent}>{renderTableCellValue(value)}</div>
+                <>
+                  <div className={styles.tableItemContent}>
+                    {content}
+                  </div>
+                  <div className={styles.previewTableItemContent}>
+                    {content}
+                  </div>
+                </>
               )}
             </div>
           );
