yyd-flow-designer 0.1.2 → 0.1.4

package/src/designer/flow/Edges/edgeRoute.ts

@@ -0,0 +1,186 @@
+import type { Edge, Node } from '@xyflow/react';
+
+export type Waypoint = { x: number; y: number };
+
+export type EdgeRouteData = {
+    /** 中间折点（不含起终点）；有值且 manual 时用户可拖 */
+    waypoints?: Waypoint[];
+    /** true = 用户改过，整理节点前会重算并清掉 */
+    manual?: boolean;
+};
+
+const BACK_RAIL_GAP = 64;
+const BACK_RAIL_STEP = 32;
+const STUB = 28;
+const CORNER = 10;
+const LAYOUT_DEFAULT_W = 180;
+const LAYOUT_DEFAULT_H = 72;
+
+const round = (n: number) => Math.round(n * 10) / 10;
+
+export const isBackEdgeXY = (sourceX: number, targetX: number) => sourceX > targetX + 20;
+
+/** 圆角正交路径：points 含起点与终点 */
+export const waypointsToPath = (points: Waypoint[], radius = CORNER): string => {
+    if (points.length < 2) return '';
+    const pts = points.map((p) => ({ x: round(p.x), y: round(p.y) }));
+    let d = `M ${pts[0].x} ${pts[0].y}`;
+    for (let i = 1; i < pts.length - 1; i += 1) {
+        const p0 = pts[i - 1];
+        const p1 = pts[i];
+        const p2 = pts[i + 1];
+        const dx1 = p1.x - p0.x;
+        const dy1 = p1.y - p0.y;
+        const dx2 = p2.x - p1.x;
+        const dy2 = p2.y - p1.y;
+        const len1 = Math.hypot(dx1, dy1) || 1;
+        const len2 = Math.hypot(dx2, dy2) || 1;
+        const r = Math.min(radius, len1 / 2, len2 / 2);
+        const sx = p1.x - (dx1 / len1) * r;
+        const sy = p1.y - (dy1 / len1) * r;
+        const ex = p1.x + (dx2 / len2) * r;
+        const ey = p1.y + (dy2 / len2) * r;
+        d += ` L ${round(sx)} ${round(sy)} Q ${p1.x} ${p1.y} ${round(ex)} ${round(ey)}`;
+    }
+    const last = pts[pts.length - 1];
+    d += ` L ${last.x} ${last.y}`;
+    return d;
+};
+
+/** 自动折点（不含起终点） */
+export const computeAutoWaypoints = (
+    sourceX: number,
+    sourceY: number,
+    targetX: number,
+    targetY: number,
+    lane = 0,
+): Waypoint[] => {
+    if (isBackEdgeXY(sourceX, targetX)) {
+        const railY = Math.max(sourceY, targetY) + BACK_RAIL_GAP + lane * BACK_RAIL_STEP;
+        const outX = sourceX + STUB + lane * 10;
+        const inX = targetX - STUB - lane * 10;
+        const midX = (outX + inX) / 2;
+        // 中间多一个「深度点」，选中后可上下拉整段回连轨道高度
+        return [
+            { x: outX, y: sourceY },
+            { x: outX, y: railY },
+            { x: midX, y: railY },
+            { x: inX, y: railY },
+            { x: inX, y: targetY },
+        ];
+    }
+    const span = targetX - sourceX;
+    if (span < 40) {
+        const midY = (sourceY + targetY) / 2 + lane * 12;
+        const midX = sourceX + Math.max(24, span / 2);
+        return [
+            { x: midX, y: sourceY },
+            { x: midX, y: midY },
+            { x: targetX - 20, y: midY },
+            { x: targetX - 20, y: targetY },
+        ];
+    }
+    // 正向：水平错开折列，多路汇入不叠在一起
+    const bendX = sourceX + span * (0.4 + Math.min(lane, 5) * 0.08);
+    if (Math.abs(sourceY - targetY) < 8) {
+        return []; // 直线，无需折点
+    }
+    return [
+        { x: bendX, y: sourceY },
+        { x: bendX, y: targetY },
+    ];
+};
+
+const nodeSize = (node?: Node) => ({
+    w: (node as any)?.measured?.width ?? (node as any)?.width ?? LAYOUT_DEFAULT_W,
+    h: (node as any)?.measured?.height ?? (node as any)?.height ?? LAYOUT_DEFAULT_H,
+});
+
+const contentOf = (node?: Node) =>
+    (node?.data as any)?.nodeConfig?.content ?? {};
+
+/** 估算 sourceHandle / targetHandle 的画布坐标 */
+export const estimateHandlePoint = (
+    node: Node | undefined,
+    handleId: string | null | undefined,
+    side: 'source' | 'target',
+): Waypoint => {
+    if (!node) return { x: 0, y: 0 };
+    const { w, h } = nodeSize(node);
+    const x0 = node.position.x;
+    const y0 = node.position.y;
+    const branches = contentOf(node).branches;
+    let yRatio = 0.5;
+    if (Array.isArray(branches) && handleId && side === 'source') {
+        const idx = branches.findIndex((b: any) => {
+            const id = b?.id;
+            if (!id) return false;
+            return handleId === `${node.id}_gateway_${id}`
+                || handleId === `${node.id}_parallel_${id}`
+                || handleId.endsWith(`_${id}`);
+        });
+        if (idx >= 0) {
+            yRatio = (idx + 1) / (branches.length + 1);
+        }
+    }
+    return {
+        x: side === 'source' ? x0 + w : x0,
+        y: y0 + h * yRatio,
+    };
+};
+
+/**
+ * 按当前节点位置为所有边分配车道并写入自动 waypoints（清掉 manual）。
+ * 整理节点后调用。
+ */
+export const assignAutoEdgeRoutes = (nodes: Node[], edges: Edge[]): Edge[] => {
+    const nodeMap = new Map(nodes.map((n) => [n.id, n]));
+
+    // 先算每条边的起终点，区分回连
+    type Meta = {
+        edge: Edge;
+        sx: number;
+        sy: number;
+        tx: number;
+        ty: number;
+        back: boolean;
+    };
+    const metas: Meta[] = edges.map((edge) => {
+        const s = estimateHandlePoint(nodeMap.get(edge.source), edge.sourceHandle, 'source');
+        const t = estimateHandlePoint(nodeMap.get(edge.target), edge.targetHandle, 'target');
+        return {
+            edge,
+            sx: s.x,
+            sy: s.y,
+            tx: t.x,
+            ty: t.y,
+            back: isBackEdgeXY(s.x, t.x),
+        };
+    });
+
+    // 同目标 / 回连目标 分组分配 lane
+    const laneOf = new Map<string, number>();
+    const groups = new Map<string, Meta[]>();
+    metas.forEach((m) => {
+        const key = m.back ? `back:${m.edge.target}` : `fwd:${m.edge.target}`;
+        (groups.get(key) ?? (groups.set(key, []), groups.get(key)!)).push(m);
+    });
+    groups.forEach((list) => {
+        list.sort((a, b) => a.sy - b.sy || a.edge.id.localeCompare(b.edge.id));
+        list.forEach((m, idx) => laneOf.set(m.edge.id, idx));
+    });
+
+    return metas.map((m) => {
+        const lane = laneOf.get(m.edge.id) ?? 0;
+        const waypoints = computeAutoWaypoints(m.sx, m.sy, m.tx, m.ty, lane);
+        const prev = (m.edge.data ?? {}) as EdgeRouteData;
+        return {
+            ...m.edge,
+            data: {
+                ...prev,
+                waypoints,
+                manual: false,
+            },
+        };
+    });
+};

package/src/designer/flow/FlowStage.tsx

@@ -5,6 +5,7 @@ import { useUpdateEffect } from 'ahooks';
 import React, { useCallback, useEffect, useState } from 'react';
 import { AddNode } from './actions/AddNode';
 import Property from './actions/Property'; 
+import ConnectionLine from './Edges/ConnectionLine';
 import defaultEdgeOptions from './Edges/defaultEdgeOptions';
 import FlowToolbar from './FlowToolbar';
 import { useGlobalPopover } from '../../shared/flow/PopoverContext';
@@ -269,7 +270,7 @@ const FlowStage = (props: FlowStageProps) => {
             nodesConnectable={!lock}
             elementsSelectable={!lock}
             defaultEdgeOptions={defaultEdgeOptions}
-            // connectionLineComponent={edgeTypes.connectionLine}
+            connectionLineComponent={ConnectionLine}
             onConnect={onConnect}
             // onNodeClick={onNodeClick}
             onSelectionChange={onSelectionChange}

package/src/designer/flow/FlowToolbar.tsx

@@ -20,6 +20,7 @@ import { useGlobalPopover } from '../../shared/flow/PopoverContext';
 import { useFlowHistoryStore } from '../../shared/flow/stores/useFlowHistoryStore';
 import { useFlowStore } from '../../shared/flow/stores/useFlowStore';
 import { getLayoutedElements } from '../../shared/flow/utils';
+import { assignAutoEdgeRoutes } from './Edges/edgeRoute';
 import { AddNode } from './actions/AddNode';
 import FlowHotKeys from './components/FlowHotKeys';
 import ShortcutsModal from './components/ShortcutsModal';
@@ -194,26 +195,25 @@ const FlowToolbar = ({ copyAble, handleSave, isPreview = false, option, selected
         );
 
         // 4. 只对可见元素进行布局计算
-        // 注意：这里返回的 layoutedNodes 只包含可见节点
         const layoutedNodes = getLayoutedElements(visibleNodes, visibleEdges);
 
-        // 5. 合并回所有节点并更新
-        // 隐藏节点保持原样（或者你可以根据需求处理它们），可见节点应用新位置
-        setNodes([...layoutedNodes, ...hiddenNodes]);
+        // 5. 按新坐标重算所有边的折点（清掉手工折点），多路汇入按深度错开
+        const hiddenEdges = allEdges.filter(
+            (e) => !visibleNodeIds.has(e.source) || !visibleNodeIds.has(e.target),
+        );
+        const routedEdges = assignAutoEdgeRoutes(layoutedNodes, visibleEdges);
 
-        // 如果布局改变了边的路径（比如使用了 elkjs 或 dagre 有些配置会改边），也要更新边
-        // setEdges([...layoutedEdges, ...hiddenEdges]); // 根据你的 getLayoutedElements 返回值决定
+        setNodes([...layoutedNodes, ...hiddenNodes]);
+        setEdges([...routedEdges, ...hiddenEdges]);
 
-        // 6. 视图适应
-        // 推荐使用 requestAnimationFrame 确保 React 渲染完成
         window.requestAnimationFrame(() => {
             fitView({
-                nodes: layoutedNodes, // 明确告诉 fitView 只关注刚才排版过的可见节点
+                nodes: layoutedNodes,
                 duration: 300,
                 padding: 0.2
             });
         });
-    }, [getNodes, getEdges, setNodes, fitView]);
+    }, [getNodes, getEdges, setNodes, setEdges, fitView]);
 
     // // 保存处理函数（仅触发，不做业务逻辑）
     // const handleSave = useCallback(() => {

package/src/designer/flow/components/ExecuteTestModal.tsx

@@ -1,5 +1,6 @@
 import { PlayCircleOutlined } from '@ant-design/icons';
-import { Button, Collapse, Form, Input, Modal, Space, Typography, message } from 'antd';
+import { Button, Form, Input, Space, Typography, message } from 'antd';
+import { Collapse, Modal } from '../../../ui/antd';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { httpPost } from '../../../adapters/http';
 import FlowViewer from '../../../viewer/FlowViewer';
@@ -66,6 +67,7 @@ const applyResultToForm = (form: ReturnType<typeof Form.useForm>[0], r: any) =>
         passedNodes: pretty(st.passedNodes ?? st.PassedNodes ?? []),
         parallelTokens: pretty(st.parallelTokens ?? st.ParallelTokens ?? []),
         joinBarriers: pretty(st.joinBarriers ?? st.JoinBarriers ?? {}),
+        cancelledHistory: pretty(st.cancelledHistory ?? st.CancelledHistory ?? []),
     });
     return {
         newTodos: Array.isArray(nextNodes) ? nextNodes.length : 0,
@@ -118,6 +120,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             passedNodes: '[]',
             parallelTokens: '[]',
             joinBarriers: '{}',
+            cancelledHistory: '[]',
         });
         setResultText('');
         setLastResult(null);
@@ -144,6 +147,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             const passedNodes = tryParseJson(values.passedNodes, 'passedNodes') ?? [];
             const parallelTokens = tryParseJson(values.parallelTokens, 'parallelTokens') ?? [];
             const joinBarriers = tryParseJson(values.joinBarriers, 'joinBarriers') ?? {};
+            const cancelledHistory = tryParseJson(values.cancelledHistory, 'cancelledHistory') ?? [];
 
             if (instanceId && (!Array.isArray(passedNodes) || passedNodes.length === 0)) {
                 setAdvancedKeys(['advanced']);
@@ -175,6 +179,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                     passedNodes,
                     parallelTokens,
                     joinBarriers,
+                    cancelledHistory,
                 },
             };
 
@@ -310,6 +315,9 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                                             <Form.Item label="joinBarriers" name="joinBarriers">
                                                 <Input.TextArea rows={3} className="font-mono text-xs" />
                                             </Form.Item>
+                                            <Form.Item label="cancelledHistory（累计作废）" name="cancelledHistory">
+                                                <Input.TextArea rows={3} className="font-mono text-xs" />
+                                            </Form.Item>
                                         </>
                                     ),
                                 },

package/src/designer/flow/components/ShortcutsModal.tsx

@@ -1,4 +1,5 @@
-import { Modal, Table, Tag, Typography } from 'antd';
+import { Table, Tag, Typography } from 'antd';
+import { Modal } from '../../../ui/antd';
 import { KeyOutlined } from '@ant-design/icons';
 import { useMemo } from 'react';
 
@@ -78,10 +79,16 @@ const shortcuts: ShortcutItem[] = [
     },
     {
         key: 'tidy-up',
-        label: '整理布局',
+        label: '整理布局（并重算连线折点）',
         shortcut: `${MOD_KEY} + Alt + A`,
         category: '视图控制'
     },
+    {
+        key: 'edge-bend',
+        label: '选中连线：工具栏改颜色/label；拖折点（Shift 正交）；双击加折点；右键删',
+        shortcut: '鼠标',
+        category: '编辑操作'
+    },
     {
         key: 'lock',
         label: '锁定/解锁',

package/src/designer/flow/components/VersionManager.tsx

@@ -2,7 +2,8 @@ import { getAllQueryString, successMessage } from '../../../adapters/utils';
 import { useService, useServiceContent } from '../../../adapters/hooks';
 import { ClockCircleOutlined, HistoryOutlined } from '@ant-design/icons';
 import { useUpdateEffect } from 'ahooks';
-import { Button, Card, Modal, Typography, message } from 'antd';
+import { Button, Typography, message } from 'antd';
+import { Card, Modal } from '../../../ui/antd';
 import { useEffect, useMemo } from 'react';
 import {
     FlowVersionHistoryAddReq,

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

@@ -1,15 +1,27 @@
 import type { Edge, Node } from '@xyflow/react';
 
+export type WaitingToken = {
+    nodeCode: string;
+    forkNodeCode?: string;
+    branchId?: string;
+};
+
 export type TrailOverlay = {
     passedCodes: string[];
     waitingCodes: string[];
     currentCode?: string;
+    /** 有序轨迹编码（相邻对 = 已走过的边）；有驳回回路时比 passedCodes 集合更准 */
+    passedSequence?: string[];
+    /** 挂起令牌（含 fork），用于只高亮「真正进入挂起」的那条入边 */
+    waitingTokens?: WaitingToken[];
 } | null;
 
 export type TrailStatus = 'idle' | 'passed' | 'waiting' | 'current';
 
 const TRAIL_CLASS_RE = /\bexecute-trail--(?:idle|passed|waiting|current)\b/g;
 
+const edgeKey = (source: string, target: string) => `${source}\0${target}`;
+
 export const collectCodes = (items: any[], keyCandidates: string[]): string[] => {
     const set = new Set<string>();
     if (!Array.isArray(items)) return [];
@@ -26,6 +38,41 @@ export const collectCodes = (items: any[], keyCandidates: string[]): string[] =>
     return [...set];
 };
 
+/** 从 passedNodes 抽出有序 nodeCode（保留重复，供相邻对还原真实路径） */
+export const collectSequence = (items: any[], keyCandidates: string[]): string[] => {
+    const seq: string[] = [];
+    if (!Array.isArray(items)) return seq;
+    for (const item of items) {
+        if (!item || typeof item !== 'object') continue;
+        for (const key of keyCandidates) {
+            const v = item[key];
+            if (typeof v === 'string' && v.trim()) {
+                seq.push(v.trim());
+                break;
+            }
+        }
+    }
+    return seq;
+};
+
+export const collectWaitingTokens = (items: any[]): WaitingToken[] => {
+    if (!Array.isArray(items)) return [];
+    const out: WaitingToken[] = [];
+    const seen = new Set<string>();
+    for (const item of items) {
+        if (!item || typeof item !== 'object') continue;
+        const nodeCode = String(item.nodeCode ?? item.NodeCode ?? '').trim();
+        if (!nodeCode) continue;
+        const forkNodeCode = String(item.forkNodeCode ?? item.ForkNodeCode ?? '').trim() || undefined;
+        const branchId = String(item.branchId ?? item.BranchId ?? '').trim() || undefined;
+        const dedupe = `${nodeCode}\0${forkNodeCode || ''}\0${branchId || ''}`;
+        if (seen.has(dedupe)) continue;
+        seen.add(dedupe);
+        out.push({ nodeCode, forkNodeCode, branchId });
+    }
+    return out;
+};
+
 const statusOf = (
     code: string,
     passed: Set<string>,
@@ -43,10 +90,95 @@ const hasActiveTrail = (overlay: TrailOverlay): boolean => {
     return Boolean(
         overlay.passedCodes.length
         || overlay.waitingCodes.length
-        || overlay.currentCode?.trim(),
+        || overlay.currentCode?.trim()
+        || (overlay.passedSequence && overlay.passedSequence.length)
+        || (overlay.waitingTokens && overlay.waitingTokens.length),
     );
 };
 
+/** 相邻 passedNodes → 已走过边 */
+const buildPassedEdgeKeys = (sequence: string[]): Set<string> => {
+    const keys = new Set<string>();
+    for (let i = 0; i < sequence.length - 1; i += 1) {
+        const a = sequence[i];
+        const b = sequence[i + 1];
+        if (a && b && a !== b) {
+            keys.add(edgeKey(a, b));
+        }
+    }
+    return keys;
+};
+
+/**
+ * 挂起/当前节点只高亮「真正到达」的入边：
+ * 1) 轨迹末节点能连到该挂起节点 → 用这条（含驳回回路）
+ * 2) 否则用 token.forkNodeCode → 挂起节点（并行腿仍挂在 fork 出口）
+ * 3) 再否则：图上唯一一条「已走过源 → 挂起」边
+ */
+const buildArrivalEdgeKeys = (
+    edges: Edge[],
+    codeById: Map<string, string>,
+    sequence: string[],
+    waitingTokens: WaitingToken[],
+    waitingCodes: string[],
+    currentCode: string,
+): Set<string> => {
+    const keys = new Set<string>();
+    const lastPassed = sequence.length ? sequence[sequence.length - 1] : '';
+
+    const codePairs = edges.map((e) => ({
+        source: codeById.get(e.source) ?? '',
+        target: codeById.get(e.target) ?? '',
+    })).filter((p) => p.source && p.target);
+
+    const targets = new Set<string>(waitingCodes);
+    if (currentCode) targets.add(currentCode);
+
+    const tokensByCode = new Map<string, WaitingToken[]>();
+    for (const t of waitingTokens) {
+        const list = tokensByCode.get(t.nodeCode) ?? [];
+        list.push(t);
+        tokensByCode.set(t.nodeCode, list);
+    }
+
+    for (const target of targets) {
+        let resolved = false;
+
+        if (lastPassed && lastPassed !== target) {
+            const fromLast = codePairs.some((p) => p.source === lastPassed && p.target === target);
+            if (fromLast) {
+                keys.add(edgeKey(lastPassed, target));
+                resolved = true;
+            }
+        }
+
+        if (!resolved) {
+            const tokens = tokensByCode.get(target) ?? [];
+            for (const t of tokens) {
+                if (t.forkNodeCode && t.forkNodeCode !== target) {
+                    const fromFork = codePairs.some(
+                        (p) => p.source === t.forkNodeCode && p.target === target,
+                    );
+                    if (fromFork) {
+                        keys.add(edgeKey(t.forkNodeCode, target));
+                        resolved = true;
+                    }
+                }
+            }
+        }
+
+        if (!resolved) {
+            const incoming = codePairs.filter((p) => p.target === target);
+            const fromPassed = incoming.filter((p) => sequence.includes(p.source));
+            if (fromPassed.length === 1) {
+                keys.add(edgeKey(fromPassed[0].source, fromPassed[0].target));
+            }
+        }
+    }
+
+    return keys;
+};
+
 /** 派生展示节点：不改写画布 state，只叠加轨迹 class */
 export const applyTrailToNodes = (nodes: Node[], overlay: TrailOverlay): Node[] => {
     if (!hasActiveTrail(overlay)) {
@@ -67,7 +199,7 @@ export const applyTrailToNodes = (nodes: Node[], overlay: TrailOverlay): Node[]
     });
 };
 
-/** 派生展示边：保留原 handle / 曲线，仅标记轨迹 */
+/** 派生展示边：已过 = passedNodes 相邻对；动画 = 进入挂起/当前的真实入边 */
 export const applyTrailToEdges = (
     edges: Edge[],
     nodes: Node[],
@@ -76,9 +208,15 @@ export const applyTrailToEdges = (
     if (!hasActiveTrail(overlay)) {
         return edges;
     }
-    const passed = new Set(overlay!.passedCodes);
-    const waiting = new Set(overlay!.waitingCodes);
+    const sequence = overlay!.passedSequence?.length
+        ? overlay!.passedSequence
+        : overlay!.passedCodes;
+    const waitingCodes = overlay!.waitingCodes;
     const current = overlay!.currentCode?.trim() || '';
+    const waitingTokens = overlay!.waitingTokens?.length
+        ? overlay!.waitingTokens
+        : waitingCodes.map((nodeCode) => ({ nodeCode }));
+
     const codeById = new Map(
         nodes.map((n) => [
             n.id,
@@ -86,22 +224,31 @@ export const applyTrailToEdges = (
         ]),
     );
 
+    const passedEdgeKeys = buildPassedEdgeKeys(sequence);
+    const arrivalEdgeKeys = buildArrivalEdgeKeys(
+        edges,
+        codeById,
+        sequence,
+        waitingTokens,
+        waitingCodes,
+        current,
+    );
+
     return edges.map((edge) => {
         const sourceCode = codeById.get(edge.source) ?? '';
         const targetCode = codeById.get(edge.target) ?? '';
-        const onTrail = Boolean(
-            sourceCode
-            && targetCode
-            && passed.has(sourceCode)
-            && (passed.has(targetCode) || waiting.has(targetCode) || targetCode === current),
-        );
+        const key = edgeKey(sourceCode, targetCode);
+        const onPassedTrail = Boolean(sourceCode && targetCode && passedEdgeKeys.has(key));
+        const isArrival = Boolean(sourceCode && targetCode && arrivalEdgeKeys.has(key));
+        const onTrail = onPassedTrail || isArrival;
         return {
             ...edge,
-            animated: Boolean(onTrail && (waiting.has(targetCode) || targetCode === current)),
+            animated: isArrival,
             className: onTrail ? 'execute-trail-edge--on' : undefined,
             data: {
                 ...(edge.data || {}),
                 trailOn: onTrail,
+                trailArrival: isArrival,
             },
         };
     });

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

@@ -1,6 +1,6 @@
 import { createElement } from 'react';
 import type { Edge, Node } from '@xyflow/react';
-import { Modal } from 'antd';
+import { Modal } from '../../../ui/antd';
 
 export type FlowIssue = {
     level: 'error' | 'warning';

package/src/designer/index.tsx

@@ -2,8 +2,9 @@ import { EllipsisOutlined, ExportOutlined, HistoryOutlined, ImportOutlined, Play
 import { useParams } from '../adapters/router';
 import { useDesignerConfig, useIsControlledDesigner, type FlowGraphContent } from '../adapters/designerConfig';
 import { useMount, useUpdateEffect } from 'ahooks';
-import { Button, Dropdown, Form, Input, Modal, Popover, Tag, message, Typography } from 'antd';
-import type { MenuProps } from 'antd';
+import { Button, Form, Input, Tag, message, Typography } from 'antd';
+import { Dropdown, Modal, Popover } from '../ui/antd';
+import type { MenuProps } from '../ui/antd';
 import { useCallback, useMemo, useRef, useState, type ChangeEvent } from 'react';
 
 import Flow from './flow';

package/src/shared/flow/PopoverContext.tsx

@@ -1,6 +1,6 @@
 // PopoverContext.tsx
 import React, { createContext, useContext, useRef, useState, useEffect } from 'react';
-import { Popover } from 'antd';
+import { Popover } from '../../ui/antd';
 
 interface PopoverInfo {
   content: React.ReactNode;

package/src/shared/flow/components/FlowPopover.tsx

@@ -1,4 +1,4 @@
-import { Popover } from "antd";
+import { Popover } from '../../../ui/antd';
 
 export const FlowPopover = (props: any) => {
   const { children, content, open, onOpenChange } = props;

package/src/shared/flow/components/FlowToolTip.tsx

@@ -1,4 +1,4 @@
-import { Tooltip, TooltipProps } from "antd";
+import { Tooltip, type TooltipProps } from '../../../ui/antd';
 
 export const FlowToolTip = (props: TooltipProps) => {
   const { children, ...restProps } = props;