yyd-flow-designer 0.1.7 → 0.1.8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yyd-flow-designer",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "private": false,
   "description": "YYD Flow designer (process orchestration UI)",
   "keywords": [

package/src/designer/flow/Nodes/ExclusiveGateway.tsx

@@ -59,7 +59,7 @@ ExclusiveGateway.nodeSchema = {
                 code: '',
                 name: '判断',
                 description: '',
-                // 约定：续跑 UserTask 时 command.inputs.action = approve | reject
+                // 约定：续跑 UserTask 时 command.inputs.__action = approve | reject
                 inputs: [{ key: FLOW_ACTION_KEY, mode: 'value', value: '' }],
                 branches: DEFAULT_BRANCHES,
             },

package/src/designer/flow/Nodes/UserTask.tsx

@@ -32,7 +32,7 @@ UserTask.nodeSchema = {
                 },
                 timeoutSetting: [],
                 inputs: [],
-                // 提交时写入 command.inputs.action（approve | reject），供后续判断节点使用
+                // 提交时写入 command.inputs.__action（approve | reject），供后续判断节点使用
                 outputs: [{ key: FLOW_ACTION_KEY, mode: 'value', value: '' }],
                 outputNotifyWebhook: { enabled: false, url: '', body: [] },
             },

package/src/designer/flow/actions/properties/BpmnProperties.tsx

@@ -1,4 +1,5 @@
-import { Form, Input, Select } from 'antd';
+import { Form, Input } from 'antd';
+import { Select } from '../../../../ui/antd';
 import { memo } from 'react';
 import AssigneeRulesEditor from './components/AssigneeRulesEditor';
 import TimeoutSettingEditor from './components/TimeoutSettingEditor';

package/src/designer/flow/actions/properties/components/AssigneeRulesEditor.tsx

@@ -1,5 +1,6 @@
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, Select, Space } from 'antd';
+import { Button, Form, Input, Space } from 'antd';
+import { Select } from '../../../../../ui/antd';
 import { memo, useCallback, useMemo } from 'react';
 import { useReactFlow } from '@xyflow/react';
 import {

package/src/designer/flow/actions/properties/components/GatewayBranchesEditor.tsx

@@ -1,7 +1,8 @@
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Input, Segmented, Select } from 'antd';
+import { Button, Input, Segmented } from 'antd';
 import { useReactFlow } from '@xyflow/react';
 import { memo, useCallback } from 'react';
+import { Select } from '../../../../../ui/antd';
 import { BPMN_CONDITION_MODE_OPTIONS, isEmptyConditionMode } from '../../../config';
 
 export interface BranchConditionItem {
@@ -283,11 +284,20 @@ const GatewayBranchesEditor = ({
                                                 </div>
                                                 <div className="bpmn-gateway-branches__field">
                                                     <div className="bpmn-gateway-branches__label">运算符</div>
-                                                    <Select
+                                                    {/* 固定短列表用原生 select，避开 antd 虚拟列表被宿主样式撑乱 */}
+                                                    <select
+                                                        className="bpmn-gateway-branches__native-select"
                                                         value={cond.mode}
-                                                        options={BPMN_CONDITION_MODE_OPTIONS}
-                                                        onChange={(mode) => handleUpdateCondition(index, cIndex, { mode })}
-                                                    />
+                                                        onChange={(e) => handleUpdateCondition(index, cIndex, {
+                                                            mode: e.target.value,
+                                                        })}
+                                                    >
+                                                        {BPMN_CONDITION_MODE_OPTIONS.map((opt) => (
+                                                            <option key={opt.value} value={opt.value}>
+                                                                {opt.label}
+                                                            </option>
+                                                        ))}
+                                                    </select>
                                                 </div>
                                                 {!isEmptyConditionMode(cond.mode) && (
                                                     <div className="bpmn-gateway-branches__field">

package/src/designer/flow/actions/properties/components/ParamIOEditors.tsx

@@ -1,7 +1,8 @@
 import { ApiOutlined, DeleteOutlined, EditOutlined, PlusOutlined } from '@ant-design/icons';
 import { useGlobalPopover } from '../../../../../shared/flow/PopoverContext';
 import { useReactFlow } from '@xyflow/react';
-import { Button, Form, Input, Select, Space, Switch, Tag, Tooltip, message } from 'antd';
+import { Button, Form, Input, Space, Switch, Tag, Tooltip, message } from 'antd';
+import { Select } from '../../../../../ui/antd';
 import { memo } from 'react';
 
 /** 统一 KV 参数：值可直接填，也可 Webhook POST 读取 */

package/src/designer/flow/actions/properties/components/TimeoutSettingEditor.tsx

@@ -1,5 +1,6 @@
 import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
-import { Button, Form, Input, InputNumber, Select, Space } from 'antd';
+import { Button, Form, Input, InputNumber, Space } from 'antd';
+import { Select } from '../../../../../ui/antd';
 import { memo, useCallback } from 'react';
 import { useReactFlow } from '@xyflow/react';
 

package/src/designer/flow/config.tsx

@@ -57,8 +57,8 @@ export const SERVICE_TYPE_OPTIONS = [
     { label: 'HTTP 调用', value: 'http' },
 ];
 
-/** 审批结果约定：UserTask 提交 / ExclusiveGateway 默认分支共用 */
-export const FLOW_ACTION_KEY = 'action';
+/** 审批结果系统保留键（双下划线前缀，避免与业务字段冲突） */
+export const FLOW_ACTION_KEY = '__action';
 export const FLOW_ACTION_APPROVE = 'approve';
 export const FLOW_ACTION_REJECT = 'reject';
 

package/src/designer/flow/utils/validateFlowGraph.ts

@@ -103,17 +103,15 @@ export const validateFlowGraph = (nodes: Node[] = [], edges: Edge[] = []): FlowI
                     if (!(outgoingByHandle.get(`${node.id}::${handle}`) ?? 0)) {
                         issues.push({ level: 'error', message: `${label}：分支「${branchLabel}」未连出` });
                     }
-                    // 非末条分支若条件 key 全空，引擎会跳过；末条作兜底。空 equal 曾会恒真导致回环死循环。
-                    const isLast = idx === branches.length - 1;
-                    if (!isLast) {
-                        const conditions = Array.isArray(branch?.conditions) ? branch.conditions : [];
-                        const hasKeyed = conditions.some((c: any) => String(c?.key ?? '').trim());
-                        if (!hasKeyed) {
-                            issues.push({
-                                level: 'warning',
-                                message: `${label}：分支「${branchLabel}」未配置条件字段，执行时不会命中（仅末条可作兜底）`,
-                            });
-                        }
+                    // 条件 key 全空时不会命中；全部未命中引擎会报错（不再静默走末条）
+                    const conditions = Array.isArray(branch?.conditions) ? branch.conditions : [];
+                    const hasKeyed = conditions.length === 0
+                        || conditions.some((c: any) => String(c?.key ?? '').trim());
+                    if (!hasKeyed) {
+                        issues.push({
+                            level: 'warning',
+                            message: `${label}：分支「${branchLabel}」未配置条件字段，执行时无法命中`,
+                        });
                     }
                 });
             }

package/src/designer/style.less

@@ -599,9 +599,71 @@
     }
 
     .ant-select,
-    .ant-input {
+    .ant-input,
+    &__native-select {
         width: 100%;
     }
+
+    &__native-select {
+        box-sizing: border-box;
+        height: 32px;
+        padding: 4px 11px;
+        font-size: 14px;
+        line-height: 1.5714285714285714;
+        color: rgba(0, 0, 0, 0.88);
+        background: #fff;
+        border: 1px solid #d9d9d9;
+        border-radius: 6px;
+        outline: none;
+        transition: border-color 0.2s, box-shadow 0.2s;
+        appearance: auto;
+
+        &:hover {
+            border-color: #4096ff;
+        }
+
+        &:focus {
+            border-color: #1677ff;
+            box-shadow: 0 0 0 2px rgba(5, 145, 255, 0.1);
+        }
+    }
+
+    /* 宿主全局样式常把 Select 选中态字色洗成浅灰；强制可读 */
+    .ant-select-selector {
+        color: rgba(0, 0, 0, 0.88) !important;
+    }
+
+    .ant-select-selection-item {
+        color: rgba(0, 0, 0, 0.88) !important;
+        opacity: 1 !important;
+    }
+}
+
+/* Select 下拉（挂 body）：压住宿主/Tailwind 对虚拟列表行高的干扰 */
+.yyd-flow-select-dropdown {
+    z-index: 1100;
+
+    .rc-virtual-list-holder-inner {
+        transform: none !important;
+    }
+
+    .ant-select-item {
+        min-height: 32px !important;
+        height: 32px !important;
+        padding: 5px 12px !important;
+        line-height: 22px !important;
+        color: rgba(0, 0, 0, 0.88) !important;
+        margin: 0 !important;
+    }
+
+    .ant-select-item-option-content {
+        line-height: 22px !important;
+        color: rgba(0, 0, 0, 0.88) !important;
+    }
+
+    .ant-select-item-option-selected {
+        font-weight: 600;
+    }
 }
 
 /* ---- 来自 lowcode db/flow：工具栏 / handle 悬停（旧 global.less 会注入） ---- */

package/src/ui/antd.tsx

@@ -1,2 +1,32 @@
+import { Select as AntSelect } from 'antd';
+import type { SelectProps } from 'antd';
+
 export { Card, Collapse, Dropdown, Modal, Popover, Tooltip } from 'antd';
 export type { MenuProps, TooltipProps } from 'antd';
+
+/**
+ * 统一 Select：避免宿主全局行高把虚拟列表行距撑乱；
+ * antd5 用 popupClassName，antd4 overlay 会映射为 dropdownClassName。
+ */
+export function Select(props: SelectProps) {
+    const {
+        listItemHeight = 32,
+        // 选项不多时关掉虚拟列表，避免宿主/Tailwind 行高把选项间距撑乱
+        virtual = false,
+        popupClassName,
+        // 挂到 body，避免属性面板 overflow / transform 裁切、错位
+        getPopupContainer = () => document.body,
+        ...rest
+    } = props;
+    return (
+        <AntSelect
+            {...rest}
+            virtual={virtual}
+            listItemHeight={listItemHeight}
+            popupClassName={['yyd-flow-select-dropdown', popupClassName].filter(Boolean).join(' ')}
+            getPopupContainer={getPopupContainer}
+        />
+    );
+}
+
+Object.assign(Select, AntSelect);