feat: 添加完整的table相关的组件和hook

Ohh-889 · Ohh-889 · commit 5428d51d1c4a · 2025-03-06T21:18:13.000+08:00
diff --git a/src/features/tab/tabHooks.ts b/src/features/tab/tabHooks.ts
@@ -276,7 +276,7 @@ export function useTabManager() {
 
   const updateTabs = useUpdateTabs();
 
-  function _addTab(route: Router.Route<unknown, unknown>) {
+  function _addTab(route: Router.Route) {
     const tab = getTabByRoute(route);
 
     if (!isInit.current) {
diff --git a/src/features/table/DragContent.tsx b/src/features/table/DragContent.tsx
@@ -0,0 +1,101 @@
+import type { DragEndEvent } from '@dnd-kit/core';
+import { DndContext } from '@dnd-kit/core';
+import { SortableContext, arrayMove, useSortable, verticalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import type { FC } from 'react';
+import React from 'react';
+
+interface Props {
+  columns: AntDesign.TableColumnCheck[];
+  setColumnChecks: (checks: AntDesign.TableColumnCheck[]) => void;
+}
+
+/** 单个可拖拽项组件 */
+const SortableItem: FC<{
+  index: number;
+  item: AntDesign.TableColumnCheck;
+  onCheckChange: (oldValue: boolean, index: number) => void;
+}> = ({ index, item, onCheckChange }) => {
+  // 使用 useSortable 获取拖拽属性
+  const { attributes, listeners, setNodeRef, transform, transition } = useSortable({
+    id: item.key // 每个可拖拽对象的唯一标识
+  });
+
+  // inline 样式，用于在拖拽时移动/过渡
+  const style: React.CSSProperties = {
+    transform: CSS.Transform.toString(transform),
+    transition
+  };
+
+  return (
+    <div
+      ref={setNodeRef}
+      style={style}
+      // 把拖拽所需的属性都附加上去
+      {...attributes}
+      {...listeners}
+      className="h-36px flex-y-center rd-4px hover:(bg-primary bg-opacity-20)"
+    >
+      <IconMdiDrag className="mr-8px h-full cursor-move text-icon" />
+      <ACheckbox
+        checked={item.checked}
+        className="none_draggable flex-1"
+        onClick={() => onCheckChange(item.checked, index)}
+      >
+        {item.title}
+      </ACheckbox>
+    </div>
+  );
+};
+
+/** 列表容器组件 */
+const DragContent: FC<Props> = ({ columns, setColumnChecks }) => {
+  // 拖拽结束时的回调
+  const handleDragEnd = (event: DragEndEvent) => {
+    const { active, over } = event;
+    if (!over) return;
+
+    // 如果拖拽开始和结束位置的 id 不同，则表示有重新排序
+    if (active.id !== over.id) {
+      const oldIndex = columns.findIndex(item => item.key === active.id);
+      const newIndex = columns.findIndex(item => item.key === over.id);
+
+      // arrayMove 是 DnD Kit 提供的辅助函数，用于在数组中移动元素
+      const newColumns = arrayMove(columns, oldIndex, newIndex);
+      setColumnChecks(newColumns);
+    }
+  };
+
+  // 点击复选框时更改“checked”
+  const handleChange = (value: boolean, index: number) => {
+    columns[index].checked = !value;
+    // 这里要注意保持新数组引用，确保触发 React 重新渲染
+    setColumnChecks([...columns]);
+  };
+
+  return (
+    // DndContext 相当于顶层的拖拽环境容器
+    <DndContext onDragEnd={handleDragEnd}>
+      {/*
+        SortableContext 用于告诉 DnD Kit，这个区域内的一组元素可以“排序”；
+        items 传入当前这批可排序对象的 key（或整个对象，但 key 必须唯一）；
+        strategy 指定排序策略，如 verticalListSortingStrategy 适合竖直列表。
+      */}
+      <SortableContext
+        items={columns.map(item => item.key)}
+        strategy={verticalListSortingStrategy}
+      >
+        {columns.map((item, index) => (
+          <SortableItem
+            index={index}
+            item={item}
+            key={item.key}
+            onCheckChange={handleChange}
+          />
+        ))}
+      </SortableContext>
+    </DndContext>
+  );
+};
+
+export default DragContent;
diff --git a/src/features/table/TableHeaderOperation.tsx b/src/features/table/TableHeaderOperation.tsx
@@ -0,0 +1,103 @@
+import { Button, Popconfirm, Space } from 'antd';
+import type { SpaceProps } from 'antd';
+import classNames from 'classnames';
+import React from 'react';
+import type { FC } from 'react';
+
+import DragContent from './DragContent';
+
+interface Props {
+  add: () => void;
+  children?: React.ReactNode;
+  columns: AntDesign.TableColumnCheck[];
+  disabledDelete?: boolean;
+  itemAlign?: SpaceProps['align'];
+  loading?: boolean;
+  onDelete: () => void;
+  prefix?: React.ReactNode;
+  refresh: () => void;
+  setColumnChecks: (checks: AntDesign.TableColumnCheck[]) => void;
+  suffix?: React.ReactNode;
+}
+
+const TableHeaderOperation: FC<Props> = ({
+  add,
+  children,
+  columns,
+  disabledDelete,
+  itemAlign,
+  loading,
+  onDelete,
+  prefix,
+  refresh,
+  setColumnChecks,
+  suffix
+}) => {
+  const { t } = useTranslation();
+
+  return (
+    <Space
+      wrap
+      align={itemAlign}
+      className="lt-sm:w-200px"
+    >
+      {prefix}
+      {children || (
+        <>
+          <Button
+            ghost
+            icon={<IconIcRoundPlus className="text-icon" />}
+            size="small"
+            type="primary"
+            onClick={add}
+          >
+            {t('common.add')}
+          </Button>
+          <Popconfirm
+            title={t('common.confirmDelete')}
+            onConfirm={onDelete}
+          >
+            <Button
+              danger
+              ghost
+              disabled={disabledDelete}
+              icon={<IconIcRoundDelete className="text-icon" />}
+              size="small"
+            >
+              {t('common.batchDelete')}
+            </Button>
+          </Popconfirm>
+        </>
+      )}
+      <Button
+        icon={<IconMdiRefresh className={classNames('text-icon', { 'animate-spin': loading })} />}
+        size="small"
+        onClick={refresh}
+      >
+        {t('common.refresh')}
+      </Button>
+
+      <APopover
+        placement="bottomRight"
+        trigger="click"
+        content={
+          <DragContent
+            columns={columns}
+            setColumnChecks={setColumnChecks}
+          />
+        }
+      >
+        <Button
+          icon={<IconAntDesignSettingOutlined />}
+          size="small"
+        >
+          {t('common.columnSetting')}
+        </Button>
+      </APopover>
+
+      {suffix}
+    </Space>
+  );
+};
+
+export default TableHeaderOperation;
diff --git a/src/features/table/index.ts b/src/features/table/index.ts
@@ -1 +1,2 @@
+export { default as TableHeaderOperation } from './TableHeaderOperation';
 export * from './use-table';
diff --git a/src/features/table/use-table.ts b/src/features/table/use-table.ts
@@ -134,7 +134,7 @@ export function useTable<A extends AntDesign.TableApiFn>(
       form,
       reset,
       search: run,
-      searchParams
+      searchParams: searchParams as NonNullable<Parameters<A>[0]>
     },
     setColumnChecks,
     tableProps: {
diff --git a/src/types/auto-imports.d.ts b/src/types/auto-imports.d.ts
@@ -25,6 +25,7 @@ declare global {
   const AMenu: typeof import('antd')['Menu']
   const AModal: typeof import('antd')['Modal']
   const APopconfirm: typeof import('antd')['Popconfirm']
+  const APopover: typeof import('antd')['Popover']
   const ARow: typeof import('antd')['Row']
   const ASegmented: typeof import('antd')['Segmented']
   const ASpace: typeof import('antd')['Space']
@@ -46,16 +47,21 @@ declare global {
   const IconAntDesignInboxOutlined: typeof import('~icons/ant-design/inbox-outlined.tsx')['default']
   const IconAntDesignReloadOutlined: typeof import('~icons/ant-design/reload-outlined.tsx')['default']
   const IconAntDesignSendOutlined: typeof import('~icons/ant-design/send-outlined.tsx')['default']
+  const IconAntDesignSettingOutlined: typeof import('~icons/ant-design/setting-outlined.tsx')['default']
   const IconGridiconsFullscreen: typeof import('~icons/gridicons/fullscreen.tsx')['default']
   const IconGridiconsFullscreenExit: typeof import('~icons/gridicons/fullscreen-exit.tsx')['default']
+  const IconIcRoundDelete: typeof import('~icons/ic/round-delete.tsx')['default']
+  const IconIcRoundPlus: typeof import('~icons/ic/round-plus.tsx')['default']
   const IconIcRoundRefresh: typeof import('~icons/ic/round-refresh.tsx')['default']
   const IconIcRoundSearch: typeof import('~icons/ic/round-search.tsx')['default']
   const IconLocalBanner: typeof import('~icons/local/banner.tsx')['default']
   const IconLocalLogo: typeof import('~icons/local/logo.tsx')['default']
   const IconMdiArrowDownThin: typeof import('~icons/mdi/arrow-down-thin.tsx')['default']
   const IconMdiArrowUpThin: typeof import('~icons/mdi/arrow-up-thin.tsx')['default']
+  const IconMdiDrag: typeof import('~icons/mdi/drag.tsx')['default']
   const IconMdiKeyboardEsc: typeof import('~icons/mdi/keyboard-esc.tsx')['default']
   const IconMdiKeyboardReturn: typeof import('~icons/mdi/keyboard-return.tsx')['default']
+  const IconMdiRefresh: typeof import('~icons/mdi/refresh.tsx')['default']
   const IconUilSearch: typeof import('~icons/uil/search.tsx')['default']
   const Link: typeof import('react-router-dom')['Link']
   const LookForward: typeof import('../components/LookForward')['default']
@@ -169,6 +175,9 @@ declare global {
   const useState: typeof import('react')['useState']
   const useSvgIcon: typeof import('../hooks/common/icon')['useSvgIcon']
   const useSyncExternalStore: typeof import('react')['useSyncExternalStore']
+  const useTable: typeof import('../hooks/common/table')['useTable']
+  const useTableOperate: typeof import('../hooks/common/table')['useTableOperate']
+  const useTableScroll: typeof import('../hooks/common/table')['useTableScroll']
   const useTextSelection: typeof import('ahooks')['useTextSelection']
   const useTheme: typeof import('ahooks')['useTheme']
   const useThrottle: typeof import('ahooks')['useThrottle']

Original file line number	Diff line number	Diff line change
`@@ -1 +1,2 @@`
	`1`	`+export { default as TableHeaderOperation } from './TableHeaderOperation';`
`1`	`2`	`export * from './use-table';`