过去，我们用 Excel、Visio 或 CAD 画机房平面图：
改一台机位→重新截图→重新标注→ 再发邮件。
如今，一个 不到 200 KB 的 Vue3 组件——Grid Plan v2.0——把“画蓝图”卷进了浏览器，还把图纸 直接立了起来！
Grid Plan 是什么？
一句话：
Grid Plan 是一个轻量级 Vue3 组件，用来实时绘制并交互式管理“网格蓝图”——从房间、机柜到数据中心，都能秒级可视化。
“如果
2D是工程师的语言，那么3D就是决策者的母语。”
——Graphieros团队在v2.0发布公告里这样说。
| 亮点 | 一句话说明 |
|---|---|
| 2D/3D 一键切换 | 同一套数据，实时生成可旋转、缩放的 3D 视图 |
| 完全可插拔 | 8 个插槽 + BEM 类名，样式和 UI 想怎么改就怎么改 |
| 事件驱动 | 增删改选全部通过事件抛回，业务逻辑零侵入 |
| TypeScript 零配置 | 所有类型开箱即用，IDE 自动补全 |
30 秒跑通 Demo
- 克隆 & 启动
git clone https://github.com/graphieros/grid-plan.git
cd grid-plan
pnpm i # 或 npm / yarn
pnpm dev # 本地 5173，带完整 3D 示例
-
浏览器打开
-
左侧：
可拖拽的组件菜单（服务器 / 电源 / 路由器…） -
右侧：实时
3D机房，鼠标旋转、缩放 -
任意改动 →
2D与3D同步更新
核心 API 速查表
| 维度 | 关键字段 | 说明 |
|---|---|---|
| 组件类型 | availableTypes | 可放置的组件类型清单（含图标、颜色等） |
| 已放置 | placedItems | 已摆放在蓝图上的组件实例（坐标 + 尺寸） |
| 3D 开关 | config.showGrid3d | 是否启用 3D 视图 |
| 布局 | config.grid3dPosition | 3D 视图位于 2D 网格的上方或下方 |
| 事件 | @change / @delete / @select / @created | 组件增删改选时触发 |
把 3D 机房嵌进你的后台
全局注册（main.js）
import { GridPlan } from 'grid-plan'
app.component('GridPlan', GridPlan)
业务页面
<template>
<GridPlan
:availableTypes="types"
:placedItems="layout"
:config="{ showGrid3d: true, grid3dPosition: 'top' }"
@change="saveLayout"
@delete="removeDevice"
>
<!-- 自定义清单 -->
<template #inventory="{ item, deleteItem }">
<DeviceCard :device="item" @remove="deleteItem" />
</template>
</GridPlan>
</template>
<script setup lang="ts">
import type { GridPlanItem, GridPlanItemType } from 'grid-plan'
const types = ref<GridPlanItemType[]>([
{ typeId: 1, description: 'Dell R750', color: '#007DB8', icon: 'server' },
{ typeId: 2, description: 'APC UPS', color: '#FF6F00', icon: 'power' }
])
const layout = ref<GridPlanItem[]>([]) // 从接口拉取
const saveLayout = (item: GridPlanItem) => api.save(item)
const removeDevice = (item: GridPlanItem) => api.delete(item.id)
</script>
3D 视图能做什么？
| 功能 | 体验亮点 |
|---|---|
| 实时同步 | 2D 改尺寸 → 3D 立即拉伸；3D 拖拽 → 2D 坐标实时变 |
| 零额外建模 | 不需要 glTF/obj，任何矩形组件自动生成立方体 |
| 性能怪兽 | 1000+ 方块 60 FPS，WebGL 局部更新 |
| 旋转缩放 | 鼠标拖拽旋转 / 滚轮缩放 / 触控板双指 |
样式随便换（Tailwind 示例）
Grid Plan 不带任何 CSS，只暴露类名：
.grid-plan-grid-3d {
@apply bg-slate-900;
perspective: 1200px;
}
.grid-plan-inventory__body {
@apply p-4 bg-slate-800 text-white;
}
写在最后
从 Excel 到 3D，只需一个 <GridPlan> 标签。
下一次领导再催“机房搬迁方案”，别再熬夜截图 PPT——直接把浏览器投上大屏，让服务器在 3D 里“长”出来！
- Github 地址：
https://github.com/graphieros/grid-plan - 官网地址：
https://grid-plan.graphieros.com/
