refactor: 优化table fixed的阴影

packages/app/src/components/table/BodyTr.tsx

@@ -0,0 +1,45 @@
+import {Cell, flexRender} from '@tanstack/react-table';
+import classNames from 'classnames';
+import {FC} from 'react';
+
+type Props = {
+  getVisibleCells: () => Cell<Record<string, any>, unknown>[]
+};
+
+const BodyTr: FC<Props> = function({getVisibleCells}) {
+  const trList = getVisibleCells();
+
+  return (
+    <tr>
+      {trList.map(function({
+        id,
+        column,
+        getContext,
+      }) {
+        const {align, fixed} = column.columnDef.meta as {
+          align?: 'left' | 'center' | 'right';
+          fixed?: 'right' | 'left';
+        };
+        return (
+          <td
+            key={id}
+            className={classNames({
+              'ld-table-fixed-right ld-table-right-fixed-shadow': fixed === 'right',
+            })}
+            style={{
+              width: column.getSize(),
+              textAlign: align ?? 'left',
+            }}
+          >
+            {flexRender(
+              column.columnDef.cell,
+              getContext(),
+            )}
+          </td>
+        );
+      })}
+    </tr>
+  );
+};
+
+export default BodyTr;

packages/app/src/components/table/HeaderTh.tsx

@@ -11,7 +11,7 @@ type Props = {
 
 const HeaderTh: FC<Props> = function({header, useDiv, isSecondLevel}) {
   const {fixed, disabledSort} = header.column.columnDef.meta as {
-    fixed: boolean;
+    fixed?: 'left' | 'right';
     disabledSort: boolean;
   };
 
@@ -58,7 +58,7 @@ const HeaderTh: FC<Props> = function({header, useDiv, isSecondLevel}) {
       {...attributes}
       {...listeners}
       className={classNames('ld-table-head-th', {
-        'ld-table-fixed-right ld-table-fixed-shadow': fixed,
+        'ld-table-fixed-right ld-table-right-fixed-shadow': fixed === 'right',
       })}
     >
       {flexRender(header.column.columnDef.header, header.getContext())}

packages/app/src/components/table/hooks.tsx

@@ -204,7 +204,9 @@ export function useTable<T extends Record<string, any>>(
 }
 
 export function useTableShadow(tableSize: number) {
-  const [isEnd, setIsEnd] = useState(false);
+  const [scrollProgess, setScrollProgess] = useState<'start' | 'process' | 'end'>(
+    'start',
+  );
   const scrollTableRef = useRef<HTMLDivElement>(null);
   const headerTableRef = useRef<HTMLDivElement>(null);
 
@@ -221,7 +223,12 @@ export function useTableShadow(tableSize: number) {
           headerTableRef.current.scrollLeft = el?.scrollLeft ?? 0
         );
 
-        setIsEnd(scrollLeft + elWidth >= scrollWidth);
+        setScrollProgess(function() {
+          if (scrollLeft + elWidth === scrollWidth) return 'end';
+          if (scrollLeft + elWidth === 0) return 'start';
+
+          return 'process';
+        });
       }
 
       listener();
@@ -237,6 +244,6 @@ export function useTableShadow(tableSize: number) {
     [tableSize],
   );
 
-  return {isEnd, scrollTableRef, headerTableRef};
+  return {scrollProgess, scrollTableRef, headerTableRef};
 }
 

packages/app/src/components/table/index.css

@@ -26,7 +26,7 @@
     background-color: var(--layout-background-color);
   }
 
-  & .ld-table-fixed-shadow {
+  & .ld-table-right-fixed-shadow {
     &::before {
       position: absolute;
       top: 0;
@@ -59,8 +59,8 @@
   }
 }
 
-.ld-table-enabled-fixed-shadow {
-  & .ld-table-fixed-shadow {
+.ld-table-enabled-right-fixed-shadow {
+  & .ld-table-right-fixed-shadow {
     &::before {
       box-shadow: -10px 0 8px -6px rgb(0 0 0 / 10%) inset;
     }

packages/app/src/components/table/index.tsx

@@ -9,7 +9,7 @@ import {
 import {PAGE_SIZE_LIST, TABLE_CELL_WIDTH} from '@utils';
 import {Dispatch, ReactElement, ReactNode, SetStateAction} from 'react';
 import {useTable, useTableShadow} from './hooks';
-import {RowSelectionState, flexRender} from '@tanstack/react-table';
+import {RowSelectionState} from '@tanstack/react-table';
 import HeaderTh from './HeaderTh';
 import {
   DndContext,
@@ -25,13 +25,14 @@ import {
 import classNames from 'classnames';
 import './index.css';
 import {ModifyData} from '@models';
+import BodyTr from './BodyTr';
 
 export type LDColumnsType<T extends Record<string, unknown>> = {
   dataIndex: keyof T,
   title: string,
   render?: (info: T, index: number) => ReactNode,
   align?: 'left' | 'right' | 'center',
-  fixed?: boolean,
+  fixed?: 'left' | 'right',
   width?: number,
 };
 
@@ -76,7 +77,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
 
   const sensor = useSensor(PointerSensor);
   const {
-    isEnd,
+    scrollProgess,
     scrollTableRef,
     headerTableRef,
   } = useTableShadow(getCenterTotalSize());
@@ -101,7 +102,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
             <div className="ld-table-header-sticky" ref={headerTableRef}>
               <table
                 className={classNames('ld-table', {
-                  'ld-table-enabled-fixed-shadow': !isEnd,
+                  'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
                 })}
                 style={{width: getCenterTotalSize()}}
               >
@@ -132,7 +133,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
         <div className="ld-table-body-wrapper" ref={scrollTableRef}>
           <table
             className={classNames('ld-table', {
-              'ld-table-enabled-fixed-shadow': !isEnd,
+              'ld-table-enabled-right-fixed-shadow': scrollProgess !== 'end',
             })}
             style={{width: getCenterTotalSize()}}
           >
@@ -140,35 +141,7 @@ function LDTable<T extends Record<string, any>>(props: Props<T>): ReactElement {
               {getRowModel().rows.length > 0 ? (
                 getRowModel().rows.map(function({id, getVisibleCells}) {
                   return (
-                    <tr key={id}>
-                      {getVisibleCells().map(function({
-                        id,
-                        column,
-                        getContext,
-                      }) {
-                        const {align, fixed} = column.columnDef.meta as {
-                          align?: 'left' | 'center' | 'right';
-                          fixed: boolean;
-                        };
-                        return (
-                          <td
-                            key={id}
-                            className={classNames({
-                              'ld-table-fixed-right ld-table-fixed-shadow': fixed,
-                            })}
-                            style={{
-                              width: column.getSize(),
-                              textAlign: align ?? 'left',
-                            }}
-                          >
-                            {flexRender(
-                              column.columnDef.cell,
-                              getContext(),
-                            )}
-                          </td>
-                        );
-                      })}
-                    </tr>
+                    <BodyTr getVisibleCells={getVisibleCells} key={id} />
                   );
                 })
               ) : (

packages/app/src/pages/menu-second/table/hooks.tsx

@@ -46,7 +46,7 @@ export function useColumns(refetch: () => void) {
       dataIndex: 'id',
       title: '操作',
       width: TABLE_CELL_WIDTH.doubleBtn,
-      fixed: true,
+      fixed: 'right',
       render({id, name}) {
         const loading = deleteId === id;
 

packages/app/src/pages/menu/table/hooks.tsx

@@ -55,7 +55,7 @@ export function useColumns(refetch: () => void) {
       dataIndex: 'id',
       title: '操作',
       width: TABLE_CELL_WIDTH.huge,
-      fixed: true,
+      fixed: 'right',
       render({id, name}) {
         const loading = deleteId === id;
 

packages/app/src/pages/role/table/hooks.tsx

@@ -35,7 +35,7 @@ export function useColumns(refetch: () => void) {
     {
       title: '操作',
       dataIndex: 'id',
-      fixed: true,
+      fixed: 'right',
       width: TABLE_CELL_WIDTH.huge,
       render({id, roleName}) {
         const loading = deleteId === String(id);

packages/app/src/pages/user/table/hooks.tsx

@@ -58,7 +58,7 @@ export function useColumns(refetch: () => void) {
     {
       title: '操作',
       dataIndex: 'id',
-      fixed: true,
+      fixed: 'right',
       width: TABLE_CELL_WIDTH.great,
       render({id, realName}) {
         const loading = String(id) === deleteId;