@huanban/rulego-editor-react 1.0.13 → 1.0.15

package/dist/components/RuleChainSettings.d.ts

@@ -1,74 +0,0 @@
-/**
- * @file components/RuleChainSettings.tsx
- * @description 规则链设置对话框 — React 实现
- *
- * 功能：
- *   - 编辑规则链元数据（名称/描述/调试模式等）
- *   - 管理规则链全局配置
- *   - 模态对话框展示
- *   - 表单验证
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see RuleChainSettingsProps — 设置参数
- */
-import React from 'react';
-/** 规则链设置数据 */
-export interface RuleChainSettingsData {
-    /** 规则链 ID */
-    id?: string;
-    /** 规则链名称 */
-    name: string;
-    /** 是否为根链 */
-    root?: boolean;
-    /** 是否开启调试模式 */
-    debugMode?: boolean;
-    /** 描述 */
-    description?: string;
-    /** 额外配置（JSON） */
-    additionalInfo?: Record<string, unknown>;
-    /** 自定义字段 */
-    [key: string]: unknown;
-}
-/** RuleChainSettings Props */
-export interface RuleChainSettingsProps {
-    /** 是否可见 */
-    visible: boolean;
-    /** 当前设置数据 */
-    data: RuleChainSettingsData;
-    /** 是否只读 */
-    readOnly?: boolean;
-    /** 对话框标题 */
-    title?: string;
-    /** 额外的自定义字段定义 */
-    customFields?: Array<{
-        /** 字段名 */
-        key: string;
-        /** 显示名称 */
-        label: string;
-        /** 字段类型 */
-        type: 'text' | 'number' | 'select' | 'textarea' | 'switch';
-        /** select 的选项 */
-        options?: Array<{
-            label: string;
-            value: string;
-        }>;
-        /** 默认值 */
-        defaultValue?: unknown;
-        /** 提示 */
-        placeholder?: string;
-        /** 帮助文本 */
-        help?: string;
-    }>;
-    /** 保存回调 */
-    onSave?: (data: RuleChainSettingsData) => void;
-    /** 取消 / 关闭 */
-    onClose: () => void;
-}
-/**
- * RuleChainSettings 组件
- *
- * 模态对话框形式的规则链设置面板。
- */
-declare const RuleChainSettings: React.FC<RuleChainSettingsProps>;
-export default RuleChainSettings;
-//# sourceMappingURL=RuleChainSettings.d.ts.map

package/dist/components/RuleGoEditor.d.ts

@@ -1,181 +0,0 @@
-/**
- * @file components/RuleGoEditor.tsx
- * @description React 薄封装 — 直接复用 @huanban/rulego-editor-core 的 HuanbanRulegoEditor
- *
- * 设计理念:
- * - 所有编辑器核心逻辑（工具栏、侧边栏、组件列表、上下文菜单、属性面板、
- *   小地图、键盘快捷键等）全部在 editor-core 的 HuanbanRulegoEditor 中实现
- * - React 版只负责: 挂载 DOM → 创建实例 → 代理 Props → 卸载时销毁
- * - 这样 React / Vue / Angular 的封装都只需 ~100 行, 功能自动与 JS 版对齐
- *
- * @example
- * ```tsx
- * import { RuleGoEditor } from '@huanban/rulego-editor-react'
- *
- * function App() {
- *   return (
- *     <RuleGoEditor
- *       apiBase="http://127.0.0.1:9090/api/v1"
- *       data={ruleChainData}
- *       components={componentsList}
- *       onSave={(data) => console.log('保存', data)}
- *       onReady={({ lf, core }) => console.log('就绪')}
- *     />
- *   )
- * }
- * ```
- *
- * @see HuanbanRulegoEditor — 核心引擎 (editor-core)
- */
-import React from 'react';
-import { HuanbanRulegoEditor } from '@huanban/rulego-editor-core';
-import type { EditorCore } from '@huanban/rulego-editor-core';
-import type { RuleChainData, ComponentDefinition } from '@huanban/rulego-editor-core';
-import LogicFlow from '@logicflow/core';
-/**
- * RuleGoEditor 组件 Props
- *
- * 大部分选项直接透传给 HuanbanRulegoEditor (editor-core)
- * React 特有的只有: className, style, width, height, ref
- */
-export interface RuleGoEditorProps {
-    /** 容器高度, 默认 '100%' */
-    height?: string | number;
-    /** 容器宽度, 默认 '100%' */
-    width?: string | number;
-    /** className */
-    className?: string;
-    /** style */
-    style?: React.CSSProperties;
-    /** API 基础地址 (如 'http://127.0.0.1:9090/api/v1') */
-    apiBase?: string;
-    /** 请求超时毫秒数, 默认 5000 */
-    fetchTimeout?: number;
-    /**
-     * 自定义请求头 — 用于注入 Authorization Token 等认证信息
-     * 支持静态对象或动态函数（每次请求时调用获取最新 Token）
-     */
-    fetchHeaders?: Record<string, string> | (() => Record<string, string>);
-    /**
-     * 自定义 fetch 函数 — 完全替换原生 fetch
-     * 当需要自定义请求逻辑（如统一认证拦截、请求签名、错误重试等）时使用
-     * 函数签名: (url: string, init: RequestInit) => Promise<Response>
-     */
-    customFetch?: (url: string, init: RequestInit) => Promise<Response>;
-    /** 初始规则链数据 */
-    data?: RuleChainData | null;
-    /** 初始组件列表 */
-    components?: ComponentDefinition[];
-    /** 是否显示工具栏, 默认 true */
-    showToolbar?: boolean;
-    /** 工具栏左侧标题 */
-    toolbarTitle?: string;
-    /** 是否显示侧边栏, 默认 true */
-    showSidebar?: boolean;
-    /** 侧边栏宽度, 默认 220 */
-    sidebarWidth?: number;
-    /** 侧边栏是否默认收起 */
-    sidebarCollapsed?: boolean;
-    /** 是否显示信息按钮 */
-    showInfoButton?: boolean;
-    /** 是否显示导出按钮, 默认 true */
-    showExportDialog?: boolean;
-    /** 是否显示运行按钮 */
-    showRunButton?: boolean;
-    /** 是否显示组件管理按钮 */
-    showComponentManage?: boolean;
-    /** 是否显示部署按钮, 默认 true */
-    showDeployButton?: boolean;
-    /** 是否显示运行记录按钮 */
-    showRunHistory?: boolean;
-    /** 运行记录 URL (支持 {chainId} 占位符) */
-    runHistoryUrl?: string;
-    /** 是否显示调试日志 Tab */
-    showDebugTab?: boolean;
-    /** 语言设置, 默认 'zh_cn' */
-    locale?: string;
-    /** LogicFlow 额外配置 (与默认配置合并) */
-    lfOptions?: Record<string, unknown>;
-    /** LogicFlow 插件数组 */
-    lfPlugins?: any[];
-    /** EditorCore 额外配置 */
-    coreOptions?: Record<string, unknown>;
-    /** 编辑器就绪 */
-    onReady?: (ctx: {
-        lf: LogicFlow;
-        core: EditorCore;
-    }) => void;
-    /** 保存回调 */
-    onSave?: (data: unknown) => void;
-    /** 节点点击 */
-    onNodeClick?: (data: unknown) => void;
-    /** 节点双击 */
-    onNodeDbClick?: (data: unknown) => void;
-    /** 边点击 */
-    onEdgeClick?: (data: unknown) => void;
-    /** 数据变化 */
-    onChange?: () => void;
-    /** 点击信息按钮 */
-    onInfoClick?: (chainInfo: any) => void;
-    /** 劫持导出 */
-    onExportDSL?: (data: {
-        json: string;
-        imageDataUrl?: string;
-    }) => void;
-    /** 劫持运行 */
-    onRunClick?: (chainId: string) => void;
-    /** 劫持组件管理 */
-    onComponentManage?: () => void;
-    /** 语言切换回调 */
-    onLocaleChange?: (locale: string) => void;
-    /** 劫持部署 */
-    onDeploy?: (chainId: string, action: 'deploy' | 'undeploy' | 'reload') => void;
-    /** 选择规则链 */
-    onSelectRuleChain?: (ruleChain: any) => void;
-    /** 删除规则链 */
-    onDeleteRuleChain?: (chainId: string) => void;
-    /** 劫持运行记录 */
-    onRunHistory?: (chainId: string) => void;
-    /** 规则链列表数据 */
-    ruleItems?: any[];
-    /** 规则链 API 地址 */
-    rulesApi?: string;
-}
-/**
- * RuleGoEditor 的命令式 API
- * 通过 useRef + forwardRef 暴露给父组件
- */
-export interface RuleGoEditorRef {
-    /** HuanbanRulegoEditor 实例 (editor-core) */
-    editor: HuanbanRulegoEditor | null;
-    /** LogicFlow 实例 */
-    lf: LogicFlow | null;
-    /** EditorCore 实例 */
-    core: EditorCore | null;
-    /** 重新加载数据 */
-    loadData: (data: RuleChainData) => void;
-    /** 重新加载组件 */
-    loadComponents: (components: ComponentDefinition[]) => void;
-    /** 导出数据 */
-    exportData: () => RuleChainData | null;
-    /** 切换小地图 */
-    toggleMiniMap: () => void;
-    /** 手动触发自动排版 — 基于 DAG 拓扑排序重新排列节点 */
-    autoLayout: () => void;
-}
-/**
- * RuleGoEditor — React 封装组件
- *
- * 内部直接使用 editor-core 的 HuanbanRulegoEditor,
- * 所有功能与原生 JS 版完全一致:
- * - 工具栏 (保存/撤销/重做/导出/部署/运行/语言/主题)
- * - 组件侧边栏 (分类折叠/搜索/拖拽添加)
- * - 画布 (LogicFlow 2.x)
- * - 右键菜单
- * - 节点/边属性抽屉
- * - 小地图
- * - 键盘快捷键
- */
-declare const RuleGoEditor: React.ForwardRefExoticComponent<RuleGoEditorProps & React.RefAttributes<RuleGoEditorRef>>;
-export default RuleGoEditor;
-//# sourceMappingURL=RuleGoEditor.d.ts.map

package/dist/components/SearchPanel.d.ts

@@ -1,52 +0,0 @@
-/**
- * @file SearchPanel.tsx
- * @description 节点搜索面板
- *
- * 功能：
- *   - 按名称、类型、ID 搜索规则链中的节点
- *   - 实时过滤和高亮匹配结果
- *   - 点击搜索结果定位到对应节点
- *   - 支持快捷键触发 (Ctrl/Cmd + F)
- *   - 支持搜索历史记录（会话内）
- *
- * 设计：
- *   - 纯 React + CSS，无外部 UI 库依赖
- *   - rge- 前缀 CSS 类名避免冲突
- *   - 通过回调 props 处理节点定位
- */
-import React from 'react';
-/** 搜索结果项 */
-export interface SearchResultItem {
-    /** 节点 ID */
-    id: string;
-    /** 节点名称 */
-    name: string;
-    /** 节点类型 */
-    type: string;
-    /** 组件类型显示名 */
-    typeLabel?: string;
-    /** 附加信息 (如配置片段) */
-    extra?: string;
-}
-/** SearchPanel 属性 */
-export interface SearchPanelProps {
-    /** 所有可搜索的节点列表 */
-    nodes: SearchResultItem[];
-    /** 点击搜索结果回调 — 定位到对应节点 */
-    onSelectNode?: (nodeId: string) => void;
-    /** 关闭搜索面板回调 */
-    onClose: () => void;
-    /** 面板位置 */
-    position?: 'top-center' | 'top-right';
-}
-/**
- * SearchPanel 组件
- *
- * @description
- * 提供节点搜索功能。输入关键词后实时过滤匹配节点，
- * 点击搜索结果可定位到画布中对应的节点。
- * 使用 ESC 键或关闭按钮关闭面板。
- */
-declare const SearchPanel: React.FC<SearchPanelProps>;
-export default SearchPanel;
-//# sourceMappingURL=SearchPanel.d.ts.map

package/dist/components/ValidationPanel.d.ts

@@ -1,57 +0,0 @@
-/**
- * @file components/ValidationPanel.tsx
- * @description 规则链验证面板 — React 实现
- *
- * 功能：
- *   - 显示验证结果（错误/警告/信息）
- *   - 按级别分组展示
- *   - 点击错误项高亮对应节点/边
- *   - 支持手动触发验证
- *   - 统计信息展示
- *   - 零 UI 框架依赖（纯 React + CSS）
- *
- * @see ValidationPanelProps — 面板参数
- */
-import React from 'react';
-/** 验证错误项 */
-export interface ValidationItem {
-    /** 规则名称 */
-    rule: string;
-    /** 错误级别 */
-    level: 'error' | 'warning' | 'info';
-    /** 错误消息 */
-    message: string;
-    /** 关联的元素 ID */
-    elementId?: string;
-    /** 关联的元素类型 */
-    elementType?: 'node' | 'edge';
-}
-/** ValidationPanel Props */
-export interface ValidationPanelProps {
-    /** 验证结果列表 */
-    items: ValidationItem[];
-    /** 是否验证通过 */
-    isValid?: boolean;
-    /** 是否可见 */
-    visible?: boolean;
-    /** 是否正在验证中 */
-    loading?: boolean;
-    /** 面板标题 */
-    title?: string;
-    /** 手动触发验证 */
-    onValidate?: () => void;
-    /** 点击验证项（跳转到对应元素） */
-    onItemClick?: (item: ValidationItem) => void;
-    /** 关闭面板 */
-    onClose?: () => void;
-    /** 清除验证结果 */
-    onClear?: () => void;
-}
-/**
- * ValidationPanel 组件
- *
- * 显示规则链校验结果，支持点击跳转到问题元素。
- */
-declare const ValidationPanel: React.FC<ValidationPanelProps>;
-export default ValidationPanel;
-//# sourceMappingURL=ValidationPanel.d.ts.map

package/dist/components/WorkflowInfoPanel.d.ts

@@ -1,57 +0,0 @@
-/**
- * @file components/WorkflowInfoPanel.tsx
- * @description 工作流信息面板组件 — 支持独立引用
- *
- * 六大替换能力:
- *   1. 请求替换: fetcher prop 或 apiBase
- *   2. CSS 替换: huanban_rulego_info__ 前缀 + CSS 变量
- *   3. Slot 插槽: renderBaseInfo / renderVarsSecrets / renderIntegration / renderExtraTabs
- *   4. 图标替换: icons prop
- *   5. 主题切换: theme prop
- *   6. 事件回调: onSave / onError / onRefresh
- *
- * Tab 页:
- *   - 基础信息（名称/描述/状态）
- *   - 变量与秘钥（key-value 编辑）
- *   - 应用集成（API/MCP 地址展示）
- *   - 自定义 Tab（通过 renderExtraTabs 扩展）
- *
- * @module @huanban/rulego-editor-react
- */
-import React from 'react';
-import type { WorkflowItem, WorkflowFetcher, WorkflowInfoIcons, WorkflowTheme, RuleChainAPIOptions } from '@huanban/rulego-editor-core';
-/** 自定义 Tab 定义 */
-export interface ExtraTab {
-    key: string;
-    label: React.ReactNode;
-    children: React.ReactNode;
-}
-export interface WorkflowInfoPanelProps {
-    apiBase?: string;
-    apiOptions?: Partial<RuleChainAPIOptions>;
-    fetcher?: WorkflowFetcher;
-    /** 当前工作流数据 */
-    workflow: WorkflowItem | null;
-    theme?: WorkflowTheme;
-    className?: string;
-    style?: React.CSSProperties;
-    icons?: Partial<WorkflowInfoIcons>;
-    /** 默认激活的 Tab，默认 'base' */
-    defaultTab?: string;
-    /** 替换基础信息面板 */
-    renderBaseInfo?: (workflow: WorkflowItem, defaultPanel: React.ReactNode) => React.ReactNode;
-    /** 替换变量/秘钥面板 */
-    renderVarsSecrets?: (workflow: WorkflowItem, defaultPanel: React.ReactNode) => React.ReactNode;
-    /** 替换集成面板 */
-    renderIntegration?: (workflow: WorkflowItem, apiBase: string, defaultPanel: React.ReactNode) => React.ReactNode;
-    /** 追加自定义 Tab */
-    renderExtraTabs?: (workflow: WorkflowItem) => ExtraTab[];
-    /** 保存成功 */
-    onSave?: (type: string) => void;
-    /** 出错 */
-    onError?: (error: Error) => void;
-    /** 请求刷新外部数据 */
-    onRefresh?: () => void;
-}
-export declare const WorkflowInfoPanel: React.FC<WorkflowInfoPanelProps>;
-//# sourceMappingURL=WorkflowInfoPanel.d.ts.map

package/dist/components/WorkflowList.d.ts

@@ -1,91 +0,0 @@
-/**
- * @file components/WorkflowList.tsx
- * @description 工作流列表组件 — 支持独立引用
- *
- * 六大替换能力:
- *   1. 请求替换: fetcher prop（实现 WorkflowFetcher 接口）或 apiBase（用内置 fetch）
- *   2. CSS 替换: 所有 class 用 huanban_rulego_list__ 前缀 + CSS 变量，可完全覆盖
- *   3. Slot 插槽: renderHeader / renderActions / renderEmpty / renderCreateForm / renderRow
- *   4. 图标替换: icons prop（传入自定义图标 ReactNode）
- *   5. 主题切换: theme prop（'light' | 'dark'）
- *   6. 事件回调: onDesign / onInfo / onViewLogs / onChange / onError / onCreateSuccess
- *
- * 使用方式:
- * ```tsx
- * // 最简用法（内置 fetch）
- * <WorkflowList apiBase="http://127.0.0.1:9090/api/v1" />
- *
- * // 完整自定义
- * <WorkflowList
- *   fetcher={myFetcher}
- *   icons={{ design: <EditOutlined /> }}
- *   theme="dark"
- *   renderActions={(wf, defaults) => <>{defaults}<MyBtn /></>}
- *   onDesign={(id) => navigate(`/editor/${id}`)}
- * />
- * ```
- *
- * @module @huanban/rulego-editor-react
- */
-import React from 'react';
-import type { WorkflowItem, WorkflowFetcher, WorkflowListIcons, WorkflowTheme, RuleChainAPIOptions } from '@huanban/rulego-editor-core';
-/**
- * WorkflowList 组件 Props
- */
-export interface WorkflowListProps {
-    /** API 基础地址（用内置 RuleChainAPI） */
-    apiBase?: string;
-    /** API 配置（传给内置 RuleChainAPI 的完整配置） */
-    apiOptions?: Partial<RuleChainAPIOptions>;
-    /** 自定义请求适配器（传了就忽略 apiBase） */
-    fetcher?: WorkflowFetcher;
-    /** 每页条数，默认 10 */
-    pageSize?: number;
-    /** 主题 */
-    theme?: WorkflowTheme;
-    /** 额外 CSS 类名 */
-    className?: string;
-    /** 行内样式 */
-    style?: React.CSSProperties;
-    /** 自定义图标映射 */
-    icons?: Partial<WorkflowListIcons>;
-    /** 是否显示搜索框，默认 true */
-    showSearch?: boolean;
-    /** 是否显示新建按钮，默认 true */
-    showCreate?: boolean;
-    /** 是否显示刷新按钮，默认 true */
-    showRefresh?: boolean;
-    /** 替换标题栏区域 */
-    renderHeader?: (defaultHeader: React.ReactNode) => React.ReactNode;
-    /** 替换每行操作按钮 */
-    renderActions?: (workflow: WorkflowItem, defaultActions: React.ReactNode) => React.ReactNode;
-    /** 替换空状态 */
-    renderEmpty?: () => React.ReactNode;
-    /** 替换新建表单内容 */
-    renderCreateForm?: (defaultForm: React.ReactNode, handlers: {
-        close: () => void;
-        submit: (data: Record<string, unknown>) => void;
-    }) => React.ReactNode;
-    /** 替换行渲染 */
-    renderRow?: (workflow: WorkflowItem, index: number, defaultRow: React.ReactNode) => React.ReactNode;
-    /** 点击设计按钮 */
-    onDesign?: (chainId: string) => void;
-    /** 点击信息按钮 */
-    onInfo?: (workflow: WorkflowItem) => void;
-    /** 点击查看日志 */
-    onViewLogs?: (chainId: string) => void;
-    /** 列表数据变化（增删改后） */
-    onChange?: () => void;
-    /** 发生错误 */
-    onError?: (error: Error) => void;
-    /** 创建成功 */
-    onCreateSuccess?: (chainId: string) => void;
-}
-/**
- * 工作流列表组件
- *
- * @description 支持独立引用，所有功能在包里实现。
- * CSS 类名前缀 huanban_rulego_list__，不会污染宿主项目。
- */
-export declare const WorkflowList: React.FC<WorkflowListProps>;
-//# sourceMappingURL=WorkflowList.d.ts.map

package/dist/hooks/useClipboard.d.ts

@@ -1,89 +0,0 @@
-/**
- * @file useClipboard.ts
- * @description 规则链编辑器剪贴板管理 Hook
- *
- * 功能：
- *   - 复制节点（单个/多个）到内部剪贴板
- *   - 粘贴节点（自动偏移位置防重叠）
- *   - 剪切节点（复制 + 删除）
- *   - 全选节点
- *   - 支持 Ctrl/Cmd + C/V/X/A 快捷键
- *
- * 设计：
- *   - 使用内存剪贴板（不使用系统剪贴板，避免权限问题）
- *   - 粘贴时自动生成新 ID，避免 ID 冲突
- *   - 粘贴位置自动偏移 (30px, 30px)
- */
-/** 剪贴板中的节点数据 */
-export interface ClipboardNode {
-    /** 原始节点 ID */
-    originalId: string;
-    /** 节点类型 */
-    type: string;
-    /** 节点名称 */
-    name: string;
-    /** 节点位置 X */
-    x: number;
-    /** 节点位置 Y */
-    y: number;
-    /** 节点属性数据 */
-    properties: Record<string, unknown>;
-    /** 节点的完整配置快照 */
-    config?: Record<string, unknown>;
-}
-/** 剪贴板操作回调 */
-export interface ClipboardCallbacks {
-    /** 获取当前选中的节点 */
-    getSelectedNodes?: () => ClipboardNode[];
-    /** 删除指定节点（剪切用） */
-    onDeleteNodes?: (nodeIds: string[]) => void;
-    /** 添加新节点（粘贴用） */
-    onAddNodes?: (nodes: ClipboardNode[]) => void;
-    /** 全选所有节点 */
-    onSelectAll?: () => void;
-    /** 通知消息 */
-    onNotify?: (type: 'success' | 'info', message: string) => void;
-}
-/** useClipboard 返回值 */
-export interface ClipboardManager {
-    /** 复制选中节点 */
-    copy: () => void;
-    /** 剪切选中节点 */
-    cut: () => void;
-    /** 粘贴剪贴板节点 */
-    paste: () => void;
-    /** 全选 */
-    selectAll: () => void;
-    /** 剪贴板是否有内容 */
-    hasContent: boolean;
-    /** 剪贴板中节点数量 */
-    clipboardCount: number;
-    /** 清空剪贴板 */
-    clear: () => void;
-}
-/**
- * useClipboard Hook
- *
- * @description
- * 管理编辑器的复制/剪切/粘贴/全选操作。
- * 使用内存剪贴板存储节点数据，粘贴时自动生成新 ID 并偏移位置。
- *
- * @param callbacks - 操作回调
- * @returns 剪贴板管理器
- *
- * @example
- * ```tsx
- * const clipboard = useClipboard({
- *   getSelectedNodes: () => selectedNodes,
- *   onDeleteNodes: (ids) => deleteNodes(ids),
- *   onAddNodes: (nodes) => addNodes(nodes),
- *   onSelectAll: () => selectAllNodes(),
- * })
- *
- * // 在键盘事件中调用
- * clipboard.copy()
- * clipboard.paste()
- * ```
- */
-export declare function useClipboard(callbacks: ClipboardCallbacks): ClipboardManager;
-//# sourceMappingURL=useClipboard.d.ts.map