Config Editor (组态编辑器)

一个基于 React 的可视化组态编辑器，适用于 SCADA、工业控制系统和数据可视化场景。

✨ 特性

• 🎨 可视化编辑 - 拖拽物料、调整属性、实时预览
• 📦 丰富物料库 - 内置基础形状、设备图标、文本、线条等
• 🔧 状态系统 - 支持基于表达式的状态切换
• 🎯 精确控制 - 位置、尺寸、样式精细调整
• 💾 导入导出 - JSON 格式的 scheme 导入导出
• 🔍 画布操作 - 缩放、平移、网格对齐
• ↩️ 历史记录 - 撤销/重做支持
• 📱 响应式设计 - 适配不同屏幕尺寸
• 🔌 易于集成 - 作为 React 组件轻松嵌入现有项目

🚀 安装

npm install @yourscope/config-editor
# 或
yarn add @yourscope/config-editor
# 或
pnpm add @yourscope/config-editor

对等依赖

确保你的项目已安装以下依赖：

npm install react react-dom antd @ant-design/icons

📖 使用方法

基础用法

import React from 'react';
import { ConfigEditor } from '@yourscope/config-editor';
import '@yourscope/config-editor/style.css';

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <ConfigEditor />
    </div>
  );
};

export default App;

样式隔离说明

Config Editor 采用 CSS Modules 技术实现样式隔离，不会污染全局样式：

• ✅ 所有组件样式通过 CSS Modules scoped 到组件内部
• ✅ 不再使用 * { margin: 0 } 等全局重置
• ✅ 不再修改全局 body、html 样式
• ✅ 滚动条样式仅作用于组件内部

注意：你仍需引入样式文件，但不用担心会影响项目其他部分：

// 样式已自动隔离，安全引入
import '@yourscope/config-editor/style.css';

按需引入样式（可选）

如果你希望更精细地控制样式加载，可以只引入基础 Tailwind 样式：

// 仅引入 Tailwind 基础样式（如果你项目已有 Tailwind，可跳过）
import '@yourscope/config-editor/dist/tailwind.css';

// 组件样式会自动通过 CSS Modules 加载
import { ConfigEditor } from '@yourscope/config-editor';

带初始数据

import React from 'react';
import { ConfigEditor } from '@yourscope/config-editor';
import type { SchemeJSON } from '@yourscope/config-editor';

const initialScheme: SchemeJSON = {
  version: '1.0.0',
  nodes: [
    {
      id: 'node-1',
      name: '泵1',
      normalStyle: {
        width: 80,
        height: 80,
        x: 100,
        y: 100,
        background: 'transparent',
      },
      contentInfo: {
        children: [
          {
            id: 'material-1',
            name: '泵',
            type: 'IMAGE',
            src: 'data:image/svg+xml,...',
          },
        ],
        statusList: [
          {
            id: 'status-1',
            name: '运行中',
            expression: 'return data?.running === true;',
            style: { filter: 'brightness(1.2)' },
          },
        ],
        bindCode: 'pump1',
      },
      controlInfo: {
        isDraggable: true,
        isClickable: true,
      },
    },
  ],
  materials: [],
  viewport: { scale: 1, positionX: 0, positionY: 0 },
  metadata: { name: '示例组态' },
};

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <ConfigEditor initialScheme={initialScheme} />
    </div>
  );
};

export default App;

监听变化

const App = () => {
  const handleChange = (scheme: SchemeJSON) => {
    console.log('当前 scheme:', scheme);
    // 保存到服务器或本地存储
  };

  return (
    <div style={{ height: '100vh' }}>
      <ConfigEditor onChange={handleChange} />
    </div>
  );
};

只读预览模式

const App = () => {
  return (
    <div style={{ height: '100vh' }}>
      <ConfigEditor 
        initialScheme={schemeData}
        readonly={true}
        showMaterialPanel={false}
        showPropertyPanel={false}
      />
    </div>
  );
};

🔧 API

ConfigEditor Props

| 属性 | 类型 | 默认值 | 说明 | |------|------|--------|------| | initialScheme | SchemeJSON | - | 初始 scheme 数据 | | onChange | (scheme: SchemeJSON) => void | - | scheme 变化回调 | | readonly | boolean | false | 是否只读模式 | | showHeader | boolean | true | 是否显示头部 | | showMaterialPanel | boolean | true | 是否显示物料面板 | | showPropertyPanel | boolean | true | 是否显示属性面板 | | customMaterials | Material[] | - | 自定义物料列表 | | headerExtra | React.ReactNode | - | 头部自定义内容 | | className | string | - | 自定义类名 | | style | React.CSSProperties | - | 自定义样式 |

类型定义

// Scheme JSON 结构
interface SchemeJSON {
  version: string;
  nodes: Node[];
  materials: Material[];
  viewport: ViewportState;
  metadata?: {
    name?: string;
    description?: string;
    createdAt?: string;
    updatedAt?: string;
  };
}

// 节点
interface Node {
  id: string;
  name: string;
  normalStyle: NodeStyle;
  contentInfo: ContentInfo;
  controlInfo: ControlInfo;
}

// 物料
interface Material {
  id: string;
  name: string;
  type: 'IMAGE' | 'TEXT' | 'LINE' | 'CUSTOM';
  // ... 根据类型不同有更多属性
}

📁 项目结构

config-editor/
├── src/
│   ├── components/
│   │   ├── ConfigEditor/      # 主编辑器组件
│   │   ├── MaterialPanel/     # 物料库面板
│   │   ├── Canvas/            # 画布编辑器
│   │   ├── PropertyPanel/     # 属性面板
│   │   └── NodeRenderer/      # 节点渲染器
│   ├── store/
│   │   └── editorStore.ts     # Zustand 状态管理
│   ├── types/
│   │   └── index.ts           # TypeScript 类型定义
│   ├── utils/
│   │   └── initData.ts        # 初始化数据
│   ├── index.ts               # 库入口
│   └── index.css              # 样式
├── examples/                   # 使用示例
└── dist/                       # 构建输出

🛠️ 开发

# 克隆项目
git clone https://github.com/jchzhang/low-code-plant.git
cd config-editor

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库
pnpm build

📦 发布到 npm

# 构建项目
pnpm build

# 登录 npm
npm login

# 发布
npm publish --access public

📄 协议

MIT © Jch