@ai-partner-x/aiko-boot-cli 0.1.4

package/templates/scaffold-default/packages/admin/src/components/admin-ui/data-table/data-table-pagination.tsx

@@ -0,0 +1,148 @@
+"use client";
+
+import {
+  ChevronLeft,
+  ChevronRight,
+  ChevronsLeft,
+  ChevronsRight,
+} from "lucide-react";
+import { useMemo } from "react";
+import { useTranslation } from "react-i18next";
+
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+type DataTablePaginationProps = {
+  currentPage: number;
+  pageCount: number;
+  setCurrentPage: (page: number) => void;
+  pageSize: number;
+  setPageSize: (size: number) => void;
+  total?: number;
+};
+
+export function DataTablePagination({
+  currentPage,
+  pageCount,
+  setCurrentPage,
+  pageSize,
+  setPageSize,
+  total,
+}: DataTablePaginationProps) {
+  const { t } = useTranslation();
+  const pageSizeOptions = useMemo(() => {
+    const baseOptions = [10, 20, 30, 40, 50];
+    const optionsSet = new Set(baseOptions);
+
+    if (!optionsSet.has(pageSize)) {
+      optionsSet.add(pageSize);
+    }
+
+    return Array.from(optionsSet).sort((a, b) => a - b);
+  }, [pageSize]);
+
+  return (
+    <div
+      className={cn(
+        "flex",
+        "items-center",
+        "justify-between",
+        "flex-wrap",
+        "px-2",
+        "w-full",
+        "gap-2"
+      )}
+    >
+      <div
+        className={cn(
+          "flex-1",
+          "text-sm",
+          "text-muted-foreground",
+          "whitespace-nowrap"
+        )}
+      >
+        {typeof total === "number" ? `${total} ${t("dataTable.rows")}` : null}
+      </div>
+      <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+        <div className={cn("flex", "items-center", "gap-2")}>
+          <span className={cn("text-sm", "font-medium")}>{t("dataTable.rowsPerPage")}</span>
+          <Select
+            value={`${pageSize}`}
+            onValueChange={(v) => setPageSize(Number(v))}
+          >
+            <SelectTrigger className={cn("h-8", "w-[70px]")}>
+              <SelectValue placeholder={pageSize} />
+            </SelectTrigger>
+            <SelectContent side="top">
+              {pageSizeOptions.map((size) => (
+                <SelectItem key={size} value={`${size}`}>
+                  {size}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
+        </div>
+        <div className={cn("flex", "items-center", "flex-wrap", "gap-2")}>
+          <div
+            className={cn(
+              "flex",
+              "items-center",
+              "justify-center",
+              "text-sm",
+              "font-medium"
+            )}
+          >
+            {t("dataTable.pageOf", { current: currentPage, total: pageCount })}
+          </div>
+          <div className={cn("flex", "items-center", "gap-2")}>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(1)}
+              disabled={currentPage === 1}
+              aria-label={t("dataTable.goToFirstPage")}
+            >
+              <ChevronsLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage - 1)}
+              disabled={currentPage === 1}
+              aria-label={t("dataTable.goToPreviousPage")}
+            >
+              <ChevronLeft />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("h-8", "w-8", "p-0")}
+              onClick={() => setCurrentPage(currentPage + 1)}
+              disabled={currentPage === pageCount}
+              aria-label={t("dataTable.goToNextPage")}
+            >
+              <ChevronRight />
+            </Button>
+            <Button
+              variant="outline"
+              className={cn("hidden", "h-8", "w-8", "p-0", "lg:flex")}
+              onClick={() => setCurrentPage(pageCount)}
+              disabled={currentPage === pageCount}
+              aria-label={t("dataTable.goToLastPage")}
+            >
+              <ChevronsRight />
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+DataTablePagination.displayName = "DataTablePagination";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/data-table/data-table-sorter.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import type { Column } from "@tanstack/react-table";
+import { ArrowDown, ArrowUp, ChevronsUpDown } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+import { useTranslation } from "react-i18next";
+
+export type DataTableSorterProps<TData> = {
+  column: Column<TData>;
+} & React.ComponentProps<typeof Button>;
+
+export function DataTableSorter<TData>({
+  column,
+  className,
+  ...props
+}: DataTableSorterProps<TData>) {
+  const { t } = useTranslation();
+  const id = column.id;
+  const title =
+    column.getIsSorted() === "desc"
+      ? t("dataTable.sortDesc", { id })
+      : column.getIsSorted() === "asc"
+      ? t("dataTable.sortAsc", { id })
+      : t("dataTable.sortBy", { id });
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      onClick={() => column.toggleSorting(undefined, true)}
+      title={title}
+      aria-label={title}
+      {...props}
+      className={cn("data-[state=open]:bg-accent", "w-5 h-5", className)}
+    >
+      {column.getIsSorted() === "desc" ? (
+        <ArrowDown className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : column.getIsSorted() === "asc" ? (
+        <ArrowUp className={cn("text-primary", "!w-3", "!h-3")} />
+      ) : (
+        <ChevronsUpDown
+          className={cn("text-muted-foreground", "!w-3", "!h-3")}
+        />
+      )}
+    </Button>
+  );
+}
+
+DataTableSorter.displayName = "DataTableSorter";

package/templates/scaffold-default/packages/admin/src/components/admin-ui/data-table/index.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import * as React from "react";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable,
+  type ColumnDef,
+  type Row,
+  type SortingState,
+} from "@tanstack/react-table";
+import { cn } from "@/lib/utils";
+import { Checkbox } from "@/components/ui/checkbox";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { DataTablePagination } from "@/components/admin-ui/data-table/data-table-pagination";
+import { DataTableSorter } from "@/components/admin-ui/data-table/data-table-sorter";
+
+export interface DataTableColumn<T> {
+  id: string;
+  header: string;
+  cell: (row: T) => React.ReactNode;
+  align?: "left" | "center" | "right";
+  /** 是否可排序，默认 true */
+  sortable?: boolean;
+  /** 排序依据的字段，不传则用 id 从 row 上取值 */
+  accessorKey?: keyof T;
+}
+
+export interface DataTableProps<T> {
+  data: T[];
+  columns: DataTableColumn<T>[];
+  getRowId?: (row: T) => string;
+  /** 是否显示分页，默认 true */
+  enablePagination?: boolean;
+  pageSize?: number;
+  pageIndex?: number;
+  onPaginationChange?: (pageIndex: number, pageSize: number) => void;
+  /** 是否显示选择列 */
+  enableSelection?: boolean;
+  selectedIds?: Set<string>;
+  onSelectionChange?: (rows: T[]) => void;
+  loading?: boolean;
+  onRowClick?: (row: T) => void;
+  totalCount?: number;
+  className?: string;
+}
+
+function defaultGetRowId<T>(row: T): string {
+  return String((row as { id?: string }).id ?? "");
+}
+
+export function DataTable<T extends object>({
+  data,
+  columns,
+  getRowId = defaultGetRowId,
+  enablePagination = true,
+  pageSize: initialPageSize = 10,
+  pageIndex: controlledPageIndex,
+  onPaginationChange,
+  enableSelection = false,
+  selectedIds = new Set(),
+  onSelectionChange,
+  loading = false,
+  onRowClick,
+  totalCount,
+  className,
+}: DataTableProps<T>) {
+  const [sorting, setSorting] = React.useState<SortingState>([]);
+  const [pagination, setPagination] = React.useState({
+    pageIndex: controlledPageIndex ?? 0,
+    pageSize: initialPageSize,
+  });
+
+  const columnDefs = React.useMemo<ColumnDef<T>[]>(() => {
+    const cols: ColumnDef<T>[] = [];
+    if (enableSelection) {
+      cols.push({
+        id: "select",
+        size: 40,
+        accessorFn: () => undefined,
+        header: ({ table }) => (
+          <Checkbox
+            checked={
+              table.getIsAllPageRowsSelected() ||
+              (table.getIsSomePageRowsSelected() && "indeterminate")
+            }
+            onCheckedChange={(v) => table.toggleAllPageRowsSelected(!!v)}
+            aria-label="全选"
+          />
+        ),
+        cell: ({ row }) => (
+          <Checkbox
+            checked={row.getIsSelected()}
+            onCheckedChange={(v) => row.toggleSelected(!!v)}
+            aria-label="选择行"
+            onClick={(e) => e.stopPropagation()}
+          />
+        ),
+        enableSorting: false,
+      });
+    }
+    columns.forEach((col) => {
+      const key = col.accessorKey ?? (col.id as keyof T);
+      const keyStr = String(key);
+      cols.push({
+        id: col.id,
+        accessorKey: keyStr,
+        accessorFn: (row: T) =>
+          (row as Record<string, unknown>)[keyStr] as unknown,
+        header: col.header,
+        cell: ({ row }) => col.cell(row.original),
+        enableSorting: col.sortable === true,
+        meta: { align: col.align },
+      });
+    });
+    return cols;
+  }, [columns, enableSelection]);
+
+  const rowSelection = React.useMemo(
+    () =>
+      enableSelection && selectedIds
+        ? Object.fromEntries([...selectedIds].map((id) => [id, true]))
+        : {},
+    [enableSelection, selectedIds]
+  );
+
+  const table = useReactTable({
+    data,
+    columns: columnDefs,
+    getRowId: (row: T) => getRowId(row),
+    state: {
+      sorting,
+      pagination,
+      ...(enableSelection ? { rowSelection } : {}),
+    },
+    onSortingChange: setSorting,
+    onPaginationChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(pagination) : updater;
+      setPagination(next);
+      onPaginationChange?.(next.pageIndex, next.pageSize);
+    },
+    onRowSelectionChange: enableSelection
+      ? (updater) => {
+          const next = typeof updater === "function" ? updater(rowSelection) : updater;
+          const ids = Object.keys(next).filter((id) => next[id]);
+          const rows = data.filter((r) => ids.includes(getRowId(r)));
+          onSelectionChange?.(rows);
+        }
+      : undefined,
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getPaginationRowModel: enablePagination ? getPaginationRowModel() : undefined,
+    manualPagination: false,
+  });
+
+  const rows = table.getRowModel().rows;
+  const pageCount = table.getPageCount();
+  const currentPage = table.getState().pagination.pageIndex + 1;
+
+  return (
+    <div className={cn("overflow-hidden", className)}>
+      <Table>
+        <TableHeader>
+          {table.getHeaderGroups().map((headerGroup) => (
+            <TableRow key={headerGroup.id}>
+              {headerGroup.headers.map((header) => (
+                <TableHead
+                  key={header.id}
+                  className={cn(
+                    header.id === "select" && "w-10",
+                    (header.column.columnDef.meta as { align?: string })?.align ===
+                      "center" && "text-center",
+                    (header.column.columnDef.meta as { align?: string })?.align ===
+                      "right" && "text-right"
+                  )}
+                >
+                  <div className="flex items-center gap-1">
+                    {flexRender(
+                      header.column.columnDef.header,
+                      header.getContext()
+                    )}
+                    {header.column.getCanSort() && (
+                      <DataTableSorter column={header.column} />
+                    )}
+                  </div>
+                </TableHead>
+              ))}
+            </TableRow>
+          ))}
+        </TableHeader>
+        <TableBody>
+          {loading ? (
+            <TableRow>
+              <TableCell
+                colSpan={columnDefs.length}
+                className="h-24 text-center"
+              >
+                加载中...
+              </TableCell>
+            </TableRow>
+          ) : rows.length === 0 ? (
+            <TableRow>
+              <TableCell
+                colSpan={columnDefs.length}
+                className="h-24 text-center text-muted-foreground"
+              >
+                暂无数据
+              </TableCell>
+            </TableRow>
+          ) : (
+            rows.map((row) => (
+              <TableRow
+                key={row.id}
+                data-state={row.getIsSelected() ? "selected" : undefined}
+                className={onRowClick ? "cursor-pointer" : undefined}
+                onClick={() => onRowClick?.(row.original as T)}
+              >
+                {row.getVisibleCells().map((cell) => (
+                  <TableCell
+                    key={cell.id}
+                    className={cn(
+                      (cell.column.columnDef.meta as { align?: string })?.align ===
+                        "center" && "text-center",
+                      (cell.column.columnDef.meta as { align?: string })?.align ===
+                        "right" && "text-right"
+                    )}
+                  >
+                    {flexRender(
+                      cell.column.columnDef.cell,
+                      cell.getContext()
+                    )}
+                  </TableCell>
+                ))}
+              </TableRow>
+            ))
+          )}
+        </TableBody>
+      </Table>
+
+      {enablePagination && pageCount > 0 && (
+        <div className="p-3">
+          <DataTablePagination
+            currentPage={currentPage}
+            pageCount={pageCount}
+            setCurrentPage={(p) => table.setPageIndex(p - 1)}
+            pageSize={table.getState().pagination.pageSize}
+            setPageSize={(size) => table.setPageSize(size)}
+            total={totalCount ?? data.length}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
+
+DataTable.displayName = "DataTable";