@digitalsee-ai/rcs 0.0.15 → 1.0.0

package/README.md

@@ -1,237 +1,237 @@
-  ![logo](https://www.digitalsee.cn/_next/static/media/logo_purple.a1d68599.svg)
-  
-  # @digitalsee/rcs
-  
-  **数犀 React 组件库**
-
-  
- 为数犀内部提供跨工程运行的React组件服务
-  
-
----
-
-## 📦 安装
-
-使用 pnpm（推荐）:
-```bash
-pnpm add @digitalsee/rcs
-```
-
-使用 npm:
-```bash
-npm install @digitalsee/rcs
-```
-
-使用 yarn:
-```bash
-yarn add @digitalsee/rcs
-```
-
-## ✨ 特性
-
-- 🎨 **工作流编辑器** - 基于 ReactFlow 的强大可视化工作流编辑器
-- 📊 **数据可视化** - 内置 JSON 渲染器和数据展示组件
-- 🌍 **国际化支持** - 内置中文（简体/繁体）和英文支持
-- 🎯 **TypeScript** - 完整的 TypeScript 类型支持
-- 🔧 **可定制** - 灵活的配置和主题定制
-- ⚡ **高性能** - 优化的渲染性能和内存使用
-- 📱 **响应式** - 适配各种屏幕尺寸
-
-## 🚀 快速开始
-
-### 基础使用
-
-```tsx
-import { Workflow } from '@digitalsee/rcs';
-import '@digitalsee/rcs/styles.css';
-
-function App() {
-  return (
-    <Workflow
-      workflowId="my-workflow"
-      // 更多配置项...
-    />
-  );
-}
-```
-
-### 使用 JsonRenderer
-
-```tsx
-import { JsonRenderer } from '@digitalsee/rcs';
-import '@digitalsee/rcs/styles.css';
-
-function App() {
-  const data = {
-    name: "示例数据",
-    value: 123
-  };
-
-  return <JsonRenderer data={data} />;
-}
-```
-
-## 📚 主要组件
-
-### 🔄 Workflow（工作流）
-
-完整的可视化工作流编辑器，支持：
-
-- ✅ 节点的拖拽和连接
-- ✅ 自定义节点类型
-- ✅ 边的样式和交互
-- ✅ 撤销/重做功能
-- ✅ 小地图导航
-- ✅ 自动布局
-- ✅ 调试面板
-- ✅ 数据持久化
-
-**主要特性：**
-- 支持多种节点类型（触发器、动作、条件等）
-- 灵活的节点配置面板
-- 实时数据流调试
-- 节点搜索和筛选
-- 快捷键支持
-
-### 📋 JsonRenderer
-
-强大的 JSON 数据渲染组件：
-- 语法高亮
-- 可折叠/展开
-- 搜索功能
-- 复制功能
-
-## 🔨 开发
-
-### 环境要求
-
-- Node.js >= 22
-- pnpm >= 10.12.1
-
-### 开发命令
-
-```bash
-# 安装依赖
-pnpm install
-
-# 启动 Storybook 开发环境
-pnpm dev
-
-# 构建组件库
-pnpm build:vite
-
-# 运行测试
-pnpm test
-
-# 代码格式化
-pnpm format
-
-# 代码检查
-pnpm lint
-```
-
-### 构建输出
-
-```bash
-# 构建并发布新版本
-pnpm update:version
-```
-
-构建产物包括：
-- `dist/rcs.es.js` - ES Module 格式
-- `dist/rcs.umd.js` - UMD 格式
-- `dist/rcs.css` - 样式文件
-- `dist/index.d.ts` - TypeScript 类型定义
-
-## 🎨 技术栈
-
-- **核心框架**: React 19+
-- **状态管理**: Redux Toolkit
-- **流程图**: @xyflow/react
-- **UI 组件**: Ant Design 5+ / Ant Design Pro Components
-- **样式方案**: Tailwind CSS + Less
-- **代码编辑器**: Monaco Editor / CodeMirror
-- **富文本**: Slate.js
-- **构建工具**: Vite
-- **文档工具**: Storybook
-- **代码质量**: Biome
-- **测试框架**: Vitest
-
-## 📖 依赖要求
-
-### Peer Dependencies
-
-确保你的项目中已安装以下依赖：
-
-- `react` >= 18.0.0
-- `react-dom` >= 18.0.0
-- `antd` >= 5.0.0
-- `@ant-design/icons` >= 5.0.0
-- `@ant-design/pro-components` >= 2.0.0
-- `@reduxjs/toolkit` >= 2.0.0
-- `react-redux` >= 9.0.0
-- `@xyflow/react` >= 12.0.0
-- `ahooks` >= 3.0.0
-- `lodash-es` >= 4.17.0
-
-## 🌐 国际化
-
-组件库内置多语言支持：
-
-```tsx
-import { IntlProvider } from 'react-intl';
-import zhCN from '@digitalsee/rcs/locales/zh-CN';
-
-<IntlProvider locale="zh-CN" messages={zhCN}>
-  <Workflow />
-</IntlProvider>
-```
-
-支持的语言：
-- 🇨🇳 简体中文 (zh-CN)
-- 🇹🇼 繁体中文 (zh-TW)
-- 🇺🇸 英文 (en-US)
-
-## 📝 版本管理
-
-```bash
-# 补丁版本 (0.0.x)
-pnpm bump
-
-# 次要版本 (0.x.0)
-pnpm bump:minor
-
-# 主要版本 (x.0.0)
-pnpm bump:major
-```
-
-## 🤝 贡献
-
-欢迎提交 Issue 和 Pull Request！
-
-### 开发流程
-
-1. Fork 本仓库
-2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
-3. 提交你的改动 (`git commit -m 'Add some AmazingFeature'`)
-4. 推送到分支 (`git push origin feature/AmazingFeature`)
-5. 提交 Pull Request
-
-### 代码规范
-
-项目使用 Biome 进行代码检查和格式化：
-```bash
-pnpm format  # 自动格式化代码
-pnpm lint    # 检查代码问题
-```
-
-
-## 🔗 相关链接
-
-- [数犀官网](https://www.digitalsee.cn)
-
----
-
-<div align="center">
-  Made with ❤️ by <a href="https://www.digitalsee.cn">数犀 DigitalSee</a>
-</div>
+  ![logo](https://www.digitalsee.cn/_next/static/media/logo_purple.a1d68599.svg)
+  
+  # @digitalsee/rcs
+  
+  **数犀 React 组件库**
+
+  
+ 为数犀内部提供跨工程运行的React组件服务
+  
+
+---
+
+## 📦 安装
+
+使用 pnpm（推荐）:
+```bash
+pnpm add @digitalsee/rcs
+```
+
+使用 npm:
+```bash
+npm install @digitalsee/rcs
+```
+
+使用 yarn:
+```bash
+yarn add @digitalsee/rcs
+```
+
+## ✨ 特性
+
+- 🎨 **工作流编辑器** - 基于 ReactFlow 的强大可视化工作流编辑器
+- 📊 **数据可视化** - 内置 JSON 渲染器和数据展示组件
+- 🌍 **国际化支持** - 内置中文（简体/繁体）和英文支持
+- 🎯 **TypeScript** - 完整的 TypeScript 类型支持
+- 🔧 **可定制** - 灵活的配置和主题定制
+- ⚡ **高性能** - 优化的渲染性能和内存使用
+- 📱 **响应式** - 适配各种屏幕尺寸
+
+## 🚀 快速开始
+
+### 基础使用
+
+```tsx
+import { Workflow } from '@digitalsee/rcs';
+import '@digitalsee/rcs/styles.css';
+
+function App() {
+  return (
+    <Workflow
+      workflowId="my-workflow"
+      // 更多配置项...
+    />
+  );
+}
+```
+
+### 使用 JsonRenderer
+
+```tsx
+import { JsonRenderer } from '@digitalsee/rcs';
+import '@digitalsee/rcs/styles.css';
+
+function App() {
+  const data = {
+    name: "示例数据",
+    value: 123
+  };
+
+  return <JsonRenderer data={data} />;
+}
+```
+
+## 📚 主要组件
+
+### 🔄 Workflow（工作流）
+
+完整的可视化工作流编辑器，支持：
+
+- ✅ 节点的拖拽和连接
+- ✅ 自定义节点类型
+- ✅ 边的样式和交互
+- ✅ 撤销/重做功能
+- ✅ 小地图导航
+- ✅ 自动布局
+- ✅ 调试面板
+- ✅ 数据持久化
+
+**主要特性：**
+- 支持多种节点类型（触发器、动作、条件等）
+- 灵活的节点配置面板
+- 实时数据流调试
+- 节点搜索和筛选
+- 快捷键支持
+
+### 📋 JsonRenderer
+
+强大的 JSON 数据渲染组件：
+- 语法高亮
+- 可折叠/展开
+- 搜索功能
+- 复制功能
+
+## 🔨 开发
+
+### 环境要求
+
+- Node.js >= 22
+- pnpm >= 10.12.1
+
+### 开发命令
+
+```bash
+# 安装依赖
+pnpm install
+
+# 启动 Storybook 开发环境
+pnpm dev
+
+# 构建组件库
+pnpm build:vite
+
+# 运行测试
+pnpm test
+
+# 代码格式化
+pnpm format
+
+# 代码检查
+pnpm lint
+```
+
+### 构建输出
+
+```bash
+# 构建并发布新版本
+pnpm update:version
+```
+
+构建产物包括：
+- `dist/rcs.es.js` - ES Module 格式
+- `dist/rcs.umd.js` - UMD 格式
+- `dist/rcs.css` - 样式文件
+- `dist/index.d.ts` - TypeScript 类型定义
+
+## 🎨 技术栈
+
+- **核心框架**: React 19+
+- **状态管理**: Redux Toolkit
+- **流程图**: @xyflow/react
+- **UI 组件**: Ant Design 5+ / Ant Design Pro Components
+- **样式方案**: Tailwind CSS + Less
+- **代码编辑器**: Monaco Editor / CodeMirror
+- **富文本**: Slate.js
+- **构建工具**: Vite
+- **文档工具**: Storybook
+- **代码质量**: Biome
+- **测试框架**: Vitest
+
+## 📖 依赖要求
+
+### Peer Dependencies
+
+确保你的项目中已安装以下依赖：
+
+- `react` >= 18.0.0
+- `react-dom` >= 18.0.0
+- `antd` >= 5.0.0
+- `@ant-design/icons` >= 5.0.0
+- `@ant-design/pro-components` >= 2.0.0
+- `@reduxjs/toolkit` >= 2.0.0
+- `react-redux` >= 9.0.0
+- `@xyflow/react` >= 12.0.0
+- `ahooks` >= 3.0.0
+- `lodash-es` >= 4.17.0
+
+## 🌐 国际化
+
+组件库内置多语言支持：
+
+```tsx
+import { IntlProvider } from 'react-intl';
+import zhCN from '@digitalsee/rcs/locales/zh-CN';
+
+<IntlProvider locale="zh-CN" messages={zhCN}>
+  <Workflow />
+</IntlProvider>
+```
+
+支持的语言：
+- 🇨🇳 简体中文 (zh-CN)
+- 🇹🇼 繁体中文 (zh-TW)
+- 🇺🇸 英文 (en-US)
+
+## 📝 版本管理
+
+```bash
+# 补丁版本 (0.0.x)
+pnpm bump
+
+# 次要版本 (0.x.0)
+pnpm bump:minor
+
+# 主要版本 (x.0.0)
+pnpm bump:major
+```
+
+## 🤝 贡献
+
+欢迎提交 Issue 和 Pull Request！
+
+### 开发流程
+
+1. Fork 本仓库
+2. 创建你的特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交你的改动 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 提交 Pull Request
+
+### 代码规范
+
+项目使用 Biome 进行代码检查和格式化：
+```bash
+pnpm format  # 自动格式化代码
+pnpm lint    # 检查代码问题
+```
+
+
+## 🔗 相关链接
+
+- [数犀官网](https://www.digitalsee.cn)
+
+---
+
+<div align="center">
+  Made with ❤️ by <a href="https://www.digitalsee.cn">数犀 DigitalSee</a>
+</div>

package/dist/components/digitalsee/workflow/Canvas/NextConfigModalWrapper.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Next 模式配置弹窗包装器
+ *
+ * 职责：
+ * - 从 ReactFlow store 根据 currentNodeConfigVisibleId 取当前节点数据
+ * - 管理表单草稿缓存（用户填一半切换节点，草稿保留）
+ * - 驱动单例 NextNodesConfigModal
+ */
+export declare const NextConfigModalWrapper: () => import("react/jsx-runtime").JSX.Element;

package/dist/components/digitalsee/workflow/Canvas/NextWorkflowCanvas.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { WorkflowCanvasProps } from './constants';
+declare const NextWorkflowCanvas: React.FC<WorkflowCanvasProps>;
+export default NextWorkflowCanvas;

package/dist/components/digitalsee/workflow/Canvas/NextWorkflowCanvasHeader.d.ts

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { SaveStatus } from '../enums/workflow';
+import { CanvasAPI } from '../types/engine';
+interface NextWorkflowCanvasHeaderProps {
+    onSave?: () => void;
+    readOnly?: boolean;
+    unSave?: boolean;
+    preview?: boolean;
+    appFlowMode?: boolean;
+    autoSaveStatus?: SaveStatus;
+    lastSavedTime?: string;
+    canvasApi?: CanvasAPI;
+}
+declare const NextWorkflowCanvasHeader: React.FC<NextWorkflowCanvasHeaderProps>;
+export default NextWorkflowCanvasHeader;

package/dist/components/digitalsee/workflow/Canvas/WorkflowCanvas.d.ts

@@ -1,15 +1,4 @@
-import { default as React } from 'react';
 import { WorkflowCanvasProps } from './constants';
-/**
- * 工作流画布组件：负责渲染 ReactFlow 画布、加载/保存流程、处理节点/连线交互与未保存提示。
- *
- * @param props 组件属性
- * @param props.workflowId 流程 ID
- * @param props.readOnly 是否只读
- * @param props.preview 是否预览模式
- * @param props.previewId 预览 ID（存在则视为预览）
- * @param props.appFlowMode 是否为应用流程模式
- * @param props.linkMode 是否为嵌入（Link）模式
- */
+import { default as React } from 'react';
 declare const WorkflowCanvas: React.FC<WorkflowCanvasProps>;
 export default WorkflowCanvas;

package/dist/components/digitalsee/workflow/Canvas/WorkflowCanvasBase.d.ts

@@ -0,0 +1,4 @@
+import { WorkflowCanvasBaseProps } from './types';
+import { default as React } from 'react';
+declare const WorkflowCanvasBase: React.FC<WorkflowCanvasBaseProps>;
+export default WorkflowCanvasBase;

package/dist/components/digitalsee/workflow/Canvas/WorkflowCanvasHeader.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { SaveStatus } from '../enums/workflow';
 import { CanvasAPI } from '../types/engine';
 interface WorkflowCanvasHeaderProps {
     onSave?: () => void;
@@ -6,7 +7,7 @@ interface WorkflowCanvasHeaderProps {
     unSave?: boolean;
     preview?: boolean;
     appFlowMode?: boolean;
-    autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
+    autoSaveStatus?: SaveStatus;
     lastSavedTime?: string;
     /** 画布对外 API，用于工具栏按钮回调 */
     canvasApi?: CanvasAPI;

package/dist/components/digitalsee/workflow/Canvas/color.d.ts

@@ -1 +1 @@
-export declare const getStatusColor: (node: any, colorType?: "normal" | "lighter") => "rgba(0,0,0,.5)" | "rgb(206, 226, 164)" | "#F2C000" | "#FDF6D5" | "#FA170A" | "#FF918B" | "#2EC04F" | "#8CDF3A" | "#007AFF" | "#D9EBFF" | "#51A4F6" | "#00c3ff";
+export declare const getStatusColor: (node: any, colorType?: "normal" | "lighter") => "#007AFF" | "rgba(0,0,0,.5)" | "rgb(206, 226, 164)" | "#F2C000" | "#FDF6D5" | "#FA170A" | "#FF918B" | "#2EC04F" | "#8CDF3A" | "#D9EBFF" | "#51A4F6" | "#00c3ff";

package/dist/components/digitalsee/workflow/Canvas/constants.d.ts

@@ -0,0 +1,75 @@
+import { EdgeType } from '../enums/edge';
+import { NodeData as NodeFactoryData } from '../Nodes/NodeFactory';
+import { ActionItem } from '../Panels/ModernNodeSelectorPanel/types';
+import { CanvasAPI } from '../types/engine';
+import { NodeType } from '../types/Node';
+import { Edge, MarkerType, Node, Viewport } from '@xyflow/react';
+export declare const startNode: {
+    type: NodeType;
+    id: string;
+    position: {
+        x: number;
+        y: number;
+    };
+    data: {
+        type: NodeType;
+        name: string;
+        nodeId: string;
+        id: string;
+        description: string;
+    };
+};
+export declare const convertActionItemToNodeData: (actionItem: Partial<ActionItem> & {
+    status?: string;
+    protocol?: string;
+} & Record<string, any>) => NodeFactoryData;
+/**
+ * NEXT 模式专用转换函数：在 convertActionItemToNodeData 基础上额外保留 name 字段
+ * name 在 NEXT 模式下作为节点实例的唯一显示名称
+ */
+export declare const convertActionItemToNodeDataNext: (actionItem: Partial<ActionItem> & {
+    status?: string;
+    protocol?: string;
+} & Record<string, any>) => NodeFactoryData;
+export declare const nodeTypes: Record<NodeType, import('react').ComponentType<any>>;
+export declare const edgeTypes: {
+    main: import('react').FC<import('../Edges/BaseEdge').CustomEdgeProps>;
+};
+export declare const reactFlowStyles: React.CSSProperties;
+/**默认视口设置 */
+export declare const defaultViewport: Viewport;
+/** 预览模式视口设置（缩放更小以展示更多节点） */
+export declare const previewViewport: Viewport;
+/** 默认边配置 */
+export declare const defaultEdgeOptions: {
+    type: EdgeType;
+    markerEnd: {
+        type: MarkerType;
+        width: number;
+        height: number;
+        color: string;
+    };
+};
+/** 工作流画布属性接口 */
+export interface WorkflowCanvasProps {
+    workflowId?: string;
+    readOnly?: boolean;
+    preview?: boolean;
+    previewId?: string;
+    appFlowMode?: boolean;
+    linkMode?: boolean;
+    onSave?: (workflow: {
+        nodes: Node[];
+        edges: Edge[];
+    }) => void;
+    onInit?: (api: CanvasAPI) => void;
+}
+/** 常量定义 */
+export declare const DEBOUNCE_DELAY: {
+    readonly EDGES: 100;
+    readonly WORKFLOW: 100;
+};
+/** 便签节点的action_id 快捷入口添加时直接写死 */
+export declare const STICKY_ACTION_ID = "944";
+/** DIP 模式下便签节点的 nodeKey */
+export declare const DIP_STICKY_NODE_KEY = "core.stickyNote";

package/dist/components/digitalsee/workflow/Canvas/hooks/createNodeAddHandlerNext.d.ts

@@ -0,0 +1,49 @@
+import { WorkflowCanvasStrategy } from '../types';
+import { NodeData as NodeFactoryData } from '../../Nodes/NodeFactory';
+import { ActionItem } from '../../Panels/ModernNodeSelectorPanel/types';
+import { Edge, Node } from '@xyflow/react';
+interface NodeAddInfo {
+    sourceNodeId?: string;
+    sourceHandle?: string;
+    targetNodeId?: string;
+    targetHandle?: string;
+    position?: {
+        x: number;
+        y: number;
+    };
+    trigger?: boolean;
+    edge?: any;
+    sourceNode?: any;
+    targetNode?: any;
+    protocol?: string;
+    refresh?: boolean;
+}
+interface CreateNodeAddHandlerNextParams {
+    workflowId?: string;
+    strategy: WorkflowCanvasStrategy;
+    store: {
+        getState: () => {
+            nodes: Node[];
+        };
+    };
+    addNodes: (nodes: Node<NodeFactoryData>[]) => void;
+    addEdges: (edges: Edge[]) => void;
+    removeEdges: (edgeIds: string[]) => void;
+    handleEdgeAddNode: (position: {
+        x: number;
+        y: number;
+    }, edge?: Edge) => void;
+    setNodeConfigVisible: (nodeId: string | null) => void;
+    setNodeFitHumanView: (nodeId: string) => void;
+    saveFlow: () => Promise<void>;
+}
+/**
+ * 创建 NEXT 模式的节点添加处理函数（纯函数，非 Hook）
+ *
+ * 与 Classic 模式的关键区别：
+ * 1. 端口名称完全由 DIP Schema 动态定义（通过 getCachedNextNodeSchema 获取）
+ * 2. 使用 convertActionItemToNodeDataNext 转换数据（保留 name 字段）
+ * 3. Loop 节点的特殊端口（loop/done）需要从 Schema 中获取，而不是硬编码
+ */
+export declare function createNodeAddHandlerNext(params: CreateNodeAddHandlerNextParams): (info: NodeAddInfo, nodeData: ActionItem) => Promise<void>;
+export {};