From f3d53fbf7e8fb8b83dc64360db6b1bc9c9ed86f8 Mon Sep 17 00:00:00 2001
From: liaoxuezhi <2betop.cn@gmail.com>
Date: Thu, 23 Nov 2023 19:19:06 +0800
Subject: [PATCH] =?UTF-8?q?style:=20=E8=B0=83=E6=95=B4=20table=20=E5=9B=BA?=
 =?UTF-8?q?=E9=A1=B6=E6=A8=A1=E5=BC=8F=E7=9A=84=E6=A0=B7=E5=BC=8F=E5=85=BC?=
 =?UTF-8?q?=E5=AE=B9=20safari=20Close:=20#8708=20(#8863)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/amis-core/src/store/table.ts         | 11 ++++----
 packages/amis-ui/scss/components/_table.scss  |  8 ++++--
 .../__snapshots__/crud.test.tsx.snap          |  6 ++---
 .../__snapshots__/inputTable.test.tsx.snap    | 10 +++----
 .../__snapshots__/CRUD.test.tsx.snap          |  6 ++---
 .../__snapshots__/Pagination.test.tsx.snap    |  2 +-
 .../__snapshots__/Table.test.tsx.snap         | 26 +++++++++----------
 .../renderers/Table/ItemActionsWrapper.tsx    |  5 +++-
 packages/amis/src/renderers/Table/index.tsx   |  4 +++
 9 files changed, 45 insertions(+), 33 deletions(-)

diff --git a/packages/amis-core/src/store/table.ts b/packages/amis-core/src/store/table.ts
index 89123a711..1305208c1 100644
--- a/packages/amis-core/src/store/table.ts
+++ b/packages/amis-core/src/store/table.ts
@@ -528,7 +528,8 @@ export const TableStore = iRendererStore
     exportExcelLoading: false,
     searchFormExpanded: false, // 用来控制搜索框是否展开了，那个自动根据 searchable 生成的表单 autoGenerateFilter
     lazyRenderAfter: 100,
-    tableLayout: 'auto'
+    tableLayout: 'auto',
+    theadHeight: 0
   })
   .views(self => {
     function getColumnsExceptBuiltinTypes() {
@@ -1001,7 +1002,7 @@ export const TableStore = iRendererStore
       },
 
       buildStyles(style: any) {
-        style = {...style};
+        style = {...style, '--Table-thead-height': self.theadHeight + 'px'};
 
         getFilteredColumns().forEach(column => {
           style[`--Table-column-${column.index}-width`] =
@@ -1295,9 +1296,9 @@ export const TableStore = iRendererStore
       if (!table) {
         return;
       }
-      const cols = [].slice.call(
-        table.querySelectorAll(':scope>thead>tr>th[data-index]')
-      );
+      const thead = table.querySelector(':scope>thead') as HTMLElement;
+      const cols = [].slice.call(thead.querySelectorAll('tr>th[data-index]'));
+      self.theadHeight = thead.offsetHeight;
       cols.forEach((col: HTMLElement) => {
         const index = parseInt(col.getAttribute('data-index')!, 10);
         const column = self.columns[index];
diff --git a/packages/amis-ui/scss/components/_table.scss b/packages/amis-ui/scss/components/_table.scss
index 8ec35a319..95c280978 100644
--- a/packages/amis-ui/scss/components/_table.scss
+++ b/packages/amis-ui/scss/components/_table.scss
@@ -273,8 +273,12 @@
       padding-top: 0;
     }
 
-    &--affixHeader > thead {
-      visibility: collapse;
+    &--affixHeader {
+      margin-top: calc(var(--Table-thead-height) * -1);
+
+      > thead {
+        visibility: hidden;
+      }
     }
 
     &--withCombine {
diff --git a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
index 92e7c7509..c6ebf2d0f 100644
--- a/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
+++ b/packages/amis/__tests__/event-action/renderers/__snapshots__/crud.test.tsx.snap
@@ -28,7 +28,7 @@ exports[`doAction:crud reload 1`] = `
           >
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -335,7 +335,7 @@ exports[`doAction:crud reload with data1 1`] = `
           >
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -642,7 +642,7 @@ exports[`doAction:crud reload with data2 1`] = `
           >
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
index 99173590c..0c56870aa 100644
--- a/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/Form/__snapshots__/inputTable.test.tsx.snap
@@ -53,7 +53,7 @@ exports[`Renderer:input table 1`] = `
                   >
                     <div
                       class="cxd-Table"
-                      style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+                      style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
                     >
                       <div
                         class="cxd-Table-contentWrap"
@@ -378,7 +378,7 @@ exports[`Renderer:input table add 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-contentWrap"
@@ -690,7 +690,7 @@ exports[`Renderer:input-table cell selects delete 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-contentWrap"
@@ -1029,7 +1029,7 @@ exports[`Renderer:input-table init display 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-contentWrap"
@@ -1716,7 +1716,7 @@ exports[`Renderer:input-table with combo column 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-contentWrap"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
index 107c2ed9c..401a4bf88 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/CRUD.test.tsx.snap
@@ -20,7 +20,7 @@ exports[`1. Renderer:crud basic interval headerToolbar footerToolbar 1`] = `
           >
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -2157,7 +2157,7 @@ exports[`6. Renderer:crud source & alwaysShowPagination 1`] = `
           >
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -2799,7 +2799,7 @@ exports[`13. enderer: crud keepItemSelectionOnPageChange & maxKeepItemSelectionL
             </div>
             <div
               class="cxd-Table cxd-Crud-body"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative; --Table-column-1-width: 0px;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative; --Table-column-1-width: 0px;"
             >
               <div
                 class="cxd-Table-fixedTop"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap
index 51f050993..510767973 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Pagination.test.tsx.snap
@@ -83,7 +83,7 @@ exports[`Renderer:Pagination 1`] = `
       </div>
       <div
         class="cxd-Table"
-        style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+        style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
       >
         <div
           class="cxd-Table-fixedTop"
diff --git a/packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap b/packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap
index 03dcd4b28..a0f5a7b91 100644
--- a/packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap
+++ b/packages/amis/__tests__/renderers/__snapshots__/Table.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Renderer:table 1`] = `
 <div>
   <div
     class="cxd-Table"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-fixedTop"
@@ -370,7 +370,7 @@ exports[`Renderer:table align 1`] = `
 <div>
   <div
     class="cxd-Table"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-fixedTop"
@@ -775,7 +775,7 @@ exports[`Renderer:table children 1`] = `
           >
             <div
               class="cxd-Table m-b-none"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -1355,7 +1355,7 @@ exports[`Renderer:table classNameExpr 1`] = `
 <div>
   <div
     class="cxd-Table"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-fixedTop"
@@ -1721,7 +1721,7 @@ exports[`Renderer:table column head style className 1`] = `
 <div>
   <div
     class="cxd-Table className"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-fixedTop"
@@ -2114,7 +2114,7 @@ exports[`Renderer:table combine Renderer:table combineNum only 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -2689,7 +2689,7 @@ exports[`Renderer:table combine Renderer:table combineNum with fromIndex 1`] = `
           >
             <div
               class="cxd-Table"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -3334,7 +3334,7 @@ exports[`Renderer:table groupName-default 1`] = `
           >
             <div
               class="cxd-Table m-b-none"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -4113,7 +4113,7 @@ exports[`Renderer:table groupName-middleNoGroupName 1`] = `
           >
             <div
               class="cxd-Table m-b-none"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -4896,7 +4896,7 @@ exports[`Renderer:table groupName-startNoGroupName 1`] = `
           >
             <div
               class="cxd-Table m-b-none"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -5667,7 +5667,7 @@ exports[`Renderer:table groupName-withTpl 1`] = `
           >
             <div
               class="cxd-Table m-b-none"
-              style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
+              style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-8-width: 0px; position: relative;"
             >
               <div
                 class="cxd-Table-fixedTop"
@@ -6430,7 +6430,7 @@ exports[`Renderer:table isHead fixed 1`] = `
 <div>
   <div
     class="cxd-Table"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-fixedTop"
@@ -6807,7 +6807,7 @@ exports[`Renderer:table list 1`] = `
 <div>
   <div
     class="cxd-Table"
-    style="--Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; --Table-column-10-width: 0px; --Table-column-11-width: 0px; position: relative;"
+    style="--Table-thead-height: 0px; --Table-column-3-width: 0px; --Table-column-4-width: 0px; --Table-column-5-width: 0px; --Table-column-6-width: 0px; --Table-column-7-width: 0px; --Table-column-8-width: 0px; --Table-column-9-width: 0px; --Table-column-10-width: 0px; --Table-column-11-width: 0px; position: relative;"
   >
     <div
       class="cxd-Table-toolbar cxd-Table-headToolbar"
diff --git a/packages/amis/src/renderers/Table/ItemActionsWrapper.tsx b/packages/amis/src/renderers/Table/ItemActionsWrapper.tsx
index f4b67f96d..ae7b1ce1a 100644
--- a/packages/amis/src/renderers/Table/ItemActionsWrapper.tsx
+++ b/packages/amis/src/renderers/Table/ItemActionsWrapper.tsx
@@ -30,7 +30,10 @@ function ItemActionsWrapper(props: ItemActionsProps) {
     }
     const rect = dom.getBoundingClientRect();
     const height = rect.height;
-    const top = rect.top - frame.getBoundingClientRect().top;
+    const top =
+      rect.top -
+      frame.getBoundingClientRect().top +
+      parseInt(getComputedStyle(frame)['marginTop'], 10);
     divRef.current!.style.cssText += `top: ${top}px;height: ${height}px;`;
   }, [store.hoverRow?.id]);
 
diff --git a/packages/amis/src/renderers/Table/index.tsx b/packages/amis/src/renderers/Table/index.tsx
index 614a75b2f..ad917e8fd 100644
--- a/packages/amis/src/renderers/Table/index.tsx
+++ b/packages/amis/src/renderers/Table/index.tsx
@@ -1591,6 +1591,10 @@ export default class Table extends React.Component<TableProps, object> {
 
     document.addEventListener('mousemove', this.handleColResizeMouseMove);
     document.addEventListener('mouseup', this.handleColResizeMouseUp);
+
+    // 防止选中文本
+    e.preventDefault();
+    e.stopPropagation();
   }
 
   // 垂直线拖拽移动