React DCIM

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

特性

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

安装

npm install react-dcim
# 或
pnpm add react-dcim
# 或
yarn add react-dcim

依赖

React DCIM 需要以下 peer dependencies：

npm install react react-dom reactflow

快速开始

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 (
    <div style={{ width: '100vw', height: '100vh' }}>
      <DCIMCanvas
        initialNodes={initialNodes}
        initialEdges={initialEdges}
        onNodeClick={(event, node) => console.log('Node clicked:', node)}
        onEdgeClick={(event, edge) => console.log('Edge clicked:', edge)}
        theme="dark"
        showMiniMap={true}
        showControls={true}
        showBackground={true}
      />
    </div>
  );
};

export default App;

API 文档

DCIMCanvas

主要的 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 | 是否显示背景网格 |

节点类型

ItemType

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

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

节点数据结构

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;          // 设备类型
}

连接类型

PortConnectionEdge

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

连接数据结构

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

AI 功能

GeminiService

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

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

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

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

高级用法

自定义节点

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

import { ReactFlow, NodeTypes } from 'reactflow';

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

<DCIMCanvas
  nodeTypes={customNodeTypes}
  initialNodes={nodes}
  initialEdges={edges}
/>

主题定制

您可以通过 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 组件库。

开发

本地开发

# 克隆仓库
git clone https://github.com/your-username/react-dcim.git
cd react-dcim

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建库
pnpm build:lib

# 运行示例
pnpm example

脚本

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

贡献

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

许可证

MIT License

更新日志

v1.0.0

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