@yiyi_zhang/reactflow-ui 1.0.0 → 1.1.0

package/README.md

@@ -1,14 +1,39 @@
-# Conductor Workflow IDE (`@yiyi_zhang/reactflow-ui` v1.0.0)
+# Conductor Workflow IDE (`@yiyi_zhang/reactflow-ui` v1.1.0)
 
 基于 **React 19、ReactFlow 与 Zustand** 构建的下一代企业级 [Netflix Conductor](https://conductor-oss.org/) 工作流可视化设计器与 AI 原生编排 IDE。
 
 提供两个可独立按需集成的核心组件入口：
-- **`WorkflowIDE`**（主入口 `@yiyi_zhang/reactflow-ui`）— 面向专业编排与研发人员的完整可视化 IDE
+- **`WorkflowIDE`**（主入口 `@yiyi_zhang/reactflow-ui`）— 双模全融合，支持面向业务与运维的**业务卡片流 (StepFlow)**，以及面向架构研发的**专业开发者 DAG 拓扑**同屏热切换
 - **`AiWorkflowIDE`**（子路径 `@yiyi_zhang/reactflow-ui/ai`）— 对话优先、AI 驱动，支持多轮 Agentic 编排、子工作流库复用与混合交互
 
 ---
 
-## 🌟 v1.0.0 四大核心支柱架构 (Next-Gen Architecture)
+## ⚡ v1.1.0 业务与技术全融合核心新特性 (New in v1.1.0)
+
+### 👔 支柱一：业务卡片流设计器 (Business StepFlow) 与双模同屏无损热切换
+- **双模毫秒级热切换**：工具栏一键切换 `👔 业务模式` ⇄ `💻 开发者模式`。业务模式下将复杂的微服务连线拓扑解构为清晰直观的业务卡片流，支持任意位置插入步骤、上下重排与内联表单配置。
+- **StepModel 双向无损编译引擎**：提供递归编译器与反编译器，保证卡片流与原生 Conductor DAG 之间 100% 状态保真转换，非标任务通过 `isProFallback` 严格兜底。
+
+### ☁️ 支柱二：内置云平台动作库与动态参数胶囊
+- **首发生态对接类阿里云云主机 (ECS) 全生命周期动作**：创建云主机、启停机、磁盘快照备份、平滑升降规格、释放实例等。
+- **动态参数胶囊与智能上游引用**：表单输入项胶囊化呈现，一键联想并安全绑定上游步骤产出的参数引用。
+
+### 🔀 支柱三：业务容器化高级控制流卡片
+- **分支路由卡片 (`DecisionBranchCard`)**：分支 Tabs 导航、条件参数配置、分支内多步骤嵌套编排。
+- **并行任务泳道卡片 (`ForkJoinCard`)**：多泳道并发设计器，动态增删泳道。
+- **循环迭代容器卡片 (`LoopDoWhileCard`)**：循环体内嵌任务序列、继续条件表达式与防死循环熔断保护。
+
+### 🪄 支柱四：生产实例一键脱敏提炼为模板工具链 (Template Extractor)
+- **生产资产一键沉淀**：将生产环境或演练场调试好的工作流一键提炼为公共模板，智能隐私脱敏引擎自动擦除内网 IP、密钥、密码与机密 ID。
+- **8 大开箱即用场景模板中心**：覆盖云主机自动化、扩容容灾、定时省电关机等高频场景，支持全流程浏览器沙箱试跑验证。
+
+### 📖 支柱五：运行故事线时间轴与生活化诊断自愈建议
+- **流水账故事线展开 (`RunStoryTimeline`)**：运行态以自然语言叙述工作流执行过程，直观呈现每一步耗时与数据快照。
+- **生活化故障诊断自愈**：告别晦涩堆栈报错，提供通俗易懂的根因诊断与可直接操作的自愈行动建议。
+
+---
+
+## 🌟 v1.0.0 四大确定性工程底座 (Foundation)
 
 ### 🧬 支柱一：确定性工作流语言服务 (W-LSP) 与数据血缘图谱
 - **0ms 确定性 JSONPath 补全**：在节点配置面板输入 `${` 时，W-LSP 引擎实时遍历当前节点的所有**合法上游祖先节点**，融合五类数据源（运行态真实 Output、人工 Mock Output、`TaskSchema` 注册表、节点配置自省、类型默认字段）弹出零延迟自动补全，并附带 `⚡ 实时值预览`。

package/dist/WorkflowIDE.d.ts

@@ -1,6 +1,7 @@
 import { ThemeMode, ThemeColor, LayoutDirection, ValidationResults, ExecutionActions, ViewMode, WorkflowExecutionInput } from './types/workflow';
 import { WorkflowDef, WorkflowInstance } from './types/conductor';
 import { AIServiceConfig } from './services/aiService';
+import { ActionDefinition } from './actions/types';
 import './styles/tokens.css';
 import './styles/executionStyles.css';
 /**
@@ -92,6 +93,18 @@ export interface WorkflowIDEProps {
      * AI 配置。通过 Props 注入优先于 localStorage 配置。
      */
     aiConfig?: Partial<AIServiceConfig>;
+    /**
+     * UI 体验模式：
+     * - `pro` (默认): 专业开发者模式，展示完整 DAG 画布、底层参数、Monaco JSON
+     * - `business`: 面向普通使用者的业务模式，提供卡片步骤流、业务动作与数据胶囊
+     * @default 'pro'
+     */
+    uiMode?: 'pro' | 'business';
+    /**
+     * 自定义扩展的业务动作定义列表。
+     * 宿主可传入自定义业务动作（如私有云/特定系统连接器）。
+     */
+    actions?: ActionDefinition[];
     /**
      * 组件容器高度。
      * @default '100%'

package/dist/actions/builtin/common.d.ts

@@ -0,0 +1,8 @@
+import type { ActionDefinition } from '../types';
+export declare const notifySendMessageAction: ActionDefinition;
+export declare const humanApprovalAction: ActionDefinition;
+export declare const controlWaitAction: ActionDefinition;
+export declare const controlDecisionAction: ActionDefinition;
+export declare const controlForkAction: ActionDefinition;
+export declare const controlLoopAction: ActionDefinition;
+export declare const BUILTIN_COMMON_ACTIONS: ActionDefinition[];

package/dist/actions/builtin/ecs.d.ts

@@ -0,0 +1,12 @@
+import type { ActionDefinition } from '../types';
+export declare const ecsCreateInstanceAction: ActionDefinition;
+export declare const ecsQueryInstanceAction: ActionDefinition;
+export declare const ecsStartInstanceAction: ActionDefinition;
+export declare const ecsStopInstanceAction: ActionDefinition;
+export declare const ecsRestartInstanceAction: ActionDefinition;
+export declare const ecsModifySpecAction: ActionDefinition;
+export declare const ecsCreateSnapshotAction: ActionDefinition;
+export declare const ecsRunCommandAction: ActionDefinition;
+export declare const ecsGetMonitorMetricsAction: ActionDefinition;
+export declare const ecsReleaseInstanceAction: ActionDefinition;
+export declare const BUILTIN_ECS_ACTIONS: ActionDefinition[];

package/dist/actions/registry.d.ts

@@ -0,0 +1,23 @@
+import type { ActionDefinition, ActionCategory } from './types';
+import type { TaskDef } from '../types/conductor';
+export declare class ActionRegistry {
+    private actions;
+    constructor(initialActions?: ActionDefinition[]);
+    register(action: ActionDefinition): void;
+    registerAll(actions: ActionDefinition[]): void;
+    getAction(id: string): ActionDefinition | undefined;
+    getAllActions(): ActionDefinition[];
+    getActionsByCategory(category?: ActionCategory): ActionDefinition[];
+    /**
+     * Given a Conductor TaskDef, attempt to find a matching ActionDefinition
+     * and decompile it into friendly form values.
+     */
+    findActionForTask(task: TaskDef): {
+        action: ActionDefinition;
+        values: Record<string, any>;
+    } | null;
+}
+/**
+ * Global default ActionRegistry pre-populated with Cloud Host (ECS) and Common actions
+ */
+export declare const defaultActionRegistry: ActionRegistry;

package/dist/actions/types.d.ts

@@ -0,0 +1,45 @@
+import type { TaskDef } from '../types/conductor';
+export type ActionCategory = 'compute' | 'storage' | 'network' | 'monitor' | 'notify' | 'logic' | 'human' | 'custom';
+export type ActionFieldType = 'text' | 'textarea' | 'number' | 'select' | 'boolean' | 'account' | 'cron-friendly';
+export interface ActionFieldOption {
+    label: string;
+    value: any;
+    description?: string;
+}
+export interface ActionField {
+    key: string;
+    label: string;
+    type: ActionFieldType;
+    help?: string;
+    placeholder?: string;
+    required?: boolean;
+    defaultValue?: any;
+    options?: ActionFieldOption[];
+    acceptsPills?: boolean;
+}
+export interface ActionOutputField {
+    key: string;
+    label: string;
+    type: 'string' | 'number' | 'boolean' | 'object' | 'array';
+    example?: any;
+    description?: string;
+}
+export interface CompileCtx {
+    taskReferenceName: string;
+    stepIndex: number;
+    workflowName?: string;
+}
+export interface ActionDefinition {
+    id: string;
+    name: string;
+    category: ActionCategory;
+    icon: string;
+    description: string;
+    connector?: string;
+    riskLevel: 'safe' | 'sensitive';
+    fields: ActionField[];
+    outputs: ActionOutputField[];
+    compile: (values: Record<string, any>, ctx: CompileCtx) => TaskDef;
+    decompile?: (task: TaskDef) => Record<string, any> | null;
+    mockOutput?: (values: Record<string, any>) => Record<string, any>;
+}

package/dist/components/business/ActionForm.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import type { BusinessStep } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+export interface ActionFormProps {
+    step: BusinessStep;
+    upstreamSteps: BusinessStep[];
+    workflowInputParams?: any[];
+    registry?: ActionRegistry;
+    onChange: (updatedStep: BusinessStep) => void;
+    disabled?: boolean;
+}
+export declare const ActionForm: React.FC<ActionFormProps>;

package/dist/components/business/DataPillInput.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { BusinessStep } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+export interface DataPillInputProps {
+    value: any;
+    onChange: (val: any) => void;
+    placeholder?: string;
+    multiline?: boolean;
+    upstreamSteps: BusinessStep[];
+    registry?: ActionRegistry;
+    workflowInputParams?: any[];
+    disabled?: boolean;
+}
+export declare const DataPillInput: React.FC<DataPillInputProps>;

package/dist/components/business/DecisionBranchCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BusinessStep } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+import type { ActionDefinition } from '../../actions/types';
+export interface DecisionBranchCardProps {
+    step: BusinessStep;
+    upstreamSteps: BusinessStep[];
+    registry?: ActionRegistry;
+    disabled?: boolean;
+    onChange: (updated: BusinessStep) => void;
+    onOpenInsertModal: (callback: (action: ActionDefinition) => void) => void;
+}
+export declare const DecisionBranchCard: React.FC<DecisionBranchCardProps>;

package/dist/components/business/ForkJoinCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BusinessStep } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+import type { ActionDefinition } from '../../actions/types';
+export interface ForkJoinCardProps {
+    step: BusinessStep;
+    upstreamSteps: BusinessStep[];
+    registry?: ActionRegistry;
+    disabled?: boolean;
+    onChange: (updated: BusinessStep) => void;
+    onOpenInsertModal: (callback: (action: ActionDefinition) => void) => void;
+}
+export declare const ForkJoinCard: React.FC<ForkJoinCardProps>;

package/dist/components/business/FriendlyErrorCard.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export interface FriendlyErrorCardProps {
+    rawError?: string;
+    statusCode?: number;
+    taskName?: string;
+    onActionClick?: (actionKey?: string) => void;
+}
+export declare const FriendlyErrorCard: React.FC<FriendlyErrorCardProps>;

package/dist/components/business/LoopDoWhileCard.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import type { BusinessStep } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+import type { ActionDefinition } from '../../actions/types';
+export interface LoopDoWhileCardProps {
+    step: BusinessStep;
+    upstreamSteps: BusinessStep[];
+    registry?: ActionRegistry;
+    disabled?: boolean;
+    onChange: (updated: BusinessStep) => void;
+    onOpenInsertModal: (callback: (action: ActionDefinition) => void) => void;
+}
+export declare const LoopDoWhileCard: React.FC<LoopDoWhileCardProps>;

package/dist/components/business/PillPicker.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { BusinessStep, PillToken } from '../../stepmodel/types';
+import { ActionRegistry } from '../../actions/registry';
+export interface PillPickerProps {
+    upstreamSteps: BusinessStep[];
+    onSelect: (pill: PillToken) => void;
+    onClose: () => void;
+    registry?: ActionRegistry;
+    workflowInputParams?: any[];
+}
+export declare const PillPicker: React.FC<PillPickerProps>;

package/dist/components/business/RunStoryTimeline.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WorkflowInstance } from '../../types/conductor';
+import { ActionRegistry } from '../../actions/registry';
+export interface RunStoryTimelineProps {
+    instance: WorkflowInstance;
+    registry?: ActionRegistry;
+    onInspectStep?: (taskRef: string) => void;
+}
+export declare const RunStoryTimeline: React.FC<RunStoryTimelineProps>;

package/dist/components/business/StepFlowEditor.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import type { WorkflowDef, WorkflowInstance } from '../../types/conductor';
+import { ActionRegistry } from '../../actions/registry';
+export interface StepFlowEditorProps {
+    workflowDef: WorkflowDef | null;
+    onChange: (def: WorkflowDef) => void;
+    registry?: ActionRegistry;
+    readOnly?: boolean;
+    workflowExecution?: WorkflowInstance;
+}
+export declare const StepFlowEditor: React.FC<StepFlowEditorProps>;

package/dist/components/template/TemplateExtractor.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WorkflowInstance } from '../../types/conductor';
+import type { WorkflowTemplate } from '../../template/types';
+export interface TemplateExtractorProps {
+    isOpen: boolean;
+    instance: WorkflowInstance;
+    onClose: () => void;
+    onPublished?: (template: WorkflowTemplate) => void;
+}
+export declare const TemplateExtractor: React.FC<TemplateExtractorProps>;

package/dist/components/template/TemplateGallery.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+import type { WorkflowDef } from '../../types/conductor';
+import { TemplateStore } from '../../template/templateStore';
+export interface TemplateGalleryProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onSelectTemplate: (configuredDef: WorkflowDef) => void;
+    templateStore?: TemplateStore;
+}
+export declare const TemplateGallery: React.FC<TemplateGalleryProps>;

package/dist/components/template/TemplateSetupWizard.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { WorkflowDef } from '../../types/conductor';
+import type { WorkflowTemplate } from '../../template/types';
+export interface TemplateSetupWizardProps {
+    template: WorkflowTemplate;
+    onApply: (configuredDef: WorkflowDef) => void;
+    onClose: () => void;
+}
+export declare const TemplateSetupWizard: React.FC<TemplateSetupWizardProps>;

package/dist/index.d.ts

@@ -8,3 +8,32 @@ export { getCompletionItems, buildDataFlowGraph, refactorTaskReferenceName, getU
 export type { WlspCompletionItem, DataFlowGraph, DataFlowEdge, InferredField, UpstreamTaskInfo, } from './services/wlsp/workflowLsp';
 export { executeLocalSandboxDryRun, buildDefaultWorkflowMockInput, generateDefaultTaskOutputPreview, } from './utils/localSandboxEngine';
 export type { SandboxDryRunOptions, TaskMockOverride, } from './utils/localSandboxEngine';
+export * from './actions/types';
+export { ActionRegistry, defaultActionRegistry } from './actions/registry';
+export { BUILTIN_ECS_ACTIONS } from './actions/builtin/ecs';
+export { BUILTIN_COMMON_ACTIONS } from './actions/builtin/common';
+export * from './stepmodel/types';
+export { compileStepToTaskDef, compileStepModelToWorkflowDef, } from './stepmodel/compile';
+export { decompileTaskDefToStep, decompileWorkflowDefToStepModel, } from './stepmodel/decompile';
+export { StepFlowEditor } from './components/business/StepFlowEditor';
+export { DecisionBranchCard } from './components/business/DecisionBranchCard';
+export { ForkJoinCard } from './components/business/ForkJoinCard';
+export { LoopDoWhileCard } from './components/business/LoopDoWhileCard';
+export { DataPillInput } from './components/business/DataPillInput';
+export { ActionForm } from './components/business/ActionForm';
+export * from './template/types';
+export { TemplateStore, defaultTemplateStore } from './template/templateStore';
+export { applyTemplateVariables } from './template/applyTemplate';
+export { BUILTIN_WORKFLOW_TEMPLATES } from './template/builtin/templates';
+export { TemplateGallery } from './components/template/TemplateGallery';
+export { TemplateSetupWizard } from './components/template/TemplateSetupWizard';
+export * from './template/sanitizer/types';
+export { scanWorkflowDef, scanObjectForSensitiveFindings } from './template/sanitizer/rules';
+export { analyzeTasksForPruning, applyTaskPruning } from './template/sanitizer/prune';
+export { extractTemplateFromInstance } from './template/sanitizer/anonymize';
+export { TemplateExtractor } from './components/template/TemplateExtractor';
+export * from './utils/friendlyErrorTranslator';
+export { FriendlyErrorCard } from './components/business/FriendlyErrorCard';
+export type { FriendlyErrorCardProps } from './components/business/FriendlyErrorCard';
+export { RunStoryTimeline } from './components/business/RunStoryTimeline';
+export type { RunStoryTimelineProps } from './components/business/RunStoryTimeline';