@allbluecn/admin-app 0.1.0

package/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "@allbluecn/admin-app",
+  "version": "0.1.0",
+  "private": false,
+  "license": "AGPL-3.0-or-later",
+  "type": "module",
+  "dependencies": {
+    "@auth/core": "^0.41.2",
+    "@lobehub/icons": "^5.16.0",
+    "@prisma/client": "^7.8.0",
+    "@radix-ui/react-avatar": "^1.1.11",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-separator": "^1.1.8",
+    "@radix-ui/react-slot": "^1.2.4",
+    "@radix-ui/react-tooltip": "^1.2.8",
+    "@sentry/tanstackstart-react": "^10.67.0",
+    "@tabler/icons-react": "^3.44.0",
+    "@tanstack/charts": "^0.16.0",
+    "@tanstack/react-form": "2.0.0-alpha.2",
+    "@tanstack/react-query": "^5.102.8",
+    "@tanstack/react-router": "1.170.32",
+    "@tanstack/react-router-ssr-query": "^1.167.2",
+    "@tanstack/react-start": "^1.168.49",
+    "@tanstack/react-table": "^9.2.3",
+    "@tanstack/react-virtual": "^3.14.10",
+    "@tanstack/store": "^0.11.1",
+    "bcryptjs": "^3.0.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "date-fns": "^4.4.0",
+    "i18next": "^25.10.10",
+    "i18next-browser-languagedetector": "^8.2.1",
+    "lucide-react": "^1.27.0",
+    "motion": "^12.42.2",
+    "next-themes": "^0.4.6",
+    "radix-ui": "^1.4.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-i18next": "^15.7.4",
+    "react-markdown": "^10.1.0",
+    "remark-gfm": "^4.0.1",
+    "sonner": "^2.0.7",
+    "start-authjs": "^1.0.2",
+    "tailwind-merge": "^3.5.0",
+    "zod": "^4.4.3",
+    "@allbluecn/database": "0.4.18",
+    "@allbluecn/kernel": "0.5.2",
+    "@allbluecn/web-app": "0.9.5"
+  },
+  "devDependencies": {
+    "@cloudflare/vite-plugin": "^1.40.1",
+    "@eslint/js": "^9.39.4",
+    "@tailwindcss/vite": "^4.3.2",
+    "@tanstack/react-query-devtools": "5.102.8",
+    "@tanstack/react-router-devtools": "1.167.1",
+    "@types/bcryptjs": "^2.4.6",
+    "@types/node": "^24.13.3",
+    "@types/react": "^19",
+    "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.10",
+    "eslint": "^9",
+    "nitro": "3.0.260603-beta",
+    "shadcn": "^4.15.0",
+    "tailwindcss": "^4",
+    "typescript": "^7",
+    "vite": "^8.1.5",
+    "vitest": "^4.1.10",
+    "wrangler": "^4.99.0"
+  },
+  "files": [
+    "src",
+    "public"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "dev": "NODE_OPTIONS='--import ./instrument.server.mjs' vite --port 3001",
+    "build": "vite build && if [ -d .output/server ]; then cp instrument.server.mjs .output/server; fi",
+    "start": "node --import ./.output/server/instrument.server.mjs .output/server/index.mjs",
+    "lint": "eslint"
+  }
+}

package/src/client.tsx

@@ -0,0 +1,31 @@
+// 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 './instrument.client'
+
+import { StartClient } from '@tanstack/react-start/client'
+import { StrictMode, startTransition } from 'react'
+import { hydrateRoot } from 'react-dom/client'
+
+startTransition(() => {
+  hydrateRoot(
+    document,
+    <StrictMode>
+      <StartClient />
+    </StrictMode>,
+  )
+})

package/src/components/admin/admin-user-menu.tsx

@@ -0,0 +1,90 @@
+// 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 { LogOut } from "lucide-react";
+import { Badge } from "@/components/ui/badge";
+import {
+  SidebarMenu,
+  SidebarMenuAction,
+  SidebarMenuButton,
+  SidebarMenuItem,
+} from "@/components/ui/sidebar";
+import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip";
+import { useRouter, useMatches } from "@tanstack/react-router";
+import { signOut, useSession } from "@/lib/auth-client";
+import { UserAvatar } from "@allbluecn/web-app/user-avatar";
+import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+
+export function AdminUserMenu() {
+  const { t } = useTranslation('common')
+  const router = useRouter();
+  const { data: clientSession } = useSession();
+  const matches = useMatches();
+
+  const navMatch = matches.find((m) => m.routeId === '/_nav');
+  const contextSession = navMatch?.context?.session as typeof clientSession | null;
+  const session = clientSession || contextSession;
+
+  const user = session?.user;
+  const userName = user?.name || user?.email || t('login.admin');
+  const userEmail = user?.email || "";
+  const userRole = (user as { role?: string })?.role || "ADMIN";
+  const roleLabel = t(`common.role.${userRole}`, { defaultValue: t('login.admin') });
+  const avatarConfig = (user as { avatarConfig?: AvatarConfig })?.avatarConfig;
+  const bgShape = (user as { bgShape?: string })?.bgShape as ShapeType | undefined;
+  const bgColor = (user as { bgColor?: string })?.bgColor;
+
+  const handleExitAdmin = async () => {
+    await signOut();
+    await router.navigate({ to: "/login" });
+  };
+
+  return (
+    <SidebarMenu>
+      <SidebarMenuItem>
+        <SidebarMenuButton size="lg" className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground">
+          <UserAvatar
+            avatarConfig={avatarConfig}
+            bgShape={bgShape}
+            bgColor={bgColor}
+            name={userName}
+            size="md"
+          />
+          <div className="grid flex-1 text-left text-sm leading-tight">
+            <div className="flex items-center gap-2">
+              <span className="truncate font-medium text-sm">{userName}</span>
+              <Badge variant="outline" className="text-[10px] bg-blue-50 text-blue-700 dark:bg-blue-950 dark:text-blue-300">
+                {roleLabel}
+              </Badge>
+            </div>
+            <span className="truncate text-xs">{userEmail}</span>
+          </div>
+        </SidebarMenuButton>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <SidebarMenuAction onClick={handleExitAdmin} className="hover:text-red-500 h-7 w-8 flex items-center justify-center">
+              <LogOut className="h-4 w-4" />
+            </SidebarMenuAction>
+          </TooltipTrigger>
+          <TooltipContent>{t('login.exitAdmin')}</TooltipContent>
+        </Tooltip>
+      </SidebarMenuItem>
+    </SidebarMenu>
+  );
+}

package/src/components/admin/developer-log.tsx

@@ -0,0 +1,356 @@
+import { useTranslation } from 'react-i18next'
+import { useState, useMemo } from 'react'
+import { Route } from '@/routes/_nav/developer-logs/route'
+import type { DeveloperLogEntry } from '@allbluecn/kernel'
+import { useQueryClient } from '@tanstack/react-query'
+import { useServerFn } from '@tanstack/react-start'
+import { toast } from 'sonner'
+import {
+  Plus,
+  Pencil,
+  Trash2,
+  Search,
+  Loader2,
+  RefreshCw,
+} from 'lucide-react'
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from '@/components/ui/dialog'
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
+import { Label } from '@/components/ui/label'
+import { Button } from '@/components/ui/button'
+import { createDeveloperLogFn, updateDeveloperLogFn, deleteDeveloperLogFn } from '@/server/serverFns/developer-logs'
+import { autoGenerateLogsFn, backfillLogDetailsFn } from '@/server/serverFns/developer-log-auto-generate'
+
+const TAG_OPTIONS = ['feat', 'fix', 'improvement', 'design', 'refactor', 'breaking', 'docs', 'security', 'perf']
+
+function DeveloperLogDialog({
+  open,
+  onOpenChange,
+  entry,
+}: {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  entry?: DeveloperLogEntry
+}) {
+  const { t } = useTranslation('common')
+  const isEdit = !!entry
+
+  const [date, setDate] = useState(entry?.date || '')
+  const [title, setTitle] = useState(entry?.title || '')
+  const [desc, setDesc] = useState(entry?.desc || '')
+  const [tagStr, setTagStr] = useState(entry?.tags?.join(', ') || '')
+  const [commitSha, setCommitSha] = useState(entry?.commitSha || '')
+
+  const createFn = useServerFn(createDeveloperLogFn)
+  const updateFn = useServerFn(updateDeveloperLogFn)
+  const queryClient = useQueryClient()
+
+  const handleSave = async () => {
+    if (!title.trim()) {
+      toast.error(t('developerLogs.form.fillRequired'))
+      return
+    }
+
+    const tags = tagStr.split(',').map((s) => s.trim()).filter(Boolean)
+
+    if (isEdit) {
+      await updateFn({ data: { id: entry!.id, date, year: date.split(',')[1]?.trim() || new Date().getFullYear().toString(), title, desc, tags, commitSha: commitSha || null } })
+    } else {
+      const year = date.split(',')[1]?.trim() || new Date().getFullYear().toString()
+      await createFn({ data: { date, year, title, desc, tags, commitSha: commitSha || undefined } })
+    }
+
+    toast.success(t('developerLogs.saveSuccess'))
+    queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
+    onOpenChange(false)
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{isEdit ? t('developerLogs.editEntry') : t('developerLogs.addEntry')}</DialogTitle>
+        </DialogHeader>
+        <div className="grid gap-4 py-4">
+          <div className="grid gap-2">
+            <Label>{t('developerLogs.form.date.label')}</Label>
+            <Input value={date} onChange={(e) => setDate(e.target.value)} placeholder={t('developerLogs.form.date.placeholder')} />
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('developerLogs.form.title.label')}</Label>
+            <Input value={title} onChange={(e) => setTitle(e.target.value)} placeholder={t('developerLogs.form.title.placeholder')} />
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('developerLogs.form.desc.label')}</Label>
+            <Textarea value={desc} onChange={(e) => setDesc(e.target.value)} placeholder={t('developerLogs.form.desc.placeholder')} rows={3} />
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('developerLogs.form.tags.label')}</Label>
+            <div className="flex gap-1 flex-wrap">
+              {TAG_OPTIONS.map((tag) => {
+                const isActive = tagStr.split(',').map((s) => s.trim()).includes(tag)
+                return (
+                  <button
+                    key={tag}
+                    type="button"
+                    onClick={() => {
+                      const current = tagStr.split(',').map((s) => s.trim()).filter(Boolean)
+                      if (isActive) {
+                        setTagStr(current.filter((s) => s !== tag).join(', '))
+                      } else {
+                        setTagStr([...current, tag].join(', '))
+                      }
+                    }}
+                    className={`px-2 py-1 rounded text-xs font-medium transition-colors ${isActive ? 'bg-primary/10 text-primary border border-primary/20' : 'bg-muted text-muted-foreground border border-border'}`}
+                  >
+                    {tag}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+          <div className="grid gap-2">
+            <Label>{t('developerLogs.form.commitSha.label')}</Label>
+            <Input value={commitSha} onChange={(e) => setCommitSha(e.target.value)} placeholder={t('developerLogs.form.commitSha.placeholder')} />
+          </div>
+        </div>
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('button.cancel')}</Button>
+          <Button onClick={handleSave}>{t('button.save')}</Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+function DeveloperLogPage() {
+  const { t } = useTranslation('common')
+  const { entries } = Route.useLoaderData() as { entries: DeveloperLogEntry[] }
+  const queryClient = useQueryClient()
+
+  const [searchQuery, setSearchQuery] = useState('')
+  const [activeTag, setActiveTag] = useState<string>('all')
+  const [isAddOpen, setIsAddOpen] = useState(false)
+  const [editOpen, setEditOpen] = useState(false)
+  const [editingEntry, setEditingEntry] = useState<DeveloperLogEntry | undefined>()
+  const [isGenerating, setIsGenerating] = useState(false)
+
+  const allTags = useMemo(() => {
+    const tagSet = new Set<string>()
+    entries.forEach((e) => e.tags.forEach((tag) => tagSet.add(tag)))
+    return Array.from(tagSet).sort()
+  }, [entries])
+
+  const filteredEntries = useMemo(() => {
+    let result = entries
+    if (searchQuery) {
+      const q = searchQuery.toLowerCase()
+      result = result.filter((e) =>
+        e.title.toLowerCase().includes(q) || e.desc.toLowerCase().includes(q)
+      )
+    }
+    if (activeTag !== 'all') {
+      result = result.filter((e) => e.tags.includes(activeTag))
+    }
+    return result
+  }, [entries, searchQuery, activeTag])
+
+  const deleteFn = useServerFn(deleteDeveloperLogFn)
+  const autoGenFn = useServerFn(autoGenerateLogsFn)
+  const backfillDetailsFn = useServerFn(backfillLogDetailsFn)
+
+  const handleDelete = async (id: string) => {
+    await deleteFn({ data: { id } })
+    toast.success(t('developerLogs.deleteSuccess'))
+    queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
+  }
+
+  const handleAutoGenerate = async () => {
+    setIsGenerating(true)
+    try {
+      const result = await autoGenFn({ data: { daysBack: 60 } })
+      if (result.success) {
+        toast.success(t('developerLogs.autoGenerateSuccess', { count: result.count }))
+        queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
+      } else {
+        toast.error(t('developerLogs.autoGenerateFailed'))
+      }
+    } catch {
+      toast.error(t('developerLogs.autoGenerateFailed'))
+    } finally {
+      setIsGenerating(false)
+    }
+  }
+
+  const handleEdit = (entry: DeveloperLogEntry) => {
+    setEditingEntry(entry)
+    setEditOpen(true)
+  }
+
+  const handleBackfill = async () => {
+    try {
+      const result = await backfillDetailsFn()
+      if (result.success) {
+        toast.success(t('developerLogs.backfillSuccess', { count: result.count }))
+        queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
+      } else {
+        toast.error(t('developerLogs.backfillFailed'))
+      }
+    } catch {
+      toast.error(t('developerLogs.backfillFailed'))
+    }
+  }
+
+  return (
+    <div className="h-full flex flex-col p-6 gap-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h1 className="text-2xl font-semibold">{t('developerLogs.title')}</h1>
+          <p className="text-sm text-muted-foreground mt-1">{t('developerLogs.description')}</p>
+        </div>
+        <div className="flex items-center gap-2">
+          <Dialog open={isGenerating} onOpenChange={setIsGenerating}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>{t('developerLogs.autoGenerate')}</DialogTitle>
+              </DialogHeader>
+              <div className="flex items-center gap-2 py-4">
+                <Loader2 className="size-4 animate-spin" />
+                <span className="text-sm text-muted-foreground">{t('developerLogs.autoGenerating')}</span>
+              </div>
+            </DialogContent>
+          </Dialog>
+          <Button variant="outline" onClick={handleAutoGenerate} disabled={isGenerating}>
+            <Loader2 className="size-4 mr-1.5 animate-spin" />
+            {t('developerLogs.autoGenerate')}
+          </Button>
+          <Button variant="outline" onClick={handleBackfill}>
+            <RefreshCw className="size-4 mr-1.5" />
+            {t('developerLogs.backfillDetails')}
+          </Button>
+          <Button onClick={() => { setEditingEntry(undefined); setEditOpen(true) }}>
+            <Plus className="size-4 mr-1.5" />
+            {t('developerLogs.addEntry')}
+          </Button>
+        </div>
+      </div>
+
+      <div className="flex items-center gap-3">
+        <div className="relative flex-1 max-w-sm">
+          <Search className="absolute left-2.5 top-1/2 -translate-y-1/2 size-3.5 text-muted-foreground" />
+          <Input
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+            placeholder={t('developerLogs.searchPlaceholder')}
+            className="pl-8"
+          />
+        </div>
+        <div className="flex items-center gap-1 flex-wrap">
+          <button
+            onClick={() => setActiveTag('all')}
+            className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${activeTag === 'all' ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'}`}
+          >
+            {t('developerLogs.allTags')}
+          </button>
+          {allTags.map((tag) => (
+            <button
+              key={tag}
+              onClick={() => setActiveTag(tag === activeTag ? 'all' : tag)}
+              className={`px-2.5 py-1 rounded text-xs font-medium transition-colors ${activeTag === tag ? 'bg-primary/10 text-primary' : 'text-muted-foreground hover:text-foreground'}`}
+            >
+              {tag}
+            </button>
+          ))}
+        </div>
+      </div>
+
+      <div className="flex-1 min-h-0 overflow-auto border rounded-lg">
+        <table className="w-full">
+          <thead className="sticky top-0 bg-muted/50">
+            <tr>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{t('developerLogs.columns.date')}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{t('developerLogs.columns.title')}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{t('developerLogs.columns.desc')}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{t('developerLogs.columns.tags')}</th>
+              <th className="text-right px-4 py-2.5 text-xs font-medium text-muted-foreground">{t('developerLogs.columns.actions')}</th>
+            </tr>
+          </thead>
+          <tbody>
+            {filteredEntries.length === 0 ? (
+              <tr>
+                <td colSpan={5} className="text-center py-12 text-sm text-muted-foreground">
+                  {t('developerLogs.empty')}
+                </td>
+              </tr>
+            ) : (
+              filteredEntries.map((entry) => (
+                <tr key={entry.id} className="border-t border-border/50 hover:bg-muted/30 transition-colors">
+                  <td className="px-4 py-3 text-sm whitespace-nowrap">{entry.date}</td>
+                  <td className="px-4 py-3 text-sm font-medium max-w-[200px] truncate">{entry.title}</td>
+                  <td className="px-4 py-3 text-sm text-muted-foreground max-w-[400px] truncate">{entry.desc}</td>
+                  <td className="px-4 py-3">
+                    <div className="flex flex-wrap gap-1">
+                      {entry.tags.map((tag) => (
+                        <span key={tag} className="px-1.5 py-0.5 rounded text-[10px] bg-muted/50 text-muted-foreground">{tag}</span>
+                      ))}
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-right">
+                    <div className="flex items-center justify-end gap-1">
+                      <Button variant="ghost" size="icon" className="size-7" onClick={() => handleEdit(entry)}>
+                        <Pencil className="size-3.5" />
+                      </Button>
+                      <AlertDialog>
+                        <AlertDialogTrigger asChild>
+                          <Button variant="ghost" size="icon" className="size-7 text-destructive">
+                            <Trash2 className="size-3.5" />
+                          </Button>
+                        </AlertDialogTrigger>
+                        <AlertDialogContent>
+                          <AlertDialogHeader>
+                            <AlertDialogTitle>{t('button.delete')}</AlertDialogTitle>
+                            <AlertDialogDescription>{t('developerLogs.deleteConfirm')}</AlertDialogDescription>
+                          </AlertDialogHeader>
+                          <AlertDialogFooter>
+                            <AlertDialogCancel>{t('button.cancel')}</AlertDialogCancel>
+                            <AlertDialogAction onClick={() => handleDelete(entry.id)} className="bg-destructive hover:bg-destructive/90">{t('button.confirm')}</AlertDialogAction>
+                          </AlertDialogFooter>
+                        </AlertDialogContent>
+                      </AlertDialog>
+                    </div>
+                  </td>
+                </tr>
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+
+      <DeveloperLogDialog
+        key={editingEntry?.id || 'new'}
+        open={editOpen}
+        onOpenChange={setEditOpen}
+        entry={editingEntry}
+      />
+    </div>
+  )
+}
+
+export { DeveloperLogPage }