ai写作默认模型

frontend-web/src/open-canvas/components/ai-writing/AIWritingForm.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import { PenLine } from 'lucide-react';
 
 import { Button } from '@/components/ui/button';
@@ -10,8 +10,7 @@ import {
   SelectTrigger,
   SelectValue,
 } from '@/components/ui/select';
-import { getBackendBaseURL } from '@/core/config';
-import { apiFetch } from '@/core/api';
+import { useModels } from '@/core/models/hooks';
 
 import type { AIWritingRequest } from '../../types/ai-writing';
 import { useArticleTypes } from '../../hooks/useArticleTypes';
@@ -23,11 +22,6 @@ interface AIWritingFormProps {
   hideAdvancedFields?: boolean;
 }
 
-interface ModelOption {
-  name: string;
-  displayName: string;
-}
-
 const INPUT_CLASS =
   'flex h-12 w-full rounded-xl border border-[#e8dedd] bg-white px-4 py-2 text-sm shadow-sm ' +
   'placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 ' +
@@ -52,10 +46,24 @@ export function AIWritingForm({
   const [wordCountInput, setWordCountInput] = useState('800');
   const [strictMode, setStrictMode] = useState(false);
   const [modelName, setModelName] = useState('');
-  const [models, setModels] = useState<ModelOption[]>([]);
+  const { models, isLoading: modelsLoading } = useModels();
 
   const { articleTypes, loading: typesLoading, refresh: refreshTypes } = useArticleTypes();
 
+  // 首次 /api/models 返回后默认选第一项;配置变更导致当前值不在列表时也回退到首项。
+  useEffect(() => {
+    if (models.length === 0) return;
+    const stillExists = models.some((m) => m.name === modelName);
+    if (!modelName || !stillExists) {
+      setModelName(models[0].name);
+    }
+  }, [models, modelName]);
+
+  const selectedModel = useMemo(
+    () => models.find((m) => m.name === modelName) ?? models[0],
+    [models, modelName],
+  );
+
   // 初始化时加载文章类型
   useEffect(() => {
     refreshTypes();
@@ -81,25 +89,6 @@ export function AIWritingForm({
     }
   }
 
-  useEffect(() => {
-    apiFetch(`${getBackendBaseURL()}/api/models`)
-      .then((r) => r.json())
-      .then((data) => {
-        const list: ModelOption[] = (data.models ?? []).map(
-          (m: { name: string; display_name?: string }) => ({
-            name: m.name,
-            displayName: m.display_name || m.name,
-          }),
-        );
-        setModels(list);
-        if (list.length > 0 && !modelName) {
-          setModelName(list[0].name);
-        }
-      })
-      .catch(() => {});
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
-
   function handleWordCountBlur() {
     const num = parseInt(wordCountInput, 10);
     if (isNaN(num) || num < 100) {
@@ -122,7 +111,7 @@ export function AIWritingForm({
       wordCountTarget: wordCount,
       keywordCount: DEFAULT_KEYWORD_COUNT,
       writingMode: hideAdvancedFields ? 'loose' : strictMode ? 'strict' : 'loose',
-      modelName: modelName || undefined,
+      modelName: selectedModel?.name || modelName || undefined,
     });
   }
 
@@ -192,17 +181,25 @@ export function AIWritingForm({
         <div className="mt-4 space-y-2">
           <label className={FIELD_LABEL_CLASS}>写作模型</label>
           <Select
-            value={modelName}
+            value={selectedModel?.name ?? ''}
             onValueChange={setModelName}
-            disabled={disabled || models.length === 0}
+            disabled={disabled || modelsLoading || models.length === 0}
           >
             <SelectTrigger className={FIELD_TRIGGER_CLASS}>
-              <SelectValue placeholder={models.length > 0 ? '选择模型…' : '模型加载中…'} />
+              <SelectValue
+                placeholder={
+                  modelsLoading
+                    ? '模型加载中…'
+                    : models.length > 0
+                      ? '选择模型…'
+                      : '暂无可用模型'
+                }
+              />
             </SelectTrigger>
             <SelectContent>
               {models.map((m) => (
                 <SelectItem key={m.name} value={m.name} className="text-sm">
-                  {m.displayName}
+                  {m.display_name || m.name}
                 </SelectItem>
               ))}
             </SelectContent>