完善权限树的展示与选择

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

@@ -1,19 +1,136 @@
 "use client"
-import { Suspense } from "react"
+import {
-import { getPagePermission } from "@/actions/permission"
+  flexRender,
-import { DataTable, useDataTable } from "@/components/data-table"
+  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
+      <PermissionTable />
-        {...table}
-        columns={[
-          { header: "编码", accessorKey: "name" },
-          { header: "描述", accessorKey: "description" },
-        ]}
-      />
     </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} />
+      ))}
+    </>
+  )
+}

src/app/(root)/roles/assign-permissions.tsx

@@ -13,81 +13,58 @@ import {
   DialogTitle,
   DialogTrigger,
 } from "@/components/ui/dialog"
-import type { Permission } from "@/models/permission"
+import { cn } from "@/lib/utils"
 import type { Role } from "@/models/role"
 
-function PermissionItem({
+type TreeNode = {
-  permission,
+  id: number
+  name: string
+  description: string
+  children: TreeNode[]
+}
+
+function PermissionRow({
+  node,
+  depth,
   selected,
   onToggle,
 }: {
-  permission: Permission
+  node: TreeNode
+  depth: number
   selected: Set<number>
   onToggle: (id: number, checked: boolean) => void
 }) {
-  const hasChildren = permission.children && permission.children.length > 0
+  const hasChildren = node.children.length > 0
-
-  const allChildIds = (p: Permission): number[] => {
-    if (!p.children || p.children.length === 0) return [p.id]
-    return [p.id, ...p.children.flatMap(allChildIds)]
-  }
-
-  const childIds = hasChildren ? allChildIds(permission).slice(1) : []
-  const allChecked =
-    hasChildren && childIds.length > 0
-      ? childIds.every(id => selected.has(id))
-      : selected.has(permission.id)
-  const someChecked =
-    hasChildren && childIds.length > 0
-      ? childIds.some(id => selected.has(id)) && !allChecked
-      : false
-
-  const handleChange = (checked: boolean) => {
-    if (hasChildren) {
-      const ids = allChildIds(permission)
-      for (const id of ids) {
-        onToggle(id, checked)
-      }
-    } else {
-      onToggle(permission.id, checked)
-    }
-  }
-
-  const checkboxId = `perm-${permission.id}`
 
   return (
-    <div className="flex flex-col gap-1">
+    <>
-      <div className="flex items-center gap-2 py-0.5">
+      <div className={cn("flex items-center gap-2 h-8", hasChildren && "mt-2")}>
+        <div style={{ width: depth * 16 }} />
         <Checkbox
-          id={checkboxId}
+          id={`perm-${node.id}`}
-          checked={someChecked ? "indeterminate" : allChecked}
+          checked={selected.has(node.id)}
-          onCheckedChange={checked => handleChange(checked === true)}
+          onCheckedChange={checked => onToggle(node.id, checked === true)}
         />
         <label
-          htmlFor={checkboxId}
+          htmlFor={`perm-${node.id}`}
-          className="flex items-center gap-1.5 cursor-pointer select-none text-sm"
+          className={cn(
-        >
+            "cursor-pointer select-none text-sm size-full flex items-center",
-          {permission.name}
+            hasChildren && "font-bold",
-          {permission.description && (
-            <span className="text-xs text-muted-foreground">
-              {permission.description}
-            </span>
           )}
+        >
+          {node.description}
         </label>
       </div>
-      {hasChildren && (
+      {node.children.map(child => (
-        <div className="pl-6 flex flex-col gap-1 border-l ml-2">
+        <PermissionRow
-          {permission.children.map(child => (
+          key={child.id}
-            <PermissionItem
+          node={child}
-              key={child.id}
+          depth={depth + 1}
-              permission={child}
+          selected={selected}
-              selected={selected}
+          onToggle={onToggle}
-              onToggle={onToggle}
+        />
-            />
+      ))}
-          ))}
+    </>
-        </div>
-      )}
-    </div>
   )
 }
 
@@ -98,33 +75,51 @@ export function AssignPermissions(props: {
   const [open, setOpen] = useState(false)
   const [loading, setLoading] = useState(false)
   const [submitting, setSubmitting] = useState(false)
-  const [permissions, setPermissions] = useState<Permission[]>([])
+  const [nodes, setNodes] = useState<TreeNode[]>([])
   const [selected, setSelected] = useState<Set<number>>(new Set())
 
   const fetchPermissions = useCallback(async () => {
     setLoading(true)
     try {
       const resp = await getAllPermissions()
-      if (resp.success) {
+      if (!resp.success) throw new Error(resp.message)
-        setPermissions(resp.data ?? [])
+
-      } else {
+      const data = resp.data ?? []
-        toast.error(resp.message ?? "获取权限列表失败")
+
-      }
+      const map = new Map<number, TreeNode>()
+      data.forEach(p => {
+        map.set(p.id, {
+          id: p.id,
+          name: p.name,
+          description: p.description,
+          children: [],
+        })
+      })
+
+      const roots: TreeNode[] = []
+      data.forEach(p => {
+        const node = map.get(p.id)
+        if (!node) return
+        if (!p.parent_id) {
+          roots.push(node)
+        } else {
+          map.get(p.parent_id)?.children.push(node)
+        }
+      })
+
+      setNodes(roots)
     } catch (error) {
-      const message = error instanceof Error ? error.message : error
+      toast.error(error instanceof Error ? error.message : "获取权限列表失败")
-      toast.error(`接口请求错误: ${message}`)
     } finally {
       setLoading(false)
     }
   }, [])
 
   useEffect(() => {
-    if (open) {
+    if (open) fetchPermissions()
-      fetchPermissions()
-    }
   }, [open, fetchPermissions])
 
-  const handleToggle = (id: number, checked: boolean) => {
+  const handleToggle = useCallback((id: number, checked: boolean) => {
     setSelected(prev => {
       const next = new Set(prev)
       if (checked) {
@@ -134,7 +129,7 @@ export function AssignPermissions(props: {
       }
       return next
     })
-  }
+  }, [])
 
   const handleSubmit = async () => {
     setSubmitting(true)
@@ -151,8 +146,7 @@ export function AssignPermissions(props: {
         toast.error(resp.message ?? "权限分配失败")
       }
     } catch (error) {
-      const message = error instanceof Error ? error.message : error
+      toast.error(error instanceof Error ? error.message : "接口请求错误")
-      toast.error(`接口请求错误: ${message}`)
     } finally {
       setSubmitting(false)
     }
@@ -160,11 +154,10 @@ export function AssignPermissions(props: {
 
   const handleOpenChange = (value: boolean) => {
     if (value) {
-      const existingIds = new Set((props.role.permissions ?? []).map(p => p.id))
+      setSelected(new Set((props.role.permissions ?? []).map(p => p.id)))
-      setSelected(existingIds)
     } else {
       setSelected(new Set())
-      setPermissions([])
+      setNodes([])
     }
     setOpen(value)
   }
@@ -187,16 +180,17 @@ export function AssignPermissions(props: {
             <div className="py-8 text-center text-sm text-muted-foreground">
               加载中...
             </div>
-          ) : permissions.length === 0 ? (
+          ) : nodes.length === 0 ? (
             <div className="py-8 text-center text-sm text-muted-foreground">
               暂无权限数据
             </div>
           ) : (
-            <div className="flex flex-col gap-2">
+            <div className="flex flex-col">
-              {permissions.map(permission => (
+              {nodes.map(node => (
-                <PermissionItem
+                <PermissionRow
-                  key={permission.id}
+                  key={node.id}
-                  permission={permission}
+                  node={node}
+                  depth={0}
                   selected={selected}
                   onToggle={handleToggle}
                 />

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

@@ -94,7 +94,7 @@ function PermissionsCell({ permissions }: { permissions: Permission[] }) {
         <div className="flex flex-wrap gap-1 cursor-default max-w-52">
           {preview.map(p => (
             <Badge key={p.id} variant="secondary">
-              {p.name}
+              {p.description}
             </Badge>
           ))}
           {rest > 0 && <Badge variant="outline">+{rest}</Badge>}
@@ -107,7 +107,7 @@ function PermissionsCell({ permissions }: { permissions: Permission[] }) {
         <div className="flex flex-wrap gap-1.5">
           {permissions.map(p => (
             <Badge key={p.id} variant="secondary">
-              {p.name}
+              {p.description}
             </Badge>
           ))}
         </div>

src/components/data-table/component.tsx

@@ -3,6 +3,7 @@ import {
   type ColumnDef,
   flexRender,
   getCoreRowModel,
+  getExpandedRowModel,
   useReactTable,
 } from "@tanstack/react-table"
 import { Loader } from "lucide-react"

src/models/permission.ts

@@ -4,7 +4,7 @@ export type Permission = {
   updated_at: Date
   expired_at: Date
 
-  parent_id: number
+  parent_id?: number
   name: string
   description: string
   parent: number