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

前言

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

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

项目背景与目标

需求分析

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

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

目标用户

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

UI原型设计

设计理念

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

1. 简洁直观
   ：界面布局清晰，操作流程符合用户习惯
2. 专业性
   ：符合数据中心行业的专业需求
3. 现代化
   ：采用现代化的设计元素和交互方式
4. 桌面优先
   ：作为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来制作高保真原型，原因如下：

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

文件结构

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

用户体验优化

工作流程设计

1. 新用户引导
   ：首次使用时提供简单的向导
2. 模板机制
   ：提供常见的机柜配置模板
3. 操作反馈
   ：每个操作都有明确的视觉反馈
4. 撤销重做
   ：支持操作的撤销和重做

性能考虑

1. 虚拟滚动
   ：设备列表采用虚拟滚动，支持大量设备
2. 懒加载
   ：项目列表采用懒加载，提高启动速度
3. 本地缓存
   ：常用数据本地缓存，减少重复加载

技术预研

在UI设计过程中，我同时进行了技术预研，确定了以下技术栈：

• 前端框架
  ：React + TypeScript
• 桌面框架
  ：Electron
• 样式方案
  ：Tailwind CSS
• 图标库
  ：Font Awesome
• 构建工具
  ：Vite
• 状态管理
  ：React内置状态管理

小结

UI原型设计是整个项目的基础，好的原型设计能够：

1. 明确需求
   ：通过可视化的方式确认功能需求
2. 提高效率
   ：减少开发过程中的反复修改
3. 改善体验
   ：提前发现和解决用户体验问题
4. 降低成本
   ：在编码前解决大部分设计问题