diff --git a/ui/src/assets/workflow/icon_condition.svg b/ui/src/assets/workflow/icon_condition.svg
new file mode 100644
index 00000000000..2bc80a2125e
--- /dev/null
+++ b/ui/src/assets/workflow/icon_condition.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.2404 11.9757C14.2022 11.8917 14.1406 11.8206 14.0629 11.7709C13.9853 11.7213 13.8949 11.6951 13.8027 11.6957H12.6518V9.16918C12.6518 7.44347 11.069 6.00118 8.96725 5.65376V1.63242C8.96725 1.37615 8.86544 1.13037 8.68423 0.949156C8.50302 0.767942 8.25724 0.666138 8.00096 0.666138C7.74469 0.666138 7.49891 0.767942 7.3177 0.949156C7.13648 1.13037 7.03468 1.37615 7.03468 1.63242V5.65604C4.93411 6.00233 3.34896 7.44576 3.34896 9.17033V11.6945H2.19811C2.07221 11.6959 1.95172 11.746 1.86184 11.8341C1.77197 11.9223 1.71965 12.0418 1.71582 12.1677V12.1837C1.71582 12.2797 1.74782 12.3779 1.80953 12.4614L3.76496 15.1345C3.80786 15.1932 3.86352 15.2413 3.92775 15.2754C3.99197 15.3094 4.06308 15.3284 4.13572 15.3309C4.20836 15.3334 4.28062 15.3195 4.34705 15.29C4.41349 15.2605 4.47237 15.2163 4.51925 15.1608L6.80153 12.4899C6.86177 12.42 6.9005 12.3341 6.91307 12.2427C6.92564 12.1512 6.91151 12.0581 6.87239 11.9745C6.83423 11.8906 6.7726 11.8195 6.69493 11.7698C6.61726 11.7201 6.52688 11.694 6.43468 11.6945H5.28382V9.16918C5.28382 8.3829 6.39925 7.50747 8.00039 7.50747C9.60153 7.50747 10.7192 8.3829 10.7192 9.16918V11.6922H9.56611C9.47671 11.6918 9.38902 11.7166 9.31303 11.7637C9.23705 11.8108 9.17583 11.8783 9.13639 11.9585C9.10152 12.026 9.08349 12.1009 9.08382 12.1768C9.08444 12.2795 9.11721 12.3794 9.17754 12.4625L11.133 15.1368C11.1759 15.1955 11.2315 15.2436 11.2957 15.2777C11.36 15.3117 11.4311 15.3307 11.5037 15.3332C11.5764 15.3357 11.6486 15.3217 11.7151 15.2923C11.7815 15.2628 11.8404 15.2186 11.8872 15.1631L14.1684 12.4888C14.242 12.404 14.2833 12.2959 14.285 12.1837V12.1688C14.2839 12.1015 14.2683 12.0352 14.2392 11.9745L14.2404 11.9757Z" fill="white"/>
+</svg>
diff --git a/ui/src/views/VIEW_README.md b/ui/src/views/VIEW_README.md
index 569983e7dc3..174fea5632d 100644
--- a/ui/src/views/VIEW_README.md
+++ b/ui/src/views/VIEW_README.md
@@ -273,3 +273,28 @@ Dialog。新增或重命名文件时，应同步更新所有导入和页面功
 - Element Plus 登录表单通过 `formEl.validate((valid, fields) => {})` 回调处理校验结果。
 - LDAP 与本地账号登录保留清晰的条件分支，请求结果使用 `.then().catch()` 处理；未经明确要求，
   不改写为 `try/catch` 或额外抽象登录提交流程。
+
+## 工作流页面布局
+
+`workflow/components/WorkflowViewLayout.vue` 由 `ApplicationWorkflowView` 和 `ToolWorkflowView`
+共同使用，统一全屏容器、页面头部、返回按钮、标题和保存时间展示。通过 `loading`、`title`、
+`saveTime` 传入展示状态，点击返回按钮触发 `back` 事件。
+
+`actions` 插槽用于添加组件、保存、调试等页面操作，默认插槽放置画布及页面浮层；画布继续使用
+`min-h-0 flex-1` 占满头部下方空间。页面保留画布 Ref、资源与模式配置、接口调用、保存和退出确认
+逻辑，布局组件只负责展示。
+
+## 工作流默认模型设置
+
+`workflow/components/DefaultModelSetting.vue` 维护默认模型面板，按模型类型组织本地暂存配置。
+调用方通过 `show` 控制显示，通过 `v-model` 接收保存后的配置，通过 `save` 执行页面持久化，
+通过 `close` 关闭面板。只读场景传入 `readonly`。编辑与参数弹窗不直接修改父级配置；有修改时
+点击面板外会区分保存、丢弃和取消。
+
+模型查询通过必填的完整 `modelApi` 对象执行（类型使用 `typeof ModelApi`），可用 `modelQuery`
+补充资源范围需要的查询参数；调用方负责选择 API，组件不从 URL 推断资源范围。供应商列表通过
+当前公共供应商接口查询。模型选择及参数设置复用 `ModelSelect`，重排序模型隐藏参数入口。
+
+传入 `workflowRef` 后支持“应用到所有节点”：只切换节点的模型来源，保留自定义模型 ID 和参数，
+递归处理循环体，并保留基本信息节点中关闭的语音/长期记忆配置及浏览器语音播放模式。
+该操作修改画布，由页面原有保存流程持久化，不自动提交面板内暂存的默认模型设置。
diff --git a/ui/src/views/application/create-application/template.ts b/ui/src/views/application/create-application/template.ts
index 3160cc90277..f2cca49a79e 100644
--- a/ui/src/views/application/create-application/template.ts
+++ b/ui/src/views/application/create-application/template.ts
@@ -109,6 +109,12 @@ export const applicationTemplate = {
               },
             ],
           },
+          fields: [
+            {
+              label: '\u7528\u6237\u95ee\u9898',
+              value: 'question',
+            },
+          ],
           height: 456,
           showNode: true,
           stepName: '\u5f00\u59cb',
@@ -168,8 +174,8 @@ export const applicationTemplate = {
         },
       },
       {
-        x: 1674.3959141131284,
-        y: 355.1933576515028,
+        x: 1822.6628761517477,
+        y: 376.8206988860253,
         id: '420a6e4f-44ff-4847-bb81-0923630846b5',
         type: 'condition-node',
         properties: {
@@ -182,7 +188,7 @@ export const applicationTemplate = {
               },
             ],
           },
-          height: 521,
+          height: 569,
           showNode: true,
           stepName: '\u5224\u65ad\u5668',
           condition: 'AND',
@@ -225,24 +231,24 @@ export const applicationTemplate = {
             {
               id: '7887',
               index: 0,
-              height: 131,
+              height: 139,
             },
             {
               id: '6847',
               index: 1,
-              height: 131,
+              height: 139,
             },
             {
               id: '2794',
               index: 2,
-              height: 53,
+              height: 85,
             },
           ],
         },
       },
       {
-        x: 2355.996367613652,
-        y: -103.96767312799687,
+        x: 2487.238292469783,
+        y: -96.76253793813842,
         id: '36a440a9-5b00-4d82-b13a-8e7819112918',
         type: 'reply-node',
         properties: {
@@ -269,8 +275,8 @@ export const applicationTemplate = {
         },
       },
       {
-        x: 2359.3250515262043,
-        y: 660.4876603554833,
+        x: 2488.3008451532673,
+        y: 660.574819248909,
         id: 'f7c3b4a2-cb80-4e47-b050-7fef0315daaf',
         type: 'ai-chat-node',
         properties: {
@@ -323,8 +329,8 @@ export const applicationTemplate = {
         },
       },
       {
-        x: 2361.1510484115624,
-        y: 1489.7353190606702,
+        x: 2489.758837821939,
+        y: 1491.5462871796265,
         id: '04dd6c1e-95f9-4757-bb3e-134d503fce54',
         type: 'reply-node',
         properties: {
@@ -392,8 +398,8 @@ export const applicationTemplate = {
         id: '6a8d23d9-5179-424e-80c2-f08d37cdb8d4',
         type: 'app-edge',
         endPoint: {
-          x: 1514.3959141131284,
-          y: 355.1933576515028,
+          x: 1522.6628761517477,
+          y: 376.8206988860253,
         },
         pointsList: [
           {
@@ -405,12 +411,12 @@ export const applicationTemplate = {
             y: 443.29042897959704,
           },
           {
-            x: 1414.3959141131284,
-            y: 355.1933576515028,
+            x: 1422.6628761517477,
+            y: 376.8206988860253,
           },
           {
-            x: 1514.3959141131284,
-            y: 355.1933576515028,
+            x: 1522.6628761517477,
+            y: 376.8206988860253,
           },
         ],
         properties: {},
@@ -427,31 +433,31 @@ export const applicationTemplate = {
         id: '56006748-d9fe-491b-a14b-04fd568cac08',
         type: 'app-edge',
         endPoint: {
-          x: 2195.996367613652,
-          y: -103.96767312799687,
+          x: 2327.238292469783,
+          y: -96.76253793813842,
         },
         pointsList: [
           {
-            x: 1834.3959141131284,
-            y: 235.19335765150282,
+            x: 2122.662876151749,
+            y: 236.8206988860253,
           },
           {
-            x: 1934.3959141131284,
-            y: 235.19335765150282,
+            x: 2222.662876151749,
+            y: 236.8206988860253,
           },
           {
-            x: 2095.996367613652,
-            y: -103.96767312799687,
+            x: 2227.238292469783,
+            y: -96.76253793813842,
           },
           {
-            x: 2195.996367613652,
-            y: -103.96767312799687,
+            x: 2327.238292469783,
+            y: -96.76253793813842,
           },
         ],
         properties: {},
         startPoint: {
-          x: 1834.3959141131284,
-          y: 235.19335765150282,
+          x: 2122.662876151749,
+          y: 236.8206988860253,
         },
         sourceNodeId: '420a6e4f-44ff-4847-bb81-0923630846b5',
         targetNodeId: '36a440a9-5b00-4d82-b13a-8e7819112918',
@@ -462,31 +468,31 @@ export const applicationTemplate = {
         id: '9bc8721b-07aa-4730-9347-910ed64e26b9',
         type: 'app-edge',
         endPoint: {
-          x: 2199.3250515262043,
-          y: 660.4876603554833,
+          x: 2328.3008451532673,
+          y: 660.574819248909,
         },
         pointsList: [
           {
-            x: 1834.3959141131284,
-            y: 374.1933576515028,
+            x: 2122.662876151749,
+            y: 383.8206988860253,
           },
           {
-            x: 1934.3959141131284,
-            y: 374.1933576515028,
+            x: 2222.662876151749,
+            y: 383.8206988860253,
           },
           {
-            x: 2099.3250515262043,
-            y: 660.4876603554833,
+            x: 2228.3008451532673,
+            y: 660.574819248909,
           },
           {
-            x: 2199.3250515262043,
-            y: 660.4876603554833,
+            x: 2328.3008451532673,
+            y: 660.574819248909,
           },
         ],
         properties: {},
         startPoint: {
-          x: 1834.3959141131284,
-          y: 374.1933576515028,
+          x: 2122.662876151749,
+          y: 383.8206988860253,
         },
         sourceNodeId: '420a6e4f-44ff-4847-bb81-0923630846b5',
         targetNodeId: 'f7c3b4a2-cb80-4e47-b050-7fef0315daaf',
@@ -497,31 +503,31 @@ export const applicationTemplate = {
         id: 'c276a5b6-ec29-4ab9-b911-a0a929ff193f',
         type: 'app-edge',
         endPoint: {
-          x: 2201.1510484115624,
-          y: 1489.7353190606702,
+          x: 2329.758837821939,
+          y: 1491.5462871796265,
         },
         pointsList: [
           {
-            x: 1834.3959141131284,
-            y: 474.1933576515028,
+            x: 2122.662876151749,
+            y: 503.8206988860254,
           },
           {
-            x: 1934.3959141131284,
-            y: 474.1933576515028,
+            x: 2222.662876151749,
+            y: 503.8206988860254,
           },
           {
-            x: 2101.1510484115624,
-            y: 1489.7353190606702,
+            x: 2229.758837821939,
+            y: 1491.5462871796265,
           },
           {
-            x: 2201.1510484115624,
-            y: 1489.7353190606702,
+            x: 2329.758837821939,
+            y: 1491.5462871796265,
           },
         ],
         properties: {},
         startPoint: {
-          x: 1834.3959141131284,
-          y: 474.1933576515028,
+          x: 2122.662876151749,
+          y: 503.8206988860254,
         },
         sourceNodeId: '420a6e4f-44ff-4847-bb81-0923630846b5',
         targetNodeId: '04dd6c1e-95f9-4757-bb3e-134d503fce54',
diff --git a/ui/src/views/workflow/ApplicationWorkflowView.vue b/ui/src/views/workflow/ApplicationWorkflowView.vue
index 161605217e1..0359407e67c 100644
--- a/ui/src/views/workflow/ApplicationWorkflowView.vue
+++ b/ui/src/views/workflow/ApplicationWorkflowView.vue
@@ -8,12 +8,12 @@ import { cloneDeep } from 'lodash'
 import ApplicationApi from '@/api/admin/workspace/application/application.ts'
 import { RESOURCE_TYPE } from '@/api/enums'
 import type { ApplicationDetail } from '@/api/types'
-import { datetimeFormat } from '@/utils/time'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import WorkflowCanvas from '@/workflow-canvas/index.vue'
 import { defaultApplicationNodes } from '@/workflow-canvas/config/node-mapping'
 import { WorkflowMode, type ShapeItem } from '@/workflow-canvas/types'
-import WorkflowComponentMenu from './components/WorkflowComponentMenu.vue'
+import CreateNodeMenu from './components/CreateNodeMenu.vue'
+import WorkflowViewLayout from './components/WorkflowViewLayout.vue'
 import Conversation from '@/components/conversation/index.vue'
 
 defineOptions({ name: 'ApplicationWorkflowView' })
@@ -35,10 +35,6 @@ function handleAddNode(shapeItem: ShapeItem) {
   workflowRef.value?.addNode(shapeItem)
 }
 
-function handleDragNode(shapeItem: ShapeItem, event: PointerEvent) {
-  workflowRef.value?.onmousedown(shapeItem, event)
-}
-
 /* 智能体工作流加载与保存 */
 const applicationDetail = ref<ApplicationDetail>()
 const loading = ref(false)
@@ -247,58 +243,41 @@ onMounted(() => {
 </script>
 
 <template>
-  <main v-loading="loading" class="flex h-screen w-screen flex-col overflow-hidden">
-    <header class="h-header flex-between shrink-0 gap-3 border-b bg-white px-6">
-      <div class="flex min-w-0 items-center gap-3">
-        <el-button text class="-ml-3" @click="handleBack">
-          <MkIcon name="icon_left_outlined" :size="18" />
+  <WorkflowViewLayout :loading="loading" :title="applicationDetail?.name" :save-time="saveTime" @back="handleBack">
+    <template #actions>
+      <CreateNodeMenu :workflow-mode="WorkflowMode.Application" @select="handleAddNode" />
+      <el-button plain :loading="saving && !publishing" :disabled="loading || saving || publishing" @click="handleSave"> 保存 </el-button>
+      <el-button type="primary" plain :disabled="loading || saving" @click="handleDebug"> 调试 </el-button>
+      <!-- <el-button
+        v-if="canPublish"
+        type="primary"
+        :loading="publishing"
+        :disabled="loading || saving || publishing"
+        @click="handlePublish"
+      >
+        发布
+      </el-button>
+
+      <MkDropdown v-if="canEdit" trigger="click">
+        <el-button text aria-label="更多工作流设置">
+          <MkIcon :icon="MoreFilled" :size="18" />
         </el-button>
-        <h4 class="max-w-[300px] truncate" :title="applicationDetail?.name">
-          {{ applicationDetail?.name }}
-        </h4>
-        <span v-if="saveTime" class="shrink-0 text-sm text-N600"> 保存于 {{ datetimeFormat(saveTime) }} </span>
-      </div>
-
-      <div class="flex shrink-0 items-center gap-3">
-        <WorkflowComponentMenu
-          :current-resource="{ id: applicationId, source: RESOURCE_TYPE.APPLICATION }"
-          :workflow-mode="WorkflowMode.Application"
-          @dragstart="handleDragNode"
-          @select="handleAddNode"
-        />
-        <el-button plain :loading="saving && !publishing" :disabled="loading || saving || publishing" @click="handleSave"> 保存 </el-button>
-        <el-button type="primary" plain :disabled="loading || saving" @click="handleDebug"> 调试 </el-button>
-        <!-- <el-button
-          v-if="canPublish"
-          type="primary"
-          :loading="publishing"
-          :disabled="loading || saving || publishing"
-          @click="handlePublish"
-        >
-          发布
-        </el-button>
-
-        <MkDropdown v-if="canEdit" trigger="click">
-          <el-button text aria-label="更多工作流设置">
-            <MkIcon :icon="MoreFilled" :size="18" />
-          </el-button>
-          <template #dropdown>
-            <MkDropdownMenu>
-              <MkDropdownItem @click.stop>
-                <span>自动保存</span>
-                <el-switch
-                  v-model="autoSaveEnabled"
-                  size="small"
-                  @click.stop
-                  @change="handleAutoSaveChange"
-                />
-              </MkDropdownItem>
-            </MkDropdownMenu>
-          </template>
-        </MkDropdown>
-    -->
-      </div>
-    </header>
+        <template #dropdown>
+          <MkDropdownMenu>
+            <MkDropdownItem @click.stop>
+              <span>自动保存</span>
+              <el-switch
+                v-model="autoSaveEnabled"
+                size="small"
+                @click.stop
+                @change="handleAutoSaveChange"
+              />
+            </MkDropdownItem>
+          </MkDropdownMenu>
+        </template>
+      </MkDropdown>
+  -->
+    </template>
     <!-- 主画布 -->
     <WorkflowCanvas
       ref="workflowRef"
@@ -322,7 +301,7 @@ onMounted(() => {
         <Conversation :defaultOpen="false" type="DEBUG" class="h-full" />
       </div>
     </transition>
-  </main>
+  </WorkflowViewLayout>
 </template>
 
 <style scoped>
diff --git a/ui/src/views/workflow/ToolWorkflowView.vue b/ui/src/views/workflow/ToolWorkflowView.vue
index b88bd02fba4..a0baea63a71 100644
--- a/ui/src/views/workflow/ToolWorkflowView.vue
+++ b/ui/src/views/workflow/ToolWorkflowView.vue
@@ -8,12 +8,12 @@ import ToolApi from '@/api/admin/workspace/tool/tool'
 import ToolWorkflowApi from '@/api/admin/workspace/tool/workflow'
 import { RESOURCE_TYPE } from '@/api/enums'
 import type { ToolItem, ToolWorkflowDetail } from '@/api/types'
-import { datetimeFormat } from '@/utils/time'
 import { MsgConfirm, MsgSuccess } from '@/utils/message'
 import WorkflowCanvas from '@/workflow-canvas/index.vue'
 import { defaultToolNodes } from '@/workflow-canvas/config/node-mapping'
 import { WorkflowMode, type ShapeItem } from '@/workflow-canvas/types'
-import WorkflowComponentMenu from './components/WorkflowComponentMenu.vue'
+import CreateNodeMenu from './components/CreateNodeMenu.vue'
+import WorkflowViewLayout from './components/WorkflowViewLayout.vue'
 
 defineOptions({ name: 'ToolWorkflowView' })
 
@@ -34,9 +34,6 @@ function handleAddNode(shapeItem: ShapeItem) {
   workflowRef.value?.addNode(shapeItem)
 }
 
-function handleDragNode(shapeItem: ShapeItem, event: PointerEvent) {
-  workflowRef.value?.onmousedown(shapeItem, event)
-}
 
 /* 工具工作流加载与保存 */
 const toolDetail = ref<ToolItem>()
@@ -138,28 +135,14 @@ onMounted(() => {
 </script>
 
 <template>
-  <main v-loading="loading" class="flex h-screen w-screen flex-col overflow-hidden">
-    <header class="h-header flex-between shrink-0 gap-3 border-b bg-white px-6">
-      <div class="flex min-w-0 items-center gap-3">
-        <el-button text class="-ml-3" @click="handleBack">
-          <MkIcon name="icon_left_outlined" :size="18" />
-        </el-button>
-        <h4 class="max-w-[300px] truncate" :title="toolDetail?.name">
-          {{ toolDetail?.name }}
-        </h4>
-        <span v-if="saveTime" class="shrink-0 text-sm text-N600"> 保存于 {{ datetimeFormat(saveTime) }} </span>
-      </div>
-
-      <div class="flex shrink-0 items-center gap-3">
-        <WorkflowComponentMenu
-          :current-resource="{ id: toolId, source: RESOURCE_TYPE.TOOL }"
-          :workflow-mode="WorkflowMode.Tool"
-          @dragstart="handleDragNode"
-          @select="handleAddNode"
-        />
-        <el-button plain :loading="saving" :disabled="loading || saving" @click="handleSave"> 保存 </el-button>
-      </div>
-    </header>
+  <WorkflowViewLayout :loading="loading" :title="toolDetail?.name" :save-time="saveTime" @back="handleBack">
+    <template #actions>
+      <CreateNodeMenu
+        :workflow-mode="WorkflowMode.Tool"
+        @select="handleAddNode"
+      />
+      <el-button plain :loading="saving" :disabled="loading || saving" @click="handleSave"> 保存 </el-button>
+    </template>
 
     <WorkflowCanvas
       ref="workflowRef"
@@ -168,5 +151,5 @@ onMounted(() => {
       :loop-workflow-mode="WorkflowMode.ToolLoop"
       :workflow-mode="WorkflowMode.Tool"
     />
-  </main>
+  </WorkflowViewLayout>
 </template>
diff --git a/ui/src/views/workflow/components/WorkflowComponentMenu.vue b/ui/src/views/workflow/components/CreateNodeMenu.vue
similarity index 88%
rename from ui/src/views/workflow/components/WorkflowComponentMenu.vue
rename to ui/src/views/workflow/components/CreateNodeMenu.vue
index ee9eb183f26..fd2dc0dab9a 100644
--- a/ui/src/views/workflow/components/WorkflowComponentMenu.vue
+++ b/ui/src/views/workflow/components/CreateNodeMenu.vue
@@ -3,13 +3,12 @@ import { ref } from 'vue'
 
 import { ClickOutside as vClickOutside } from 'element-plus'
 import NodeMenu from '@/workflow-canvas/node-menu/index.vue'
-import type { NodeMenuCurrentResource, NodeMenuItem } from '@/workflow-canvas/node-menu/types'
+import type { NodeMenuItem } from '@/workflow-canvas/node-menu/types'
 import type { WorkflowMode } from '@/workflow-canvas/types'
 
 defineOptions({ name: 'WorkflowComponentMenu' })
 
 defineProps<{
-  currentResource?: NodeMenuCurrentResource
   workflowMode: WorkflowMode
 }>()
 
@@ -47,7 +46,6 @@ const handleDragStart = (node: NodeMenuItem, event: PointerEvent) => {
         v-show="popoverVisible"
         class="absolute right-0 top-[calc(100%+8px)] z-[2000]"
         :class="{ 'pointer-events-none': dragClosing }"
-        :current-resource="currentResource"
         :workflow-mode="workflowMode"
         @dragstart="handleDragStart"
         @select="handleSelect"
diff --git a/ui/src/views/workflow/components/DefaultModelSetting.vue b/ui/src/views/workflow/components/DefaultModelSetting.vue
new file mode 100644
index 00000000000..ec16e588286
--- /dev/null
+++ b/ui/src/views/workflow/components/DefaultModelSetting.vue
@@ -0,0 +1,255 @@
+<script setup lang="ts">
+import { computed, onBeforeUnmount, provide, ref, watch } from 'vue'
+import { ClickOutside as vClickOutside } from 'element-plus'
+import { cloneDeep, isEqual } from 'lodash'
+import type LogicFlow from '@logicflow/core'
+import type ModelApi from '@/api/admin/workspace/model/model'
+import ModelProviderApi from '@/api/admin/model-provider'
+import type { Dict, ModelItem, ModelProviderItem } from '@/api/types'
+import ModelSelect from '@/components/business/model-select/index.vue'
+import { MsgConfirm, MsgSuccess } from '@/utils/message'
+import type WorkflowCanvas from '@/workflow-canvas/index.vue'
+import { WorkflowNodeType } from '@/workflow-canvas/types'
+
+defineOptions({ name: 'DefaultModelSetting' })
+
+const defaultModelTypes = [
+  { type: 'LLM', label: '大语言模型' },
+  { type: 'TTS', label: '语音合成模型' },
+  { type: 'STT', label: '语音识别模型' },
+  { type: 'IMAGE', label: '图片理解模型' },
+  { type: 'TTI', label: '图片生成模型' },
+  { type: 'TTV', label: '文本生成视频模型' },
+  { type: 'ITV', label: '图片生成视频模型' },
+  { type: 'RERANKER', label: '重排序模型' },
+] as const
+
+type DefaultModelType = (typeof defaultModelTypes)[number]['type']
+interface ModelSetting {
+  model_id?: string
+  model_params_setting?: Dict<unknown>
+}
+type DefaultModelSettings = Partial<Record<DefaultModelType, ModelSetting>>
+type ModelSourceField =
+  | 'model_id_type'
+  | 'stt_model_id_type'
+  | 'tts_model_id_type'
+  | 'reranker_model_id_type'
+  | 'long_term_model_id_type'
+  | 'tts_type'
+interface ModelNodeData extends Partial<Record<ModelSourceField, string>> {
+  stt_model_enable?: boolean
+  tts_model_enable?: boolean
+  long_term_enable?: boolean
+  loop_body?: LogicFlow.GraphConfigData
+}
+
+const props = withDefaults(
+  defineProps<{
+    modelValue?: DefaultModelSettings
+    modelApi: typeof ModelApi
+    modelQuery?: Dict<unknown>
+    show?: boolean
+    workflowRef?: InstanceType<typeof WorkflowCanvas> | null
+    readonly?: boolean
+  }>(),
+  { modelValue: () => ({}), modelQuery: () => ({}), show: false, workflowRef: null, readonly: false },
+)
+const emit = defineEmits<{
+  'update:modelValue': [settings: DefaultModelSettings]
+  save: []
+  close: []
+}>()
+
+// 暂存模型设置：编辑和参数弹窗只修改副本，保存时才通知页面提交。
+function normalizeSettings(settings: DefaultModelSettings) {
+  return Object.fromEntries(
+    defaultModelTypes.map(({ type }) => [
+      type,
+      {
+        ...cloneDeep(settings[type]),
+        model_id: settings[type]?.model_id || '',
+        model_params_setting: cloneDeep(settings[type]?.model_params_setting || {}),
+      },
+    ]),
+  ) as Record<DefaultModelType, ModelSetting & { model_id: string; model_params_setting: Dict<unknown> }>
+}
+
+const modelSettings = ref(normalizeSettings(props.modelValue))
+const hasChanges = computed(() => !props.readonly && !isEqual(modelSettings.value, normalizeSettings(props.modelValue)))
+
+function resetSettings() {
+  modelSettings.value = normalizeSettings(props.modelValue)
+}
+
+function handleModelChange(modelType: DefaultModelType) {
+  modelSettings.value[modelType].model_params_setting = {}
+}
+
+function handleSave() {
+  if (props.readonly || !hasChanges.value) return
+  emit('update:modelValue', cloneDeep(modelSettings.value))
+  emit('save')
+}
+
+// 模型资源：调用方选择当前范围的完整 API，组件不通过 URL 推断资源范围。
+const modelOptions = ref<Partial<Record<DefaultModelType, ModelItem[]>>>({})
+const providerOptions = ref<ModelProviderItem[]>([])
+const loading = ref(false)
+let loadSequence = 0
+
+provide('getModelParamsForm', (modelId: string) => props.modelApi.getModelParamsForm(modelId))
+
+function loadModelOptions() {
+  const sequence = ++loadSequence
+  loading.value = true
+  modelOptions.value = {}
+  providerOptions.value = []
+  const providerRequest = ModelProviderApi.getProviderList().then((providers) => {
+    if (sequence === loadSequence) providerOptions.value = providers
+  })
+  const modelRequests = defaultModelTypes.map(({ type }) =>
+    props.modelApi.getModelList({ ...props.modelQuery, model_type: type }).then((models) => {
+      if (sequence === loadSequence) modelOptions.value[type] = models
+    }),
+  )
+  // 请求层统一提示失败；单个类别失败不阻断其他类别展示。
+  return Promise.allSettled([providerRequest, ...modelRequests]).finally(() => {
+    if (sequence === loadSequence) loading.value = false
+  })
+}
+
+watch(
+  () => props.show,
+  (visible) => {
+    if (!visible) {
+      loadSequence += 1
+      return
+    }
+    resetSettings()
+    loadModelOptions()
+  },
+  { immediate: true },
+)
+onBeforeUnmount(() => {
+  loadSequence += 1
+})
+
+// 应用默认来源：保留自定义模型配置，并递归处理循环体中的节点。
+const applying = ref(false)
+
+function applyDefaultSources(graph: LogicFlow.GraphData) {
+  let changedCount = 0
+  const pendingNodes: LogicFlow.NodeConfig[] = [...graph.nodes]
+  const updateSource = (nodeData: ModelNodeData, field: ModelSourceField, source = 'default') => {
+    if (nodeData[field] === source) return
+    nodeData[field] = source
+    changedCount += 1
+  }
+
+  while (pendingNodes.length) {
+    const node = pendingNodes.pop()!
+    const nodeData = node.properties?.node_data as ModelNodeData | undefined
+    if (!nodeData) continue
+
+    if (node.type === WorkflowNodeType.Base) {
+      if (nodeData.stt_model_enable) updateSource(nodeData, 'stt_model_id_type')
+      if (nodeData.tts_model_enable && nodeData.tts_type !== 'BROWSER') updateSource(nodeData, 'tts_type', 'DEFAULT')
+      if (nodeData.long_term_enable) updateSource(nodeData, 'long_term_model_id_type')
+      continue
+    }
+
+    if (node.type === WorkflowNodeType.SpeechToTextNode) updateSource(nodeData, 'stt_model_id_type')
+    else if (node.type === WorkflowNodeType.TextToSpeechNode) updateSource(nodeData, 'tts_model_id_type')
+    else if (node.type === WorkflowNodeType.RerankerNode) updateSource(nodeData, 'reranker_model_id_type')
+    else if (nodeData.model_id_type !== undefined) updateSource(nodeData, 'model_id_type')
+
+    if (node.type === WorkflowNodeType.LoopNode && nodeData.loop_body?.nodes) pendingNodes.push(...nodeData.loop_body.nodes)
+  }
+  return changedCount
+}
+
+function handleApplyToAll() {
+  if (props.readonly || !props.workflowRef || applying.value) return
+  applying.value = true
+  return MsgConfirm('应用到所有节点', '将所有支持的节点（包括循环体内节点）切换为使用默认模型，是否继续？', {
+    type: 'warning',
+    confirmButtonText: '应用',
+    confirmButtonType: 'primary',
+  })
+    .then(() => {
+      if (props.readonly || !props.show) return
+      const graph = props.workflowRef?.getGraphData()
+      if (!graph) return
+      const changedCount = applyDefaultSources(graph)
+      if (changedCount > 0) props.workflowRef?.renderGraphData(graph)
+      MsgSuccess(changedCount > 0 ? `已将 ${changedCount} 项模型配置切换为默认模型` : '所有适用节点已使用默认模型')
+    })
+    .catch(() => {})
+    .finally(() => {
+      applying.value = false
+    })
+}
+
+// 关闭面板：保存、丢弃与取消分别处理，避免重复弹出确认框。
+const confirmingClose = ref(false)
+
+function handleClickOutside(event: MouseEvent) {
+  if (!props.show || confirmingClose.value || applying.value) return
+  const target = event.target
+  if (target instanceof Element && target.closest('.el-overlay')) return
+  if (!hasChanges.value) {
+    emit('close')
+    return
+  }
+
+  confirmingClose.value = true
+  return MsgConfirm('提示', '默认模型设置尚未保存，是否保存修改？', {
+    confirmButtonText: '保存修改',
+    cancelButtonText: '不保存',
+    confirmButtonType: 'primary',
+    distinguishCancelAndClose: true,
+  })
+    .then(() => {
+      handleSave()
+      emit('close')
+    })
+    .catch((action: unknown) => {
+      if (action !== 'cancel') return
+      resetSettings()
+      emit('close')
+    })
+    .finally(() => {
+      confirmingClose.value = false
+    })
+}
+</script>
+
+<template>
+  <div v-if="show" v-click-outside="handleClickOutside" class="w-100 max-w-full rounded-md border bg-white shadow-lg">
+    <div class="p-3">
+      <h4 class="mb-1">默认模型设置</h4>
+      <p class="text-sm text-N600">配置各类型节点使用的默认模型，节点选择默认模型时将使用此处设置。</p>
+    </div>
+    <el-scrollbar max-height="calc(100vh - 220px)">
+      <el-form v-loading="loading" label-position="top" class="px-3" :disabled="readonly" @submit.prevent>
+        <el-form-item v-for="modelType in defaultModelTypes" :key="modelType.type" :label="modelType.label">
+          <ModelSelect
+            v-model="modelSettings[modelType.type].model_id"
+            v-model:model-params="modelSettings[modelType.type].model_params_setting"
+            :options="modelOptions[modelType.type] ?? []"
+            :provider-options="providerOptions"
+            :show-model-params="modelType.type !== 'RERANKER'"
+            :disabled="readonly"
+            placeholder="请选择模型"
+            @change="handleModelChange(modelType.type)"
+          />
+        </el-form-item>
+      </el-form>
+    </el-scrollbar>
+    <div class="flex-between gap-3 border-t p-3">
+      <el-button :disabled="readonly || !workflowRef || confirmingClose" :loading="applying" @click="handleApplyToAll">应用到所有节点</el-button>
+      <el-button type="primary" :disabled="readonly || !hasChanges || confirmingClose || applying" @click="handleSave">保存</el-button>
+    </div>
+  </div>
+</template>
diff --git a/ui/src/views/workflow/components/WorkflowViewLayout.vue b/ui/src/views/workflow/components/WorkflowViewLayout.vue
new file mode 100644
index 00000000000..35924dfa709
--- /dev/null
+++ b/ui/src/views/workflow/components/WorkflowViewLayout.vue
@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import { datetimeFormat } from '@/utils/time'
+
+defineOptions({ name: 'WorkflowViewLayout' })
+
+withDefaults(
+  defineProps<{
+    loading?: boolean
+    title?: string
+    saveTime?: Date | string
+  }>(),
+  { loading: false },
+)
+
+const emit = defineEmits<{ back: [] }>()
+
+defineSlots<{
+  actions(): unknown
+  default(): unknown
+}>()
+</script>
+
+<template>
+  <main v-loading="loading" class="flex h-screen w-screen flex-col overflow-hidden">
+    <header class="h-header flex-between shrink-0 gap-3 border-b bg-white px-6">
+      <div class="flex min-w-0 items-center gap-3">
+        <el-button text class="-ml-3" aria-label="返回" @click="emit('back')">
+          <MkIcon name="icon_left_outlined" :size="18" />
+        </el-button>
+        <h4 class="max-w-[300px] truncate" :title="title">
+          {{ title }}
+        </h4>
+        <span v-if="saveTime" class="shrink-0 text-sm text-N600"> 保存于 {{ datetimeFormat(saveTime) }} </span>
+      </div>
+
+      <div class="flex shrink-0 items-center gap-3">
+        <slot name="actions" />
+      </div>
+    </header>
+
+    <slot />
+  </main>
+</template>
diff --git a/ui/src/workflow-canvas/WORKFLOW_README.md b/ui/src/workflow-canvas/WORKFLOW_README.md
index 6da30e80de9..d2f6b2cb6df 100644
--- a/ui/src/workflow-canvas/WORKFLOW_README.md
+++ b/ui/src/workflow-canvas/WORKFLOW_README.md
@@ -74,8 +74,7 @@ src/workflow-canvas/
 
 `node-menu` 集中维护画布节点选择菜单。`menu.ts` 定义不同画布模式下的基础组件分组；
 `BasicNodeMenu.vue` 负责基础组件搜索和列表；`ResourceNodeMenu.vue` 负责工具与智能体的文件夹、
-搜索和资源列表；`index.vue` 只负责 Tabs 和事件汇总。调用方通过 `workflowMode` 显式指定菜单模式，
-并通过 `currentResource` 传入当前资源，使资源菜单排除工作流自身。不要另建一份基础组件节点集合。
+搜索和资源列表；`index.vue` 只负责 Tabs 和事件汇总。调用方通过 `workflowMode` 显式指定菜单模式。
 
 ### `nodes/`
 
@@ -112,7 +111,7 @@ Vue `computed` 的 `set` 和原生 `Map.set()` 按各自 API 正常使用。
   画布模块不处理路由。
 - View 通过 Props 传入图数据，通过组件实例暴露的方法操作画布。接口接入后，加载、保存及错误
   处理仍由 View 或其所属业务层编排，不在节点和画布核心中直接发请求。
-- View 同时向页面添加组件菜单和 `MkWorkflow` 传入相同的 `workflowMode` 与 `currentResource`；
+- View 同时向页面添加组件菜单和 `MkWorkflow` 传入相同的 `workflowMode`；
   `MkWorkflow` 将这些上下文桥接给 LogicFlow 节点内部的锚点菜单。
 
 `MkWorkflow` 当前对外暴露的方法包括：
diff --git a/ui/src/workflow-canvas/core/node-container/index.vue b/ui/src/workflow-canvas/core/node-container/index.vue
index d1bfeae5b48..f7381df3dc5 100644
--- a/ui/src/workflow-canvas/core/node-container/index.vue
+++ b/ui/src/workflow-canvas/core/node-container/index.vue
@@ -4,9 +4,9 @@ import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from 'vue'
 import { cloneDeep } from 'lodash'
 import { iconComponent } from '@/workflow-canvas/icons/utils'
 import { copyText } from '@/utils/clipboard'
-import { WorkflowMode, WorkflowNodeType, type ShapeItem, type WorkflowNodeField } from '@/workflow-canvas/types'
+import { WorkflowMode, WorkflowNodeType, type WorkflowNodeField } from '@/workflow-canvas/types'
 import NodeMenu from '@/workflow-canvas/node-menu/index.vue'
-import type { NodeMenuCurrentResource, NodeMenuItem } from '@/workflow-canvas/node-menu/types'
+import type {  NodeMenuItem } from '@/workflow-canvas/node-menu/types'
 import NodeConditionDropdown from './NodeConditionDropdown.vue'
 import NodeOperateDropdown from './NodeOperateDropdown.vue'
 import { createAnchorGuard, handleNodeWheel } from '@/workflow-canvas/core/utils'
@@ -30,9 +30,7 @@ withDefaults(defineProps<{ exceptionNodeList?: string[] }>(), {
   ],
 })
 const getModel = inject('getModel') as () => BaseNodeModel
-const startDragNode = inject<(shapeItem: ShapeItem, event?: PointerEvent) => void>('startDragNode')
 const workflowMode = inject<WorkflowMode>('workflowMode', WorkflowMode.Application)
-const currentResource = inject<NodeMenuCurrentResource>('currentResource')
 const model = getModel()
 const nodeProperties = computed(() => model.properties as unknown as NodeContainerProperties)
 const nodeSelected = ref(model.isSelected)
@@ -114,11 +112,6 @@ function clickNodes(item: NodeMenuItem) {
   closeNodeMenu()
 }
 
-function dragNode(item: NodeMenuItem, event: PointerEvent) {
-  startDragNode?.(item, event)
-  nodeMenuDragClosing.value = true
-  closeNodeMenu()
-}
 if (model.properties.enableException === undefined) {
   model.properties.enableException = false
 }
@@ -364,7 +357,6 @@ onBeforeUnmount(() => {
         ref="nodeMenuRef"
         class="absolute"
         :class="{ 'pointer-events-none': nodeMenuDragClosing }"
-        :current-resource="currentResource"
         :workflow-mode="workflowMode"
         @mousemove.stop
         @mousedown.stop
@@ -372,7 +364,6 @@ onBeforeUnmount(() => {
         @wheel="handleNodeWheel"
         style="left: 105%; transform: translate(0, -50%)"
         :style="dropdownMenuStyle"
-        @dragstart="dragNode"
         @select="clickNodes"
       />
     </el-collapse-transition>
diff --git a/ui/src/workflow-canvas/icons/condition-node-icon.vue b/ui/src/workflow-canvas/icons/condition-node-icon.vue
index 7a220814144..27ad27be292 100644
--- a/ui/src/workflow-canvas/icons/condition-node-icon.vue
+++ b/ui/src/workflow-canvas/icons/condition-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <el-avatar class="avatar-gradient" shape="square">
-    <img src="@/assets/workflow/icon_ai_chat.svg" style="width: 75%" alt="" />
+  <el-avatar class="bg-success!" shape="square">
+    <img src="@/assets/workflow/icon_condition.svg" style="width: 75%" alt="" />
   </el-avatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/workflow-canvas/index.vue b/ui/src/workflow-canvas/index.vue
index 5e779016ff1..34eb6d4964a 100644
--- a/ui/src/workflow-canvas/index.vue
+++ b/ui/src/workflow-canvas/index.vue
@@ -10,17 +10,14 @@ import { initDefaultShortcut } from '@/workflow-canvas/core/shortcut'
 import { disconnectAll, getTeleport } from '@/workflow-canvas/core/teleport'
 import type { WorkflowNodeModel } from '@/workflow-canvas/core/workflow-node'
 import Dagre from '@/workflow-canvas/plugins/dagre'
-import modelAPI from '@/api/admin/workspace/model/model'
 import { WorkflowMode, WorkflowNodeType } from '@/workflow-canvas/types'
 import { type ShapeItem } from '@/workflow-canvas/types'
-import type { NodeMenuCurrentResource } from '@/workflow-canvas/node-menu/types'
 defineOptions({ name: 'MkWorkflow' })
 
 type CanvasWorkflowNodeModel = WorkflowNodeModel & { set_loop_body?: () => void }
 
 const props = withDefaults(
   defineProps<{
-    currentResource?: NodeMenuCurrentResource
     data?: LogicFlow.GraphConfigData | null
     loopWorkflowMode?: WorkflowMode
     workflowMode?: WorkflowMode
@@ -73,13 +70,9 @@ function renderGraphData(data: LogicFlow.GraphConfigData = props.data ?? {}) {
   lf.value.graphModel.get_provide = (model: LogicFlow.NodeData | null, graph: GraphModel | null) => ({
     getModel: () => model,
     getGraph: () => graph,
+    apiType: 'workspace', // TODO: apiType
     workflowMode: props.workflowMode,
     loopWorkflowMode: props.loopWorkflowMode,
-    currentResource: props.currentResource,
-    apiType: 'workspace',
-    getSelectModelList: (params: { model_type: string }) => modelAPI.getModelList(params),
-    getModelParamsForm: (modelId: string) => modelAPI.getModelParamsForm(modelId),
-    startDragNode: onmousedown,
   })
   lf.value.graphModel.eventCenter.on('delete_edge', (edgeIds: string[]) => {
     edgeIds.forEach((edgeId) => lf.value?.deleteEdge(edgeId))
diff --git a/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
index f69066822fc..9813a2b442a 100644
--- a/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
+++ b/ui/src/workflow-canvas/node-menu/ResourceNodeMenu.vue
@@ -6,16 +6,17 @@ import SharedApi from '@/api/admin/workspace/shared'
 import ToolApi from '@/api/admin/workspace/tool/tool'
 import { RESOURCE_TYPE, TOOL_TYPE } from '@/api/enums'
 import type { ApplicationDetail, ApplicationType, FolderItem, ToolItem, ToolType } from '@/api/types'
-import type { NodeMenuCurrentResource, NodeMenuItem, NodeMenuResourceSource } from './types'
+import type { NodeMenuItem, NodeMenuResourceSource } from './types'
 import { FOLDER_ENTRY_ID } from '@/constants'
 import { isWorkFlow } from '@/utils/application'
 import FolderTree from '@/components/business/folder-tree/index.vue'
 import { applicationNode, toolLibNode, toolWorkflowLibNode } from '@/workflow-canvas/config/node-data'
+import { useRoute } from 'vue-router'
 
 defineOptions({ name: 'ResourceNodeMenu' })
 
+const route = useRoute()
 const props = defineProps<{
-  currentResource?: NodeMenuCurrentResource
   source: NodeMenuResourceSource
 }>()
 const emit = defineEmits<{
@@ -39,7 +40,6 @@ const loading = ref(false)
 const resourceItems = ref<ResourceMenuItem[]>([])
 const searchKeyword = ref('')
 const isToolMenu = computed(() => props.source === RESOURCE_TYPE.TOOL)
-const currentResourceId = computed(() => (props.currentResource?.source === props.source ? props.currentResource.id : undefined))
 
 const filteredResourceItems = computed(() => {
   const keyword = searchKeyword.value.trim().toLocaleLowerCase()
@@ -79,7 +79,7 @@ function loadTools(folder?: FolderItem) {
 
   return requestApi.getAllTool(folderQuery).then((tools) => {
     resourceItems.value = tools
-      .filter((tool) => tool.is_active && tool.id !== currentResourceId.value)
+      .filter((tool) => tool.is_active && tool.id !== route.params?.toolId)
       .map((tool) => ({
         desc: tool.desc,
         icon: tool.icon,
@@ -96,7 +96,7 @@ function loadApplications(folder?: FolderItem) {
 
   return ApplicationApi.getAllApplication({ ...folderQuery, publish_status: 'published' }).then((res) => {
     resourceItems.value = res
-      .filter((application) => application.id !== currentResourceId.value)
+      .filter((application) => application.id !== route.params?.applicationId)
       .map((application) => ({
         applicationType: application.type,
         desc: application.desc,
diff --git a/ui/src/workflow-canvas/node-menu/index.vue b/ui/src/workflow-canvas/node-menu/index.vue
index 48015757c7a..b91ac07e9fc 100644
--- a/ui/src/workflow-canvas/node-menu/index.vue
+++ b/ui/src/workflow-canvas/node-menu/index.vue
@@ -4,12 +4,11 @@ import { RESOURCE_TYPE } from '@/api/enums'
 import BasicNodeMenu from './BasicNodeMenu.vue'
 import ResourceNodeMenu from './ResourceNodeMenu.vue'
 import type { WorkflowMode } from '@/workflow-canvas/types'
-import type { NodeMenuCurrentResource, NodeMenuItem, NodeMenuTab } from './types'
+import type {  NodeMenuItem, NodeMenuTab } from './types'
 
 defineOptions({ name: 'NodeMenu' })
 
 defineProps<{
-  currentResource?: NodeMenuCurrentResource
   workflowMode: WorkflowMode
 }>()
 
@@ -52,7 +51,6 @@ function handleDragStart(node: NodeMenuItem, event: PointerEvent) {
         v-else
         :key="activeTab"
         :source="activeTab === 'tool' ? RESOURCE_TYPE.TOOL : RESOURCE_TYPE.APPLICATION"
-        :current-resource="currentResource"
         @dragstart="handleDragStart"
         @select="emit('select', $event)"
       />
diff --git a/ui/src/workflow-canvas/node-menu/types.ts b/ui/src/workflow-canvas/node-menu/types.ts
index 98159db0d0a..e947b4759b7 100644
--- a/ui/src/workflow-canvas/node-menu/types.ts
+++ b/ui/src/workflow-canvas/node-menu/types.ts
@@ -4,8 +4,3 @@ import type { ShapeItem } from '@/workflow-canvas/types'
 export type NodeMenuItem = ShapeItem & { height?: number }
 export type NodeMenuResourceSource = typeof RESOURCE_TYPE.APPLICATION | typeof RESOURCE_TYPE.TOOL
 export type NodeMenuTab = 'application' | 'basic' | 'tool'
-
-export interface NodeMenuCurrentResource {
-  id: string
-  source: NodeMenuResourceSource
-}
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.ts b/ui/src/workflow-canvas/nodes/condition-node/index.ts
index 49c82ed8092..41f0d09ed65 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.ts
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.ts
@@ -64,6 +64,10 @@ class ConditionModel extends WorkflowNodeModel {
 
     return anchors
   }
+  setAttributes() {
+    super.setAttributes()
+    this.width = 600
+  }
 }
 
 export default { type: WorkflowNodeType.Condition, model: ConditionModel, view: ConditionNodeView }
diff --git a/ui/src/workflow-canvas/nodes/condition-node/index.vue b/ui/src/workflow-canvas/nodes/condition-node/index.vue
index 095a60ce137..0fd09840a3b 100644
--- a/ui/src/workflow-canvas/nodes/condition-node/index.vue
+++ b/ui/src/workflow-canvas/nodes/condition-node/index.vue
@@ -1,100 +1,12 @@
-<template>
-  <NodeContainer :node-model="model">
-    <el-form ref="conditionNodeFormRef" :model="form_data" label-position="top" require-asterisk-position="right" label-width="auto" @submit.prevent>
-      <template v-for="(item, index) in form_data.branch" :key="item.id">
-        <div v-branch-resize="{ item, index }">
-          <el-card shadow="never" class="card-never drag-card mb-2" :class="{ 'drag-card-empty': index === form_data.branch.length - 1 }">
-            <template #header>
-              <div class="flex items-center justify-between">
-                <span>{{ item.type }}</span>
-                <div v-if="item.conditions.length > 1" class="flex items-center">
-                  <span class="text-N600">满足</span>
-                  <el-select :teleported="false" v-model="item.condition" size="small" style="width: 60px; margin: 0 8px">
-                    <el-option label="且" value="and" />
-                    <el-option label="或" value="or" />
-                  </el-select>
-                  <span class="text-N600">条件</span>
-                </div>
-              </div>
-            </template>
-
-            <div v-if="index !== form_data.branch.length - 1">
-              <template v-for="(condition, cIndex) in item.conditions" :key="cIndex">
-                <el-row :gutter="8">
-                  <el-col :span="11">
-                    <el-form-item
-                      :prop="`branch.${index}.conditions.${cIndex}.field`"
-                      :rules="{ type: 'array', required: true, message: '请选择变量', trigger: 'change' }"
-                    >
-                      <NodeCascader :ref="setCascaderRef" :node-model="model" class="w-full" placeholder="请选择变量" v-model="condition.field" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      :prop="`branch.${index}.conditions.${cIndex}.compare`"
-                      :rules="{ required: true, message: '请选择比较符', trigger: 'change' }"
-                    >
-                      <el-select
-                        :teleported="false"
-                        v-model="condition.compare"
-                        placeholder="请选择比较符"
-                        clearable
-                        @change="changeCondition($event, index, cIndex)"
-                        @wheel="handleNodeWheel"
-                      >
-                        <template v-for="(item, index) in compareList" :key="index">
-                          <el-option :label="item.label" :value="item.value" />
-                        </template>
-                      </el-select>
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="6">
-                    <el-form-item
-                      v-if="!['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(condition.compare)"
-                      :prop="`branch.${index}.conditions.${cIndex}.value`"
-                      :rules="{ required: true, message: '请输入比较值', trigger: 'blur' }"
-                    >
-                      <el-input v-model="condition.value" placeholder="请输入比较值" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :span="1">
-                    <el-button
-                      :disabled="form_data.branch.length === 2 && item.conditions.length === 1"
-                      link
-                      type="info"
-                      class="mt-2"
-                      @click="deleteCondition(index, cIndex)"
-                    >
-                      <MkIcon name="icon_delete-trash_outlined" />
-                    </el-button>
-                  </el-col>
-                </el-row>
-              </template>
-            </div>
-
-            <el-button v-if="index !== form_data.branch.length - 1" link type="primary" @click="addCondition(index)">
-              <MkIcon name="icon_add_outlined" class="mr-1" />
-              添加条件
-            </el-button>
-          </el-card>
-        </div>
-      </template>
-      <el-button link type="primary" @click="addBranch">
-        <MkIcon name="icon_add_outlined" class="mr-1" />
-        添加分支
-      </el-button>
-    </el-form>
-  </NodeContainer>
-</template>
 <script setup lang="ts">
 import { cloneDeep } from 'lodash'
-import { inject, onBeforeUnmount, onMounted, ref, type Directive, type DirectiveBinding, type Ref } from 'vue'
+import { computed, inject, onBeforeUnmount, onMounted, useTemplateRef, type Directive } from 'vue'
 import type { FormInstance } from 'element-plus'
 import type { BaseNodeModel } from '@logicflow/core'
 
 import NodeCascader from '@/workflow-canvas/core/NodeCascader.vue'
 import NodeContainer from '@/workflow-canvas/core/node-container/index.vue'
-import { handleNodeWheel } from '@/workflow-canvas/core/utils'
+import { createAnchorGuard, handleNodeWheel } from '@/workflow-canvas/core/utils'
 import { compareList } from '@/workflow-canvas/config/constants'
 import { randomId } from '@/utils/common'
 
@@ -103,9 +15,9 @@ const getModel = inject('getModel') as () => BaseNodeModel
 const model = getModel() as BaseNodeModel & { refreshBranch: () => void }
 
 interface ConditionItem {
-  field: Array<string>
+  field: string[]
   compare: string
-  value: string
+  value: string | number
 }
 interface BranchItem {
   conditions: ConditionItem[]
@@ -119,162 +31,192 @@ interface BranchConditionListItem {
   index: number
 }
 
-const defaultForm = () => ({
-  branch: [
-    {
-      conditions: [{ field: [], compare: '', value: '' }],
-      id: randomId(),
-      type: 'IF',
-      condition: 'and',
-    },
-    {
-      conditions: [],
-      id: randomId(),
-      type: 'ELSE',
-      condition: 'and',
-    },
-  ],
-})
+// 表单初始化与条件校验。
+const valueLessComparisons = new Set(['is_null', 'is_not_null', 'is_true', 'is_not_true'])
+const createCondition = (): ConditionItem => ({ field: [], compare: '', value: '' })
 
 if (!model.properties.node_data) {
-  model.properties.node_data = defaultForm()
-}
-const form_data = model.properties.node_data as { branch: BranchItem[] }
-
-const conditionNodeFormRef = ref<FormInstance>()
-const nodeCascaderRef: Ref<Array<{ validate: () => Promise<unknown> }>> = ref([])
-
-function setCascaderRef(el: unknown) {
-  if (el && !nodeCascaderRef.value.includes(el as { validate: () => Promise<unknown> })) {
-    nodeCascaderRef.value.push(el as { validate: () => Promise<unknown> })
+  model.properties.node_data = {
+    branch: [
+      { conditions: [createCondition()], id: randomId(), type: 'IF', condition: 'and' },
+      { conditions: [], id: randomId(), type: 'ELSE', condition: 'and' },
+    ],
   }
 }
-
-const validate = () => {
-  const vList = [conditionNodeFormRef.value?.validate(), ...nodeCascaderRef.value.map((item) => item.validate())]
-  return Promise.all(vList).catch((err) => {
-    return Promise.reject({ node: model, errMessage: err })
-  })
+const formData = computed(() => model.properties.node_data as { branch: BranchItem[] })
+const conditionNodeFormRef = useTemplateRef<FormInstance>('conditionNodeFormRef')
+const nodeCascaderRefs = useTemplateRef<InstanceType<typeof NodeCascader>[]>('nodeCascaderRefs')
+
+function validate() {
+  return Promise.all([conditionNodeFormRef.value?.validate(), ...(nodeCascaderRefs.value ?? []).map((cascader) => cascader.validate())]).catch(
+    (error) => Promise.reject({ node: model, errMessage: error }),
+  )
 }
 
+// 分支增删保留原有锚点 ID，删除空分支时同步清理连线。
 function addBranch() {
-  const list: BranchItem[] = cloneDeep(model.properties.node_data.branch)
-  const obj: BranchItem = {
-    conditions: [{ field: [], compare: '', value: '' }],
-    type: 'ELSE IF ' + (list.length - 1),
+  const branches = cloneDeep(formData.value.branch)
+  branches.splice(branches.length - 1, 0, {
+    conditions: [createCondition()],
+    type: `ELSE IF ${branches.length - 1}`,
     id: randomId(),
     condition: 'and',
-  }
-  list.splice(list.length - 1, 0, obj)
-  refreshBranchAnchor(list, true)
-  model.properties.node_data.branch = list
+  })
+  formData.value.branch = branches
+  refreshBranchAnchors()
 }
 
-function refreshBranchAnchor(list: BranchItem[], isAdd: boolean) {
-  const branchConditionList = cloneDeep<BranchConditionListItem[]>((model.properties.branch_condition_list as BranchConditionListItem[]) ?? [])
-  const newBranchConditionList = list
-    .map((item, index) => {
-      const find = branchConditionList.find((b) => b.id === item.id)
-      if (find) {
-        return { index, height: find.height, id: item.id }
-      } else {
-        if (isAdd) {
-          return { index, height: 12, id: item.id }
-        }
-      }
-    })
-    .filter((item) => item)
-  model.properties.branch_condition_list = newBranchConditionList
-  model.refreshBranch()
+function addCondition(branch: BranchItem) {
+  branch.conditions.push(createCondition())
 }
 
-function addCondition(index: number) {
-  const list = cloneDeep(model.properties.node_data.branch)
-  list[index].conditions.push({ field: [], compare: '', value: '' })
-  model.properties.node_data.branch = list
-}
+function deleteCondition(branchIndex: number, conditionIndex: number) {
+  const branches = cloneDeep(formData.value.branch)
+  const branch = branches[branchIndex]
+  if (!branch || (branches.length === 2 && branch.conditions.length === 1)) return
 
-function deleteCondition(index: number, cIndex: number) {
-  const list: BranchItem[] = cloneDeep(model.properties.node_data.branch)
-  const branch = list[index]
-  if (!branch) return
-  branch.conditions.splice(cIndex, 1)
+  branch.conditions.splice(conditionIndex, 1)
   if (branch.conditions.length === 0) {
-    const deleteEdge = list.splice(index, 1)
-    const deleteTargetAnchorIdList = deleteEdge.map((item) => model.id + '_' + item.id + '_right')
-    model.graphModel.eventCenter.emit(
-      'delete_edge',
-      model.outgoing.edges.filter((item) => item.sourceAnchorId && deleteTargetAnchorIdList.includes(item.sourceAnchorId)).map((item) => item.id),
-    )
-    refreshBranchAnchor(list, false)
-    list.forEach((item, i) => {
-      if (item.type === 'ELSE IF ' + (i + 1)) {
-        item.type = 'ELSE IF ' + i
+    branches.splice(branchIndex, 1)
+    const anchorId = `${model.id}_${branch.id}_right`
+    const edgeIds = model.outgoing.edges.filter((edge) => edge.sourceAnchorId === anchorId).map((edge) => edge.id)
+    model.graphModel.eventCenter.emit('delete_edge', edgeIds)
+    branches.forEach((remainingBranch, index) => {
+      if (remainingBranch.type === `ELSE IF ${index + 1}`) {
+        remainingBranch.type = `ELSE IF ${index}`
       }
     })
   }
-  model.properties.node_data.branch = list
+  formData.value.branch = branches
+  refreshBranchAnchors()
 }
 
-function changeCondition(val: string, index: number, cIndex: number) {
-  if (['is_null', 'is_not_null', 'is_true', 'is_not_true'].includes(val)) {
-    const list = cloneDeep(model.properties.node_data.branch)
-    list[index].conditions[cIndex].value = 1
-    model.properties.node_data.branch = list
-  }
+function changeComparison(condition: ConditionItem) {
+  // 无比较值的运算仍按现有节点协议写入占位值。
+  if (valueLessComparisons.has(condition.compare)) condition.value = 1
 }
 
-const branchCardRefs = new Map<HTMLElement, ResizeObserver>()
+// 根据卡片实际高度刷新分支锚点；通过 ID 查找当前顺序，避免删除后沿用旧索引。
+function refreshBranchAnchors(branchId?: string, height?: number) {
+  const previousBranches = (model.properties.branch_condition_list as BranchConditionListItem[] | undefined) ?? []
+  model.properties.branch_condition_list = formData.value.branch.map((branch, index) => ({
+    id: branch.id,
+    index,
+    height: branch.id === branchId && height !== undefined ? height : (previousBranches.find((previous) => previous.id === branch.id)?.height ?? 12),
+  }))
+  model.refreshBranch()
+}
 
-const vBranchResize: Directive = {
-  mounted(el: HTMLElement, binding: DirectiveBinding<{ item: BranchItem; index: number }>) {
-    const { item, index } = binding.value
+const branchObservers = new Map<HTMLElement, ResizeObserver>()
+const vBranchResize: Directive<HTMLElement, string> = {
+  mounted(element, { value: branchId }) {
     const observer = new ResizeObserver(() => {
-      resizeCondition(el, item, index)
+      // 折叠时保留展开高度，避免隐藏卡片把锚点高度覆盖为 0。
+      if (element.offsetHeight > 0) refreshBranchAnchors(branchId, element.offsetHeight)
     })
-    branchCardRefs.set(el, observer)
-    observer.observe(el)
+    branchObservers.set(element, observer)
+    observer.observe(element)
   },
-  unmounted(el: HTMLElement) {
-    branchCardRefs.get(el)?.disconnect()
-    branchCardRefs.delete(el)
+  unmounted(element) {
+    branchObservers.get(element)?.disconnect()
+    branchObservers.delete(element)
   },
 }
 
-function resizeCondition(container: HTMLElement, row: BranchItem, index: number) {
-  const branchConditionList = cloneDeep<BranchConditionListItem[]>((model.properties.branch_condition_list as BranchConditionListItem[]) ?? [])
-  const newBranchConditionList = branchConditionList.map((item) => {
-    if (item.id === row.id) {
-      return { ...item, height: container.offsetHeight, index }
-    }
-    return item
-  })
-  model.properties.branch_condition_list = newBranchConditionList
-  refreshBranchAnchor(model.properties.node_data.branch, true)
-}
-
+const anchorGuard = createAnchorGuard(model)
 onMounted(() => {
   model.validate = validate
-  if (!model.properties.branch_condition_list) {
-    refreshBranchAnchor(form_data.branch, true)
-  }
+  refreshBranchAnchors()
 })
-
 onBeforeUnmount(() => {
-  Array.from(branchCardRefs.values()).forEach((observer: ResizeObserver) => observer.disconnect())
-  branchCardRefs.clear()
+  branchObservers.forEach((observer) => observer.disconnect())
+  branchObservers.clear()
+  anchorGuard.reset()
 })
 </script>
-<style lang="scss" scoped>
-.drag-card {
-  :deep(.el-card__body) {
-    padding: 12px;
-  }
 
-  &.drag-card-empty {
-    :deep(.el-card__body) {
-      display: none;
-    }
-  }
-}
-</style>
+<template>
+  <NodeContainer :node-model="model">
+    <el-form ref="conditionNodeFormRef" :model="formData" label-position="top" require-asterisk-position="right" @submit.prevent>
+      <div v-for="(branch, branchIndex) in formData.branch" :key="branch.id" v-branch-resize="branch.id" class="mk-gray-card mb-2">
+        <div class="flex-between min-h-6">
+          <span>{{ branch.type }}</span>
+          <div v-if="branch.conditions.length > 1" class="flex items-center gap-2 text-N600">
+            <span>符合以下</span>
+            <el-select
+              v-model="branch.condition"
+              :teleported="false"
+              size="small"
+              class="w-15!"
+              @visible-change="anchorGuard.setOverlayVisible(`${branch.id}:condition`, $event)"
+              @wheel="handleNodeWheel"
+            >
+              <el-option label="所有" value="and" />
+              <el-option label="任一" value="or" />
+            </el-select>
+            <span>条件</span>
+          </div>
+        </div>
+
+        <template v-if="branchIndex !== formData.branch.length - 1">
+          <div class="mt-2 space-y-2">
+            <div v-for="(condition, conditionIndex) in branch.conditions" :key="conditionIndex" class="flex items-start gap-2">
+              <el-form-item
+                class="mb-0! min-w-0 flex-2"
+                :prop="`branch.${branchIndex}.conditions.${conditionIndex}.field`"
+                :rules="{ type: 'array', required: true, message: '请选择变量', trigger: 'change' }"
+              >
+                <NodeCascader ref="nodeCascaderRefs" v-model="condition.field" :node-model="model" class="w-full" placeholder="请选择变量" />
+              </el-form-item>
+              <el-form-item
+                class="mb-0! min-w-0 flex-1"
+                :prop="`branch.${branchIndex}.conditions.${conditionIndex}.compare`"
+                :rules="{ required: true, message: '请选择比较符', trigger: 'change' }"
+              >
+                <el-select
+                  v-model="condition.compare"
+                  :teleported="false"
+                  placeholder="请选择比较符"
+                  clearable
+                  @change="changeComparison(condition)"
+                  @visible-change="anchorGuard.setOverlayVisible(`${branch.id}:${conditionIndex}:compare`, $event)"
+                  @wheel="handleNodeWheel"
+                >
+                  <el-option v-for="comparison in compareList" :key="comparison.value" :label="comparison.label" :value="comparison.value" />
+                </el-select>
+              </el-form-item>
+              <div class="min-w-0 flex-1">
+                <el-form-item
+                  v-if="!valueLessComparisons.has(condition.compare)"
+                  class="mb-0!"
+                  :prop="`branch.${branchIndex}.conditions.${conditionIndex}.value`"
+                  :rules="{ required: true, message: '请输入比较值', trigger: 'blur' }"
+                >
+                  <el-input v-model="condition.value" placeholder="请输入比较值" />
+                </el-form-item>
+              </div>
+              <el-button
+                :disabled="formData.branch.length === 2 && branch.conditions.length === 1"
+                link
+                type="info"
+                class="mt-2 shrink-0"
+                aria-label="删除条件"
+                @click="deleteCondition(branchIndex, conditionIndex)"
+              >
+                <MkIcon name="icon_delete-trash_outlined" />
+              </el-button>
+            </div>
+          </div>
+          <el-button class="mt-2" link type="primary" @click="addCondition(branch)">
+            <MkIcon name="icon_add_outlined" class="mr-1" />
+            添加条件
+          </el-button>
+        </template>
+      </div>
+      <el-button link type="primary" @click="addBranch">
+        <MkIcon name="icon_add_outlined" class="mr-1" />
+        添加分支
+      </el-button>
+    </el-form>
+  </NodeContainer>
+</template>