@digitalsee-ai/rcs 0.0.15 → 1.0.1

package/README.md

@@ -1,237 +1,69 @@
-  ![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>
+# @digitalsee-ai/rcs
+
+数犀 React 组件库，当前主要提供工作流画布、DynamicForm 和 JsonRenderer。
+
+## 环境要求
+
+- Node.js `>= 22`
+- pnpm `10.12.1`
+
+## 安装与使用
+
+```bash
+pnpm add @digitalsee-ai/rcs
+```
+
+```tsx
+import { DigitalseeWorkFlow } from '@digitalsee-ai/rcs';
+import '@digitalsee-ai/rcs/styles.css';
+
+export function WorkflowPage() {
+  return <DigitalseeWorkFlow workflowId="workflow-id" />;
+}
+```
+
+DynamicForm 示例：
+
+```tsx
+import { DynamicForm, DynamicFormField, type FormSchema } from '@digitalsee-ai/rcs';
+import '@digitalsee-ai/rcs/styles.css';
+
+const schema: FormSchema = {
+  fields: [{ type: DynamicFormField.TEXT, name: 'name', label: '名称' }],
+};
+
+export function FormPage() {
+  return <DynamicForm schema={schema} />;
+}
+```
+
+## 开发命令
+
+```bash
+pnpm install
+pnpm dev          # Storybook，默认 http://localhost:8888
+pnpm build:lib    # tsc + Vite，生成 dist
+pnpm build:vite   # 仅 Vite 构建，适合快速联调
+pnpm tsc          # 类型检查
+pnpm test         # Vitest watch
+pnpm test:cov     # 单次运行并生成覆盖率
+pnpm format       # Biome 格式化 src
+pnpm lint         # Biome lint 并自动修复 src
+```
+
+`dist/` 是 npm 包实际消费的构建产物。修改源码后，宿主项目不会自动获得更新，需重新构建。
+
+## 文档
+
+- [文档索引与维护状态](docs/README.md)
+- [本地联调 npm 包](docs/development/local-package-debugging.md)
+- [工作流组件集成](docs/guides/workflow-integration.md)
+- [发布说明](docs/development/publishing.md)
+
+## 包导出
+
+- `@digitalsee-ai/rcs`：组件、类型与工具
+- `@digitalsee-ai/rcs/styles.css`：组件库样式
+
+构建产物包括 `dist/rcs.es.js`、`dist/rcs.umd.js`、`dist/rcs.css` 和
+`dist/index.d.ts`。

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 {};

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

@@ -0,0 +1,22 @@
+import { ReactFlowInstance } from '@xyflow/react';
+import { AppDispatch } from '../../store';
+import { CanvasAPI } from '../../types/engine';
+interface UseCanvasApiParams {
+    dispatch: AppDispatch;
+    reactFlow: ReactFlowInstance;
+    setEdges: (edges: any) => void;
+    setNodes: (nodes: any) => void;
+    store: {
+        getState: () => any;
+    };
+    setNodeConfigVisible: (nodeId: string | null) => void;
+    saveFlowRef: React.RefObject<() => Promise<void>>;
+}
+/**
+ * 构造对外 Canvas API
+ */
+export declare function useCanvasApi({ dispatch, reactFlow, setEdges, setNodes, store, setNodeConfigVisible, saveFlowRef, }: UseCanvasApiParams): {
+    canvasApi: CanvasAPI;
+    eventListenersRef: React.RefObject<Map<string, Set<Function>>>;
+};
+export {};

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

@@ -0,0 +1,21 @@
+import { WorkflowCanvasStrategy } from '../types';
+import { AppDispatch } from '../../store';
+interface UseDataLoadingParams {
+    workflowId?: string;
+    strategy: WorkflowCanvasStrategy;
+    setNodes: (nodes: any) => void;
+    setEdges: (edges: any) => void;
+    fitView: (options?: any) => void;
+    setLoading: (v: boolean) => void;
+    setUnSave: (v: boolean) => void;
+    dispatch: AppDispatch;
+    setFlowOpStatusAction: (status: any) => void;
+    refreshWorkFlowNum: number;
+}
+/**
+ * 数据加载 Hook
+ *
+ * @param params 加载所需的依赖
+ */
+export declare function useDataLoading(params: UseDataLoadingParams): void;
+export {};

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

@@ -0,0 +1,44 @@
+import { WorkflowCanvasStrategy } from '../types';
+import { EngineMode } from '../../enums/workflow';
+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 UseNodeAddCallbackParams {
+    workflowId?: string;
+    strategy: WorkflowCanvasStrategy;
+    store: {
+        getState: () => {
+            nodes: Node[];
+        };
+    };
+    addNodes: (nodes: Node<NodeFactoryData>[]) => void;
+    addEdges: (edges: Edge[]) => void;
+    removeEdges: (edgeIds: string[]) => void;
+    setNodeAddCallback: (callback: (info: NodeAddInfo, nodeType: ActionItem) => void) => void;
+    handleEdgeAddNode: (position: {
+        x: number;
+        y: number;
+    }, edge?: Edge) => void;
+    setNodeConfigVisible: (nodeId: string | null) => void;
+    setNodeFitHumanView: (nodeId: string) => void;
+    saveFlow: () => Promise<void>;
+    engineMode: EngineMode;
+}
+export declare function useNodeAddCallback({ workflowId, strategy, store, addNodes, addEdges, removeEdges, setNodeAddCallback, handleEdgeAddNode, setNodeConfigVisible, setNodeFitHumanView, saveFlow, engineMode, }: UseNodeAddCallbackParams): void;
+export {};

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

@@ -0,0 +1,14 @@
+/**
+ * 节点表单草稿缓存 Hook
+ *
+ * 用于在画布层维护节点配置表单的草稿数据，支持：
+ * - 用户填写部分表单后切换节点，草稿保留
+ * - 回到原节点时自动回填草稿
+ * - 保存成功后清除草稿
+ *
+ * @returns {Object} 缓存操作方法
+ */
+export declare function useNodeFormDraftCache(): {
+    getCachedValues: (nodeId: string) => any;
+    handleValuesChange: (nodeId: string, values: any) => void;
+};