# simple-it-management-platform

**Repository Path**: ngcb/simple-it-management-platform

## Basic Information

- **Project Name**: simple-it-management-platform
- **Description**: No description available
- **Primary Language**: NodeJS
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-08-07
- **Last Updated**: 2026-11-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# IT 机房管理平台

基于 Node.js + React 的机房可视化管理系统：机柜 U 位网格展示设备，支持拖拽摆放、弹窗编辑、多机房管理，数据保存在本地 SQLite。

## 功能特性

- 机柜 U 位可视化：设备按 U 位网格渲染，1U/多 U 设备均可显示
- 模糊搜索：顶栏搜索框支持按设备名称 / 带内IP / 带外IP / 负责人 / 所属集群模糊搜索（空格分隔多关键词），命中的设备发光高亮并标记匹配文字，未命中的设备与无机柜自动调暗
- 设备拖拽：支持跨机柜拖拽移动设备，自动校验 U 位冲突
- 抽屉编辑：以右侧抽屉展示设备信息与需求评论，桌面端左右分栏、移动端自动纵向排列
- 设备信息：名称/用途/所属集群/类型/厂商/型号/负责人/CPU/内存/硬盘/其他硬件/管理IP/带外IP/状态/采购时间/架构/序列号/占用U数/功耗/可否共用，支持新增、编辑、删除
- 顶部菜单：机房管理、基础数据、视图菜单与导出按钮集中在单行顶栏
- 画布缩放：自动适应窗口完整展示机柜，支持滚轮以鼠标位置缩放、按住空白处拖动画布，并可一键恢复自适应
- 闲置高亮：通过「视图」菜单一键高亮闲置服务器，其他设备自动置灰，并显示闲置服务器数量
- 架构配色：不同 CPU 架构使用不同颜色的右侧色条区分（x86 / ARM / C86 / MIPS / LoongArch / RISC-V）
- 分类配色：设备块主色固定按设备类型区分（路由器 / 交换机 / 测试仪 / 服务器 / 工控机 / 其他），不再支持自定义类型
- 集群视图：设备增加「所属集群」字段，同集群设备以彩色侧条标识并在机柜间绘制连线，顶部图例可悬停高亮
- 状态标识：闲置 / 故障设备在右上角显示小标签，可共用设备额外显示「共用」标签；设备设为闲置时自动取消共用
- 资产导出：按当前机房导出全部设备 XLSX 清单，游客也可使用
- 多机房管理：每个机房包含若干机柜，机柜总 U 数可配置（1-200U）
- 点击空闲 U 位快速添加设备
- 需求评论：未登录时点击设备即可发表评论记录需求，单台设备支持多条评论并按时间流展示，仅管理员可删除
- 登录权限：未登录只读（设备评论除外），登录后可编辑；默认管理员 `admin`（首次登录免密，强制修改密码）
- 本地持久化：所有数据存入 SQLite（better-sqlite3）

## 技术栈

| 端 | 技术 |
| --- | --- |
| 前端 | React 18 · Vite · AntD 5 |
| 后端 | Node.js · Express 4 · express-session |
| 数据库 | SQLite（better-sqlite3） |

## 快速开始

环境要求：Node.js ≥ 18

```bash
# 1. 安装依赖（服务端 + 前端）
npm run install:all

# 2. 启动后端服务（端口 3011）
npm run start:server

# 3. 另开终端启动前端开发服务（端口 5173，已代理 /api）
npm run dev:web
```

浏览器访问 http://localhost:5173 。

首次启动会自动创建数据库（`server/data/`）并初始化管理员账号 `admin`，同时播种一个演示机房方便体验。

## 生产部署

```bash
# 构建前端产物（输出到 web/dist）
npm run build

# 启动服务，Express 直接托管前端页面
npm run start:server
```

浏览器访问 http://localhost:3011 即可，单进程运行，无需额外部署静态文件。

## 使用说明

- **登录**：点击右上角「登录」，账号 `admin`，首次登录密码留空，登录后会被强制要求修改密码
- **只读模式**：未登录时可在设备抽屉中查看完整信息（含 CPU / 内存 / 硬盘 / 其他硬件 / 可否共用等）并发表评论，无法拖拽或编辑
- **需求评论**：未登录也可点击设备，在设备抽屉右侧填写并发表评论（移动端位于设备信息下方）；评论按时间顺序展示，管理员登录后可删除评论
- **拖拽设备**：登录后按住设备拖动到目标 U 位，绿色高亮表示位置有效，松手完成移动
- **画布操作**：滚轮以鼠标位置为中心缩放，按住空白处拖动画布；右下角提供放大、缩小和「自适应」按钮
- **添加设备**：登录后点击空闲 U 位，或在机柜区域点击「添加机柜」新建机柜
- **设备类型**：固定为路由器 / 交换机 / 测试仪 / 服务器 / 工控机 / 其他六种，颜色固定，不支持自定义类型
- **闲置高亮**：点击「视图 → 高亮闲置服务器」，闲置服务器会高亮，其他设备自动置灰；再次点击或关闭顶部提示标签可恢复
- **所属集群**：编辑设备时填写「所属集群」，同集群设备会显示相同颜色的左侧色条，机柜之间用彩色曲线连接；顶部图例可悬停高亮对应集群
- **导出清单**：点击顶栏「导出 XLSX」，导出当前机房全部设备资产清单；游客也可使用

## 项目结构

```
├── server/            # 后端（Express API + SQLite）
│   ├── index.js       # 路由与业务逻辑
│   └── db.js          # 数据库初始化与迁移
├── web/               # 前端（React + Vite + AntD）
│   └── src/
│       ├── App.jsx            # 主界面与状态管理
│       ├── components/        # 弹窗与机柜视图组件
│       └── types.js           # 设备类型/状态/架构常量
└── package.json       # 根脚本（install/start/build）
```

## 数据备份

所有数据保存在 `server/data/it-room.db`，备份该文件即可；数据库已加入 `.gitignore`，不会提交到仓库。