@digitalsee/rcs

数犀 React 组件库

为数犀内部提供跨工程运行的React组件服务

📦 安装

使用 pnpm（推荐）:

pnpm add @digitalsee/rcs

使用 npm:

npm install @digitalsee/rcs

使用 yarn:

yarn add @digitalsee/rcs

✨ 特性

• 🎨 工作流编辑器 - 基于 ReactFlow 的强大可视化工作流编辑器
• 📊 数据可视化 - 内置 JSON 渲染器和数据展示组件
• 🌍 国际化支持 - 内置中文（简体/繁体）和英文支持
• 🎯 TypeScript - 完整的 TypeScript 类型支持
• 🔧 可定制 - 灵活的配置和主题定制
• ⚡ 高性能 - 优化的渲染性能和内存使用
• 📱 响应式 - 适配各种屏幕尺寸

🚀 快速开始

基础使用

import { Workflow } from '@digitalsee/rcs';
import '@digitalsee/rcs/styles.css';

function App() {
  return (
    <Workflow
      workflowId="my-workflow"
      // 更多配置项...
    />
  );
}

使用 JsonRenderer

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

开发命令

# 安装依赖
pnpm install

# 启动 Storybook 开发环境
pnpm dev

# 构建组件库
pnpm build:vite

# 运行测试
pnpm test

# 代码格式化
pnpm format

# 代码检查
pnpm lint

构建输出

# 构建并发布新版本
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

🌐 国际化

组件库内置多语言支持：

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)

📝 版本管理

# 补丁版本 (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 进行代码检查和格式化：

pnpm format  # 自动格式化代码
pnpm lint    # 检查代码问题

🔗 相关链接

• 数犀官网