@allbluecn/web-app 0.3.0

package/src/components/settings/ai/api-key-field.tsx

@@ -0,0 +1,141 @@
+// 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/web/src/components/settings/ai/api-key-field.tsx
+import { useState } from "react"
+import { Eye, EyeOff, KeyRound, Trash2 } from "lucide-react"
+import { useTranslation } from "react-i18next"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import {
+  Field,
+  FieldContent,
+  FieldDescription,
+  FieldLabel,
+} from "@/components/ui/field"
+
+export function ApiKeyField({
+  hasKey,
+  apiKeyMasked,
+  keyPlaceholder,
+  keyUrl,
+  isLocal,
+  onChange,
+  onBlurApiKey,
+}: {
+  hasKey: boolean
+  apiKeyMasked: string
+  keyPlaceholder: string
+  keyUrl?: string
+  isLocal?: boolean
+  onChange: (next: { apiKey?: string; clearKey?: boolean }) => void
+  onBlurApiKey?: () => void
+}) {
+  const [value, setValue] = useState("")
+  const [show, setShow] = useState(false)
+  const [clearKey, setClearKey] = useState(false)
+  const { t } = useTranslation("settings")
+
+  if (isLocal) {
+    return (
+      <Field orientation="horizontal">
+        <FieldContent>
+          <FieldLabel>API Key</FieldLabel>
+          <FieldDescription className="text-xs">
+            {t("ai.localNoKeyNeeded")}
+          </FieldDescription>
+        </FieldContent>
+      </Field>
+    )
+  }
+
+  return (
+    <Field orientation="horizontal">
+      <FieldContent>
+        <FieldLabel>API Key</FieldLabel>
+        <FieldDescription className="text-xs space-y-1">
+          <p>{t("ai.keyStoredEncrypted")}
+            {keyUrl && (
+            <a
+              href={keyUrl}
+              target="_blank"
+              rel="noreferrer"
+              className="inline-flex items-center gap-1 text-primary hover:underline"
+            >
+              <KeyRound className="size-3" />
+              {t("ai.getKey")}
+            </a>
+          )}
+          </p>
+
+          {hasKey && !clearKey && (
+            <p>
+              {t("ai.current")}:
+              <code className="rounded bg-muted px-1.5 py-0.5">{apiKeyMasked}</code>
+            </p>
+          )}
+
+        </FieldDescription>
+      </FieldContent>
+      <div className="flex gap-2">
+        <div className="relative">
+          <Input
+            type={show ? "text" : "password"}
+            value={value}
+            onChange={(e) => {
+              setValue(e.target.value)
+              onChange({ apiKey: e.target.value })
+            }}
+            onBlur={onBlurApiKey}
+            placeholder={
+              hasKey && !clearKey ? t("ai.keepCurrentKey") : keyPlaceholder
+            }
+            autoComplete="off"
+            className="w-72 pr-10"
+          />
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            onClick={() => setShow((v) => !v)}
+            className="absolute right-0 top-0 size-8"
+            aria-label={show ? t("ai.hideKey") : t("ai.showKey")}
+          >
+            {show ? <EyeOff className="size-4" /> : <Eye className="size-4" />}
+          </Button>
+        </div>
+        {hasKey && !clearKey && (
+          <Button
+            type="button"
+            variant="outline"
+            size="icon"
+            onClick={() => {
+              setClearKey(true)
+              setValue("")
+              onChange({ clearKey: true })
+            }}
+            aria-pressed={clearKey}
+            className="border-destructive text-destructive"
+            aria-label={t("ai.deleteSavedKey")}
+          >
+            <Trash2 className="size-4" />
+          </Button>
+        )}
+      </div>
+    </Field>
+  )
+}

package/src/components/settings/ai/create-custom-model-dialog.tsx

@@ -0,0 +1,267 @@
+// 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/web/src/components/settings/ai/create-custom-model-dialog.tsx
+import { useState } from "react"
+import { useMutation } from "@tanstack/react-query"
+import { useTranslation } from "react-i18next"
+import { toast } from '@/components/ui/sonner'
+import { MODEL_CAPABILITY_OPTIONS } from "@allbluecn/shared"
+import type { ModelCapability } from "@allbluecn/shared"
+import { Button } from "@/components/ui/button"
+import { Input } from "@/components/ui/input"
+import { Label } from "@/components/ui/label"
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@/components/ui/dialog"
+import { cn } from "@/lib/utils"
+import { createCustomModelFn } from "@/server/serverFns/ai/providers"
+
+interface FormState {
+  id: string
+  displayName: string
+  contextWindow: string
+  releaseDate: string
+  inputPrice: string
+  outputPrice: string
+  iconSlug: string
+  tags: string
+  capabilities: ModelCapability[]
+}
+
+const EMPTY_FORM: FormState = {
+  id: "",
+  displayName: "",
+  contextWindow: "",
+  releaseDate: "",
+  inputPrice: "",
+  outputPrice: "",
+  iconSlug: "",
+  tags: "",
+  capabilities: ["text"],
+}
+
+export function CreateCustomModelDialog({
+  open,
+  onOpenChange,
+  providerId,
+  onCreated,
+}: {
+  open: boolean
+  onOpenChange: (v: boolean) => void
+  providerId: string
+  onCreated?: () => void
+}) {
+  const [form, setForm] = useState<FormState>(EMPTY_FORM)
+  const { t } = useTranslation("settings")
+
+  const mutation = useMutation({
+    mutationFn: () =>
+      createCustomModelFn({
+        data: {
+          providerId,
+          model: {
+            id: form.id.trim(),
+            displayName: form.displayName.trim() || form.id.trim(),
+            capabilities: form.capabilities,
+            ...(form.contextWindow
+              ? { contextWindow: Number(form.contextWindow) }
+              : {}),
+            ...(form.releaseDate ? { releaseDate: form.releaseDate } : {}),
+            ...(form.inputPrice
+              ? { inputPrice: Number(form.inputPrice) }
+              : {}),
+            ...(form.outputPrice
+              ? { outputPrice: Number(form.outputPrice) }
+              : {}),
+            ...(form.iconSlug.trim() ? { iconSlug: form.iconSlug.trim() } : {}),
+            ...(form.tags.trim()
+              ? {
+                  tags: form.tags
+                    .split(/[,，]/)
+                    .map((t) => t.trim())
+                    .filter(Boolean),
+                }
+              : {}),
+          },
+        },
+      }),
+    onSuccess: (res) => {
+      if (res.success) {
+        toast.success(res.message)
+        setForm(EMPTY_FORM)
+        onOpenChange(false)
+        onCreated?.()
+      } else {
+        toast.error(res.message)
+      }
+    },
+    onError: (err) =>
+      toast.error(err instanceof Error ? err.message : t("ai.createFailed")),
+  })
+
+  function update<K extends keyof FormState>(key: K, value: FormState[K]) {
+    setForm((f) => ({ ...f, [key]: value }))
+  }
+
+  function toggleCapability(cap: ModelCapability) {
+    setForm((f) => ({
+      ...f,
+      capabilities: f.capabilities.includes(cap)
+        ? f.capabilities.filter((c) => c !== cap)
+        : [...f.capabilities, cap],
+    }))
+  }
+
+  const canSubmit = form.id.trim().length > 0 && !mutation.isPending
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="max-h-[90vh] overflow-y-auto sm:max-w-lg">
+        <DialogHeader>
+          <DialogTitle>{t("ai.createCustomModel")}</DialogTitle>
+          <DialogDescription>
+            {t("ai.createCustomModelDescription")}
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="space-y-3 py-2">
+          <div className="space-y-1.5">
+            <Label htmlFor="cm-id">{t("ai.modelId")}</Label>
+            <Input
+              id="cm-id"
+              value={form.id}
+              onChange={(e) => update("id", e.target.value)}
+              placeholder={t("ai.modelIdPlaceholder", { example: "ft:gpt-4o:my-org:1" })}
+              className="font-mono text-xs"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="cm-name">{t("ai.displayName")}</Label>
+            <Input
+              id="cm-name"
+              value={form.displayName}
+              onChange={(e) => update("displayName", e.target.value)}
+              placeholder={t("ai.displayNamePlaceholder")}
+            />
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="cm-ctx">{t("ai.contextWindow")}</Label>
+              <Input
+                id="cm-ctx"
+                type="number"
+                value={form.contextWindow}
+                onChange={(e) => update("contextWindow", e.target.value)}
+                placeholder="128000"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="cm-date">{t("ai.releaseDate")}</Label>
+              <Input
+                id="cm-date"
+                type="date"
+                value={form.releaseDate}
+                onChange={(e) => update("releaseDate", e.target.value)}
+              />
+            </div>
+          </div>
+          <div className="grid grid-cols-2 gap-3">
+            <div className="space-y-1.5">
+              <Label htmlFor="cm-in">{t("ai.inputPrice")}</Label>
+              <Input
+                id="cm-in"
+                type="number"
+                step="0.01"
+                value={form.inputPrice}
+                onChange={(e) => update("inputPrice", e.target.value)}
+                placeholder="2.5"
+              />
+            </div>
+            <div className="space-y-1.5">
+              <Label htmlFor="cm-out">{t("ai.outputPrice")}</Label>
+              <Input
+                id="cm-out"
+                type="number"
+                step="0.01"
+                value={form.outputPrice}
+                onChange={(e) => update("outputPrice", e.target.value)}
+                placeholder="10"
+              />
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label>{t("ai.capabilitiesSection")}</Label>
+            <div className="flex flex-wrap gap-1.5">
+              {MODEL_CAPABILITY_OPTIONS.map((c) => {
+                const active = form.capabilities.includes(c.value)
+                return (
+                  <button
+                    key={c.value}
+                    type="button"
+                    onClick={() => toggleCapability(c.value)}
+                    className={cn(
+                      "rounded-md border px-2 py-0.5 text-xs transition-colors",
+                      active
+                        ? "border-primary bg-primary/10 text-primary"
+                        : "border-border hover:bg-muted",
+                    )}
+                  >
+                    {t(`ai.capabilitiesMap.${c.value}`)}
+                  </button>
+                )
+              })}
+            </div>
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="cm-icon">{t("ai.iconSlug")}</Label>
+            <Input
+              id="cm-icon"
+              value={form.iconSlug}
+              onChange={(e) => update("iconSlug", e.target.value)}
+              placeholder={t("ai.iconSlugPlaceholder")}
+              className="text-xs"
+            />
+          </div>
+          <div className="space-y-1.5">
+            <Label htmlFor="cm-tags">{t("ai.tags")}</Label>
+            <Input
+              id="cm-tags"
+              value={form.tags}
+              onChange={(e) => update("tags", e.target.value)}
+              placeholder={t("ai.tagsPlaceholder")}
+            />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <Button variant="outline" onClick={() => onOpenChange(false)}>
+            {t("common.cancel")}
+          </Button>
+          <Button onClick={() => mutation.mutate()} disabled={!canSubmit}>
+            {mutation.isPending ? t("ai.creating") : t("ai.createModel")}
+          </Button>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/components/settings/ai/model-card.tsx

@@ -0,0 +1,203 @@
+// 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/web/src/components/settings/ai/model-card.tsx
+import { useEffect, useState } from "react"
+import { Calendar, Coins, GripVertical } from "lucide-react"
+import type {
+  AiModelMeta,
+  AiProviderMeta,
+} from "@allbluecn/shared"
+import { Badge } from "@/components/ui/badge"
+import { Switch } from "@/components/ui/switch"
+import { cn } from "@/lib/utils"
+import { ProviderLogo } from "./provider-logo"
+import { useTranslation } from "react-i18next"
+
+/** 自定义标签预设配色，未命中的 fallback 到 muted */
+const TAG_STYLES: Record<string, string> = {
+  custom: "bg-purple-500/10 text-purple-600 dark:text-purple-400 border-purple-500/30",
+  flagship: "bg-amber-500/10 text-amber-600 dark:text-amber-400 border-amber-500/30",
+  fast: "bg-sky-500/10 text-sky-600 dark:text-sky-400 border-sky-500/30",
+  recommended: "bg-primary/10 text-primary border-primary/30",
+  apiFetched: "bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border-emerald-500/30",
+}
+
+const TAG_KEY_MAP: Record<string, string> = {
+  "自定义": "custom",
+  "旗舰": "flagship",
+  "快速": "fast",
+  "推荐": "recommended",
+  "API 获取": "apiFetched",
+}
+
+type LobeIconComponent = React.ComponentType<{
+  size?: number
+  className?: string
+}> & {
+  Color?: 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
+  }
+}
+
+/** 模型图标：iconSlug 有值加载 @lobehub/icons 对应图标，否则 fallback 到服务商图标 */
+function ModelIcon({
+  model,
+  provider,
+  size,
+}: {
+  model: Pick<AiModelMeta, "iconSlug">
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  size: number
+}) {
+  const [IconComponent, setIconComponent] =
+    useState<LobeIconComponent | null>(null)
+
+  useEffect(() => {
+    if (!model.iconSlug) {
+      setIconComponent(null)
+      return
+    }
+    let cancelled = false
+    loadLobeIcon(model.iconSlug).then((icon) => {
+      if (!cancelled) setIconComponent(icon)
+    })
+    return () => {
+      cancelled = true
+    }
+  }, [model.iconSlug])
+
+  if (IconComponent) {
+    const RenderIcon = IconComponent.Color ?? IconComponent
+    return <RenderIcon size={size} />
+  }
+  return <ProviderLogo provider={provider} size={size} />
+}
+
+function formatPrice(price?: number, t?: (k: string) => string): string {
+  if (price === undefined || price === null) return "—"
+  if (price === 0) return t ? t("ai.freePrice") : "Free"
+  return `$${price}`
+}
+
+export function ModelCard({
+  model,
+  active,
+  provider,
+  onToggle,
+  sortable,
+  dragHandleRef,
+}: {
+  model: AiModelMeta
+  active: boolean
+  provider: Pick<AiProviderMeta, "providerId" | "brandName">
+  onToggle: (id: string, next: boolean) => void
+  /** 排序模式：显示拖拽手柄 */
+  sortable?: boolean
+  /** dnd-kit v2 useSortable 的 handleRef，挂到拖拽手柄按钮 */
+  dragHandleRef?: (element: HTMLElement | null) => void
+}) {
+  const tags = model.tags ?? []
+  const caps = model.capabilities ?? []
+  const { t } = useTranslation("settings")
+
+  return (
+    <div
+      className={cn(
+        "flex items-center gap-3 rounded-lg border bg-card p-3 transition-colors",
+        active ? "border-primary/40" : "border-border hover:bg-muted/40",
+      )}
+    >
+      {sortable && (
+        <button
+          ref={dragHandleRef}
+          type="button"
+          className="-ml-1 flex size-6 shrink-0 cursor-grab items-center justify-center text-muted-foreground hover:text-foreground active:cursor-grabbing"
+          aria-label={t("ai.dragToSort")}
+        >
+          <GripVertical className="size-4" />
+        </button>
+      )}
+      <div className="flex size-10 shrink-0 items-center justify-center rounded-lg bg-muted">
+        <ModelIcon model={model} provider={provider} size={22} />
+      </div>
+      <div className="min-w-0 flex-1">
+        <div className="flex items-center gap-1.5">
+          <span className="truncate text-sm font-medium">
+            {model.displayName}
+          </span>
+          {tags.map((tag) => {
+            const tagKey = TAG_KEY_MAP[tag] ?? tag;
+            return (
+              <Badge
+                key={tag}
+                variant="outline"
+                className={cn(
+                  "h-5 shrink-0 px-1.5 text-[10px]",
+                  TAG_STYLES[tagKey] ?? "",
+                )}
+              >
+                {t(`ai.tagLabels.${tagKey}`, { defaultValue: tag })}
+              </Badge>
+            );
+          })}
+          {caps.map((c) => (
+            <Badge
+              key={c}
+              variant="secondary"
+              className="h-5 shrink-0 px-1.5 text-[10px]"
+            >
+              {t(`ai.capabilitiesMap.${c}`) ?? c}
+            </Badge>
+          ))}
+        </div>
+        <div className="mt-0.5 flex flex-wrap items-center gap-x-3 gap-y-0.5 text-[11px] text-muted-foreground">
+          <code className="font-mono">{model.id}</code>
+          {model.releaseDate && (
+            <span className="inline-flex items-center gap-0.5">
+              <Calendar className="size-3" />
+              {model.releaseDate}
+            </span>
+          )}
+          <span className="inline-flex items-center gap-0.5">
+            <Coins className="size-3" />
+            {formatPrice(model.inputPrice, t)} / {formatPrice(model.outputPrice, t)}
+          </span>
+          {!!model.contextWindow && (
+            <span>{t("ai.contextWindowK", { k: Math.round(model.contextWindow / 1000) })}</span>
+          )}
+        </div>
+      </div>
+      <Switch
+        checked={active}
+        onCheckedChange={(next) => onToggle(model.id, next)}
+        aria-label={t("ai.toggleModel", { name: model.displayName })}
+      />
+    </div>
+  )
+}