diff --git a/src/assets/images/dark_no_flow.png b/src/assets/images/dark_no_flow.png
new file mode 100644
index 0000000000000000000000000000000000000000..dde2b5816a9a0c7cb81166ea8da52b0ca6c776e2
Binary files /dev/null and b/src/assets/images/dark_no_flow.png differ
diff --git a/src/assets/images/light_no_flow.png b/src/assets/images/light_no_flow.png
new file mode 100644
index 0000000000000000000000000000000000000000..efafb14f68f3b835427e9ef9ac93ce5cc7796bbd
Binary files /dev/null and b/src/assets/images/light_no_flow.png differ
diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index 582f07b880bc34d00de5dcfa1199229d48be70dc..69d0ce24a60825a7f92cd41f8dcb2b2d1922180d 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -3,6 +3,7 @@ body[theme='dark'] {
   --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');
+  --no-work-flow: url('../../assets/images/dark_no_flow.png');
   --o-button-color: #576372;
   --o-button-border-color: #576372;
   --o-button-disable-color: #626d7c;
@@ -24,6 +25,7 @@ body[theme='light'] {
   --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');
+  --no-work-flow: url('../../assets/images/light_no_flow.png');
   --o-button-color: #c3cedf;
   --o-button-border-color: #d3dce9;
   --o-button-disable-color: #bfc7d7;
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index e6e3b8d0d3dce78cbbac473f590ced359c7fde3c..4e1276eea0f9b1a6e4a57df93df3860dc82d870c 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -38,6 +38,7 @@ const debugDialogVisible = ref(false);
 const isNodeAndLineConnect = ref(false);
 const apiServiceList = ref([]);
 const yamlContent = ref();
+const hasWorkFlow = ref(true);
 const emits = defineEmits(['validateConnect']);
 const hanleAsideVisible = () => {
   if (!copilotAside.value) return;
@@ -482,7 +483,7 @@ defineExpose({
 
         <WorkFlowDebug v-if="debugDialogVisible" :handleDebugDialogOps="handleDebugDialogOps" />
       </VueFlow>
-      <div class="workFlowOps">
+      <div class="workFlowOps" v-if="hasWorkFlow">
         <div class="workFlowSelect">
           <el-select v-model="workFlowItem" placeholder="请选择" :suffix-icon="IconCaretDown">
             <template #footer class="selectFooter">
@@ -501,6 +502,11 @@ defineExpose({
         </div>
         <div class="debugStatus"></div>
       </div>
+      <div class="noWorkFlow" v-else>
+        <div class="noFlow"></div>
+        <div class="noFlowDesc">暂无工作流</div>
+        <el-button type="primary" class="w96 addWorkFlow" @click="addWorkFlow">新建工作流</el-button>
+      </div>
     </div>
     <WorkFlowDialog
       v-if="isAddWorkFlow"
diff --git a/src/views/createapp/components/workFlowConfig/CustomEdge.vue b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
index e687e934905a6321c4743f79d0f93f754c082a95..edad7b75b1ad1b8e18d3e9996f854041763db865 100644
--- a/src/views/createapp/components/workFlowConfig/CustomEdge.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomEdge.vue
@@ -1,5 +1,5 @@
 <template>
-  <g :id="'edge' + props.id">
+  <g>
     <linearGradient id="success_success">
       <stop offset="0" stop-color="rgba(36, 171, 54, 0.2)" />
     </linearGradient>
@@ -14,7 +14,7 @@
       <stop offset="0" stop-color="rgba(227, 32, 32, 0.2)" />
       <stop offset="100" stop-color="rgba(36, 171, 54, 0.2)" />
     </linearGradient>
-    <linearGradient id="success_runing" >
+    <linearGradient id="success_runing">
       <stop offset="0" stop-color="rgba(36, 171, 54, 0.2)" />
       <stop offset="100" stop-color="rgba(99, 149, 253, 0.3)" />
     </linearGradient>
@@ -23,10 +23,8 @@
       <stop offset="100" stop-color="#DFE5EF" />
     </linearGradient>
     <path
-      :id="'line' + props.id"
       v-if="props.id && connectStatus.includes(status)"
-      :key="pathKey"
-      :d="`M  ${targetX } ${targetY - 1}` + path"
+      :d="`M ${targetX} ${targetY - 1}` +  path"
       fill="none"
       :stroke="`url(#${status})`"
       stroke-width="4"
@@ -58,7 +56,6 @@ const connectStatus = ref([
   'success_runing',
   'connect_runing',
 ]);
-const pathKey = ref(false)
 const props = defineProps({
   id: {
     type: String,
@@ -101,7 +98,6 @@ watch(
     if (!props.id) {
       return;
     }
-    pathKey.value = !pathKey.key;
     // 否则需要根据当前的起源节点和目的节点的位置，对相应的状态进行修改符合样式
     if (props?.targetX < props?.sourceX) {
       if (props.data.sourceStatus === 'success' && props.data.targetStatus === 'error') {
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index b0a181ee4bcebb4d3b624e294312157328b743ed..12eb285047b255ea08d253e7364a0723bfd2079e 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -22,10 +22,6 @@ const props = defineProps({
     type: Object,
     required: false,
   },
-  mark: {
-    type: String,
-    required: false,
-  },
 });
 
 const statusList = ref(['waiting', 'success', 'error', 'default']);
@@ -38,6 +34,8 @@ watch(
     const isInclude = statusList.value.includes(props.data?.status);
     if (!isInclude) {
       curStatus.value = 'default';
+    } else {
+      curStatus.value = props.data?.status;
     }
   },
   { deep: true, immediate: true },
@@ -45,193 +43,220 @@ watch(
 </script>
 
 <template>
-  <div class="nodeSaEBorder">
-    <Handle :type="props.data.target" :position="Position[props.data.nodePosition]" :connectable-end="true"></Handle>
-    <div class="outHandleRing outRingLeft"></div>
-    <div class="outHandleRing outRingRight"></div>
-    <div class="nodeShadow"></div>
-    <div class="nodeSaEBorderBox">
-      <img v-if="props.data.name === '开始'" src="@/assets/images/flow_start.svg" alt="">
-      <img v-else="props.data.name === '结束'" src="@/assets/images/flow_end.svg" alt="">
+  <div class="customStartAndEndNode" :class="curStatus">
+    <div class="customNodeStyle nodeSaEBorder">
+      <Handle :type="props.data.target" :position="Position[props.data.nodePosition]" :connectable-end="true"></Handle>
+      <div class="nodeSaEBorderBox">
+        <img v-if="props.data.name === '开始'" src="@/assets/images/flow_start.svg" alt="" />
+        <img v-else="props.data.name === '结束'" src="@/assets/images/flow_end.svg" alt="" />
+      </div>
+      <div class="recoverShadow" :class="props.data.name === '开始' ? 'shadowLeftTop' : 'shadowRightTop'"></div>
+      <div class="recoverShadow" :class="props.data.name === '开始' ? 'shadowLeftBottom' : 'shadowRightBottom'"></div>
     </div>
+    <div class="saEText">{{ props.data.name }}</div>
+    <div class="handleShadow" :class="props.data.name === '开始' ? 'startShadow' : 'endShadow'"></div>
   </div>
-  <div class="saEText">{{ props.data.name }}</div>
 </template>
 
 <style lang="scss">
-.vue-flow__node {
-  min-width: unset !important;
-  padding: 0;
-  margin-top: -4px;
-  .nodeSaEBorderBox {
-    div {
-      text-align: center;
-    }
-    .desc {
-      color: var(--o-text-color-tertiary);
-    }
-    &:hover {
-      .vue-flow__handle-left {
-        width: 24px;
-        height: 24px;
-        left: -8px;
-        margin-top: -12px;
-        transform: rotate(-45deg);
-        border: 4px solid rgba(122, 165, 255, 0.3);
-        border-right: 4px solid transparent;
-        border-bottom: 4px solid transparent;
-        &::after {
-          border: 3px solid rgba(122, 165, 255, 0.3);
-          background: rgba(122, 165, 255);
-          background-clip: content-box;
-        }
-      }
-    }
-    img {
-      width: 100%;
-      height: 100%;
-    }
-  }
-  .saEText {
-    color: var(--o-text-color-primary);
-    height: 24px;
-    text-align: center;
-    margin-top: 18px;
-  }
-}
-
-.vue-flow__node:has(.default){
+.vue-flow__node-custom-start,
+.vue-flow__node-custom-end {
   margin-top: 0px;
-}
-
-.nodeSaEBorder {
-  width: 56px;
-  height: 56px;
-  background: var(--o-bg-color-base);
-  display: flex;
-  align-items: center;
-  border-radius: 8px;
-  justify-content: center;
-  position: relative;
-  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
-  transform: rotate(45deg);
-
-  .outHandleRing {
-    position: absolute;
-    display: block;
-    width: 24px;
-    height: 24px;
-    background: #fff;
-    border-radius: 50%;
-    top: 50%;
-    z-index: -1;
+  &:has(.default) {
+    margin-top: -4px;
   }
-  .outRingLeft {
+  // 默认状态不显示-悬浮时显示
+  .handleShadow {
     display: none;
-    left: -12px;
-    margin-top: -12px;
   }
-  .outRingRight {
+  .recoverShadow {
     display: none;
-    right: -12px;
-    margin-top: -12px;
   }
-  .nodeSaEBorderBox {
-    width: 40px;
-    height: 40px;
-    border-radius: 8px;
-    background: #5ab3ff;
+  .nodeSaEBorder {
+    width: 56px;
+    height: 56px;
     display: flex;
     align-items: center;
+    border-radius: 8px;
     justify-content: center;
-    background: linear-gradient(127.6deg, rgba(109, 117, 250, 0.15) 8.685%, rgba(90, 179, 255, 0.15) 98.985%);
-    * {
-      transform: rotate(-45deg);
+    box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.1);
+    transform: rotate(45deg);
+    border: none;
+    .nodeSaEBorderBox {
+      width: 40px;
+      height: 40px;
+      border-radius: 8px;
+      background: #5ab3ff;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: linear-gradient(127.6deg, rgba(109, 117, 250, 0.15) 8.685%, rgba(90, 179, 255, 0.15) 98.985%);
+      * {
+        transform: rotate(-45deg);
+      }
+    }
+    img {
+      width: 100%;
+      height: 100%;
     }
-  }
-  &:hover {
-    border: 4px solid rgba(99, 149, 253, 0.3);
-    box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
     .vue-flow__handle-right {
-      right: -8px;
+      top: 0;
+      border-radius: 50%;
       width: 24px;
       height: 24px;
-      right: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(99, 149, 253, 0.3);
+      right: 4px;
+      margin-top: 4px;
       z-index: -1;
-      border-bottom: 4px solid transparent;
-      &::after {
-        border: 4px solid rgba(99, 149, 253, 0.3);
-        background: rgba(99, 149, 253);
-        background-clip: content-box;
-      }
     }
     .vue-flow__handle-left {
-      right: -8px;
+      top: 100%;
+      left: 4px;
       width: 24px;
       height: 24px;
-      left: -12px;
-      margin-top: -12px;
-      transform: rotate(45deg);
-      border: 4px solid rgba(99, 149, 253, 0.3);
+      margin-top: -4px;
+      border-radius: 50%;
       z-index: -1;
-      border-top: 4px solid transparent;
-      &::after {
+    }
+  }
+
+  &:hover {
+    // 由于开始结束节点多一层nodeSaEBorder结构，因此这里handle样式单独写
+    .nodeSaEBorder {
+      border: 4px solid rgba(99, 149, 253, 0.3);
+      box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
+      .vue-flow__handle-right {
+        right: -12px;
+        margin-top: -12px;
+        transform: rotate(45deg);
+        border: 4px solid rgba(99, 149, 253, 0.3);
+        z-index: -1;
+        border-bottom: 4px solid transparent;
+      }
+      .vue-flow__handle-left {
+        left: -12px;
+        margin-top: -12px;
+        transform: rotate(45deg);
         border: 4px solid rgba(99, 149, 253, 0.3);
-        background: rgba(99, 149, 253);
-        background-clip: content-box;
+        z-index: -1;
+        border-top: 4px solid transparent;
       }
     }
-    .outRingRight {
-      display: none;
-      box-shadow: 0px 0px 0px 8px rgba(99, 149, 253, 0.1);
-      background-clip: content-box;
+    .handleShadow {
+      display: block;
+      position: absolute;
+      top: 16px;
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      box-shadow: 0px 0px 0px 8px var(--flow-node-default-over-color);
+      z-index: -1;
+    }
+    .startShadow {
+      left: 50px;
+    }
+    .endShadow {
+      left: -18px;
+    }
+    // 悬浮时成功状态样式
+    .success {
+      .nodeSaEBorder {
+        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
+        .recoverShadow {
+          background-color: var(--flow-node-success-over-color);
+        }
+      }
+      .handleShadow {
+        box-shadow: 0px 0px 0px 8px rgba(36, 171, 54, 0.1);
+      }
+    }
+    // 悬浮时失败状态样式
+    .error {
+      .nodeSaEBorder {
+        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
+        .recoverShadow {
+          background-color: var(--flow-node-error-over-color);
+        }
+      }
+      .handleShadow {
+        box-shadow: 0px 0px 0px 8px rgba(227, 32, 32, 0.1);
+      }
+    }
+    .recoverShadow {
+      display: block;
+      position: absolute;
+      background-color: var(--flow-node-default-over-color);
+      z-index: -2;
+    }
+    .shadowLeftTop {
+      width: 8px;
+      height: 18px;
+      right: -12px;
+      top: 2px;
+    }
+    .shadowLeftBottom {
+      width: 18px;
+      height: 8px;
+      right: 2px;
+      top: -12px;
+    }
+    .shadowRightTop {
+      width: 18px;
+      height: 8px;
+      left: 2px;
+      bottom: -12px;
+    }
+    .shadowRightBottom {
+      width: 8px;
+      height: 18px;
+      left: -12px;
+      bottom: 2px;
     }
   }
-
-  .vue-flow__handle-right {
-    top: 0;
-    width: 16px;
-    height: 16px;
-    border-radius: 50%;
-    background: rgb(253, 254, 255);
-    display: flex;
-    right: 4px;
-    margin-top: 4px;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .vue-flow__handle-right::after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    border: 4px solid rgb(223, 229, 239);
-    border-radius: 50%;
-    background: rgb(141, 152, 170);
+  .success {
+    .nodeSaEBorder {
+      border: 4px solid rgba(36, 171, 54, 0.3);
+      .vue-flow__handle-left {
+        transform: rotate(-45deg);
+        left: -12px;
+        margin-top: -12px;
+        border: 4px solid rgba(36, 171, 54, 0.3);
+        border-right: 4px solid transparent;
+      }
+      .vue-flow__handle-right {
+        right: -12px;
+        margin-top: -12px;
+        transform: rotate(45deg);
+        border: 4px solid rgba(36, 171, 54, 0.3);
+        border-bottom: 4px solid transparent;
+      }
+    }
   }
-  .vue-flow__handle-left {
-    top: 100%;
-    width: 16px;
-    height: 16px;
-    left: 4px;
-    margin-top: -4px;
-    border-radius: 50%;
-    background: rgb(253, 254, 255);
-    display: flex;
-    align-items: center;
-    justify-content: center;
+  .error {
+    .nodeSaEBorder {
+      border: 4px solid rgba(227, 32, 32, 0.3);
+      .vue-flow__handle-left {
+        left: -12px;
+        margin-top: -12px;
+        transform: rotate(-45deg);
+        border: 4px solid rgba(227, 32, 32, 0.3);
+        border-right: 4px solid transparent;
+      }
+      .vue-flow__handle-right {
+        right: -12px;
+        margin-top: -12px;
+        transform: rotate(45deg);
+        border: 4px solid rgba(227, 32, 32, 0.3);
+        border-bottom: 4px solid transparent;
+      }
+    }
   }
+}
 
-  .vue-flow__handle-left::after {
-    content: '';
-    width: 12px;
-    height: 12px;
-    border: 4px solid rgb(223, 229, 239);
-    border-radius: 50%;
-    background: rgb(141, 152, 170);
-  }
+.saEText {
+  color: var(--o-text-color-primary);
+  width: 56px;
+  height: 24px;
+  text-align: center;
+  margin-top: 18px;
 }
 </style>
diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
index 49ad6b42c4f3036dae2c4b2a521e648c8b9b6ce0..a59a5c3b7f05ee96650eb2888fc9c6e53fccf067 100644
--- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
+++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
@@ -9,10 +9,10 @@
       label-position="left"
     >
       <el-form-item prop="name" label="工作流名称">
-        <el-input v-model="workFlowData.name" placeholder="请输入" class="w320 o-validate-input" clearable></el-input>
+        <el-input v-model="workFlowData.name" placeholder="请输入" maxlength="20" class="w320 o-validate-input" clearable></el-input>
       </el-form-item>
       <el-form-item prop="desc" label="工作流描述">
-        <el-input v-model="workFlowData.desc" placeholder="请输入" class="w320 o-validate-input" clearable></el-input>
+        <el-input type="textarea" show-word-limit maxlength="150" v-model="workFlowData.desc" placeholder="请输入" class="w320 workFlowDesc o-validate-input" clearable></el-input>
       </el-form-item>
     </el-form>
     <template #footer>
diff --git a/src/views/createapp/index.vue b/src/views/createapp/index.vue
index 7d6c2936aae1dd92dbea28d7e6ee1e556d625238..b76a3ca94706497bf04d51e4dcbbb4c952845ab0 100644
--- a/src/views/createapp/index.vue
+++ b/src/views/createapp/index.vue
@@ -115,8 +115,7 @@ const handleJumperAppCenter = () => {
       <el-button>取消</el-button>
       <el-button>保存</el-button>
       <el-button :disabled="true">预览</el-button>
-      <!-- :disabled="appFormValidate || appFormValidate" -->
-      <el-button type="primary" @click="handlePulishApp()">发布</el-button>
+      <el-button type="primary" :disabled="publishValidate" @click="handlePulishApp()">发布</el-button>
     </div>
   </div>
 </template>
@@ -130,13 +129,11 @@ const handleJumperAppCenter = () => {
 ::-webkit-scrollbar {
   width: 3px !important;
   height: 3px !important;
-  // display: none;
 }
 
 /* 滚动条的滑块 */
 ::-webkit-scrollbar-thumb {
   background-color: #c3cedf;
   border-radius: 3px;
-  // display: none;
 }
 </style>
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index 8004d8682da1b9d02ce90b3629cd3985a55b0c3f..a1749b21f4a845bcddf694c026af836b66a78cf6 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -337,3 +337,13 @@
 .w320 {
   width: 320px;
 }
+
+.w96 {
+  width: 96px;
+}
+
+.workFlowDesc {
+  .el-textarea__inner {
+    height: 56px;
+  }
+}
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index a6897eafdfb7df188373f0965ef936843d43deef..523f9d64db7ba950dfcfb5ff3bcd70a914142cc0 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -135,7 +135,6 @@
   .workFlowContainerRight {
     position: relative;
     .workFlowOps {
-      position: absolute;
       position: absolute;
       left: 24px;
       top: 24px;
@@ -161,6 +160,34 @@
         }
       }
     }
+    .noWorkFlow {
+      position: absolute;
+      width: 320px;
+      height: 202px;
+      top: 50%;
+      left: 50%;
+      margin-top: -160px;
+      margin-left: -102px;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 0px;
+      .noFlow {
+        height: 130px;
+        width: 100%;
+        background-image: var(--no-work-flow);
+        background-size: 100% 100%;
+        line-height: 130px;
+      }
+      .noFlowDesc {
+        width: 100%;
+        height: 16px;
+        margin-top: 8px;
+        margin-bottom: 16px;
+        text-align: center;
+        color: var(--o-text-color-secondary);
+      }
+    }
   }
   .addWorkFlow {
     display: flex;