机柜图自动化生成工具开发记录（一）：需求分析与UI原型设计

最新推荐文章于 2025-07-13 00:01:54 发布

原创最新推荐文章于 2025-07-13 00:01:54 发布 · 645 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#自动化 #需求分析 #ui #机柜图 #网络工程

前言

在数据中心的运维管理中，机柜图的制作和维护一直是一个繁琐且容易出错的工作。传统的方式往往需要使用Excel或者专业的CAD软件来手工绘制，不仅效率低下，而且难以保持实时更新。为了解决这个痛点，我决定开发一个专门的机柜图自动化生成工具。

本系列文章将记录整个开发过程，从需求分析到最终的成果发布，希望能为类似项目的开发者提供一些参考。

项目背景与目标

需求分析

通过对数据中心运维人员的调研，我总结出以下几个核心需求：

可视化编辑：能够通过拖拽操作来设计机柜布局，所见即所得
设备库管理：内置常见的服务器、网络设备、存储设备等模板
项目管理：支持多个机房项目的管理，每个项目可以包含多个机柜
数据导入导出：支持从Excel导入设备清单，也能导出标准的机柜图
场景切换：同一个机柜可以有多种配置方案，方便比较选择

目标用户

数据中心运维工程师
机房设计师
IT设备管理员
系统集成商

UI原型设计

设计理念

在设计UI时，我遵循以下几个原则：

简洁直观：界面布局清晰，操作流程符合用户习惯
专业性：符合数据中心行业的专业需求
现代化：采用现代化的设计元素和交互方式
桌面优先：作为PC桌面应用，要充分利用桌面环境的优势

页面架构

基于需求分析，我设计了以下几个核心页面：

1. 项目管理页面（home.html）

在这里插入图片描述

主要功能：

显示项目统计信息（总项目数、机柜数、设备数等）
项目卡片式展示，支持快速预览
新建项目入口
项目筛选和排序功能

关键设计元素：

统计卡片使用不同颜色区分不同指标
项目卡片使用卡片式设计，悬停效果增强交互性
新建项目使用虚线边框的卡片，引导用户操作

2. 可视化编辑器（editor.html）

在这里插入图片描述

这是整个工具的核心页面，采用经典的三栏布局：

左侧设备面板：

按设备类型分类（服务器、网络设备、存储设备、电源设备）
每个设备显示图标和名称
支持拖拽操作

中间画布区：

机柜的可视化表示，42U标准机柜
网格背景帮助对齐
机柜头部显示型号和基本信息
支持设备拖拽放置

右侧属性面板：

机柜基本信息设置
使用统计图表
选中设备的详细属性

3. 机柜管理页面（cabinets.html）

在这里插入图片描述

功能特点：

机柜列表管理
机柜模板库
快速复制和导入功能

4. 设备管理页面（devices.html）

在这里插入图片描述

功能特点：

自定义设备类型
设备参数配置
设备图标管理

5. 导入导出页面（import-export.html）

在这里插入图片描述

功能特点：

Excel模板下载
批量导入设备清单
多格式导出（Excel、PDF、图片）

设计细节

色彩方案

主色调：蓝色系（#1d4ed8），体现专业性和科技感
辅助色：灰色系用于背景和分隔
状态色：绿色表示正常、红色表示警告、黄色表示注意

交互设计

拖拽操作：设备从左侧拖到中间画布
智能吸附：设备自动对齐到机架单元
悬停反馈：所有可交互元素都有悬停效果
快捷键支持：常用操作支持键盘快捷键

响应式考虑

虽然主要面向桌面，但在有限的屏幕空间内也保持良好的可用性：

最小宽度1200px
侧边栏可收缩
工具栏图标和文字在小屏下的自适应

原型制作工具

我选择使用HTML + Tailwind CSS来制作高保真原型，原因如下：

开发友好：原型代码可以直接用于后续开发
交互完整：可以实现真实的交互效果
迭代快速：修改和调整非常方便
标准化：基于Web标准，兼容性好

文件结构

docs/ui/
├── index.html          # 主入口页面
├── home.html           # 项目管理页面
├── editor.html         # 可视化编辑器
├── cabinets.html       # 机柜管理页面
├── devices.html        # 设备管理页面
├── import-export.html  # 导入导出页面
└── settings.html       # 设置页面