React DCIM

一个基于 React 和 React Flow 的数据中心基础设施管理 (DCIM) 组件库，用于可视化和管理机房设备、机架和网络连接。

特性

- 🖥️ 可视化数据中心布局，包括区域、机架和设备
- 🔗 设备间网络连接的可视化表示
- 🎨 支持明暗主题切换
- 📱 响应式设计，支持移动设备
- ⚡ 基于 React Flow 的高性能渲染
- 🤖 集成 AI 功能，支持智能布局和数据分析
- 🧩 模块化设计，易于扩展和定制

安装

``bash
npm install react-dcim


或

pnpm add react-dcim

或

yarn add react-dcim
`

依赖

React DCIM 需要以下 peer dependencies：

`bash
npm install react react-dom reactflow
`

快速开始

`tsx
import React from 'react';
import DCIMCanvas, { ItemType } from 'react-dcim';

const App = () => {
// 定义初始节点
const initialNodes = [
{
id: 'zone-1',
type: ItemType.ZONE,
position: { x: 100, y: 100 },
data: { label: 'Primary Zone', width: 800, height: 600 },
},
{
id: 'rack-1',
type: ItemType.RACK,
position: { x: 200, y: 200 },
data: { label: 'Rack A1', totalU: 42 },
parentId: 'zone-1',
},
{
id: 'server-1',
type: ItemType.SERVER,
position: { x: 20, y: 20 },
data: {
label: 'Web Server 01',
uHeight: 2,
status: 'active',
model: 'Dell R740',
ip: '192.168.1.10'
},
parentId: 'rack-1',
},
];

// 定义初始连接
const initialEdges = [
{
id: 'edge-1',
source: 'server-1',
target: 'server-2',
type: 'portConnection',
data: { sourcePort: 'eth0', targetPort: 'eth0' },
},
];

return (


);
};

export default App;
`

API 文档

$3

主要的 DCIM 画布组件，用于渲染数据中心布局。

#### 属性

| 属性 | 类型 | 默认值 | 描述 |
|------|------|--------|------|
| initialNodes | Node[] | [] | 初始节点数据 |
| initialEdges | Edge[] | [] | 初始连接数据 |
| onNodeClick | (event: MouseEvent, node: Node) => void | - | 节点点击事件处理函数 |
| onEdgeClick | (event: MouseEvent, edge: Edge) => void | - | 连接点击事件处理函数 |
| onNodeDragStop | (event: MouseEvent, node: Node) => void | - | 节点拖拽结束事件处理函数 |
| theme | 'light' \| 'dark' | 'light' | 主题设置 |
| showMiniMap | boolean | true | 是否显示小地图 |
| showControls | boolean | true | 是否显示控制按钮 |
| showBackground | boolean | true | 是否显示背景网格 |

$3

#### ItemType

枚举类型，定义了支持的节点类型：

- ZONE - 数据中心区域
- RACK - 机架
- SERVER - 服务器
- NETWORK - 网络设备
- STORAGE - 存储设备
- PDU - 电源分配单元
- UPS - 不间断电源

#### 节点数据结构

`typescript
interface NodeData {
label: string; // 节点标签
description?: string; // 节点描述
status?: string; // 节点状态
model?: string; // 设备型号
ip?: string; // IP 地址
assetId?: string; // 资产 ID
// 其他设备特定属性...
}

interface ZoneData extends NodeData {
width: number; // 区域宽度
height: number; // 区域高度
}

interface RackData extends NodeData {
totalU: number; // 机架总 U 数
}

interface ServerData extends NodeData {
uHeight: number; // 设备高度 (U)
type: ItemType; // 设备类型
}
`

$3

#### PortConnectionEdge

用于表示设备间网络连接的边组件。

#### 连接数据结构

`typescript
interface EdgeData {
sourcePort: string; // 源端口
targetPort: string; // 目标端口
color?: string; // 连接线颜色
}
`

$3

#### GeminiService

提供 AI 功能的服务类，用于数据中心分析和布局生成。

`typescript
import { analyzeDataCenter, generateLayout } from 'react-dcim';

// 分析数据中心
const analysis = await analyzeDataCenter(nodes, edges, apiKey);

// 生成布局
const layout = await generateLayout(description, apiKey);
`

高级用法

$3

您可以通过注册自定义节点来扩展 DCIM 组件：

`tsx
import { ReactFlow, NodeTypes } from 'reactflow';

const customNodeTypes: NodeTypes = {
customServer: CustomServerNode,
};

nodeTypes={customNodeTypes}
initialNodes={nodes}
initialEdges={edges}
/>
`

$3

您可以通过 CSS 变量自定义主题：

`css
:root {
--dcim-bg-color: #f8f9fa;
--dcim-text-color: #333;
--dcim-border-color: #ddd;
--dcim-node-bg: #fff;
--dcim-selected-color: #007bff;
}

[data-theme="dark"] {
--dcim-bg-color: #1a1a1a;
--dcim-text-color: #f8f9fa;
--dcim-border-color: #444;
--dcim-node-bg: #2d2d2d;
--dcim-selected-color: #0d6efd;
}
`

示例项目

查看 example 目录中的完整示例项目，了解如何使用 React DCIM 组件库。

开发

$3

`bash


克隆仓库

git clone https://github.com/your-username/react-dcim.git
cd react-dcim

安装依赖

pnpm install

启动开发服务器

pnpm dev

构建库

pnpm build:lib

运行示例

pnpm example
`

$3

- pnpm dev - 启动开发服务器
- pnpm build - 构建应用程序
- pnpm build:lib - 构建库
- pnpm example - 运行示例项目
- pnpm lint - 运行 ESLint
- pnpm type-check` - 运行类型检查

贡献

欢迎贡献代码！请提交 Pull Request 或创建 Issue。

许可证

MIT License

更新日志

$3

- 初始版本发布
- 支持基本的 DCIM 功能
- 集成 AI 功能
- 支持明暗主题切换