- {initialData &&
{t('llm.form.idLabel', { id: initialData.id })}}
-
-
-
+
+
+
+
{initialData ? t('llm.form.editTitle') : t('llm.form.createTitle')}
+
{t('llm.form.subtitle')}
+ {initialData && (
+
{t('llm.form.idLabel', { id: initialData.id })}
+ )}
- {/* Content: Left-Right layout */}
-
-
+
);
}
diff --git a/backend/admin/src/app/admin/llm/components/wizard/form-stepper.tsx b/backend/admin/src/app/admin/llm/components/wizard/form-stepper.tsx
new file mode 100644
index 00000000..d988e9ec
--- /dev/null
+++ b/backend/admin/src/app/admin/llm/components/wizard/form-stepper.tsx
@@ -0,0 +1,69 @@
+'use client';
+
+import React from 'react';
+import { Check } from 'lucide-react';
+import { cn } from '@/lib/utils';
+
+export interface StepMeta {
+ key: string;
+ title: string;
+ description: string;
+}
+
+interface FormStepperProps {
+ steps: StepMeta[];
+ currentStep: number;
+ visitedSteps: number[];
+ onStepClick: (index: number) => void;
+}
+
+export function FormStepper({ steps, currentStep, visitedSteps, onStepClick }: FormStepperProps) {
+ return (
+
+ {steps.map((step, index) => {
+ const isCurrent = index === currentStep;
+ const isCompleted = index < currentStep;
+ const isVisited = visitedSteps.includes(index);
+ return (
+ -
+
+ {index < steps.length - 1 && (
+
+ )}
+
+ );
+ })}
+
+ );
+}
diff --git a/backend/admin/src/app/admin/llm/components/wizard/step-basic.tsx b/backend/admin/src/app/admin/llm/components/wizard/step-basic.tsx
new file mode 100644
index 00000000..5ed5a1ae
--- /dev/null
+++ b/backend/admin/src/app/admin/llm/components/wizard/step-basic.tsx
@@ -0,0 +1,165 @@
+'use client';
+
+import React, { useState } from 'react';
+import Image from 'next/image';
+import { useTranslation } from 'react-i18next';
+import type { UseFormReturn } from 'react-hook-form';
+import {
+ FormControl,
+ FormDescription,
+ FormField,
+ FormItem,
+ FormLabel,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import { Badge } from '@/components/ui/badge';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { X, ExternalLink } from 'lucide-react';
+import { cn } from '@/lib/utils';
+import { PROVIDER_OPTIONS, FormValues } from '../../schema';
+
+interface StepBasicProps {
+ form: UseFormReturn
;
+ actions?: React.ReactNode;
+}
+
+export function StepBasic({ form, actions }: StepBasicProps) {
+ const { t } = useTranslation();
+ const [tagInput, setTagInput] = useState("");
+
+ return (
+
+
+
+
+ {t('llm.form.basic.title')}
+ {t('llm.form.basic.description')}
+
+ {actions}
+
+ {PROVIDER_OPTIONS.map((option) => {
+ const selected = field.value === option.value;
+ return (
+
+ );
+ })}
+
+
+ {t('llm.form.connection.title')}
+ {t('llm.form.connection.description')}
+
+ {actions}
+
+
+
+
+
+
+
+ )}
+ />
+
+
+
+
+
+
+ (
+
+
+
+
+
+
+ )}
+ />
+
+
+
+
+ );
+}
diff --git a/backend/admin/src/app/admin/llm/components/wizard/step-models.tsx b/backend/admin/src/app/admin/llm/components/wizard/step-models.tsx
new file mode 100644
index 00000000..7e1e7f76
--- /dev/null
+++ b/backend/admin/src/app/admin/llm/components/wizard/step-models.tsx
@@ -0,0 +1,348 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useFieldArray, type UseFormReturn } from 'react-hook-form';
+import api from '@/lib/axios';
+import {
+ FormControl,
+ FormField,
+ FormItem,
+ FormMessage,
+} from '@/components/ui/form';
+import { Input } from '@/components/ui/input';
+import {
+ Select,
+ SelectContent,
+ SelectItem,
+ SelectTrigger,
+ SelectValue,
+} from '@/components/ui/select';
+import { Badge } from '@/components/ui/badge';
+import { Button } from '@/components/ui/button';
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import { useToast } from '@/components/ui/use-toast';
+import { Plus, Trash2, X, ChevronDown, ChevronRight, RefreshCw } from 'lucide-react';
+import { PRESET_COST_DIMENSIONS, MODEL_TYPE_OPTIONS, FormValues } from '../../schema';
+
+interface StepModelsProps {
+ form: UseFormReturn;
+ modelCosts: Record>;
+ setModelCosts: React.Dispatch>>>;
+ actions?: React.ReactNode;
+}
+
+export function StepModels({ form, modelCosts, setModelCosts, actions }: StepModelsProps) {
+ const { t } = useTranslation();
+ const { toast } = useToast();
+ const [isSyncingOllama, setIsSyncingOllama] = useState(false);
+ const [expandedModels, setExpandedModels] = useState>({});
+
+ const { fields, append, remove, replace } = useFieldArray({
+ control: form.control,
+ name: "models",
+ });
+
+ // 同步本地 Ollama 模型列表：调用后端代理 GET /api/tags，
+ // 合并保留已有同名条目的别名/类型配置；cost 配置仍由 modelCosts state 按名匹配。
+ const handleSyncOllamaModels = async () => {
+ try {
+ setIsSyncingOllama(true);
+ const baseUrl = (form.getValues('base_url') || '').trim() || 'http://localhost:11434';
+ const res = await api.post('/admin/llm-providers/ollama-models', { base_url: baseUrl });
+ if (!res.data?.success) {
+ toast({
+ variant: 'destructive',
+ title: '同步失败',
+ description: res.data?.message || '未能连接本地 Ollama 服务',
+ });
+ return;
+ }
+ const remoteNames: string[] = res.data.models || [];
+ if (remoteNames.length === 0) {
+ toast({
+ variant: 'destructive',
+ title: '本地未发现模型',
+ description: '请先使用 `ollama pull ` 拉取至少一个模型',
+ });
+ return;
+ }
+ // 按 value 合并：本地列表为准，同名条目保留已有 type/display_name
+ const existing = new Map(
+ (form.getValues('models') || []).map((m: { value: string; type?: string; display_name?: string }) => [m.value, m]),
+ );
+ const merged = remoteNames.map((name) => existing.get(name) || { value: name, type: 'language', display_name: '' });
+ replace(merged);
+ toast({
+ title: '同步成功',
+ description: `已从 Ollama 拉取 ${remoteNames.length} 个模型`,
+ });
+ } catch (err: any) {
+ toast({
+ variant: 'destructive',
+ title: '同步出错',
+ description: err?.message || '请检查 Base URL 与后端服务',
+ });
+ } finally {
+ setIsSyncingOllama(false);
+ }
+ };
+
+ const updateCost = (modelName: string, key: string, rawValue: string) => {
+ setModelCosts((prev) => {
+ const modelEntry = { ...(prev[modelName] || {}) };
+ if (rawValue === '') {
+ delete modelEntry[key];
+ } else {
+ modelEntry[key] = Number(rawValue);
+ }
+ return { ...prev, [modelName]: modelEntry };
+ });
+ };
+
+ const removeCost = (modelName: string, key: string) => {
+ setModelCosts((prev) => {
+ const modelEntry = { ...(prev[modelName] || {}) };
+ delete modelEntry[key];
+ return { ...prev, [modelName]: modelEntry };
+ });
+ };
+
+ const hasNamedModel = fields.some((_, index) => form.watch(`models.${index}.value`));
+
+ return (
+
+
+
+
+ {t('llm.form.models.title')}
+ {t('llm.form.models.description')}
+
+
+ {form.watch('provider_type') === 'ollama' && (
+
+
+
+
+ {t('llm.form.models.syncOllama')}
+
+ )}
+ {actions}
+
+
+ {fields.map((field, index) => (
+
+ (
+
+
+
+
+
+
+ )}
+ />
+ (
+
+
+
+
+
+
+ )}
+ />
+ (
+
+
+
+
+ )}
+ />
+
+
+ ))}
+
+
+ {form.formState.errors.models?.message && (
+
{String(form.formState.errors.models.message)}
+ )}
+
+
+
{t('llm.form.models.costsTitle')}
+ {t('llm.form.models.costsUnit')}
+
+
+
+ {fields.map((field, index) => {
+ const modelName = form.watch(`models.${index}.value`);
+ if (!modelName) return null;
+ const isExpanded = expandedModels[modelName] || false;
+ const costs = modelCosts[modelName] || {};
+ const customKeys = Object.keys(costs).filter((k) => !(k in PRESET_COST_DIMENSIONS));
+
+ return (
+
+
+
+ {isExpanded && (
+
+
+ {Object.entries(PRESET_COST_DIMENSIONS).map(([dimKey, dimConfig]) => (
+
+
+ updateCost(modelName, dimKey, e.target.value)}
+ className="font-mono h-9 bg-background"
+ />
+
+ ))}
+
+
+ {/* 自定义参数 */}
+ {customKeys.length > 0 && (
+
+
{t('llm.form.models.customParamsTitle')}
+ {customKeys.map((customKey) => (
+
+
+
+
{customKey}
+
+
+
+ updateCost(modelName, customKey, e.target.value)}
+ className="font-mono h-8"
+ />
+
+
+
+ ))}
+
+ )}
+
+
+
+ )}
+
+ );
+ })}
+
+