diff --git a/src/components/pages/ComponentsModelsPage.tsx b/src/components/pages/ComponentsModelsPage.tsx
index bb61df5..e4301d0 100644
--- a/src/components/pages/ComponentsModelsPage.tsx
+++ b/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">
                   资源类型