jch-config-editor 0.1.0

package/README.md

@@ -0,0 +1,260 @@
+# Config Editor (组态编辑器)
+
+[![npm version](https://badge.fury.io/js/@yourscope%2Fconfig-editor.svg)](https://badge.fury.io/js/@yourscope%2Fconfig-editor)
+[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)
+
+一个基于 React 的可视化组态编辑器，适用于 SCADA、工业控制系统和数据可视化场景。
+
+## ✨ 特性
+
+- 🎨 **可视化编辑** - 拖拽物料、调整属性、实时预览
+- 📦 **丰富物料库** - 内置基础形状、设备图标、文本、线条等
+- 🔧 **状态系统** - 支持基于表达式的状态切换
+- 🎯 **精确控制** - 位置、尺寸、样式精细调整
+- 💾 **导入导出** - JSON 格式的 scheme 导入导出
+- 🔍 **画布操作** - 缩放、平移、网格对齐
+- ↩️ **历史记录** - 撤销/重做支持
+- 📱 **响应式设计** - 适配不同屏幕尺寸
+- 🔌 **易于集成** - 作为 React 组件轻松嵌入现有项目
+
+## 🚀 安装
+
+```bash
+npm install @yourscope/config-editor
+# 或
+yarn add @yourscope/config-editor
+# 或
+pnpm add @yourscope/config-editor
+```
+
+### 对等依赖
+
+确保你的项目已安装以下依赖：
+
+```bash
+npm install react react-dom antd @ant-design/icons
+```
+
+## 📖 使用方法
+
+### 基础用法
+
+```tsx
+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;
+```
+
+### 带初始数据
+
+```tsx
+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;
+```
+
+### 监听变化
+
+```tsx
+const App = () => {
+  const handleChange = (scheme: SchemeJSON) => {
+    console.log('当前 scheme:', scheme);
+    // 保存到服务器或本地存储
+  };
+
+  return (
+    <div style={{ height: '100vh' }}>
+      <ConfigEditor onChange={handleChange} />
+    </div>
+  );
+};
+```
+
+### 只读预览模式
+
+```tsx
+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` | - | 自定义样式 |
+
+### 类型定义
+
+```typescript
+// 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/                       # 构建输出
+```
+
+## 🛠️ 开发
+
+```bash
+# 克隆项目
+git clone https://github.com/yourusername/config-editor.git
+cd config-editor
+
+# 安装依赖
+pnpm install
+
+# 启动开发服务器
+pnpm dev
+
+# 构建库
+pnpm build
+```
+
+## 📦 发布到 npm
+
+```bash
+# 构建项目
+pnpm build
+
+# 登录 npm
+npm login
+
+# 发布
+npm publish --access public
+```
+
+## 📄 协议
+
+[MIT](LICENSE) © Your Name

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

@@ -0,0 +1,4 @@
+import React from "react";
+export declare const Canvas: React.FC<{
+    defaultTestData?: any;
+}>;