Add modelId field to ModelResource and ModelForm in ComponentsModelsPage

Updated the ComponentsModelsPage to include a new modelId property in both ModelResource and ModelForm types. Enhanced mock model data with corresponding modelId values for better identification. Adjusted form handling and UI elements to accommodate the new modelId field, ensuring improved data management and user experience when adding or editing models.

src/components/pages/ComponentsModelsPage.tsx

@@ -61,6 +61,7 @@ const modelTypes: ModelType[] = ["LLM", "ASR", "TTS", "Realtime", "Embedding"];
 type ModelResource = {
   id: string;
   name: string;
+  modelId: string;
   type: ModelType;
   interfaceType: InterfaceType;
   apiUrl: string;
@@ -71,6 +72,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_001",
     name: "DeepSeek-V3",
+    modelId: "deepseek-chat",
     type: "LLM",
     interfaceType: "openai",
     apiUrl: "https://api.deepseek.com/v1",
@@ -79,6 +81,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_002",
     name: "Qwen-Max",
+    modelId: "qwen-max",
     type: "LLM",
     interfaceType: "openai",
     apiUrl: "https://dashscope.aliyuncs.com/compatible-mode/v1",
@@ -87,6 +90,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_003",
     name: "讯飞语音识别",
+    modelId: "iat",
     type: "ASR",
     interfaceType: "xfyun",
     apiUrl: "https://iat-api.xfyun.cn/v2/iat",
@@ -95,6 +99,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_004",
     name: "Paraformer 识别",
+    modelId: "paraformer-realtime-v2",
     type: "ASR",
     interfaceType: "dashscope",
     apiUrl: "https://dashscope.aliyuncs.com/api/v1/services/audio/asr",
@@ -103,6 +108,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_005",
     name: "讯飞语音合成",
+    modelId: "tts",
     type: "TTS",
     interfaceType: "xfyun",
     apiUrl: "https://tts-api.xfyun.cn/v2/tts",
@@ -111,6 +117,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_006",
     name: "CosyVoice 合成",
+    modelId: "cosyvoice-v1",
     type: "TTS",
     interfaceType: "dashscope",
     apiUrl: "https://dashscope.aliyuncs.com/api/v1/services/audio/tts",
@@ -119,6 +126,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_007",
     name: "OpenAI TTS",
+    modelId: "tts-1",
     type: "TTS",
     interfaceType: "openai",
     apiUrl: "https://api.openai.com/v1/audio/speech",
@@ -127,6 +135,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_008",
     name: "GPT Realtime",
+    modelId: "gpt-4o-realtime-preview",
     type: "Realtime",
     interfaceType: "openai",
     apiUrl: "https://api.openai.com/v1/realtime",
@@ -135,6 +144,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_009",
     name: "Gemini Live",
+    modelId: "gemini-2.0-flash-live",
     type: "Realtime",
     interfaceType: "gemini",
     apiUrl: "https://generativelanguage.googleapis.com/v1beta",
@@ -143,6 +153,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_010",
     name: "text-embedding-3",
+    modelId: "text-embedding-3-small",
     type: "Embedding",
     interfaceType: "openai",
     apiUrl: "https://api.openai.com/v1/embeddings",
@@ -151,6 +162,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_011",
     name: "Kimi-K2",
+    modelId: "moonshot-v1-8k",
     type: "LLM",
     interfaceType: "openai",
     apiUrl: "https://api.moonshot.cn/v1",
@@ -159,6 +171,7 @@ const mockModels: ModelResource[] = [
   {
     id: "model_012",
     name: "BGE Embedding",
+    modelId: "bge-m3",
     type: "Embedding",
     interfaceType: "openai",
     apiUrl: "https://api.siliconflow.cn/v1/embeddings",
@@ -168,6 +181,7 @@ const mockModels: ModelResource[] = [
 
 type ModelForm = {
   name: string;
+  modelId: string;
   type: ModelType;
   interfaceType: InterfaceType;
   apiUrl: string;
@@ -176,6 +190,7 @@ type ModelForm = {
 
 const emptyForm: ModelForm = {
   name: "",
+  modelId: "",
   type: "LLM",
   interfaceType: "openai",
   apiUrl: "",
@@ -245,6 +260,7 @@ export function ComponentsModelsPage() {
     setEditingId(model.id);
     setForm({
       name: model.name,
+      modelId: model.modelId,
       type: model.type,
       interfaceType: model.interfaceType,
       apiUrl: model.apiUrl,
@@ -265,7 +281,7 @@ export function ComponentsModelsPage() {
       return true;
     }
 
-    return [model.name, model.id, model.type, model.interfaceType, model.apiUrl]
+    return [model.name, model.modelId, model.type, model.interfaceType, model.apiUrl]
       .join(" ")
       .toLowerCase()
       .includes(keyword);
@@ -289,7 +305,8 @@ export function ComponentsModelsPage() {
   }
 
   const interfaceOptions = interfaceOptionsByType[form.type];
-  const canSave = form.name.trim() && form.apiUrl.trim();
+  const canSave =
+    form.name.trim() && form.modelId.trim() && form.apiUrl.trim();
 
   return (
     <div className="mx-auto flex w-full max-w-[1440px] flex-col gap-8">
@@ -372,7 +389,9 @@ export function ComponentsModelsPage() {
                   <div className="truncate font-medium text-foreground">
                     {model.name}
                   </div>
-                  <div className="mt-1 text-xs text-muted-soft">{model.id}</div>
+                  <div className="mt-1 text-xs text-muted-soft">
+                    {model.modelId}
+                  </div>
                 </div>
 
                 <div className="md:w-[110px]">
@@ -501,27 +520,43 @@ export function ComponentsModelsPage() {
       </section>
 
       <Dialog open={dialogOpen} onOpenChange={setDialogOpen}>
-        <DialogContent className="sm:max-w-lg">
+        <DialogContent className="max-h-[calc(100vh-3rem)] overflow-y-auto sm:max-w-2xl">
           <DialogHeader>
             <DialogTitle>{editingId ? "编辑模型" : "添加模型"}</DialogTitle>
             <DialogDescription>
-              填写模型名称、资源类型、接口类型与访问凭证。
+              填写资源名称、模型 ID、资源类型、接口类型与访问凭证。
             </DialogDescription>
           </DialogHeader>
 
-          <div className="space-y-4">
+          <div className="space-y-5">
             <label className="block">
-              <div className="mb-2 text-sm font-medium text-foreground">名称</div>
+              <div className="mb-2 text-sm font-medium text-foreground">
+                资源名称
+              </div>
               <Input
                 value={form.name}
                 autoFocus
                 onChange={(event) => updateForm("name", event.target.value)}
-                placeholder="请输入模型名称"
+                placeholder="请输入资源名称"
                 className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
               />
             </label>
 
-            <div className="grid grid-cols-1 gap-4 sm:grid-cols-2">
+            <label className="block">
+              <div className="mb-2 text-sm font-medium text-foreground">
+                模型 ID
+              </div>
+              <Input
+                value={form.modelId}
+                onChange={(event) =>
+                  updateForm("modelId", event.target.value)
+                }
+                placeholder="例如 deepseek-chat"
+                className="border-hairline-strong bg-background text-foreground placeholder:text-muted-soft"
+              />
+            </label>
+
+            <div className="grid grid-cols-1 gap-5 sm:grid-cols-2">
               <div className="block">
                 <div className="mb-2 text-sm font-medium text-foreground">
                   资源类型