@allbluecn/admin-app 0.1.0

package/src/components/dependency/columns.tsx

@@ -0,0 +1,232 @@
+// 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 {
+  columnVisibilityFeature,
+  createPaginatedRowModel,
+  rowPaginationFeature,
+  tableFeatures,
+  type ColumnDef,
+} from "@tanstack/react-table"
+import { CheckCircle2, ExternalLink, Loader2, RefreshCw } from "lucide-react"
+import {
+  DEPENDENCY_CATEGORIES,
+  type ThirdPartyDependencyRow,
+  type VersionStatus,
+} from "@allbluecn/kernel"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip"
+import { cn } from "@/lib/utils"
+import { EditDependencyDialog } from "./edit-dialog"
+import { ChangelogDialog } from "./changelog-dialog"
+
+export const dependencyTableFeatures = tableFeatures({
+  columnVisibilityFeature,
+  rowPaginationFeature,
+  paginatedRowModel: createPaginatedRowModel(),
+});
+
+export const STATUS_META: Record<VersionStatus, { className: string }> = {
+  latest: { className: "bg-emerald-500/15 text-emerald-700 dark:text-emerald-400 border-emerald-500/30" },
+  patch: { className: "bg-sky-500/15 text-sky-700 dark:text-sky-400 border-sky-500/30" },
+  minor: { className: "bg-amber-500/15 text-amber-700 dark:text-amber-400 border-amber-500/30" },
+  major: { className: "bg-red-500/15 text-red-700 dark:text-red-400 border-red-500/30" },
+  unknown: { className: "bg-muted text-muted-foreground border-border" },
+}
+
+export function getDependencyStatusLabel(t: (k: string) => string, status: VersionStatus) {
+  return t(`dependency.statusLabel.${status}`)
+}
+
+export function getDependencyTimeAgo(t: (k: string, params?: Record<string, unknown>) => string, iso: string | null): string {
+  if (!iso) return "—"
+  const d = new Date(iso)
+  if (Number.isNaN(d.getTime())) return "—"
+  const diff = Date.now() - d.getTime()
+  const min = Math.floor(diff / 60000)
+  if (min < 1) return t('dependency.timeAgo.justNow')
+  if (min < 60) return t('dependency.timeAgo.minutes', { count: min })
+  const hr = Math.floor(min / 60)
+  if (hr < 24) return t('dependency.timeAgo.hours', { count: hr })
+  const day = Math.floor(hr / 24)
+  return t('dependency.timeAgo.days', { count: day })
+}
+
+interface ColumnOpts {
+  syncing: Set<string>
+  onSync: (name: string) => void
+  onSaved: () => void
+  t: (k: string, params?: Record<string, unknown>) => string
+}
+
+export function getDependencyColumns(opts: ColumnOpts): ColumnDef<typeof dependencyTableFeatures, ThirdPartyDependencyRow>[] {
+  const { syncing, onSync, onSaved, t } = opts
+  return [
+    {
+      accessorKey: "displayName",
+      header: t('dependency.table.columns.dependency'),
+      cell: ({ row }) => {
+        const r = row.original
+        return (
+          <div className="flex flex-col gap-0.5">
+            <div className="flex items-center gap-1.5">
+              <span className="font-medium">{r.displayName}</span>
+              {!r.isWatched && (
+                <Badge variant="outline" className="px-1 py-0 text-[10px] text-muted-foreground">
+                  {t('dependency.table.cell.untracked')}
+                </Badge>
+              )}
+              {r.priority === "high" && r.isWatched && (
+                <Badge variant="outline" className={cn("px-1 py-0 text-[10px]", PRIORITY_BADGE.high)}>
+                  {t('dependency.table.cell.highPriority')}
+                </Badge>
+              )}
+            </div>
+            <div className="flex items-center gap-2 text-xs text-muted-foreground">
+              <span>{r.name}</span>
+              {r.homepage && (
+                <a href={r.homepage} target="_blank" rel="noreferrer" className="hover:text-foreground">
+                  <ExternalLink className="size-3" />
+                </a>
+              )}
+              <a href={r.npmUrl} target="_blank" rel="noreferrer" className="hover:text-foreground">
+                <span className="font-mono text-[10px]">npm</span>
+              </a>
+            </div>
+          </div>
+        )
+      },
+    },
+    {
+      accessorKey: "description",
+      header: t('dependency.table.columns.description'),
+      cell: ({ row }) => {
+        const desc = row.original.description
+        if (!desc) return <span className="text-xs text-muted-foreground">—</span>
+        return (
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <span className="line-clamp-2 max-w-[280px] text-xs text-muted-foreground">
+                {desc}
+              </span>
+            </TooltipTrigger>
+            <TooltipContent className="max-w-sm">{desc}</TooltipContent>
+          </Tooltip>
+        )
+      },
+    },
+    {
+      accessorKey: "category",
+      header: t('dependency.table.columns.category'),
+      cell: ({ row }) => (
+        <Badge variant="outline" className="font-normal">
+          {DEPENDENCY_CATEGORIES.find((c) => c.value === row.original.category)?.label ?? row.original.category}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: "currentVersion",
+      header: t('dependency.table.columns.currentVersion'),
+      cell: ({ row }) => {
+        const r = row.original
+        if (!r.currentVersion) return <span className="text-xs text-muted-foreground">{t('dependency.table.cell.notInstalled')}</span>
+        if (r.usages.length > 1) {
+          return (
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <span className="cursor-help border-b border-dashed border-muted-foreground/50">
+                  {r.currentVersion}
+                </span>
+              </TooltipTrigger>
+              <TooltipContent>
+                <div className="space-y-0.5 text-xs">
+                  {r.usages.map((u) => (
+                    <div key={u.app}>
+                      <span className="font-mono">{u.app}</span>: {u.declaredRange}
+                    </div>
+                  ))}
+                </div>
+              </TooltipContent>
+            </Tooltip>
+          )
+        }
+        return <span className="font-mono text-xs">{r.currentVersion}</span>
+      },
+    },
+    {
+      accessorKey: "latestVersion",
+      header: t('dependency.table.columns.latestVersion'),
+      cell: ({ row }) =>
+        row.original.latestVersion ?? <span className="text-muted-foreground">—</span>,
+    },
+    {
+      id: "changelog",
+      header: t('dependency.table.columns.changelog'),
+      cell: ({ row }) => <ChangelogDialog row={row.original} />,
+    },
+    {
+      accessorKey: "versionStatus",
+      header: t('dependency.table.columns.status'),
+      cell: ({ row }) => {
+        const status = row.original.versionStatus
+        return (
+          <Badge variant="outline" className={cn("font-normal", STATUS_META[status].className)}>
+            {status === "latest" && <CheckCircle2 className="mr-1 size-3" />}
+            {getDependencyStatusLabel(t, status)}
+          </Badge>
+        )
+      },
+    },
+    {
+      accessorKey: "lastSyncAt",
+      header: t('dependency.table.columns.lastSync'),
+      cell: ({ row }) => (
+        <span className="text-xs text-muted-foreground">{getDependencyTimeAgo(t, row.original.lastSyncAt)}</span>
+      ),
+    },
+    {
+      id: "actions",
+      header: () => <div className="text-right">{t('dependency.table.columns.actions')}</div>,
+      cell: ({ row }) => {
+        const r = row.original
+        const isSyncing = syncing.has(r.name)
+        return (
+          <div className="flex items-center justify-end gap-1">
+            <Button
+              size="sm"
+              variant="ghost"
+              className="size-7 p-0"
+              onClick={() => onSync(r.name)}
+              disabled={isSyncing}
+              title={t('dependency.table.cell.syncTooltip')}
+            >
+              {isSyncing ? <Loader2 className="size-3.5 animate-spin" /> : <RefreshCw className="size-3.5" />}
+            </Button>
+            <EditDependencyDialog row={r} onSaved={onSaved} />
+          </div>
+        )
+      },
+    },
+  ]
+}
+
+const PRIORITY_BADGE: Record<string, string> = {
+  high: "border-red-500/30 bg-red-500/10 text-red-700 dark:text-red-400",
+  normal: "border-border bg-muted text-muted-foreground",
+  low: "border-border bg-transparent text-muted-foreground",
+}

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

@@ -0,0 +1,368 @@
+// 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 { useMemo, useState } from "react"
+import { useTranslation } from 'react-i18next'
+import {
+  flexRender,
+  useTable,
+  type PaginationState,
+} from "@tanstack/react-table"
+import { toast } from '@/components/ui/sonner'
+import { RefreshCw, Search, TriangleAlert, Loader2 } from "lucide-react"
+import {
+  DEPENDENCY_CATEGORIES,
+  type DependencyCategory,
+  type ThirdPartyDependencyRow,
+  type VersionStatus,
+} from "@allbluecn/kernel"
+import { syncAllDependenciesFn, syncDependencyFn } from "@/server/serverFns/dependency/sync"
+import { Badge } from "@/components/ui/badge"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "@/components/ui/select"
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table"
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination"
+import { cn } from "@/lib/utils"
+import { dependencyTableFeatures, getDependencyColumns } from "./columns"
+
+const PAGE_SIZE = 15
+
+const STATUS_FILTERS: Array<{ value: "all" | VersionStatus }> = [
+  { value: "all" },
+  { value: "latest" },
+  { value: "patch" },
+  { value: "minor" },
+  { value: "major" },
+  { value: "unknown" },
+]
+
+export function DependencyTable({
+  data,
+  onMutated,
+}: {
+  data: ThirdPartyDependencyRow[]
+  onMutated?: () => void
+}) {
+  const { t } = useTranslation('common')
+  const [search, setSearch] = useState("")
+  const [categoryFilter, setCategoryFilter] = useState<"all" | DependencyCategory>("all")
+  const [statusFilter, setStatusFilter] = useState<"all" | VersionStatus>("all")
+  const [viewFilter, setViewFilter] = useState<"watched" | "all">("watched")
+  const [syncing, setSyncing] = useState<Set<string>>(new Set())
+  const [syncingAll, setSyncingAll] = useState(false)
+  const [{ pageIndex }, setPagination] = useState<PaginationState>({ pageIndex: 0, pageSize: PAGE_SIZE })
+
+  // 外部筛选（搜索 + 分类 + 状态 + 视图），得到 filtered 后交给 TanStack Table 分页
+  const filtered = useMemo(() => {
+    const lower = search.trim().toLowerCase()
+    return data.filter((r) => {
+      if (viewFilter === "watched" && !r.isWatched) return false
+      if (categoryFilter !== "all" && r.category !== categoryFilter) return false
+      if (statusFilter !== "all" && r.versionStatus !== statusFilter) return false
+      if (
+        lower &&
+        !r.name.toLowerCase().includes(lower) &&
+        !r.displayName.toLowerCase().includes(lower)
+      )
+        return false
+      return true
+    })
+  }, [data, search, categoryFilter, statusFilter, viewFilter])
+
+  const columns = useMemo(
+    () => getDependencyColumns({ syncing, onSync: handleSync, onSaved: () => onMutated?.(), t }),
+    [syncing, onMutated, t],
+  )
+
+  const table = useTable({
+    features: dependencyTableFeatures,
+    data: filtered,
+    columns,
+    state: { pagination: { pageIndex, pageSize: PAGE_SIZE } },
+    onPaginationChange: setPagination,
+  })
+
+  // 筛选条件变化后，若当前页超出范围，回到第一页
+  const pageCount = table.getPageCount()
+  if (pageIndex >= pageCount && pageIndex > 0) {
+    setPagination({ pageIndex: 0, pageSize: PAGE_SIZE })
+  }
+
+  const watchedCount = data.filter((r) => r.isWatched).length
+  const outdatedCount = data.filter(
+    (r) => r.versionStatus === "major" || r.versionStatus === "minor",
+  ).length
+
+  async function handleSync(name: string) {
+    setSyncing((s) => new Set(s).add(name))
+    try {
+      const res = await syncDependencyFn({ data: { name } })
+      if (res.success) {
+        toast.success(t('dependency.table.toast.updated', { name, version: res.latestVersion ?? "?" }))
+        onMutated?.()
+      } else {
+        toast.error(t('dependency.table.toast.syncFailed', { name, error: res.error ?? t('dependency.table.toast.unknown') }))
+      }
+    } finally {
+      setSyncing((s) => {
+        const next = new Set(s)
+        next.delete(name)
+        return next
+      })
+    }
+  }
+
+  async function handleSyncAll() {
+    const names = filtered.map((r) => r.name)
+    if (names.length === 0) {
+      toast.info(t('dependency.table.toast.noSyncable'))
+      return
+    }
+    setSyncingAll(true)
+    try {
+      const results = await syncAllDependenciesFn({ data: { names } })
+      const ok = results.filter((r) => r.success)
+      const fail = results.filter((r) => !r.success)
+      if (ok.length) toast.success(t('dependency.table.toast.syncSuccess', { count: ok.length }))
+      if (fail.length)
+        toast.error(t('dependency.table.toast.syncFailedCount', { count: fail.length }), {
+          description: fail.map((f) => `${f.name}: ${f.error}`).slice(0, 3).join("\n"),
+        })
+      onMutated?.()
+    } finally {
+      setSyncingAll(false)
+    }
+  }
+
+  const currentPage = pageIndex + 1
+  const totalPages = pageCount
+
+  return (
+    <div className="space-y-4">
+      <div className="flex flex-wrap items-center gap-3">
+        <div className="flex items-center gap-2 text-sm text-muted-foreground">
+          <Badge variant="outline">{t('dependency.table.stats.watched', { watchedCount })}</Badge>
+          <Badge variant="outline" className="border-amber-500/30 bg-amber-500/10 text-amber-700 dark:text-amber-400">
+            <TriangleAlert className="mr-1 size-3" />
+            {t('dependency.table.stats.outdated', { outdatedCount })}
+          </Badge>
+        </div>
+        <div className="ml-auto flex items-center gap-2">
+          <Button onClick={handleSyncAll} disabled={syncingAll} variant="outline" size="sm">
+            {syncingAll ? <Loader2 className="mr-1 size-3.5 animate-spin" /> : <RefreshCw className="mr-1 size-3.5" />}
+            {t('dependency.table.syncAll', { count: filtered.length })}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-x-4 gap-y-1.5">
+        <div className="flex flex-wrap items-center gap-1.5">
+          <CategoryButton active={categoryFilter === "all"} onClick={() => setCategoryFilter("all")}>
+            {t('dependency.table.allCategory')}
+          </CategoryButton>
+          {DEPENDENCY_CATEGORIES.map((c) => (
+            <CategoryButton
+              key={c.value}
+              active={categoryFilter === c.value}
+              onClick={() => setCategoryFilter(c.value)}
+            >
+              {c.label}
+            </CategoryButton>
+          ))}
+        </div>
+        <div className="ml-auto flex flex-wrap items-center gap-1.5">
+          {STATUS_FILTERS.map((s) => (
+            <CategoryButton
+              key={s.value}
+              active={statusFilter === s.value}
+              onClick={() => setStatusFilter(s.value)}
+            >
+              {t(`dependency.table.statusFilter.${s.value}`)}
+            </CategoryButton>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex flex-wrap items-center gap-2">
+        <div className="relative">
+          <Search className="absolute left-2.5 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" />
+          <Input
+            value={search}
+            onChange={(e) => setSearch(e.target.value)}
+            placeholder={t('dependency.table.searchPlaceholder')}
+            className="h-9 w-56 pl-8"
+          />
+        </div>
+        <Select value={viewFilter} onValueChange={(v) => setViewFilter(v as "watched" | "all")}>
+          <SelectTrigger className="h-9 w-32" size="sm">
+            <SelectValue />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="watched">{t('dependency.table.viewFilter.watched')}</SelectItem>
+            <SelectItem value="all">{t('dependency.table.viewFilter.all')}</SelectItem>
+          </SelectContent>
+        </Select>
+        <span className="ml-auto text-xs text-muted-foreground">
+          {t('pagination.total', { total: filtered.length, page: currentPage, totalPages })}
+        </span>
+      </div>
+
+      <div className="rounded-lg border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} className={header.id === "actions" ? "text-right" : undefined}>
+                    {header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext())}
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow key={row.id}>
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id}>{flexRender(cell.column.columnDef.cell, cell.getContext())}</TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell colSpan={columns.length} className="py-10 text-center text-muted-foreground">
+                  {t('dependency.table.empty')}
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+
+      {totalPages > 1 && (
+        <Pagination className="mx-0 justify-end">
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious
+                text={t('pagination.prev')}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault()
+                  table.previousPage()
+                }}
+                aria-disabled={!table.getCanPreviousPage()}
+                className={cn(!table.getCanPreviousPage() && "pointer-events-none opacity-50")}
+              />
+            </PaginationItem>
+            {renderPageItems(currentPage, totalPages, (p) => table.setPageIndex(p - 1))}
+            <PaginationItem>
+              <PaginationNext
+                text={t('pagination.next')}
+                href="#"
+                onClick={(e) => {
+                  e.preventDefault()
+                  table.nextPage()
+                }}
+                aria-disabled={!table.getCanNextPage()}
+                className={cn(!table.getCanNextPage() && "pointer-events-none opacity-50")}
+              />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      )}
+    </div>
+  )
+}
+
+function CategoryButton({
+  active,
+  onClick,
+  children,
+}: {
+  active: boolean
+  onClick: () => void
+  children: React.ReactNode
+}) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn(
+        "rounded-full border px-3 py-1 text-xs font-medium transition-colors",
+        active
+          ? "border-primary bg-primary text-primary-foreground"
+          : "border-border bg-transparent text-muted-foreground hover:bg-accent hover:text-foreground",
+      )}
+    >
+      {children}
+    </button>
+  )
+}
+
+function renderPageItems(
+  current: number,
+  total: number,
+  setPageIndex: (zeroBased: number) => void,
+): React.ReactNode[] {
+  const items: React.ReactNode[] = []
+  const push = (p: number) =>
+    items.push(
+      <PaginationItem key={p}>
+        <PaginationLink
+          href="#"
+          isActive={p === current}
+          onClick={(e) => {
+            e.preventDefault()
+            setPageIndex(p - 1)
+          }}
+        >
+          {p}
+        </PaginationLink>
+      </PaginationItem>,
+    )
+
+  if (total <= 7) {
+    for (let i = 1; i <= total; i++) push(i)
+    return items
+  }
+
+  push(1)
+  if (current > 3) items.push(<PaginationEllipsis key="start-ellipsis" />)
+  const start = Math.max(2, current - 1)
+  const end = Math.min(total - 1, current + 1)
+  for (let i = start; i <= end; i++) push(i)
+  if (current < total - 2) items.push(<PaginationEllipsis key="end-ellipsis" />)
+  push(total)
+  return items
+}