Vue3 超强“积木”组件！5 分钟搞定可交互 3D 机房蓝图！

过去，我们用 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

克隆 & 启动

bash 复制代码

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）

js 复制代码

import { GridPlan } from 'grid-plan'
app.component('GridPlan', GridPlan)

业务页面

html 复制代码

<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，只暴露类名：

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/