@digitalsee-ai/rcs 0.0.14

package/README.md

@@ -0,0 +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>

package/dist/components/digitalsee/JsonRenderer/index.d.ts

@@ -0,0 +1,22 @@
+import { default as React } from 'react';
+export interface JsonNode {
+    key: string;
+    value: any;
+    type: 'object' | 'array' | 'string' | 'number' | 'boolean' | 'null';
+    path: string[];
+    level: number;
+    isCollapsed?: boolean;
+    parent?: JsonNode;
+    children?: JsonNode[];
+}
+export interface JsonRendererProps {
+    data?: string | object;
+    height?: number;
+    enableCopy?: boolean;
+    theme?: 'light' | 'dark';
+    className?: string;
+    locale?: 'zh' | 'en';
+    maxHeight?: number;
+}
+declare const JsonRenderer: React.FC<JsonRendererProps>;
+export default JsonRenderer;

package/dist/components/digitalsee/JsonRenderer/locales/en.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    copy: string;
+    copySuccess: string;
+    download: string;
+    invalidJson: string;
+};
+export default _default;

package/dist/components/digitalsee/JsonRenderer/locales/zh.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    copy: string;
+    copySuccess: string;
+    download: string;
+    invalidJson: string;
+};
+export default _default;

package/dist/components/digitalsee/index.d.ts

@@ -0,0 +1 @@
+export * from './workflow';

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

@@ -0,0 +1,44 @@
+import { default as React, ReactEventHandler } from 'react';
+export interface ToolbarPanelProps {
+    /**
+     * 打开节点选择面板的回调
+     */
+    onOpenNodeSelector?: (e: ReactEventHandler) => void;
+    /**
+     * 添加便签节点的回调
+     */
+    onAddNoteNode?: () => void;
+    /**
+     * 整理画布的回调
+     */
+    onTidyCanvas?: () => void;
+    /**
+     * Panel 组件的样式
+     */
+    panelStyle?: React.CSSProperties;
+    /**
+     * 按钮的样式
+     */
+    buttonStyle?: React.CSSProperties;
+    /**
+     * 危险按钮的样式（整理按钮）
+     */
+    dangerButtonStyle?: React.CSSProperties;
+    /**
+     * 是否显示整理按钮
+     */
+    showTidyButton?: boolean;
+    /**
+     * 自定义按钮配置
+     */
+    buttons?: Array<{
+        key: string;
+        title: string;
+        icon: React.ReactNode;
+        onClick: () => void;
+        danger?: boolean;
+        visible?: boolean;
+    }>;
+}
+declare const FastOperationButtons: React.FC<ToolbarPanelProps>;
+export default FastOperationButtons;

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

@@ -0,0 +1,3 @@
+export declare const FullscreenLoading: import('react').MemoExoticComponent<({ loading }: {
+    loading: boolean;
+}) => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1 @@
+export declare const GlobalSvg: import('react').MemoExoticComponent<() => import("react/jsx-runtime").JSX.Element>;

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

@@ -0,0 +1,8 @@
+export type HelperLinesProps = {
+    horizontal?: number;
+    vertical?: number;
+};
+export declare const useHelperLines: () => void;
+declare function HelperLinesRenderer({ horizontal, vertical }: HelperLinesProps): import("react/jsx-runtime").JSX.Element;
+declare const _default: import('react').MemoExoticComponent<typeof HelperLinesRenderer>;
+export default _default;

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

@@ -0,0 +1,3 @@
+import { MiniMap as NativeMiniMap } from '@xyflow/react';
+import { ComponentProps } from 'react';
+export default function MiniMap<T extends ComponentProps<typeof NativeMiniMap> = any>(props: T): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,15 @@
+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）模式
+ */
+declare const WorkflowCanvas: React.FC<WorkflowCanvasProps>;
+export default WorkflowCanvas;

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

@@ -0,0 +1,15 @@
+import { default as React } from 'react';
+import { CanvasAPI } from '../types/engine';
+interface WorkflowCanvasHeaderProps {
+    onSave?: () => void;
+    readOnly?: boolean;
+    unSave?: boolean;
+    preview?: boolean;
+    appFlowMode?: boolean;
+    autoSaveStatus?: 'idle' | 'saving' | 'saved' | 'error';
+    lastSavedTime?: string;
+    /** 画布对外 API，用于工具栏按钮回调 */
+    canvasApi?: CanvasAPI;
+}
+declare const WorkflowCanvasHeader: React.FC<WorkflowCanvasHeaderProps>;
+export default WorkflowCanvasHeader;

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

@@ -0,0 +1,28 @@
+import { Edge, Node } from '@xyflow/react';
+import { default as React } from 'react';
+/**
+ * 调试面板属性
+ */
+export interface WorkflowDebugPanelProps {
+    /**
+     * 是否可见
+     */
+    visible: boolean;
+    /**
+     * 当前节点列表
+     */
+    nodes: Node[];
+    /**
+     * 当前连线列表
+     */
+    edges: Edge[];
+    /**
+     * 关闭面板回调
+     */
+    onClose: () => void;
+}
+/**
+ * 画布节点/连线调试面板
+ */
+declare const WorkflowDebugPanel: React.FC<WorkflowDebugPanelProps>;
+export default WorkflowDebugPanel;

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

@@ -0,0 +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";

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

@@ -0,0 +1,8 @@
+import { Node, NodePositionChange, XYPosition } from '@xyflow/react';
+type GetHelperLinesResult = {
+    horizontal?: number;
+    vertical?: number;
+    snapPosition: Partial<XYPosition>;
+};
+export declare function getHelperLines(change: NodePositionChange, nodes: Node[], distance?: number): GetHelperLinesResult;
+export {};

package/dist/components/digitalsee/workflow/Edges/BaseEdge.d.ts

@@ -0,0 +1,30 @@
+import { EdgeProps } from '@xyflow/react';
+import { default as React, ReactNode } from 'react';
+declare enum ConnectionType {
+    Main = "main",
+    NonMain = "nonMain"
+}
+interface CustomEdgeProps extends EdgeProps {
+    color?: string;
+    labelBgColor?: string;
+    animated?: boolean;
+    className?: string;
+    data?: {
+        label?: ReactNode;
+        connectionType?: ConnectionType;
+        isHovered?: boolean;
+        isLoopEdge?: boolean;
+        undeletable?: boolean;
+        onAddNode?: (position: {
+            x: number;
+            y: number;
+        }, edge?: any) => void;
+        onDelete?: (id: string) => void;
+        onMouseEnter?: (id: string) => void;
+        onMouseLeave?: (id: string) => void;
+    };
+    target: string;
+    targetHandle: string;
+}
+declare const BaseEdge: React.FC<CustomEdgeProps>;
+export default BaseEdge;

package/dist/components/digitalsee/workflow/Handles/CustomHandle.d.ts

@@ -0,0 +1,30 @@
+import { Connection, HandleType as FlowHandleType, Position, IsValidConnection as ReactFlowIsValidConnection } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeStatus } from '../types/Node';
+type HandleStatus = 'default' | 'connected' | 'connecting' | 'error';
+type HandleCategory = 'main' | 'secondary' | 'slave';
+interface CustomHandleProps {
+    type: FlowHandleType;
+    id: string;
+    nodeId: string;
+    position?: Position;
+    style?: React.CSSProperties;
+    isValidConnection?: ReactFlowIsValidConnection;
+    onConnect?: (params: Connection) => void;
+    label?: string | React.ReactNode;
+    status?: HandleStatus;
+    nodeStatus?: NodeStatus;
+    category?: HandleCategory;
+    connectionLimit?: number;
+    showConnectionCount?: boolean;
+    square?: boolean;
+    shape?: 'square' | 'circle' | 'rhombus';
+    protocol?: string;
+}
+/**
+ * @description 自定义连接桩组件，统一输出 11×11px 菱形桩点并同步节点状态色。
+ * @param {CustomHandleProps} props 连接桩配置参数，包含节点信息、协议限制及标签等。
+ * @returns {JSX.Element} 渲染后的连接桩 JSX。
+ */
+declare const CustomHandle: React.FC<CustomHandleProps>;
+export default CustomHandle;

package/dist/components/digitalsee/workflow/Handles/HandleFactory.d.ts

@@ -0,0 +1,35 @@
+import { Position } from '@xyflow/react';
+/**
+ * 连接点工厂类，用于创建输入和输出连接点
+ */
+declare class HandleFactory {
+    /**
+     * 创建输入连接点
+     * @param id 连接点ID
+     * @param position 连接点位置
+     * @param props 其他属性
+     */
+    static createInputHandle(id: string, position?: Position, props?: {}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * 创建输出连接点
+     * @param id 连接点ID
+     * @param position 连接点位置
+     * @param props 其他属性
+     */
+    static createOutputHandle(id: string, position?: Position, props?: {}): import("react/jsx-runtime").JSX.Element;
+    /**
+     * 创建多个输入连接点
+     * @param count 连接点数量
+     * @param position 连接点位置
+     * @param props 其他属性
+     */
+    static createInputHandles(count: number, position?: Position, props?: {}): import("react/jsx-runtime").JSX.Element[];
+    /**
+     * 创建多个输出连接点
+     * @param count 连接点数量
+     * @param position 连接点位置
+     * @param props 其他属性
+     */
+    static createOutputHandles(count: number, position?: Position, props?: {}): import("react/jsx-runtime").JSX.Element[];
+}
+export default HandleFactory;

package/dist/components/digitalsee/workflow/Handles/InputHandle.d.ts

@@ -0,0 +1,12 @@
+import { Position } from '@xyflow/react';
+import { default as React } from 'react';
+interface InputHandleProps {
+    id?: string;
+    position?: Position;
+    style?: React.CSSProperties;
+    isConnectable?: boolean;
+    isValidConnection?: (connection: any) => boolean;
+    onConnect?: (params: any) => void;
+}
+declare const InputHandle: React.FC<InputHandleProps>;
+export default InputHandle;

package/dist/components/digitalsee/workflow/Handles/OutputHandle.d.ts

@@ -0,0 +1,12 @@
+import { Position } from '@xyflow/react';
+import { default as React } from 'react';
+interface OutputHandleProps {
+    id?: string;
+    position?: Position;
+    style?: React.CSSProperties;
+    isConnectable?: boolean;
+    isValidConnection?: (connection: any) => boolean;
+    onConnect?: (params: any) => void;
+}
+declare const OutputHandle: React.FC<OutputHandleProps>;
+export default OutputHandle;

package/dist/components/digitalsee/workflow/Handles/OutputHandleWithButton.d.ts

@@ -0,0 +1,15 @@
+import { Connection, Position } from '@xyflow/react';
+import { default as React } from 'react';
+interface OutputHandleWithButtonProps {
+    id: string;
+    nodeId: string;
+    position?: Position;
+    style?: React.CSSProperties;
+    isConnectable?: boolean;
+    className?: string;
+    isValidConnection?: (connection: Connection) => boolean;
+    onConnect?: (params: Connection) => void;
+    onButtonClick?: (nodeId: string, handleId: string) => void;
+}
+declare const OutputHandleWithButton: React.FC<OutputHandleWithButtonProps>;
+export default OutputHandleWithButton;

package/dist/components/digitalsee/workflow/Nodes/AISubNode.d.ts

@@ -0,0 +1,9 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+/**
+ * @description AI 子节点，渲染垂直布局下的 300×72px 卡片样式。
+ * @param {NodeProps} props React Flow 传入的节点参数。
+ * @returns {JSX.Element} 渲染后的节点。
+ */
+declare const AISubNode: React.FC<NodeProps>;
+export default AISubNode;

package/dist/components/digitalsee/workflow/Nodes/ActionNode.d.ts

@@ -0,0 +1,13 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeStatus } from '../types/Node';
+interface ActionNodeProps extends NodeProps {
+    status?: NodeStatus;
+}
+/**
+ * @description 动作节点，呈现普通执行节点的卡片布局与状态色。
+ * @param {ActionNodeProps} props React Flow 节点与状态属性。
+ * @returns {JSX.Element} 渲染后的动作节点。
+ */
+declare const ActionNode: React.FC<ActionNodeProps>;
+export default ActionNode;

package/dist/components/digitalsee/workflow/Nodes/AgentNode.d.ts

@@ -0,0 +1,10 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeData } from '../types/Node';
+/**
+ * @description Agent 节点，包含底部三个菱形子插槽与主输出。
+ * @param {NodeProps<NodeData>} props React Flow 代理节点参数。
+ * @returns {JSX.Element} 渲染后的 Agent 节点。
+ */
+declare const AgentNode: React.FC<NodeProps<NodeData>>;
+export default AgentNode;

package/dist/components/digitalsee/workflow/Nodes/BrowserNode.d.ts

@@ -0,0 +1,10 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeData } from '../types/Node';
+/**
+ * @description 浏览器节点，提供模型接入与右侧主输出的卡片布局。
+ * @param {NodeProps<NodeData>} props React Flow 浏览器节点参数。
+ * @returns {JSX.Element} 渲染后的浏览器节点。
+ */
+declare const BrowserNode: React.FC<NodeProps<NodeData>>;
+export default BrowserNode;

package/dist/components/digitalsee/workflow/Nodes/BuiltinMCPNode.d.ts

@@ -0,0 +1,9 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+/**
+ * @description 内置 MCP 节点，显示自定义协议输出的子节点卡片。
+ * @param {NodeProps} props React Flow 节点参数。
+ * @returns {JSX.Element} 渲染后的 MCP 子节点。
+ */
+declare const AISubNode: React.FC<NodeProps>;
+export default AISubNode;

package/dist/components/digitalsee/workflow/Nodes/ConditionNode.d.ts

@@ -0,0 +1,13 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeStatus } from '../types/Node';
+interface ConditionNodeProps extends NodeProps {
+    status?: NodeStatus;
+}
+/**
+ * @description 条件节点，左入右出两路，使用统一卡片视觉呈现条件分支。
+ * @param {ConditionNodeProps} props React Flow 条件节点参数。
+ * @returns {JSX.Element} 渲染后的条件节点。
+ */
+declare const ConditionNode: React.FC<ConditionNodeProps>;
+export default ConditionNode;

package/dist/components/digitalsee/workflow/Nodes/CustomNode.d.ts

@@ -0,0 +1,15 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+import { NodeData } from '../types/Node';
+/**
+ * 自定义节点组件
+ *
+ * 该组件演示了如何使用isHovered属性来改变节点的外观
+ */
+/**
+ * @description 自定义示例节点，通过悬停与选中状态演示样式覆盖。
+ * @param {NodeProps<NodeData>} props React Flow 节点与数据。
+ * @returns {JSX.Element} 自定义节点 JSX。
+ */
+declare const CustomNode: React.MemoExoticComponent<({ data, id, selected }: NodeProps<NodeData>) => import("react/jsx-runtime").JSX.Element>;
+export default CustomNode;

package/dist/components/digitalsee/workflow/Nodes/LoopNode.d.ts

@@ -0,0 +1,4 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+declare const _default: React.NamedExoticComponent<NodeProps>;
+export default _default;

package/dist/components/digitalsee/workflow/Nodes/MCPServerNode.d.ts

@@ -0,0 +1,9 @@
+import { NodeProps } from '@xyflow/react';
+import { default as React } from 'react';
+/**
+ * @description MCP Server 节点，承载顶部输入的服务节点卡片。
+ * @param {NodeProps} props React Flow 节点参数。
+ * @returns {JSX.Element} 渲染后的 MCP Server 节点。
+ */
+declare const AISubNode: React.FC<NodeProps>;
+export default AISubNode;