yyd-flow-designer 0.1.0 → 0.1.2

package/package.json

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

package/src/adapters/designerConfig.tsx

@@ -0,0 +1,43 @@
+import { createContext, useContext } from 'react';
+
+/** 画布图内容，与草稿 content / 实例 FlowDefineJson 同形 */
+export type FlowGraphContent = {
+  nodes?: any[];
+  edges?: any[];
+  timestamp?: string;
+  [key: string]: any;
+};
+
+export type FlowDesignerFeatures = {
+  /** 发布版本，默认：定义模式 true，受控模式 false */
+  publish?: boolean;
+  /** 版本管理，默认：定义模式 true，受控模式 false */
+  versionManager?: boolean;
+  /** 调用测试，默认 true */
+  executeTest?: boolean;
+  /** 导入/导出，默认 true */
+  importExport?: boolean;
+};
+
+export type DesignerConfig = {
+  /** 受控：传入则不再拉草稿；用于编辑实例 FlowDefineJson */
+  value?: FlowGraphContent | null;
+  /** 受控保存：传入则保存时调此回调，不写 FlowDraft */
+  onSave?: (content: FlowGraphContent) => void | Promise<void>;
+  title?: string;
+  features?: FlowDesignerFeatures;
+};
+
+const DesignerConfigCtx = createContext<DesignerConfig>({});
+
+export const DesignerConfigProvider = DesignerConfigCtx.Provider;
+
+export function useDesignerConfig(): DesignerConfig {
+  return useContext(DesignerConfigCtx);
+}
+
+/** 是否受控模式（编辑实例图 / 宿主自管存取） */
+export function useIsControlledDesigner(): boolean {
+  const { value, onSave } = useDesignerConfig();
+  return value !== undefined || typeof onSave === 'function';
+}

package/src/adapters/http.ts

@@ -1,9 +1,25 @@
-/** HTTP — 替代 @/share_lib/utils/HttpRequest；由宿主注入 baseURL / token */
+/** HTTP — 由宿主注入 baseURL / 管理入口 / headers；鉴权头与宿主一致用 token */
+
 let baseURL = '';
+/** 设计器管理单一入口，默认联调路径；宿主可改成自己的 Controller */
+let adminPath = '/yydflowweb';
 let getHeaders: () => Record<string, string> = () => ({});
 
-export function configureHttp(options: { baseURL?: string; getHeaders?: () => Record<string, string> }) {
+export function configureHttp(options: {
+  baseURL?: string;
+  /** 管理 action 入口，默认 /yydflowweb */
+  adminPath?: string;
+  /**
+   * 请求头。宿主应对齐登录体系：
+   * `() => ({ token: getUserToken() })`
+   */
+  getHeaders?: () => Record<string, string>;
+}) {
   if (options.baseURL != null) baseURL = options.baseURL.replace(/\/$/, '');
+  if (options.adminPath != null) {
+    const p = options.adminPath.trim() || '/yydflowweb';
+    adminPath = p.startsWith('/') || p.startsWith('http') ? p.replace(/\/$/, '') : `/${p.replace(/\/$/, '')}`;
+  }
   if (options.getHeaders) getHeaders = options.getHeaders;
 }
 
@@ -47,3 +63,8 @@ export const httpGet = <T = any>(url: string, params?: Record<string, any>) => {
 };
 
 export const httpPost = <T = any>(url: string, data?: any) => request<T>('POST', url, data);
+
+/** POST { action, ...data } 到管理入口 */
+export function flowAction<T = any>(action: string, data?: Record<string, any>) {
+  return httpPost<T>(adminPath, { action, ...(data || {}) });
+}

package/src/adapters/router.tsx

@@ -2,10 +2,9 @@
 import { createContext, useContext } from 'react';
 
 export type RouteParams = {
+  /** 定义模式必填；受控编辑实例图时可空 */
   processId?: string;
   designMode?: string;
-  appId?: string;
-  projectId?: string;
 };
 
 const RouteCtx = createContext<RouteParams>({});

package/src/api/flowAction.ts

@@ -0,0 +1,36 @@
+import { flowAction } from '../adapters/http';
+
+/** 设计器管理 action（与后端 FlowAdminActions 对齐） */
+export const Actions = {
+  projectAdd: 'project.add',
+  projectUpdate: 'project.update',
+  projectDelete: 'project.delete',
+  projectGet: 'project.get',
+  projectList: 'project.list',
+
+  tagAdd: 'tag.add',
+  tagUpdate: 'tag.update',
+  tagDelete: 'tag.delete',
+  tagGet: 'tag.get',
+  tagList: 'tag.list',
+  defineSetTags: 'define.setTags',
+
+  defineAdd: 'define.add',
+  defineUpdate: 'define.update',
+  defineDelete: 'define.delete',
+  defineGet: 'define.get',
+  defineList: 'define.list',
+  defineCheckCode: 'define.checkCode',
+
+  draftSave: 'draft.save',
+  draftGet: 'draft.get',
+  draftGetByProcessId: 'draft.getByProcessId',
+  draftList: 'draft.list',
+
+  versionAdd: 'version.add',
+  versionRestore: 'version.restore',
+  versionGet: 'version.get',
+  versionList: 'version.list',
+} as const;
+
+export { flowAction };

package/src/api/flowDefine.ts

@@ -1,30 +1,27 @@
-import { httpGet, httpPost } from '../adapters/http';
-
-/** 与 lowcode 前端一致的路径前缀；boot 可配 context 或反代 */
-const P = '/web';
+import { Actions, flowAction } from './flowAction';
 
 async function getEntity(params: any) {
-  return httpGet(`${P}/flowDefine/get/` + params.processId);
+  return flowAction(Actions.defineGet, { processId: params.processId });
 }
 
 async function getList(params: any) {
-  return httpPost(`${P}/flowDefine/getList`, params);
+  return flowAction(Actions.defineList, params);
 }
 
 async function add(params: any) {
-  return httpPost(`${P}/flowDefine/add`, params);
+  return flowAction(Actions.defineAdd, params);
 }
 
 async function update(params: any) {
-  return httpPost(`${P}/flowDefine/update`, params);
+  return flowAction(Actions.defineUpdate, params);
 }
 
 async function del(params: any) {
-  return httpPost(`${P}/flowDefine/deleteByIds`, params);
+  return flowAction(Actions.defineDelete, params);
 }
 
 async function checkProcessCodeExists(params: any) {
-  return httpGet(`${P}/flowDefine/checkProcessCodeExists`, params);
+  return flowAction(Actions.defineCheckCode, params);
 }
 
 export default { getEntity, getList, add, update, del, checkProcessCodeExists };

package/src/api/flowDraft.ts

@@ -1,13 +1,8 @@
-import { httpGet, httpPost } from '../adapters/http';
+import { Actions, flowAction } from './flowAction';
 
-const P = '/web';
-
-export const FlowDraftSaveReq = (params: any) => httpPost(`${P}/flowDraft/save`, params);
+export const FlowDraftSaveReq = (params: any) => flowAction(Actions.draftSave, params);
 export const FlowDraftGetReq = (params: any) =>
-  httpGet(`${P}/flowDraft/getByProcessId/` + params?.processId);
-export const FlowVersionHistoryAddReq = (params: any) =>
-  httpPost(`${P}/flowVersionHistory/add`, params);
-export const FlowVersionHistoryGetListReq = (params: any) =>
-  httpPost(`${P}/flowVersionHistory/getList`, params);
-export const FlowVersionHistoryRestoreReq = (params: any) =>
-  httpPost(`${P}/flowVersionHistory/restore`, params);
+  flowAction(Actions.draftGetByProcessId, { processId: params?.processId });
+export const FlowVersionHistoryAddReq = (params: any) => flowAction(Actions.versionAdd, params);
+export const FlowVersionHistoryGetListReq = (params: any) => flowAction(Actions.versionList, params);
+export const FlowVersionHistoryRestoreReq = (params: any) => flowAction(Actions.versionRestore, params);

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

@@ -26,6 +26,10 @@ ServiceTask.nodeSchema = {
                 code: '',
                 name: '服务任务',
                 description: '',
+                handler: '',
+                assignee: {
+                    rules: [{ type: 'initiator' }],
+                },
                 inputs: [],
                 outputs: [],
                 outputNotifyWebhook: { enabled: false, url: '', body: [] },

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

@@ -4,8 +4,8 @@ import AssigneeRulesEditor from './components/AssigneeRulesEditor';
 import TimeoutSettingEditor from './components/TimeoutSettingEditor';
 import GatewayBranchesEditor from './components/GatewayBranchesEditor';
 import {
-    InputParamsEditor,
-    OutputParamsEditor,
+    InputsEditor,
+    OutputsEditor,
     ProcessParamsEditor,
 } from './components/ParamIOEditors';
 
@@ -81,8 +81,8 @@ const TaskIoProperty = memo(({ nodeInfo, updateNodes }: PropertyProps) => {
     const content = nodeInfo?.data?.nodeConfig?.content ?? {};
     return (
         <Form layout="vertical">
-            <InputParamsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
-            <OutputParamsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <InputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <OutputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
             <DescriptionField content={content} nodeInfo={nodeInfo} updateNodes={updateNodes} />
         </Form>
     );
@@ -92,22 +92,47 @@ export const UserTaskProperty = memo(({ nodeInfo, updateNodes }: PropertyProps)
     const content = nodeInfo?.data?.nodeConfig?.content ?? {};
     return (
         <Form layout="vertical">
-            <InputParamsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <InputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
             <AssigneeRulesEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
             <TimeoutSettingEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
-            <OutputParamsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <OutputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
             <DescriptionField content={content} nodeInfo={nodeInfo} updateNodes={updateNodes} />
         </Form>
     );
 });
 
-export const ServiceTaskProperty = TaskIoProperty;
+export const ServiceTaskProperty = memo(({ nodeInfo, updateNodes }: PropertyProps) => {
+    const content = nodeInfo?.data?.nodeConfig?.content ?? {};
+    return (
+        <Form layout="vertical">
+            <InputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <Form.Item
+                label="Handler"
+                extra="对应宿主 @Component(&quot;名称&quot;) 的 Bean 名；留空则不调 Java SPI"
+            >
+                <Input
+                    placeholder="如 notifySms"
+                    value={content.handler ?? ''}
+                    onChange={(e) => updateNodeContent(nodeInfo, updateNodes, { handler: e.target.value })}
+                />
+            </Form.Item>
+            <AssigneeRulesEditor
+                nodeInfo={nodeInfo}
+                updateNodes={updateNodes}
+                label="接收人"
+                extra="给 handler 用（通知/抄送等），不产生待办。规则与用户任务相同：按 scope 对宿主用户体系。"
+            />
+            <OutputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} />
+            <DescriptionField content={content} nodeInfo={nodeInfo} updateNodes={updateNodes} />
+        </Form>
+    );
+});
 
 export const ExclusiveGatewayProperty = memo(({ nodeInfo, updateNodes }: PropertyProps) => {
     const content = nodeInfo?.data?.nodeConfig?.content ?? {};
     return (
         <Form layout="vertical">
-            <InputParamsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} title="判断参数" />
+            <InputsEditor nodeInfo={nodeInfo} updateNodes={updateNodes} title="判断参数" />
             <GatewayBranchesEditor
                 nodeInfo={nodeInfo}
                 updateNodes={updateNodes}

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

@@ -454,7 +454,7 @@ export const ProcessParamsEditor = memo(({ nodeInfo, updateNodes }: {
     );
 });
 
-export const InputParamsEditor = memo(({ nodeInfo, updateNodes, title = '输入参数' }: {
+export const InputsEditor = memo(({ nodeInfo, updateNodes, title = '输入参数' }: {
     nodeInfo: any;
     updateNodes: (nodes: any[]) => void;
     title?: string;
@@ -472,7 +472,7 @@ export const InputParamsEditor = memo(({ nodeInfo, updateNodes, title = '输入
     );
 });
 
-export const OutputParamsEditor = memo(({ nodeInfo, updateNodes, showNotifyWebhook = true }: {
+export const OutputsEditor = memo(({ nodeInfo, updateNodes, showNotifyWebhook = true }: {
     nodeInfo: any;
     updateNodes: (nodes: any[]) => void;
     showNotifyWebhook?: boolean;

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

@@ -1,115 +1,3 @@
-import {
-    Background,
-    Controls,
-    ReactFlow,
-    ReactFlowProvider,
-} from '@xyflow/react';
-import { memo, useMemo } from 'react';
-import { PopoverProvider } from '../../../shared/flow/PopoverContext';
-import edgeTypes from '../Edges';
-import defaultEdgeOptions from '../Edges/defaultEdgeOptions';
-import nodeTypes from '../Nodes';
-import { normalizeFlowNodes } from '../utils/nodeIdentity';
-import {
-    applyTrailToEdges,
-    applyTrailToNodes,
-    collectCodes,
-    type TrailOverlay,
-} from '../utils/trailOverlay';
-
-export interface ExecuteTestFlowPreviewProps {
-    nodes: any[];
-    edges: any[];
-    passedNodes?: any[];
-    parallelTokens?: any[];
-    currentNodeCode?: string;
-}
-
-/**
- * 测试面板内的流程图：原样抄设计器节点/连线/布局，只叠加轨迹高亮。
- */
-const ExecuteTestFlowInner = ({
-    nodes,
-    edges,
-    passedNodes = [],
-    parallelTokens = [],
-    currentNodeCode = '',
-}: ExecuteTestFlowPreviewProps) => {
-    const trailOverlay: TrailOverlay = useMemo(() => {
-        const passedCodes = collectCodes(passedNodes, ['nodeCode', 'NodeCode']);
-        const waitingCodes = collectCodes(parallelTokens, ['nodeCode', 'NodeCode']);
-        const currentCode = currentNodeCode?.trim() || '';
-        if (!passedCodes.length && !waitingCodes.length && !currentCode) {
-            return null;
-        }
-        return { passedCodes, waitingCodes, currentCode };
-    }, [passedNodes, parallelTokens, currentNodeCode]);
-
-    const { previewNodes, previewEdges } = useMemo(() => {
-        const baseNodes = normalizeFlowNodes(nodes as any[]);
-        const baseEdges = edges ?? [];
-        return {
-            previewNodes: applyTrailToNodes(baseNodes, trailOverlay).map((n) => ({
-                ...n,
-                selected: false,
-                draggable: false,
-                selectable: false,
-                connectable: false,
-            })),
-            previewEdges: applyTrailToEdges(baseEdges as any[], baseNodes, trailOverlay).map((e) => ({
-                ...e,
-                selected: false,
-            })),
-        };
-    }, [nodes, edges, trailOverlay]);
-
-    if (!previewNodes.length) {
-        return <div className="execute-test-flow-preview__empty">画布暂无节点</div>;
-    }
-
-    return (
-        <ReactFlow
-            nodes={previewNodes}
-            edges={previewEdges}
-            nodeTypes={nodeTypes}
-            edgeTypes={edgeTypes}
-            defaultEdgeOptions={defaultEdgeOptions}
-            fitView
-            fitViewOptions={{ padding: 0.2, maxZoom: 1 }}
-            nodesDraggable={false}
-            nodesConnectable={false}
-            elementsSelectable={false}
-            panOnDrag
-            zoomOnScroll
-            preventScrolling={false}
-            proOptions={{ hideAttribution: true }}
-            minZoom={0.15}
-            maxZoom={1.5}
-            className="bpmn-design-flow"
-        >
-            <Background gap={14} size={1.2} color="rgba(0,0,0,0.05)" />
-            <Controls showInteractive={false} position="bottom-right" />
-        </ReactFlow>
-    );
-};
-
-const ExecuteTestFlowPreview = (props: ExecuteTestFlowPreviewProps) => (
-    <div className="execute-test-flow-preview">
-        <div className="execute-test-flow-preview__legend">
-            <span><i className="dot passed" />已走过</span>
-            <span><i className="dot waiting" />挂起待办</span>
-            <span><i className="dot current" />当前续跑</span>
-            <span><i className="dot idle" />未到达</span>
-        </div>
-        {/* bpmn-design-page：复用设计器节点皮肤（Modal 挂到 body 时否则丢样式） */}
-        <div className="execute-test-flow-preview__canvas bpmn-design-page">
-            <ReactFlowProvider>
-                <PopoverProvider>
-                    <ExecuteTestFlowInner {...props} />
-                </PopoverProvider>
-            </ReactFlowProvider>
-        </div>
-    </div>
-);
-
-export default memo(ExecuteTestFlowPreview);
+/** @deprecated 请用包导出的 FlowViewer；测试弹窗内部仍走此别名 */
+export { default } from '../../../viewer/FlowViewer';
+export type { FlowViewerProps as ExecuteTestFlowPreviewProps } from '../../../viewer/FlowViewer';

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

@@ -2,7 +2,7 @@ import { PlayCircleOutlined } from '@ant-design/icons';
 import { Button, Collapse, Form, Input, Modal, Space, Typography, message } from 'antd';
 import { memo, useCallback, useEffect, useMemo, useState } from 'react';
 import { httpPost } from '../../../adapters/http';
-import ExecuteTestFlowPreview from './ExecuteTestFlowPreview';
+import FlowViewer from '../../../viewer/FlowViewer';
 import { showFlowIssues, validateFlowGraph } from '../utils/validateFlowGraph';
 
 export interface ExecuteTestModalProps {
@@ -41,9 +41,9 @@ const safeParseArray = (text: string | undefined): any[] => {
     }
 };
 
-/** 从 execute 结果回填表单（整包 state；续跑目标优先用本步 nextNodes，否则用仍挂起的 parallelTokens） */
+/** 从 execute 结果回填表单（整包 instanceState；续跑目标优先用本步 nextNodes，否则用仍挂起的 parallelTokens） */
 const applyResultToForm = (form: ReturnType<typeof Form.useForm>[0], r: any) => {
-    const st = r?.state ?? r?.State ?? {};
+    const st = r?.instanceState ?? r?.InstanceState ?? {};
     const nextNodes = r?.nextNodes ?? r?.NextNodes ?? [];
     const tokens = st.parallelTokens ?? st.ParallelTokens ?? [];
     const stillWaiting = (Array.isArray(tokens) ? tokens : []).filter(
@@ -111,7 +111,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             currentNodeCode: '',
             resumeTokenId: '',
             operatorId: 'u1001',
-            inputParams: '{\n  "orderId": "A001"\n}',
+            inputs: '{\n  "orderId": "A001"\n}',
             instanceId: '',
             startUserId: 'u1001',
             startOrgId: '',
@@ -147,18 +147,18 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
 
             if (instanceId && (!Array.isArray(passedNodes) || passedNodes.length === 0)) {
                 setAdvancedKeys(['advanced']);
-                message.error('续跑时 passedNodes 不能为空：请先执行一次后点「用 state 回填」，或清空 instanceId 作为新实例');
+                message.error('续跑时 passedNodes 不能为空：请先执行一次后点「用 instanceState 回填」，或清空 instanceId 作为新实例');
                 return;
             }
             if (instanceId && values.resumeTokenId?.trim()
                 && (!Array.isArray(parallelTokens) || parallelTokens.length === 0)) {
                 setAdvancedKeys(['advanced']);
-                message.error('续跑时 parallelTokens 不能为空：请点「用 state 回填」整包带回');
+                message.error('续跑时 parallelTokens 不能为空：请点「用 instanceState 回填」整包带回');
                 return;
             }
 
             const payload = {
-                flowData: {
+                flowDefineJson: {
                     nodes: flowData.nodes,
                     edges: flowData.edges ?? [],
                 },
@@ -166,9 +166,9 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                     currentNodeCode: values.currentNodeCode?.trim() || '',
                     resumeTokenId: values.resumeTokenId?.trim() || undefined,
                     operatorId: values.operatorId?.trim() || undefined,
-                    inputParams: tryParseJson(values.inputParams, 'inputParams') ?? {},
+                    inputs: tryParseJson(values.inputs, 'inputs') ?? {},
                 },
-                state: {
+                instanceState: {
                     instanceId: instanceId || null,
                     startUserId: values.startUserId?.trim() || undefined,
                     startOrgId: values.startOrgId?.trim() || undefined,
@@ -179,7 +179,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             };
 
             setLoading(true);
-            const res = await httpPost<any>('/lcflow/engine/execute', payload);
+            const res = await httpPost<any>('/yydflow/execute', payload);
             setLastResult(res);
             setResultText(pretty(res));
 
@@ -188,11 +188,11 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             } else {
                 const info = applyResultToForm(form, res);
                 if (info.newTodos > 0) {
-                    message.success(`执行完成；本步新待办 ${info.newTodos} 条，已回填 state`);
+                    message.success(`执行完成；本步新待办 ${info.newTodos} 条，已回填 instanceState`);
                 } else if (info.stillWaiting > 0) {
                     message.success(`执行完成；仍有 ${info.stillWaiting} 条挂起，已回填`);
                 } else {
-                    message.success('执行完成；已自动回填 state');
+                    message.success('执行完成；已自动回填 instanceState');
                 }
             }
         } catch (e: any) {
@@ -210,7 +210,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
             return;
         }
         if (lastResult.status === 'error' || lastResult.Status === 'error') {
-            message.warning('错误结果没有可续跑的 state');
+            message.warning('错误结果没有可续跑的 instanceState');
             return;
         }
         const info = applyResultToForm(form, lastResult);
@@ -219,7 +219,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                 ? `已回填；本步新待办 ${info.newTodos} 条`
                 : info.stillWaiting > 0
                     ? `已回填；无新待办，仍有 ${info.stillWaiting} 条挂起可续跑`
-                    : '已回填完整 state'
+                    : '已回填完整 instanceState'
         );
     }, [form, lastResult]);
 
@@ -242,7 +242,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                     关闭
                 </Button>,
                 <Button key="fill" disabled={!lastResult} onClick={fillBackFromResult}>
-                    用 state 回填
+                    用 instanceState 回填
                 </Button>,
                 <Button key="run" type="primary" loading={loading} icon={<PlayCircleOutlined />} onClick={handleExecute}>
                     执行
@@ -257,7 +257,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                             请求参数
                         </Typography.Text>
                         <Typography.Paragraph type="secondary" className="!mb-3 !mt-1 text-xs">
-                            首次执行请清空 instanceId；成功后自动回填 state。
+                            首次执行请清空 instanceId；成功后自动回填 instanceState。
                         </Typography.Paragraph>
 
                         <Typography.Text type="secondary">command</Typography.Text>
@@ -274,9 +274,9 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                             <Input placeholder="留空则引擎生成" allowClear />
                         </Form.Item>
                         <Form.Item
-                            label="inputParams（仅业务 JSON）"
-                            name="inputParams"
-                            rules={[{ required: true, message: '请填写 inputParams JSON' }]}
+                            label="inputs（仅业务 JSON）"
+                            name="inputs"
+                            rules={[{ required: true, message: '请填写 inputs JSON' }]}
                         >
                             <Input.TextArea rows={5} className="font-mono text-xs" />
                         </Form.Item>
@@ -297,7 +297,7 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                             items={[
                                 {
                                     key: 'advanced',
-                                    label: '高级 · state 原始 JSON',
+                                    label: '高级 · instanceState 原始 JSON',
                                     forceRender: true,
                                     children: (
                                         <>
@@ -326,11 +326,12 @@ const ExecuteTestModal = ({ open, onClose, getFlowData }: ExecuteTestModalProps)
                             流程图与设计器一致；执行后按轨迹高亮已过 / 挂起 / 当前节点。
                         </Typography.Paragraph>
 
-                        <ExecuteTestFlowPreview
-                            nodes={flowSnapshot.nodes}
-                            edges={flowSnapshot.edges}
-                            passedNodes={trailPassed}
-                            parallelTokens={trailTokens}
+                        <FlowViewer
+                            flowDefineJson={flowSnapshot}
+                            instanceState={{
+                                passedNodes: trailPassed,
+                                parallelTokens: trailTokens,
+                            }}
                             currentNodeCode={watchedCurrent}
                         />
 

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

@@ -136,6 +136,16 @@ export const validateFlowGraph = (nodes: Node[] = [], edges: Edge[] = []): FlowI
                 issues.push({ level: 'warning', message: `${label}：未配置审批人` });
             }
         }
+
+        if (type === 'ServiceTask') {
+            const handler = String(contentOf(node).handler ?? '').trim();
+            const rules = contentOf(node).assignee?.rules;
+            if (!handler) {
+                issues.push({ level: 'warning', message: `${label}：未指定 handler，不会调用 Java SPI` });
+            } else if (!Array.isArray(rules) || rules.length === 0) {
+                issues.push({ level: 'warning', message: `${label}：已指定 handler 但未配置接收人` });
+            }
+        }
     });
 
     if (starts.length === 1) {