chore: initial commit

src/pages/system/menu/index.tsx

@@ -0,0 +1,48 @@
+import { useMemo } from 'react'
+
+import { useQuery } from '@tanstack/react-query'
+import { getCoreRowModel, getExpandedRowModel, useReactTable } from '@tanstack/react-table'
+
+import { getAllSysMenus } from '@/api'
+import { generateMenus } from '@/lib'
+import { type SysMenuTree } from '@/schemas'
+
+import { ActionDialogs } from './components/action-dialogs.tsx'
+import { createColumns } from './components/columns.tsx'
+import { CrudProvider } from './components/crud-provider.tsx'
+import { MenuTable } from './components/menu-table.tsx'
+import { QUERY_KEY } from './constants.ts'
+
+export default function CrudPage() {
+  const { data, isFetching } = useQuery({
+    queryKey: [QUERY_KEY],
+    queryFn: () => getAllSysMenus(),
+    placeholderData: (prev) => prev,
+  })
+
+  const tableData = useMemo<SysMenuTree[]>(
+    () => generateMenus({ menus: data?.data ?? [], showHidden: true, showButton: true }),
+    [data],
+  )
+
+  const columns = useMemo(() => createColumns(), [])
+
+  const table = useReactTable<SysMenuTree>({
+    data: tableData,
+    columns,
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    manualPagination: true,
+    meta: {
+      showLoading: isFetching,
+    },
+    getSubRows: (row) => row.children,
+  })
+
+  return (
+    <CrudProvider>
+      <ActionDialogs />
+      <MenuTable table={table} />
+    </CrudProvider>
+  )
+}