@allbluecn/web-app 0.18.1 → 0.18.2

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

@@ -1,218 +0,0 @@
-// 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>
-  );
-}

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

@@ -1,97 +0,0 @@
-// 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 { useNavigate } from "@tanstack/react-router";
-import { Button } from "../ui/button";
-import { Skeleton } from "../ui/skeleton";
-import { ArrowLeftIcon } from "lucide-react";
-
-interface TableDetailLayoutProps {
-  backHref: string;
-  // i18n 由消费方注入（包内不依赖 @/paraglide），原 admin 实现默认回退文案由调用方显式传入
-  backLabel: string;
-  title: string;
-  subtitle?: string;
-  avatar?: React.ReactNode;
-  badges?: React.ReactNode;
-  actions?: React.ReactNode;
-  loading?: boolean;
-  children: React.ReactNode;
-}
-
-export function TableDetailLayout({
-  backHref,
-  backLabel,
-  title,
-  subtitle,
-  avatar,
-  badges,
-  actions,
-  loading,
-  children,
-}: TableDetailLayoutProps) {
-  const navigate = useNavigate();
-
-  if (loading) {
-    return (
-      <div className="p-6 space-y-6">
-        <Skeleton className="h-8 w-24" />
-        <div className="flex items-center gap-4">
-          <Skeleton className="h-12 w-12 rounded-full" />
-          <div className="space-y-2">
-            <Skeleton className="h-6 w-40" />
-            <Skeleton className="h-4 w-60" />
-          </div>
-        </div>
-        <Skeleton className="h-64 w-full" />
-      </div>
-    );
-  }
-
-  return (
-    <div>
-      <div className="sticky top-0 z-10 bg-background border-b px-6 py-2.5">
-        <Button
-          variant="ghost"
-          size="sm"
-          onClick={() => navigate({ to: backHref })}
-          className="gap-1.5 text-muted-foreground hover:text-foreground"
-        >
-          <ArrowLeftIcon className="h-4 w-4" />
-          {backLabel}
-        </Button>
-      </div>
-      <div className="p-6 pt-4 space-y-6">
-        <div className="flex items-start justify-between">
-          <div className="flex items-center gap-4">
-            {avatar}
-            <div>
-              <div className="flex items-center gap-2">
-                <h1 className="text-2xl font-bold">{title}</h1>
-                {badges}
-              </div>
-              {subtitle && <p className="text-muted-foreground mt-1">{subtitle}</p>}
-            </div>
-          </div>
-          {actions && <div className="flex gap-2">{actions}</div>}
-        </div>
-
-        {children}
-      </div>
-    </div>
-  );
-}

package/allblue-ui/src/index.ts

@@ -1,31 +0,0 @@
-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"

package/allblue-ui/src/lib/avatar.ts

@@ -1,41 +0,0 @@
-// 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/>.
-
-const DICE_BEAR_BASE = "https://api.dicebear.com/7.x";
-
-const DICE_BEAR_STYLES = ["avataaars", "micah", "notionists", "lorelei", "adventurer"] as const;
-
-type DiceBearStyle = (typeof DICE_BEAR_STYLES)[number];
-
-export interface AvatarOptions {
-  style?: DiceBearStyle;
-  size?: number;
-  square?: boolean;
-}
-
-export function getBoringAvatarUrl(
-  seed: string,
-  options: AvatarOptions = {}
-): string {
-  const { style = "avataaars", size = 80 } = options;
-
-  return `${DICE_BEAR_BASE}/${style}/svg?seed=${encodeURIComponent(seed)}&size=${size}`;
-}
-
-export function getAvatarFallback(name: string): string {
-  return name.charAt(0).toUpperCase();
-}

package/allblue-ui/src/lib/datetime.ts

@@ -1,226 +0,0 @@
-// 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 { formatInTimeZone, toZonedTime, fromZonedTime } from 'date-fns-tz'
-import { startOfDay, subDays } from 'date-fns'
-
-const FALLBACK_TIMEZONE = 'Asia/Shanghai'
-
-/**
- * 解析生效时区：项目时区 > 用户时区 > 浏览器时区 > Asia/Shanghai
- */
-export function resolveTimezone(
-  projectTz?: string | null,
-  userTz?: string | null,
-): string {
-  const browserTz =
-    typeof Intl !== 'undefined'
-      ? Intl.DateTimeFormat().resolvedOptions().timeZone
-      : FALLBACK_TIMEZONE
-  return projectTz || userTz || browserTz || FALLBACK_TIMEZONE
-}
-
-/**
- * 时区感知的时间格式化。
- * @param date UTC Date 对象（来自 DB）
- * @param timezone IANA 时区，如 "Asia/Shanghai"
- * @param fmt date-fns 格式，默认 "yyyy-MM-dd HH:mm"
- */
-export function formatDate(
-  date: Date,
-  timezone: string,
-  fmt = 'yyyy-MM-dd HH:mm',
-): string {
-  try {
-    return formatInTimeZone(date, timezone, fmt)
-  } catch {
-    return formatInTimeZone(date, FALLBACK_TIMEZONE, fmt)
-  }
-}
-
-/**
- * 确定性时间戳格式化：固定时区 + date-fns 数字格式，不依赖运行环境 locale/时区。
- * SSR 与客户端输出字节级一致，专治 toLocaleString() 引发的 hydration mismatch。
- * @param date Date 对象或 ISO 字符串
- * @param fmt date-fns 格式，默认 "yyyy-MM-dd HH:mm"
- */
-export function formatTimestamp(
-  date: Date | string,
-  fmt = 'yyyy-MM-dd HH:mm',
-): string {
-  const d = typeof date === 'string' ? new Date(date) : date
-  if (Number.isNaN(d.getTime())) return '-'
-  return formatDate(d, FALLBACK_TIMEZONE, fmt)
-}
-
-/**
- * 相对时间（今天/昨天/具体日期），基于时区计算「今天的 0 点」。
- * @param now 当前时间（测试注入；生产用默认 new Date()）
- */
-export function formatRelative(
-  date: Date,
-  timezone: string,
-  now: Date = new Date(),
-): string {
-  try {
-    const todayStart = startOfDayInTimeZone(now, timezone)
-    const yesterdayStart = new Date(todayStart)
-    yesterdayStart.setDate(yesterdayStart.getDate() - 1)
-
-    const dateStart = startOfDayInTimeZone(date, timezone)
-
-    if (dateStart.getTime() === todayStart.getTime()) return '今天'
-    if (dateStart.getTime() === yesterdayStart.getTime()) return '昨天'
-    return formatInTimeZone(date, timezone, 'yyyy-MM-dd')
-  } catch {
-    return formatInTimeZone(date, FALLBACK_TIMEZONE, 'yyyy-MM-dd')
-  }
-}
-
-/**
- * 获取指定时区下某天的 0 点（UTC Date 对象）。
- */
-function startOfDayInTimeZone(date: Date, timezone: string): Date {
-  const zoned = toZonedTime(date, timezone)
-  const dayStart = startOfDay(zoned)
-  return fromZonedTime(dayStart, timezone)
-}
-
-/**
- * 对话历史日期分组标签（今天/昨天/本周/具体日期）。
- * @param date UTC Date 对象
- * @param timezone IANA 时区
- */
-export function formatChatDate(date: Date, timezone: string): string {
-  try {
-    const now = new Date()
-    const todayStart = startOfDayInTimeZone(now, timezone)
-    const yesterdayStart = subDays(todayStart, 1)
-    const weekStart = subDays(todayStart, 7)
-
-    const dateStart = startOfDayInTimeZone(date, timezone)
-
-    if (dateStart.getTime() === todayStart.getTime()) return '今天'
-    if (dateStart.getTime() === yesterdayStart.getTime()) return '昨天'
-    if (dateStart.getTime() >= weekStart.getTime()) return '本周'
-
-    const currentYear = Number(formatInTimeZone(now, timezone, 'yyyy'))
-    const dateYear = Number(formatInTimeZone(date, timezone, 'yyyy'))
-    if (dateYear === currentYear) {
-      return formatInTimeZone(date, timezone, 'M月d日')
-    }
-    return formatInTimeZone(date, timezone, 'yyyy年M月d日')
-  } catch {
-    return formatInTimeZone(date, FALLBACK_TIMEZONE, 'yyyy-MM-dd')
-  }
-}
-
-
-// ---- 本地日历工具（自 lib/date-utils.ts 并入：按本地时区做日历网格/日键计算，无时区转换） ----
-
-/** 解析 "yyyy-MM-dd" 前缀为本地 Date（避免 UTC 偏移） */
-export function parseDate(s: string): Date {
-  const datePart = s.slice(0, 10)
-  const [y, m, d] = datePart.split('-').map(Number)
-  return new Date(y, m - 1, d)
-}
-
-/** 本地时区 yyyy-MM-dd 日键（与 timezone 版 formatDate 区分） */
-export function formatDateLocal(d: Date): string {
-  const y = d.getFullYear()
-  const m = String(d.getMonth() + 1).padStart(2, '0')
-  const day = String(d.getDate()).padStart(2, '0')
-  return `${y}-${m}-${day}`
-}
-
-export function isSameDay(a: Date, b: Date): boolean {
-  return (
-    a.getFullYear() === b.getFullYear() &&
-    a.getMonth() === b.getMonth() &&
-    a.getDate() === b.getDate()
-  )
-}
-
-export function getMonthGrid(
-  year: number,
-  month: number,
-): Array<{ date: Date; inMonth: boolean }> {
-  const firstDay = new Date(year, month, 1)
-  const startOffset = firstDay.getDay() // 周日=0
-  const gridStart = new Date(year, month, 1 - startOffset)
-  const result: Array<{ date: Date; inMonth: boolean }> = []
-  for (let i = 0; i < 42; i++) {
-    const date = new Date(gridStart)
-    date.setDate(gridStart.getDate() + i)
-    result.push({ date, inMonth: date.getMonth() === month })
-  }
-  return result
-}
-
-export function getWeekGrid(
-  year: number,
-  month: number,
-  day: number,
-): Array<{ date: Date; inMonth: boolean }> {
-  const anchor = new Date(year, month, day)
-  const startOffset = anchor.getDay()
-  const gridStart = new Date(year, month, day - startOffset)
-  const result: Array<{ date: Date; inMonth: boolean }> = []
-  for (let i = 0; i < 7; i++) {
-    const date = new Date(gridStart)
-    date.setDate(gridStart.getDate() + i)
-    result.push({ date, inMonth: date.getMonth() === month })
-  }
-  return result
-}
-
-export function buildTimelineRange(
-  start: Date,
-  end: Date,
-  mode: 'month' | 'week',
-): Array<{ start: Date; label: string }> {
-  const ticks: Array<{ start: Date; label: string }> = []
-  const cursor = new Date(start.getFullYear(), start.getMonth(), 1)
-  const endDate = new Date(end.getFullYear(), end.getMonth(), 1)
-  while (cursor <= endDate) {
-    const label =
-      mode === 'month'
-        ? `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}`
-        : `${cursor.getFullYear()}-${String(cursor.getMonth() + 1).padStart(2, '0')}-${String(cursor.getDate()).padStart(2, '0')}`
-    ticks.push({ start: new Date(cursor), label })
-    if (mode === 'month') cursor.setMonth(cursor.getMonth() + 1)
-    else cursor.setDate(cursor.getDate() + 7)
-  }
-  return ticks
-}
-
-export function getRangeFromDates(dates: Date[]): { start: Date; end: Date } {
-  if (dates.length === 0) {
-    const now = new Date()
-    return {
-      start: new Date(now.getFullYear(), now.getMonth(), 1),
-      end: new Date(now.getFullYear(), now.getMonth() + 2, 0),
-    }
-  }
-  const times = dates.map((d) => d.getTime())
-  const min = new Date(Math.min(...times))
-  const max = new Date(Math.max(...times))
-  return {
-    start: new Date(min.getFullYear(), min.getMonth() - 1, 1),
-    end: new Date(max.getFullYear(), max.getMonth() + 1, 0),
-  }
-}

package/allblue-ui/src/lib/sanitize.ts

@@ -1,18 +0,0 @@
-import DOMPurify from 'isomorphic-dompurify'
-
-// HTML 清理：默认配置（html + svg + mathMl profile 均启用），
-// 覆盖富文本 diff、附件预览等 7 处 HTML 渲染场景。
-export function sanitize(html: string): string {
-  return DOMPurify.sanitize(html)
-}
-
-// SVG 清理：头像渲染（NotionAvatar）专用。
-// 显式复用默认配置——DOMPurify 默认 profile 已包含 SVG 滤镜元素
-// （<defs>/<filter>/<feMorphology>/<feFlood>/<feComposite>/<feMerge>/<feMergeNode>），
-// 同时清除 <script>/on*/javascript: 等 XSS 载荷。
-// 禁止改成 USE_PROFILES: { svg: true }——严格 SVG profile 会移除全部 fe* 滤镜元素，
-// 头像轮廓辉光（feMorphology+feFlood+feComposite+feMerge）会失效渲染白屏。
-// 结构完整性由 __tests__/security/xss-sanitize.test.ts 的双向断言锁定。
-export function sanitizeSvg(svg: string): string {
-  return DOMPurify.sanitize(svg)
-}

package/allblue-ui/src/lib/utils.ts

@@ -1 +0,0 @@
-export { cn } from "cn"