@huanban/rulego-editor-react 1.0.0

package/README.md

@@ -0,0 +1,311 @@
+# @huanban/editor-react
+
+RuleGo 规则链编辑器 React 适配层。提供开箱即用的编辑器、工作流列表、信息面板等组件。
+
+## 安装
+
+```bash
+npm install @huanban/editor-react
+# 或
+pnpm add @huanban/editor-react
+```
+
+> **自动安装的依赖：** `@logicflow/core@2.1.11`、`@logicflow/extension@2.1.11`、`@huanban/editor-core`
+> **需要宿主项目提供：** `react >= 16.8`、`react-dom >= 16.8`
+
+---
+
+## 样式引入
+
+**一行搞定所有样式**（logicflow 基础样式 + 扩展样式 + 编辑器组件样式）：
+
+```tsx
+import '@huanban/editor-react/style.css'
+```
+
+---
+
+## 组件一览
+
+| 组件 | 用途 | 说明 |
+|------|------|------|
+| `RuleGoEditor` | 规则链编辑器 | 完整的可视化编辑器 |
+| `WorkflowList` | 工作流列表 | 展示所有规则链，支持搜索、创建、删除 |
+| `WorkflowInfoPanel` | 工作流信息面板 | 展示单条链的详细信息和配置 |
+
+---
+
+## 一、WorkflowList — 工作流列表
+
+展示所有规则链，支持搜索、分页、创建、删除、编辑跳转。
+
+### 基本用法
+
+```tsx
+import { WorkflowList } from '@huanban/editor-react'
+import '@huanban/editor-react/style.css'
+
+function WorkflowPage() {
+  return (
+    <WorkflowList
+      apiBase="http://localhost:9090/api/v1"
+      onEdit={(item) => {
+        // 跳转到编辑页
+        window.location.href = `/editor/${item.id}`
+      }}
+    />
+  )
+}
+```
+
+### Props
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `apiBase` | `string` | ✅ | 后端 API 地址，如 `http://localhost:9090/api/v1` |
+| `onEdit` | `(item: WorkflowItem) => void` | ❌ | 点击"编辑"按钮的回调 |
+| `customRoutes` | `RuleChainRoutes` | ❌ | 自定义 API 路由映射 |
+| `customIcons` | `WorkflowListIcons` | ❌ | 自定义图标 |
+| `theme` | `WorkflowTheme` | ❌ | 自定义主题色 |
+
+---
+
+## 二、RuleGoEditor — 规则链编辑器
+
+完整的可视化规则链编辑器，支持拖拽节点、连线、属性编辑、撤销/重做。
+
+### 基本用法
+
+```tsx
+import { RuleGoEditor } from '@huanban/editor-react'
+import '@huanban/editor-react/style.css'
+
+function EditorPage({ chainId }: { chainId: string }) {
+  const [chainData, setChainData] = useState(null)
+
+  useEffect(() => {
+    fetch(`http://localhost:9090/api/v1/rule-chains/${chainId}`)
+      .then(res => res.json())
+      .then(data => setChainData(data))
+  }, [chainId])
+
+  const handleSave = (data) => {
+    fetch(`http://localhost:9090/api/v1/rule-chains/${chainId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+  }
+
+  return (
+    <RuleGoEditor
+      data={chainData}
+      onSave={handleSave}
+      height="100vh"
+    />
+  )
+}
+```
+
+### 链信息头部
+
+编辑器顶部自动展示：
+- **链名称** — 当前规则链的 name
+- **主链/子链标签** — 根据 `ruleChain.root` 字段判断
+- **已停用标签** — 当 `ruleChain.disabled` 为 true 时显示
+- **Endpoint 列表** — 如果有 `metadata.endpoints` 则显示类型标签（如 HTTP、MQTT）
+
+可通过 `showChainInfo={false}` 隐藏。
+
+### Props
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| `data` | `RuleChainData \| null` | `null` | 规则链数据 |
+| `options` | `Partial<EditorOptions>` | `{}` | 编辑器配置 |
+| `onSave` | `(data) => void` | - | 保存回调 |
+| `onReady` | `({ core, lf }) => void` | - | 编辑器就绪回调 |
+| `showChainInfo` | `boolean` | `true` | 是否显示链信息头部 |
+| `builtinUi` | `boolean` | `true` | 是否使用内置 UI |
+| `height` | `string \| number` | `'100%'` | 编辑器高度 |
+| `width` | `string \| number` | `'100%'` | 编辑器宽度 |
+| `className` | `string` | `''` | 自定义 className |
+| `style` | `CSSProperties` | `{}` | 自定义样式 |
+| `onNodeClick` | `(node) => void` | - | 节点点击回调 |
+| `onNodeDbClick` | `(node) => void` | - | 节点双击回调 |
+| `onEdgeClick` | `(edge) => void` | - | 边点击回调 |
+| `renderSidebar` | `({ groups, core }) => ReactNode` | - | 自定义侧边栏 |
+| `renderToolbar` | `({ canUndo, canRedo, core }) => ReactNode` | - | 自定义工具栏 |
+| `renderPanel` | `({ nodeView, nodeModel, core }) => ReactNode` | - | 自定义属性面板 |
+
+---
+
+## 三、WorkflowInfoPanel — 工作流信息面板
+
+展示单条规则链的详细信息、配置参数、集成地址等。
+
+### 基本用法
+
+```tsx
+import { WorkflowInfoPanel } from '@huanban/editor-react'
+import '@huanban/editor-react/style.css'
+
+function InfoPage({ workflowItem }) {
+  return (
+    <WorkflowInfoPanel
+      apiBase="http://localhost:9090/api/v1"
+      workflowItem={workflowItem}
+      onRefresh={() => { /* 重新加载数据 */ }}
+    />
+  )
+}
+```
+
+### Props
+
+| 属性 | 类型 | 必填 | 说明 |
+|------|------|------|------|
+| `apiBase` | `string` | ✅ | 后端 API 地址 |
+| `workflowItem` | `WorkflowItem` | ✅ | 工作流数据 |
+| `onRefresh` | `() => void` | ❌ | 刷新回调 |
+| `extraTabs` | `ExtraTab[]` | ❌ | 自定义扩展 Tab |
+| `customRoutes` | `RuleChainRoutes` | ❌ | 自定义 API 路由 |
+| `customIcons` | `WorkflowInfoIcons` | ❌ | 自定义图标 |
+| `theme` | `WorkflowTheme` | ❌ | 自定义主题色 |
+
+---
+
+## 四、完整项目示例
+
+将三个组件组合使用的完整示例：
+
+```tsx
+import { useState, useEffect } from 'react'
+import { WorkflowList, RuleGoEditor, WorkflowInfoPanel } from '@huanban/editor-react'
+import '@huanban/editor-react/style.css'
+
+const API_BASE = 'http://localhost:9090/api/v1'
+
+function App() {
+  const [view, setView] = useState<'list' | 'editor'>('list')
+  const [chainId, setChainId] = useState('')
+  const [chainData, setChainData] = useState(null)
+
+  // 加载链数据
+  useEffect(() => {
+    if (!chainId) return
+    fetch(`${API_BASE}/rule-chains/${chainId}`)
+      .then(res => res.json())
+      .then(data => setChainData(data))
+  }, [chainId])
+
+  // 保存
+  const handleSave = (data) => {
+    fetch(`${API_BASE}/rule-chains/${chainId}`, {
+      method: 'PUT',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(data),
+    })
+  }
+
+  if (view === 'list') {
+    return (
+      <WorkflowList
+        apiBase={API_BASE}
+        onEdit={(item) => {
+          setChainId(item.id)
+          setView('editor')
+        }}
+      />
+    )
+  }
+
+  return (
+    <div style={{ display: 'flex', height: '100vh' }}>
+      <div style={{ flex: 1 }}>
+        <RuleGoEditor
+          data={chainData}
+          onSave={handleSave}
+        />
+      </div>
+    </div>
+  )
+}
+```
+
+---
+
+## 五、Hooks
+
+适用于需要完全自定义 UI 的场景：
+
+| Hook | 说明 |
+|------|------|
+| `useEditorCore` | 创建和管理 EditorCore 实例 |
+| `useEditorTheme` | 主题切换 (亮色/暗色/蓝色) |
+| `useEditorI18n` | 国际化切换 (中文/英文) |
+| `useKeyboardShortcuts` | 键盘快捷键绑定 |
+| `useClipboard` | 节点复制/粘贴 |
+
+```tsx
+import { useEditorCore, useEditorTheme } from '@huanban/editor-react'
+
+function MyCustomEditor() {
+  const { core, isReady, componentGroups } = useEditorCore({
+    url: 'http://localhost:9090/api/v1',
+  })
+  const { setTheme } = useEditorTheme(core)
+
+  return (
+    <div>
+      <button onClick={() => setTheme('dark')}>暗色</button>
+      {/* 自定义的编辑器 UI */}
+    </div>
+  )
+}
+```
+
+---
+
+## 六、Next.js 集成
+
+### Pages Router
+
+```tsx
+import dynamic from 'next/dynamic'
+
+const RuleGoEditor = dynamic(
+  () => import('@huanban/editor-react').then(m => ({ default: m.RuleGoEditor })),
+  { ssr: false }
+)
+
+export default function EditorPage() {
+  return <RuleGoEditor data={chainData} onSave={handleSave} />
+}
+```
+
+### App Router
+
+```tsx
+'use client'
+import { RuleGoEditor } from '@huanban/editor-react'
+import '@huanban/editor-react/style.css'
+
+export default function EditorPage() {
+  return <RuleGoEditor data={chainData} onSave={handleSave} />
+}
+```
+
+---
+
+## 版本说明
+
+| 版本 | 变更 |
+|------|------|
+| 0.6.0 | 编辑器顶部新增链信息头部（名称 + 主链/子链 + endpoint）；样式打包优化（一个 style.css 包含所有样式）；依赖锁定 logicflow 2.1.11 |
+| 0.5.0 | WorkflowList、WorkflowInfoPanel 组件 |
+| 0.4.0 | 初始版本 |
+
+## License
+
+Apache-2.0

package/dist/components/ComponentSidebar.d.ts

@@ -0,0 +1,77 @@
+/**
+ * @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/ComponentSidebar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentSidebar.d.ts","sourceRoot":"","sources":["../../src/components/ComponentSidebar.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AACH,OAAO,KAA4B,MAAM,OAAO,CAAA;AAIhD,uBAAuB;AACvB,MAAM,WAAW,cAAc;IAC7B,UAAU;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,4EAA4E;IAC5E,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW;IACX,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU;IACV,YAAY,CAAC,EAAE,OAAO,CAAA;IACtB,WAAW;IACX,KAAK,CAAC,EAAE,OAAO,EAAE,CAAA;CAClB;AAED,aAAa;AACb,MAAM,WAAW,eAAe;IAC9B,4BAA4B;IAC5B,IAAI,EAAE,MAAM,CAAA;IACZ,6CAA6C;IAC7C,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW;IACX,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,SAAS;IACT,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,aAAa;IACb,MAAM,CAAC,EAAE,cAAc,EAAE,CAAA;IACzB,YAAY;IACZ,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,WAAW;IACX,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,cAAc;IACd,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,cAAc;IACd,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa;IACb,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAcD,kBAAkB;AAClB,MAAM,WAAW,qBAAqB;IACpC,eAAe;IACf,UAAU,EAAE,eAAe,EAAE,CAAA;IAC7B,aAAa;IACb,WAAW,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,KAAK,IAAI,CAAA;IAClD,WAAW;IACX,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB,aAAa;IACb,iBAAiB,CAAC,EAAE,MAAM,CAAA;CAC3B;AAgDD;;;;;GAKG;AACH,QAAA,MAAM,gBAAgB,EAAE,KAAK,CAAC,EAAE,CAAC,qBAAqB,CAgJrD,CAAA;AAID,eAAe,gBAAgB,CAAA"}

package/dist/components/ContextMenu.d.ts

@@ -0,0 +1,102 @@
+/**
+ * @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/ContextMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ContextMenu.d.ts","sourceRoot":"","sources":["../../src/components/ContextMenu.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AACH,OAAO,KAAyC,MAAM,OAAO,CAAA;AAI7D,YAAY;AACZ,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,GAAG,EAAE,MAAM,CAAA;IACX,WAAW;IACX,KAAK,EAAE,MAAM,CAAA;IACb,oBAAoB;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,cAAc;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,WAAW;IACX,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,WAAW;IACX,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,oBAAoB;IACpB,MAAM,CAAC,EAAE,OAAO,CAAA;IAChB,qBAAqB;IACrB,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,UAAU;IACV,QAAQ,CAAC,EAAE,eAAe,EAAE,CAAA;IAC5B,WAAW;IACX,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;CACrB;AAED,aAAa;AACb,MAAM,MAAM,iBAAiB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAA;AAE1D,wBAAwB;AACxB,MAAM,WAAW,gBAAgB;IAC/B,WAAW;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe;IACf,CAAC,EAAE,MAAM,CAAA;IACT,eAAe;IACf,CAAC,EAAE,MAAM,CAAA;IACT,aAAa;IACb,UAAU,CAAC,EAAE,iBAAiB,CAAA;IAC9B,cAAc;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,YAAY;IACZ,KAAK,EAAE,eAAe,EAAE,CAAA;IACxB,aAAa;IACb,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAED;;;;GAIG;AACH,QAAA,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA+G3C,CAAA;AAMD;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE;IAChD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAA;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;IACrB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC9B,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,GAAG,eAAe,EAAE,CAQpB;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CAAC,QAAQ,EAAE;IAChD,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAA;IAC7B,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAA;CACtB,GAAG,eAAe,EAAE,CAKpB;AAED;;;;;GAKG;AACH,wBAAgB,yBAAyB,CAAC,QAAQ,EAAE;IAClD,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;IACxB,SAAS,CAAC,EAAE,MAAM,IAAI,CAAA;IACtB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAA;CACzB,GAAG,eAAe,EAAE,CAOpB;AAED,eAAe,WAAW,CAAA"}

package/dist/components/DataViewDialog.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @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/DataViewDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DataViewDialog.d.ts","sourceRoot":"","sources":["../../src/components/DataViewDialog.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,2BAA2B;AAC3B,MAAM,WAAW,mBAAmB;IAClC,WAAW;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,wBAAwB;IACxB,IAAI,EAAE,OAAO,CAAA;IACb,YAAY;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,iBAAiB;IACjB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACzE;AAED;;;;;GAKG;AACH,QAAA,MAAM,cAAc,EAAE,KAAK,CAAC,EAAE,CAAC,mBAAmB,CA0EjD,CAAA;AAID,eAAe,cAAc,CAAA"}

package/dist/components/DebugPanel.d.ts

@@ -0,0 +1,92 @@
+/**
+ * @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/DebugPanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugPanel.d.ts","sourceRoot":"","sources":["../../src/components/DebugPanel.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AACH,OAAO,KAAgC,MAAM,OAAO,CAAA;AAIpD,aAAa;AACb,MAAM,WAAW,YAAY;IAC3B,UAAU;IACV,EAAE,EAAE,MAAM,CAAA;IACV,WAAW;IACX,QAAQ,EAAE,MAAM,CAAA;IAChB,WAAW;IACX,YAAY,EAAE,MAAM,CAAA;IACpB,WAAW;IACX,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,WAAW;IACX,GAAG,EAAE;QACH,EAAE,EAAE,MAAM,CAAA;QACV,IAAI,EAAE,MAAM,CAAA;QACZ,IAAI,EAAE,MAAM,CAAA;QACZ,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAA;KAClC,CAAA;CACF;AAED,iBAAiB;AACjB,MAAM,WAAW,iBAAiB;IAChC,WAAW;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,WAAW;IACX,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,cAAc;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;CACb;AAED,uBAAuB;AACvB,MAAM,WAAW,eAAe;IAC9B,WAAW;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,eAAe;IACf,OAAO,EAAE,MAAM,CAAA;IACf,mBAAmB;IACnB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,WAAW;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;IACnB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,KAAK,OAAO,CAAC,iBAAiB,CAAC,CAAA;IAC/F;;;;;OAKG;IACH,gBAAgB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC;QAAE,KAAK,EAAE,YAAY,EAAE,CAAA;KAAE,CAAC,CAAA;IAC3F;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,OAAO,CAAC,OAAO,EAAE,CAAC,CAAA;IACzC;;;;OAIG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,EAAE,OAAO,EAAE,MAAM,KAAK,IAAI,CAAA;CACrF;AAcD;;;;;GAKG;AACH,QAAA,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAgTzC,CAAA;AAID,eAAe,UAAU,CAAA"}

package/dist/components/EdgePropertyDrawer.d.ts

@@ -0,0 +1,48 @@
+/**
+ * @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/EdgePropertyDrawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EdgePropertyDrawer.d.ts","sourceRoot":"","sources":["../../src/components/EdgePropertyDrawer.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AACH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAIlD,YAAY;AACZ,MAAM,WAAW,SAAS;IACxB,WAAW;IACX,EAAE,EAAE,MAAM,CAAA;IACV,cAAc;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,cAAc;IACd,YAAY,EAAE,MAAM,CAAA;IACpB,UAAU;IACV,IAAI,EAAE,MAAM,CAAA;IACZ,WAAW;IACX,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,WAAW;IACX,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;CACvB;AAED,+BAA+B;AAC/B,MAAM,WAAW,uBAAuB;IACtC,WAAW;IACX,OAAO,EAAE,OAAO,CAAA;IAChB,YAAY;IACZ,SAAS,EAAE,SAAS,GAAG,IAAI,CAAA;IAC3B,qBAAqB;IACrB,QAAQ,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,IAAI,CAAA;IACpC,WAAW;IACX,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAWD;;;;;GAKG;AACH,QAAA,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,uBAAuB,CAsIzD,CAAA;AAID,eAAe,kBAAkB,CAAA"}