@huanban/rulego-editor-react 1.0.13 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@huanban/rulego-editor-react",
-  "version": "1.0.13",
+  "version": "1.0.15",
   "description": "RuleGo 编辑器 React 适配层 - WorkflowList / WorkflowInfoPanel / RuleGoEditor 独立组件 + Hooks",
   "type": "module",
   "main": "dist/index.cjs.js",

package/dist/components/ComponentSidebar.d.ts

@@ -1,77 +0,0 @@
-/**
- * @file components/ComponentSidebar.tsx
- * @description 组件侧边栏 — React 实现
- *
- * 功能：
- *   - 展示 RuleGo 组件列表，按 category 分组折叠
- *   - 支持关键词搜索过滤组件
- *   - 拖拽组件到画布触发 onDragStart 事件
- *   - 根据组件类型显示不同分类的颜色标签
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * 数据入参：
- *   @param components — 后端返回的原始组件数组
- *   @param onDragStart — 拖拽开始的回调，传递组件数据
- *   @param collapsed — 是否收起侧边栏
- *
- * @see ComponentDefinition — 组件定义类型
- */
-import React from 'react';
-/** 组件字段定义（用于属性编辑面板） */
-export interface ComponentField {
-    /** 字段名 */
-    name: string;
-    /** 字段类型：string | bool | int | float | map | array | code | json | select */
-    type: string;
-    /** 显示标签 */
-    label?: string;
-    /** 字段描述 */
-    desc?: string;
-    /** 默认值 */
-    defaultValue?: unknown;
-    /** 校验规则 */
-    rules?: unknown[];
-}
-/** 单个组件定义 */
-export interface RuleGoComponent {
-    /** 组件类型标识，如 'action/log' */
-    type: string;
-    /** 分类，如 'action' | 'filter' | 'transform' */
-    category: string;
-    /** 显示标签 */
-    label?: string;
-    /** 描述 */
-    desc?: string;
-    /** 字段定义列表 */
-    fields?: ComponentField[];
-    /** 自定义图标 */
-    icon?: string;
-    /** 组件颜色 */
-    background?: string;
-    /** 是否无输入端口 */
-    notInput?: boolean;
-    /** 是否无输出端口 */
-    notOutput?: boolean;
-    /** 额外扩展属性 */
-    [key: string]: unknown;
-}
-/** 组件侧边栏 Props */
-export interface ComponentSidebarProps {
-    /** 后端组件原始列表 */
-    components: RuleGoComponent[];
-    /** 拖拽开始回调 */
-    onDragStart?: (component: RuleGoComponent) => void;
-    /** 是否收起 */
-    collapsed?: boolean;
-    /** 搜索框占位符 */
-    searchPlaceholder?: string;
-}
-/**
- * ComponentSidebar 组件
- *
- * 纯 React + CSS 实现的组件侧边栏，无 antd 依赖。
- * 提供分类分组、搜索过滤、拖拽功能。
- */
-declare const ComponentSidebar: React.FC<ComponentSidebarProps>;
-export default ComponentSidebar;
-//# sourceMappingURL=ComponentSidebar.d.ts.map

package/dist/components/ContextMenu.d.ts

@@ -1,102 +0,0 @@
-/**
- * @file components/ContextMenu.tsx
- * @description 右键上下文菜单 — React 实现
- *
- * 功能：
- *   - 节点右键菜单（复制/粘贴/删除/编辑属性/查看连接）
- *   - 边右键菜单（编辑属性/删除）
- *   - 画布右键菜单（粘贴/适配画布/选中全部）
- *   - 子菜单支持
- *   - 点击外部自动关闭
- *   - 键盘导航支持
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see ContextMenuProps — 菜单参数
- */
-import React from 'react';
-/** 菜单项定义 */
-export interface ContextMenuItem {
-    /** 唯一标识 */
-    key: string;
-    /** 显示标签 */
-    label: string;
-    /** 图标（emoji 或文本） */
-    icon?: string;
-    /** 快捷键提示文本 */
-    shortcut?: string;
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 是否隐藏 */
-    hidden?: boolean;
-    /** 是否为危险操作（红色样式） */
-    danger?: boolean;
-    /** 分隔线（在此项前添加分隔线） */
-    dividerBefore?: boolean;
-    /** 子菜单 */
-    children?: ContextMenuItem[];
-    /** 点击回调 */
-    onClick?: () => void;
-}
-/** 菜单目标类型 */
-export type ContextMenuTarget = 'node' | 'edge' | 'canvas';
-/** ContextMenu Props */
-export interface ContextMenuProps {
-    /** 是否可见 */
-    visible: boolean;
-    /** 菜单显示坐标 X */
-    x: number;
-    /** 菜单显示坐标 Y */
-    y: number;
-    /** 右键目标类型 */
-    targetType?: ContextMenuTarget;
-    /** 右键目标 ID */
-    targetId?: string;
-    /** 菜单项列表 */
-    items: ContextMenuItem[];
-    /** 关闭菜单回调 */
-    onClose: () => void;
-}
-/**
- * ContextMenu 组件
- *
- * 纯 React 实现的右键菜单，支持子菜单和键盘导航。
- */
-declare const ContextMenu: React.FC<ContextMenuProps>;
-/**
- * 生成节点右键菜单项
- *
- * @param handlers - 菜单操作回调
- * @returns 菜单项列表
- */
-export declare function getNodeContextMenuItems(handlers: {
-    onCopy?: () => void;
-    onPaste?: () => void;
-    onDelete?: () => void;
-    onEditProperties?: () => void;
-    onViewConnections?: () => void;
-    onDuplicate?: () => void;
-}): ContextMenuItem[];
-/**
- * 生成边右键菜单项
- *
- * @param handlers - 菜单操作回调
- * @returns 菜单项列表
- */
-export declare function getEdgeContextMenuItems(handlers: {
-    onEditProperties?: () => void;
-    onDelete?: () => void;
-}): ContextMenuItem[];
-/**
- * 生成画布右键菜单项
- *
- * @param handlers - 菜单操作回调
- * @returns 菜单项列表
- */
-export declare function getCanvasContextMenuItems(handlers: {
-    onPaste?: () => void;
-    onSelectAll?: () => void;
-    onFitView?: () => void;
-    onResetZoom?: () => void;
-}): ContextMenuItem[];
-export default ContextMenu;
-//# sourceMappingURL=ContextMenu.d.ts.map

package/dist/components/DataViewDialog.d.ts

@@ -1,41 +0,0 @@
-/**
- * @file components/DataViewDialog.tsx
- * @description 规则链数据查看对话框 — React 实现
- *
- * 功能：
- *   - 以格式化 JSON 展示规则链完整数据
- *   - 支持复制到剪贴板
- *   - 支持下载为 JSON 文件
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see DataViewDialogProps — 组件参数
- */
-import React from 'react';
-/** DataViewDialog Props */
-export interface DataViewDialogProps {
-    /** 是否显示 */
-    visible: boolean;
-    /** 规则链 JSON 数据（原始对象） */
-    data: unknown;
-    /** 对话框标题 */
-    title?: string;
-    /** 文件名前缀（下载用） */
-    fileNamePrefix?: string;
-    /** 关闭回调 */
-    onClose: () => void;
-    /**
-     * 提示消息回调（替代 antd message）
-     * @param type 类型
-     * @param content 内容
-     */
-    onNotify?: (type: 'success' | 'error' | 'info', content: string) => void;
-}
-/**
- * DataViewDialog 组件
- *
- * 纯 React 实现的规则链数据查看对话框，无 antd 依赖。
- * 提供格式化 JSON 展示、复制和下载功能。
- */
-declare const DataViewDialog: React.FC<DataViewDialogProps>;
-export default DataViewDialog;
-//# sourceMappingURL=DataViewDialog.d.ts.map

package/dist/components/DebugPanel.d.ts

@@ -1,92 +0,0 @@
-/**
- * @file components/DebugPanel.tsx
- * @description 调试面板 — React 实现
- *
- * 功能：
- *   - 发送测试消息到规则链
- *   - 查看节点调试日志
- *   - 查看运行日志列表
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * 设计说明：
- *   不直接调用 API，而是通过 Props 传入回调函数，
- *   使此组件可在不同项目中复用。
- *
- * @see DebugPanelProps — 组件参数
- */
-import React from 'react';
-/** 调试日志条目 */
-export interface DebugLogItem {
-    /** 时间戳 */
-    ts: number;
-    /** 流转类型 */
-    flowType: string;
-    /** 关系类型 */
-    relationType: string;
-    /** 错误信息 */
-    err?: string;
-    /** 消息数据 */
-    msg: {
-        id: string;
-        type: string;
-        data: string;
-        metadata: Record<string, unknown>;
-    };
-}
-/** 发送测试消息返回结果 */
-export interface SendMessageResult {
-    /** 是否成功 */
-    success: boolean;
-    /** 返回数据 */
-    data?: unknown;
-    /** 错误/提示消息 */
-    msg?: string;
-}
-/** DebugPanel Props */
-export interface DebugPanelProps {
-    /** 是否显示 */
-    visible: boolean;
-    /** 当前规则链 ID */
-    chainId: string;
-    /** 选中的节点 ID（可选） */
-    selectedNodeId?: string;
-    /** 关闭回调 */
-    onClose: () => void;
-    /**
-     * 发送测试消息的回调
-     * @param chainId 规则链 ID
-     * @param msgType 消息类型
-     * @param body 消息体
-     * @returns 发送结果
-     */
-    onSendMessage?: (chainId: string, msgType: string, body: unknown) => Promise<SendMessageResult>;
-    /**
-     * 获取调试日志的回调
-     * @param chainId 规则链 ID
-     * @param nodeId 可选节点 ID
-     * @returns 调试日志列表
-     */
-    onFetchDebugLogs?: (chainId: string, nodeId?: string) => Promise<{
-        items: DebugLogItem[];
-    }>;
-    /**
-     * 获取运行日志的回调
-     * @returns 运行日志列表
-     */
-    onFetchRunLogs?: () => Promise<unknown[]>;
-    /**
-     * 提示消息回调（替代 antd message）
-     * @param type 提示类型
-     * @param content 提示内容
-     */
-    onNotify?: (type: 'success' | 'error' | 'warning' | 'info', content: string) => void;
-}
-/**
- * DebugPanel 组件
- *
- * 纯 React 实现的调试面板，无 antd 依赖。
- * 通过回调函数与外部 API 对接，实现测试消息发送和日志查看。
- */
-declare const DebugPanel: React.FC<DebugPanelProps>;
-export default DebugPanel;
-//# sourceMappingURL=DebugPanel.d.ts.map

package/dist/components/EdgePropertyDrawer.d.ts

@@ -1,48 +0,0 @@
-/**
- * @file components/EdgePropertyDrawer.tsx
- * @description 边属性编辑抽屉 — React 实现
- *
- * 功能：
- *   - 双击连线弹出侧边抽屉，编辑连线的关系类型（relationType）
- *   - 支持常见预定义类型、自定义类型输入
- *   - 提交后通过 onSubmit 更新边的属性
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see EdgeModel — 边模型类型
- */
-import React from 'react';
-/** 边模型数据 */
-export interface EdgeModel {
-    /** 边 ID */
-    id: string;
-    /** 来源节点 ID */
-    sourceNodeId: string;
-    /** 目标节点 ID */
-    targetNodeId: string;
-    /** 边类型 */
-    type: string;
-    /** 关系类型 */
-    relationType?: string;
-    /** 额外属性 */
-    [key: string]: unknown;
-}
-/** EdgePropertyDrawer Props */
-export interface EdgePropertyDrawerProps {
-    /** 是否显示 */
-    visible: boolean;
-    /** 边模型数据 */
-    edgeModel: EdgeModel | null;
-    /** 提交回调，传递更新后的边模型 */
-    onSubmit: (model: EdgeModel) => void;
-    /** 关闭回调 */
-    onClose: () => void;
-}
-/**
- * EdgePropertyDrawer 组件
- *
- * 纯 React 实现的边属性编辑抽屉，无 antd 依赖。
- * 提供预定义关系类型选择和自定义输入。
- */
-declare const EdgePropertyDrawer: React.FC<EdgePropertyDrawerProps>;
-export default EdgePropertyDrawer;
-//# sourceMappingURL=EdgePropertyDrawer.d.ts.map

package/dist/components/EditorToolbar.d.ts

@@ -1,99 +0,0 @@
-/**
- * @file components/EditorToolbar.tsx
- * @description 编辑器工具栏 — React 实现
- *
- * 功能：
- *   - 保存/撤销/重做操作按钮
- *   - 删除选中元素
- *   - 缩放控制（放大/缩小/适应画布/重置）
- *   - 全屏切换
- *   - 调试模式开关
- *   - 数据视图触发
- *   - 设置入口
- *   - 校验入口
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see EditorToolbarProps — 工具栏参数
- */
-import React from 'react';
-/** 工具栏按钮定义 */
-export interface ToolbarButton {
-    /** 唯一标识 */
-    key: string;
-    /** 显示图标（emoji 或文本） */
-    icon: string;
-    /** 提示文本 */
-    tooltip: string;
-    /** 是否禁用 */
-    disabled?: boolean;
-    /** 是否激活状态 */
-    active?: boolean;
-    /** 点击回调 */
-    onClick: () => void;
-    /** 是否隐藏 */
-    hidden?: boolean;
-    /** 分隔符（在按钮前添加） */
-    dividerBefore?: boolean;
-}
-/** EditorToolbar Props */
-export interface EditorToolbarProps {
-    /** 是否可撤销 */
-    canUndo?: boolean;
-    /** 是否可重做 */
-    canRedo?: boolean;
-    /** 是否全屏 */
-    isFullscreen?: boolean;
-    /** 是否调试模式 */
-    isDebugMode?: boolean;
-    /** 当前缩放比例 */
-    zoomLevel?: number;
-    /** 是否有选中元素 */
-    hasSelection?: boolean;
-    /** 保存 */
-    onSave?: () => void;
-    /** 撤销 */
-    onUndo?: () => void;
-    /** 重做 */
-    onRedo?: () => void;
-    /** 删除选中 */
-    onDelete?: () => void;
-    /** 放大 */
-    onZoomIn?: () => void;
-    /** 缩小 */
-    onZoomOut?: () => void;
-    /** 适应画布 */
-    onFitView?: () => void;
-    /** 重置缩放 */
-    onResetZoom?: () => void;
-    /** 全屏切换 */
-    onFullscreen?: () => void;
-    /** 调试模式切换 */
-    onToggleDebug?: () => void;
-    /** 查看数据 */
-    onViewData?: () => void;
-    /** 设置 */
-    onSettings?: () => void;
-    /** 校验 */
-    onValidate?: () => void;
-    /** 新建规则链 */
-    onNew?: () => void;
-    /** 导入 */
-    onImport?: () => void;
-    /** 导出 */
-    onExport?: () => void;
-    /** 额外的自定义按钮（插入到工具栏末尾） */
-    extraButtons?: ToolbarButton[];
-    /** 隐藏的按钮 key 列表 */
-    hiddenButtons?: string[];
-    /** 规则链名称（显示在工具栏中央） */
-    chainName?: string;
-}
-/**
- * EditorToolbar 组件
- *
- * 纯 React 实现的编辑器工具栏，无 antd 依赖。
- * 提供完整的编辑器操作按钮。
- */
-declare const EditorToolbar: React.FC<EditorToolbarProps>;
-export default EditorToolbar;
-//# sourceMappingURL=EditorToolbar.d.ts.map

package/dist/components/ImportExportDialog.d.ts

@@ -1,45 +0,0 @@
-/**
- * @file ImportExportDialog.tsx
- * @description 规则链导入/导出对话框
- *
- * 功能：
- *   - 导出当前规则链为 JSON 文件
- *   - 从 JSON 文件导入规则链
- *   - 支持拖拽上传文件
- *   - JSON 格式验证和预览
- *   - 支持复制导出内容到剪贴板
- *
- * 设计：
- *   - 纯 React + CSS，无外部 UI 库依赖
- *   - rge- 前缀 CSS 类名避免冲突
- *   - 通过回调 props 传递导入数据
- */
-import React from 'react';
-/** 导入/导出模式 */
-export type ImportExportMode = 'import' | 'export';
-/** ImportExportDialog 属性 */
-export interface ImportExportDialogProps {
-    /** 初始模式，默认 'export' */
-    mode?: ImportExportMode;
-    /** 当前规则链数据 (导出用) */
-    data?: any;
-    /** 规则链名称 (用于文件名) */
-    chainName?: string;
-    /** 导入成功回调，参数为解析后的 JSON 数据 */
-    onImport?: (data: any) => void;
-    /** 关闭对话框回调 */
-    onClose: () => void;
-    /** 通知回调 */
-    onNotify?: (type: 'success' | 'error' | 'info', message: string) => void;
-}
-/**
- * ImportExportDialog 组件
- *
- * @description
- * 提供规则链的导入和导出功能。导出时展示格式化的 JSON，
- * 支持复制到剪贴板和下载为文件。导入时支持文件选择和拖拽上传，
- * 自动验证 JSON 格式并预览内容。
- */
-declare const ImportExportDialog: React.FC<ImportExportDialogProps>;
-export default ImportExportDialog;
-//# sourceMappingURL=ImportExportDialog.d.ts.map

package/dist/components/MiniMap.d.ts

@@ -1,75 +0,0 @@
-/**
- * @file components/MiniMap.tsx
- * @description 小地图导航组件 — React 实现
- *
- * 功能：
- *   - 显示画布全局缩略视图
- *   - 标记所有节点位置（按类型着色）
- *   - 标记当前视口范围（拖拽移动）
- *   - 标记选中节点（高亮）
- *   - 可折叠/展开
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see MiniMapProps — 参数类型
- */
-import React from 'react';
-/** 小地图中的节点数据 */
-export interface MiniMapNode {
-    /** 节点 ID */
-    id: string;
-    /** X 坐标 */
-    x: number;
-    /** Y 坐标 */
-    y: number;
-    /** 宽度 */
-    width?: number;
-    /** 高度 */
-    height?: number;
-    /** 节点类型 */
-    type?: string;
-    /** 是否选中 */
-    selected?: boolean;
-    /** 显示颜色 */
-    color?: string;
-}
-/** 小地图中的视口数据 */
-export interface MiniMapViewport {
-    /** 视口左上角 X */
-    x: number;
-    /** 视口左上角 Y */
-    y: number;
-    /** 视口宽度 */
-    width: number;
-    /** 视口高度 */
-    height: number;
-}
-/** MiniMap Props */
-export interface MiniMapProps {
-    /** 所有节点列表 */
-    nodes: MiniMapNode[];
-    /** 当前视口范围 */
-    viewport?: MiniMapViewport;
-    /** 小地图宽度（默认 200） */
-    width?: number;
-    /** 小地图高度（默认 150） */
-    height?: number;
-    /** 是否默认折叠 */
-    defaultCollapsed?: boolean;
-    /** 位置（右下角/左下角/右上角/左上角） */
-    position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left';
-    /** 视口拖拽回调 — 返回画布坐标 */
-    onViewportChange?: (center: {
-        x: number;
-        y: number;
-    }) => void;
-    /** 节点点击回调 */
-    onNodeClick?: (nodeId: string) => void;
-}
-/**
- * MiniMap 组件
- *
- * 显示画布全局缩略图，方便大型规则链的导航。
- */
-declare const MiniMap: React.FC<MiniMapProps>;
-export default MiniMap;
-//# sourceMappingURL=MiniMap.d.ts.map

package/dist/components/NodePropertyDrawer.d.ts

@@ -1,83 +0,0 @@
-/**
- * @file components/NodePropertyDrawer.tsx
- * @description 节点属性编辑抽屉 — React 实现
- *
- * 功能：
- *   - 双击节点弹出侧边抽屉，编辑节点配置
- *   - 根据组件 fields 定义动态渲染表单（string/bool/int/float/map/array/script）
- *   - 支持节点 ID、名称、调试模式、描述等基础字段
- *   - 提交后通过 onSubmit 回调更新节点属性
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see ComponentField — 字段定义类型
- */
-import React from 'react';
-/** 组件字段定义 */
-export interface FieldDef {
-    /** 字段名 */
-    name: string;
-    /** 字段类型 */
-    type: string;
-    /** 显示标签 */
-    label?: string;
-    /** 字段描述 */
-    desc?: string;
-    /** 默认值 */
-    defaultValue?: unknown;
-    /** 校验规则 */
-    rules?: unknown[];
-}
-/** 节点模型数据 */
-export interface NodeModel {
-    /** LogicFlow 节点 ID */
-    id: string;
-    /** RuleGo 节点 ID */
-    nodeId?: string;
-    /** 节点类型 */
-    type: string;
-    /** 节点名称 */
-    name: string;
-    /** 调试模式 */
-    debugMode?: boolean;
-    /** 节点配置 */
-    configuration?: Record<string, unknown>;
-    /** 附加信息（描述等） */
-    additionalInfo?: Record<string, unknown>;
-    /** 额外属性 */
-    [key: string]: unknown;
-}
-/** 节点视图定义（组件定义） */
-export interface NodeView {
-    /** 组件类型 */
-    type: string;
-    /** 显示标签 */
-    label?: string;
-    /** 描述 */
-    desc?: string;
-    /** 字段定义列表 */
-    fields?: FieldDef[];
-    /** 额外属性 */
-    [key: string]: unknown;
-}
-/** NodePropertyDrawer Props */
-export interface NodePropertyDrawerProps {
-    /** 是否显示 */
-    visible: boolean;
-    /** 节点模型数据 */
-    nodeModel: NodeModel | null;
-    /** 节点视图/组件定义 */
-    nodeView: NodeView | null;
-    /** 提交回调 */
-    onSubmit: (model: NodeModel) => void;
-    /** 关闭回调 */
-    onClose: () => void;
-}
-/**
- * NodePropertyDrawer 组件
- *
- * 纯 React 实现的节点属性编辑抽屉，无 antd 依赖。
- * 根据组件 fields 动态渲染表单，支持多种字段类型。
- */
-declare const NodePropertyDrawer: React.FC<NodePropertyDrawerProps>;
-export default NodePropertyDrawer;
-//# sourceMappingURL=NodePropertyDrawer.d.ts.map