diff --git a/src/assets/images/debugBtn.png b/src/assets/images/debugBtn.png
new file mode 100644
index 0000000000000000000000000000000000000000..cd9e7e5e8578dc8370129bbf7d57f92f9df21e19
Binary files /dev/null and b/src/assets/images/debugBtn.png differ
diff --git a/src/assets/images/debugBtnDis.png b/src/assets/images/debugBtnDis.png
new file mode 100644
index 0000000000000000000000000000000000000000..b92a4232f10a32a0e6c0af1c9f9b10ad5b80c595
Binary files /dev/null and b/src/assets/images/debugBtnDis.png differ
diff --git a/src/views/createapp/components/CustomControl.vue b/src/views/createapp/components/CustomControl.vue
index 5d4b54629417d9c63c7e89d0613c410548d756f9..adb8d13dd5a9bd5d0577492073552b62908edd3c 100644
--- a/src/views/createapp/components/CustomControl.vue
+++ b/src/views/createapp/components/CustomControl.vue
@@ -2,7 +2,7 @@
   <div class="controlBox">
     <div class="controlSearch"><IconSearch /></div>
     <div class="controlScaleNumber">
-      {{ `${zommChangeValue * 100}%` }}
+      {{ `${Number((zommChangeValue * 100).toFixed(0))}%` }}
     </div>
     <el-dropdown placement="top" @visible-change="handleVisibleChange" popper-class="controlChange" class="controlBtn">
       <span class="el-dropdown-link">
@@ -47,7 +47,7 @@ const props = withDefaults(defineProps<ControlProps>(), {});
 const zommChangeValue = ref(1);
 const dropDownVisible = ref(false);
 const handleSacl = zoomValue => {
-  zommChangeValue.value = zoomValue;
+  zommChangeValue.value = Number(zoomValue.toFixed(0));
   props.handleChangeZoom(zoomValue);
 };
 const handleVisibleChange = visible => {
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index 2429054743d247ba6fb3b029b0f229a9d587de54..82c2749338b9c44a07ddc023a74c324a448ce1ba 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import './workFlowStyle.scss';
-import { nextTick, ref } from 'vue';
+import '../../styles/workFlowArrange.scss';
+import { nextTick, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { ElTooltip } from 'element-plus';
 import { VueFlow, useVueFlow, Panel } from '@vue-flow/core';
@@ -12,6 +12,7 @@ import CustomControl from './CustomControl.vue';
 import CustomSaENode from './workFlowConfig/CustomSaENode.vue';
 import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
+import WorkFlowDebug from './workFlowDebug.vue';
 import { useLayout } from './workFlowConfig/useLayout';
 import { IconSearch, IconCaretRight, IconCaretDown, IconPlusCircle } from '@computing/opendesign-icons';
 import EditYamlDrawer from './workFlowConfig/yamlEditDrawer.vue';
@@ -28,16 +29,17 @@ const editData = ref();
 const dialogType = ref('');
 const isEditYaml = ref(false);
 const flowZoom = ref(1);
+const debugDialogVisible = ref(false)
 const isNodeAndLineConnect = ref(false);
 const emits = defineEmits(['validateConnect']);
-function hanleAsideVisible(): void {
+const hanleAsideVisible = () => {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
     isCopilotAsideVisible.value = false;
   } else {
     isCopilotAsideVisible.value = true;
   }
-}
+};
 
 const { onConnect, addEdges, getNodes, getEdges, findNode, removeNodes, setViewport, getViewport, fitView } =
   useVueFlow();
@@ -155,11 +157,7 @@ const handleZommOnScroll = () => {
 };
 
 async function layoutGraph(direction) {
-  nodes.value = layout(nodes.value, edges.value, direction);
-
-  nextTick(() => {
-    fitView();
-  });
+  nodes.value = layout(getNodes.value, getEdges.value, direction);
 }
 
 const nodeAndLineConnection = () => {
@@ -198,6 +196,11 @@ const dropFunc = e => {
   // 添加节点时-判断节点是否都连接
   nodeAndLineConnection();
 };
+
+const handleDebugDialogOps = (visible)=>{
+  debugDialogVisible.value = visible
+}
+
 </script>
 <template>
   <div class="workFlowContainer" @drop="dropFunc">
@@ -252,7 +255,7 @@ const dropFunc = e => {
     <div class="workFlowContainerRight">
       <VueFlow
         :nodes="nodes"
-        :default-viewport="{ zoom: 1 }"
+        :default-viewport="{ zoom: 0.8 }"
         :min-zoom="0.5"
         :max-zoom="4"
         class="my-diagram-class"
@@ -284,23 +287,26 @@ const dropFunc = e => {
         <template #connection-line="props">
           <CustomEdge v-bind="props" />
         </template>
+
+        <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps"/>
+      </VueFlow>
+      <div class="workFlowOps">
         <div class="workFlowSelect">
-          <el-select>
-            <el-option></el-option>
+          <el-select v-model="workFlowItem" placeholder="请选择" :suffix-icon="IconCaretDown">
+            <template #footer class="selectFooter">
+              <div class="addWorkFlow" @click="addWorkFlow">
+                <el-icon>
+                  <IconPlusCircle></IconPlusCircle>
+                </el-icon>
+                <span>新建工作流</span>
+              </div>
+            </template>
           </el-select>
         </div>
-      </VueFlow>
-      <div class="workFlowSelect">
-        <el-select v-model="workFlowItem" placeholder="请选择" :suffix-icon="IconCaretDown">
-          <template #footer class="selectFooter">
-            <div class="addWorkFlow" @click="addWorkFlow">
-              <el-icon>
-                <IconPlusCircle></IconPlusCircle>
-              </el-icon>
-              <span>新建工作流</span>
-            </div>
-          </template>
-        </el-select>
+        <div class="debugBtn" @click="handleDebugDialogOps(true)">
+          <img :src="debugDialogVisible ? 'src/assets/images/debugBtnDis.png' : 'src/assets/images/debugBtn.png'" />
+        </div>
+        <div class="debugStatus"></div>
       </div>
     </div>
     <WorkFlowDialog
@@ -312,38 +318,3 @@ const dropFunc = e => {
   </div>
   <EditYamlDrawer v-if="isEditYaml" @closeDrawer="closeDrawer"></EditYamlDrawer>
 </template>
-<style lang="scss" scoped>
-.stancesItem {
-  width: 264px;
-  height: 32px;
-  line-height: 32px;
-  background-color: var(--o-bash-bg);
-  color: var(--o-text-color-primary);
-  margin-bottom: 8px;
-  padding-left: 16px;
-  border-radius: 4px;
-}
-.workFlowContainerRight {
-  position: relative;
-  .workFlowSelect {
-    position: absolute;
-    left: 24px;
-    top: 24px;
-    display: block;
-    width: 180px;
-    height: 32px;
-    .el-select {
-      width: 144px;
-      height: 32px;
-    }
-  }
-}
-.addWorkFlow {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  .el-icon {
-    color: var(--o-text-color-tertiary);
-  }
-}
-</style>
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index 8195ea145636fac5a8ec0b3a5de3e380312aba7e..dde63133422ad667d7a12343e1d92755247d20ad 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -57,6 +57,7 @@ watch(
 .vue-flow__node {
   min-width: unset !important;
   padding: 0;
+  margin-top: -4px;
   .nodeSaEBorderBox {
     div {
       text-align: center;
@@ -84,6 +85,10 @@ watch(
   }
 }
 
+.vue-flow__node:has(.default){
+  margin-top: 0px;
+}
+
 .nodeSaEBorder {
   width: 56px;
   height: 56px;
diff --git a/src/views/createapp/components/workFlowConfig/useLayout.js b/src/views/createapp/components/workFlowConfig/useLayout.js
index 1dd933ac0d73c746995c96fa9f3346ace6f44e19..9827bf7391b0652734a09b40731871abe11111e6 100644
--- a/src/views/createapp/components/workFlowConfig/useLayout.js
+++ b/src/views/createapp/components/workFlowConfig/useLayout.js
@@ -48,7 +48,11 @@ export function useLayout() {
     // set nodes with updated positions
     return nodes.map(node => {
       const nodeWithPosition = dagreGraph.node(node.id);
-
+      console.log(nodeWithPosition,'nodeWithPosition',node);
+      let position = { x: nodeWithPosition.x, y: nodeWithPosition.y }
+      if(['1','2'].includes(node.id)){
+        
+      }
       return {
         ...node,
         targetPosition: isHorizontal ? Position.Left : Position.Top,
diff --git a/src/views/createapp/components/workFlowDebug.vue b/src/views/createapp/components/workFlowDebug.vue
new file mode 100644
index 0000000000000000000000000000000000000000..086b837902c2163237a3fdf59e0fa19126258e65
--- /dev/null
+++ b/src/views/createapp/components/workFlowDebug.vue
@@ -0,0 +1,36 @@
+<template>
+  <div class="workFlowDebug" :class="debugTheme === 'light' ? 'debugThemeLight' : 'debugThemeDark'">
+    <div class="workFlowDebugClose">
+      <div class="closeBtn" @click="handleCloseDebugDialog"><IconX /></div>
+    </div>
+    <div class="divider"></div>
+    <div class="debugContent">
+
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import '../../styles/workFlowDebug.scss';
+import { watch, ref } from 'vue';
+import { useChangeThemeStore } from 'src/store/conversation';
+import { IconX } from '@computing/opendesign-icons';
+interface DebugProps {
+  handleDebugDialogOps:any
+}
+const themeStore = useChangeThemeStore();
+const props = defineProps<DebugProps>();
+const debugTheme = ref();
+const handleCloseDebugDialog = ()=>{
+  props.handleDebugDialogOps(false)
+}
+watch(
+  () => themeStore.theme,
+  () => {
+    debugTheme.value = themeStore.theme;
+  },
+  {
+    immediate: true,
+    deep: true,
+  },
+);
+</script>
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index 081d7a05a91723da11baae73d66f49009fc3d909..8d4207958c52ed0d8fa218e284fbda8d75dd884b 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import './style.scss';
+import '../styles/createApp.scss';
 import { ref, reactive } from 'vue';
 import AppConfig from './components/appConfig.vue';
 import WorkFlow from './components/workFlow.vue';
diff --git a/src/views/createapp/style.scss b/src/views/styles/createApp.scss
similarity index 100%
rename from src/views/createapp/style.scss
rename to src/views/styles/createApp.scss
diff --git a/src/views/createapp/components/workFlowStyle.scss b/src/views/styles/workFlowArrange.scss
similarity index 75%
rename from src/views/createapp/components/workFlowStyle.scss
rename to src/views/styles/workFlowArrange.scss
index 258318f5b3321109f8a89a379d2b9442ff3fc6fd..aea28d69759f371b3aad64d345e9e25343563ac4 100644
--- a/src/views/createapp/components/workFlowStyle.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -119,6 +119,55 @@
     border-radius: 8px;
   }
 
+  .stancesItem {
+    width: 264px;
+    height: 32px;
+    line-height: 32px;
+    background-color: var(--o-bash-bg);
+    color: var(--o-text-color-primary);
+    margin-bottom: 8px;
+    padding-left: 16px;
+    border-radius: 4px;
+  }
+  .workFlowContainerRight {
+    position: relative;
+    .workFlowOps {
+      position: absolute;
+      position: absolute;
+      left: 24px;
+      top: 24px;
+      display: flex;
+      gap: 8px;
+      .workFlowSelect {
+        display: block;
+        width: 144px;
+        height: 32px;
+        .el-select {
+          width: 144px;
+          height: 32px;
+        }
+      }
+      .debugBtn {
+        width: 32px;
+        height: 32px;
+        background: var(--o-bg-color-base);
+        cursor: pointer;
+        img {
+          width: 100%;
+          height: 100%;
+        }
+      }
+    }
+  }
+  .addWorkFlow {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    .el-icon {
+      color: var(--o-text-color-tertiary);
+    }
+  }
+
   .vueFlowContainer {
     width: 100%;
     height: 100%;
diff --git a/src/views/styles/workFlowDebug.scss b/src/views/styles/workFlowDebug.scss
new file mode 100644
index 0000000000000000000000000000000000000000..70f20e02b433aca5e231bfea8a467ccc06595a39
--- /dev/null
+++ b/src/views/styles/workFlowDebug.scss
@@ -0,0 +1,66 @@
+.workFlowDebug {
+  width: 700px;
+  height: 100%;
+  position: absolute;
+  right: 0;
+  background-position: -520px -200px;
+  border-radius: 8px;
+  box-shadow: -16px 4px 16px 0px rgba(0,0,0,0.1);
+  border-right: 1px solid white;
+  display: flex;
+  flex-direction: column;
+  padding: 16px 24px;
+  z-index: 99999;
+  .workFlowDebugClose{
+    display: flex;
+    justify-content: flex-end;
+    width: 100%;
+    height: 32px;
+    align-items: center;
+    .closeBtn{
+      width: 16px;
+      height: 16px;
+      cursor: pointer;
+    }
+   
+  }
+  
+  .divider{
+    width: 100%;
+    height: 1px;
+    background: var(--o-border-color-light);
+  }
+}
+.debugThemeDark {
+  background-image: url('../../assets/images/dark_background.png');
+  --o-shell-image: url('../../assets/images/dark_shell.png');
+  --o-sider: url('../../assets/images/dark_sider.png');
+  --o-sider-hover: url('../../assets/images/dark_sider-hover.png');
+  --o-button-color: #576372;
+  --o-button-border-color: #576372;
+  --o-button-disable-color: #626d7c;
+  --o-button-disable-background: #203052;
+  --o-button-disable-border: #626d7c;
+  --o-time-text: #3e4551;
+  --o-bash-bg: #2a2f37;
+  --o-flow-code-bg: rgb(42, 47, 55);
+  --o-flow-code-border: rgb(62, 69, 81);
+}
+
+.debugThemeLight {
+    background-image: url('../../assets/images/light_background.png');
+  --o-shell-image: url('../../assets/images/light_shell.png');
+  --o-sider: url('../../assets/images/light_sider.png');
+  --o-sider-hover: url('../../assets/images/light_sider-hover.png');
+  --o-button-color: #c3cedf;
+  --o-button-border-color: #d3dce9;
+  --o-button-disable-color: #bfc7d7;
+  --o-button-disable-background: #ebedf3;
+  --o-button-disable-border: #ebedf3;
+  --o-time-text: #dfe5ef;
+  --o-bash-bg: #f4f6fa;
+  --o-flow-code-bg: rgb(244, 256, 258);
+  --o-flow-code-border: rgb(223, 229, 239);
+}
+
+