实现页面模板与用户管理页面基本功能

Signed-off-by: luorijun <luorijun@outlook.com>

src/components/data-table/component.tsx

@@ -0,0 +1,120 @@
+import {
+  type ColumnDef,
+  flexRender,
+  getCoreRowModel,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Loader } from "lucide-react"
+import { Pagination, type PaginationProps } from "@/components/ui/pagination"
+import {
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  Table as TableRoot,
+  TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+export type DataTableProps<T> = {
+  data: T[]
+  status: "load" | "done" | "fail"
+  columns: ColumnDef<T>[]
+  pagination: PaginationProps
+  classNames?: {
+    headRow?: string
+    dataRow?: string
+  }
+}
+
+export function DataTable<T extends Record<string, unknown>>(
+  props: DataTableProps<T>,
+) {
+  const table = useReactTable({
+    data: props.data,
+    columns: props.columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: props.pagination.total,
+    state: {
+      pagination: {
+        pageIndex: props.pagination.page,
+        pageSize: props.pagination.size,
+      },
+      columnFilters: [],
+    },
+  })
+
+  return (
+    <div className="flex flex-col gap-3">
+      {/* 数据表 */}
+      <div className="rounded-md relative bg-card">
+        <TableRoot>
+          <TableHeader>
+            {table.getHeaderGroups().map(group => (
+              <TableRow key={group.id}>
+                {group.headers.map(header => (
+                  <TableHead key={header.id} colSpan={header.colSpan}>
+                    {header.isPlaceholder
+                      ? null
+                      : flexRender(
+                          header.column.columnDef.header,
+                          header.getContext(),
+                        )}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {props.status === "fail" ? (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="text-center text-fail"
+                >
+                  加载失败
+                </TableCell>
+              </TableRow>
+            ) : !props.data?.length ? (
+              <TableRow>
+                <TableCell
+                  colSpan={props.columns.length}
+                  className="text-center"
+                >
+                  暂无数据
+                </TableCell>
+              </TableRow>
+            ) : (
+              table.getRowModel().rows.map(row => (
+                <TableRow
+                  key={row.id}
+                  data-state={row.getIsSelected() && "selected"}
+                  className={cn("h-14", props.classNames?.dataRow)}
+                >
+                  {row.getVisibleCells().map(cell => (
+                    <TableCell key={cell.id}>
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            )}
+          </TableBody>
+        </TableRoot>
+        {props.status === "load" && (
+          <div className="absolute inset-0 bg-white/10 backdrop-blur-xs flex items-center justify-center gap-2 transition">
+            <Loader className="animate-spin" />
+            <span>加载中</span>
+          </div>
+        )}
+      </div>
+
+      {/* 分页器 */}
+      <Pagination {...props.pagination} />
+    </div>
+  )
+}

src/components/data-table/hooks.ts

@@ -0,0 +1,64 @@
+"use client"
+import { useCallback, useEffect, useState } from "react"
+import { toast } from "sonner"
+import { useStatus } from "@/hooks/data"
+import type { ApiResponse, PageRecord } from "@/lib/api"
+
+export function useDataTable<T>(
+  fetch: (page: number, size: number) => Promise<ApiResponse<PageRecord<T>>>,
+) {
+  const [status, setStatus] = useStatus()
+
+  const [data, setData] = useState<T[]>([])
+  const [page, setPage] = useState(1)
+  const [size, setSize] = useState(10)
+  const [total, setTotal] = useState(0)
+
+  const refresh = useCallback(
+    async (page: number, size: number) => {
+      setStatus("load")
+      try {
+        const resp = await fetch(page, size)
+        if (!resp.success) {
+          throw new Error("获取数据失败")
+        }
+
+        setData(resp.data.list)
+        setPage(resp.data.page)
+        setSize(resp.data.size)
+        setTotal(resp.data.total)
+
+        setStatus("done")
+      } catch (error) {
+        toast.error(error instanceof Error ? error.message : "未知错误")
+        setStatus("fail")
+      }
+    },
+    [fetch, setStatus],
+  )
+
+  const onPageChange = (page: number) => {
+    setPage(page)
+  }
+
+  const onSizeChange = (size: number) => {
+    setPage(1)
+    setSize(size)
+  }
+
+  useEffect(() => {
+    refresh(page, size).then()
+  }, [refresh, page, size])
+
+  return {
+    status,
+    data,
+    pagination: {
+      page,
+      size,
+      total,
+      onPageChange,
+      onSizeChange,
+    },
+  }
+}

src/components/data-table/index.ts

@@ -0,0 +1,2 @@
+export * from "./component"
+export * from "./hooks"