首页添加二级路由

src/components/data-table.tsx

@@ -5,6 +5,8 @@ import {
   useReactTable,
 } from "@tanstack/react-table"
 import { Loader } from "lucide-react"
+import { useMemo } from "react"
+import { Checkbox } from "@/components/ui/checkbox"
 import { Pagination, type PaginationProps } from "@/components/ui/pagination"
 import {
   TableBody,
@@ -25,29 +27,87 @@ export type DataTableProps<T> = {
     headRow?: string
     dataRow?: string
   }
+  /** 是否开启行选择复选框 */
+  enableSelection?: boolean
+  /** 受控选中状态 */
+  rowSelection?: Record<string, boolean>
+  /** 选中状态变化回调 */
+  onSelectionChange?: (selection: Record<string, boolean>) => void
+  /** 行唯一ID生成函数 */
+  getRowId?: (row: T, index: number) => string
 }
 
 export default function DataTable<T extends Record<string, unknown>>(
   props: DataTableProps<T>,
 ) {
+  // 动态注入复选框列
+  const finalColumns = useMemo<ColumnDef<T>[]>(() => {
+    if (!props.enableSelection) return props.columns
+
+    const selectColumn: ColumnDef<T> = {
+      id: "select",
+      size: 40,
+      enableSorting: false,
+      enableHiding: false,
+      header: ({ table }) => (
+        <Checkbox
+          checked={
+            table.getIsAllPageRowsSelected()
+              ? true
+              : table.getIsSomePageRowsSelected()
+                ? "indeterminate"
+                : false
+          }
+          onCheckedChange={value => table.toggleAllPageRowsSelected(!!value)}
+          aria-label="全选当前页"
+          className="rounded-none translate-y-0.5"
+        />
+      ),
+      cell: ({ row }) => (
+        <Checkbox
+          checked={row.getIsSelected()}
+          onCheckedChange={value => row.toggleSelected(!!value)}
+          aria-label="选择行"
+          className="rounded-none translate-y-0.5"
+        />
+      ),
+    }
+
+    return [selectColumn, ...props.columns]
+  }, [props.enableSelection, props.columns])
+
   const table = useReactTable({
     data: props.data,
-    columns: props.columns,
+    columns: finalColumns,
     getCoreRowModel: getCoreRowModel(),
     manualPagination: true,
     rowCount: props.pagination?.total ?? props.data.length,
+    // 行选择核心配置
+    enableRowSelection: props.enableSelection ?? false,
+    getRowId: props.getRowId,
+    onRowSelectionChange: updaterOrValue => {
+      if (!props.onSelectionChange) return
+
+      const newSelection =
+        typeof updaterOrValue === "function"
+          ? updaterOrValue(props.rowSelection ?? {})
+          : updaterOrValue
+
+      props.onSelectionChange(newSelection)
+    },
     state: {
       pagination: {
         pageIndex: props.pagination?.page ?? 0,
         pageSize: props.pagination?.size ?? props.data.length,
       },
       columnFilters: [],
+      ...(props.rowSelection !== undefined && {
+        rowSelection: props.rowSelection,
+      }),
     },
     autoResetPageIndex: false,
   })
-  console.log("data length:", props.data.length)
-  console.log("pageSize:", props.pagination?.size ?? props.data.length)
-  console.log("rows:", table.getRowModel().rows.length)
+
   return (
     <>
       {/* 数据表 */}
@@ -55,7 +115,7 @@ export default function DataTable<T extends Record<string, unknown>>(
         <TableRoot>
           <TableHeader>
             {table.getHeaderGroups().map(group => (
-              <TableRow key={group.id}>
+              <TableRow key={group.id} className={props.classNames?.headRow}>
                 {group.headers.map(header => (
                   <TableHead key={header.id} colSpan={header.colSpan}>
                     {header.isPlaceholder
@@ -73,7 +133,7 @@ export default function DataTable<T extends Record<string, unknown>>(
             {props.status === "fail" ? (
               <TableRow>
                 <TableCell
-                  colSpan={props.columns.length}
+                  colSpan={finalColumns.length}
                   className="text-center text-fail"
                 >
                   加载失败
@@ -82,7 +142,7 @@ export default function DataTable<T extends Record<string, unknown>>(
             ) : !props.data?.length ? (
               <TableRow>
                 <TableCell
-                  colSpan={props.columns.length}
+                  colSpan={finalColumns.length}
                   className="text-center"
                 >
                   暂无数据

src/components/ui/field.tsx

@@ -0,0 +1,235 @@
+import { cva, type VariantProps } from "class-variance-authority"
+import { useMemo } from "react"
+import { Label } from "@/components/ui/label"
+import { Separator } from "@/components/ui/separator"
+import { cn } from "@/lib/utils/index"
+
+function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) {
+  return (
+    <fieldset
+      data-slot="field-set"
+      className={cn(
+        "flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLegend({
+  className,
+  variant = "legend",
+  ...props
+}: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) {
+  return (
+    <legend
+      data-slot="field-legend"
+      data-variant={variant}
+      className={cn(
+        "mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldGroup({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-group"
+      className={cn(
+        "group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+const fieldVariants = cva(
+  "group/field flex w-full gap-2 data-[invalid=true]:text-destructive",
+  {
+    variants: {
+      orientation: {
+        vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+        horizontal:
+          "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        responsive:
+          "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+      },
+    },
+    defaultVariants: {
+      orientation: "vertical",
+    },
+  },
+)
+
+function Field({
+  className,
+  orientation = "vertical",
+  ...props
+}: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>) {
+  return (
+    <div
+      role="group"
+      data-slot="field"
+      data-orientation={orientation}
+      className={cn(fieldVariants({ orientation }), className)}
+      {...props}
+    />
+  )
+}
+
+function FieldContent({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-content"
+      className={cn(
+        "group/field-content flex flex-1 flex-col gap-0.5 leading-snug",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldLabel({
+  className,
+  ...props
+}: React.ComponentProps<typeof Label>) {
+  return (
+    <Label
+      data-slot="field-label"
+      className={cn(
+        "group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10",
+        "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldTitle({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="field-label"
+      className={cn(
+        "flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldDescription({ className, ...props }: React.ComponentProps<"p">) {
+  return (
+    <p
+      data-slot="field-description"
+      className={cn(
+        "text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5",
+        "last:mt-0 nth-last-2:-mt-1",
+        "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+function FieldSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<"div"> & {
+  children?: React.ReactNode
+}) {
+  return (
+    <div
+      data-slot="field-separator"
+      data-content={!!children}
+      className={cn(
+        "relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2",
+        className,
+      )}
+      {...props}
+    >
+      <Separator className="absolute inset-0 top-1/2" />
+      {children && (
+        <span
+          className="relative mx-auto block w-fit bg-background px-2 text-muted-foreground"
+          data-slot="field-separator-content"
+        >
+          {children}
+        </span>
+      )}
+    </div>
+  )
+}
+
+function FieldError({
+  className,
+  children,
+  errors,
+  ...props
+}: React.ComponentProps<"div"> & {
+  errors?: Array<{ message?: string } | undefined>
+}) {
+  const content = useMemo(() => {
+    if (children) {
+      return children
+    }
+
+    if (!errors?.length) {
+      return null
+    }
+
+    const uniqueErrors = [
+      ...new Map(errors.map(error => [error?.message, error])).values(),
+    ]
+
+    if (uniqueErrors?.length === 1) {
+      return uniqueErrors[0]?.message
+    }
+
+    return (
+      <ul className="ml-4 flex list-disc flex-col gap-1">
+        {uniqueErrors.map(
+          (error, index) =>
+            error?.message && <li key={index}>{error.message}</li>,
+        )}
+      </ul>
+    )
+  }, [children, errors])
+
+  if (!content) {
+    return null
+  }
+
+  return (
+    <div
+      role="alert"
+      data-slot="field-error"
+      className={cn("text-sm font-normal text-destructive", className)}
+      {...props}
+    >
+      {content}
+    </div>
+  )
+}
+
+export {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldError,
+  FieldGroup,
+  FieldLabel,
+  FieldLegend,
+  FieldSeparator,
+  FieldSet,
+  FieldTitle,
+}

src/components/ui/label.tsx

@@ -1,5 +1,5 @@
-import * as React from "react"
 import { Label as LabelPrimitive } from "radix-ui"
+import type * as React from "react"
 
 import { cn } from "@/lib/utils/index"
 
@@ -12,7 +12,7 @@ function Label({
       data-slot="label"
       className={cn(
         "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
-        className
+        className,
       )}
       {...props}
     />

src/components/ui/separator.tsx

@@ -0,0 +1,28 @@
+"use client"
+
+import { Separator as SeparatorPrimitive } from "radix-ui"
+import type * as React from "react"
+
+import { cn } from "@/lib/utils/index"
+
+function Separator({
+  className,
+  orientation = "horizontal",
+  decorative = true,
+  ...props
+}: React.ComponentProps<typeof SeparatorPrimitive.Root>) {
+  return (
+    <SeparatorPrimitive.Root
+      data-slot="separator"
+      decorative={decorative}
+      orientation={orientation}
+      className={cn(
+        "shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch",
+        className,
+      )}
+      {...props}
+    />
+  )
+}
+
+export { Separator }

src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  Loader2Icon,
+  OctagonXIcon,
+  TriangleAlertIcon,
+} from "lucide-react"
+import { useTheme } from "next-themes"
+import { Toaster as Sonner, type ToasterProps } from "sonner"
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme()
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  )
+}
+
+export { Toaster }