完善权限树的展示与选择

src/app/(root)/permissions/page.tsx

@@ -1,19 +1,136 @@
 "use client"
-import { Suspense } from "react"
-import { getPagePermission } from "@/actions/permission"
-import { DataTable, useDataTable } from "@/components/data-table"
+import {
+  flexRender,
+  getCoreRowModel,
+  getExpandedRowModel,
+  type Row,
+  useReactTable,
+} from "@tanstack/react-table"
+import { Suspense, useCallback, useEffect, useState } from "react"
+import { toast } from "sonner"
+import { getAllPermissions } from "@/actions/permission"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import { cn } from "@/lib/utils"
+
+type Node = {
+  id: number
+  name: string
+  description: string
+  children: Node[]
+}
 
 export default function PermissionsPage() {
-  const table = useDataTable((page, size) => getPagePermission({ page, size }))
   return (
     <Suspense>
-      <DataTable
-        {...table}
-        columns={[
-          { header: "编码", accessorKey: "name" },
-          { header: "描述", accessorKey: "description" },
-        ]}
-      />
+      <PermissionTable />
     </Suspense>
   )
 }
+
+function PermissionTable() {
+  const [data, setData] = useState<Node[]>([])
+
+  const table = useReactTable({
+    getCoreRowModel: getCoreRowModel(),
+    getExpandedRowModel: getExpandedRowModel(),
+    data,
+    columns: [
+      { header: "编码", accessorKey: "name" },
+      { header: "描述", accessorKey: "description" },
+    ],
+    getSubRows: row => row.children,
+  })
+
+  const refresh = useCallback(async () => {
+    try {
+      const resp = await getAllPermissions()
+      if (!resp.success) {
+        throw new Error(resp.message)
+      }
+
+      const map = new Map<number, Node>()
+      resp.data.forEach(permission => {
+        map.set(permission.id, {
+          id: permission.id,
+          name: permission.name,
+          description: permission.description,
+          children: [],
+        })
+      })
+
+      const roots: Node[] = []
+      resp.data.forEach(permission => {
+        const node = map.get(permission.id)
+        if (!node) {
+          throw new Error(`找不到权限节点: ${permission.name}`)
+        }
+
+        if (!permission.parent_id) {
+          roots.push(node)
+          return
+        }
+
+        const parent = map.get(permission.parent_id)
+        if (!parent) {
+          throw new Error(`找不到父权限节点: ${permission.name}`)
+        }
+
+        parent.children.push(node)
+      })
+
+      setData(roots)
+      console.log(roots)
+    } catch (e) {
+      toast.error(e instanceof Error ? e.message : "获取权限列表失败")
+    }
+  }, [])
+
+  useEffect(() => {
+    refresh()
+  }, [refresh])
+
+  return (
+    <div className="bg-background rounded-lg">
+      <Table>
+        <TableHeader>
+          <TableRow className="h-10">
+            <TableHead>编码</TableHead>
+            <TableHead>描述</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {table.getRowModel().rows.map(row => (
+            <PermisionRow key={row.id} row={row} />
+          ))}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}
+
+function PermisionRow(props: { row: Row<Node> }) {
+  const row = props.row
+  return (
+    <>
+      <TableRow key={row.id} className="h-10">
+        <TableCell className="flex">
+          <div style={{ width: row.depth * 16 }}></div>
+          <span className={cn(row.subRows.length ? "font-bold" : "text-sm")}>
+            {row.original.name}
+          </span>
+        </TableCell>
+        <TableCell>{row.original.description}</TableCell>
+      </TableRow>
+      {row.subRows.map(subRow => (
+        <PermisionRow key={subRow.id} row={subRow} />
+      ))}
+    </>
+  )
+}