style: 修改拖拽样式

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

@@ -18,14 +18,16 @@ const HeaderTh: FC<Props> = function ({header, useDiv}) {
   const style: CSSProperties = {
     width: header.getSize(),
     cursor: 'move',
-    opacity: useDiv ? '0.5' : '1',
+    boxShadow: useDiv
+      ? '0.5px 0.6px 12.3px rgba(0, 0, 0, 0.059),4px 5px 80px rgba(0, 0, 0, 0.1)'
+      : '',
   };
 
   if (useDiv) {
     return (
       <div
         key={header.id}
-        style={style}
+        style={{...style, backgroundColor: '#f5f5f5'}}
         ref={setNodeRef}
         {...attributes}
         {...listeners}

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

@@ -43,7 +43,7 @@
   text-align: center;
   overflow-wrap: anywhere;
   list-style: none;
-  background: #fafafa;
+  background-color: #fafafa;
   border-inline-end: 1px solid #f0f0f0;
   border-bottom: 1px solid #f0f0f0;
   border-start-start-radius: 8px;

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

@@ -12,12 +12,17 @@ import {useTable} from './hooks';
 import {flexRender} from '@tanstack/react-table';
 import css from './index.module.css';
 import HeaderTh from './header-th';
-import {DndContext, PointerSensor, useSensor, DragOverlay} from '@dnd-kit/core';
+import {
+  DndContext,
+  PointerSensor,
+  useSensor,
+  DragOverlay,
+  closestCenter,
+} from '@dnd-kit/core';
 import {
   SortableContext,
   horizontalListSortingStrategy,
 } from '@dnd-kit/sortable';
-import {restrictToHorizontalAxis} from '@dnd-kit/modifiers';
 
 type Props<T> = {
   columns: ColumnsType<T>;
@@ -63,7 +68,7 @@ function Table<T extends Record<string, any>>(props: Props<T>): ReactElement {
           onDragStart={onDragStart}
           onDragEnd={onDragEnd}
           sensors={[sensor]}
-          modifiers={[restrictToHorizontalAxis]}
+          collisionDetection={closestCenter}
         >
           <SortableContext
             items={(columns as ColumnType<T>[]).map(val =>