@allbluecn/admin-app 0.1.0

package/src/components/component/component-table.tsx

@@ -0,0 +1,153 @@
+// 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 { Edit, Trash2 } from 'lucide-react'
+import { useTranslation } from 'react-i18next'
+import { Badge } from '@/components/ui/badge'
+import { Button } from '@/components/ui/button'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from '@/components/ui/table'
+import { cn } from '@/lib/utils'
+
+export interface ComponentItem {
+  id: string
+  name: string
+  description: string | null
+  type: string
+  category: string | null
+  subCategory: string | null
+  path: string | null
+  defaultWidth: number
+  defaultHeight: number
+  prototypeKey: string | null
+  config: unknown
+  source: string
+  sourceId: string | null
+  isHidden: boolean
+  sortOrder: number
+  version: number
+  tags: string[]
+  defaultProps: Record<string, unknown> | null
+  defaultStyle: Record<string, unknown> | null
+  createdAt: Date
+  updatedAt: Date
+}
+
+export function ComponentTable({
+  items,
+  onEdit,
+  onDelete,
+}: {
+  items: ComponentItem[]
+  onEdit: (item: ComponentItem) => void
+  onDelete: (item: ComponentItem) => void
+}) {
+  const { t } = useTranslation('common')
+  const categoryLabel = (k: string) => {
+    const map: Record<string, string> = { base: t('component.categories.base'), block: t('component.categories.block'), template: t('component.categories.template') }
+    return map[k] ?? k
+  }
+
+  if (items.length === 0) {
+    return (
+      <div className="flex h-40 items-center justify-center rounded-lg border border-dashed">
+        <p className="text-sm text-muted-foreground">{t('component.table.empty')}</p>
+      </div>
+    )
+  }
+
+  return (
+    <div className="rounded-lg border">
+      <Table>
+        <TableHeader>
+          <TableRow>
+            <TableHead className="w-[28%]">{t('component.table.columns.component')}</TableHead>
+            <TableHead>{t('component.table.columns.category')}</TableHead>
+            <TableHead>{t('component.table.columns.type')}</TableHead>
+            <TableHead>{t('component.table.columns.tags')}</TableHead>
+            <TableHead>{t('component.table.columns.source')}</TableHead>
+            <TableHead>{t('component.table.columns.status')}</TableHead>
+            <TableHead className="text-right">{t('component.table.columns.actions')}</TableHead>
+          </TableRow>
+        </TableHeader>
+        <TableBody>
+          {items.map((item) => {
+            return (
+              <TableRow key={item.id}>
+                <TableCell>
+                  <div className="min-w-0 py-1">
+                    <div className="truncate text-sm font-medium">{item.name}</div>
+                    {item.description && (
+                      <div className="truncate text-xs text-muted-foreground">{item.description}</div>
+                    )}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <span className="text-sm">{categoryLabel(item.category ?? '') ?? item.category ?? '-'}</span>
+                </TableCell>
+                <TableCell>
+                  <Badge variant="outline" className="font-mono text-[10px]">{item.type}</Badge>
+                </TableCell>
+                <TableCell>
+                  <div className="flex flex-wrap gap-1">
+                    {item.tags.length > 0 ? (
+                      item.tags.map((tag) => (
+                        <Badge key={tag} variant="secondary" className="text-[10px]">{tag}</Badge>
+                      ))
+                    ) : (
+                      <span className="text-xs text-muted-foreground/50">-</span>
+                    )}
+                  </div>
+                </TableCell>
+                <TableCell>
+                  <span className="text-xs text-muted-foreground">{item.source}</span>
+                </TableCell>
+                <TableCell>
+                  <span className={cn('text-xs', item.isHidden ? 'text-muted-foreground' : 'text-foreground')}>
+                    {item.isHidden ? t('component.table.status.hidden') : t('component.table.status.visible')}
+                  </span>
+                </TableCell>
+                <TableCell className="text-right">
+                  <div className="flex items-center justify-end gap-1">
+                    <Button variant="ghost" size="icon-sm" onClick={() => onEdit(item)} aria-label={t('common.edit')}>
+                      <Edit className="size-4" />
+                    </Button>
+                    <Button
+                      variant="ghost"
+                      size="icon-sm"
+                      onClick={() => onDelete(item)}
+                      className="text-destructive hover:bg-destructive/10"
+                      aria-label={t('common.delete')}
+                    >
+                      <Trash2 className="size-4" />
+                    </Button>
+                  </div>
+                </TableCell>
+              </TableRow>
+            )
+          })}
+        </TableBody>
+      </Table>
+    </div>
+  )
+}

package/src/components/data-table/data-table-pagination.tsx

@@ -0,0 +1,114 @@
+// 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 "@/components/ui/pagination";
+import { useTranslation } from 'react-i18next'
+
+interface DataTablePaginationProps {
+  page: number;
+  totalPages: number;
+  total: number;
+  onPageChange: (page: number) => void;
+}
+
+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,
+}: DataTablePaginationProps) {
+  const { t } = useTranslation('common')
+  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">
+        {t('pagination.total', { total, page, totalPages })}
+      </div>
+      <Pagination className="justify-end">
+        <PaginationContent>
+          <PaginationItem>
+            <PaginationPrevious
+              text={t('pagination.prev')}
+              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={t('pagination.next')}
+              onClick={() => page < totalPages && onPageChange(page + 1)}
+              className={page >= totalPages ? "pointer-events-none opacity-50" : "cursor-pointer"}
+            />
+          </PaginationItem>
+        </PaginationContent>
+      </Pagination>
+    </div>
+  );
+}

package/src/components/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 '@/components/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/src/components/data-table/table-detail-layout.tsx

@@ -0,0 +1,99 @@
+// 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 { useTranslation } from 'react-i18next'
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+import { ArrowLeftIcon } from "lucide-react";
+
+interface TableDetailLayoutProps {
+  backHref: string;
+  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 { t } = useTranslation('common')
+  const navigate = useNavigate();
+  const resolvedBackLabel = backLabel ?? t('common.backToList')
+
+  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" />
+          {resolvedBackLabel}
+        </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/src/components/dependency/changelog-dialog.tsx

@@ -0,0 +1,108 @@
+// 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 { useState } from "react"
+import { useTranslation } from 'react-i18next'
+import ReactMarkdown from "react-markdown"
+import remarkGfm from "remark-gfm"
+import { ExternalLink, FileText } from "lucide-react"
+import type { ThirdPartyDependencyRow } from "@allbluecn/kernel"
+import { Button } from "@/components/ui/button"
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog"
+
+export function ChangelogDialog({ row }: { row: ThirdPartyDependencyRow }) {
+  const [open, setOpen] = useState(false)
+  const { t } = useTranslation('common')
+  const hasChangelog = !!row.latestChangelog
+
+  if (!hasChangelog) {
+    return <span className="text-xs text-muted-foreground">—</span>
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTrigger asChild>
+        <Button size="sm" variant="ghost" className="h-7 gap-1 px-2" title={t('dependency.table.cell.viewChangelog')}>
+          <FileText className="size-3.5" />
+          <span className="text-xs">{t('dependency.table.cell.changelogBtn')}</span>
+        </Button>
+      </DialogTrigger>
+      <DialogContent className="max-h-[85vh] w-200 max-w-4xl overflow-hidden p-0">
+        <DialogHeader className="border-b px-5 py-3">
+          <div className="flex items-center justify-between gap-2 pr-6">
+            <DialogTitle className="text-base">
+              {row.displayName}
+              <span className="ml-2 font-mono text-sm font-normal text-muted-foreground">
+                v{row.latestVersion}
+              </span>
+            </DialogTitle>
+            <a
+              href={`https://github.com/search?q=${encodeURIComponent(row.name)}&type=repositories`}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-xs text-muted-foreground hover:text-foreground"
+            >
+              GitHub <ExternalLink className="size-3" />
+            </a>
+          </div>
+        </DialogHeader>
+        <div className="max-h-[65vh] overflow-y-auto px-5 py-3">
+          <div className="text-sm">
+            <ReactMarkdown
+              remarkPlugins={[remarkGfm]}
+              components={{
+                h1: ({ children }) => <h1 className="mb-2 mt-3 text-base font-semibold">{children}</h1>,
+                h2: ({ children }) => <h2 className="mb-2 mt-3 text-sm font-semibold">{children}</h2>,
+                h3: ({ children }) => <h3 className="mb-1 mt-2 text-sm font-semibold">{children}</h3>,
+                p: ({ children }) => <p className="my-1.5 leading-relaxed">{children}</p>,
+                ul: ({ children }) => <ul className="my-1.5 list-disc space-y-0.5 pl-5">{children}</ul>,
+                ol: ({ children }) => <ol className="my-1.5 list-decimal space-y-0.5 pl-5">{children}</ol>,
+                li: ({ children }) => <li className="leading-relaxed">{children}</li>,
+                a: ({ children, href }) => (
+                  <a href={href} target="_blank" rel="noreferrer" className="text-blue-500 underline underline-offset-2">
+                    {children}
+                  </a>
+                ),
+                strong: ({ children }) => <strong className="font-semibold">{children}</strong>,
+                code: ({ children }) => (
+                  <code className="rounded bg-muted px-1 py-0.5 font-mono text-xs">{children}</code>
+                ),
+                pre: ({ children }) => (
+                  <pre className="my-2 overflow-x-auto rounded bg-muted p-2 text-xs">{children}</pre>
+                ),
+                hr: () => <hr className="my-3 border-border" />,
+                blockquote: ({ children }) => (
+                  <blockquote className="my-2 border-l-2 border-border pl-3 text-muted-foreground">
+                    {children}
+                  </blockquote>
+                ),
+              }}
+            >
+              {row.latestChangelog ?? ""}
+            </ReactMarkdown>
+          </div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  )
+}