From d8e1168020d5c6752baaade6e131110ed05f564f Mon Sep 17 00:00:00 2001
From: zhanghao <774378400@qq.com>
Date: Fri, 21 Aug 2026 15:36:01 +0800
Subject: [PATCH] =?UTF-8?q?feat(flow):=20=E4=BC=98=E5=8C=96=E6=9D=A1?=
 =?UTF-8?q?=E4=BB=B6=E7=BC=96=E8=BE=91=E7=95=8C=E9=9D=A2=E5=92=8C=E8=8A=82?=
 =?UTF-8?q?=E7=82=B9=E6=A0=B7=E5=BC=8F=EF=BC=8C=E5=A2=9E=E5=BC=BA=E7=94=A8?=
 =?UTF-8?q?=E6=88=B7=E4=BD=93=E9=AA=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/params/SwitchNodeParams.vue    | 87 ++++++++++---------
 src/views/flow/nodes/function/switch.vue      |  4 +-
 src/views/flow/vue-flow/FlowNode.vue          |  6 +-
 3 files changed, 51 insertions(+), 46 deletions(-)

diff --git a/src/views/flow/components/params/SwitchNodeParams.vue b/src/views/flow/components/params/SwitchNodeParams.vue
index 2073e29..c3c4b63 100644
--- a/src/views/flow/components/params/SwitchNodeParams.vue
+++ b/src/views/flow/components/params/SwitchNodeParams.vue
@@ -100,23 +100,25 @@
                   </el-select>
                 </template>
               </el-input>
-              <el-input v-else model-value="" readonly :disabled="!requiresComparison(item.condition)" placeholder="请选择比较变量">
-                <template #prepend>
-                  <el-select v-model="item.type" class="value-type" @change="resetCompareValue(item)">
-                    <el-option label="输入" value="input" />
-                    <el-option label="引用" value="quote" />
-                  </el-select>
-                </template>
-                <template #append>
-                  <el-cascader
-                    v-model="item.quote"
-                    :disabled="!requiresComparison(item.condition)"
-                    :options="quoteOptions"
-                    :show-all-levels="false"
-                    @visible-change="(visible) => refreshQuoteOptions(visible, item, 'quote')"
-                  />
-                </template>
-              </el-input>
+              <div v-else class="reference-field">
+                <el-select
+                  v-model="item.type"
+                  class="value-type"
+                  :disabled="!requiresComparison(item.condition)"
+                  @change="resetCompareValue(item)"
+                >
+                  <el-option label="输入" value="input" />
+                  <el-option label="引用" value="quote" />
+                </el-select>
+                <el-cascader
+                  v-model="item.quote"
+                  :disabled="!requiresComparison(item.condition)"
+                  :options="quoteOptions"
+                  :show-all-levels="false"
+                  placeholder="请选择"
+                  @visible-change="(visible) => refreshQuoteOptions(visible, item, 'quote')"
+                />
+              </div>
             </el-form-item>
           </div>
 
@@ -262,29 +264,36 @@ const refreshQuoteOptions = (visible, item, field) => {
 };
 
 /**
- * 校验并保存条件。先清理已删除条件的连线，再写入条件和锚点集合。
- * 新条件锚点的位置由 switch.vue 渲染摘要后自动测量并补齐。
+ * 将当前分支配置写回画布节点。
+ * 即使表单校验失败也要写回，这样关闭抽屉后用户刚填的错误配置仍会保留在节点上。
+ */
+const persistConditions = () => {
+  const conditions = JSON.parse(JSON.stringify(formData.nodeParams));
+  const activeIds = new Set(conditions.map((condition) => condition.id));
+  const removedIds = originalConditionIds.value.filter((id) => !activeIds.has(id));
+  removedIds.forEach((id) => removeSwitchEdge(props.data.id, id));
+
+  const properties = window.lf.getProperties(props.data.id);
+  const anchor = (properties.anchor || []).filter((item) => (
+    item.id === `${props.data.id}_else` || activeIds.has(item.id)
+  ));
+  window.lf.setProperties(props.data.id, {
+    ...properties,
+    nodeParams: conditions,
+    anchor,
+  });
+};
+
+/**
+ * 校验并保存条件。校验失败时仍关闭抽屉，但向父组件发 save-error，
+ * 由 ParamsDrawer 标记画布节点为错误状态，并让试运行阶段继续拦截。
  */
 const validateAndSave = async () => {
   const valid = await formRef.value?.validate().then(() => true).catch(() => false);
-  if (!valid) return;
 
   try {
-    const conditions = JSON.parse(JSON.stringify(formData.nodeParams));
-    const activeIds = new Set(conditions.map((condition) => condition.id));
-    const removedIds = originalConditionIds.value.filter((id) => !activeIds.has(id));
-    removedIds.forEach((id) => removeSwitchEdge(props.data.id, id));
-
-    const properties = window.lf.getProperties(props.data.id);
-    const anchor = (properties.anchor || []).filter((item) => (
-      item.id === `${props.data.id}_else` || activeIds.has(item.id)
-    ));
-    window.lf.setProperties(props.data.id, {
-      ...properties,
-      nodeParams: conditions,
-      anchor,
-    });
-    emit("save-success");
+    persistConditions();
+    emit(valid ? "save-success" : "save-error");
   } catch {
     emit("save-error");
   }
@@ -402,12 +411,4 @@ defineExpose({ validateAndSave });
   margin-bottom: 18px;
 }
 
-:deep(.el-input-group__append) {
-  width: 120px;
-  padding: 0;
-}
-
-:deep(.el-input-group__append .el-cascader) {
-  width: 100%;
-}
 </style>
diff --git a/src/views/flow/nodes/function/switch.vue b/src/views/flow/nodes/function/switch.vue
index 8d63bb2..c293922 100644
--- a/src/views/flow/nodes/function/switch.vue
+++ b/src/views/flow/nodes/function/switch.vue
@@ -3,7 +3,7 @@
  * 作用范围：仅服务于流程设计器模块；条件编辑由 SwitchNodeParams 组件独立负责。
  -->
 <template>
-  <div class="node__container" ref="switchRef">
+  <div class="node__container" :class="props.model.id" ref="switchRef">
     <NodeState :state="nodeOperatingStatus" :runtimes="runtimes" ref="nodeStateRef">
       <template #input>
         <JsonViewer :value="inputJsonData" copyable boxed sort theme="light" />
@@ -241,7 +241,7 @@ defineExpose({ closePopover });
   border-left: 4px solid var(--node-accent, #b7791f);
   border-radius: 8px;
   background: #fff;
-  box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09);
+  // box-shadow: 0 8px 24px rgba(31, 41, 55, 0.09);
   box-sizing: border-box;
   cursor: default;
 }
diff --git a/src/views/flow/vue-flow/FlowNode.vue b/src/views/flow/vue-flow/FlowNode.vue
index b08f335..772b803 100644
--- a/src/views/flow/vue-flow/FlowNode.vue
+++ b/src/views/flow/vue-flow/FlowNode.vue
@@ -301,7 +301,11 @@ onMounted(() => bindComponent(componentRef.value));
     box-shadow: 0 0 0 2px rgba(47, 128, 237, 0.2), 0 10px 26px rgba(31, 41, 55, 0.12);
   }
 
-  &--selected.flow-node-shell--branch :deep(.node__container),
+  &--selected.flow-node-shell--branch :deep(.node__container) {
+    border-color: #2f80ed;
+    box-shadow: none;
+  }
+
   &--selected.flow-node-shell--loop :deep(.group__container),
   &--selected.flow-node-shell--selectArea :deep(.group__container) {
     border-color: #2f80ed;