From 4421bc05f6e411326b8ecd8cb9cb44aa7be750a0 Mon Sep 17 00:00:00 2001
From: li-shengren-123456 <lishengren@h-partners.com>
Date: Wed, 26 Mar 2025 15:08:33 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=94=B9=E9=83=A8=E5=88=86=E6=A3=80?=
 =?UTF-8?q?=E8=A7=86=E6=84=8F=E8=A7=81=E7=9A=84=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/styles/theme.scss                  |   9 +-
 .../dialoguePanel/DialoguePanel.vue           |   2 +-
 src/views/createapp/components/appConfig.vue  | 443 +++++++++---------
 src/views/createapp/components/workFlow.vue   |  41 +-
 .../components/workFlowConfig/CustomNode.vue  |  36 +-
 .../workFlowConfig/CustomSaENode.vue          |  20 +
 .../workFlowConfig/workFlowDialog.vue         |   1 -
 src/views/styles/createApp.scss               |  56 ++-
 src/views/styles/workFlowArrange.scss         |  37 +-
 9 files changed, 399 insertions(+), 246 deletions(-)

diff --git a/src/assets/styles/theme.scss b/src/assets/styles/theme.scss
index df71b8c6..16898472 100644
--- a/src/assets/styles/theme.scss
+++ b/src/assets/styles/theme.scss
@@ -104,7 +104,7 @@ body[theme='light'] {
   --flow-nodeBox-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.1);
   // 工作流节点背景色
   --flow-bg-color: #fdfeff;
-  --o-bash-box-shadow: 0 4px 16px 0 rgba(42, 47, 55, 0.1);
+  --o-bash-box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
   // 工作流开始节点结束背景渐变色
   --flow-startEnd-bg: linear-gradient(
     rgba(133, 148, 253, 0.3),
@@ -168,11 +168,12 @@ body[theme='light'] {
 
 body {
   // 这里替换下拉框的选中颜色，无论亮暗都是一致
-  .el-select-dropdown__item.is-hovering {
-    background-color: #7aa5ff !important;
-  }
   .el-select-dropdown__item.is-selected {
     background-color: #6395fd !important;
     font-weight: normal !important;
   }
+  // 悬浮优先级高于选中
+  .el-select-dropdown__item:hover {
+    background-color: #7aa5ff !important;
+  }
 }
diff --git a/src/components/dialoguePanel/DialoguePanel.vue b/src/components/dialoguePanel/DialoguePanel.vue
index 5cdd4e6e..8b2cc4fe 100644
--- a/src/components/dialoguePanel/DialoguePanel.vue
+++ b/src/components/dialoguePanel/DialoguePanel.vue
@@ -1325,7 +1325,7 @@ const searchAppName = (appId) => {
             }
           }
           &:last-child {
-            border-bottom: 1px solid transparent;
+            border-bottom: 1px solid transparent !important;
           }
         }
         .el-collapse-item__content {
diff --git a/src/views/createapp/components/appConfig.vue b/src/views/createapp/components/appConfig.vue
index 0b9f5390..79c679aa 100644
--- a/src/views/createapp/components/appConfig.vue
+++ b/src/views/createapp/components/appConfig.vue
@@ -104,6 +104,20 @@ const modeOptions = reactive([
 const handleChange = (val: number[]) => {
   activeNames.value = val;
 };
+
+// 这里是将基本信息展开收起单独提出来，避免滚动条超出右方卡片上方
+const changeActiveName = () => {
+  const idx = activeNames.value.indexOf(1);
+  if (idx > -1) {
+    // 如果基本信息collapse存在【展开状态】则删除【收起】
+    activeNames.value.splice(idx, 1);
+    activeName.value.splice(idx, 1);
+  } else {
+    // 否则添加【展开】
+    activeNames.value.push(1);
+    activeName.value.push(1);
+  }
+}
 const addLink = () => {
   createAppForm.value.links.push('');
 };
@@ -279,237 +293,246 @@ defineExpose({
 </script>
 <template>
   <CustomLoading :loading="loading"></CustomLoading>
-  <el-form
-    :model="createAppForm"
-    ref="createAppFormRef"
-    label-width="118px"
-    :rules="createAppRole"
-    class="createAppContainerMainLeft"
-  >
-    <el-collapse
-      v-model="activeName"
-      @change="handleChange"
-      class="o-hpc-collapse"
-      :prefix-icon="IconCaretRight"
+  <!-- 将基本信息collapse提出 -->
+  <div class="appConfig">
+    <div class="baseInfoTitle" :class="{ 'activeCollapse': activeNames.includes(1) }" @click="changeActiveName">
+      <span>基本信息</span>
+      <el-icon :class="{ 'is-active': activeNames.includes(1) }" class="el-collapse-item__arrow">
+        <IconCaretRight />
+      </el-icon>
+    </div>
+    <el-form
+      :model="createAppForm"
+      ref="createAppFormRef"
+      label-width="118px"
+      :rules="createAppRole"
+      class="createAppContainerMainLeft"
     >
-      <el-collapse-item title="Consistency" :name="1">
-        <template #title>
-          <span>基本信息</span>
-          <el-icon
-            class="el-collapse-item__arrow"
-            :class="{ 'is-active': activeNames.includes(1) }"
-          >
-            <IconCaretRight />
-          </el-icon>
-        </template>
-        <el-form-item label="图标" prop="icon" class="notRequired">
-          <div class="uploadArea">
-            <el-upload
-              class="placeIcon avatar-uploader"
-              action="#"
-              :show-file-list="false"
-              :on-success="handleAvatarSuccess"
-              :before-upload="beforeUpload"
-              :http-request="httpRequest"
-              :accept="'image/*'"
-            >
-              <img
-                v-if="createAppForm.icon.length"
-                :src="createAppForm.icon"
-                class="avatar"
-              />
-              <div v-else class="defaultIcon"></div>
-              <div class="uploadIcon"></div>
-            </el-upload>
-            <span class="text">上传图标</span>
-          </div>
-        </el-form-item>
-        <el-form-item label="应用名称" prop="name">
-          <el-input
-            class="w320"
-            maxlength="20"
-            v-model="createAppForm.name"
-            clearable
-            placeholder="请输入"
-          ></el-input>
-        </el-form-item>
-        <el-form-item label="应用简介" prop="description">
-          <el-input
-            class="w320 h80"
-            v-model="createAppForm.description"
-            maxlength="150"
-            place
-            clearable
-            type="textarea"
-            placeholder="请输入"
-            @keydown.enter="handleTextareaEnter"
-          ></el-input>
-        </el-form-item>
-        <!-- 这里notRequired样式,在局部的通过校验时，控制局部的样式为正常。links为空时通过校验 -->
-        <el-form-item label="相关链接" prop="links" class="notRequired">
-          <div class="linkLine">
-            <el-button
-              :icon="IconPlusCircle"
-              @click="addLink"
-              :disabled="createAppForm.links.length > 4"
+      <el-collapse
+        v-model="activeName"
+        @change="handleChange"
+        class="o-hpc-collapse"
+        :prefix-icon="IconCaretRight"
+      >
+        <el-collapse-item title="Consistency" :name="1">
+          <template #title>
+            <span>基本信息</span>
+            <el-icon
+              class="el-collapse-item__arrow"
+              :class="{ 'is-active': activeNames.includes(1) }"
             >
-              添加链接
-            </el-button>
-            <span class="linkText">最多添加5个链接</span>
-          </div>
-          <div class="linkArea" v-for="(item, index) in createAppForm.links">
+              <IconCaretRight />
+            </el-icon>
+          </template>
+          <el-form-item label="图标" prop="icon" class="notRequired">
+            <div class="uploadArea">
+              <el-upload
+                class="placeIcon avatar-uploader"
+                action="#"
+                :show-file-list="false"
+                :on-success="handleAvatarSuccess"
+                :before-upload="beforeUpload"
+                :http-request="httpRequest"
+                :accept="'image/*'"
+              >
+                <img
+                  v-if="createAppForm.icon.length"
+                  :src="createAppForm.icon"
+                  class="avatar"
+                />
+                <div v-else class="defaultIcon"></div>
+                <div class="uploadIcon"></div>
+              </el-upload>
+              <span class="text">上传图标</span>
+            </div>
+          </el-form-item>
+          <el-form-item label="应用名称" prop="name">
             <el-input
               class="w320"
-              maxlength="200"
-              :class="{ validUrl: checkUrl(createAppForm.links[index]) }"
-              v-model="createAppForm.links[index]"
-              placeholder="请输入"
+              maxlength="20"
+              v-model="createAppForm.name"
               clearable
+              placeholder="请输入"
             ></el-input>
-            <el-icon class="delIcon" @click="delConnectItem(index)">
-              <IconDelete />
-            </el-icon>
-          </div>
-        </el-form-item>
-
-        <el-form-item
-          label="推荐问题"
-          prop="recommendedQuestions"
-          class="notRequired"
-        >
-          <div class="linkLine">
-            <el-button
-              :icon="IconPlusCircle"
-              @click="addRecommond"
-              :disabled="createAppForm.recommendedQuestions.length > 2"
-            >
-              添加问题
-            </el-button>
-            <span class="linkText">最多添加3个问题</span>
-          </div>
-          <div
-            class="linkArea"
-            v-for="(item, index) in createAppForm.recommendedQuestions"
-          >
+          </el-form-item>
+          <el-form-item label="应用简介" prop="description">
             <el-input
-              class="w320"
-              maxlength="30"
-              v-model="createAppForm.recommendedQuestions[index]"
-              placeholder="请输入"
+              class="w320 h80"
+              v-model="createAppForm.description"
+              maxlength="150"
+              place
               clearable
+              type="textarea"
+              placeholder="请输入"
+              @keydown.enter="handleTextareaEnter"
             ></el-input>
-            <el-icon class="delIcon" @click="delRecommendItem(index)">
-              <IconDelete />
-            </el-icon>
-          </div>
-        </el-form-item>
-      </el-collapse-item>
-      <el-collapse-item title="Consistency" :name="2">
-        <template #title>
-          <span>多轮对话</span>
-          <el-icon
-            class="el-collapse-item__arrow"
-            :class="{ 'is-active': activeNames.includes(2) }"
-          >
-            <IconCaretRight />
-          </el-icon>
-        </template>
-        <el-form-item label="请选择对话轮次" prop="dialogRounds">
-          <div class="multiSessionItem">
-            <el-input-number
-              v-model="createAppForm.dialogRounds"
-              :step="1"
-              :value-on-clear="3"
-              :min="1"
-              :max="10"
-            ></el-input-number>
-            <span class="sessionUnit">(1 ~ 10)</span>
-          </div>
-        </el-form-item>
-      </el-collapse-item>
-      <el-collapse-item title="Consistency" :name="3">
-        <template #title>
-          <span>权限配置</span>
-          <el-icon
-            class="el-collapse-item__arrow"
-            :class="{ 'is-active': activeNames.includes(3) }"
-          >
-            <IconCaretRight />
-          </el-icon>
-        </template>
-        <el-form-item label="权限" prop="permission" class="permissionItem">
-          <div class="permissionSelect">
-            <el-radio-group v-model="createAppForm.permission.visibility">
-              <el-radio
-                v-for="(item, index) in permissionTypeList"
-                :key="index"
-                :value="item.value"
+          </el-form-item>
+          <!-- 这里notRequired样式,在局部的通过校验时，控制局部的样式为正常。links为空时通过校验 -->
+          <el-form-item label="相关链接" prop="links" class="notRequired">
+            <div class="linkLine">
+              <el-button
+                :icon="IconPlusCircle"
+                @click="addLink"
+                :disabled="createAppForm.links.length > 4"
               >
-                {{ item.label }}
-              </el-radio>
-            </el-radio-group>
-          </div>
-          <div
-            class="partPermissionPerson"
-            v-if="createAppForm.permission.visibility === 'protected'"
+                添加链接
+              </el-button>
+              <span class="linkText">最多添加5个链接</span>
+            </div>
+            <div class="linkArea" v-for="(item, index) in createAppForm.links">
+              <el-input
+                class="w320"
+                maxlength="200"
+                :class="{ validUrl: checkUrl(createAppForm.links[index]) }"
+                v-model="createAppForm.links[index]"
+                placeholder="请输入"
+                clearable
+              ></el-input>
+              <el-icon class="delIcon" @click="delConnectItem(index)">
+                <IconDelete />
+              </el-icon>
+            </div>
+          </el-form-item>
+
+          <el-form-item
+            label="推荐问题"
+            prop="recommendedQuestions"
+            class="notRequired"
           >
-            <div class="permissionChoice">
-              <div class="perimissionChoiceTitle">
-                <div>可选</div>
-                <div class="choiceNum">{{ curPersonList.length }}</div>
-              </div>
+            <div class="linkLine">
+              <el-button
+                :icon="IconPlusCircle"
+                @click="addRecommond"
+                :disabled="createAppForm.recommendedQuestions.length > 2"
+              >
+                添加问题
+              </el-button>
+              <span class="linkText">最多添加3个问题</span>
+            </div>
+            <div
+              class="linkArea"
+              v-for="(item, index) in createAppForm.recommendedQuestions"
+            >
               <el-input
-                ref="inputRef"
-                v-model="searchName"
-                class="o-style-search permissionInputSearch"
-                placeholder="搜索用户"
-                @input="searchPerson"
+                class="w320"
+                maxlength="30"
+                v-model="createAppForm.recommendedQuestions[index]"
+                placeholder="请输入"
                 clearable
-                :prefix-icon="IconSearch"
               ></el-input>
-              <div class="personList">
-                <el-checkbox-group
-                  v-model="createAppForm.permission.authorizedUsers"
+              <el-icon class="delIcon" @click="delRecommendItem(index)">
+                <IconDelete />
+              </el-icon>
+            </div>
+          </el-form-item>
+        </el-collapse-item>
+        <el-collapse-item class="chatsCollapse" title="Consistency" :name="2">
+          <template #title>
+            <span>多轮对话</span>
+            <el-icon
+              class="el-collapse-item__arrow"
+              :class="{ 'is-active': activeNames.includes(2) }"
+            >
+              <IconCaretRight />
+            </el-icon>
+          </template>
+          <el-form-item label="请选择对话轮次" prop="dialogRounds">
+            <div class="multiSessionItem">
+              <el-input-number
+                v-model="createAppForm.dialogRounds"
+                :step="1"
+                :value-on-clear="3"
+                :min="1"
+                :max="10"
+              ></el-input-number>
+              <span class="sessionUnit">(1 ~ 10)</span>
+            </div>
+          </el-form-item>
+        </el-collapse-item>
+        <el-collapse-item title="Consistency" :name="3">
+          <template #title>
+            <span>权限配置</span>
+            <el-icon
+              class="el-collapse-item__arrow"
+              :class="{ 'is-active': activeNames.includes(3) }"
+            >
+              <IconCaretRight />
+            </el-icon>
+          </template>
+          <el-form-item label="权限" prop="permission" class="permissionItem">
+            <div class="permissionSelect">
+              <el-radio-group v-model="createAppForm.permission.visibility">
+                <el-radio
+                  v-for="(item, index) in permissionTypeList"
+                  :key="index"
+                  :value="item.value"
                 >
-                  <el-checkbox
-                    v-for="(item, index) in curPersonList"
-                    :key="index"
-                    :value="item?.userSub"
-                  >
-                    <span class="circle"></span>
-                    {{ item?.userName }}
-                  </el-checkbox>
-                </el-checkbox-group>
-              </div>
+                  {{ item.label }}
+                </el-radio>
+              </el-radio-group>
             </div>
-            <div class="permissionChoice">
-              <div class="perimissionChoiceTitle">
-                <div>已选</div>
-                <div class="choiceNum">
-                  {{ createAppForm.permission.authorizedUsers.length }}
+            <div
+              class="partPermissionPerson"
+              v-if="createAppForm.permission.visibility === 'protected'"
+            >
+              <div class="permissionChoice">
+                <div class="perimissionChoiceTitle">
+                  <div>可选</div>
+                  <div class="choiceNum">{{ curPersonList.length }}</div>
+                </div>
+                <el-input
+                  ref="inputRef"
+                  v-model="searchName"
+                  class="o-style-search permissionInputSearch"
+                  placeholder="搜索用户"
+                  @input="searchPerson"
+                  clearable
+                  :prefix-icon="IconSearch"
+                ></el-input>
+                <div class="personList">
+                  <el-checkbox-group
+                    v-model="createAppForm.permission.authorizedUsers"
+                  >
+                    <el-checkbox
+                      v-for="(item, index) in curPersonList"
+                      :key="index"
+                      :value="item?.userSub"
+                    >
+                      <span class="circle"></span>
+                      {{ item?.userName }}
+                    </el-checkbox>
+                  </el-checkbox-group>
                 </div>
               </div>
-              <div class="personList">
-                <el-checkbox-group
-                  v-model="createAppForm.permission.authorizedUsers"
-                >
-                  <el-checkbox
-                    v-for="(item, index) in createAppForm.permission
-                      .authorizedUsers"
-                    :key="index"
-                    :value="item"
+              <div class="permissionChoice">
+                <div class="perimissionChoiceTitle">
+                  <div>已选</div>
+                  <div class="choiceNum">
+                    {{ createAppForm.permission.authorizedUsers.length }}
+                  </div>
+                </div>
+                <div class="personList">
+                  <el-checkbox-group
+                    v-model="createAppForm.permission.authorizedUsers"
                   >
-                    <span class="circle"></span>
-                    {{ item }}
-                  </el-checkbox>
-                </el-checkbox-group>
+                    <el-checkbox
+                      v-for="(item, index) in createAppForm.permission
+                        .authorizedUsers"
+                      :key="index"
+                      :value="item"
+                    >
+                      <span class="circle"></span>
+                      {{ item }}
+                    </el-checkbox>
+                  </el-checkbox-group>
+                </div>
               </div>
             </div>
-          </div>
-        </el-form-item>
-      </el-collapse-item>
-    </el-collapse>
-  </el-form>
+          </el-form-item>
+        </el-collapse-item>
+      </el-collapse>
+    </el-form>
+  </div>
   <div class="createAppContainerMainBox">
     <div class="previewTitle">界面预览</div>
     <div class="createAppContainerMainRight" :class="themeStore.theme">
diff --git a/src/views/createapp/components/workFlow.vue b/src/views/createapp/components/workFlow.vue
index bc931b43..7c1564d3 100644
--- a/src/views/createapp/components/workFlow.vue
+++ b/src/views/createapp/components/workFlow.vue
@@ -15,6 +15,7 @@ import useDragAndDrop from './workFlowConfig/useDnD';
 import WorkFlowDialog from './workFlowConfig/workFlowDialog.vue';
 import WorkFlowDebug from './workFlowDebug.vue';
 import { useLayout } from './workFlowConfig/useLayout';
+import { useChangeThemeStore } from 'src/store/conversation';
 import {
   IconSearch,
   IconCaretRight,
@@ -66,6 +67,8 @@ const totalTime = ref(0);
 const isNodeAndLineConnect = ref(false);
 const loading = ref(false);
 const apiLoading = ref(false);
+const themeStore = useChangeThemeStore();
+const connectHandleNodeId = ref('');
 const hanleAsideVisible = () => {
   if (!copilotAside.value) return;
   if (isCopilotAsideVisible.value) {
@@ -555,6 +558,25 @@ const updateNodeFunc = (id, status, constTime, content?) => {
   });
 };
 
+// 保存当前handle拖拽的nodeid--以便于拖拽结束时，设置该节点handle恢复默认状态
+const updateConnectHandle = (nodeId) => {
+  connectHandleNodeId.value = nodeId;
+};
+
+// 这里是松开鼠标时[拖拽结束]-恢复不再拖拽的handle节点默认状态【对应的是customNode里拖拽节点设置状态】
+const cancelConnectStatus = (e) => {
+  if (connectHandleNodeId.value) {
+    // 获取到当前的node,更新
+    const node = findNode(connectHandleNodeId.value);
+    // 这里获取node的data
+    const data = node?.data;
+    // 根据当前id，更新下data重新赋值，初始化节点状态和handle状态
+    updateNode(connectHandleNodeId.value, { data: { ...data } });
+    // 将其置空
+    connectHandleNodeId.value = '';
+  }
+};
+
 const saveFlow = (updateNodeParameter?) => {
   loading.value = true;
   const appId = route.query?.appId;
@@ -626,7 +648,6 @@ const saveFlow = (updateNodeParameter?) => {
       {
         appId: appId,
         flowId: flowObj.value.flowId,
-        topologyCheck: false,
       },
       {
         flow: {
@@ -757,9 +778,18 @@ defineExpose({
         @nodes-change="nodesChange"
         @paneScroll="handleZommOnScroll"
         @viewportChangeEnd="viewportChangeEndFunc"
+        @mouseup="cancelConnectStatus"
       >
-        <Background pattern-color="#aaa" :gap="8" />
-        <MiniMap :width="220" mask-color="#f4f6fa" :mask-stroke-width="250" />
+        <Background
+          :color="themeStore.theme === 'dark' ? '#3e4551' : '#dfe5ef'"
+          :size="2"
+          :gap="8"
+        />
+        <MiniMap
+          :width="220"
+          :mask-color="themeStore.theme === 'dark' ? '#2a2f37' : '#f4f6fa'"
+          :mask-stroke-width="250"
+        />
         <CustomControl
           :handleChangeZoom="handleChangeZoom"
           :flowZoom="flowZoom"
@@ -772,6 +802,7 @@ defineExpose({
             :disabled="debugDialogVisible"
             @delNode="delNode"
             @editYamlDrawer="editYamlDrawer"
+            @updateConnectHandle="updateConnectHandle"
           ></CustomNode>
         </template>
 
@@ -787,11 +818,11 @@ defineExpose({
 
         <!-- 开始结束节点 -->
         <template #node-start="nodeStartProps">
-          <CustomSaENode v-bind="nodeStartProps"></CustomSaENode>
+          <CustomSaENode @updateConnectHandle="updateConnectHandle" v-bind="nodeStartProps"></CustomSaENode>
         </template>
 
         <template #node-end="nodeEndProps">
-          <CustomSaENode v-bind="nodeEndProps"></CustomSaENode>
+          <CustomSaENode @updateConnectHandle="updateConnectHandle" v-bind="nodeEndProps"></CustomSaENode>
         </template>
 
         <!-- 自定义边线-连接后 -->
diff --git a/src/views/createapp/components/workFlowConfig/CustomNode.vue b/src/views/createapp/components/workFlowConfig/CustomNode.vue
index 644143c5..4441c732 100644
--- a/src/views/createapp/components/workFlowConfig/CustomNode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomNode.vue
@@ -25,7 +25,7 @@ const props = defineProps({
     required: false,
   },
 });
-const emits = defineEmits(['delNode', 'editYamlDrawer']);
+const emits = defineEmits(['delNode', 'editYamlDrawer', 'updateConnectHandle']);
 
 const statusList = ref(['running', 'success', 'error']);
 
@@ -35,6 +35,10 @@ const curStatus = ref('');
 // 当前节点运行耗时
 const costTime = ref('');
 
+// 当前handle是否连接中[分别是target和source]
+const handleTargetConnecting = ref(false);
+const handleSourceConnecting = ref(false);
+
 // 定义传给mirror展示输入输出的存储量
 const inputAndOutput = ref({
   input_parameters: {},
@@ -64,6 +68,8 @@ watch(
       inputAndOutput.value.output_parameters =
         props.data?.parameters?.output_parameters || {};
     }
+    handleTargetConnecting.value = false;
+    handleSourceConnecting.value = false;
   },
   { deep: true, immediate: true },
 );
@@ -77,11 +83,27 @@ const delNode = (id) => {
 const editYaml = (nodeName, nodeDesc, yamlCode) => {
   emits('editYamlDrawer', nodeName, nodeDesc, yamlCode, props.id);
 };
+
+// 设置当前正在连接[这里是使连接过程中，handle节点高亮]
+const setConnectStatus = (type) => {
+  if (type === 'source') {
+    handleSourceConnecting.value = true;
+  } else {
+    handleTargetConnecting.value = true;
+  }
+  // 更新当前节点handle连接状态
+  emits('updateConnectHandle', props.id);
+};
 </script>
 
 <template>
   <div class="customNodeStyle" :class="curStatus">
-    <Handle type="target" :position="Position.Left"></Handle>
+    <Handle
+      :class="{ isConnecting: handleTargetConnecting }"
+      @mousedown="setConnectStatus('target')"
+      type="target"
+      :position="Position.Left"
+    ></Handle>
     <div class="nodeBox" :class="getNodeClass(props.data)">
       <div class="title" v-if="props.data.name">
         <img class="iconStyle" :src="getSrcIcon(props.data)" />
@@ -93,7 +115,13 @@ const editYaml = (nodeName, nodeDesc, yamlCode) => {
             trigger="hover"
             popper-class="nodeDealPopper"
           >
-            <template #reference>···</template>
+            <template #reference>
+              <div class="moreDots">
+                <div class="nodeDot"></div>
+                <div class="nodeDot"></div>
+                <div class="nodeDot"></div>
+              </div>
+            </template>
             <el-button
               text
               class="dealItem"
@@ -120,6 +148,8 @@ const editYaml = (nodeName, nodeDesc, yamlCode) => {
     <Handle
       type="source"
       :position="Position.Right"
+      @mousedown="setConnectStatus('source')"
+      :class="{ isConnecting: handleSourceConnecting }"
       :connectable="props.data?.isConnectSource"
     ></Handle>
     <!-- 调试时出现-暂时隐藏 -->
diff --git a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
index 9a5d6973..045a1d96 100644
--- a/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
+++ b/src/views/createapp/components/workFlowConfig/CustomSaENode.vue
@@ -23,11 +23,27 @@ const props = defineProps({
     required: false,
   },
 });
+const emits = defineEmits(['updateConnectHandle']);
 
 const statusList = ref(['running', 'success', 'error']);
 
 const curStatus = ref('');
 
+// 当前handle是否连接中[分别是target和source]
+const handleTargetConnecting = ref(false);
+const handleSourceConnecting = ref(false);
+
+// 设置当前正在连接
+const setConnectStatus = (type) => {
+  if (type === 'source') {
+    handleSourceConnecting.value = true;
+  } else {
+    handleTargetConnecting.value = true;
+  }
+  // 更新当前节点handle连接状态
+  emits('updateConnectHandle', props.id);
+};
+
 watch(
   () => props.data,
   () => {
@@ -37,6 +53,8 @@ watch(
     } else {
       curStatus.value = props.data?.status;
     }
+    handleTargetConnecting.value = false;
+    handleSourceConnecting.value = false;
   },
   { deep: true, immediate: true },
 );
@@ -46,7 +64,9 @@ watch(
   <div class="customStartAndEndNode">
     <div class="customNodeStyle nodeSaEBorder" :class="curStatus">
       <Handle
+        :class="{ isConnecting: handleTargetConnecting }"
         :type="props.data.target"
+        @mousedown="setConnectStatus('target')"
         :position="Position[props.data.nodePosition]"
         :connectable-end="true"
       ></Handle>
diff --git a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
index 4d25652c..846bc35e 100644
--- a/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
+++ b/src/views/createapp/components/workFlowConfig/workFlowDialog.vue
@@ -112,7 +112,6 @@ const handleSubmit = (formEl: FormInstance | undefined) => {
           {
             appId: appId,
             flowId,
-            topologyCheck: false,
           },
           {
             flow: {
diff --git a/src/views/styles/createApp.scss b/src/views/styles/createApp.scss
index b28e5b88..0fd5e70c 100644
--- a/src/views/styles/createApp.scss
+++ b/src/views/styles/createApp.scss
@@ -129,10 +129,30 @@
     background: var(--o-bg-image) center center no-repeat;
     background-size: cover;
   }
-
+  .appConfig {
+    height: 100%;
+    .baseInfoTitle {
+      height: 24px;
+      margin-bottom: 8px;
+      margin-left: 8px;
+      font-weight: bolder;
+      font-size: 16px;
+      display: flex;
+      align-items: center;
+    }
+    .activeCollapse.baseInfoTitle {
+      color: #000;;
+    }
+      
+    .el-collapse-item__arrow {
+      color: #8d98aa;
+      margin-left: 8px;
+    }
+  }
+  // 外面多套了一层appConfig[上方]，用以调整滚动条样式
   .createAppContainerMainLeft {
     width: 560px;
-    height: 100%;
+    height: calc(100% - 32px);
     margin-top: 0px;
     --o-owndefine-del-hover: #7aa5ff;
     --o-owndefine-del-active: #6395fd;
@@ -146,10 +166,6 @@
       font-size: 16px;
       font-weight: bolder;
       margin-bottom: 8px;
-      .el-collapse-item__arrow {
-        color: #8d98aa;
-        margin-left: 8px;
-      }
     }
     .el-collapse-item__content {
       margin-left: 0px;
@@ -271,8 +287,8 @@
         .partPermissionPerson {
           width: 420px;
           height: 252px;
-          padding: 16px 0px 0px;
-          margin-top: 8px;
+          padding: 8px 0px 0px;
+          margin-top: 4px;
           display: flex;
           gap: 4px;
           .permissionChoice {
@@ -288,6 +304,7 @@
               display: flex;
               align-items: center;
               gap: 8px;
+              font-weight: bolder;
               > div {
                 height: 16px;
                 line-height: 16px;
@@ -382,6 +399,16 @@
         }
       }
     }
+    .el-collapse-item {
+      &:first-child {
+        .el-collapse-item__header {
+          display: none;
+        }
+      }
+    }
+    .chatsCollapse.el-collapse-item {
+      margin-top: 0px;
+    }
   }
 
   .createAppContainerMainBox {
@@ -407,6 +434,7 @@
     background-color: var(--o-bg-color-base);
     .el-button {
       border-radius: 4px;
+      margin-left: 0px;
     }
   }
 
@@ -443,15 +471,3 @@
     height: 56px;
   }
 }
-
-// .json-container {
-//   :deep(.el-collapse-item){
-//     background-color: pink !important;
-//   }
-//   :deep(.el-collapse-item__header){
-//     background-color: pink !important;
-//   }
-//   :deep(.el-collapse-item__content){
-//     background-color: pink !important;
-//   }
-// }
diff --git a/src/views/styles/workFlowArrange.scss b/src/views/styles/workFlowArrange.scss
index cca7b30a..4f3a5da1 100644
--- a/src/views/styles/workFlowArrange.scss
+++ b/src/views/styles/workFlowArrange.scss
@@ -347,6 +347,8 @@
         }
         .label {
           flex: 1;
+          height: 24px;
+          line-height: 24px;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -354,6 +356,22 @@
         .moreTip {
           margin-left: auto;
           width: 24px;
+          height: 24px;
+          display: flex;
+          align-items: center;
+          .moreDots {
+            width: 16px;
+            height: 16px;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            .nodeDot {
+              width: 2px;
+              height: 2px;
+              border-radius: 50%;
+              background-color: #8d98aa;
+            }
+          }
           &:hover {
             color: #6395fd;
           }
@@ -394,7 +412,7 @@
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: rgb(141, 152, 170);
+        background: #c3cedf;
       }
     }
     .vue-flow__handle-left {
@@ -415,7 +433,7 @@
         width: 6px;
         height: 6px;
         border-radius: 50%;
-        background: rgb(141, 152, 170);
+        background: #c3cedf;
       }
     }
     // 选中样式
@@ -469,6 +487,21 @@
       }
     }
   }
+  .vue-flow__handle.isConnecting {
+    width: 12px;
+        height: 12px;
+        &::after {
+          width: 10px;
+          height: 10px;
+          background: #6395fd;
+        }
+  }
+  .vue-flow__handle-left.isConnecting {
+    left: -1px;
+  }
+  .vue-flow__handle-right.isConnecting {
+    right: -1px;
+  }
 }
 .nodeDealPopper {
   width: 64px !important;
-- 
Gitee