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

package/templates/scaffold-default/packages/admin/src/components/admin-ui/list-report.tsx

@@ -0,0 +1,306 @@
+"use client"
+
+import * as React from "react"
+import {
+  Download,
+  Filter,
+  HelpCircle,
+  LayoutList,
+  Plus,
+  RefreshCw,
+  Search,
+  Settings,
+  X,
+} from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { DataTable } from "@/components/admin-ui/data-table"
+import type { DataTableColumn } from "@/components/admin-ui/data-table"
+
+export interface ListReportHeaderConfig {
+  title: string
+  subtitle?: string
+  tag?: string
+  icon?: React.ReactNode
+}
+
+export interface ListReportToolbarAction {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  onClick: () => void
+  disabled?: boolean
+  primary?: boolean
+}
+
+/** 列定义：cell 接收行数据，返回单元格内容 */
+export interface ListReportColumn<T> {
+  id: string
+  header: string
+  align?: "left" | "center" | "right"
+  cell: (row: T) => React.ReactNode
+  /** 是否可排序，默认 true */
+  sortable?: boolean
+  /** 排序依据的字段，不传则用 id 从 row 上取值 */
+  accessorKey?: keyof T
+}
+
+export interface ListReportProps<T> {
+  header: ListReportHeaderConfig
+  data: T[]
+  columns: ListReportColumn<T>[]
+  totalCount?: number
+  loading?: boolean
+  primaryAction?: ListReportToolbarAction
+  selectionActions?: ListReportToolbarAction[]
+  searchPlaceholder?: string
+  onSearch?: (value: string) => void
+  showFilter?: boolean
+  onFilterToggle?: () => void
+  filterContent?: React.ReactNode
+  filterCount?: number
+  onFilterClear?: () => void
+  onRefresh?: () => void
+  onExport?: () => void
+  onRowClick?: (row: T) => void
+  onSelectionChange?: (rows: T[]) => void
+  pageSize?: number
+  pageIndex?: number
+  onPaginationChange?: (page: number, pageSize: number) => void
+  getRowId?: (row: T) => string
+  className?: string
+}
+
+export function ListReport<T extends object>({
+  header,
+  data,
+  columns,
+  totalCount,
+  loading = false,
+  primaryAction,
+  selectionActions = [],
+  searchPlaceholder = "搜索...",
+  onSearch,
+  showFilter = false,
+  onFilterToggle,
+  filterContent,
+  filterCount = 0,
+  onFilterClear,
+  onRefresh,
+  onExport,
+  onRowClick,
+  onSelectionChange,
+  pageSize = 10,
+  pageIndex = 0,
+  onPaginationChange,
+  getRowId,
+  className,
+}: ListReportProps<T>) {
+  const [searchValue, setSearchValue] = React.useState("")
+  const [selectedIds, setSelectedIds] = React.useState<Set<string>>(new Set())
+  const [isRefreshing, setIsRefreshing] = React.useState(false)
+
+  const getId = (row: T) => (getRowId ? getRowId(row) : String((row as { id?: string }).id ?? ""))
+
+  const displayCount = data.length
+  const totalFilterCount = filterCount + (searchValue ? 1 : 0)
+
+  const dataTableColumns: DataTableColumn<T>[] = React.useMemo(
+    () =>
+      columns.map((col) => ({
+        id: col.id,
+        header: col.header,
+        cell: col.cell,
+        align: col.align,
+        sortable: col.sortable === true,
+        accessorKey: col.accessorKey,
+      })),
+    [columns]
+  )
+
+  const handleSearch = (value: string) => {
+    setSearchValue(value)
+    onSearch?.(value)
+  }
+
+  const handleRefresh = () => {
+    setIsRefreshing(true)
+    onRefresh?.()
+    setTimeout(() => setIsRefreshing(false), 1000)
+  }
+
+  const handleSelectionChange = React.useCallback(
+    (rows: T[]) => {
+      setSelectedIds(new Set(rows.map((r) => getId(r))))
+      onSelectionChange?.(rows)
+    },
+    [onSelectionChange, getId]
+  )
+
+
+  return (
+    <div
+      className={cn(
+        "overflow-hidden rounded-xl border border-border bg-card shadow-sm",
+        className
+      )}
+    >
+      <div className="relative overflow-hidden bg-primary p-6 text-primary-foreground">
+        <div className="absolute right-8 top-1/2 size-32 -translate-y-1/2 rounded-full bg-white/10" />
+        <div className="relative z-10 flex items-center justify-between">
+          <div className="flex items-center gap-4">
+            <div className="flex size-14 items-center justify-center rounded-xl bg-white/20 backdrop-blur">
+              {header.icon ?? <Filter className="size-7" />}
+            </div>
+            <div>
+              <div className="mb-1 flex items-center gap-3">
+                <h1 className="text-xl font-semibold">{header.title}</h1>
+                {header.tag && (
+                  <span className="rounded-full bg-white/20 px-2.5 py-1 text-xs font-medium">
+                    {header.tag}
+                  </span>
+                )}
+              </div>
+              {header.subtitle && (
+                <p className="text-sm text-primary-foreground/80">{header.subtitle}</p>
+              )}
+            </div>
+          </div>
+          {primaryAction && (
+            <Button
+              size="sm"
+              className="gap-2 bg-white text-primary hover:bg-white/90"
+              onClick={primaryAction.onClick}
+              disabled={primaryAction.disabled}
+            >
+              {primaryAction.icon ?? <Plus className="size-4" />}
+              {primaryAction.label}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex items-center justify-between border-b border-border bg-muted/30 px-6 py-3">
+        <div className="flex items-center gap-3">
+          {selectedIds.size > 0 ? (
+            <>
+              <span className="text-sm font-medium text-primary">
+                已选择 {selectedIds.size} 项
+              </span>
+              {selectionActions.length > 0 && (
+                <>
+                  <div className="h-5 w-px bg-border" />
+                  {selectionActions.map((action) => (
+                    <Button
+                      key={action.id}
+                      variant="ghost"
+                      size="sm"
+                      className="h-8 gap-1.5"
+                      onClick={action.onClick}
+                      disabled={action.disabled}
+                    >
+                      {action.icon}
+                      {action.label}
+                    </Button>
+                  ))}
+                </>
+              )}
+            </>
+          ) : (
+            <span className="text-sm text-muted-foreground">共 {displayCount} 项</span>
+          )}
+        </div>
+        <div className="flex items-center gap-1">
+          <Button
+            variant="ghost"
+            size="icon"
+            className={cn("size-8", isRefreshing && "animate-spin")}
+            onClick={handleRefresh}
+            title="刷新"
+          >
+            <RefreshCw className="size-4" />
+          </Button>
+          {onExport && (
+            <Button variant="ghost" size="icon" className="size-8" onClick={onExport} title="导出">
+              <Download className="size-4" />
+            </Button>
+          )}
+          <Button variant="ghost" size="icon" className="size-8" title="列设置">
+            <LayoutList className="size-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="size-8" title="设置">
+            <Settings className="size-4" />
+          </Button>
+          <Button variant="ghost" size="icon" className="size-8" title="帮助">
+            <HelpCircle className="size-4" />
+          </Button>
+        </div>
+      </div>
+
+      <div className="border-b border-border px-6 py-3">
+        <div className="flex items-center gap-4">
+          <div className="relative max-w-md flex-1">
+            <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+            <Input
+              placeholder={searchPlaceholder}
+              value={searchValue}
+              onChange={(e) => handleSearch(e.target.value)}
+              className="h-9 pl-9"
+            />
+          </div>
+          {onFilterToggle && (
+            <Button
+              variant={showFilter || totalFilterCount > 0 ? "secondary" : "ghost"}
+              size="sm"
+              className="gap-2"
+              onClick={onFilterToggle}
+            >
+              <Filter className="size-4" />
+              筛选
+              {totalFilterCount > 0 && (
+                <span className="flex size-[18px] items-center justify-center rounded-full bg-primary px-1 text-xs font-medium text-primary-foreground">
+                  {totalFilterCount}
+                </span>
+              )}
+            </Button>
+          )}
+          {totalFilterCount > 0 && onFilterClear && (
+            <Button
+              variant="ghost"
+              size="sm"
+              className="gap-1.5"
+              onClick={() => {
+                setSearchValue("")
+                onFilterClear()
+              }}
+            >
+              <X className="size-3.5" />
+              清除筛选
+            </Button>
+          )}
+          <Button size="sm">应用</Button>
+        </div>
+        {showFilter && filterContent && (
+          <div className="mt-4 border-t border-border pt-4">{filterContent}</div>
+        )}
+      </div>
+
+      <DataTable<T>
+        data={data}
+        columns={dataTableColumns}
+        getRowId={getRowId ?? getId}
+        enablePagination={totalCount !== undefined || data.length > (pageSize ?? 10)}
+        pageSize={pageSize ?? 10}
+        pageIndex={pageIndex}
+        onPaginationChange={onPaginationChange}
+        enableSelection={selectionActions.length > 0 || onSelectionChange != null}
+        selectedIds={selectedIds}
+        onSelectionChange={handleSelectionChange}
+        loading={loading}
+        onRowClick={onRowClick}
+        totalCount={totalCount}
+      />
+    </div>
+  )
+}

package/templates/scaffold-default/packages/admin/src/components/admin-ui/master-detail.tsx

@@ -0,0 +1,382 @@
+"use client"
+
+import { useState, type ReactNode } from "react"
+import { Search, Plus, FileText, Pencil, Trash2 } from "lucide-react"
+import { cn } from "@/lib/utils"
+import { Input } from "@/components/ui/input"
+import { Button } from "@/components/ui/button"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+
+export interface MasterDetailItem {
+  id: string
+  title: string
+  subtitle?: string
+  description?: string
+  status?: { label: string; color: "green" | "yellow" | "red" | "gray" | "blue" }
+  badge?: string | number
+  icon?: ReactNode
+}
+
+export type EditMode = "view" | "edit" | "create"
+
+export interface MasterDetailProps<T extends MasterDetailItem> {
+  title: string
+  subtitle?: string
+  headerIcon?: ReactNode
+  items: T[]
+  selectedId?: string
+  onSelect?: (item: T) => void
+  renderDetail: (item: T, actionButtons?: ReactNode) => ReactNode
+  renderForm?: (item: T | null, mode: EditMode) => ReactNode
+  renderEmpty?: () => ReactNode
+  searchPlaceholder?: string
+  onSearch?: (keyword: string) => void
+  showCreate?: boolean
+  createLabel?: string
+  allowEdit?: boolean
+  allowDelete?: boolean
+  onSave?: (item: T | null, mode: EditMode) => void
+  onDelete?: (item: T) => void
+  masterWidth?: number
+}
+
+const statusColors: Record<string, { bg: string; text: string }> = {
+  green: { bg: "bg-emerald-500", text: "text-emerald-600" },
+  yellow: { bg: "bg-amber-500", text: "text-amber-600" },
+  red: { bg: "bg-red-500", text: "text-red-600" },
+  gray: { bg: "bg-gray-400", text: "text-gray-600" },
+  blue: { bg: "bg-blue-500", text: "text-blue-600" },
+}
+
+export const MasterDetailIcons = {
+  search: <Search className="size-4" />,
+  plus: <Plus className="size-4" />,
+  empty: <FileText className="size-12 text-muted-foreground" />,
+  edit: <Pencil className="size-4" />,
+  delete: <Trash2 className="size-4" />,
+}
+
+function MasterListItem<T extends MasterDetailItem>({
+  item,
+  isSelected,
+  onClick,
+  disabled,
+}: {
+  item: T
+  isSelected: boolean
+  onClick: () => void
+  disabled?: boolean
+}) {
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      onClick={disabled ? undefined : onClick}
+      onKeyDown={(e) => !disabled && (e.key === "Enter" || e.key === " ") && onClick()}
+      className={cn(
+        "relative px-4 py-3 transition-colors",
+        disabled ? "cursor-not-allowed opacity-60" : "cursor-pointer",
+        isSelected
+          ? "border-l-4 border-l-primary bg-primary/10"
+          : "border-l-4 border-l-transparent hover:bg-muted/50"
+      )}
+    >
+      <div className="flex items-start gap-3">
+        {item.icon && (
+          <div
+            className={cn(
+              "flex size-9 shrink-0 items-center justify-center rounded-lg",
+              isSelected ? "bg-primary/20 text-primary" : "bg-muted text-muted-foreground"
+            )}
+          >
+            {item.icon}
+          </div>
+        )}
+        <div className="min-w-0 flex-1">
+          <div className="flex items-center justify-between gap-2">
+            <h3 className={cn("truncate text-sm font-medium", isSelected ? "text-primary" : "")}>
+              {item.title}
+            </h3>
+            {item.badge != null && (
+              <span className="shrink-0 rounded bg-muted px-1.5 py-0.5 text-xs font-medium text-muted-foreground">
+                {item.badge}
+              </span>
+            )}
+          </div>
+          {item.subtitle && (
+            <p className="mt-0.5 truncate text-xs text-muted-foreground">{item.subtitle}</p>
+          )}
+          {item.description && (
+            <p className="mt-1 line-clamp-2 text-xs text-muted-foreground/80">{item.description}</p>
+          )}
+        </div>
+        {item.status && (
+          <div className="flex shrink-0 items-center gap-1.5">
+            <span className={cn("size-2 rounded-full", statusColors[item.status.color]?.bg ?? "bg-muted")} />
+            <span className={cn("text-xs", statusColors[item.status.color]?.text ?? "text-muted-foreground")}>
+              {item.status.label}
+            </span>
+          </div>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export function MasterDetail<T extends MasterDetailItem>({
+  title,
+  subtitle,
+  headerIcon,
+  items,
+  selectedId,
+  onSelect,
+  renderDetail,
+  renderForm,
+  renderEmpty,
+  searchPlaceholder = "搜索...",
+  onSearch,
+  showCreate = true,
+  createLabel = "新建",
+  allowEdit = true,
+  allowDelete = true,
+  onSave,
+  onDelete,
+  masterWidth = 360,
+}: MasterDetailProps<T>) {
+  const [searchKeyword, setSearchKeyword] = useState("")
+  const [internalSelectedId, setInternalSelectedId] = useState<string | undefined>(
+    selectedId ?? items[0]?.id
+  )
+  const [editMode, setEditMode] = useState<EditMode>("view")
+  const [showDeleteConfirm, setShowDeleteConfirm] = useState(false)
+
+  const currentSelectedId = selectedId ?? internalSelectedId
+  const selectedItem = items.find((item) => item.id === currentSelectedId)
+  const isEditing = editMode !== "view"
+
+  const handleSearch = (value: string) => {
+    setSearchKeyword(value)
+    onSearch?.(value)
+  }
+
+  const handleSelect = (item: T) => {
+    if (isEditing) return
+    setInternalSelectedId(item.id)
+    onSelect?.(item)
+  }
+
+  const handleCreate = () => setEditMode("create")
+  const handleEdit = () => setEditMode("edit")
+  const handleCancel = () => setEditMode("view")
+  const handleSave = () => {
+    onSave?.(editMode === "create" ? null : selectedItem ?? null, editMode)
+    setEditMode("view")
+  }
+
+  const handleDeleteClick = () => setShowDeleteConfirm(true)
+  const handleDeleteConfirm = () => {
+    if (selectedItem) onDelete?.(selectedItem)
+    setShowDeleteConfirm(false)
+  }
+
+  return (
+    <div className="flex h-[calc(100vh-8rem)] flex-col overflow-hidden rounded-lg bg-muted/30 shadow-sm">
+      <div className="bg-primary px-6 py-5 text-primary-foreground">
+        <div className="flex items-center justify-between">
+          <div className="flex items-center gap-3">
+            {headerIcon && (
+              <div className="flex size-10 items-center justify-center rounded-xl bg-white/20">
+                {headerIcon}
+              </div>
+            )}
+            <div>
+              <h1 className="text-xl font-semibold">{title}</h1>
+              {subtitle && <p className="mt-0.5 text-sm text-primary-foreground/80">{subtitle}</p>}
+            </div>
+          </div>
+          {showCreate && !isEditing && (
+            <Button
+              size="sm"
+              className="gap-2 bg-white text-primary hover:bg-white/90"
+              onClick={handleCreate}
+            >
+              {MasterDetailIcons.plus}
+              {createLabel}
+            </Button>
+          )}
+        </div>
+      </div>
+
+      <div className="flex flex-1 overflow-hidden">
+        <div
+          className={cn(
+            "flex flex-col border-r border-border bg-card transition-opacity",
+            isEditing && "pointer-events-none opacity-60"
+          )}
+          style={{ width: masterWidth, minWidth: masterWidth }}
+        >
+          <div className="border-b border-border p-3">
+            <div className="relative">
+              <Search className="absolute left-3 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+              <Input
+                value={searchKeyword}
+                onChange={(e) => handleSearch(e.target.value)}
+                placeholder={searchPlaceholder}
+                className="h-9 bg-muted/50 pl-9"
+                disabled={isEditing}
+              />
+            </div>
+          </div>
+          <div className="flex-1 overflow-y-auto">
+            {items.length > 0 ? (
+              <div className="divide-y divide-border">
+                {items.map((item) => (
+                  <MasterListItem
+                    key={item.id}
+                    item={item}
+                    isSelected={item.id === currentSelectedId && editMode !== "create"}
+                    onClick={() => handleSelect(item)}
+                    disabled={isEditing}
+                  />
+                ))}
+              </div>
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                {MasterDetailIcons.empty}
+                <p className="mt-3 text-sm">暂无数据</p>
+              </div>
+            )}
+          </div>
+          <div className="border-t h-12 border-border bg-muted/30 px-4 py-2.5">
+            <span className="text-xs text-muted-foreground">共 {items.length} 项</span>
+          </div>
+        </div>
+
+        <div className="flex flex-1 flex-col bg-muted/30">
+          <div className="flex-1 overflow-y-auto">
+            {editMode === "create" && renderForm ? (
+              <div className="p-4">{renderForm(null, "create")}</div>
+            ) : editMode === "edit" && selectedItem && renderForm ? (
+              <div className="p-4">{renderForm(selectedItem, "edit")}</div>
+            ) : selectedItem ? (
+              <div className="p-4">
+                {renderDetail(
+                  selectedItem,
+                  (allowEdit || allowDelete) ? (
+                    <div className="flex items-center gap-2">
+                      {allowEdit && renderForm && (
+                        <Button size="sm" variant="secondary" className="gap-1.5" onClick={handleEdit}>
+                          {MasterDetailIcons.edit}
+                          编辑
+                        </Button>
+                      )}
+                      {allowDelete && onDelete && (
+                        <Button
+                          size="icon"
+                          variant="ghost"
+                          className="size-8 text-muted-foreground hover:bg-destructive/10 hover:text-destructive"
+                          onClick={handleDeleteClick}
+                          title="删除"
+                        >
+                          {MasterDetailIcons.delete}
+                        </Button>
+                      )}
+                    </div>
+                  ) : undefined
+                )}
+              </div>
+            ) : renderEmpty ? (
+              renderEmpty()
+            ) : (
+              <div className="flex flex-col items-center justify-center py-12 text-muted-foreground">
+                {MasterDetailIcons.empty}
+                <p className="mt-3 text-sm">请选择一项查看详情</p>
+              </div>
+            )}
+          </div>
+          {isEditing && (
+            <div className="flex h-12 shrink-0 items-center justify-end gap-3 border-t border-border bg-card px-6 py-3">
+              <Button variant="outline" size="sm" onClick={handleCancel}>
+                取消
+              </Button>
+              <Button size="sm" onClick={handleSave}>
+                保存
+              </Button>
+            </div>
+          )}
+        </div>
+      </div>
+
+      <AlertDialog open={showDeleteConfirm} onOpenChange={setShowDeleteConfirm}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>确认删除</AlertDialogTitle>
+            <AlertDialogDescription>
+              确定要删除 <span className="font-medium">{selectedItem?.title}</span> 吗？此操作不可撤销。
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>取消</AlertDialogCancel>
+            <AlertDialogAction onClick={handleDeleteConfirm} className="bg-destructive text-destructive-foreground hover:bg-destructive/90">
+              删除
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}
+
+export interface DetailSectionProps {
+  title: string
+  children: ReactNode
+  className?: string
+}
+
+export function DetailSection({ title, children, className }: DetailSectionProps) {
+  return (
+    <div className={cn("overflow-hidden rounded-xl border border-border bg-card shadow-sm", className)}>
+      <div className="border-b border-border bg-muted/30 px-5 py-3">
+        <h3 className="font-semibold">{title}</h3>
+      </div>
+      <div className="p-5">{children}</div>
+    </div>
+  )
+}
+
+export interface DetailFieldProps {
+  label: string
+  value: ReactNode
+  className?: string
+}
+
+export function DetailField({ label, value, className }: DetailFieldProps) {
+  return (
+    <div className={className}>
+      <dt className="mb-1 text-xs text-muted-foreground">{label}</dt>
+      <dd className="text-sm">{value ?? "-"}</dd>
+    </div>
+  )
+}
+
+export function DetailFieldGrid({
+  children,
+  columns = 3,
+  className,
+}: {
+  children: ReactNode
+  columns?: 2 | 3 | 4
+  className?: string
+}) {
+  const gridCols = { 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4" }
+  return <dl className={cn("grid gap-x-6 gap-y-4", gridCols[columns], className)}>{children}</dl>
+}