@allbluecn/admin-app 0.3.2 → 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/{src/components → allblue-ui/src}/data-table/data-table-pagination.tsx

@@ -23,13 +23,21 @@ import {
   PaginationLink,
   PaginationNext,
   PaginationPrevious,
-} from "@/components/ui/pagination";
-import { m } from '@/paraglide/messages.js'
+} 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")[] {
@@ -64,19 +72,20 @@ export function DataTablePagination({
   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">
-        {m.common_pagination_total({ total, page, totalPages })}
+        {labels.total}
       </div>
       <Pagination className="justify-end">
         <PaginationContent>
           <PaginationItem>
             <PaginationPrevious
-              text={m.common_pagination_prev()}
+              text={labels.previous}
               onClick={() => page > 1 && onPageChange(page - 1)}
               className={page <= 1 ? "pointer-events-none opacity-50" : "cursor-pointer"}
             />
@@ -100,7 +109,7 @@ export function DataTablePagination({
           )}
           <PaginationItem>
             <PaginationNext
-              text={m.common_pagination_next()}
+              text={labels.next}
               onClick={() => page < totalPages && onPageChange(page + 1)}
               className={page >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
             />

package/{src/components → allblue-ui/src}/data-table/data-table.tsx

@@ -33,7 +33,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from '@/components/ui/table'
+} from '../ui/table'
 import { VIRTUALIZE_THRESHOLD } from '@allbluecn/kernel'
 
 export const dataTableFeatures = tableFeatures({

package/{src/components → allblue-ui/src}/data-table/table-detail-layout.tsx

@@ -16,14 +16,14 @@
 // along with this program. If not, see <https://www.gnu.org/licenses/>.
 
 import { useNavigate } from "@tanstack/react-router";
-import { m } from '@/paraglide/messages.js'
-import { Button } from "@/components/ui/button";
-import { Skeleton } from "@/components/ui/skeleton";
+import { Button } from "../ui/button";
+import { Skeleton } from "../ui/skeleton";
 import { ArrowLeftIcon } from "lucide-react";
 
 interface TableDetailLayoutProps {
   backHref: string;
-  backLabel?: string;
+  // i18n 由消费方注入（包内不依赖 @/paraglide），原 admin 实现默认回退文案由调用方显式传入
+  backLabel: string;
   title: string;
   subtitle?: string;
   avatar?: React.ReactNode;
@@ -45,7 +45,6 @@ export function TableDetailLayout({
   children,
 }: TableDetailLayoutProps) {
   const navigate = useNavigate();
-  const resolvedBackLabel = backLabel ?? m.common_common_backToList()
 
   if (loading) {
     return (
@@ -73,7 +72,7 @@ export function TableDetailLayout({
           className="gap-1.5 text-muted-foreground hover:text-foreground"
         >
           <ArrowLeftIcon className="h-4 w-4" />
-          {resolvedBackLabel}
+          {backLabel}
         </Button>
       </div>
       <div className="p-6 pt-4 space-y-6">

package/allblue-ui/src/hooks/use-load-more.ts

@@ -0,0 +1,57 @@
+// SPDX-License-Identifier: AGPL-3.0-or-later
+// AllBlue - 理想之海
+// Copyright (C) 2026 AllBlue Contributors
+
+import { useEffect, useRef, useState } from "react";
+
+/**
+ * 无限滚动加载状态机：IntersectionObserver 哨兵 + loading 防重入。
+ *
+ * 哨兵进入视口且 hasMore 时触发 onLoadMore；返回 Promise 时 resolve 后解除
+ * loading，同步返回则由调用方经 hasMore/数据更新间接解除。供
+ * InfiniteScrollSentinel 等无限滚动组件复用。
+ */
+export function useLoadMore(
+  onLoadMore: () => void | Promise<void>,
+  hasMore: boolean,
+  rootRef?: React.RefObject<HTMLElement | null>,
+): {
+  /** 挂到滚动末端哨兵元素上 */
+  sentinelRef: React.RefObject<HTMLDivElement | null>;
+  loading: boolean;
+} {
+  const sentinelRef = useRef<HTMLDivElement>(null);
+  const observerRef = useRef<IntersectionObserver | null>(null);
+  const [loading, setLoading] = useState(false);
+  const loadingRef = useRef(false);
+
+  useEffect(() => {
+    loadingRef.current = loading;
+  }, [loading]);
+
+  useEffect(() => {
+    if (!sentinelRef.current || !hasMore) return;
+
+    if (observerRef.current) observerRef.current.disconnect();
+
+    const observer = new IntersectionObserver(
+      (entries) => {
+        if (entries[0]?.isIntersecting && !loadingRef.current) {
+          setLoading(true);
+          const result = onLoadMore();
+          if (result && typeof (result as Promise<void>).then === "function") {
+            (result as Promise<void>).then(() => setLoading(false));
+          }
+        }
+      },
+      { root: rootRef?.current ?? null, rootMargin: "80px" },
+    );
+
+    observer.observe(sentinelRef.current);
+    observerRef.current = observer;
+    return () => observer.disconnect();
+    // onLoadMore 由调用方保证稳定（多为 useCallback），与原实现一致仅依赖 hasMore/rootRef
+  }, [hasMore, rootRef]);
+
+  return { sentinelRef, loading };
+}

package/allblue-ui/src/index.ts

@@ -0,0 +1,31 @@
+export * from "./ui/alert"
+export * from "./ui/alert-dialog"
+export * from "./ui/avatar"
+export * from "./ui/badge"
+export * from "./ui/button"
+export * from "./ui/card"
+export * from "./ui/checkbox"
+export * from "./ui/collapsible"
+export * from "./ui/dialog"
+export * from "./ui/dropdown-menu"
+export * from "./ui/field"
+export * from "./ui/input"
+export * from "./ui/input-group"
+export * from "./ui/label"
+export * from "./ui/pagination"
+export * from "./ui/select"
+export * from "./ui/separator"
+export * from "./ui/sheet"
+export * from "./ui/sidebar"
+export * from "./ui/skeleton"
+export * from "./ui/switch"
+export * from "./ui/table"
+export * from "./ui/textarea"
+export * from "./ui/toast"
+export * from "./ui/tooltip"
+export { ConfirmDialog, type ConfirmDialogProps } from "./components/confirm-dialog"
+export { InfiniteScrollSentinel } from "./components/infinite-scroll-sentinel"
+export { useLoadMore } from "./hooks/use-load-more"
+export { useIsMobile } from "./hooks/use-mobile"
+export { getBoringAvatarUrl, getAvatarFallback, type AvatarOptions } from "./lib/avatar"
+export { cn } from "./lib/utils"