feat(flow): 优化条件编辑界面和节点样式，增强用户体验

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="请选择比较变量">
+              <div v-else class="reference-field">
-                <template #prepend>
+                <el-select
-                  <el-select v-model="item.type" class="value-type" @change="resetCompareValue(item)">
+                  v-model="item.type"
-                    <el-option label="输入" value="input" />
+                  class="value-type"
-                    <el-option label="引用" value="quote" />
+                  :disabled="!requiresComparison(item.condition)"
-                  </el-select>
+                  @change="resetCompareValue(item)"
-                </template>
+                >
-                <template #append>
+                  <el-option label="输入" value="input" />
-                  <el-cascader
+                  <el-option label="引用" value="quote" />
-                    v-model="item.quote"
+                </el-select>
-                    :disabled="!requiresComparison(item.condition)"
+                <el-cascader
-                    :options="quoteOptions"
+                  v-model="item.quote"
-                    :show-all-levels="false"
+                  :disabled="!requiresComparison(item.condition)"
-                    @visible-change="(visible) => refreshQuoteOptions(visible, item, 'quote')"
+                  :options="quoteOptions"
-                  />
+                  :show-all-levels="false"
-                </template>
+                  placeholder="请选择"
-              </el-input>
+                  @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));
+    persistConditions();
-    const activeIds = new Set(conditions.map((condition) => condition.id));
+    emit(valid ? "save-success" : "save-error");
-    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");
   } 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>

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;
 }

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;