create-aiko 0.1.0

package/template/packages/admin/src/components/admin-ui/data-table/index.tsx

@@ -0,0 +1,296 @@
+"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;
+  /** 服务端分页时启用，数据将按传入页直接渲染 */
+  manualPagination?: 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,
+  manualPagination = false,
+  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,
+  });
+
+  React.useEffect(() => {
+    setPagination((prev) => {
+      const nextPageIndex = controlledPageIndex ?? 0;
+      if (prev.pageIndex === nextPageIndex && prev.pageSize === initialPageSize) {
+        return prev;
+      }
+
+      return {
+        pageIndex: nextPageIndex,
+        pageSize: initialPageSize,
+      };
+    });
+  }, [controlledPageIndex, 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 manualPageCount = React.useMemo(() => {
+    if (!manualPagination) {
+      return undefined;
+    }
+
+    if (!totalCount || pagination.pageSize <= 0) {
+      return 0;
+    }
+
+    return Math.ceil(totalCount / pagination.pageSize);
+  }, [manualPagination, pagination.pageSize, totalCount]);
+
+  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 && !manualPagination ? getPaginationRowModel() : undefined,
+    manualPagination,
+    pageCount: manualPageCount,
+  });
+
+  const rows = table.getRowModel().rows;
+  const pageCount = manualPagination ? (manualPageCount ?? 0) : 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";

package/template/packages/admin/src/components/admin-ui/editable-table.tsx

@@ -0,0 +1,292 @@
+"use client";
+
+import type { ReactNode } from "react";
+import { cn } from "@/lib/utils";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+import { Trash2 } from "lucide-react";
+
+export interface EditableTableColumn<T> {
+  key: string;
+  title: string | ReactNode;
+  width?: string | number;
+  align?: "left" | "center" | "right";
+  required?: boolean;
+  render: (record: T, index: number) => ReactNode;
+}
+
+export interface EditableTableProps<T> {
+  columns: EditableTableColumn<T>[];
+  dataSource: T[];
+  rowKey: keyof T | ((record: T) => string);
+  header?: { title: string; subtitle?: string; actions?: ReactNode };
+  footer?: ReactNode;
+  emptyText?: string;
+  minWidth?: number;
+  className?: string;
+  showIndex?: boolean;
+  embedded?: boolean;
+}
+
+export function EditableTable<T>({
+  columns,
+  dataSource,
+  rowKey,
+  header,
+  footer,
+  emptyText = "暂无数据",
+  minWidth = 900,
+  className,
+  showIndex = true,
+  embedded = false,
+}: EditableTableProps<T>) {
+  const getRowKey = (record: T, index: number): string => {
+    if (typeof rowKey === "function") return rowKey(record);
+    return String(record[rowKey] ?? index);
+  };
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden",
+        !embedded && "rounded-xl border border-border bg-card shadow-sm",
+        embedded && "-mx-6 -mb-6 -mt-6",
+        className
+      )}
+    >
+      {header && (
+        <div className="flex items-center justify-between border-b border-border bg-muted/30 px-6 py-4">
+          <div>
+            <h2 className="font-semibold">{header.title}</h2>
+            {header.subtitle && (
+              <p className="mt-0.5 text-xs text-muted-foreground">{header.subtitle}</p>
+            )}
+          </div>
+          {header.actions && <div className="flex items-center gap-2">{header.actions}</div>}
+        </div>
+      )}
+      <div className="overflow-x-auto">
+        <Table style={{ minWidth }}>
+          <TableHeader>
+            <TableRow>
+              {showIndex && (
+                <TableHead className="w-10 px-3 py-3 text-left text-xs font-semibold">#</TableHead>
+              )}
+              {columns.map((col) => (
+                <TableHead
+                  key={col.key}
+                  className={cn(
+                    "px-3 py-3 text-xs font-semibold",
+                    col.align === "center" && "text-center",
+                    col.align === "right" && "text-right"
+                  )}
+                  style={{ width: col.width }}
+                >
+                  {col.title}
+                  {col.required && <span className="ml-0.5 text-destructive">*</span>}
+                </TableHead>
+              ))}
+            </TableRow>
+          </TableHeader>
+          <TableBody>
+            {dataSource.length > 0 ? (
+              dataSource.map((record, index) => (
+                <TableRow key={getRowKey(record, index)}>
+                  {showIndex && (
+                    <TableCell className="px-3 py-2 text-sm text-muted-foreground">
+                      {index + 1}
+                    </TableCell>
+                  )}
+                  {columns.map((col) => (
+                    <TableCell
+                      key={col.key}
+                      className={cn(
+                        "px-3 py-2",
+                        col.align === "center" && "text-center",
+                        col.align === "right" && "text-right"
+                      )}
+                    >
+                      {col.render(record, index)}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length + (showIndex ? 1 : 0)}
+                  className="px-3 py-12 text-center text-muted-foreground"
+                >
+                  {emptyText}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+          {footer && dataSource.length > 0 && <tfoot>{footer}</tfoot>}
+        </Table>
+      </div>
+    </div>
+  );
+}
+
+export function TableInput({
+  type = "text",
+  value,
+  onChange,
+  readOnly,
+  placeholder,
+  className,
+  align = "left",
+  ...props
+}: {
+  type?: "text" | "number" | "date";
+  value: string | number;
+  onChange?: (value: string) => void;
+  readOnly?: boolean;
+  placeholder?: string;
+  className?: string;
+  align?: "left" | "center" | "right";
+  min?: number;
+  max?: number;
+}) {
+  return (
+    <Input
+      type={type}
+      value={value}
+      onChange={(e) => onChange?.(e.target.value)}
+      readOnly={readOnly}
+      placeholder={placeholder}
+      className={cn(
+        "h-9",
+        readOnly && "bg-muted text-muted-foreground",
+        align === "center" && "text-center",
+        align === "right" && "text-right",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+/** Sentinel for placeholder option; Radix Select forbids SelectItem value="". */
+const PLACEHOLDER_VALUE = "__select_placeholder__";
+
+export function TableSelect({
+  value,
+  onChange,
+  options,
+  placeholder,
+  className,
+}: {
+  value: string;
+  onChange: (value: string) => void;
+  options: Array<{ value: string; label: string }>;
+  placeholder?: string;
+  className?: string;
+}) {
+  const items = placeholder
+    ? [{ value: PLACEHOLDER_VALUE, label: placeholder }, ...options]
+    : options;
+  const selectValue = value || (placeholder ? PLACEHOLDER_VALUE : undefined);
+  return (
+    <Select
+      value={selectValue}
+      onValueChange={(v) => onChange(v === PLACEHOLDER_VALUE ? "" : v)}
+    >
+      <SelectTrigger className={cn("h-9", className)}>
+        <SelectValue placeholder={placeholder} />
+      </SelectTrigger>
+      <SelectContent>
+        {items.map((opt) => (
+          <SelectItem key={opt.value} value={opt.value}>
+            {opt.label}
+          </SelectItem>
+        ))}
+      </SelectContent>
+    </Select>
+  );
+}
+
+export function TableText({
+  children,
+  className,
+  variant = "default",
+}: {
+  children: ReactNode;
+  className?: string;
+  variant?: "default" | "muted" | "mono" | "bold" | "primary";
+}) {
+  const variantStyles = {
+    default: "text-sm",
+    muted: "text-sm text-muted-foreground",
+    mono: "font-mono text-xs text-muted-foreground",
+    bold: "text-sm font-medium",
+    primary: "text-sm font-semibold text-primary",
+  };
+  return <span className={cn(variantStyles[variant], className)}>{children}</span>;
+}
+
+export function TableDeleteButton({
+  onClick,
+  disabled,
+}: {
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <Button
+      type="button"
+      variant="ghost"
+      size="icon"
+      className={cn(
+        "size-8",
+        !disabled && "text-muted-foreground hover:text-destructive hover:bg-destructive/10"
+      )}
+      onClick={onClick}
+      disabled={disabled}
+    >
+      <Trash2 className="size-4" />
+    </Button>
+  );
+}
+
+export function TableFooterRow({
+  label,
+  value,
+  colSpan,
+  valueColSpan = 1,
+  tailColSpan = 0,
+}: {
+  label: string;
+  value: ReactNode;
+  colSpan: number;
+  valueColSpan?: number;
+  tailColSpan?: number;
+}) {
+  return (
+    <TableRow className="bg-muted/50 border-t border-border">
+      <TableCell colSpan={colSpan} className="px-3 py-3 text-right text-sm font-medium">
+        {label}
+      </TableCell>
+      <TableCell colSpan={valueColSpan} className="px-3 py-3 text-right">
+        {value}
+      </TableCell>
+      {tailColSpan > 0 && <TableCell colSpan={tailColSpan} />}
+    </TableRow>
+  );
+}

package/template/packages/admin/src/components/admin-ui/form/input-password.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { Eye, EyeOff } from "lucide-react";
+import { Input } from "@/components/ui/input";
+import { cn } from "@/lib/utils";
+
+type InputPasswordProps = React.ComponentProps<"input">;
+
+export const InputPassword = ({ className, ...props }: InputPasswordProps) => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  return (
+    <div className={cn("relative")}>
+      <Input
+        type={showPassword ? "text" : "password"}
+        className={cn(className)}
+        {...props}
+      />
+      <button
+        type="button"
+        className={cn(
+          "appearance-none",
+          "absolute right-3 top-1/2 -translate-y-1/2"
+        )}
+        onClick={() => setShowPassword(!showPassword)}
+      >
+        {showPassword ? (
+          <EyeOff size={18} className={cn("text-gray-500")} />
+        ) : (
+          <Eye size={18} className={cn("text-gray-500")} />
+        )}
+      </button>
+    </div>
+  );
+};
+
+InputPassword.displayName = "InputPassword";