@allbluecn/admin-app 0.1.0

package/src/components/ai-provider/provider-logo.tsx

@@ -0,0 +1,87 @@
+// 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/>.
+
+// apps/admin/src/components/ai-provider/provider-logo.tsx
+import { useEffect, useState } from "react"
+import type { AiProviderMeta } from "@allbluecn/kernel"
+import { LOBE_ICON_MAP } from "@allbluecn/kernel"
+
+type LobeIconComponent = React.ComponentType<{ size?: number; className?: string }>
+
+async function loadLobeIcon(lobeName: string): Promise<LobeIconComponent | null> {
+  try {
+    const mod = await import("@lobehub/icons")
+    return (mod as unknown as Record<string, LobeIconComponent>)[lobeName] ?? null
+  } catch {
+    return null
+  }
+}
+
+function InitialFallback({
+  brandName,
+  size,
+}: {
+  brandName: string
+  size: number
+}) {
+  return (
+    <span
+      style={{
+        width: size,
+        height: size,
+        display: "inline-flex",
+        alignItems: "center",
+        justifyContent: "center",
+        fontSize: size * 0.5,
+        fontWeight: 700,
+        color: "currentColor",
+      }}
+    >
+      {brandName.charAt(0).toUpperCase()}
+    </span>
+  )
+}
+
+export function ProviderLogo({
+  provider,
+  size = 24,
+}: {
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  size?: number
+}) {
+  const [IconComponent, setIconComponent] = useState<LobeIconComponent | null>(null)
+
+  useEffect(() => {
+    const lobeName = LOBE_ICON_MAP[provider.providerId]
+    if (!lobeName) {
+      setIconComponent(null)
+      return
+    }
+    let cancelled = false
+    loadLobeIcon(lobeName).then((icon) => {
+      if (!cancelled) setIconComponent(icon)
+    })
+    return () => { cancelled = true }
+  }, [provider.providerId])
+
+  // admin 使用单色版本（默认导出即 mono）
+  if (IconComponent) {
+    return <IconComponent size={size} />
+  }
+
+  return <InitialFallback brandName={provider.brandName} size={size} />
+}

package/src/components/ai-provider/provider-table.tsx

@@ -0,0 +1,258 @@
+// 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/>.
+
+// apps/admin/src/components/ai-provider/provider-table.tsx
+import { useState } from "react"
+import { useTranslation } from 'react-i18next'
+import { useMutation } from "@tanstack/react-query"
+import { Link, useRouter } from "@tanstack/react-router"
+import { Edit, Plus, Trash2, Users } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import { ADAPTER_KINDS, PROVIDER_BADGE_STYLES, type AiProviderRow } from "@allbluecn/kernel"
+import { Button } from "@/components/ui/button"
+import { Switch } from "@/components/ui/switch"
+import { Badge } from "@/components/ui/badge"
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@/components/ui/alert-dialog"
+import { DataTable, type AdminColumnDef } from "@/components/data-table/data-table"
+import { ProviderIcon } from "./provider-icon"
+import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
+import { deleteAiProviderAdminFn } from "@/server/serverFns/ai-provider/delete"
+
+const ADAPTER_LABEL_MAP = new Map(ADAPTER_KINDS.map((k) => [k.value, k.label]))
+
+export function ProviderTable({ data }: { data: AiProviderRow[] }) {
+  const { t } = useTranslation('admin-ai')
+  const router = useRouter()
+  const [pendingDelete, setPendingDelete] = useState<AiProviderRow | null>(null)
+
+  const toggleMutation = useMutation({
+    mutationFn: (vars: { id: string; enabled: boolean }) =>
+      updateAiProviderAdminFn({
+        data: { id: vars.id, enabled: vars.enabled },
+      }),
+    onSuccess: async () => {
+      toast.success(t('table.toast.updated'))
+      await router.invalidate()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : t('market.form.operationFailed')),
+  })
+
+  const deleteMutation = useMutation({
+    mutationFn: (id: string) => deleteAiProviderAdminFn({ data: { id } }),
+    onSuccess: async () => {
+      toast.success(t('table.toast.deleted'))
+      setPendingDelete(null)
+      await router.invalidate()
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : t('table.toast.deleteFailed')),
+  })
+
+  const columns: AdminColumnDef<AiProviderRow>[] = [
+    {
+      accessorKey: "displayName",
+      header: t('table.columns.provider'),
+      cell: ({ row }) => (
+        <div className="flex items-center gap-3">
+          <ProviderIcon provider={row.original} size={36} />
+          <div>
+            <div className="font-medium">{row.original.displayName}</div>
+            <div className="font-mono text-xs text-muted-foreground">
+              {row.original.providerId}
+            </div>
+          </div>
+        </div>
+      ),
+    },
+    {
+      accessorKey: "adapterKind",
+      header: t('table.columns.adapterKind'),
+      cell: ({ row }) => (
+        <Badge variant="outline">
+          {ADAPTER_LABEL_MAP.get(row.original.adapterKind) ??
+            row.original.adapterKind}
+        </Badge>
+      ),
+    },
+    {
+      accessorKey: "category",
+      header: t('table.columns.category'),
+      cell: ({ row }) => (
+        <Badge variant="secondary">{row.original.category}</Badge>
+      ),
+    },
+    {
+      accessorKey: "badge",
+      header: t('table.columns.badge'),
+      cell: ({ row }) => {
+        const b = row.original.badge
+        if (!b) return <span className="text-muted-foreground">—</span>
+        const style = PROVIDER_BADGE_STYLES[b] ?? "bg-muted text-muted-foreground"
+        return (
+          <span className={`inline-flex items-center rounded-md border px-2 py-0.5 text-xs font-medium ${style}`}>
+            {b}
+          </span>
+        )
+      },
+    },
+    {
+      accessorKey: "models",
+      header: t('table.columns.modelCount'),
+      cell: ({ row }) => (
+        <span className="text-sm">
+          {Array.isArray(row.original.models) ? row.original.models.length : 0}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "configCount",
+      header: () => (
+        <span className="inline-flex items-center gap-1">
+          <Users className="size-3.5" />
+          {t('table.columns.userConfigCount')}
+        </span>
+      ),
+      cell: ({ row }) => (
+        <span
+          className={
+            row.original.configCount > 0
+              ? "font-medium"
+              : "text-muted-foreground"
+          }
+        >
+          {row.original.configCount}
+        </span>
+      ),
+    },
+    {
+      accessorKey: "enabled",
+      header: t('table.columns.platformEnabled'),
+      cell: ({ row }) => (
+        <Switch
+          checked={row.original.enabled}
+          onCheckedChange={(checked) =>
+            toggleMutation.mutate({
+              id: row.original.id,
+              enabled: checked,
+            })
+          }
+          disabled={toggleMutation.isPending}
+          aria-label={t('table.enabledToggle')}
+        />
+      ),
+    },
+    {
+      id: "actions",
+      header: t('table.columns.actions'),
+      cell: ({ row }) => {
+        const canDelete = row.original.configCount === 0
+        return (
+          <div className="flex items-center gap-1">
+            <Button asChild variant="ghost" size="sm">
+              <Link
+                to="/ai-providers/$id/edit"
+                params={{ id: row.original.id }}
+              >
+                <Edit className="size-4" />
+                {t('table.edit')}
+              </Link>
+            </Button>
+            {canDelete ? (
+              <Button
+                variant="ghost"
+                size="sm"
+                className="text-destructive hover:bg-destructive/10 hover:text-destructive"
+                onClick={() => setPendingDelete(row.original)}
+              >
+                <Trash2 className="size-4" />
+                {t('table.delete')}
+              </Button>
+            ) : (
+              <Button
+                variant="ghost"
+                size="sm"
+                disabled
+                title={t('table.deleteDisabled', { count: row.original.configCount })}
+              >
+                <Trash2 className="size-4" />
+                {t('table.delete')}
+              </Button>
+            )}
+          </div>
+        )
+      },
+    },
+  ]
+
+  return (
+    <div className="space-y-4">
+      <div className="flex items-center justify-between">
+        <div>
+          <h2 className="text-lg font-semibold">{t('table.pageTitle')}</h2>
+          <p className="text-sm text-muted-foreground">
+            {t('table.pageDescription', { count: data.length })}
+          </p>
+        </div>
+        <Button asChild>
+          <Link to="/ai-providers/new">
+            <Plus className="size-4" />
+            {t('table.addProvider')}
+          </Link>
+        </Button>
+      </div>
+      <DataTable columns={columns} data={data} />
+
+      <AlertDialog
+        open={!!pendingDelete}
+        onOpenChange={(open) => !open && setPendingDelete(null)}
+      >
+        <AlertDialogContent>
+          <AlertDialogHeader>
+            <AlertDialogTitle>
+              {t('table.deleteConfirm.title', { name: pendingDelete?.displayName })}
+            </AlertDialogTitle>
+            <AlertDialogDescription>
+              {t('table.deleteConfirm.description')}
+            </AlertDialogDescription>
+          </AlertDialogHeader>
+          <AlertDialogFooter>
+            <AlertDialogCancel>{t('common.cancel')}</AlertDialogCancel>
+            <AlertDialogAction
+              className="bg-destructive text-destructive-foreground hover:bg-destructive/90"
+              onClick={() =>
+                pendingDelete && deleteMutation.mutate(pendingDelete.id)
+              }
+              disabled={deleteMutation.isPending}
+            >
+              {t('table.deleteConfirm.confirm')}
+            </AlertDialogAction>
+          </AlertDialogFooter>
+        </AlertDialogContent>
+      </AlertDialog>
+    </div>
+  )
+}

package/src/components/auth/admin-login-form.tsx

@@ -0,0 +1,214 @@
+// 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 { LogOut, User, Mail, Users, BarChart3, Shield, Settings, ArrowRight, ArrowLeft, Target } from "lucide-react";
+import { useState } from "react";
+import { useTranslation } from 'react-i18next'
+import { signIn, signOut } from "@/lib/auth-client";
+import { Button } from "@/components/ui/button";
+import { Checkbox } from "@/components/ui/checkbox";
+import { Field, FieldLabel } from "@/components/ui/field";
+import { Card, CardContent } from "@/components/ui/card";
+import { toast } from '@/components/ui/sonner';
+import { UserAvatar } from "@allbluecn/web-app/user-avatar";
+import type { AvatarConfig, ShapeType } from "@allbluecn/kernel";
+import { AuthLayout, AuthLayoutLeft, AuthLayoutRight } from "@/components/auth/auth-layout";
+import { AuthHeader } from "@/components/auth/auth-header";
+import { AuthBrandPanel } from "@/components/auth/auth-brand-panel";
+import { IconInput } from "@/components/auth/icon-input";
+import { PasswordInput } from "@/components/auth/password-input";
+import { RainbowButton } from "@/components/magicui/rainbow-button";
+
+interface AdminLoginFormProps {
+  user?: {
+    name?: string | null;
+    email?: string | null;
+    avatarConfig?: AvatarConfig;
+    bgShape?: string;
+    bgColor?: string;
+  } | null;
+  isAdmin: boolean;
+}
+
+const brandPanel = (
+  <AuthBrandPanel title="ProtoX 管理后台" subtitle="高效管理您的产品工作台" features={[
+    { icon: Users, label: "团队管理", desc: "成员与角色" },
+    { icon: BarChart3, label: "数据看板", desc: "系统概览" },
+    { icon: Shield, label: "权限控制", desc: "安全策略" },
+    { icon: Settings, label: "系统设置", desc: "配置管理" },
+  ]} />
+);
+
+function maskEmail(email: string): string {
+  const [local, domain] = email.split("@");
+  if (!domain) return email;
+  const prefix = local.length > 3 ? local.slice(0, 3) : local;
+  return `${prefix}***@${domain}`;
+}
+
+export default function AdminLoginForm({ user, isAdmin }: AdminLoginFormProps) {
+  const { t } = useTranslation('common')
+  const [password, setPassword] = useState("");
+  const [email, setEmail] = useState("");
+  const [stayLoggedIn, setStayLoggedIn] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  async function handleLogin(e: React.FormEvent) {
+    e.preventDefault();
+
+    if (!isAdmin && !email) {
+      toast.error(t('login.error.enterEmail'));
+      return;
+    }
+    if (!isAdmin && !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(email)) {
+      toast.error(t('login.error.validEmail'));
+      return;
+    }
+    if (!password) {
+      toast.error(t('login.error.enterPassword'));
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // signIn 内部用 form.submit() 触发浏览器原生 POST + 302 全页刷新，
+      // 浏览器自动处理 Set-Cookie 和重定向到 callbackUrl。
+      // 禁止在 signIn 后调用 router.navigate——router context 中 session 仍是旧值（空），
+      // _nav beforeLoad 会因 session 校验失败重定向回 /login（反模式，见 memrec 885bdd10）。
+      await signIn("credentials", {
+        redirectTo: "/dashboard",
+        email: isAdmin ? (user?.email || email) : email,
+        password,
+        remember: stayLoggedIn,
+      });
+      // form.submit() 已触发导航，以下代码在页面卸载前执行
+      // 若 csrf fetch 失败会抛错进入 catch
+    } catch {
+      toast.error(t('login.error.invalidCredentials'));
+      setLoading(false);
+    }
+  }
+
+  async function handleLogout() {
+    await signOut();
+    window.location.reload();
+  }
+
+  async function handleSwitchAccount() {
+    await signOut();
+    window.location.reload();
+  }
+
+  if (isAdmin && user?.email) {
+    return (
+      <AuthLayout>
+        <AuthLayoutLeft>
+          <div className="space-y-4 text-center">
+            <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-lg bg-primary">
+              <Target className="h-10 w-10 text-primary-foreground" />
+            </div>
+            <h1 className="text-3xl font-semibold">{t('login.adminPanel')}</h1>
+            <Card className="h-16 w-full bg-muted/50 border">
+              <CardContent className="flex h-full items-center gap-3 px-3 py-3">
+                <UserAvatar
+                  avatarConfig={user?.avatarConfig}
+                  bgShape={user?.bgShape as ShapeType | undefined}
+                  bgColor={user?.bgColor}
+                  name={user?.name || user?.email || ""}
+                  size="lg"
+                />
+                <div className="min-w-0 text-left">
+                  <p className="truncate text-base font-medium">{user?.name || user?.email || t('login.admin')}</p>
+                  <p className="truncate text-xm text-muted-foreground">{maskEmail(user?.email || "")}</p>
+                </div>
+              </CardContent>
+            </Card>
+          </div>
+          <form onSubmit={handleLogin} className="space-y-6">
+            <PasswordInput label={t('login.password.label')} placeholder={t('login.password.placeholder')} value={password} onChange={(e) => setPassword(e.target.value)} />
+            <Field orientation="horizontal" className="gap-2">
+              <FieldLabel>
+                <Checkbox checked={stayLoggedIn} onCheckedChange={(v) => setStayLoggedIn(v === true)} />
+                <span className="text-sm">{t('login.rememberMe')}</span>
+              </FieldLabel>
+            </Field>
+            <RainbowButton type="submit" className="w-full" disabled={loading}>
+              {loading ? t('login.loading') : t('login.loginAdmin')}
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </RainbowButton>
+            <div className="flex gap-2">
+              <Button type="button" variant="outline" className="flex-1" onClick={handleSwitchAccount}>
+                <Users className="w-4 h-4 mr-2" />{t('login.switchAccount')}
+              </Button>
+              <Button type="button" variant="outline" className="flex-1" onClick={handleLogout}>
+                <LogOut className="w-4 h-4 mr-2" />{t('login.logout')}
+              </Button>
+            </div>
+          </form>
+        </AuthLayoutLeft>
+        <AuthLayoutRight>{brandPanel}</AuthLayoutRight>
+      </AuthLayout>
+    );
+  }
+
+  if (user && !isAdmin) {
+    return (
+      <AuthLayout>
+        <AuthLayoutLeft>
+          <div className="space-y-4 text-center">
+            <AuthHeader title={t('login.noPermission')} titleClassName="text-destructive" />
+            <p className="text-muted-foreground">
+              {t('login.notAdmin', { name: user.name || user.email })}
+            </p>
+            <Button className="w-full" onClick={() => window.open(`${import.meta.env.VITE_WEB_URL ?? '/'}dashboard`, "_self")}>
+              <ArrowLeft className="h-4 w-4" />
+              {t('login.backToWorkspace')}
+            </Button>
+            <Button variant="outline" className="w-full" onClick={handleSwitchAccount}>
+              {t('login.switchAndLogin')}
+            </Button>
+          </div>
+        </AuthLayoutLeft>
+        <AuthLayoutRight>{brandPanel}</AuthLayoutRight>
+      </AuthLayout>
+    );
+  }
+
+  return (
+    <AuthLayout>
+      <AuthLayoutLeft>
+        <AuthHeader title={t('login.adminPanel')} subtitle={t('login.subtitle')} />
+        <form onSubmit={handleLogin} className="space-y-6">
+          <IconInput icon={Mail} label={t('login.email.label')} placeholder={t('login.email.placeholder')} value={email} onChange={(e) => setEmail(e.target.value)} />
+          <PasswordInput label={t('login.password.label')} placeholder={t('login.password.placeholder')} value={password} onChange={(e) => setPassword(e.target.value)} />
+          <Field orientation="horizontal" className="gap-2">
+            <FieldLabel>
+              <Checkbox checked={stayLoggedIn} onCheckedChange={(v) => setStayLoggedIn(v === true)} />
+              <span className="text-sm">{t('login.rememberMe')}</span>
+            </FieldLabel>
+          </Field>
+          <RainbowButton type="submit" className="w-full" disabled={loading}>
+            {loading ? t('login.loggingIn') : t('login.loginAdmin')}
+            <ArrowRight className="ml-2 h-4 w-4" />
+          </RainbowButton>
+        </form>
+      </AuthLayoutLeft>
+      <AuthLayoutRight>{brandPanel}</AuthLayoutRight>
+    </AuthLayout>
+  );
+}

package/src/components/auth/auth-brand-panel.tsx

@@ -0,0 +1,60 @@
+// 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 { LucideIcon } from 'lucide-react'
+import type { ReactNode } from 'react'
+
+interface BrandFeature {
+  icon: LucideIcon
+  label: string
+  desc: string
+}
+
+export type { BrandFeature }
+
+interface AuthBrandPanelProps {
+  title: string
+  subtitle?: string
+  features?: BrandFeature[]
+  footer?: ReactNode
+}
+
+export function AuthBrandPanel({ title, subtitle, features, footer }: AuthBrandPanelProps) {
+  return (
+    <>
+      <h1 className="text-4xl font-bold tracking-tight">{title}</h1>
+      {subtitle && (
+        <p className="text-lg text-muted-foreground">{subtitle}</p>
+      )}
+      {features && features.length > 0 && (
+        <div className="grid grid-cols-2 gap-4 pt-8">
+          {features.map((feature) => {
+            const Icon = feature.icon
+            return (
+              <div key={feature.label} className="text-center p-4 rounded-lg bg-background/50">
+                <Icon className="h-8 w-8 mx-auto mb-2 text-primary" />
+                <p className="font-semibold">{feature.label}</p>
+                <p className="text-xs text-muted-foreground">{feature.desc}</p>
+              </div>
+            )
+          })}
+        </div>
+      )}
+      {footer && <div className="pt-4">{footer}</div>}
+    </>
+  )
+}

package/src/components/auth/auth-header.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 { Target } from 'lucide-react'
+
+interface AuthHeaderProps {
+  title: string
+  subtitle?: string
+  titleClassName?: string
+}
+
+export function AuthHeader({ title, subtitle, titleClassName }: AuthHeaderProps) {
+  return (
+    <div className="space-y-2 text-center">
+      <div className="mx-auto flex h-16 w-16 items-center justify-center rounded-lg bg-primary">
+        <Target className="h-10 w-10 text-primary-foreground" />
+      </div>
+      <h1 className={`text-3xl font-semibold ${titleClassName || ''}`}>{title}</h1>
+      {subtitle && (
+        <p className="text-muted-foreground">{subtitle}</p>
+      )}
+    </div>
+  )
+}