@allbluecn/admin-app 0.2.0 → 0.2.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@allbluecn/admin-app",
-  "version": "0.2.0",
+  "version": "0.2.1",
   "private": false,
   "license": "AGPL-3.0-or-later",
   "type": "module",
@@ -30,28 +30,27 @@
     "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/web-app": "0.9.5",
+    "@allbluecn/web-app": "0.10.0",
     "@allbluecn/database": "0.4.18",
     "@allbluecn/kernel": "0.5.2"
   },
   "devDependencies": {
     "@cloudflare/vite-plugin": "^1.40.1",
     "@eslint/js": "^9.39.4",
+    "@inlang/paraglide-js": "^2.25.0",
+    "@inlang/plugin-message-format": "^4.4.4",
     "@tailwindcss/vite": "^4.3.2",
     "@tanstack/react-query-devtools": "5.102.8",
     "@tanstack/react-router-devtools": "1.167.1",
@@ -62,7 +61,7 @@
     "@vitejs/plugin-react": "^6.0.1",
     "@vitest/coverage-v8": "^4.1.10",
     "eslint": "^9",
-    "nitro": "3.0.260603-beta",
+    "nitro": "3.0.260903-beta",
     "shadcn": "^4.15.0",
     "tailwindcss": "^4",
     "typescript": "^7",
@@ -79,8 +78,9 @@
   },
   "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",
+    "build": "node scripts/i18n/compile.mjs && 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"
+    "lint": "eslint",
+    "typecheck": "node scripts/i18n/compile.mjs && tsc --noEmit"
   }
 }

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

@@ -15,9 +15,8 @@
 // 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 { m } from '@/paraglide/messages.js'
 import { Badge } from "@/components/ui/badge";
 import {
   SidebarMenu,
@@ -31,8 +30,15 @@ import { signOut, useSession } from "@/lib/auth-client";
 import { UserAvatar } from "@allbluecn/web-app/user-avatar";
 import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
 
+const ROLE_LABELS: Record<string, () => string> = {
+  ADMIN: m.common_common_role_ADMIN,
+  GUEST: m.common_common_role_GUEST,
+  OPERATOR: m.common_common_role_OPERATOR,
+  SUPER_ADMIN: m.common_common_role_SUPER_ADMIN,
+  USER: m.common_common_role_USER,
+}
+
 export function AdminUserMenu() {
-  const { t } = useTranslation('common')
   const router = useRouter();
   const { data: clientSession } = useSession();
   const matches = useMatches();
@@ -42,10 +48,10 @@ export function AdminUserMenu() {
   const session = clientSession || contextSession;
 
   const user = session?.user;
-  const userName = user?.name || user?.email || t('login.admin');
+  const userName = user?.name || user?.email || m.common_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 roleLabel = (ROLE_LABELS[userRole] ?? (() => m.common_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;
@@ -82,7 +88,7 @@ export function AdminUserMenu() {
               <LogOut className="h-4 w-4" />
             </SidebarMenuAction>
           </TooltipTrigger>
-          <TooltipContent>{t('login.exitAdmin')}</TooltipContent>
+          <TooltipContent>{m.common_login_exitAdmin()}</TooltipContent>
         </Tooltip>
       </SidebarMenuItem>
     </SidebarMenu>

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

@@ -1,5 +1,5 @@
-import { useTranslation } from 'react-i18next'
 import { useState, useMemo } from 'react'
+import { m } from '@/paraglide/messages.js'
 import { Route } from '@/routes/_nav/developer-logs/route'
 import type { DeveloperLogEntry } from '@allbluecn/kernel'
 import { useQueryClient } from '@tanstack/react-query'
@@ -49,7 +49,6 @@ function DeveloperLogDialog({
   onOpenChange: (open: boolean) => void
   entry?: DeveloperLogEntry
 }) {
-  const { t } = useTranslation('common')
   const isEdit = !!entry
 
   const [date, setDate] = useState(entry?.date || '')
@@ -64,7 +63,7 @@ function DeveloperLogDialog({
 
   const handleSave = async () => {
     if (!title.trim()) {
-      toast.error(t('developerLogs.form.fillRequired'))
+      toast.error(m.common_developerLogs_form_fillRequired())
       return
     }
 
@@ -77,7 +76,7 @@ function DeveloperLogDialog({
       await createFn({ data: { date, year, title, desc, tags, commitSha: commitSha || undefined } })
     }
 
-    toast.success(t('developerLogs.saveSuccess'))
+    toast.success(m.common_developerLogs_saveSuccess())
     queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
     onOpenChange(false)
   }
@@ -86,23 +85,23 @@ function DeveloperLogDialog({
     <Dialog open={open} onOpenChange={onOpenChange}>
       <DialogContent className="max-w-lg">
         <DialogHeader>
-          <DialogTitle>{isEdit ? t('developerLogs.editEntry') : t('developerLogs.addEntry')}</DialogTitle>
+          <DialogTitle>{isEdit ? m.common_developerLogs_editEntry() : m.common_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')} />
+            <Label>{m.common_developerLogs_form_date_label()}</Label>
+            <Input value={date} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setDate(e.target.value)} placeholder={m.common_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')} />
+            <Label>{m.common_developerLogs_form_title_label()}</Label>
+            <Input value={title} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)} placeholder={m.common_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} />
+            <Label>{m.common_developerLogs_form_desc_label()}</Label>
+            <Textarea value={desc} onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDesc(e.target.value)} placeholder={m.common_developerLogs_form_desc_placeholder()} rows={3} />
           </div>
           <div className="grid gap-2">
-            <Label>{t('developerLogs.form.tags.label')}</Label>
+            <Label>{m.common_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)
@@ -127,13 +126,13 @@ function DeveloperLogDialog({
             </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')} />
+            <Label>{m.common_developerLogs_form_commitSha_label()}</Label>
+            <Input value={commitSha} onChange={(e: React.ChangeEvent<HTMLInputElement>) => setCommitSha(e.target.value)} placeholder={m.common_developerLogs_form_commitSha_placeholder()} />
           </div>
         </div>
         <DialogFooter>
-          <Button variant="outline" onClick={() => onOpenChange(false)}>{t('button.cancel')}</Button>
-          <Button onClick={handleSave}>{t('button.save')}</Button>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>{m.common_button_cancel()}</Button>
+          <Button onClick={handleSave}>{m.common_button_save()}</Button>
         </DialogFooter>
       </DialogContent>
     </Dialog>
@@ -141,7 +140,6 @@ function DeveloperLogDialog({
 }
 
 function DeveloperLogPage() {
-  const { t } = useTranslation('common')
   const { entries } = Route.useLoaderData() as { entries: DeveloperLogEntry[] }
   const queryClient = useQueryClient()
 
@@ -178,7 +176,7 @@ function DeveloperLogPage() {
 
   const handleDelete = async (id: string) => {
     await deleteFn({ data: { id } })
-    toast.success(t('developerLogs.deleteSuccess'))
+    toast.success(m.common_developerLogs_deleteSuccess())
     queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
   }
 
@@ -187,13 +185,13 @@ function DeveloperLogPage() {
     try {
       const result = await autoGenFn({ data: { daysBack: 60 } })
       if (result.success) {
-        toast.success(t('developerLogs.autoGenerateSuccess', { count: result.count }))
+        toast.success(m.common_developerLogs_autoGenerateSuccess({ count: result.count }))
         queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
       } else {
-        toast.error(t('developerLogs.autoGenerateFailed'))
+        toast.error(m.common_developerLogs_autoGenerateFailed())
       }
     } catch {
-      toast.error(t('developerLogs.autoGenerateFailed'))
+      toast.error(m.common_developerLogs_autoGenerateFailed())
     } finally {
       setIsGenerating(false)
     }
@@ -208,13 +206,13 @@ function DeveloperLogPage() {
     try {
       const result = await backfillDetailsFn()
       if (result.success) {
-        toast.success(t('developerLogs.backfillSuccess', { count: result.count }))
+        toast.success(m.common_developerLogs_backfillSuccess({ count: result.count }))
         queryClient.invalidateQueries({ queryKey: ['DeveloperLogPage'] })
       } else {
-        toast.error(t('developerLogs.backfillFailed'))
+        toast.error(m.common_developerLogs_backfillFailed())
       }
     } catch {
-      toast.error(t('developerLogs.backfillFailed'))
+      toast.error(m.common_developerLogs_backfillFailed())
     }
   }
 
@@ -222,32 +220,32 @@ function DeveloperLogPage() {
     <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>
+          <h1 className="text-2xl font-semibold">{m.common_developerLogs_title()}</h1>
+          <p className="text-sm text-muted-foreground mt-1">{m.common_developerLogs_description()}</p>
         </div>
         <div className="flex items-center gap-2">
           <Dialog open={isGenerating} onOpenChange={setIsGenerating}>
             <DialogContent>
               <DialogHeader>
-                <DialogTitle>{t('developerLogs.autoGenerate')}</DialogTitle>
+                <DialogTitle>{m.common_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>
+                <span className="text-sm text-muted-foreground">{m.common_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')}
+            {m.common_developerLogs_autoGenerate()}
           </Button>
           <Button variant="outline" onClick={handleBackfill}>
             <RefreshCw className="size-4 mr-1.5" />
-            {t('developerLogs.backfillDetails')}
+            {m.common_developerLogs_backfillDetails()}
           </Button>
           <Button onClick={() => { setEditingEntry(undefined); setEditOpen(true) }}>
             <Plus className="size-4 mr-1.5" />
-            {t('developerLogs.addEntry')}
+            {m.common_developerLogs_addEntry()}
           </Button>
         </div>
       </div>
@@ -257,8 +255,8 @@ function DeveloperLogPage() {
           <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')}
+            onChange={(e: React.ChangeEvent<HTMLInputElement>) => setSearchQuery(e.target.value)}
+            placeholder={m.common_developerLogs_searchPlaceholder()}
             className="pl-8"
           />
         </div>
@@ -267,7 +265,7 @@ function DeveloperLogPage() {
             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')}
+            {m.common_developerLogs_allTags()}
           </button>
           {allTags.map((tag) => (
             <button
@@ -285,18 +283,18 @@ function DeveloperLogPage() {
         <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>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{m.common_developerLogs_columns_date()}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{m.common_developerLogs_columns_title()}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{m.common_developerLogs_columns_desc()}</th>
+              <th className="text-left px-4 py-2.5 text-xs font-medium text-muted-foreground">{m.common_developerLogs_columns_tags()}</th>
+              <th className="text-right px-4 py-2.5 text-xs font-medium text-muted-foreground">{m.common_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')}
+                  {m.common_developerLogs_empty()}
                 </td>
               </tr>
             ) : (
@@ -325,12 +323,12 @@ function DeveloperLogPage() {
                         </AlertDialogTrigger>
                         <AlertDialogContent>
                           <AlertDialogHeader>
-                            <AlertDialogTitle>{t('button.delete')}</AlertDialogTitle>
-                            <AlertDialogDescription>{t('developerLogs.deleteConfirm')}</AlertDialogDescription>
+                            <AlertDialogTitle>{m.common_button_delete()}</AlertDialogTitle>
+                            <AlertDialogDescription>{m.common_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>
+                            <AlertDialogCancel>{m.common_button_cancel()}</AlertDialogCancel>
+                            <AlertDialogAction onClick={() => handleDelete(entry.id)} className="bg-destructive hover:bg-destructive/90">{m.common_button_confirm()}</AlertDialogAction>
                           </AlertDialogFooter>
                         </AlertDialogContent>
                       </AlertDialog>

package/src/components/ai-provider/model-list-editor.tsx

@@ -17,6 +17,7 @@
 
 // apps/admin/src/components/ai-provider/model-list-editor.tsx
 import { Plus, Trash2 } from "lucide-react"
+import { m } from '@/paraglide/messages.js'
 import { Button } from "@/components/ui/button"
 import { Input } from "@/components/ui/input"
 import { cn } from "@/lib/utils"
@@ -67,13 +68,13 @@ export function ModelListEditor({
           <div className="flex items-center gap-2">
             <Input
               value={m.id}
-              onChange={(e) => update(idx, { id: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => update(idx, { id: e.target.value })}
               placeholder="模型 ID（如 gpt-4o）"
               className="font-mono text-xs"
             />
             <Input
               value={m.displayName}
-              onChange={(e) => update(idx, { displayName: e.target.value })}
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) => update(idx, { displayName: e.target.value })}
               placeholder="显示名（如 GPT-4o）"
               className="text-xs"
             />
@@ -92,7 +93,7 @@ export function ModelListEditor({
             <Input
               type="number"
               value={m.contextWindow ?? ""}
-              onChange={(e) =>
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                 update(idx, {
                   contextWindow: e.target.value
                     ? Number(e.target.value)
@@ -126,7 +127,7 @@ export function ModelListEditor({
               <input
                 type="checkbox"
                 checked={m.defaultEnabled ?? false}
-                onChange={(e) =>
+              onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
                   update(idx, { defaultEnabled: e.target.checked })
                 }
               />