@allbluecn/admin-app 0.1.0

package/src/components/monitoring/metrics-stats.tsx

@@ -0,0 +1,184 @@
+// 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 { useTranslation } from 'react-i18next'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { describeMetric } from '@/lib/monitoring-descriptions'
+import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
+import { ArrowDown, ArrowUp, Info } from 'lucide-react'
+
+interface MetricRow {
+  metric: string
+  path: string
+  count: number
+  avg: number
+  p50: number
+  p95: number
+  p99: number
+  min: number
+  max: number
+}
+
+interface MetricsStatsProps {
+  data: Record<
+    string,
+    { count: number; avg: number; p50: number; p95: number; p99: number; min: number; max: number }
+  >
+}
+
+interface BenchmarkCellProps {
+  value: number
+  metric: string
+}
+
+function BenchmarkCell({ value, metric }: BenchmarkCellProps) {
+  const path = metric.replace(/^request\./, '')
+  const benchmark = getBenchmark(path)
+  const comp = compareDuration(value, benchmark)
+
+  const isGood = value <= benchmark
+  const diff = Math.abs(value - benchmark)
+  const pct = Math.round((diff / benchmark) * 100)
+
+  return (
+    <span className="inline-flex items-center gap-1">
+      {value.toFixed(1)}ms
+      {isGood ? (
+        <span
+          className="inline-flex items-center gap-0.5 text-green-600 dark:text-green-400"
+          title={`${getBenchmarkSource(path)}: ${benchmark}ms P95`}
+        >
+          <ArrowUp className="size-3" />
+          <span className="text-[10px]">{pct}%</span>
+        </span>
+      ) : (
+        <span
+          className="inline-flex items-center gap-0.5 text-red-600 dark:text-red-400"
+          title={`${getBenchmarkSource(path)}: ${benchmark}ms P95`}
+        >
+          <ArrowDown className="size-3" strokeWidth={3} />
+          <span className="text-[10px] font-bold">{pct}%</span>
+        </span>
+      )}
+    </span>
+  )
+}
+
+function BenchmarkInfoTooltip({ t }: { t: (key: string) => string }) {
+  return (
+    <span
+      className="inline-flex items-center gap-1 text-xs text-muted-foreground"
+      title={t('metricsStats.benchmarkSource')}
+    >
+      <Info className="size-3" />
+      {t('metricsStats.compareBenchmark')}
+    </span>
+  )
+}
+
+export function MetricsStats({ data }: MetricsStatsProps) {
+  const { t } = useTranslation('common')
+
+  const columns: AdminColumnDef<MetricRow>[] = [
+    {
+      header: t('metricsStats.columns.metricName'),
+      accessorKey: 'metric',
+      meta: { style: { width: 160 } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <span className="font-mono text-xs block truncate">
+          {row.original.metric}
+        </span>
+      ),
+    },
+    {
+      header: t('metricsStats.columns.description'),
+      accessorKey: 'metric',
+      meta: { style: { width: 30 } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <span className="text-xs text-muted-foreground block truncate">
+          {describeMetric(row.original.metric)}
+        </span>
+      ),
+    },
+    {
+      header: t('metricsStats.columns.count'),
+      accessorKey: 'count',
+      meta: { style: { width: 18, textAlign: 'right' } },
+    },
+    {
+      header: () => (
+        <span className="flex items-center gap-1">
+          {t('metricsStats.columns.avg')}
+          <BenchmarkInfoTooltip t={t} />
+        </span>
+      ),
+      accessorKey: 'avg',
+      meta: { style: { width: 40, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <BenchmarkCell value={row.original.avg} metric={row.original.metric} />
+      ),
+    },
+    {
+      header: 'P50',
+      accessorKey: 'p50',
+      meta: { style: { width: 40, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <BenchmarkCell value={row.original.p50} metric={row.original.metric} />
+      ),
+    },
+    {
+      header: 'P95',
+      accessorKey: 'p95',
+      meta: { style: { width: 40, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <BenchmarkCell value={row.original.p95} metric={row.original.metric} />
+      ),
+    },
+    {
+      header: 'P99',
+      accessorKey: 'p99',
+      meta: { style: { width: 40, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <BenchmarkCell value={row.original.p99} metric={row.original.metric} />
+      ),
+    },
+    {
+      header: t('metricsStats.columns.min'),
+      accessorKey: 'min',
+      meta: { style: { width: 30, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <span>{row.original.min.toFixed(1)}ms</span>
+      ),
+    },
+    {
+      header: t('metricsStats.columns.max'),
+      accessorKey: 'max',
+      meta: { style: { width: 30, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: MetricRow } }) => (
+        <span>{row.original.max.toFixed(1)}ms</span>
+      ),
+    },
+  ]
+
+  const rows: MetricRow[] = Object.entries(data).map(([metric, stats]) => ({
+    metric,
+    path: metric.replace(/^request\./, ''),
+    ...stats,
+  }))
+
+  return <DataTable columns={columns} data={rows} />
+}

package/src/components/monitoring/request-log-table.tsx

@@ -0,0 +1,179 @@
+// 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 React from 'react'
+import { useTranslation } from 'react-i18next'
+import { DataTable, type AdminColumnDef } from '@/components/data-table/data-table'
+import { describePath } from '@/lib/monitoring-descriptions'
+import { getBenchmark, getBenchmarkSource, compareDuration } from '@/lib/monitoring-benchmarks'
+import { ArrowDown, ArrowUp, Info } from 'lucide-react'
+
+interface RequestLogEntry {
+  id: string
+  timestamp: string
+  method: string
+  path: string
+  status: number
+  duration: number
+  ip?: string | null
+  userAgent?: string | null
+}
+
+interface RequestLogTableProps {
+  logs: RequestLogEntry[]
+  actions?: React.ReactNode
+}
+
+const methodColors: Record<string, string> = {
+  GET: 'text-green-600 dark:text-green-400',
+  POST: 'text-blue-600 dark:text-blue-400',
+  PUT: 'text-yellow-600 dark:text-yellow-400',
+  DELETE: 'text-red-600 dark:text-red-400',
+  PATCH: 'text-purple-600 dark:text-purple-400',
+}
+
+function DurationCell({ path, duration }: { path: string; duration: number }) {
+  const benchmark = getBenchmark(path)
+  const comp = compareDuration(duration, benchmark)
+
+  const isGood = duration <= benchmark
+  const pct = Math.round((Math.abs(duration - benchmark) / benchmark) * 100)
+  const color =
+    duration > 1000 ? 'text-red-600' : duration > 300 ? 'text-yellow-600' : 'text-green-600'
+
+  return (
+    <span className="inline-flex items-center gap-1">
+      <span className={`text-xs font-medium ${color}`}>{duration}ms</span>
+      {isGood ? (
+        <span
+          className="inline-flex items-center gap-0.5 text-green-600 dark:text-green-400"
+          title={`${getBenchmarkSource(path)}: ${benchmark}ms P95`}
+        >
+          <ArrowUp className="size-3" />
+          <span className="text-[10px]">{pct}%</span>
+        </span>
+      ) : (
+        <span
+          className="inline-flex items-center gap-0.5 text-red-600 dark:text-red-400"
+          title={`${getBenchmarkSource(path)}: ${benchmark}ms P95`}
+        >
+          <ArrowDown className="size-3" strokeWidth={3} />
+          <span className="text-[10px] font-bold">{pct}%</span>
+        </span>
+      )}
+    </span>
+  )
+}
+
+export function RequestLogTable({ logs, actions }: RequestLogTableProps) {
+  const { t } = useTranslation('common')
+
+  const columns: AdminColumnDef<RequestLogEntry>[] = [
+    {
+      header: t('requestLogTable.columns.time'),
+      accessorKey: 'timestamp',
+      meta: { style: { width: 20, textAlign: 'center' } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <span className="text-xs">
+          {new Date(row.original.timestamp).toLocaleTimeString('zh-CN')}
+        </span>
+      ),
+    },
+    {
+      header: t('requestLogTable.columns.path'),
+      accessorKey: 'path',
+      meta: { style: { width: 160 } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <span className="font-mono text-xs block truncate">
+          {row.original.path}
+        </span>
+      ),
+    },
+    {
+      header: t('requestLogTable.columns.description'),
+      accessorKey: 'path',
+      meta: { style: { width: 28 } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <span className="text-xs text-muted-foreground block truncate">
+          {describePath(row.original.path)}
+        </span>
+      ),
+    },
+    {
+      header: 'User-Agent',
+      accessorKey: 'userAgent',
+      meta: { style: { width: 48 } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <span className="text-xs block truncate">
+          {row.original.userAgent || '-'}
+        </span>
+      ),
+    },
+    {
+      header: t('requestLogTable.columns.method'),
+      accessorKey: 'method',
+      meta: { style: { width: 14, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => {
+        const method = row.original.method
+        return (
+          <span className={`font-mono text-xs font-medium ${methodColors[method] || ''}`}>
+            {method}
+          </span>
+        )
+      },
+    },
+    {
+      header: t('requestLogTable.columns.status'),
+      accessorKey: 'status',
+      meta: { style: { width: 14, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => {
+        const status = row.original.status
+        const color =
+          status >= 500 ? 'text-red-600' : status >= 400 ? 'text-yellow-600' : 'text-green-600'
+        return <span className={`text-xs font-medium ${color}`}>{status}</span>
+      },
+    },
+    {
+      header: () => (
+        <span className="flex items-center gap-1">
+          {t('requestLogTable.columns.duration')}
+          <Info
+            className="size-3 text-muted-foreground"
+            data-tooltip={t('requestLogTable.compareBenchmark')}
+          />
+        </span>
+      ),
+      accessorKey: 'duration',
+      meta: { style: { width: 28, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <DurationCell path={row.original.path} duration={row.original.duration} />
+      ),
+    },
+    {
+      header: 'IP',
+      accessorKey: 'ip',
+      meta: { style: { width: 20, textAlign: 'right' } },
+      cell: ({ row }: { row: { original: RequestLogEntry } }) => (
+        <span className="font-mono text-xs text-muted-foreground">
+          {row.original.ip || '-'}
+        </span>
+      ),
+    },
+  ]
+
+  return <DataTable columns={columns} data={logs} actions={actions} />
+}

package/src/components/providers/theme-toggle.tsx

@@ -0,0 +1,59 @@
+// 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 { useTheme } from "next-themes";
+import { Moon, Sun } from "lucide-react";
+import { Button } from "@/components/ui/button";
+import { useEffect, useState } from "react";
+
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  if (!mounted) {
+    return (
+      <Button variant="ghost" size="icon" className="h-8 w-8 rounded-full">
+        <Sun className="h-4 w-4" />
+      </Button>
+    );
+  }
+
+  const toggleTheme = () => {
+    setTheme(theme === "dark" ? "light" : "dark");
+  };
+
+  return (
+    <Button
+      variant="ghost"
+      size="icon"
+      className="h-8 w-8 rounded-full"
+      onClick={toggleTheme}
+    >
+      {theme === "dark" ? (
+        <Moon className="size-5" />
+      ) : (
+        <Sun className="size-5" />
+      )}
+      <span className="sr-only">Toggle theme</span>
+    </Button>
+  );
+}

package/src/components/settings/avatar/avatar-config.ts

@@ -0,0 +1,46 @@
+// 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/>.
+
+export type { AvatarPart, AvatarConfig, ShapeType } from "@allbluecn/kernel"
+
+export const partMax: Record<import("@allbluecn/kernel").AvatarPart, number> = {
+  face: 15,
+  eyes: 13,
+  eyebrows: 15,
+  mouth: 19,
+  nose: 13,
+  glasses: 14,
+  hair: 58,
+  accessories: 14,
+  details: 13,
+  beard: 16,
+}
+
+export const presetBgColors = [
+  "#fff", "#fa541c", "#faad14", "#fadb14", "#a0d911",
+  "#52c41a", "#1890ff", "#2f54eb", "#722ed1", "#eb2f96",
+  "#bfbfbf", "#f0d5c0", "#debaba", "#babae1", "#e1bae1",
+  "#bae1e1", "#c0d5f0", "#d5f0c0", "#e0e0e0", "#f5c6c6",
+]
+
+export function getRandomConfig(): import("@allbluecn/kernel").AvatarConfig {
+  const config: Record<string, number> = {}
+  for (const key of Object.keys(partMax) as import("@allbluecn/kernel").AvatarPart[]) {
+    config[key] = Math.floor(Math.random() * (partMax[key] + 1))
+  }
+  return config as import("@allbluecn/kernel").AvatarConfig
+}

package/src/components/ui/alert-dialog.tsx

@@ -0,0 +1,216 @@
+// 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/>.
+
+"use client"
+
+import * as React from "react"
+import { AlertDialog as AlertDialogPrimitive } from "radix-ui"
+
+import { cn } from "@/lib/utils"
+import { Button } from "@/components/ui/button"
+
+function AlertDialog({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Root>) {
+  return <AlertDialogPrimitive.Root data-slot="alert-dialog" {...props} />
+}
+
+function AlertDialogTrigger({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Trigger>) {
+  return (
+    <AlertDialogPrimitive.Trigger data-slot="alert-dialog-trigger" {...props} />
+  )
+}
+
+function AlertDialogPortal({
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Portal>) {
+  return (
+    <AlertDialogPrimitive.Portal data-slot="alert-dialog-portal" {...props} />
+  )
+}
+
+function AlertDialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Overlay>) {
+  return (
+    <AlertDialogPrimitive.Overlay
+      data-slot="alert-dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogContent({
+  className,
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Content> & {
+  size?: "default" | "sm"
+}) {
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay />
+      <AlertDialogPrimitive.Content
+        data-slot="alert-dialog-content"
+        data-size={size}
+        className={cn(
+          "group/alert-dialog-content fixed top-1/2 left-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
+          className
+        )}
+        {...props}
+      />
+    </AlertDialogPortal>
+  )
+}
+
+function AlertDialogHeader({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-header"
+      className={cn(
+        "grid grid-rows-[auto_1fr] place-items-center gap-1.5 text-center has-data-[slot=alert-dialog-media]:grid-rows-[auto_auto_1fr] has-data-[slot=alert-dialog-media]:gap-x-4 sm:group-data-[size=default]/alert-dialog-content:place-items-start sm:group-data-[size=default]/alert-dialog-content:text-left sm:group-data-[size=default]/alert-dialog-content:has-data-[slot=alert-dialog-media]:grid-rows-[auto_1fr]",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogFooter({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-footer"
+      className={cn(
+        "-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 group-data-[size=sm]/alert-dialog-content:grid group-data-[size=sm]/alert-dialog-content:grid-cols-2 sm:flex-row sm:justify-end",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogMedia({
+  className,
+  ...props
+}: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-dialog-media"
+      className={cn(
+        "mb-2 inline-flex size-10 items-center justify-center rounded-md bg-muted sm:group-data-[size=default]/alert-dialog-content:row-span-2 *:[svg:not([class*='size-'])]:size-6",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Title>) {
+  return (
+    <AlertDialogPrimitive.Title
+      data-slot="alert-dialog-title"
+      className={cn(
+        "text-base font-medium sm:group-data-[size=default]/alert-dialog-content:group-has-data-[slot=alert-dialog-media]/alert-dialog-content:col-start-2",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Description>) {
+  return (
+    <AlertDialogPrimitive.Description
+      data-slot="alert-dialog-description"
+      className={cn(
+        "text-sm text-balance text-muted-foreground md:text-pretty *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground",
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+function AlertDialogAction({
+  className,
+  variant = "default",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Action> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Action
+        data-slot="alert-dialog-action"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+function AlertDialogCancel({
+  className,
+  variant = "outline",
+  size = "default",
+  ...props
+}: React.ComponentProps<typeof AlertDialogPrimitive.Cancel> &
+  Pick<React.ComponentProps<typeof Button>, "variant" | "size">) {
+  return (
+    <Button variant={variant} size={size} asChild>
+      <AlertDialogPrimitive.Cancel
+        data-slot="alert-dialog-cancel"
+        className={cn(className)}
+        {...props}
+      />
+    </Button>
+  )
+}
+
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogMedia,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+}