@allbluecn/admin-app 0.1.0

package/src/routes/_nav/sso/route.lazy.tsx

@@ -0,0 +1,145 @@
+// 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 { createLazyFileRoute } from '@tanstack/react-router'
+import { useServerFn } from '@tanstack/react-start'
+import { useTranslation } from 'react-i18next'
+import { toast } from 'sonner'
+import type React from 'react'
+import { deleteSsoProviderFn, toggleSsoProviderFn } from '@/server/serverFns/sso-config'
+import { Badge } from '@/components/ui/badge'
+
+export const Route = createLazyFileRoute('/_nav/sso')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  component: SsoConfigPage,
+})
+
+function SsoConfigPage(): React.ReactElement {
+  const { t } = useTranslation('enterprise')
+  const { items, total } = Route.useLoaderData() as {
+    items: Array<{
+      id: string
+      workspaceId: string
+      type: string
+      name: string
+      config: Record<string, unknown>
+      domain: string | null
+      enabled: boolean
+      createdAt: string
+      updatedAt: string
+      _count: { mappings: number }
+    }>
+    total: number
+  }
+
+  const toggleFn = useServerFn(toggleSsoProviderFn)
+  const deleteFn = useServerFn(deleteSsoProviderFn)
+
+  const handleToggle = async (provider: typeof items[0]) => {
+    await toggleFn({ data: { providerId: provider.id, enabled: !provider.enabled } })
+    const key = !provider.enabled ? 'enabled' : 'disabled'
+    toast.success(t('sso.toast.' + key, { name: provider.name }))
+  }
+
+  const handleDelete = async (provider: typeof items[0]) => {
+    await deleteFn({ data: { providerId: provider.id } })
+    toast.success(t('sso.toast.deleted', { name: provider.name }))
+  }
+
+  const TYPE_LABELS: Record<string, string> = {
+    google: 'Google Workspace',
+    oidc: 'OIDC',
+    saml: 'SAML',
+    okta: 'Okta',
+    azure: 'Azure AD',
+  }
+
+  return (
+    <div className="space-y-4">
+      <div>
+        <h1 className="text-2xl font-bold">{t('sso.title')}</h1>
+        <p className="text-sm text-muted-foreground mt-1">{t('sso.subtitle', { count: total })}</p>
+      </div>
+
+      {items.length === 0 ? (
+        <div className="rounded-lg border border-border p-8 text-center text-muted-foreground">
+          {t('sso.empty')}
+        </div>
+      ) : (
+        <div className="rounded-lg border border-border overflow-hidden">
+          <table className="w-full text-sm">
+            <thead>
+              <tr className="border-b border-border bg-muted/50">
+                <th className="p-3 text-left font-medium">{t('sso.table.name')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.type')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.domain')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.workspace')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.mappings')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.status')}</th>
+                <th className="p-3 text-left font-medium">{t('sso.table.actions')}</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.map((provider) => (
+                <tr key={provider.id} className="border-b border-border last:border-0">
+                  <td className="p-3 font-medium">{provider.name}</td>
+                  <td className="p-3">
+                    <Badge variant="outline">{TYPE_LABELS[provider.type] ?? provider.type}</Badge>
+                  </td>
+                  <td className="p-3">{provider.domain || '—'}</td>
+                  <td className="p-3">{provider.workspaceId.slice(0, 8)}</td>
+                  <td className="p-3">{provider._count?.mappings ?? '—'}</td>
+                  <td className="p-3">
+                    <span
+                      className={`inline-flex rounded-md px-2 py-0.5 text-xs ${
+                        provider.enabled
+                          ? 'bg-green-500/10 text-green-600 dark:text-green-400'
+                          : 'bg-muted text-muted-foreground'
+                      }`}
+                    >
+                      {provider.enabled ? t('sso.status.enabled') : t('sso.status.disabled')}
+                    </span>
+                  </td>
+                  <td className="p-3 flex items-center gap-2">
+                    <button
+                      type="button"
+                      className="text-primary hover:underline"
+                      onClick={() => handleToggle(provider)}
+                    >
+                      {provider.enabled ? t('sso.action.disable') : t('sso.action.enable')}
+                    </button>
+                    <button
+                      type="button"
+                      className="text-destructive hover:underline"
+                      onClick={() => handleDelete(provider)}
+                    >
+                      {t('sso.action.delete')}
+                    </button>
+                  </td>
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/routes/_nav/sso/route.tsx

@@ -0,0 +1,25 @@
+// 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 { createFileRoute } from '@tanstack/react-router'
+import { listSsoProvidersFn } from '@/server/serverFns/sso-config'
+
+export const Route = createFileRoute('/_nav/sso')({
+  loader: async () => {
+    return listSsoProvidersFn({ data: {} })
+  },
+})

package/src/routes/_nav/users/$userId/route.lazy.tsx

@@ -0,0 +1,432 @@
+// 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 { createLazyFileRoute } from '@tanstack/react-router'
+import { useState, useTransition, useMemo } from 'react'
+import { I18nextProvider } from 'react-i18next'
+import { useTranslation } from 'react-i18next'
+import { createServerI18n } from '@/lib/i18n/server'
+import { formatTimestamp } from '@allbluecn/web-app/lib/datetime'
+import { getUserDetailFn } from '@/server/serverFns/user/detail'
+import { updateUserRoleFn } from '@/server/serverFns/user/update-role'
+import { updateUserStatusFn } from '@/server/serverFns/user/update-status'
+import { resetUserPasswordFn } from '@/server/serverFns/user/reset-password'
+import { deleteUserFn } from '@/server/serverFns/user/delete'
+import { TableDetailLayout } from '@/components/data-table/table-detail-layout'
+import { Badge } from '@/components/ui/badge'
+import { Separator } from '@/components/ui/separator'
+import { Button } from '@/components/ui/button'
+import { UserAvatar } from '@allbluecn/web-app/user-avatar'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from '@/components/ui/alert-dialog'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@/components/ui/select'
+import { Input } from '@/components/ui/input'
+import { Label } from '@/components/ui/label'
+import {
+  AlertCircle,
+  FileTextIcon,
+  Package2Icon,
+  ShoppingBagIcon,
+  ShieldCheckIcon,
+} from 'lucide-react'
+import { toast } from '@/components/ui/sonner'
+import { parseUserAgent, formatParsedUA } from '@allbluecn/kernel'
+import type { AvatarConfig } from '@allbluecn/kernel'
+import SettingsActivityLog, {
+  type ActivityLogEntry,
+} from '@/components/user/settings-activity-log'
+import SettingsProfile from '@/components/user/settings-profile'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from '@/components/ui/card'
+
+export const Route = createLazyFileRoute('/_nav/users/$userId')({
+  pendingComponent: () => (
+    <div className="flex h-64 items-center justify-center">
+      <div className="size-8 animate-spin rounded-full border-2 border-primary border-t-transparent" />
+    </div>
+  ),
+  errorComponent: AdminUserErrorBoundary,
+  component: UserDetailPage,
+})
+
+function AdminUserErrorBoundary({ error, reset }: { error: Error; reset: () => void }) {
+  const i18n = useMemo(() => createServerI18n('zh'), [])
+  return (
+    <I18nextProvider i18n={i18n}>
+      <AdminUserErrorBoundaryInner error={error} reset={reset} />
+    </I18nextProvider>
+  )
+}
+
+function AdminUserErrorBoundaryInner({ error, reset }: { error: Error; reset: () => void }) {
+  const { t } = useTranslation('admin-users')
+  return (
+    <div className="flex flex-col items-center justify-center h-64 gap-3">
+      <AlertCircle className="size-8 text-destructive" />
+      <p className="text-sm text-muted-foreground">{t('detail.errorLoading')}: {error.message}</p>
+      <Button variant="outline" size="sm" onClick={reset}>{t('detail.retry')}</Button>
+    </div>
+  )
+}
+
+function UserDetailPage() {
+  const { t } = useTranslation('admin-users')
+  const statusBadgeVariant: Record<string, 'default' | 'secondary' | 'destructive' | 'outline'> = {
+    ACTIVE: 'default',
+    INACTIVE: 'secondary',
+    BANNED: 'destructive',
+  }
+  const data = Route.useLoaderData() as any
+  const notFound = data.notFound
+  const [user, setUser] = useState(data.user)
+  const [isPending, startTransition] = useTransition()
+
+  if (notFound) {
+    return (
+      <div className="flex h-64 items-center justify-center">
+        <p className="text-muted-foreground">{t('detail.userNotFound')}</p>
+      </div>
+    )
+  }
+
+  if (!user) return null
+
+  const [roleDialog, setRoleDialog] = useState({ open: false, value: '' })
+  const [statusDialog, setStatusDialog] = useState({ open: false, value: '' })
+  const [passwordDialog, setPasswordDialog] = useState({ open: false, value: '' })
+  const [deleteDialog, setDeleteDialog] = useState({ open: false, confirmName: '' })
+
+  const refetchUser = () => startTransition(async () => {
+    const updated = await getUserDetailFn({ data: { userId: user.id } })
+    if (updated) setUser(updated)
+  })
+
+  const getRoleLabel = (role: string) => t(`role.${role}`)
+  const getStatusLabel = (status: string) => t(`status.${status}`)
+
+  return (
+    <>
+      <TableDetailLayout
+        backHref="/users"
+        title={user.username}
+        subtitle={user.email}
+        avatar={
+          <UserAvatar
+            avatarConfig={user.avatarConfig as AvatarConfig | null}
+            bgShape={user.bgShape as 'square' | 'rounded' | null}
+            bgColor={user.bgColor}
+            name={user.username}
+            size="lg"
+          />
+        }
+        badges={
+          <>
+            <Badge>{getRoleLabel(user.role) || user.role}</Badge>
+            <Badge variant={statusBadgeVariant[user.status] || 'outline'}>
+              {getStatusLabel(user.status) || user.status}
+            </Badge>
+          </>
+        }
+      >
+        <Separator />
+
+        <div className="grid grid-cols-1 gap-6 lg:grid-cols-2">
+          {/* 左列：用户详情 + 账号信息 + 关联统计 */}
+          <div className="space-y-6">
+            <SettingsProfile
+              readOnly
+              profile={{ name: user.username, email: user.email }}
+              title={t('detail.profile.title')}
+              description={t('detail.profile.description')}
+              actions={
+                <>
+                  <Button variant="outline" size="sm" onClick={() => setRoleDialog({ open: true, value: user.role })}>
+                    {t('action.changeRole')}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setStatusDialog({ open: true, value: user.status })}>
+                    {t('action.changeStatus')}
+                  </Button>
+                  <Button variant="outline" size="sm" onClick={() => setPasswordDialog({ open: true, value: '' })}>
+                    {t('action.resetPassword')}
+                  </Button>
+                  <Button variant="destructive" size="sm" onClick={() => setDeleteDialog({ open: true, confirmName: '' })}>
+                    {t('common:button.delete')}
+                  </Button>
+                </>
+              }
+            />
+
+            <Card className="shadow-xs">
+              <CardHeader>
+                <CardTitle>{t('detail.account.title')}</CardTitle>
+                <CardDescription>{t('detail.account.description')}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="space-y-2 text-sm">
+                  <div className="flex justify-between rounded-lg border p-3">
+                    <span className="text-muted-foreground">{t('detail.account.createdAt')}</span>
+                    <span>{formatTimestamp(user.createdAt)}</span>
+                  </div>
+                  <div className="flex justify-between rounded-lg border p-3">
+                    <span className="text-muted-foreground">{t('detail.account.updatedAt')}</span>
+                    <span>{formatTimestamp(user.updatedAt)}</span>
+                  </div>
+                  <div className="flex justify-between rounded-lg border p-3">
+                    <span className="text-muted-foreground">{t('detail.account.lastLogin')}</span>
+                    <span>{user.lastLoginAt ? formatTimestamp(user.lastLoginAt) : t('detail.account.neverLoggedIn')}</span>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+
+            <Card className="shadow-xs">
+              <CardHeader>
+                <CardTitle>{t('detail.stats.title')}</CardTitle>
+                <CardDescription>{t('detail.stats.description')}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <div className="grid grid-cols-2 gap-3">
+                  <div className="flex items-center gap-2 rounded-lg border p-3">
+                    <FileTextIcon className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-lg font-semibold">{user._count.prds}</div>
+                      <div className="text-xs text-muted-foreground">{t('detail.stats.prds')}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 rounded-lg border p-3">
+                    <Package2Icon className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-lg font-semibold">{user._count.anyhubApps}</div>
+                      <div className="text-xs text-muted-foreground">{t('detail.stats.apps')}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 rounded-lg border p-3">
+                    <ShoppingBagIcon className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-lg font-semibold">{user._count.anyhubMarketApps}</div>
+                      <div className="text-xs text-muted-foreground">{t('detail.stats.marketApps')}</div>
+                    </div>
+                  </div>
+                  <div className="flex items-center gap-2 rounded-lg border p-3">
+                    <ShieldCheckIcon className="h-4 w-4 text-muted-foreground" />
+                    <div>
+                      <div className="text-lg font-semibold">{user._count.reviews}</div>
+                      <div className="text-xs text-muted-foreground">{t('detail.stats.reviews')}</div>
+                    </div>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+
+          {/* 右列：最近登录（下方空白） */}
+          <div>
+            <SettingsActivityLog
+              entries={user.loginLogs.map((log: any): ActivityLogEntry => ({
+                id: log.id,
+                action: 'login',
+                type: 'login',
+                description: log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure'),
+                ipAddress: log.ip || '',
+                location: log.location || '',
+                device: formatParsedUA(parseUserAgent(log.userAgent)),
+                timestamp: new Date(log.createdAt),
+                status: log.success ? 'success' : 'failed',
+                reason: log.success ? undefined : log.message || t('detail.loginLogs.unknownReason'),
+              }))}
+              title={t('detail.loginLogs.title')}
+              description={t('detail.loginLogs.description')}
+              onExport={async (filters) => {
+                const rows = user.loginLogs
+                  .filter((log: any) => {
+                    if (filters.type && filters.type !== 'login') return false
+                    if (
+                      filters.search &&
+                      !`${log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure')} ${log.ip || ''}`
+                        .toLowerCase()
+                        .includes(filters.search.toLowerCase())
+                    )
+                      return false
+                    return true
+                  })
+                  .map((log: any) => {
+                    const parsed = parseUserAgent(log.userAgent)
+                    return [
+                      new Date(log.createdAt).toISOString(),
+                      log.success ? t('detail.loginLogs.success') : t('detail.loginLogs.failure'),
+                      log.success ? '' : log.message || t('detail.loginLogs.unknownReason'),
+                      log.ip || '',
+                      log.location || '',
+                      parsed.browser,
+                      parsed.os,
+                      parsed.device,
+                    ]
+                      .map((v: string) => `"${(v || '').replace(/"/g, '""')}"`)
+                      .join(',')
+                  })
+                const csv = [t('detail.loginLogs.csvHeader'), ...rows].join('\n')
+                const blob = new Blob([csv], { type: 'text/csv;charset=utf-8;' })
+                const url = URL.createObjectURL(blob)
+                const a = document.createElement('a')
+                a.href = url
+                a.download = `user-${user.username}-login-logs.csv`
+                a.click()
+                URL.revokeObjectURL(url)
+                toast.success(t('detail.loginLogs.exportSuccess'))
+              }}
+            />
+          </div>
+        </div>
+      </TableDetailLayout>
+
+      <Dialog open={roleDialog.open} onOpenChange={(o) => setRoleDialog((d) => ({ ...d, open: o }))}>
+        <DialogContent className="sm:max-w-100">
+          <DialogHeader>
+            <DialogTitle>{t('dialog.role.title', { username: user.username })}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Label>{t('dialog.role.newRole')}</Label>
+            <Select value={roleDialog.value} onValueChange={(v) => setRoleDialog((d) => ({ ...d, value: v }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="USER">{t('role.user')}</SelectItem>
+                <SelectItem value="ADMIN">{t('role.admin')}</SelectItem>
+                <SelectItem value="SUPER_ADMIN">{t('role.superAdmin')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setRoleDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
+            <Button disabled={isPending} onClick={() => startTransition(async () => {
+              try {
+                await updateUserRoleFn({ data: { userId: user.id, role: roleDialog.value as 'USER' | 'ADMIN' | 'SUPER_ADMIN' } })
+                toast.success(t('toast.roleUpdated'))
+                setRoleDialog((d) => ({ ...d, open: false }))
+                await refetchUser()
+              } catch { toast.error(t('toast.updateFailed')) }
+            })}>{t('common:button.confirm')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={statusDialog.open} onOpenChange={(o) => setStatusDialog((d) => ({ ...d, open: o }))}>
+        <DialogContent className="sm:max-w-100">
+          <DialogHeader>
+            <DialogTitle>{t('dialog.status.title', { username: user.username })}</DialogTitle>
+          </DialogHeader>
+          <div className="py-4">
+            <Label>{t('dialog.status.newStatus')}</Label>
+            <Select value={statusDialog.value} onValueChange={(v) => setStatusDialog((d) => ({ ...d, value: v }))}>
+              <SelectTrigger><SelectValue /></SelectTrigger>
+              <SelectContent>
+                <SelectItem value="ACTIVE">{t('status.active')}</SelectItem>
+                <SelectItem value="INACTIVE">{t('status.inactive')}</SelectItem>
+                <SelectItem value="BANNED">{t('status.banned')}</SelectItem>
+              </SelectContent>
+            </Select>
+          </div>
+          <DialogFooter>
+            <Button variant="outline" onClick={() => setStatusDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
+            <Button disabled={isPending} onClick={() => startTransition(async () => {
+              try {
+                await updateUserStatusFn({ data: { userId: user.id, status: statusDialog.value as 'ACTIVE' | 'INACTIVE' | 'BANNED' } })
+                toast.success(t('toast.statusUpdated'))
+                setStatusDialog((d) => ({ ...d, open: false }))
+                await refetchUser()
+              } catch { toast.error(t('toast.updateFailed')) }
+            })}>{t('common:button.confirm')}</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+
+      <Dialog open={passwordDialog.open} onOpenChange={(o) => setPasswordDialog((d) => ({ ...d, open: o }))}>
+        <DialogContent className="sm:max-w-100">
+          <DialogHeader>
+            <DialogTitle>{t('dialog.password.title', { username: user.username })}</DialogTitle>
+          </DialogHeader>
+          <form onSubmit={(e) => { e.preventDefault(); startTransition(async () => {
+            try {
+              await resetUserPasswordFn({ data: { userId: user.id, newPassword: passwordDialog.value } })
+              toast.success(t('toast.passwordReset'))
+              setPasswordDialog((d) => ({ ...d, open: false, value: '' }))
+            } catch { toast.error(t('toast.resetFailed')) }
+          })}}>
+            <div className="py-4">
+              <Label>{t('dialog.password.newPassword')}</Label>
+              <Input type="password" required value={passwordDialog.value} onChange={(e) => setPasswordDialog((d) => ({ ...d, value: e.target.value }))} />
+            </div>
+            <DialogFooter>
+              <Button type="button" variant="outline" onClick={() => setPasswordDialog((d) => ({ ...d, open: false }))}>{t('common:button.cancel')}</Button>
+              <Button type="submit" disabled={isPending}>{t('dialog.password.confirm')}</Button>
+            </DialogFooter>
+          </form>
+        </DialogContent>
+      </Dialog>
+
+      <AlertDialog open={deleteDialog.open} onOpenChange={(o) => setDeleteDialog((d) => ({ ...d, open: o }))}>
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>{t('dialog.delete.title')}</AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('dialog.delete.description', { username: user.username })}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <Input placeholder={t('dialog.delete.placeholder')} value={deleteDialog.confirmName} onChange={(e) => setDeleteDialog((d) => ({ ...d, confirmName: e.target.value }))} />
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common:button.cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              disabled={deleteDialog.confirmName !== user.username || isPending}
+              onClick={() => startTransition(async () => {
+                try {
+                  await deleteUserFn({ data: { userId: user.id } })
+                  toast.success(t('toast.userDeleted'))
+                  window.location.href = '/users'
+                } catch { toast.error(t('toast.deleteFailed')) }
+              })}
+            >{t('dialog.delete.confirm')}</AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </>
+  )
+}

package/src/routes/_nav/users/$userId/route.tsx

@@ -0,0 +1,27 @@
+// 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 { createFileRoute } from '@tanstack/react-router'
+import { getUserDetailFn } from '@/server/serverFns/user/detail'
+
+export const Route = createFileRoute('/_nav/users/$userId')({
+  loader: async ({ params }) => {
+    const user = await getUserDetailFn({ data: { userId: params.userId } })
+    if (!user) return { user: null, notFound: true }
+    return { user, notFound: false }
+  },
+})

package/src/routes/_nav/users/-components/users-table.tsx

@@ -0,0 +1,38 @@
+// 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 { DataTable } from "@/components/data-table/data-table"
+import { getUserColumns } from "@/components/user/columns"
+import type { UserRow } from "@/components/user/columns"
+import { useNavigate } from "@tanstack/react-router"
+
+interface UsersTableProps {
+  users: UserRow[]
+}
+
+export function UsersTable({ users }: UsersTableProps) {
+  const navigate = useNavigate()
+
+  const handleDetail = (user: UserRow) => {
+    navigate({ to: "/users/$userId", params: { userId: user.id } })
+  }
+
+  const columns = getUserColumns(handleDetail)
+
+  return <DataTable columns={columns} data={users} onRowClick={handleDetail} />
+}