feat: table增加fixed阴影

packages/app/src/components/table/header-th/index.tsx

@@ -58,7 +58,9 @@ const HeaderTh: FC<Props> = function ({header, useDiv, isSecondLevel}) {
       ref={setNodeRef}
       {...attributes}
       {...listeners}
-      className={classNames(css.tableHeadTh, {[css.fixedRight]: fixed})}
+      className={classNames(css.tableHeadTh, {
+        [css.fixedRight + ' fixed-shadow']: fixed,
+      })}
     >
       {flexRender(header.column.columnDef.header, header.getContext())}
 

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

@@ -171,3 +171,34 @@ export function useTable<T extends Record<string, any>>(
     {onDragStart, onDragEnd},
   ] as const;
 }
+
+export function useTableShadow(tableSize: number) {
+  const [isEnd, setIsEnd] = useState(false);
+
+  useEffect(
+    function () {
+      const el = document.querySelector('#table_wrapper');
+
+      function listener() {
+        const elWidth = el?.getBoundingClientRect().width ?? 0,
+          scrollWidth = el?.scrollWidth ?? 0,
+          scrollLeft = el?.scrollLeft ?? 0;
+
+        setIsEnd(scrollLeft + elWidth >= scrollWidth);
+      }
+
+      listener();
+
+      window.addEventListener('resize', listener);
+      el?.addEventListener('scroll', listener);
+
+      return function () {
+        window.addEventListener('resize', listener);
+        el?.removeEventListener('scroll', listener);
+      };
+    },
+    [tableSize],
+  );
+
+  return isEnd;
+}

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

@@ -26,13 +26,35 @@
     min-width: 0;
     background-color: #fff;
   }
+
+  & :global(.fixed-shadow) {
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: -1px;
+      left: 0;
+      width: 30px;
+      pointer-events: none;
+      content: '';
+      box-shadow: -10px 0 8px -8px rgb(0 0 0 / 0%) inset;
+      transition: box-shadow 0.3s;
+      transform: translateX(-100%);
+    }
+  }
+}
+
+.table-fixed-shadow {
+  & :global(.fixed-shadow) {
+    &::before {
+      box-shadow: -10px 0 8px -6px rgb(0 0 0 / 10%) inset;
+    }
+  }
 }
 
 .fixed-right {
   position: sticky !important;
   right: 0;
   border-top-left-radius: 0 !important;
-  outline: 1px solid #f0f0f0;
 }
 
 .table-head {

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

@@ -8,7 +8,7 @@ import {
 } from '@hooks';
 import {PAGE_SIZE_LIST} from '@utils';
 import {ReactElement} from 'react';
-import {useTable} from './hooks';
+import {useTable, useTableShadow} from './hooks';
 import {flexRender} from '@tanstack/react-table';
 import css from './index.module.css';
 import HeaderTh from './header-th';
@@ -60,6 +60,8 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
 
   const sensor = useSensor(PointerSensor);
 
+  const isEnd = useTableShadow(getCenterTotalSize());
+
   return (
     <Spin spinning={isSearching}>
       <div
@@ -79,7 +81,12 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
             )}
             strategy={horizontalListSortingStrategy}
           >
-            <table className={css.table} style={{width: getCenterTotalSize()}}>
+            <table
+              className={classNames(css.table, {
+                [css.tableFixedShadow]: !isEnd,
+              })}
+              style={{width: getCenterTotalSize()}}
+            >
               <thead className={css.tableHead}>
                 {getHeaderGroups().map(function ({id, headers}) {
                   return (
@@ -108,7 +115,9 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
                           return (
                             <td
                               key={id}
-                              className={classNames({[css.fixedRight]: fixed})}
+                              className={classNames({
+                                [css.fixedRight + ' fixed-shadow']: fixed,
+                              })}
                               style={{
                                 width: column.getSize(),
                                 textAlign: align ?? 'left',

packages/app/src/utils/constants.ts

@@ -32,7 +32,7 @@ export const MODAL_PAGE_SIZE_LIST = ['5', ...PAGE_SIZE_LIST];
 /** 请求域名 */
 export const NETWORK_URL =
   process.env.NODE_ENV === 'development'
-    ? 'http://192.168.0.147:9560'
+    ? 'http://192.168.0.118:9560'
     : 'http://10.2.111.91:9560';
 export const E2E_NETWORK_URL = 'http://e2e.test.cn';
 /** 导出错误提示 */