@allbluecn/admin-app 0.3.3 → 0.3.4

package/allblue-ui/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@allbluecn/ui-bundled",
+  "version": "0.1.0",
+  "private": true,
+  "type": "module"
+}

package/allblue-ui/src/components/confirm-dialog.tsx

@@ -0,0 +1,94 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+import type { ReactElement, ReactNode } from "react"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "../ui/alert-dialog"
+import type { Button } from "../ui/button"
+
+export interface ConfirmDialogProps {
+  /** 受控 open；不传则由 trigger 非受控驱动 */
+  open?: boolean
+  onOpenChange?: (open: boolean) => void
+  title: ReactNode
+  /** 传 null 渲染空描述（保持 aria-describedby 结构），缺省则不渲染 */
+  description?: ReactNode
+  cancelLabel: ReactNode
+  confirmLabel: ReactNode
+  /** 确认按钮点击回调；关闭时机由调用方自行控制（与既有内联实现一致，不自动关闭） */
+  onConfirm: () => void
+  confirmVariant?: React.ComponentProps<typeof Button>["variant"]
+  confirmClassName?: string
+  confirmDisabled?: boolean
+  cancelDisabled?: boolean
+  confirmTestId?: string
+  contentTestId?: string
+  contentClassName?: string
+  /** 可选触发器元素（作为 AlertDialogTrigger 的 render 元素） */
+  trigger?: ReactElement
+}
+
+/**
+ * 通用确认弹窗：收口各处内联的「双 state + 手写 AlertDialog」确认模式。
+ * 仅做骨架渲染，onConfirm 的异步/关闭时序完全由调用方决定，保证逐站点行为等价迁移。
+ */
+export function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  cancelLabel,
+  confirmLabel,
+  onConfirm,
+  confirmVariant,
+  confirmClassName,
+  confirmDisabled,
+  cancelDisabled,
+  confirmTestId,
+  contentTestId,
+  contentClassName,
+  trigger,
+}: ConfirmDialogProps) {
+  const rootProps: { open?: boolean; onOpenChange?: (open: boolean) => void } = {}
+  if (open !== undefined) {
+    rootProps.open = open
+    rootProps.onOpenChange = onOpenChange
+  } else if (onOpenChange) {
+    rootProps.onOpenChange = onOpenChange
+  }
+  return (
+    <AlertDialog {...rootProps}>
+      {trigger ? <AlertDialogTrigger render={trigger} /> : null}
+      <AlertDialogContent data-testid={contentTestId} className={contentClassName}>
+        <AlertDialogHeader>
+          <AlertDialogTitle>{title}</AlertDialogTitle>
+          {description !== undefined ? (
+            <AlertDialogDescription>{description}</AlertDialogDescription>
+          ) : null}
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel disabled={cancelDisabled}>{cancelLabel}</AlertDialogCancel>
+          <AlertDialogAction
+            variant={confirmVariant}
+            className={confirmClassName}
+            disabled={confirmDisabled}
+            onClick={onConfirm}
+            data-testid={confirmTestId}
+          >
+            {confirmLabel}
+          </AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  )
+}

package/allblue-ui/src/components/infinite-scroll-sentinel.tsx

@@ -0,0 +1,37 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+import { useLoadMore } from "../hooks/use-load-more"
+
+interface InfiniteScrollSentinelProps {
+  onLoadMore: () => void | Promise<void>
+  hasMore: boolean
+  rootRef?: React.RefObject<HTMLElement | null>
+  /** 全部加载完后的提示文案（调用方传入，组件内不做 i18n） */
+  loadedAllLabel: string
+}
+
+/**
+ * 无限滚动哨兵：滚动到底部附近触发 onLoadMore，展示三点脉冲 loading 与
+ * 「已全部加载」提示。加载状态机见 useLoadMore。
+ */
+export function InfiniteScrollSentinel({ onLoadMore, hasMore, rootRef, loadedAllLabel }: InfiniteScrollSentinelProps) {
+  const { sentinelRef, loading } = useLoadMore(onLoadMore, hasMore, rootRef)
+
+  return (
+    <div className="flex h-7 items-center justify-center">
+      <div ref={sentinelRef} className="h-1" />
+      {loading && (
+        <div className="flex items-center gap-1">
+          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/60" />
+          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/60 delay-75" />
+          <div className="h-1.5 w-1.5 animate-pulse rounded-full bg-primary/60 delay-150" />
+        </div>
+      )}
+      {!loading && !hasMore && (
+        <span className="text-xs text-muted-foreground">{loadedAllLabel}</span>
+      )}
+    </div>
+  )
+}

package/allblue-ui/src/components/notion-avatar.tsx

@@ -0,0 +1,126 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { useEffect, useState } from "react"
+import type { AvatarConfig, AvatarPart, ShapeType } from "@allbluecn/kernel"
+import { sanitizeSvg } from "../lib/sanitize"
+
+const noneParts: AvatarPart[] = ["glasses", "hair", "accessories", "details", "beard"]
+
+const partOrder: AvatarPart[] = [
+  "face",
+  "nose",
+  "mouth",
+  "eyes",
+  "eyebrows",
+  "glasses",
+  "hair",
+  "accessories",
+  "details",
+  "beard",
+]
+
+function getPreviewImagePath(part: AvatarPart, index: number): string {
+  return `/avatar/preview/${part}/${index}.svg`
+}
+
+const SVGFilter = `<defs>
+  <filter id="notion-avatar-filter" x="-20%" y="-20%" width="140%" height="140%" filterUnits="objectBoundingBox" primitiveUnits="userSpaceOnUse" color-interpolation-filters="linearRGB">
+    <feMorphology operator="dilate" radius="20" in="SourceAlpha" result="morphology"/>
+    <feFlood flood-color="#ffffff" flood-opacity="1" result="flood"/>
+    <feComposite in="flood" in2="morphology" operator="in" result="composite"/>
+    <feMerge result="merge">
+      <feMergeNode in="composite" result="mergeNode"/>
+      <feMergeNode in="SourceGraphic" result="mergeNode1"/>
+    </feMerge>
+  </filter>
+</defs>`
+
+function extractInnerSvg(svgText: string): string {
+  return svgText.replace(/<svg[^>]*>/i, "").replace(/<\/svg>/i, "").trim()
+}
+
+const shapeStyle: Record<ShapeType, string> = {
+  circle: "rounded-full",
+  rounded: "rounded-lg",
+  square: "rounded-none",
+}
+
+type NotionAvatarProps = {
+  config: AvatarConfig
+  bgColor?: string
+  shape?: ShapeType
+  className?: string
+  style?: React.CSSProperties
+  flip?: boolean
+}
+
+export function NotionAvatar({
+  config,
+  bgColor = "transparent",
+  shape = "circle",
+  className,
+  style,
+  flip = false,
+}: NotionAvatarProps) {
+  const [svgContent, setSvgContent] = useState<string>("")
+
+  useEffect(() => {
+    async function buildAvatar() {
+      const groups = await Promise.all(
+        partOrder.map(async (part) => {
+          const index = config[part]
+          if (noneParts.includes(part) && index === 0) return ""
+          try {
+            const res = await fetch(getPreviewImagePath(part, index))
+            const svgText = await res.text()
+            const inner = extractInnerSvg(svgText)
+            return `\n<g id="avatar-${part}"${part === "face" ? ' fill="#ffffff"' : ""}>${inner}</g>`
+          } catch {
+            return ""
+          }
+        }),
+      )
+      const flipAttr = flip ? ' transform="scale(-1,1) translate(-1080, 0)"' : ""
+      const avatarSvg = `<svg viewBox="0 0 1080 1080" fill="none" xmlns="http://www.w3.org/2000/svg" style="width:100%;height:100%">${SVGFilter}<g id="avatar"${flipAttr}>${groups.join("")}</g></svg>`
+      setSvgContent(avatarSvg)
+    }
+    buildAvatar()
+  }, [config, flip])
+
+  if (!svgContent) {
+    return (
+      <div
+        className={`${shapeStyle[shape]} overflow-hidden bg-muted animate-pulse ${className ?? ""}`}
+        style={{ aspectRatio: "1 / 1", ...style }}
+      />
+    )
+  }
+
+  return (
+    <div
+      className={`${shapeStyle[shape]} ${className ?? ""}`}
+      style={{
+        backgroundColor: bgColor === "transparent" ? undefined : bgColor,
+        aspectRatio: "1 / 1",
+        ...style,
+      }}
+      dangerouslySetInnerHTML={{ __html: sanitizeSvg(svgContent) }}
+    />
+  )
+}

package/allblue-ui/src/components/user-avatar.tsx

@@ -0,0 +1,82 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+
+import { NotionAvatar } from "./notion-avatar"
+import type { AvatarConfig, ShapeType } from "@allbluecn/kernel"
+
+type UserAvatarProps = {
+  avatarConfig?: AvatarConfig | null
+  bgShape?: ShapeType | null
+  bgColor?: string | null
+  name?: string | null
+  imageUrl?: string | null
+  className?: string
+  size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl"
+}
+
+const sizeClasses: Record<string, string> = {
+  xs: "w-5 h-5",
+  sm: "w-6 h-6",
+  md: "w-8 h-8",
+  lg: "w-10 h-10",
+  xl: "w-12 h-12",
+  "2xl": "w-16 h-16",
+  "3xl": "w-20 h-20",
+  "4xl": "w-24 h-24",
+}
+
+export function UserAvatar({
+  avatarConfig,
+  bgShape,
+  bgColor,
+  name,
+  imageUrl,
+  className,
+  size = "md",
+}: UserAvatarProps) {
+  const initial = (name || "U").charAt(0).toUpperCase()
+  const shapeClass =
+    bgShape === "circle" ? "rounded-full" : bgShape === "square" ? "rounded-none" : "rounded-lg"
+
+  if (avatarConfig) {
+    return (
+      <NotionAvatar
+        config={avatarConfig}
+        shape={bgShape ?? "square"}
+        bgColor={bgColor ?? "#fff"}
+        className={`${sizeClasses[size]} shrink-0 ${className ?? ""}`}
+      />
+    )
+  }
+
+  if (imageUrl) {
+    return (
+      <div className={`relative shrink-0 overflow-hidden ${shapeClass} ${sizeClasses[size]} ${className ?? ""}`}>
+        <img src={imageUrl} alt={name || ""} className="h-full w-full object-cover" />
+      </div>
+    )
+  }
+
+  return (
+    <div
+      className={`flex shrink-0 items-center justify-center ${shapeClass} bg-muted text-xs font-medium ${sizeClasses[size]} ${className ?? ""}`}
+    >
+      {initial}
+    </div>
+  )
+}

package/allblue-ui/src/data-table/data-table-pagination.tsx

@@ -0,0 +1,121 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "../ui/pagination";
+
+// i18n 由消费方注入（包内不依赖 @/paraglide），文案与原 admin 实现逐字对应
+export interface DataTablePaginationLabels {
+  total: string;
+  previous: string;
+  next: string;
+}
+
+interface DataTablePaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  onPageChange: (page: number) => void;
+  labels: DataTablePaginationLabels;
+}
+
+function getPageNumbers(current: number, total: number): (number | "ellipsis")[] {
+  if (total <= 5) {
+    return Array.from({ length: total }, (_, i) => i + 1);
+  }
+
+  const pages: (number | "ellipsis")[] = [1];
+
+  if (current > 3) {
+    pages.push("ellipsis");
+  }
+
+  const start = Math.max(2, current - 1);
+  const end = Math.min(total - 1, current + 1);
+
+  for (let i = start; i <= end; i++) {
+    pages.push(i);
+  }
+
+  if (current < total - 2) {
+    pages.push("ellipsis");
+  }
+
+  pages.push(total);
+
+  return pages;
+}
+
+export function DataTablePagination({
+  page,
+  totalPages,
+  total,
+  onPageChange,
+  labels,
+}: DataTablePaginationProps) {
+  const pages = getPageNumbers(page, totalPages);
+
+  return (
+    <div className="flex items-center justify-between gap-4 px-2 py-4">
+      <div className="text-sm text-muted-foreground whitespace-nowrap shrink-0">
+        {labels.total}
+      </div>
+      <Pagination className="justify-end">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              text={labels.previous}
+              onClick={() => page > 1 && onPageChange(page - 1)}
+              className={page <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem>
+          {pages.map((p, i) =>
+            p === "ellipsis" ? (
+              <PaginationItem key={`ellipsis-${i}`}>
+                <PaginationEllipsis />
+              </PaginationItem>
+            ) : (
+              <PaginationItem key={p}>
+                <PaginationLink
+                  isActive={p === page}
+                  onClick={() => onPageChange(p)}
+                  className="cursor-pointer"
+                >
+                  {p}
+                </PaginationLink>
+              </PaginationItem>
+            )
+          )}
+          <PaginationItem>
+            <PaginationNext
+              text={labels.next}
+              onClick={() => page < totalPages && onPageChange(page + 1)}
+              className={page >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+}

package/allblue-ui/src/data-table/data-table.tsx

@@ -0,0 +1,218 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU Affero General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU Affero General Public License for more details.
+//
+// You should have received a copy of the GNU Affero General Public License
+// along with this program. If not, see <https://www.gnu.org/licenses/>.
+
+import type { CSSProperties } from 'react'
+import { useRef } from 'react'
+import {
+  type ColumnDef,
+  type RowData,
+  columnVisibilityFeature,
+  flexRender,
+  tableFeatures,
+  useTable,
+} from '@tanstack/react-table'
+import { useVirtualizer } from '@tanstack/react-virtual'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '../ui/table'
+import { VIRTUALIZE_THRESHOLD } from '@allbluecn/kernel'
+
+export const dataTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+})
+
+export type AdminColumnDef<
+  TData extends RowData,
+  TValue = unknown,
+> = ColumnDef<typeof dataTableFeatures, TData, TValue> & {
+  meta?: { style?: CSSProperties }
+}
+
+export interface DataTableProps<TData extends RowData> {
+  columns: AdminColumnDef<TData>[];
+  data: TData[];
+  onRowClick?: (row: TData) => void;
+  actions?: React.ReactNode;
+}
+
+const ROW_HEIGHT = 48
+
+function ColGroup({ columns }: { columns: AdminColumnDef<any>[] }) {
+  return (
+    <colgroup>
+      {columns.map((col, i) => {
+        const style = (col.meta as { style?: CSSProperties } | undefined)?.style
+        const width = style?.width
+        return width != null ? <col key={i} style={{ width }} /> : null
+      })}
+    </colgroup>
+  )
+}
+
+export function DataTable<TData extends RowData>({
+  columns,
+  data,
+  onRowClick,
+  actions,
+}: DataTableProps<TData>) {
+  const table = useTable({
+    features: dataTableFeatures,
+    data,
+    columns,
+  });
+
+  const { rows } = table.getRowModel();
+  const parentRef = useRef<HTMLDivElement>(null);
+
+  const shouldVirtualize = rows.length > VIRTUALIZE_THRESHOLD;
+
+  const rowVirtualizer = useVirtualizer({
+    count: shouldVirtualize ? rows.length : 0,
+    getScrollElement: () => parentRef.current,
+    estimateSize: () => ROW_HEIGHT,
+    overscan: 10,
+    enabled: shouldVirtualize,
+  });
+
+  const virtualRows = shouldVirtualize ? rowVirtualizer.getVirtualItems() : [];
+  const totalHeight = shouldVirtualize ? rowVirtualizer.getTotalSize() : 0;
+  const paddingTop = virtualRows.length > 0 ? virtualRows[0].start : 0;
+  const paddingBottom =
+    virtualRows.length > 0
+      ? totalHeight - virtualRows[virtualRows.length - 1].end
+      : 0;
+
+  const headerGroups = table.getHeaderGroups();
+
+  const renderRows = () => {
+    if (!shouldVirtualize) {
+      return rows.map((row) => (
+        <TableRow
+          key={row.id}
+          className={onRowClick ? 'cursor-pointer' : undefined}
+          onClick={() => onRowClick?.(row.original)}
+        >
+          {row.getVisibleCells().map((cell) => {
+            const style = (cell.column.columnDef.meta as
+              | { style?: CSSProperties }
+              | undefined)?.style
+            const alignClass =
+              style?.textAlign === 'right' ? 'text-right' : undefined
+            return (
+              <TableCell
+                key={cell.id}
+                className={alignClass}
+                style={{ width: style?.width }}
+              >
+                {flexRender(cell.column.columnDef.cell, cell.getContext())}
+              </TableCell>
+            )
+          })}
+        </TableRow>
+      ))
+    }
+
+    return (
+      <>
+        {paddingTop > 0 && <tr style={{ height: paddingTop }} />}
+        {virtualRows.map((virtualRow) => {
+          const row = rows[virtualRow.index]
+          return (
+            <TableRow
+              key={row.id}
+              style={{
+                position: 'absolute',
+                transform: `translateY(${virtualRow.start}px)`,
+                height: ROW_HEIGHT,
+              }}
+              className={onRowClick ? 'cursor-pointer' : undefined}
+              onClick={() => onRowClick?.(row.original)}
+            >
+              {row.getVisibleCells().map((cell) => {
+                const style = (cell.column.columnDef.meta as
+                  | { style?: CSSProperties }
+                  | undefined)?.style
+                const alignClass =
+                  style?.textAlign === 'right' ? 'text-right' : undefined
+                return (
+                  <TableCell
+                    key={cell.id}
+                    className={alignClass}
+                    style={{ width: style?.width }}
+                  >
+                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                  </TableCell>
+                )
+              })}
+            </TableRow>
+          )
+        })}
+        {paddingBottom > 0 && <tr style={{ height: paddingBottom }} />}
+      </>
+    );
+  };
+
+  return (
+    <div className="rounded-md border flex flex-col min-h-0 flex-1 overflow-x-hidden">
+      <div className="shrink-0">
+        <Table className="table-fixed">
+          <ColGroup columns={columns} />
+          <TableHeader>
+            {headerGroups.map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => {
+                  const style = (
+                    header.column.columnDef.meta as
+                      | { style?: CSSProperties }
+                      | undefined
+                  )?.style
+                  const alignClass =
+                    style?.textAlign === 'right' ? 'text-right' : undefined
+                  return (
+                    <TableHead
+                      key={header.id}
+                      className={alignClass}
+                      style={{ width: style?.width }}
+                    >
+                      {header.isPlaceholder
+                        ? null
+                        : flexRender(header.column.columnDef.header, header.getContext())}
+                    </TableHead>
+                  )
+                })}
+              </TableRow>
+            ))}
+          </TableHeader>
+        </Table>
+      </div>
+      <div ref={parentRef} className="overflow-y-auto flex-1 min-h-0">
+        <div style={{ position: "relative", height: shouldVirtualize ? totalHeight : undefined }}>
+          <Table className="table-fixed">
+            <ColGroup columns={columns} />
+            <TableBody>{renderRows()}</TableBody>
+          </Table>
+        </div>
+      </div>
+      {actions && <div className="shrink-0 border-t">{actions}</div>}
+    </div>
+  );
+}