diff --git a/ui/src/assets/icon_condition.svg b/ui/src/assets/icon_condition.svg
new file mode 100644
index 000000000..2bc80a212
--- /dev/null
+++ b/ui/src/assets/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/components/workflow/common/NodeControl.vue b/ui/src/components/workflow/common/NodeControl.vue
index 5eb4e9613..ff4ce3e1c 100644
--- a/ui/src/components/workflow/common/NodeControl.vue
+++ b/ui/src/components/workflow/common/NodeControl.vue
@@ -1,29 +1,28 @@
 <template>
   <div>
     <el-button-group>
-      <el-button size="small" @click="$_zoomIn">放大</el-button>
-      <el-button size="small" @click="$_zoomOut">缩小</el-button>
-      <el-button size="small" @click="$_reset">适应</el-button>
+      <el-button size="small" @click="zoomIn">放大</el-button>
+      <el-button size="small" @click="zoomOut">缩小</el-button>
+      <el-button size="small" @click="fitView">适应</el-button>
     </el-button-group>
   </div>
 </template>
 
 <script setup lang="ts">
-import { ref, nextTick, computed, watch, reactive } from 'vue'
 const props = defineProps({
-  lf: Object || String
+  lf: Object || String || null
 })
 
-function $_zoomIn() {
+function zoomIn() {
   props.lf?.zoom(true)
 }
-function $_zoomOut() {
+function zoomOut() {
   props.lf?.zoom(false)
 }
-function $_reset() {
+function fitView() {
   props.lf?.resetZoom()
   props.lf?.resetTranslate()
-  props.lf?.fitView()
+  // props.lf?.fitView()
 }
 </script>
 <style scoped></style>
diff --git a/ui/src/components/workflow/common/app-node/index.ts b/ui/src/components/workflow/common/app-node/index.ts
index e935c76cb..f00e0a612 100644
--- a/ui/src/components/workflow/common/app-node/index.ts
+++ b/ui/src/components/workflow/common/app-node/index.ts
@@ -103,7 +103,7 @@ class AppNodeModel extends HtmlNodeModel {
     })
   }
   setAttributes() {
-    this.width = 340
+    this.width = this.properties?.width || 340
 
     const circleOnlyAsTarget = {
       message: '只允许从右边的锚点连出',
diff --git a/ui/src/components/workflow/icons/condition-node-icon.vue b/ui/src/components/workflow/icons/condition-node-icon.vue
index 9a01ac96c..6deed3108 100644
--- a/ui/src/components/workflow/icons/condition-node-icon.vue
+++ b/ui/src/components/workflow/icons/condition-node-icon.vue
@@ -1,6 +1,6 @@
 <template>
-  <AppAvatar shape="square" style="background: #D136D1;">
-    <img src="@/assets/icon_start.svg" style="width: 75%" alt="" />
+  <AppAvatar shape="square" style="background: #14C0FF;">
+    <img src="@/assets/icon_condition.svg" style="width: 75%" alt="" />
   </AppAvatar>
 </template>
 <script setup lang="ts"></script>
diff --git a/ui/src/components/workflow/index.vue b/ui/src/components/workflow/index.vue
index 12edcffa8..75222edbb 100644
--- a/ui/src/components/workflow/index.vue
+++ b/ui/src/components/workflow/index.vue
@@ -1,10 +1,7 @@
 <template>
-  <!-- <button @click="validate">点击校验</button>
-  <button @click="getGraphData">点击获取流程数据</button> -->
-  <div className="workflow-app" id="container">
-    <!-- 辅助工具栏 -->
-    <Control class="control" v-if="lf" :lf="lf"></Control>
-  </div>
+  <div className="workflow-app" id="container"></div>
+  <!-- 辅助工具栏 -->
+  <Control class="workflow-control" v-if="lf" :lf="lf"></Control>
 </template>
 <script setup lang="ts">
 import LogicFlow from '@logicflow/core'
@@ -73,6 +70,20 @@ const graphData = {
         output: [{ key: '输出' }]
         // node_data: { model: 'shanghai', name: '222222' }
       }
+    },
+    {
+      id: '34902d3d-a3ff-497f-b8e1-0c34a44d7dd6',
+      type: 'condition-node',
+      x: 600,
+      y: 850,
+      properties: {
+        height: 200,
+        width: 600,
+        stepName: '判断器',
+        input: [{ key: '输入' }],
+        output: [{ key: '输出' }]
+        // node_data: { model: 'shanghai', name: '222222' }
+      }
     }
   ]
   // edges: [
@@ -130,32 +141,32 @@ onMounted(() => {
           thickness: 1
         }
       },
-      keyboard: {
-        enabled: true,
-        shortcuts: [
-          {
-            keys: ['backspace'],
-            callback: () => {
-              const elements = lf.value.getSelectElements(true)
-              if (
-                (elements.edges && elements.edges.length > 0) ||
-                (elements.nodes && elements.nodes.length > 0)
-              ) {
-                const r = window.confirm('确定要删除吗？')
-                if (r) {
-                  lf.value.clearSelectElements()
-                  elements.edges.forEach((edge: any) => {
-                    lf.value.deleteEdge(edge.id)
-                  })
-                  elements.nodes.forEach((node: any) => {
-                    lf.value.deleteNode(node.id)
-                  })
-                }
-              }
-            }
-          }
-        ]
-      },
+      // keyboard: {
+      //   enabled: true,
+      //   shortcuts: [
+      //     {
+      //       keys: ['backspace'],
+      //       callback: () => {
+      //         const elements = lf.value.getSelectElements(true)
+      //         if (
+      //           (elements.edges && elements.edges.length > 0) ||
+      //           (elements.nodes && elements.nodes.length > 0)
+      //         ) {
+      //           const r = window.confirm('确定要删除吗？')
+      //           if (r) {
+      //             lf.value.clearSelectElements()
+      //             elements.edges.forEach((edge: any) => {
+      //               lf.value.deleteEdge(edge.id)
+      //             })
+      //             elements.nodes.forEach((node: any) => {
+      //               lf.value.deleteNode(node.id)
+      //             })
+      //           }
+      //         }
+      //       }
+      //     }
+      //   ]
+      // },
       isSilentMode: false,
       container: container
     })
@@ -176,7 +187,7 @@ onMounted(() => {
 })
 const validate = () => {
   lf.value.graphModel.nodes.forEach((element: any) => {
-    element.validate()
+    element?.validate?.()
   })
 }
 const getGraphData = () => {
@@ -197,7 +208,9 @@ const onmousedown = (shapeItem: ShapeItem) => {
 }
 
 defineExpose({
-  onmousedown
+  onmousedown,
+  validate,
+  getGraphData
 })
 </script>
 <style lang="scss">
@@ -205,12 +218,12 @@ defineExpose({
   width: 100%;
   height: 100%;
   position: relative;
-  .control {
-    position: absolute;
-    bottom: 24px;
-    left: 24px;
-    z-index: 2;
-  }
+}
+.workflow-control {
+  position: absolute;
+  bottom: 24px;
+  left: 24px;
+  z-index: 2;
 }
 // .lf-dnd-text {
 //   width: 200px;
diff --git a/ui/src/components/workflow/menu-data.ts b/ui/src/components/workflow/menu-data.ts
index 268a63365..768c8374d 100644
--- a/ui/src/components/workflow/menu-data.ts
+++ b/ui/src/components/workflow/menu-data.ts
@@ -47,6 +47,26 @@ const shapeList = [
         }
       ]
     }
+  },
+  {
+    type: 'condition-node',
+    text: '根据不同条件执行不同的节点',
+    label: '判断器',
+    icon: 'condition-node-icon',
+    properties: {
+      width: 600,
+      stepName: '判断器',
+      input: [
+        {
+          key: '输入'
+        }
+      ],
+      output: [
+        {
+          key: '输出'
+        }
+      ]
+    }
   }
 ]
 
diff --git a/ui/src/components/workflow/nodes/ai-chat-node/index.vue b/ui/src/components/workflow/nodes/ai-chat-node/index.vue
index 6785d4970..b0b7fe024 100644
--- a/ui/src/components/workflow/nodes/ai-chat-node/index.vue
+++ b/ui/src/components/workflow/nodes/ai-chat-node/index.vue
@@ -1,7 +1,7 @@
 <template>
   <NodeContainer :nodeModel="nodeModel">
     <h5 class="title-decoration-1 mb-8">节点设置</h5>
-    <el-card shadow="never" class="card-never">
+    <el-card shadow="never" class="card-never" style="--el-card-padding: 12px">
       <el-form
         @submit.prevent
         :model="chat_data"
diff --git a/ui/src/components/workflow/nodes/base-node/index.vue b/ui/src/components/workflow/nodes/base-node/index.vue
index dd645e210..ca1281073 100644
--- a/ui/src/components/workflow/nodes/base-node/index.vue
+++ b/ui/src/components/workflow/nodes/base-node/index.vue
@@ -23,6 +23,7 @@
           maxlength="64"
           placeholder="请输入应用名称"
           show-word-limit
+          @focus="handleFocus"
         />
       </el-form-item>
       <el-form-item label="应用描述">
@@ -33,6 +34,7 @@
           type="textarea"
           maxlength="256"
           show-word-limit
+          @focus="handleFocus"
         />
       </el-form-item>
       <el-form-item label="开场白">
@@ -48,6 +50,7 @@
   </NodeContainer>
 </template>
 <script setup lang="ts">
+import { set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
@@ -69,12 +72,12 @@ const chat_data = computed({
     return props.nodeModel.properties.node_data
   },
   set: (value) => {
-    props.nodeModel.properties.node_data = value
+    set(props.nodeModel.properties, 'node_data', value)
   }
 })
 
 const handleFocus = () => {
-  props.nodeModel.isSelected = false
+  set(props.nodeModel, 'isSelected', false)
 }
 const baseNodeFormRef = ref<FormInstance>()
 
@@ -83,7 +86,8 @@ const validate = () => {
 }
 
 onMounted(() => {
-  props.nodeModel.validate = validate
+  
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/workflow/nodes/condition-node/index.ts b/ui/src/components/workflow/nodes/condition-node/index.ts
index 0c7df419b..8f84672c3 100644
--- a/ui/src/components/workflow/nodes/condition-node/index.ts
+++ b/ui/src/components/workflow/nodes/condition-node/index.ts
@@ -1,12 +1,12 @@
-import ChatNodeVue from './index.vue'
+import ConditioNodeVue from './index.vue'
 import { AppNode, AppNodeModel } from '@/components/workflow/common/app-node/index'
-class ChatNode extends AppNode {
+class ConditioNode extends AppNode {
   constructor(props: any) {
-    super(props, ChatNodeVue)
+    super(props, ConditioNodeVue)
   }
 }
 export default {
-  type: 'start-node',
+  type: 'condition-node',
   model: AppNodeModel,
-  view: ChatNode
+  view: ConditioNode
 }
diff --git a/ui/src/components/workflow/nodes/condition-node/index.vue b/ui/src/components/workflow/nodes/condition-node/index.vue
index f51d29d9c..d73deedf3 100644
--- a/ui/src/components/workflow/nodes/condition-node/index.vue
+++ b/ui/src/components/workflow/nodes/condition-node/index.vue
@@ -1,46 +1,168 @@
 <template>
   <NodeContainer :nodeModel="nodeModel" class="start-node">
-    <h5 class="title-decoration-1 mb-8">全局变量</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">当前时 {time}</div>
-    <h5 class="title-decoration-1 mb-8">参数输出</h5>
-    <div class="border-r-4 p-8-12 mb-8 layout-bg lighter">用户问题 {question}</div>
+    <el-form
+      :model="form_data"
+      label-position="top"
+      require-asterisk-position="right"
+      label-width="auto"
+      ref="ConditionNodeFormRef"
+    >
+      <template v-for="(item, index) in form_data.branch" :key="index">
+        <el-card shadow="never" class="card-never mb-8" style="--el-card-padding: 12px">
+          <p class="lighter mb-8">{{ judgeLabel(index) }}</p>
+          <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="{
+                    required: true,
+                    message: '请选择变量',
+                    trigger: 'change'
+                  }"
+                >
+                  <el-select
+                    class="w-full"
+                    v-model="condition.field"
+                    placeholder="请选择变量"
+                    clearable
+                  >
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                  </el-select>
+                </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 v-model="condition.compare" placeholder="请选择条件" clearable>
+                    <el-option label="Zone one" value="shanghai" />
+                    <el-option label="Zone two" value="beijing" />
+                  </el-select>
+                </el-form-item>
+              </el-col>
+              <el-col :span="6">
+                <el-form-item
+                  :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 link type="info" class="mt-4" @click="deleteCondition(index, cIndex)">
+                  <el-icon><Delete /></el-icon>
+                </el-button>
+              </el-col>
+            </el-row>
+          </template>
+          <el-button link type="primary" @click="addCondition(index)">
+            <el-icon class="mr-4"><Plus /></el-icon> 添加条件
+          </el-button>
+        </el-card>
+      </template>
+      <el-button link type="primary" @click="addBranch">
+        <el-icon class="mr-4"><Plus /></el-icon> 添加分支
+      </el-button>
+    </el-form>
   </NodeContainer>
 </template>
 <script setup lang="ts">
+import { cloneDeep, set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
+const props = defineProps<{ nodeModel: any }>()
+const form = {
+  branch: [
+    {
+      conditions: [
+        {
+          field: { node_id: 'xxx', fields: '' },
+          compare: '',
+          value: ''
+        }
+      ],
+      id: 'xxxx',
+      condition: 'and'
+    }
+  ]
+}
 
-const condition_data = computed({
+const form_data = computed({
   get: () => {
     if (props.nodeModel.properties.node_data) {
       return props.nodeModel.properties.node_data
     } else {
-      props.nodeModel.properties.node_data = {
-        name: '',
-        desc: '',
-        prologue:
-          '您好，我是 MaxKB 小助手，您可以向我提出 MaxKB 使用问题。\n- MaxKB 主要功能有什么？\n- MaxKB 支持哪些大语言模型？\n- MaxKB 支持哪些文档类型？'
-      }
+      set(props.nodeModel.properties, 'node_data', form)
     }
     return props.nodeModel.properties.node_data
   },
   set: (value) => {
-    props.nodeModel.properties.node_data = value
+    set(props.nodeModel.properties, 'node_data', value)
   }
 })
-const props = defineProps<{ nodeModel: any }>()
-const handleFocus = () => {
-  props.nodeModel.isSelected = false
-}
-const aiChatNodeFormRef = ref<FormInstance>()
+
+const ConditionNodeFormRef = ref<FormInstance>()
 
 const validate = () => {
-  aiChatNodeFormRef.value?.validate()
+  ConditionNodeFormRef.value?.validate()
+}
+
+const judgeLabel = (index: number) => {
+  if (index === 0) {
+    return 'IF'
+  } else if (index === form_data.value.branch.length - 1) {
+    return 'ELSE'
+  } else {
+    return 'ELSE IF ' + index
+  }
+}
+
+function addBranch() {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list.push({
+    conditions: [
+      {
+        field: { node_id: 'xxx', fields: '' },
+        compare: '',
+        value: ''
+      }
+    ],
+    id: 'xxxx',
+    condition: 'and'
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function addCondition(index: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].push({
+    field: { node_id: 'xxx', fields: '' },
+    compare: '',
+    value: ''
+  })
+  set(props.nodeModel.properties.node_data, 'branch', list)
+}
+
+function deleteCondition(index: number, cIndex: number) {
+  const list = cloneDeep(props.nodeModel.properties.node_data.branch)
+  list[index]['conditions'].splice(cIndex, 1)
+  set(props.nodeModel.properties.node_data, 'branch', list)
 }
 
 onMounted(() => {
-  props.nodeModel.validate = validate
+  set(props.nodeModel, 'validate', validate)
 })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/components/workflow/nodes/search-dataset-node/index.vue b/ui/src/components/workflow/nodes/search-dataset-node/index.vue
index efa2b042e..997da655e 100644
--- a/ui/src/components/workflow/nodes/search-dataset-node/index.vue
+++ b/ui/src/components/workflow/nodes/search-dataset-node/index.vue
@@ -108,8 +108,6 @@ const {
 
 const props = defineProps<{ nodeModel: any }>()
 
-console.log(props.nodeModel)
-
 const form = {
   dataset_id_list: [],
   dataset_setting: {
diff --git a/ui/src/components/workflow/nodes/start-node/index.vue b/ui/src/components/workflow/nodes/start-node/index.vue
index aec6ae0e1..383f39598 100644
--- a/ui/src/components/workflow/nodes/start-node/index.vue
+++ b/ui/src/components/workflow/nodes/start-node/index.vue
@@ -7,10 +7,15 @@
   </NodeContainer>
 </template>
 <script setup lang="ts">
+import { set } from 'lodash'
 import NodeContainer from '@/components/workflow/common/node-container/index.vue'
 import type { FormInstance } from 'element-plus'
 import { ref, computed, onMounted } from 'vue'
 
 const props = defineProps<{ nodeModel: any }>()
+
+// onMounted(() => {
+//   set(props.nodeModel, 'validate', validate)
+// })
 </script>
 <style lang="scss" scoped></style>
diff --git a/ui/src/styles/element-plus.scss b/ui/src/styles/element-plus.scss
index 8aa2ef734..abb45910b 100644
--- a/ui/src/styles/element-plus.scss
+++ b/ui/src/styles/element-plus.scss
@@ -5,7 +5,7 @@
   --el-box-shadow-light: 0px 2px 4px 0px rgba(31, 35, 41, 0.12);
   --el-border-color: #dee0e3;
   --el-text-color-regular: #1f2329;
-  --el-color-info: #8f959e;
+  --el-color-info: #8f959e !important;
 }
 
 .el-button {
diff --git a/ui/src/styles/index.scss b/ui/src/styles/index.scss
index 373b1d80b..24a010d4b 100644
--- a/ui/src/styles/index.scss
+++ b/ui/src/styles/index.scss
@@ -5,4 +5,4 @@
 @import 'nprogress/nprogress.css';
 @import 'highlight.js/styles/default.css';
 @import 'md-editor-v3/lib/style.css';
-@import './md-editor.scss';
\ No newline at end of file
+@import './md-editor.scss';
diff --git a/ui/src/views/application-workflow/index.vue b/ui/src/views/application-workflow/index.vue
index 45eb529ee..f23839256 100644
--- a/ui/src/views/application-workflow/index.vue
+++ b/ui/src/views/application-workflow/index.vue
@@ -6,6 +6,8 @@
         <h4>创建应用</h4>
       </div>
       <div>
+        <button @click="validate">点击校验</button>
+        <button @click="getGraphData">点击获取流程数据</button>
         <el-button icon="Plus" @click="showPopover = !showPopover" v-click-outside="clickoutside">
           添加组件
         </el-button>
@@ -19,9 +21,9 @@
         <h5 class="title">基础组件</h5>
         <template v-for="(item, index) in shapeList" :key="index">
           <div class="workflow-dropdown-item cursor flex p-8-12" @mousedown="onmousedown(item)">
-            <component :is="iconComponent(item.icon)" class="mr-8 mt-4" />
+            <component :is="iconComponent(item.icon)" class="mr-8 mt-4" :size="32" />
             <div class="pre-line">
-              <div>{{ item.label }}</div>
+              <div class="lighter">{{ item.label }}</div>
               <el-text type="info" size="small">{{ item.text }}</el-text>
             </div>
           </div>
@@ -50,6 +52,13 @@ function onmousedown(item: any) {
   workflowRef.value?.onmousedown(item)
 }
 
+function validate() {
+  workflowRef.value?.validate()
+}
+function getGraphData() {
+  workflowRef.value?.getGraphData()
+}
+
 onMounted(() => {})
 
 onBeforeUnmount(() => {})
@@ -76,9 +85,10 @@ onBeforeUnmount(() => {})
     width: 240px;
     box-shadow: 0px 4px 8px 0px var(--app-text-color-light-1);
     background: #ffffff;
+    padding-bottom: 8px;
 
     .title {
-      padding: 8px 12px 4px;
+      padding: 12px 12px 4px;
     }
     .workflow-dropdown-item {
       &:hover {