@allbluecn/admin-app 0.1.0

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

@@ -0,0 +1,147 @@
+// 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/model-list-editor.tsx
+import { Plus, Trash2 } from "lucide-react"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { cn } from "@/lib/utils"
+import {
+  MODEL_CAPABILITY_OPTIONS,
+  type AiModelMeta,
+  type ModelCapability,
+} from "@allbluecn/kernel"
+
+export function ModelListEditor({
+  models,
+  onChange,
+}: {
+  models: AiModelMeta[]
+  onChange: (next: AiModelMeta[]) => void
+}) {
+  function update(idx: number, patch: Partial<AiModelMeta>) {
+    onChange(models.map((m, i) => (i === idx ? { ...m, ...patch } : m)))
+  }
+  function remove(idx: number) {
+    onChange(models.filter((_, i) => i !== idx))
+  }
+  function add() {
+    onChange([
+      ...models,
+      {
+        id: "",
+        displayName: "",
+        capabilities: ["text"],
+        defaultEnabled: false,
+      },
+    ])
+  }
+  function toggleCapability(idx: number, cap: ModelCapability) {
+    const m = models[idx]!
+    const caps = m.capabilities ?? []
+    update(idx, {
+      capabilities: caps.includes(cap)
+        ? caps.filter((c) => c !== cap)
+        : [...caps, cap],
+    })
+  }
+
+  return (
+    <div className="space-y-3">
+      {models.map((m, idx) => (
+        <div key={idx} className="space-y-2 rounded-lg border bg-card p-3">
+          <div className="flex items-center gap-2">
+            <Input
+              value={m.id}
+              onChange={(e) => 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 })}
+              placeholder="显示名（如 GPT-4o）"
+              className="text-xs"
+            />
+            <Button
+              type="button"
+              variant="ghost"
+              size="icon"
+              onClick={() => remove(idx)}
+              className="shrink-0 text-destructive hover:bg-destructive/10"
+              aria-label="删除模型"
+            >
+              <Trash2 className="size-4" />
+            </Button>
+          </div>
+          <div className="flex flex-wrap items-center gap-2">
+            <Input
+              type="number"
+              value={m.contextWindow ?? ""}
+              onChange={(e) =>
+                update(idx, {
+                  contextWindow: e.target.value
+                    ? Number(e.target.value)
+                    : undefined,
+                })
+              }
+              placeholder="上下文窗口（tokens）"
+              className="h-8 w-44 text-xs"
+            />
+            <div className="flex flex-wrap gap-1">
+              {MODEL_CAPABILITY_OPTIONS.map((c) => {
+                const active = m.capabilities?.includes(c.value)
+                return (
+                  <button
+                    key={c.value}
+                    type="button"
+                    onClick={() => toggleCapability(idx, c.value)}
+                    className={cn(
+                      "rounded-md border px-2 py-0.5 text-[11px] transition-colors",
+                      active
+                        ? "border-primary bg-primary/10 text-primary"
+                        : "border-border hover:bg-muted",
+                    )}
+                  >
+                    {c.label}
+                  </button>
+                )
+              })}
+            </div>
+            <label className="ml-auto flex items-center gap-1 text-xs">
+              <input
+                type="checkbox"
+                checked={m.defaultEnabled ?? false}
+                onChange={(e) =>
+                  update(idx, { defaultEnabled: e.target.checked })
+                }
+              />
+              默认启用
+            </label>
+          </div>
+        </div>
+      ))}
+      <Button type="button" variant="outline" size="sm" onClick={add}>
+        <Plus className="size-4" />
+        添加模型
+      </Button>
+      {models.length === 0 && (
+        <p className="text-xs text-muted-foreground">暂未添加模型，可留空</p>
+      )}
+    </div>
+  )
+}

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

@@ -0,0 +1,434 @@
+// 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-form.tsx
+import { useState } from "react"
+import { useTranslation } from 'react-i18next'
+import { useMutation } from "@tanstack/react-query"
+import { Link, useNavigate, useRouter } from "@tanstack/react-router"
+import { ArrowLeft, Loader2, Save } from "lucide-react"
+import { toast } from '@/components/ui/sonner'
+import {
+  ADAPTER_KINDS,
+  PROVIDER_CATEGORIES,
+  type AiModelMeta,
+  type AdapterKind,
+  type ProviderCategory,
+} from "@allbluecn/kernel"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Textarea } from "@/components/ui/textarea"
+import { Switch } from "@/components/ui/switch"
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldGroup,
+  FieldLabel,
+  FieldSet,
+  FieldLegend,
+  FieldSeparator,
+} from "@/components/ui/field"
+import { createAiProviderAdminFn } from "@/server/serverFns/ai-provider/create"
+import { updateAiProviderAdminFn } from "@/server/serverFns/ai-provider/update"
+import { ModelListEditor } from "./model-list-editor"
+import { ProviderIcon } from "./provider-icon"
+
+type ProviderFormValues = {
+  providerId: string
+  displayName: string
+  brandName: string
+  description: string
+  category: ProviderCategory
+  adapterKind: AdapterKind
+  badge: string
+  defaultBaseUrl: string
+  keyUrl: string
+  docsUrl: string
+  keyPlaceholder: string
+  iconSlug: string
+  brandColor: string
+  isLocal: boolean
+  enabled: boolean
+  sortOrder: number
+  models: AiModelMeta[]
+}
+
+const DEFAULT_VALUES: ProviderFormValues = {
+  providerId: "",
+  displayName: "",
+  brandName: "",
+  description: "",
+  category: "popular",
+  adapterKind: "openai-compatible",
+  badge: "",
+  defaultBaseUrl: "",
+  keyUrl: "",
+  docsUrl: "",
+  keyPlaceholder: "",
+  iconSlug: "",
+  brandColor: "#6467F2",
+  isLocal: false,
+  enabled: true,
+  sortOrder: 0,
+  models: [],
+}
+
+export function ProviderForm({
+  mode,
+  initial,
+  providerDbId,
+}: {
+  mode: "create" | "edit"
+  initial?: Partial<ProviderFormValues>
+  providerDbId?: string
+}) {
+  const { t } = useTranslation('admin-ai')
+  const navigate = useNavigate()
+  const router = useRouter()
+  const [values, setValues] = useState<ProviderFormValues>({
+    ...DEFAULT_VALUES,
+    ...initial,
+  } as ProviderFormValues)
+
+  function patch(p: Partial<ProviderFormValues>) {
+    setValues((v) => ({ ...v, ...p }))
+  }
+
+  const saveMutation = useMutation({
+    mutationFn: async () => {
+      if (mode === "create") {
+        return createAiProviderAdminFn({ data: values })
+      }
+      return updateAiProviderAdminFn({
+        data: { id: providerDbId!, ...values },
+      })
+    },
+    onSuccess: async () => {
+      toast.success(mode === "create" ? t('form.toast.created') : t('form.toast.updated'))
+      await router.invalidate()
+      navigate({ to: "/ai-providers" })
+    },
+    onError: (err) =>
+      toast.error(t('form.toast.saveFailed', { error: err instanceof Error ? err.message : t('status.error') })),
+  })
+
+  function handleSubmit() {
+    if (!values.providerId.trim()) return toast.error(t('form.validation.providerIdRequired'))
+    if (!values.displayName.trim()) return toast.error(t('form.validation.displayNameRequired'))
+    saveMutation.mutate()
+  }
+
+  return (
+    <div className="mx-auto w-3/5 space-y-6">
+      <div className="sticky top-0 z-20 flex items-center gap-2 border-b bg-background pt-6 pb-3">
+        <Button asChild variant="ghost" size="icon">
+          <Link to="/ai-providers" aria-label="返回">
+            <ArrowLeft className="size-4" />
+          </Link>
+        </Button>
+        <h2 className="text-lg font-semibold">
+          {mode === "create" ? t('form.addProvider') : t('form.editProvider')}
+        </h2>
+      </div>
+
+      <FieldSet>
+        <FieldLegend>{t('form.basicInfo')}</FieldLegend>
+        <FieldGroup>
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.providerId')}</FieldLabel>
+              <FieldDescription>
+                {t('form.providerIdDesc')}
+                {mode === "edit" && " " + t('form.providerIdEditNote')}
+              </FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.providerId}
+              onChange={(e) => patch({ providerId: e.target.value })}
+              placeholder={t('form.providerIdPlaceholder')}
+              disabled={mode === "edit"}
+              className="w-60 font-mono"
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.preview')}</FieldLabel>
+              <FieldDescription>{t('form.previewDesc')}</FieldDescription>
+            </FieldContent>
+            <ProviderIcon
+              provider={{
+                providerId: values.providerId || "preview",
+                brandName: values.brandName || "P",
+              }}
+              size={40}
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.displayName')}</FieldLabel>
+              <FieldDescription>{t('form.displayNameDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.displayName}
+              onChange={(e) => patch({ displayName: e.target.value })}
+              className="w-60"
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.brandName')}</FieldLabel>
+              <FieldDescription>{t('form.brandNameDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.brandName}
+              onChange={(e) => patch({ brandName: e.target.value })}
+              className="w-60"
+            />
+          </Field>
+
+          <Field>
+            <FieldContent>
+              <FieldLabel>{t('form.description')}</FieldLabel>
+              <FieldDescription>{t('form.descriptionDesc')}</FieldDescription>
+            </FieldContent>
+            <Textarea
+              value={values.description}
+              onChange={(e) => patch({ description: e.target.value })}
+              rows={2}
+            />
+          </Field>
+
+          <FieldSeparator />
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.category')}</FieldLabel>
+            </FieldContent>
+            <Select
+              value={values.category}
+              onValueChange={(v) => patch({ category: v as ProviderCategory })}
+            >
+              <SelectTrigger className="w-40">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {PROVIDER_CATEGORIES.map((c) => (
+                  <SelectItem key={c.value} value={c.value}>
+                    {c.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.adapterKind')}</FieldLabel>
+              <FieldDescription>{t('form.adapterKindDesc')}</FieldDescription>
+            </FieldContent>
+            <Select
+              value={values.adapterKind}
+              onValueChange={(v) => patch({ adapterKind: v as AdapterKind })}
+            >
+              <SelectTrigger className="w-60">
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {ADAPTER_KINDS.map((k) => (
+                  <SelectItem key={k.value} value={k.value}>
+                    {k.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.badge')}</FieldLabel>
+              <FieldDescription>{t('form.badgeDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.badge}
+              onChange={(e) => patch({ badge: e.target.value })}
+              className="w-40"
+              placeholder={t('form.badgePlaceholder')}
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.brandColor')}</FieldLabel>
+              <FieldDescription>{t('form.brandColorDesc')}</FieldDescription>
+            </FieldContent>
+            <div className="flex items-center gap-2">
+              <input
+                type="color"
+                value={values.brandColor}
+                onChange={(e) => patch({ brandColor: e.target.value })}
+                className="size-9 rounded border"
+              />
+              <Input
+                value={values.brandColor}
+                onChange={(e) => patch({ brandColor: e.target.value })}
+                className="w-28 font-mono"
+              />
+            </div>
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.iconSlug')}</FieldLabel>
+              <FieldDescription>{t('form.iconSlugDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.iconSlug}
+              onChange={(e) => patch({ iconSlug: e.target.value })}
+              className="w-60"
+              placeholder={t('form.iconSlugPlaceholder')}
+            />
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+
+      <FieldSet>
+        <FieldLegend>{t('form.integrationConfig')}</FieldLegend>
+        <FieldGroup>
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.defaultBaseUrl')}</FieldLabel>
+              <FieldDescription>{t('form.defaultBaseUrlDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              value={values.defaultBaseUrl}
+              onChange={(e) => patch({ defaultBaseUrl: e.target.value })}
+              className="w-72"
+              placeholder="https://api.example.com/v1"
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.keyUrl')}</FieldLabel>
+            </FieldContent>
+            <Input
+              value={values.keyUrl}
+              onChange={(e) => patch({ keyUrl: e.target.value })}
+              className="w-72"
+              placeholder="https://..."
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.docsUrl')}</FieldLabel>
+            </FieldContent>
+            <Input
+              value={values.docsUrl}
+              onChange={(e) => patch({ docsUrl: e.target.value })}
+              className="w-72"
+              placeholder="https://..."
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.apikeyPlaceholder')}</FieldLabel>
+            </FieldContent>
+            <Input
+              value={values.keyPlaceholder}
+              onChange={(e) => patch({ keyPlaceholder: e.target.value })}
+              className="w-60"
+              placeholder="sk-..."
+            />
+          </Field>
+
+          <FieldSeparator />
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.localDeploy')}</FieldLabel>
+              <FieldDescription>{t('form.localDeployDesc')}</FieldDescription>
+            </FieldContent>
+            <Switch
+              checked={values.isLocal}
+              onCheckedChange={(v) => patch({ isLocal: v })}
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.platformEnabled')}</FieldLabel>
+              <FieldDescription>{t('form.platformEnabledDesc')}</FieldDescription>
+            </FieldContent>
+            <Switch
+              checked={values.enabled}
+              onCheckedChange={(v) => patch({ enabled: v })}
+            />
+          </Field>
+
+          <Field orientation="horizontal">
+            <FieldContent>
+              <FieldLabel>{t('form.sortOrder')}</FieldLabel>
+              <FieldDescription>{t('form.sortOrderDesc')}</FieldDescription>
+            </FieldContent>
+            <Input
+              type="number"
+              value={values.sortOrder}
+              onChange={(e) => patch({ sortOrder: Number(e.target.value) })}
+              className="w-24"
+            />
+          </Field>
+        </FieldGroup>
+      </FieldSet>
+
+      <FieldSet>
+        <FieldLegend>{t('form.modelList')}</FieldLegend>
+        <FieldDescription>{t('form.modelListDesc')}</FieldDescription>
+        <ModelListEditor
+          models={values.models}
+          onChange={(m) => patch({ models: m })}
+        />
+      </FieldSet>
+
+      <div className="sticky bottom-0 z-20 flex items-center justify-end gap-3 border-t bg-background pt-6 pb-6">
+        <Button asChild variant="outline">
+          <Link to="/ai-providers">{t('common.cancel')}</Link>
+        </Button>
+        <Button onClick={handleSubmit} disabled={saveMutation.isPending}>
+          {saveMutation.isPending ? (
+            <Loader2 className="size-4 animate-spin" data-icon="inline-start" />
+          ) : (
+            <Save className="size-4" data-icon="inline-start" />
+          )}
+          {mode === "create" ? t('common.create') : t('common.save')}
+        </Button>
+      </div>
+    </div>
+  )
+}

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

@@ -0,0 +1,43 @@
+// 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-icon.tsx
+import type { AiProviderMeta } from "@allbluecn/kernel"
+import { cn } from "@/lib/utils"
+import { ProviderLogo } from "./provider-logo"
+
+export function ProviderIcon({
+  provider,
+  size = 40,
+  className,
+}: {
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  size?: number
+  className?: string
+}) {
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center rounded-lg bg-muted text-foreground",
+        className,
+      )}
+      style={{ width: size, height: size }}
+    >
+      <ProviderLogo provider={provider} size={Math.round(size * 0.6)} />
+    </div>
+  )
+}