diff --git a/ui/src/api/admin/workspace/model/model.ts b/ui/src/api/admin/workspace/model/model.ts
index 5637c47f9fa..28a73dfea6a 100644
--- a/ui/src/api/admin/workspace/model/model.ts
+++ b/ui/src/api/admin/workspace/model/model.ts
@@ -1,5 +1,5 @@
 import { del, get, post, put } from '../../core/request'
-import type { Dict, ModelPayload, ModelItem } from '@/api/types'
+import type { Dict, DynamicFormField, ModelPayload, ModelItem } from '@/api/types'
 import { getWorkspaceId } from '@/utils/workspace-context'
 
 const getPrefix = () => {
@@ -36,8 +36,15 @@ const getModelMeta = (modelId: string) => {
 const deleteModel = (modelId: string) => {
   return del<undefined, boolean>(`${getPrefix()}/${modelId}`)
 }
+
+/** 获取模型参数表单。 */
 const getModelParamsForm = (modelId: string) => {
-  return get<ModelItem>(`${getPrefix()}/${modelId}/model_params_form`)
+  return get<DynamicFormField[]>(`${getPrefix()}/${modelId}/model_params_form`)
+}
+
+/** 保存模型参数表单。 */
+const putModelParamsForm = (modelId: string, payload: DynamicFormField[]) => {
+  return put<DynamicFormField[], boolean>(`${getPrefix()}/${modelId}/model_params_form`, payload)
 }
 
 /** 暂停本地模型下载。 */
@@ -50,8 +57,9 @@ export default {
   getModelDetail,
   getModelList,
   getModelMeta,
+  getModelParamsForm,
   postModel,
   putModel,
+  putModelParamsForm,
   putPauseModelDownload,
-  getModelParamsForm,
 }
diff --git a/ui/src/api/admin/workspace/model/provider.ts b/ui/src/api/admin/workspace/model/provider.ts
index a24447c3b35..c5c93397053 100644
--- a/ui/src/api/admin/workspace/model/provider.ts
+++ b/ui/src/api/admin/workspace/model/provider.ts
@@ -1,5 +1,10 @@
 import { get } from '../../core/request'
-import type { BaseModelOption, DynamicFormField, ModelProviderItem, ModelTypeOption } from '@/api/types'
+import type {
+  BaseModelOption,
+  DynamicFormField,
+  ModelProviderItem,
+  ModelTypeOption,
+} from '@/api/types'
 
 const prefix = '/provider'
 
@@ -22,6 +27,16 @@ const getModelCreateForm = (provider: string, modelType: string, modelName: stri
   })
 }
 
+/** 获取基础模型的动态参数表单。 */
+const getBaseModelParamsForm = (provider: string, modelType: string, modelName: string) => {
+  return get<DynamicFormField[]>(`${prefix}/model_params_form`, {
+    model_name: modelName,
+    model_type: modelType,
+    provider,
+  })
+}
+
+
 /** 获取供应商支持的模型类型。 */
 const getModelTypeList = (provider: string) => {
   return get<ModelTypeOption[]>(`${prefix}/model_type_list`, { provider })
@@ -35,15 +50,6 @@ const getBaseModelList = (provider: string, modelType: string) => {
   })
 }
 
-/** 获取基础模型的参数表单。 */
-const getBaseModelParamsForm = (provider: string, modelType: string, modelName: string) => {
-  return get<DynamicFormField[]>(`${prefix}/model_params_form`, {
-    model_name: modelName,
-    model_type: modelType,
-    provider,
-  })
-}
-
 export default {
   getBaseModelList,
   getBaseModelParamsForm,
diff --git a/ui/src/api/types/model.ts b/ui/src/api/types/model.ts
index e6c3133d802..2e7815d25b9 100644
--- a/ui/src/api/types/model.ts
+++ b/ui/src/api/types/model.ts
@@ -44,7 +44,7 @@ export interface DynamicFormField {
   attrs?: Record<string, unknown>
   default_value?: unknown
   field: string
-  input_type?: string
+  input_type: string
   label: string | DynamicFormLabel
   option_list?: Record<string, unknown>[]
   required?: boolean
@@ -58,6 +58,7 @@ export interface DynamicFormLabel {
     tooltip?: string
     [key: string]: unknown
   }
+  input_type: string
   label: string
   type?: string
 }
diff --git a/ui/src/assets/login-animation/4robot.gif b/ui/src/assets/login-animation/4robot.gif
index b355b9a6d93..0bb0cdb4158 100644
Binary files a/ui/src/assets/login-animation/4robot.gif and b/ui/src/assets/login-animation/4robot.gif differ
diff --git a/ui/src/components/COMPONENT_README.md b/ui/src/components/COMPONENT_README.md
index fc4a29e6bf9..8fe5155b1dd 100644
--- a/ui/src/components/COMPONENT_README.md
+++ b/ui/src/components/COMPONENT_README.md
@@ -176,7 +176,8 @@ Element Plus 使用 `ElOnlyChild` 处理浮层触发器。`el-tooltip`、`el-pop
 带标题触发器和展开过渡动画的内容折叠组件。组件内部维护展开状态，`default-expanded` 设置初始
 状态且默认为 `true`；点击标题行会切换状态，不向外回传展开状态。默认插槽放置折叠内容，标题
 默认使用 `title` 属性，也可通过 `label` 插槽自定义；标题触发层可通过 `trigger-class` 和
-`trigger-style` 自定义 class 和行内样式。
+`trigger-style` 自定义 class 和行内样式。指示图标默认显示在标题前，通过
+`indicator-position="after"` 可改为显示在标题后的线性上、下箭头。
 
 ```vue
 <MkCollapse title="系统管理员">
@@ -189,6 +190,11 @@ Element Plus 使用 `ElOnlyChild` 处理浮层触发器。`el-tooltip`、`el-pop
   </template>
   <div>折叠内容</div>
 </MkCollapse>
+
+<MkCollapse indicator-position="after">
+  <template #label><h6>高级设置</h6></template>
+  <div>高级设置内容</div>
+</MkCollapse>
 ```
 
 ### MkEmpty
@@ -343,16 +349,18 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
 ### MkViewLayout
 
 路由页面的通用内容结构，统一提供满高弹性布局及可选左侧栏。标题优先使用 `title` Prop，未传入
-时读取当前路由的 `meta.title`。`aside` 和默认作用域插槽都提供 `title` 与对应区域的 `Header`
-包装组件；插槽未渲染 `Header` 时，组件会自动显示当前标题，页面需要添加操作区或自定义标题时
-再显式渲染 `Header`。Header 固定在主内容区顶部，其余默认插槽内容由组件统一放入
+时读取当前路由的 `meta.title`。`aside` 作用域插槽提供 `title` 和对应区域的 `Header` 包装组件，
+默认作用域插槽另外提供主内容区的 `Footer` 包装组件；插槽未渲染 `Header` 时，组件会自动显示当前
+标题，页面需要添加操作区或自定义标题时再显式渲染 `Header`。Header 固定在主内容区顶部，其余
+默认插槽内容由组件统一放入
 `el-scrollbar`，页面不要再为整个主内容区嵌套滚动容器；Tabs、树或其他局部区域需要独立滚动时
-仍可自行使用 `el-scrollbar`。页面可以在同一个插槽中组织标题、内容和空状态，并只写一次业务
-状态判断。传入 `aside` 插槽后才会渲染左侧栏；左右结构上方的独立内容放入 `top` 插槽。页面加载状态通过
-`loading` Prop 传入，由组件将 Element Plus Loading 遮罩绑定到整个布局根节点。默认插槽没有
-渲染 `Header` 时会自动显示当前标题；显式渲染后则由页面控制标题内容。`collapsible` 默认为
-`false`；传入后，展开状态仅在鼠标移入侧栏或焦点进入侧栏时显示收起按钮，收起状态始终显示展开
-按钮。收起时释放侧栏宽度，页面不需要自行维护折叠状态。
+仍可自行使用 `el-scrollbar`。渲染 `Footer` 后固定在主内容区底部，不占用左侧栏空间，适合放置页面
+或全高 Drawer 右侧内容的操作按钮。页面可以在同一个插槽中组织标题、内容、底栏和空状态，并只写
+一次业务状态判断。传入 `aside` 插槽后才会渲染左侧栏；左右结构上方的独立内容放入 `top` 插槽。
+页面加载状态通过 `loading` Prop 传入，由组件将 Element Plus Loading 遮罩绑定到整个布局根节点。
+默认插槽没有渲染 `Header` 时会自动显示当前标题；显式渲染后则由页面控制标题内容。`collapsible`
+默认为 `false`；传入后，展开状态仅在鼠标移入侧栏或焦点进入侧栏时显示收起按钮，收起状态始终显示
+展开按钮。收起时释放侧栏宽度，页面不需要自行维护折叠状态。
 
 主内容区固定保留 `px-6` 水平留白。内置滚动容器会抵消两侧留白，再为滚动内容补回 `24px`
 水平间距，使滚动条贴齐主区域右边界，并允许 `MkTable` 的底部操作栏延伸至完整主区域宽度。
@@ -371,12 +379,16 @@ Element Plus Dropdown 属性和事件通过 `$attrs` 传入，并暴露 `handleO
     </component>
     左侧列表
   </template>
-  <template #default="{ title, Header }">
+  <template #default="{ title, Footer, Header }">
     <template v-if="selectedItem">
       <component :is="Header">
         <h4>{{ title }}</h4>
       </component>
       右侧内容
+      <component :is="Footer">
+        <el-button>取消</el-button>
+        <el-button type="primary">保存</el-button>
+      </component>
     </template>
     <MkEmpty v-else />
   </template>
@@ -493,8 +505,10 @@ const paginationConfig = ref({
 `maxTableHeight` 表示窗口中除表格外需要扣除的高度，默认为 `250`；组件会在窗口尺寸变化时
 重新计算 `max-height`。传入 `resizable` 后启用列宽拖拽，并隐藏为拖拽借用的原生边框视觉。
 `resizable` 采用白名单式启用：只有需求明确指定的页面级表格才能开启；未明确指定的表格，以及
-Dialog、Drawer、Popover、嵌套区域等其他大、小表格均禁止开启。需要显示 Element Plus 原生边框
-时直接使用 `el-table`。
+Dialog、Drawer、Popover、嵌套区域等其他大、小表格均禁止开启。
+
+传入 `size="small"` 时，组件会为内部 `el-table` 添加 `small` class；组件仅提供该样式钩子，
+不内置对应样式。
 
 表头需要多选筛选时使用 `MkTableFilter`。`label` 设置表头文案，`options` 接收
 `OptionItem<string>[]`，`v-model` 绑定已选值；初始不选择任何选项，确认或重置后通过 `change`
diff --git a/ui/src/components/business/workspace-relation-tags/index.vue b/ui/src/components/business/workspace-relation-tags/index.vue
index 111fd19d5e3..688d9d086ea 100644
--- a/ui/src/components/business/workspace-relation-tags/index.vue
+++ b/ui/src/components/business/workspace-relation-tags/index.vue
@@ -23,7 +23,7 @@ const tableData = computed(() => {
       <MkTagGroup :tags="tags" popover-disabled class="cursor-pointer" />
     </template>
     <div class="p-6">
-      <MkTable :data="tableData" max-height="300">
+      <MkTable :data="tableData" max-height="300" size="small">
         <template v-for="(label, prop) in tableRenderParams" :key="prop">
           <el-table-column
             :label="label"
diff --git a/ui/src/components/global/mk-collapse/index.vue b/ui/src/components/global/mk-collapse/index.vue
index 516c05390e5..8d90ba12bde 100644
--- a/ui/src/components/global/mk-collapse/index.vue
+++ b/ui/src/components/global/mk-collapse/index.vue
@@ -7,18 +7,20 @@ defineOptions({ name: 'MkCollapse' })
 const props = withDefaults(
   defineProps<{
     defaultExpanded?: boolean
+    indicatorPosition?: 'after' | 'before'
     title?: string
     triggerClass?: HTMLAttributes['class']
     triggerStyle?: HTMLAttributes['style']
   }>(),
   {
     defaultExpanded: true,
+    indicatorPosition: 'before',
   },
 )
 
 defineSlots<{
-  label(): unknown
-  default(): unknown
+  default?: () => unknown
+  label?: () => unknown
 }>()
 
 const expanded = ref(props.defaultExpanded)
@@ -29,6 +31,7 @@ const expanded = ref(props.defaultExpanded)
     <div class="py-2" :class="triggerClass" :style="triggerStyle" @click="expanded = !expanded">
       <div class="flex w-full cursor-pointer items-center gap-2 text-left">
         <MkIcon
+          v-if="indicatorPosition === 'before'"
           :icon="CaretBottom"
           :size="14"
           class="transition-transform text-N600!"
@@ -37,6 +40,14 @@ const expanded = ref(props.defaultExpanded)
         <slot name="label">
           <span>{{ title }}</span>
         </slot>
+
+        <MkIcon
+          v-if="indicatorPosition === 'after'"
+          name="icon_down_outlined"
+          :size="16"
+          class="transition-transform text-N600!"
+          :class="{ '-rotate-180': expanded }"
+        />
       </div>
     </div>
     <el-collapse-transition>
diff --git a/ui/src/components/global/mk-dialog/index.vue b/ui/src/components/global/mk-dialog/index.vue
index a05afe690b8..a319fe8ec11 100644
--- a/ui/src/components/global/mk-dialog/index.vue
+++ b/ui/src/components/global/mk-dialog/index.vue
@@ -1,6 +1,10 @@
 <script setup lang="ts">
 defineOptions({ name: 'MkDialog', inheritAttrs: false })
 
+const props = defineProps<{
+  contentClass?: string
+}>()
+
 const visible = defineModel<boolean>({ default: false })
 
 defineSlots<{
@@ -36,7 +40,7 @@ defineSlots<{
     </template>
 
     <el-scrollbar>
-      <div style="max-height: calc(100vh - 272px)">
+      <div class="px-6" :class="props.contentClass" style="max-height: calc(100vh - 272px)">
         <slot />
       </div>
     </el-scrollbar>
diff --git a/ui/src/components/global/mk-table/index.vue b/ui/src/components/global/mk-table/index.vue
index 2fa09899335..4671d2c0e45 100644
--- a/ui/src/components/global/mk-table/index.vue
+++ b/ui/src/components/global/mk-table/index.vue
@@ -19,6 +19,7 @@ const props = withDefaults(
     maxTableHeight?: number
     paginationConfig?: PaginationConfig
     resizable?: boolean // 非指定表格禁止开启
+    size?: 'small'
   }>(),
   {
     data: () => [],
@@ -109,7 +110,10 @@ defineExpose({ clearSelection, tableRef })
   <div class="mk-table relative flex w-full min-h-0 flex-1 flex-col">
     <el-table
       ref="tableRef"
-      :class="{ 'mk-table__resizable--borderless': props.resizable }"
+      :class="{
+        'mk-table__resizable--borderless': props.resizable,
+        small: props.size === 'small',
+      }"
       :data="props.data"
       :max-height="tableHeight"
       row-key="id"
diff --git a/ui/src/components/global/mk-view-layout/index.vue b/ui/src/components/global/mk-view-layout/index.vue
index 8ca5b92181b..39e006084a0 100644
--- a/ui/src/components/global/mk-view-layout/index.vue
+++ b/ui/src/components/global/mk-view-layout/index.vue
@@ -20,7 +20,11 @@ const props = withDefaults(
 
 defineSlots<{
   aside?: (props: { Header: FunctionalComponent; title: string }) => unknown
-  default?: (props: { Header: FunctionalComponent; title: string }) => unknown
+  default?: (props: {
+    Footer: FunctionalComponent
+    Header: FunctionalComponent
+    title: string
+  }) => unknown
   top?: () => unknown
 }>()
 
@@ -41,12 +45,22 @@ function flattenSlotNodes(children: unknown): VNode[] {
 const LayoutHeader: FunctionalComponent = (_, { slots }) =>
   h('header', { class: 'flex-between shrink-0 py-4 gap-4' }, slots.default?.())
 
+const LayoutFooter: FunctionalComponent = (_, { slots }) =>
+  h(
+    'footer',
+    { class: '-mx-6 -mb-6 flex shrink-0 justify-end border-t px-6 py-4' },
+    slots.default?.(),
+  )
+
 const LayoutContent: FunctionalComponent = () => {
   const contentNodes = flattenSlotNodes(
-    slots.default?.({ Header: LayoutHeader, title: title.value }),
+    slots.default?.({ Footer: LayoutFooter, Header: LayoutHeader, title: title.value }),
   )
   const customHeaderNodes = contentNodes.filter((node) => node.type === LayoutHeader)
-  const bodyNodes = contentNodes.filter((node) => node.type !== LayoutHeader)
+  const customFooterNodes = contentNodes.filter((node) => node.type === LayoutFooter)
+  const bodyNodes = contentNodes.filter(
+    (node) => node.type !== LayoutHeader && node.type !== LayoutFooter,
+  )
   const headerNodes = customHeaderNodes.length
     ? customHeaderNodes
     : title.value
@@ -58,11 +72,12 @@ const LayoutContent: FunctionalComponent = () => {
     h(
       ElScrollbar,
       {
-        class: '-mx-6 -mb-6 min-h-0 flex-1',
+        class: ['-mx-6 min-h-0 flex-1', customFooterNodes.length ? '' : '-mb-6'],
         viewClass: 'flex min-h-full flex-col px-6 pb-6',
       },
       { default: () => bodyNodes },
     ),
+    ...customFooterNodes,
   ]
 }
 </script>
@@ -80,7 +95,7 @@ const LayoutContent: FunctionalComponent = () => {
         </template>
       </LayoutAside>
 
-      <main class="mb-6 flex min-w-0 flex-1 flex-col px-6 min-h-0">
+      <main class="mb-6 flex min-h-0 min-w-0 flex-1 flex-col px-6">
         <LayoutContent />
       </main>
     </div>
diff --git a/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue b/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
index f58cc31d790..d9b0fac402b 100644
--- a/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
+++ b/ui/src/components/mk-dynamics-form/constructor/BasicInfoConstructor.vue
@@ -101,11 +101,17 @@ const updateForm = (value: DynamicFormConstructorState) => {
 defineExpose({ validate, getData, render })
 </script>
 <template>
-  <el-form @submit.prevent ref="ruleFormRef" label-width="auto" :model="form">
-    <el-form-item label="参数" :required="true" prop="field" :rules="rules.field">
+  <el-form
+    @submit.prevent
+    ref="ruleFormRef"
+    label-position="top"
+    require-asterisk-position="right"
+    :model="form"
+  >
+    <el-form-item label="参数" prop="field" :rules="rules.field">
       <el-input v-model="form.field" :maxlength="64" placeholder="请输入参数" show-word-limit />
     </el-form-item>
-    <el-form-item label="显示名称" :required="true" prop="label" :rules="rules.label">
+    <el-form-item label="显示名称" prop="label" :rules="rules.label">
       <el-input v-model="form.label" :maxlength="64" show-word-limit placeholder="请输入显示名称" />
     </el-form-item>
     <el-form-item label="参数提示说明">
@@ -119,7 +125,7 @@ defineExpose({ validate, getData, render })
     <el-form-item label="是否必填" prop="required" @click.prevent>
       <el-switch v-model="form.required" :active-value="true" :inactive-value="false" />
     </el-form-item>
-    <el-form-item label="组件类型" :required="true" prop="input_type" :rules="rules.input_type">
+    <el-form-item label="组件类型" prop="input_type" :rules="rules.input_type">
       <el-select v-model="form.input_type" placeholder="请选择组件类型">
         <el-option
           v-for="item in inputTypeList"
diff --git a/ui/src/components/mk-dynamics-form/items/PasswordInput.vue b/ui/src/components/mk-dynamics-form/items/PasswordInput.vue
index eaabf530bde..e0e90d0cf80 100644
--- a/ui/src/components/mk-dynamics-form/items/PasswordInput.vue
+++ b/ui/src/components/mk-dynamics-form/items/PasswordInput.vue
@@ -1,5 +1,10 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-input v-bind="$attrs" :show-password="true"></el-input>
+  <el-input
+    v-bind="$attrs"
+    :show-password="true"
+    autocomplete="off"
+    placeholder="请输入"
+  ></el-input>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/TextInput.vue b/ui/src/components/mk-dynamics-form/items/TextInput.vue
index d071bad76db..701deefef5b 100644
--- a/ui/src/components/mk-dynamics-form/items/TextInput.vue
+++ b/ui/src/components/mk-dynamics-form/items/TextInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-input v-bind="$attrs" />
+  <el-input v-bind="$attrs" autocomplete="off" placeholder="请输入" />
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/TextareaInput.vue b/ui/src/components/mk-dynamics-form/items/TextareaInput.vue
index 4a72151cd9b..aa1a8b76c0b 100644
--- a/ui/src/components/mk-dynamics-form/items/TextareaInput.vue
+++ b/ui/src/components/mk-dynamics-form/items/TextareaInput.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts"></script>
 
 <template>
-  <el-input v-bind="$attrs" type="textarea"></el-input>
+  <el-input v-bind="$attrs" type="textarea" placeholder="请输入"></el-input>
 </template>
diff --git a/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue b/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
index 9eccce6d9e6..1c516cf57eb 100644
--- a/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
+++ b/ui/src/components/mk-dynamics-form/items/label/TooltipLabel.vue
@@ -6,15 +6,10 @@ defineProps<{
 </script>
 
 <template>
-  <div class="flex align-center" style="display: inline-flex">
-    <div class="flex-between mr-4">
-      <span>{{ label.label }}</span>
-    </div>
-    <el-tooltip v-if="label.attrs.tooltip" effect="dark" placement="right">
-      <template #content
-        ><div style="max-width: 200px">{{ label.attrs.tooltip }}</div></template
-      >
-      <MkIcon name="icon_info_outlined"></MkIcon>
+  <div class="inline-flex items-center gap-2">
+    <span>{{ label.label }}</span>
+    <el-tooltip v-if="label.attrs.tooltip" :content="label.attrs.tooltip" placement="right">
+      <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
     </el-tooltip>
   </div>
 </template>
diff --git a/ui/src/router/admin/workspace/index.ts b/ui/src/router/admin/workspace/index.ts
index e56e28439ab..223275af196 100644
--- a/ui/src/router/admin/workspace/index.ts
+++ b/ui/src/router/admin/workspace/index.ts
@@ -17,12 +17,12 @@ const moduleRoutes: RouteRecordRaw[] = [
   ...toolRoutes,
   ...modelRoutes,
   ...triggerRoutes,
-  {
-    path: 'demo-dynamics-form',
-    name: 'demo-dynamics-form',
-    component: () => import('@/components/mk-dynamics-form/Demo.vue'),
-    meta: { title: '动态表单演示' },
-  },
+  // {
+  //   path: 'demo-dynamics-form',
+  //   name: 'demo-dynamics-form',
+  //   component: () => import('@/components/mk-dynamics-form/Demo.vue'),
+  //   meta: { title: '动态表单演示' },
+  // },
 ]
 
 export const workspaceRoutes: RouteRecordRaw = {
diff --git a/ui/src/styles/STYLE_README.md b/ui/src/styles/STYLE_README.md
index 71e37a06614..55617c3eea7 100644
--- a/ui/src/styles/STYLE_README.md
+++ b/ui/src/styles/STYLE_README.md
@@ -182,6 +182,15 @@ CSS 自定义属性同样按变量名排序。嵌套选择器、伪类和媒体
 </span>
 ```
 
+## 进行中动态点
+
+进行中状态文案使用全局 `mk-dotting` 类，通过 `::after` 生成循环变化的省略号。类名直接放在
+文案元素上，不额外添加仅用于点号的空节点；伪元素预留固定宽度，避免动画过程中正文位置抖动。
+
+```html
+<span class="mk-dotting">下载中</span>
+```
+
 ## Tailwind 中的 `p`（padding）
 
 - Tailwind 默认间距标尺中，`1` 个单位等于 `0.25rem`。
diff --git a/ui/src/styles/app.scss b/ui/src/styles/app.scss
index 8220b5d3284..2f91d5dcc5a 100644
--- a/ui/src/styles/app.scss
+++ b/ui/src/styles/app.scss
@@ -86,6 +86,30 @@ h6 {
   background-color: var(--mk-success);
 }
 
+// 进行中动态点
+.mk-dotting::after {
+  animation: download-dotting 1.5s steps(4, end) infinite;
+  content: '';
+  display: inline-block;
+  text-align: left;
+  width: 18px;
+}
+
+@keyframes download-dotting {
+  25% {
+    content: '.';
+  }
+
+  50% {
+    content: '..';
+  }
+
+  75%,
+  100% {
+    content: '...';
+  }
+}
+
 // Codemirror 编辑器
 .cm-editor {
   --el-scrollbar-bg-color: var(--el-text-color-secondary);
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 948dc339ba0..c6d25caf0ed 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -155,10 +155,12 @@
 }
 .el-button + .el-button {
   &.is-link,
-  &.is-text,
   &.is-circle {
     margin-left: 0;
   }
+  &.is-text {
+    margin-left: 4px;
+  }
 }
 
 /* card */
@@ -260,8 +262,9 @@
 .el-dialog {
   --el-dialog-padding-primary: 24px;
   --el-dialog-title-font-size: 16px;
+  padding: 0;
   &__header {
-    padding-bottom: 0;
+    padding: var(--el-dialog-padding-primary);
   }
   &__headerbtn {
     right: 20px;
@@ -285,12 +288,10 @@
     font-weight: 500;
   }
   &__body {
-    padding-top: var(--el-dialog-padding-primary);
-    padding-bottom: var(--el-dialog-padding-primary);
     color: var(--el-text-color-primary);
   }
   &__footer {
-    padding: 0;
+    padding: var(--el-dialog-padding-primary);
   }
 }
 
@@ -827,6 +828,11 @@
     line-height: var(--mk-line-height-base);
     padding: calc(var(--spacing) * 3);
   }
+  &.small {
+    .cell {
+      padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
+    }
+  }
 
   [class*='el-table__row--level'] .el-table__expand-icon {
     align-items: center;
diff --git a/ui/src/views/model/EditModelDrawer.vue b/ui/src/views/model/EditModelDrawer.vue
new file mode 100644
index 00000000000..24b0204657f
--- /dev/null
+++ b/ui/src/views/model/EditModelDrawer.vue
@@ -0,0 +1,222 @@
+<script setup lang="ts">
+import { computed, nextTick, reactive, ref } from 'vue'
+import type { BaseModelOption, Dict, ModelItem, ModelPayload, ModelProviderItem } from '@/api/types'
+import ModelApi from '@/api/admin/workspace/model/model'
+import ProviderApi from '@/api/admin/workspace/model/provider'
+import {
+  MkDynamicsForm,
+  type DynamicFormValue,
+  type FormField,
+} from '@/components/mk-dynamics-form'
+import { MODEL_TYPE_LABELS } from '@/constants'
+import { MsgSuccess } from '@/utils/message'
+
+defineOptions({ name: 'EditModelDrawer' })
+
+const emit = defineEmits<{
+  refresh: []
+}>()
+
+type ModelDetail = ModelItem & Pick<ModelPayload, 'credential'>
+
+const dynamicsFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
+const visible = ref(false)
+const loading = ref(false)
+const formLoading = ref(false)
+const selectedProvider = ref<ModelProviderItem>()
+const currentModelId = ref('')
+const baseModelOptions = ref<BaseModelOption[]>([])
+const credentialFields = ref<FormField[]>([])
+
+const modelForm = reactive<ModelPayload>({
+  credential: {},
+  model_name: '',
+  model_type: '',
+  name: '',
+  provider: '',
+})
+
+const drawerTitle = computed(() => `编辑 ${selectedProvider.value?.name ?? ''}`)
+
+const modelFormData = computed<Dict<DynamicFormValue>>({
+  get: () => ({
+    ...modelForm.credential,
+    model_name: modelForm.model_name,
+    model_type: modelForm.model_type,
+    name: modelForm.name,
+  }),
+  set: (value) => {
+    const credential = { ...value }
+    delete credential.model_name
+    delete credential.model_type
+    delete credential.name
+    modelForm.credential = credential
+  },
+})
+
+function open(provider: ModelProviderItem, model: ModelItem) {
+  selectedProvider.value = provider
+  currentModelId.value = model.id
+  visible.value = true
+  formLoading.value = true
+
+  ModelApi.getModelDetail(model.id)
+    .then((response) => {
+      const detail = response as ModelDetail
+      modelForm.credential = detail.credential ?? {}
+      modelForm.model_name = detail.model_name
+      modelForm.model_type = detail.model_type
+      modelForm.name = detail.name
+      modelForm.provider = detail.provider
+
+      return Promise.all([
+        ProviderApi.getBaseModelList(detail.provider, detail.model_type),
+        ProviderApi.getModelCreateForm(detail.provider, detail.model_type, detail.model_name),
+      ])
+    })
+    .then(([baseModels, fields]) => {
+      baseModelOptions.value = baseModels
+      credentialFields.value = fields
+      return nextTick(() => dynamicsFormRef.value?.render(fields, modelFormData.value))
+    })
+    .finally(() => {
+      formLoading.value = false
+    })
+}
+
+function handleBaseModelChange() {
+  modelForm.credential = {}
+  credentialFields.value = []
+  void dynamicsFormRef.value?.render([], modelFormData.value)
+  if (!modelForm.model_name) return
+
+  formLoading.value = true
+  ProviderApi.getModelCreateForm(modelForm.provider, modelForm.model_type, modelForm.model_name)
+    .then((fields) => {
+      credentialFields.value = fields
+      return dynamicsFormRef.value?.render(fields, modelFormData.value)
+    })
+    .finally(() => {
+      formLoading.value = false
+    })
+}
+
+function handleSubmit() {
+  dynamicsFormRef.value?.validate().then(() => {
+    loading.value = true
+    return ModelApi.putModel(currentModelId.value, modelForm)
+      .then(() => {
+        MsgSuccess('修改成功')
+        visible.value = false
+        emit('refresh')
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+function resetData() {
+  selectedProvider.value = undefined
+  currentModelId.value = ''
+  modelForm.credential = {}
+  modelForm.model_name = ''
+  modelForm.model_type = ''
+  modelForm.name = ''
+  modelForm.provider = ''
+  baseModelOptions.value = []
+  credentialFields.value = []
+  loading.value = false
+  formLoading.value = false
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer v-model="visible" :title="drawerTitle" direction="btt" @closed="resetData">
+    <div v-loading="formLoading" class="mx-auto w-full max-w-200">
+      <MkDynamicsForm ref="dynamicsFormRef" v-model="modelFormData" :render-data="credentialFields">
+        <template #default>
+          <el-form-item
+            class="mk-hide-asterisk"
+            prop="name"
+            :rules="{ required: true, message: '请输入模型名称', trigger: 'blur' }"
+          >
+            <template #label>
+              <span class="inline-flex items-center gap-2">
+                <span class="mk-required"> 模型名称</span>
+
+                <el-tooltip content="MaxKB 中自定义的模型名称" placement="right">
+                  <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
+                </el-tooltip>
+              </span>
+            </template>
+            <el-input
+              v-model="modelForm.name"
+              maxlength="64"
+              placeholder="请给基础模型设置一个名称"
+              @blur="modelForm.name = modelForm.name.trim()"
+            />
+          </el-form-item>
+
+          <el-form-item prop="model_type" label="模型类型" required>
+            <el-select v-model="modelForm.model_type" class="w-full" disabled>
+              <el-option
+                v-for="(label, value) in MODEL_TYPE_LABELS"
+                :key="value"
+                :label="label"
+                :value="value"
+              />
+            </el-select>
+          </el-form-item>
+
+          <el-form-item
+            class="mk-hide-asterisk"
+            prop="model_name"
+            :rules="{ required: true, message: '请选择模型类型', trigger: 'change' }"
+          >
+            <template #label>
+              <span class="inline-flex items-center gap-2">
+                <span class="mk-required"> 基础模型</span>
+                <span class="text-warning">
+                  列表中未列出的模型，直接输入模型名称，回车即可添加
+                </span>
+              </span>
+            </template>
+            <el-select
+              v-model="modelForm.model_name"
+              allow-create
+              class="w-full"
+              default-first-option
+              filterable
+              placeholder="请选择基础模型，自定义输入基础模型后回车即可"
+              @change="handleBaseModelChange"
+            >
+              <el-option
+                v-for="option in baseModelOptions"
+                :key="option.name"
+                :label="option.name"
+                :value="option.name"
+              >
+                <template #default>
+                  <div class="flex items-center gap-2">
+                    <span>{{ option.name }} </span>
+                    <el-tooltip v-if="option.desc" :content="option.desc" placement="right">
+                      <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
+                    </el-tooltip>
+                  </div>
+                </template>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </template>
+      </MkDynamicsForm>
+    </div>
+
+    <template #footer>
+      <el-button :disabled="loading" @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/model/ModelView.vue b/ui/src/views/model/ModelView.vue
index d58095da923..31745791b49 100644
--- a/ui/src/views/model/ModelView.vue
+++ b/ui/src/views/model/ModelView.vue
@@ -8,9 +8,8 @@ import CommonSystemApi from '@/api/admin/system/common'
 import SharedApi from '@/api/admin/workspace/shared.ts'
 import ProviderApi from '@/api/admin/workspace/model/provider'
 import ModelCard from './components/ModelCard.vue'
+import ModelCreateButton from './components/ModelCreateButton.vue'
 import ModelProvider from './components/ModelProvider.vue'
-import CreateModelDrawer from './create-model/CreateModelDrawer.vue'
-import SelectProviderDrawer from './create-model/SelectProviderDrawer.vue'
 
 const DEFAULT_MODEL_PROVIDER: ModelProviderItem = {
   icon: '',
@@ -27,10 +26,15 @@ const creatorOptions = ref<OptionItem<string>[]>([])
 
 const isShared = computed(() => currentProvider.value.provider === 'shared')
 
-const getModelIcon = computed(
-  () => (model: ModelItem) =>
-    modelProviders.value.find(({ provider }) => provider === model.provider)?.icon ?? '',
-)
+function getModelProvider(model: ModelItem): ModelProviderItem {
+  return (
+    modelProviders.value.find(({ provider }) => provider === model.provider) ?? {
+      icon: '',
+      name: model.provider,
+      provider: model.provider,
+    }
+  )
+}
 
 /* 搜索 */
 const searchFields = computed(() => [
@@ -95,21 +99,6 @@ function handleProviderSelect(provider: ModelProviderItem) {
   loadModels()
 }
 
-/* 创建模型 */
-const selectProviderDrawerRef = ref<InstanceType<typeof SelectProviderDrawer>>()
-const createModelDrawerRef = ref<InstanceType<typeof CreateModelDrawer>>()
-function handleOpenCreateModel() {
-  selectProviderDrawerRef.value?.open()
-}
-
-function handleCreateProviderSelect(provider: ModelProviderItem) {
-  createModelDrawerRef.value?.open(provider)
-}
-
-function handleBackToProviderSelect() {
-  selectProviderDrawerRef.value?.open()
-}
-
 onMounted(() => {
   Promise.all([loadModelProviders(), loadModels()])
 })
@@ -130,38 +119,29 @@ onMounted(() => {
         <h4>{{ currentProvider.name }}</h4>
         <div class="flex items-center">
           <MkComplexSearch :fields="searchFields" @change="handleSearchChange" />
-          <el-button type="primary" class="ml-3" @click="handleOpenCreateModel">
-            <MkIcon name="icon_add_outlined" />
-            <span>添加模型</span>
-          </el-button>
+          <ModelCreateButton
+            v-if="!isShared"
+            :current-provider="currentProvider"
+            :providers="modelProviders"
+            @refresh="loadModels"
+          />
         </div>
       </component>
       <div v-loading="loading">
         <div v-if="ModelItems.length" class="mk-resource-card-grid">
-          <ModelCard
-            v-for="model in ModelItems"
-            :key="model.id"
-            :model="model"
-            :icon="getModelIcon(model)"
-            :shared="isShared"
-          />
+          <template v-for="model in ModelItems" :key="model.id">
+            <ModelCard
+              :model="model"
+              :provider="getModelProvider(model)"
+              :refresh="loadModels"
+              :shared="isShared"
+            />
+          </template>
         </div>
         <MkEmpty v-else class="mt-24" />
       </div>
     </template>
   </MkViewLayout>
-  <SelectProviderDrawer
-    v-if="!isShared"
-    ref="selectProviderDrawerRef"
-    @select="handleCreateProviderSelect"
-  />
-  <CreateModelDrawer
-    v-if="!isShared"
-    ref="createModelDrawerRef"
-    :providers="modelProviders"
-    @back="handleBackToProviderSelect"
-    @refresh="loadModels"
-  />
 </template>
 
 <style scoped lang="scss"></style>
diff --git a/ui/src/views/model/ParamSettingDrawer.vue b/ui/src/views/model/ParamSettingDrawer.vue
new file mode 100644
index 00000000000..6a50cca764a
--- /dev/null
+++ b/ui/src/views/model/ParamSettingDrawer.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import type { DynamicFormField, ModelItem } from '@/api/types'
+import ModelApi from '@/api/admin/workspace/model/model'
+import { MsgSuccess } from '@/utils/message'
+import AdvancedSettingsTable from './components/advanced-settings/AdvancedSettingsTable.vue'
+
+defineOptions({ name: 'ParamSettingDrawer' })
+
+const visible = ref(false)
+const loading = ref(false)
+const currentModel = ref<ModelItem>()
+const modelParamsForm = ref<DynamicFormField[]>([])
+
+function resetData() {
+  currentModel.value = undefined
+  modelParamsForm.value = []
+  loading.value = false
+}
+
+function open(model: ModelItem) {
+  resetData()
+  currentModel.value = model
+  visible.value = true
+  loading.value = true
+  ModelApi.getModelParamsForm(model.id)
+    .then((paramsForm) => {
+      modelParamsForm.value = paramsForm
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleSubmit() {
+  if (!currentModel.value) return
+
+  loading.value = true
+  ModelApi.putModelParamsForm(currentModel.value.id, modelParamsForm.value)
+    .then(() => {
+      MsgSuccess('保存成功')
+      visible.value = false
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer v-model="visible" direction="btt" title="模型参数设置" @closed="resetData">
+    <div v-loading="loading" class="mx-auto w-full max-w-200">
+      <AdvancedSettingsTable v-model="modelParamsForm" />
+    </div>
+
+    <template #footer>
+      <el-button :disabled="loading" @click="visible = false">取消</el-button>
+      <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
+    </template>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/model/components/ModelCard.vue b/ui/src/views/model/components/ModelCard.vue
index 098e6d9fbe4..7cb8bcfae01 100644
--- a/ui/src/views/model/components/ModelCard.vue
+++ b/ui/src/views/model/components/ModelCard.vue
@@ -1,16 +1,20 @@
 <script setup lang="ts">
-import { computed } from 'vue'
+import { computed, useTemplateRef } from 'vue'
 
-import type { ModelItem } from '@/api/types'
+import type { ModelItem, ModelProviderItem } from '@/api/types'
 import { MODEL_STATUS } from '@/api/enums'
 import { MODEL_TYPE_LABELS } from '@/constants'
 import MkSourceCard from '@/components/mk-source-card/index.vue'
+import EditModelDrawer from '../EditModelDrawer.vue'
+import ParamSettingDrawer from '../ParamSettingDrawer.vue'
+import ModelDownloadStatus from './ModelDownloadStatus.vue'
 
 defineOptions({ name: 'ModelCard' })
 
 const props = defineProps<{
-  icon: string
   model: ModelItem
+  provider: ModelProviderItem
+  refresh: () => Promise<void>
   shared: boolean
 }>()
 
@@ -23,16 +27,33 @@ const errMessage = computed(() => {
   }
   return ''
 })
+
+/* 编辑 */
+const editModelDrawerRef =
+  useTemplateRef<InstanceType<typeof EditModelDrawer>>('editModelDrawerRef')
+
+function handleOpenEditModel() {
+  editModelDrawerRef.value?.open(props.provider, props.model)
+}
+
+/* 模型参数设置 */
+const paramSettingDrawerRef =
+  useTemplateRef<InstanceType<typeof ParamSettingDrawer>>('paramSettingDrawerRef')
+
+function handleOpenParamSetting() {
+  paramSettingDrawerRef.value?.open(props.model)
+}
 </script>
 
 <template>
   <MkSourceCard
+    class="relative overflow-hidden"
     :title="model.name"
     :nick_name="model.nick_name || '-'"
     :create_time="model.create_time"
   >
     <template #icon>
-      <span class="block h-6 w-6" :innerHTML="icon" />
+      <span class="block h-6 w-6" :innerHTML="provider.icon" />
     </template>
     <template #title="{ title }">
       <h6 class="min-w-0 truncate" :title="title">{{ title }}</h6>
@@ -68,15 +89,21 @@ const errMessage = computed(() => {
         </span>
       </li>
     </ul>
+    <!-- 下载状态 -->
+    <ModelDownloadStatus
+      v-if="model.status === MODEL_STATUS.DOWNLOAD"
+      :model="model"
+      :refresh="refresh"
+    />
 
     <template #footer="{ Action, ActionDropdown }">
-      <component :is="Action" v-if="!props.shared">
+      <component :is="Action" v-if="!shared">
         <component :is="ActionDropdown">
-          <MkDropdownItem>
+          <MkDropdownItem @click="handleOpenEditModel">
             <template #icon><MkIcon name="icon_edit_outlined" /></template>
             <span>编辑</span>
           </MkDropdownItem>
-          <MkDropdownItem>
+          <MkDropdownItem @click="handleOpenParamSetting" v-if="model.model_type !== 'RERANKER'">
             <template #icon><MkIcon name="icon_preferences_outlined" /></template>
             <span>模型参数设置</span>
           </MkDropdownItem>
@@ -84,6 +111,10 @@ const errMessage = computed(() => {
             <template #icon><MkIcon name="icon_passkeys_outlined" /></template>
             <span>资源授权</span>
           </MkDropdownItem>
+          <MkDropdownItem>
+            <template #icon><MkIcon name="icon_passkeys_outlined" /></template>
+            <span>查看关联资源</span>
+          </MkDropdownItem>
           <MkDropdownItem divided>
             <template #icon><MkIcon name="icon_delete-trash_outlined" /></template>
             <span>删除</span>
@@ -92,4 +123,6 @@ const errMessage = computed(() => {
       </component>
     </template>
   </MkSourceCard>
+  <EditModelDrawer v-if="!shared" ref="editModelDrawerRef" @refresh="refresh" />
+  <ParamSettingDrawer v-if="!shared" ref="paramSettingDrawerRef" />
 </template>
diff --git a/ui/src/views/model/components/ModelCreateButton.vue b/ui/src/views/model/components/ModelCreateButton.vue
new file mode 100644
index 00000000000..ca1bc20d41f
--- /dev/null
+++ b/ui/src/views/model/components/ModelCreateButton.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useTemplateRef } from 'vue'
+import type { ModelProviderItem } from '@/api/types'
+import CreateModelDrawer from '../create-model-drawer/CreateModelDrawer.vue'
+import SelectProviderDrawer from '../create-model-drawer/SelectProviderDrawer.vue'
+
+defineOptions({ name: 'ModelCreate' })
+
+const props = defineProps<{
+  currentProvider: ModelProviderItem
+  providers: ModelProviderItem[]
+}>()
+
+const emit = defineEmits<{
+  refresh: []
+}>()
+
+/* 创建模型 */
+const selectProviderDrawerRef =
+  useTemplateRef<InstanceType<typeof SelectProviderDrawer>>('selectProviderDrawerRef')
+const createModelDrawerRef =
+  useTemplateRef<InstanceType<typeof CreateModelDrawer>>('createModelDrawerRef')
+
+function handleOpenCreateModel() {
+  if (props.currentProvider.provider !== 'all') {
+    createModelDrawerRef.value?.open(props.currentProvider)
+    return
+  }
+  selectProviderDrawerRef.value?.open()
+}
+
+function handleCreateProviderSelect(provider: ModelProviderItem) {
+  createModelDrawerRef.value?.open(provider)
+}
+
+function handleBackToProviderSelect() {
+  selectProviderDrawerRef.value?.open()
+}
+</script>
+
+<template>
+  <el-button type="primary" class="ml-3" @click="handleOpenCreateModel">
+    <MkIcon name="icon_add_outlined" />
+    <span>添加模型</span>
+  </el-button>
+  <SelectProviderDrawer ref="selectProviderDrawerRef" @select="handleCreateProviderSelect" />
+  <CreateModelDrawer
+    ref="createModelDrawerRef"
+    :providers="providers"
+    @back="handleBackToProviderSelect"
+    @refresh="emit('refresh')"
+  />
+</template>
diff --git a/ui/src/views/model/components/ModelDownloadStatus.vue b/ui/src/views/model/components/ModelDownloadStatus.vue
new file mode 100644
index 00000000000..f0636bd67ec
--- /dev/null
+++ b/ui/src/views/model/components/ModelDownloadStatus.vue
@@ -0,0 +1,85 @@
+<script setup lang="ts">
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import type { ModelItem } from '@/api/types'
+import { MODEL_STATUS } from '@/api/enums'
+import ModelApi from '@/api/admin/workspace/model/model'
+
+defineOptions({ name: 'ModelDownloadStatus' })
+
+const props = defineProps<{
+  model: ModelItem
+  refresh: () => Promise<void>
+}>()
+
+const cancelLoading = ref(false)
+let downloadTimer: ReturnType<typeof setInterval> | undefined
+
+function stopDownloadPolling() {
+  if (!downloadTimer) return
+  clearInterval(downloadTimer)
+  downloadTimer = undefined
+}
+
+function loadDownloadStatus() {
+  return ModelApi.getModelMeta(props.model.id).then((model) => {
+    if (model.status === MODEL_STATUS.DOWNLOAD) return
+    stopDownloadPolling()
+    return props.refresh()
+  })
+}
+
+function handleCancelDownload() {
+  cancelLoading.value = true
+  return ModelApi.putPauseModelDownload(props.model.id)
+    .then(() => {
+      stopDownloadPolling()
+      return props.refresh()
+    })
+    .finally(() => {
+      cancelLoading.value = false
+    })
+}
+
+onMounted(() => {
+  downloadTimer = setInterval(loadDownloadStatus, 6000)
+})
+
+onBeforeUnmount(() => stopDownloadPolling())
+</script>
+
+<template>
+  <div class="model-download-status bg-white/94">
+    <div
+      v-loading="true"
+      aria-label="下载中"
+      class="download-spinner h-7 w-7"
+      element-loading-background="transparent"
+      role="status"
+    ></div>
+    <span class="mk-dotting my-2 ml-2 text-N600">下载中</span>
+    <el-button text type="primary" :loading="cancelLoading" @click.stop="handleCancelDownload">
+      取消下载
+    </el-button>
+  </div>
+</template>
+
+<style scoped lang="scss">
+.download-spinner {
+  --el-loading-spinner-size: 24px;
+
+  :deep(.el-loading-spinner .path) {
+    stroke-width: 4px;
+  }
+}
+
+.model-download-status {
+  align-items: center;
+  border-radius: var(--el-card-border-radius);
+  display: flex;
+  flex-direction: column;
+  inset: 0;
+  justify-content: center;
+  position: absolute;
+  z-index: 20;
+}
+</style>
diff --git a/ui/src/views/model/components/advanced-settings/AdvancedSettingsTable.vue b/ui/src/views/model/components/advanced-settings/AdvancedSettingsTable.vue
new file mode 100644
index 00000000000..8f24ee5fe90
--- /dev/null
+++ b/ui/src/views/model/components/advanced-settings/AdvancedSettingsTable.vue
@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import type { DynamicFormField } from '@/api/types'
+import { dynamicFormTypeOptions, type FormField } from '@/components/mk-dynamics-form'
+import { MsgError } from '@/utils/message'
+import ModelParamDialog from './ModelParamDialog.vue'
+
+defineOptions({ name: 'ModelAdvancedSettings' })
+
+const modelParams = defineModel<DynamicFormField[]>({ required: true })
+
+const currentIndex = ref<number>()
+const modelParamDialogRef =
+  useTemplateRef<InstanceType<typeof ModelParamDialog>>('modelParamDialogRef')
+
+function handleOpenParamDialog(field?: DynamicFormField, index?: number) {
+  currentIndex.value = index
+  modelParamDialogRef.value?.open(field)
+}
+
+function getTypeLabel(inputType: string) {
+  return dynamicFormTypeOptions.find((option) => option.value === inputType)?.label ?? inputType
+}
+
+function handleSubmitParam(field: FormField) {
+  const label =
+    typeof field.label === 'object'
+      ? { ...field.label, label: field.label.label ?? field.field }
+      : (field.label ?? field.field)
+  const modelParam: DynamicFormField = {
+    ...field,
+    label,
+  }
+  const duplicateField = modelParams.value.some(
+    (param, index) => param.field === modelParam.field && index !== currentIndex.value,
+  )
+  if (duplicateField) {
+    MsgError(`参数“${modelParam.field}”已存在`)
+    return
+  }
+
+  const modelParamLabel =
+    typeof modelParam.label === 'string' ? modelParam.label : modelParam.label.label
+  const duplicateLabel = modelParams.value.some(
+    (param, index) =>
+      (typeof param.label === 'string' ? param.label : param.label.label) === modelParamLabel &&
+      index !== currentIndex.value,
+  )
+  if (duplicateLabel) {
+    MsgError(`显示名称“${modelParamLabel}”已存在`)
+    return
+  }
+
+  if (currentIndex.value === undefined) {
+    modelParams.value.push(modelParam)
+    return
+  }
+  modelParams.value.splice(currentIndex.value, 1, modelParam)
+}
+
+function handleDeleteParam(index: number) {
+  modelParams.value.splice(index, 1)
+}
+</script>
+
+<template>
+  <div class="flex-between mb-2">
+    <span>模型参数</span>
+    <el-tooltip content="添加参数" placement="top">
+      <el-button text type="primary" @click.stop="handleOpenParamDialog()">
+        <MkIcon name="icon_add_outlined" />
+      </el-button>
+    </el-tooltip>
+  </div>
+
+  <MkTable :data="modelParams" size="small">
+    <el-table-column label="参数" prop="field" min-width="130" show-overflow-tooltip />
+    <el-table-column label="显示名称" min-width="130" show-overflow-tooltip>
+      <template #default="{ row }">
+        <span v-if="row.label && row.label.input_type === 'TooltipLabel'">{{
+          row.label.label
+        }}</span>
+        <span v-else>{{ row.label }}</span>
+      </template>
+    </el-table-column>
+    <el-table-column label="组件类型" min-width="100">
+      <template #default="{ row }">
+        <el-tag size="small" type="info">{{ getTypeLabel(row.input_type) }}</el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column label="默认值" prop="default_value" show-overflow-tooltip> </el-table-column>
+    <el-table-column label="必填" width="70">
+      <template #default="{ row }">
+        <el-switch :model-value="row.required ?? false" disabled size="small" />
+      </template>
+    </el-table-column>
+    <el-table-column label="操作" width="100">
+      <template #default="{ row, $index }">
+        <el-button text type="primary" @click="handleOpenParamDialog(row, $index)">
+          <MkIcon name="icon_edit_outlined" />
+        </el-button>
+        <el-button text type="primary" @click="handleDeleteParam($index)">
+          <MkIcon name="icon_delete-trash_outlined" />
+        </el-button>
+      </template>
+    </el-table-column>
+  </MkTable>
+
+  <ModelParamDialog ref="modelParamDialogRef" @submit="handleSubmitParam" />
+</template>
diff --git a/ui/src/views/model/components/advanced-settings/ModelParamDialog.vue b/ui/src/views/model/components/advanced-settings/ModelParamDialog.vue
new file mode 100644
index 00000000000..a66ebeb3530
--- /dev/null
+++ b/ui/src/views/model/components/advanced-settings/ModelParamDialog.vue
@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { ref, useTemplateRef } from 'vue'
+import { cloneDeep } from 'lodash'
+import { MkDynamicsFormConstructor, type FormField } from '@/components/mk-dynamics-form'
+
+defineOptions({ name: 'ModelParamDialog' })
+
+const emit = defineEmits<{
+  submit: [field: FormField]
+}>()
+
+const visible = ref(false)
+const editing = ref(false)
+const currentField = ref<Partial<FormField>>({})
+const constructorRef =
+  useTemplateRef<InstanceType<typeof MkDynamicsFormConstructor>>('constructorRef')
+
+function resetData() {
+  editing.value = false
+  currentField.value = {}
+}
+
+function open(field?: FormField) {
+  resetData()
+  if (field) {
+    editing.value = true
+    currentField.value = cloneDeep(field)
+  }
+  visible.value = true
+}
+
+function handleSubmit() {
+  constructorRef.value?.validate().then(() => {
+    const field = constructorRef.value?.getData()
+    if (!field) return
+
+    emit('submit', field)
+    visible.value = false
+  })
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDialog
+    v-model="visible"
+    :title="editing ? '编辑参数' : '添加参数'"
+    @closed="resetData"
+    align-center
+  >
+    <MkDynamicsFormConstructor ref="constructorRef" v-model="currentField" />
+
+    <template #footer>
+      <el-button @click="visible = false">取消</el-button>
+      <el-button type="primary" @click="handleSubmit">
+        {{ editing ? '保存' : '添加' }}
+      </el-button>
+    </template>
+  </MkDialog>
+</template>
diff --git a/ui/src/views/model/create-model-drawer/CreateModelDrawer.vue b/ui/src/views/model/create-model-drawer/CreateModelDrawer.vue
new file mode 100644
index 00000000000..15a5e85d529
--- /dev/null
+++ b/ui/src/views/model/create-model-drawer/CreateModelDrawer.vue
@@ -0,0 +1,394 @@
+<script setup lang="ts">
+import { computed, reactive, ref } from 'vue'
+import type {
+  BaseModelOption,
+  Dict,
+  DynamicFormField,
+  ModelPayload,
+  ModelProviderItem,
+  ModelTypeOption,
+} from '@/api/types'
+import ModelApi from '@/api/admin/workspace/model/model'
+import ProviderApi from '@/api/admin/workspace/model/provider'
+import {
+  MkDynamicsForm,
+  type DynamicFormValue,
+  type FormField,
+} from '@/components/mk-dynamics-form'
+import { MsgSuccess } from '@/utils/message'
+import ModelAdvancedSettings from '@/views/model/components/advanced-settings/AdvancedSettingsTable.vue'
+
+defineOptions({ name: 'CreateModelDrawer' })
+
+const props = withDefaults(
+  defineProps<{
+    providers?: ModelProviderItem[]
+  }>(),
+  {
+    providers: () => [],
+  },
+)
+const emit = defineEmits<{
+  back: []
+  refresh: []
+}>()
+
+const visible = ref(false)
+const loading = ref(false)
+const providersLoading = ref(false)
+const currentProvider = ref<ModelProviderItem>()
+const loadedProviders = ref<ModelProviderItem[]>([])
+const providerOptions = computed(() =>
+  props.providers.length ? props.providers : loadedProviders.value,
+)
+
+const modelForm = reactive<ModelPayload>({
+  credential: {},
+  model_name: '',
+  model_type: '',
+  name: '',
+  provider: '',
+})
+
+const modelFormData = computed<Dict<DynamicFormValue>>({
+  get: () => ({
+    ...modelForm.credential,
+    model_name: modelForm.model_name,
+    model_type: modelForm.model_type,
+    name: modelForm.name,
+  }),
+  set: (value) => {
+    const credential = { ...value }
+    delete credential.model_name
+    delete credential.model_type
+    delete credential.name
+    modelForm.credential = credential
+  },
+})
+
+/* 动态表单 */
+// 模型类型选择
+const modelTypeOptions = ref<ModelTypeOption[]>([])
+function loadModelTypes(provider: ModelProviderItem) {
+  currentProvider.value = provider
+  modelForm.provider = provider.provider
+  resetModelSelection()
+  loading.value = true
+  return ProviderApi.getModelTypeList(provider.provider)
+    .then((options) => {
+      modelTypeOptions.value = options
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+function handleProviderSelect(provider: ModelProviderItem) {
+  loadModelTypes(provider)
+}
+
+function loadModelProviders() {
+  providersLoading.value = true
+  return ProviderApi.getProviderList()
+    .then((providers) => {
+      loadedProviders.value = [...providers].sort((left, right) =>
+        left.name.localeCompare(right.name),
+      )
+    })
+    .finally(() => {
+      providersLoading.value = false
+    })
+}
+
+// 基础模型选择 联动动态表单
+const dynamicsFormRef = ref<InstanceType<typeof MkDynamicsForm>>()
+const dynamicsLoading = ref(false)
+const baseModelOptions = ref<BaseModelOption[]>([])
+const credentialFields = ref<FormField[]>([])
+const modelParamsForm = ref<DynamicFormField[]>([])
+function handleModelTypeChange() {
+  modelForm.model_name = ''
+  modelForm.credential = {}
+  baseModelOptions.value = []
+  credentialFields.value = []
+  modelParamsForm.value = []
+  void dynamicsFormRef.value?.render([], modelFormData.value)
+  if (!modelForm.model_type) return
+
+  dynamicsLoading.value = true
+  ProviderApi.getBaseModelList(modelForm.provider, modelForm.model_type)
+    .then((options) => {
+      baseModelOptions.value = options
+    })
+    .finally(() => {
+      dynamicsLoading.value = false
+    })
+}
+
+function handleBaseModelChange() {
+  modelForm.credential = {}
+  credentialFields.value = []
+  modelParamsForm.value = []
+  void dynamicsFormRef.value?.render([], modelFormData.value)
+  if (!modelForm.model_name) return
+
+  dynamicsLoading.value = true
+  Promise.all([
+    ProviderApi.getModelCreateForm(modelForm.provider, modelForm.model_type, modelForm.model_name),
+    ProviderApi.getBaseModelParamsForm(
+      modelForm.provider,
+      modelForm.model_type,
+      modelForm.model_name,
+    ),
+  ])
+    .then(([fields, paramsForm]) => {
+      credentialFields.value = fields
+      modelParamsForm.value = paramsForm
+      return dynamicsFormRef.value?.render(fields, modelFormData.value)
+    })
+    .finally(() => {
+      dynamicsLoading.value = false
+    })
+}
+
+function handleBack() {
+  visible.value = false
+  emit('back')
+}
+
+// 提交
+function handleSubmit() {
+  dynamicsFormRef.value?.validate().then(() => {
+    loading.value = true
+    return ModelApi.postModel({
+      ...modelForm,
+      model_params_form: modelParamsForm.value,
+    })
+      .then(() => {
+        MsgSuccess('创建成功')
+        visible.value = false
+        emit('refresh')
+      })
+      .finally(() => {
+        loading.value = false
+      })
+  })
+}
+
+function open(provider: ModelProviderItem) {
+  if (!props.providers.length) loadModelProviders()
+  loadModelTypes(provider)
+  visible.value = true
+}
+
+function resetModelSelection() {
+  modelForm.model_type = ''
+  modelForm.model_name = ''
+  modelForm.credential = {}
+  modelTypeOptions.value = []
+  baseModelOptions.value = []
+  credentialFields.value = []
+  modelParamsForm.value = []
+  void dynamicsFormRef.value?.render([], modelFormData.value)
+}
+
+function resetData() {
+  currentProvider.value = undefined
+  loadedProviders.value = []
+  modelForm.name = ''
+  modelForm.provider = ''
+  resetModelSelection()
+  loading.value = false
+  providersLoading.value = false
+  dynamicsLoading.value = false
+}
+
+defineExpose({ open })
+</script>
+
+<template>
+  <MkDrawer
+    v-model="visible"
+    content-class="h-full p-0!"
+    direction="btt"
+    title="添加模型"
+    @closed="resetData"
+  >
+    <template #header>
+      <div class="flex w-full">
+        <h4>添加模型</h4>
+        <el-steps :active="1" finish-status="success" class="absolute-center w-75!">
+          <el-step title="选择供应商" />
+          <el-step title="添加模型" />
+        </el-steps>
+      </div>
+    </template>
+
+    <MkViewLayout :loading="loading || providersLoading" :title="currentProvider?.name ?? ''">
+      <template #aside="{ Header }">
+        <component :is="Header">
+          <el-select model-value="all" class="w-full">
+            <el-option label="全部模型" value="all" />
+          </el-select>
+        </component>
+
+        <el-scrollbar class="min-h-0 flex-1 px-4 pb-4">
+          <MkListItem
+            v-for="provider in providerOptions"
+            :key="provider.provider"
+            class="mb-1"
+            :active="currentProvider?.provider === provider.provider"
+            @click="handleProviderSelect(provider)"
+          >
+            <span class="h-6 w-6 shrink-0" :innerHTML="provider.icon" />
+            <span class="ml-3 min-w-0 flex-1 truncate" :title="provider.name">
+              {{ provider.name }}
+            </span>
+          </MkListItem>
+        </el-scrollbar>
+      </template>
+
+      <template #default="{ Footer, Header }">
+        <component :is="Header">
+          <h4>{{ currentProvider?.name }}</h4>
+        </component>
+        <div class="mx-auto w-full max-w-200 pt-4" v-loading="dynamicsLoading">
+          <MkDynamicsForm
+            ref="dynamicsFormRef"
+            v-model="modelFormData"
+            :render-data="credentialFields"
+          >
+            <template #default>
+              <el-form-item
+                class="mk-hide-asterisk"
+                prop="name"
+                :rules="{ required: true, message: '请输入模型名称', trigger: 'blur' }"
+              >
+                <template #label>
+                  <span class="inline-flex items-center gap-2">
+                    <span class="mk-required"> 模型名称</span>
+
+                    <el-tooltip content="MaxKB 中自定义的模型名称" placement="right">
+                      <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-input
+                  v-model="modelForm.name"
+                  maxlength="64"
+                  placeholder="请给基础模型设置一个名称"
+                  @blur="modelForm.name = modelForm.name.trim()"
+                />
+              </el-form-item>
+
+              <el-form-item
+                class="mk-hide-asterisk"
+                prop="model_type"
+                :rules="{ required: true, message: '请选择模型类型', trigger: 'change' }"
+              >
+                <template #label>
+                  <span class="inline-flex items-center gap-2">
+                    <span class="mk-required"> 模型类型</span>
+                    <el-tooltip placement="right">
+                      <template #content>
+                        <p>大语言模型：在智能体中与AI对话的推理模型。</p>
+                        <p>向量模型：在知识库中对文档内容进行向量化的模型。</p>
+                        <p>语音识别：在智能体中开启语音识别后用于语音转文字的模型。</p>
+                        <p>语音合成：在智能体中开启语音播放后用于文字转语音的模型。</p>
+                        <p>
+                          重排模型：在高级智能体中使用多路召回时，对候选分段进行重新排序的模型。
+                        </p>
+                        <p>视觉模型：在高级智能体中用于图片理解的视觉模型。</p>
+                        <p>图片生成：在高级智能体中用于图片生成的视觉模型。</p>
+                        <p>文生视频：在高级智能体中用于文生视频的模型。</p>
+                        <p>图生视频：在高级智能体中用于图生视频的模型。</p>
+                      </template>
+                      <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
+                    </el-tooltip>
+                  </span>
+                </template>
+                <el-select
+                  v-model="modelForm.model_type"
+                  class="w-full"
+                  placeholder="请选择模型类型"
+                  @change="handleModelTypeChange"
+                >
+                  <el-option
+                    v-for="option in modelTypeOptions"
+                    :key="option.value"
+                    :label="option.key"
+                    :value="option.value"
+                  />
+                </el-select>
+              </el-form-item>
+
+              <el-form-item
+                class="mk-hide-asterisk"
+                prop="model_name"
+                :rules="{
+                  required: true,
+                  message: '请选择基础模型，自定义输入基础模型后回车即可',
+                  trigger: 'change',
+                }"
+              >
+                <template #label>
+                  <span class="inline-flex items-center gap-2">
+                    <span class="mk-required"> 基础模型</span>
+                    <span class="text-warning">
+                      列表中未列出的模型，直接输入模型名称，回车即可添加
+                    </span>
+                  </span>
+                </template>
+                <el-select
+                  v-model="modelForm.model_name"
+                  allow-create
+                  class="w-full"
+                  default-first-option
+                  filterable
+                  placeholder="请选择基础模型，自定义输入基础模型后回车即可"
+                  @change="handleBaseModelChange"
+                >
+                  <el-option
+                    v-for="option in baseModelOptions"
+                    :key="option.name"
+                    :label="option.name"
+                    :value="option.name"
+                  >
+                    <template #default>
+                      <div class="flex items-center gap-2">
+                        <span>{{ option.name }} </span>
+                        <el-tooltip v-if="option.desc" :content="option.desc" placement="right">
+                          <MkIcon name="icon_info_outlined" class="text-N600!"></MkIcon>
+                        </el-tooltip>
+                      </div>
+                    </template>
+                  </el-option>
+                </el-select>
+              </el-form-item>
+            </template>
+          </MkDynamicsForm>
+
+          <!-- 高级设置 -->
+          <MkCollapse
+            class="mt-2"
+            v-if="
+              modelForm.model_name && modelForm.model_type && modelForm.model_type !== 'RERANKER'
+            "
+            indicator-position="after"
+            trigger-class="mb-2 w-fit"
+          >
+            <template #label>
+              <h6>高级设置</h6>
+            </template>
+            <ModelAdvancedSettings v-model="modelParamsForm" />
+          </MkCollapse>
+        </div>
+        <component :is="Footer">
+          <el-button :disabled="loading" @click="visible = false">取消</el-button>
+          <el-button :disabled="loading" @click="handleBack">上一步</el-button>
+          <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
+        </component>
+      </template>
+    </MkViewLayout>
+  </MkDrawer>
+</template>
diff --git a/ui/src/views/model/create-model/SelectProviderDrawer.vue b/ui/src/views/model/create-model-drawer/SelectProviderDrawer.vue
similarity index 60%
rename from ui/src/views/model/create-model/SelectProviderDrawer.vue
rename to ui/src/views/model/create-model-drawer/SelectProviderDrawer.vue
index 1404bb9669b..e6667dd8fa3 100644
--- a/ui/src/views/model/create-model/SelectProviderDrawer.vue
+++ b/ui/src/views/model/create-model-drawer/SelectProviderDrawer.vue
@@ -28,11 +28,16 @@ function open() {
 
 /* 供应商 */
 function loadModelProviders() {
-  return ProviderApi.getProviderList().then((providers) => {
-    providerOptions.value = [...providers].sort((left, right) =>
-      left.name.localeCompare(right.name),
-    )
-  })
+  loading.value = true
+  return ProviderApi.getProviderList()
+    .then((providers) => {
+      providerOptions.value = [...providers].sort((left, right) =>
+        left.name.localeCompare(right.name),
+      )
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 function handleProviderSelect(provider: ModelProviderItem) {
@@ -40,19 +45,19 @@ function handleProviderSelect(provider: ModelProviderItem) {
   emit('select', provider)
 }
 
-function handleModelTypeChange() {
-  // if (value === 'all') {
-  //   providerOptions.value = props.providers
-  //   return
-  // }
-  // loading.value = true
-  // ProviderApi.getProviderListByModelType(value)
-  //   .then((providers) => {
-  //     providerOptions.value = providers
-  //   })
-  //   .finally(() => {
-  //     loading.value = false
-  //   })
+function handleModelTypeChange(value: string) {
+  if (value === 'all') {
+    loadModelProviders()
+    return
+  }
+  loading.value = true
+  ProviderApi.getProviderListByModelType(value)
+    .then((providers) => {
+      providerOptions.value = providers
+    })
+    .finally(() => {
+      loading.value = false
+    })
 }
 
 defineExpose({ open })
@@ -83,19 +88,20 @@ defineExpose({ open })
           />
         </el-select>
       </div>
+      <div v-loading="loading">
+        <div class="grid grid-cols-2 gap-4">
+          <template v-for="provider in providerOptions" :key="provider.provider">
+            <el-card shadow="hover" @click="handleProviderSelect(provider)">
+              <div class="flex">
+                <span class="h-6 w-6 shrink-0" :innerHTML="provider.icon" />
+                <span class="ml-3 font-medium">{{ provider.name }}</span>
+              </div>
+            </el-card>
+          </template>
+        </div>
 
-      <div v-loading="loading" class="grid grid-cols-2 gap-4">
-        <template v-for="provider in providerOptions" :key="provider.provider">
-          <el-card shadow="hover" @click="handleProviderSelect(provider)">
-            <div class="flex">
-              <span class="h-6 w-6 shrink-0" :innerHTML="provider.icon" />
-              <span class="ml-3 font-medium">{{ provider.name }}</span>
-            </div>
-          </el-card>
-        </template>
+        <MkEmpty v-if="!providerOptions.length" class="mt-24" />
       </div>
-
-      <MkEmpty v-if="!providerOptions.length" class="mt-24" />
     </div>
   </MkDrawer>
 </template>
diff --git a/ui/src/views/model/create-model/CreateModelDrawer.vue b/ui/src/views/model/create-model/CreateModelDrawer.vue
deleted file mode 100644
index 0c64b7b0ba3..00000000000
--- a/ui/src/views/model/create-model/CreateModelDrawer.vue
+++ /dev/null
@@ -1,298 +0,0 @@
-<script setup lang="ts">
-import { computed, nextTick, reactive, ref } from 'vue'
-import type { FormInstance, FormRules } from 'element-plus'
-import { InfoFilled } from '@element-plus/icons-vue'
-import type {
-  BaseModelOption,
-  DynamicFormField,
-  ModelPayload,
-  ModelProviderItem,
-  ModelTypeOption,
-} from '@/api/types'
-import ModelApi from '@/api/admin/workspace/model/model'
-import ProviderApi from '@/api/admin/workspace/model/provider'
-import { MsgSuccess } from '@/utils/message'
-
-defineOptions({ name: 'CreateModelDrawer' })
-
-defineProps<{
-  providers: ModelProviderItem[]
-}>()
-const emit = defineEmits<{
-  back: []
-  refresh: []
-}>()
-
-const formRef = ref<FormInstance>()
-const visible = ref(false)
-const loading = ref(false)
-const optionLoading = ref(false)
-const selectedProvider = ref<ModelProviderItem>()
-const modelTypeOptions = ref<ModelTypeOption[]>([])
-const baseModelOptions = ref<BaseModelOption[]>([])
-const credentialFields = ref<DynamicFormField[]>([])
-const modelParamsForm = ref<DynamicFormField[]>([])
-
-const modelForm = reactive<ModelPayload>({
-  credential: {},
-  model_name: '',
-  model_type: '',
-  name: '',
-  provider: '',
-})
-
-const formRules = computed<FormRules>(() => {
-  const rules: FormRules = {
-    model_name: [{ required: true, message: '请选择或输入基础模型', trigger: 'change' }],
-    model_type: [{ required: true, message: '请选择模型类型', trigger: 'change' }],
-    name: [{ required: true, message: '请输入模型名称', trigger: 'blur' }],
-  }
-
-  return rules
-})
-
-function resetModelSelection() {
-  modelForm.model_type = ''
-  modelForm.model_name = ''
-  modelForm.credential = {}
-  modelTypeOptions.value = []
-  baseModelOptions.value = []
-  credentialFields.value = []
-  modelParamsForm.value = []
-  formRef.value?.clearValidate()
-}
-
-function resetData() {
-  selectedProvider.value = undefined
-  modelForm.name = ''
-  modelForm.provider = ''
-  resetModelSelection()
-  loading.value = false
-  optionLoading.value = false
-}
-
-function loadModelTypes(provider: ModelProviderItem) {
-  selectedProvider.value = provider
-  modelForm.provider = provider.provider
-  resetModelSelection()
-  optionLoading.value = true
-  return ProviderApi.getModelTypeList(provider.provider)
-    .then((options) => {
-      modelTypeOptions.value = options
-    })
-    .finally(() => {
-      optionLoading.value = false
-    })
-}
-
-function open(provider: ModelProviderItem) {
-  visible.value = true
-  loadModelTypes(provider)
-}
-
-function handleProviderSelect(provider: ModelProviderItem) {
-  loadModelTypes(provider)
-}
-
-function handleModelTypeChange() {
-  modelForm.model_name = ''
-  modelForm.credential = {}
-  baseModelOptions.value = []
-  credentialFields.value = []
-  modelParamsForm.value = []
-  if (!modelForm.model_type) return
-
-  optionLoading.value = true
-  ProviderApi.getBaseModelList(modelForm.provider, modelForm.model_type)
-    .then((options) => {
-      baseModelOptions.value = options
-    })
-    .finally(() => {
-      optionLoading.value = false
-    })
-}
-
-function handleBaseModelChange() {
-  modelForm.credential = {}
-  credentialFields.value = []
-  modelParamsForm.value = []
-  if (!modelForm.model_name) return
-
-  optionLoading.value = true
-  Promise.all([
-    ProviderApi.getModelCreateForm(modelForm.provider, modelForm.model_type, modelForm.model_name),
-    ProviderApi.getBaseModelParamsForm(
-      modelForm.provider,
-      modelForm.model_type,
-      modelForm.model_name,
-    ),
-  ])
-    .then(([fields, paramsForm]) => {
-      credentialFields.value = fields
-      modelParamsForm.value = paramsForm
-      modelForm.credential = Object.fromEntries(
-        fields.map((field) => [field.field, field.default_value ?? '']),
-      )
-      nextTick(() => formRef.value?.clearValidate())
-    })
-    .finally(() => {
-      optionLoading.value = false
-    })
-}
-
-function handleBack() {
-  visible.value = false
-  emit('back')
-}
-
-function handleSubmit() {
-  formRef.value?.validate((valid) => {
-    if (!valid) return
-
-    loading.value = true
-    ModelApi.postModel({
-      ...modelForm,
-      model_params_form: modelParamsForm.value,
-    })
-      .then(() => {
-        MsgSuccess('创建成功')
-        visible.value = false
-        emit('refresh')
-      })
-      .finally(() => {
-        loading.value = false
-      })
-  })
-}
-
-defineExpose({ open })
-</script>
-
-<template>
-  <MkDrawer
-    v-model="visible"
-    content-class="h-full p-0!"
-    direction="btt"
-    title="添加模型"
-    @closed="resetData"
-  >
-    <template #header>
-      <div class="flex w-full">
-        <h4>添加模型</h4>
-        <el-steps :active="1" finish-status="success" class="absolute-center w-75!">
-          <el-step title="选择供应商" />
-          <el-step title="添加模型" />
-        </el-steps>
-      </div>
-    </template>
-
-    <MkViewLayout :loading="optionLoading" :title="selectedProvider?.name ?? ''">
-      <template #aside="{ Header }">
-        <component :is="Header">
-          <el-select model-value="all" class="w-full">
-            <el-option label="全部模型" value="all" />
-          </el-select>
-        </component>
-
-        <el-scrollbar class="min-h-0 flex-1 px-4 pb-4">
-          <MkListItem
-            v-for="provider in providers"
-            :key="provider.provider"
-            class="mb-1"
-            :active="selectedProvider?.provider === provider.provider"
-            @click="handleProviderSelect(provider)"
-          >
-            <span class="h-6 w-6 shrink-0" :innerHTML="provider.icon" />
-            <span class="ml-3 min-w-0 flex-1 truncate" :title="provider.name">
-              {{ provider.name }}
-            </span>
-          </MkListItem>
-        </el-scrollbar>
-      </template>
-
-      <template #default="{ Header }">
-        <component :is="Header">
-          <h4>{{ selectedProvider?.name }}</h4>
-        </component>
-        <div class="mx-auto w-full max-w-200 pt-4">
-          <el-form
-            ref="formRef"
-            :model="modelForm"
-            :rules="formRules"
-            label-position="top"
-            require-asterisk-position="right"
-            @submit.prevent
-          >
-            <el-form-item prop="name">
-              <template #label>
-                <span class="inline-flex items-center gap-1">
-                  模型名称
-                  <el-tooltip content="用于在 MaxKB 中识别该模型" placement="top">
-                    <MkIcon :icon="InfoFilled" class="text-N600" />
-                  </el-tooltip>
-                </span>
-              </template>
-              <el-input
-                v-model="modelForm.name"
-                maxlength="64"
-                placeholder="请给基础模型设置一个名称"
-                @blur="modelForm.name = modelForm.name.trim()"
-              />
-            </el-form-item>
-
-            <el-form-item label="模型类型" prop="model_type">
-              <el-select
-                v-model="modelForm.model_type"
-                class="w-full"
-                placeholder="请选择模型类型"
-                @change="handleModelTypeChange"
-              >
-                <el-option
-                  v-for="option in modelTypeOptions"
-                  :key="option.value"
-                  :label="option.key"
-                  :value="option.value"
-                />
-              </el-select>
-            </el-form-item>
-
-            <el-form-item prop="model_name">
-              <template #label>
-                <span>
-                  基础模型
-                  <span class="ml-2 font-normal text-warning">
-                    列表中未列出的模型，直接输入模型名称，回车即可添加
-                  </span>
-                </span>
-              </template>
-              <el-select
-                v-model="modelForm.model_name"
-                allow-create
-                class="w-full"
-                default-first-option
-                filterable
-                placeholder="请选择基础模型，自定义输入基础模型后回车即可"
-                @change="handleBaseModelChange"
-              >
-                <el-option
-                  v-for="option in baseModelOptions"
-                  :key="option.name"
-                  :label="option.name"
-                  :value="option.name"
-                />
-              </el-select>
-            </el-form-item>
-
-            <template v-for="field in credentialFields" :key="field.field"> </template>
-          </el-form>
-        </div>
-      </template>
-    </MkViewLayout>
-
-    <template #footer>
-      <el-button :disabled="loading" @click="visible = false">取消</el-button>
-      <el-button :disabled="loading" @click="handleBack">上一步</el-button>
-      <el-button type="primary" :loading="loading" @click="handleSubmit">保存</el-button>
-    </template>
-  </MkDrawer>
-</template>
diff --git a/ui/src/views/system/chat/users/UserListView.vue b/ui/src/views/system/chat/users/UserListView.vue
index 8bfeaee0f32..cf39b7520c8 100644
--- a/ui/src/views/system/chat/users/UserListView.vue
+++ b/ui/src/views/system/chat/users/UserListView.vue
@@ -261,7 +261,7 @@ onMounted(() => loadChatUsers())
                 />
               </span>
               <el-divider direction="vertical" />
-              <div class="flex gap-1">
+              <div class="flex">
                 <el-tooltip content="编辑" placement="top">
                   <el-button type="primary" text @click.stop="handleOpenUserFormDrawer(row)">
                     <mk-icon name="icon_edit_outlined"></mk-icon>
diff --git a/ui/src/views/system/identity/users/UserListView.vue b/ui/src/views/system/identity/users/UserListView.vue
index 379ed134472..5debb0834b9 100644
--- a/ui/src/views/system/identity/users/UserListView.vue
+++ b/ui/src/views/system/identity/users/UserListView.vue
@@ -236,7 +236,7 @@ onMounted(() => loadSystemUsers())
                 />
               </span>
               <el-divider direction="vertical" />
-              <div class="flex gap-1">
+              <div class="flex">
                 <el-tooltip content="编辑" placement="top">
                   <el-button type="primary" text @click.stop="handleOpenUserFormDrawer(row)">
                     <mk-icon name="icon_edit_outlined"></mk-icon>
diff --git a/ui/src/views/system/operate-logs/dialog/OperateLogDetailDialog.vue b/ui/src/views/system/operate-logs/dialog/OperateLogDetailDialog.vue
index 8665e521075..26be29cea1c 100644
--- a/ui/src/views/system/operate-logs/dialog/OperateLogDetailDialog.vue
+++ b/ui/src/views/system/operate-logs/dialog/OperateLogDetailDialog.vue
@@ -15,12 +15,11 @@ defineExpose({ open })
 </script>
 
 <template>
-  <el-dialog v-model="visible" title="日志详情" width="720" destroy-on-close>
-    <el-scrollbar height="400px" class="rounded border">
-      <pre class="whitespace-pre-wrap break-words p-4">{{ formattedDetails }}</pre>
-    </el-scrollbar>
+  <MkDialog v-model="visible" title="API详情" width="720" destroy-on-close>
+    <pre class="whitespace-pre-wrap break-words p-4">{{ formattedDetails }}</pre>
+
     <template #footer>
       <el-button @click="visible = false">关闭</el-button>
     </template>
-  </el-dialog>
+  </MkDialog>
 </template>
diff --git a/ui/src/views/tool/ToolDebugDrawer.vue b/ui/src/views/tool/ToolDebugDrawer.vue
index c49d841c69a..d8998d0a6f2 100644
--- a/ui/src/views/tool/ToolDebugDrawer.vue
+++ b/ui/src/views/tool/ToolDebugDrawer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, nextTick, reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
 import type { FormInstance, FormRules } from 'element-plus'
 import { Back } from '@element-plus/icons-vue'
 import type { ToolDebugPayload, ToolInitField, ToolPayload } from '@/api/types'
@@ -71,8 +72,8 @@ function resetData() {
 function open(tool: ToolPayload) {
   resetData()
   debugForm.code = tool.code ?? ''
-  debugForm.input_field_list = structuredClone(tool.input_field_list ?? [])
-  debugForm.init_field_list = structuredClone(tool.init_field_list ?? [])
+  debugForm.input_field_list = cloneDeep(tool.input_field_list ?? [])
+  debugForm.init_field_list = cloneDeep(tool.init_field_list ?? [])
   const savedInitParams =
     typeof tool.init_params === 'object' && tool.init_params ? tool.init_params : {}
   debugForm.init_params = {
@@ -108,7 +109,7 @@ function handleRun() {
 
     loading.value = true
     showResult.value = false
-    ToolApi.postToolDebug(structuredClone(debugForm))
+    ToolApi.postToolDebug(cloneDeep(debugForm))
       .then((result) => {
         debugSucceeded.value = true
         debugResult.value = result
diff --git a/ui/src/views/tool/form/ToolFormDrawer.vue b/ui/src/views/tool/form/ToolFormDrawer.vue
index 004027db536..aab0548e015 100644
--- a/ui/src/views/tool/form/ToolFormDrawer.vue
+++ b/ui/src/views/tool/form/ToolFormDrawer.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ToolInitField, ToolInputField, ToolItem } from '@/api/types'
 import ToolApi from '@/api/admin/workspace/tool/tool'
@@ -84,7 +85,7 @@ function handleOpenDebug() {
 function open(tool?: ToolItem) {
   if (tool) {
     editId.value = tool.id
-    Object.assign(toolForm, structuredClone(tool))
+    Object.assign(toolForm, cloneDeep(tool))
   }
   visible.value = true
   originalForm.value = JSON.stringify(toolForm)
diff --git a/ui/src/views/tool/form/components/init-field/InitFieldDialog.vue b/ui/src/views/tool/form/components/init-field/InitFieldDialog.vue
index 04135c17219..7fe9e428f9a 100644
--- a/ui/src/views/tool/form/components/init-field/InitFieldDialog.vue
+++ b/ui/src/views/tool/form/components/init-field/InitFieldDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { nextTick, reactive, ref, toRaw } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ToolInitField } from '@/api/types'
 
@@ -35,7 +36,7 @@ const formRules: FormRules<ToolInitField> = {
 function open(field?: ToolInitField) {
   if (field) {
     isEdit.value = true
-    Object.assign(initFieldForm, structuredClone(toRaw(field)))
+    Object.assign(initFieldForm, cloneDeep(field))
   }
 
   visible.value = true
@@ -59,7 +60,7 @@ function handleSubmit() {
   formRef.value?.validate((valid) => {
     if (!valid) return
 
-    emit('refresh', structuredClone(toRaw(initFieldForm)))
+    emit('refresh', cloneDeep(initFieldForm))
     visible.value = false
   })
 }
diff --git a/ui/src/views/tool/form/components/init-field/InitFieldTable.vue b/ui/src/views/tool/form/components/init-field/InitFieldTable.vue
index 71fe7767abc..2f7a681008b 100644
--- a/ui/src/views/tool/form/components/init-field/InitFieldTable.vue
+++ b/ui/src/views/tool/form/components/init-field/InitFieldTable.vue
@@ -45,7 +45,7 @@ function handleDeleteInitField(index: number) {
         <span>添加</span>
       </el-button>
     </div>
-    <el-table :data="initFields">
+    <MkTable :data="initFields" size="small">
       <el-table-column label="参数" prop="field" min-width="140" />
       <el-table-column label="组件类型" min-width="120">
         <template #default="{ row }">
@@ -69,7 +69,7 @@ function handleDeleteInitField(index: number) {
           </el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </MkTable>
     <InitFieldDialog ref="initFieldDialogRef" @refresh="handleAddInitField" />
   </section>
 </template>
diff --git a/ui/src/views/tool/form/components/input-field/InputFieldDialog.vue b/ui/src/views/tool/form/components/input-field/InputFieldDialog.vue
index 95be316b3b9..b56ca4f0d95 100644
--- a/ui/src/views/tool/form/components/input-field/InputFieldDialog.vue
+++ b/ui/src/views/tool/form/components/input-field/InputFieldDialog.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { nextTick, reactive, ref, toRaw } from 'vue'
+import { nextTick, reactive, ref } from 'vue'
+import { cloneDeep } from 'lodash'
 import type { FormInstance, FormRules } from 'element-plus'
 import type { ToolInputField, ToolInputFieldType } from '@/api/types'
 
@@ -27,7 +28,7 @@ const formRules: FormRules<ToolInputField> = {
 function open(field?: ToolInputField) {
   if (field) {
     isEdit.value = true
-    Object.assign(inputFieldForm, structuredClone(toRaw(field)))
+    Object.assign(inputFieldForm, cloneDeep(field))
   }
 
   visible.value = true
@@ -37,7 +38,7 @@ function open(field?: ToolInputField) {
 function handleSubmit() {
   formRef.value?.validate((valid) => {
     if (!valid) return
-    emit('refresh', structuredClone(toRaw(inputFieldForm)))
+    emit('refresh', cloneDeep(inputFieldForm))
     visible.value = false
   })
 }
diff --git a/ui/src/views/tool/form/components/input-field/InputFieldTable.vue b/ui/src/views/tool/form/components/input-field/InputFieldTable.vue
index 51c9417b068..0c3006c8781 100644
--- a/ui/src/views/tool/form/components/input-field/InputFieldTable.vue
+++ b/ui/src/views/tool/form/components/input-field/InputFieldTable.vue
@@ -41,7 +41,7 @@ function handleDeleteInputField(index: number) {
         <span>添加</span>
       </el-button>
     </div>
-    <el-table :data="inputFields">
+    <MkTable :data="inputFields" size="small">
       <el-table-column label="参数" prop="name" min-width="140" />
       <el-table-column label="数据类型" prop="type" min-width="100">
         <template #default="{ row }">
@@ -68,7 +68,7 @@ function handleDeleteInputField(index: number) {
           </el-button>
         </template>
       </el-table-column>
-    </el-table>
+    </MkTable>
     <InputFieldDialog ref="inputFieldDialogRef" @refresh="handleAddInputField" />
   </section>
 </template>
diff --git a/ui/src/views/workflow/ApplicationWorkflowView.vue b/ui/src/views/workflow/ApplicationWorkflowView.vue
index a808389e53c..398777c0d86 100644
--- a/ui/src/views/workflow/ApplicationWorkflowView.vue
+++ b/ui/src/views/workflow/ApplicationWorkflowView.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { computed, nextTick, onBeforeUnmount, onMounted, provide, ref, useTemplateRef } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
+import { cloneDeep } from 'lodash'
 import type LogicFlow from '@logicflow/core'
 import type { Action } from 'element-plus'
 import ApplicationApi from '@/api/admin/workspace/application/application.ts'
@@ -15,7 +16,7 @@ import WorkflowComponentMenu from './components/WorkflowComponentMenu.vue'
 defineOptions({ name: 'ApplicationWorkflowView' })
 
 const DEFAULT_WORKFLOW: LogicFlow.GraphConfigData = {
-  nodes: structuredClone(defaultNodes),
+  nodes: cloneDeep(defaultNodes),
   edges: [],
 }
 
@@ -56,7 +57,7 @@ function getGraphData() {
 }
 
 function setSavedWorkflow(graphData: LogicFlow.GraphData) {
-  savedWorkflow.value = structuredClone(graphData)
+  savedWorkflow.value = cloneDeep(graphData)
 }
 
 function hasUnsavedChanges() {
@@ -97,7 +98,7 @@ function loadApplicationDetail() {
       const workflow = application.work_flow?.nodes?.length
         ? application.work_flow
         : DEFAULT_WORKFLOW
-      workflowRef.value?.render(structuredClone(workflow))
+      workflowRef.value?.render(cloneDeep(workflow))
 
       return nextTick().then(() => {
         const graphData = getGraphData()
diff --git a/ui/src/workflow-canvas/core/workflow-node.ts b/ui/src/workflow-canvas/core/workflow-node.ts
index 7b28e9f9309..73ad5b3af8d 100644
--- a/ui/src/workflow-canvas/core/workflow-node.ts
+++ b/ui/src/workflow-canvas/core/workflow-node.ts
@@ -1,4 +1,5 @@
 import { createApp, reactive, type Component } from 'vue'
+import { cloneDeep } from 'lodash'
 import {
   h as createLogicFlowElement,
   HtmlNode,
@@ -42,7 +43,7 @@ export class WorkflowNodeView extends HtmlNode {
     const nodeModel = props.model as unknown as WorkflowNodeModel
     const definition = BasicComponentsNode[nodeModel.type as WorkflowNodeType]
     if (definition && !nodeModel.properties.config) {
-      nodeModel.properties.config = structuredClone(definition.properties.config ?? {})
+      nodeModel.properties.config = cloneDeep(definition.properties.config ?? {})
     }
     nodeModel.properties.stepName = this.getUniqueNodeName(
       props.graphModel,
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index e73bd80810d..14edc98823e 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { inject, nextTick, onBeforeUnmount, onMounted, ref, shallowRef, useTemplateRef } from 'vue'
-
+import { cloneDeep } from 'lodash'
 import LogicFlow, { type GraphModel } from '@logicflow/core'
 import '@logicflow/core/dist/index.css'
 import { SelectionSelect } from '@logicflow/extension'
@@ -133,7 +133,7 @@ function onmousedown(shapeItem: ShapeItem) {
   if (shapeItem.type) {
     lf.value.dnd.startDrag({
       type: shapeItem.type,
-      properties: structuredClone(shapeItem.properties ?? {}),
+      properties: cloneDeep(shapeItem.properties ?? {}),
     })
   }
   shapeItem.callback?.(lf.value)
@@ -149,7 +149,7 @@ function addNode(shapeItem: ShapeItem) {
   )
   const newNode = lf.value.graphModel.addNode({
     type: shapeItem.type as string,
-    properties: structuredClone(shapeItem.properties ?? {}),
+    properties: cloneDeep(shapeItem.properties ?? {}),
     x: canvasOverlayPosition.x,
     y: canvasOverlayPosition.y,
   })