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

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

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,
+    },
+  }
+}