chore: initial commit

src/pages/system/api/index.tsx

@@ -0,0 +1,62 @@
+import { useEffect, useMemo, useState } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+import { getCoreRowModel, useReactTable } from '@tanstack/react-table'
+
+import { getSysApis } from '@/api'
+import { type SysApi } from '@/schemas'
+
+import { ActionDialogs } from './components/action-dialogs.tsx'
+import { ApiTable } from './components/api-table.tsx'
+import { createColumns } from './components/columns.tsx'
+import { CrudProvider } from './components/crud-provider.tsx'
+import { QUERY_KEY } from './constants.ts'
+
+export default function CrudPage() {
+  const [pagination, setPagination] = useState({
+    pageIndex: 0,
+    pageSize: 10,
+  })
+  const [rowCount, setRowCount] = useState<number>()
+
+  const { data, isFetching } = useQuery({
+    queryKey: [QUERY_KEY, pagination.pageIndex, pagination.pageSize],
+    queryFn: () =>
+      getSysApis({
+        page: pagination.pageIndex + 1,
+        page_size: pagination.pageSize,
+      }),
+    placeholderData: (prev) => prev,
+  })
+
+  const tableData = useMemo<SysApi[]>(() => data?.list ?? [], [data])
+
+  const columns = useMemo(() => createColumns(), [])
+
+  useEffect(() => {
+    if (!isFetching && data?.total !== undefined) {
+      setRowCount(data.total)
+    }
+  }, [isFetching, data?.total])
+
+  const table = useReactTable<SysApi>({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    manualPagination: true,
+    rowCount: rowCount,
+    state: { pagination },
+    onPaginationChange: setPagination,
+    meta: {
+      showLoading: isFetching,
+    },
+  })
+
+  return (
+    <CrudProvider>
+      <ActionDialogs />
+
+      <ApiTable table={table} />
+    </CrudProvider>
+  )
+}