DeepSeek从零实现3D库存可视化系统之设计面板

本篇文章使用AI来实现一个3D库存可视化系统的场景编辑器。

背景

这几天测试通用智能体框架的能力，换换脑子，再来让AI写写程序。

我们先从之前AI生成的需求设计里面挑一个功能来做：

比如这个场景编辑功能。

实现

开始动手：

提示词新建一个页面，支持用户调整仓库场景尺寸、地面属性，添加或移动设备模型。 页面右上角增加设置按钮，点击跳转到设置页

一次生成的页面啥也不是。

重新提示编辑页：

提示词使用 PrimeVue 实现UI，使用 VueFlow 实现布局。 仓库编辑库位大小和位置，库区编辑货架排列层、间距等。 避免右键菜单。帮我进行代码设计

他帮我生成了一个页面和两个新组件：

• EditScene.vue

• ZoneNode.vue

• ShelfNode.vue

点击添加库区和添加货架按钮，分别生成了两个新节点：

不过布局不太好，让 DeepSeek 帮我进行需求设计：

提示词设计一个仓库场景编辑页面的页面交互和功能。可以选择仓库、库区进行编辑，

### 仓库场景编辑页面交互设计方案

#### 一、页面布局

1.**三栏式布局**

  - 左侧导航栏（30%）：仓库列表+库区树形结构

  - 中间画布区（50%）：可视化编辑平面图

  - 右侧属性栏（20%）：选中元素属性编辑

#### 二、核心功能模块

1.**仓库选择与管理**

  - 仓库列表（带搜索框）

  - 新增仓库按钮（支持模板创建）

  - 右键菜单：重命名/删除/复制配置

2.**库区层级管理**

  - 树形结构展示（支持拖拽排序）

  - 多级库区创建（冷库/恒温区/危险品区等）

  - 批量操作：停用/启用库区组

3.**可视化编辑**

  - 平面图功能：

      - 支持2D/3D视图切换

      - 网格吸附功能（1m精度）

      - 货架自动对齐工具

  - 元素库：

      - 预置货架/叉车通道/工作站等组件

      - 自定义设备上传（支持SVG/3D模型）

4.**智能辅助系统**

  - 动线分析：自动计算最优路径

  - 容量预警：实时显示库区利用率

  - 冲突检测：设备碰撞预警

#### 三、交互细节

1.**双模式操作**

  - 快速布局模式：拖拽式组件摆放

  - 精确编辑模式：坐标/角度数值输入

2.**实时协作**

  - 协同编辑标识（显示其他用户光标位置）

  - 修改历史时间轴（支持版本对比）

3.**情景化工具栏**

  - 根据选中元素动态变化：

      - 选中货架：显示容量配置工具

      - 选中通道：显示通行规则设置

      - 选中库区：显示温控配置项

4.**数据联动**

  - 库存看板联动：鼠标悬停显示实时库存

  - 设备状态映射：IoT设备异常时高亮显示

#### 四、高级功能

1.**仿真模拟**

  - 入库/出库流程模拟

  - 高峰期压力测试

2.**智能优化建议**

  - 基于AI的布局优化方案

  - 能耗预测分析

3.**多维度视图**

  - 热力图显示：人员流动频率

  - AR预览模式（需移动端配合）

#### 五、异常处理

1.**冲突解决机制**

  - 实时保存冲突提示

  - 分支版本管理功能

2.**操作安全防护**

  - 关键操作二次确认

  - 权限分级控制（区域编辑权限）

#### 六、技术实现要点

1.**前端架构**

  - 采用React+Konva.js/D3.js可视化方案

  - WebSocket实时数据同步

2.**性能优化**

  - 按需加载库区数据

  - Canvas分层渲染

3.**扩展性设计**

  - 插件式功能扩展架构

  - OpenAPI对接仓库管理系统

#### 七、用户引导

1. 首次使用向导

2. 操作提示气泡（可永久关闭）

3. 情景帮助文档（F1快捷唤起）

该设计平衡了可视化操作的直观性与专业配置的复杂性，通过分层显示和情景化交互降低学习成本，同时满足仓储规划的专业需求。建议采用渐进式增强策略，优先实现核心编辑功能，再逐步加入智能分析模块。

然后使用 DeepSeek 给出的答案来进行UI布局提示，

一、页面布局

三栏式布局

- 左侧导航栏（30%）：仓库列表+库区树形结构

- 中间画布区（50%）：可视化编辑平面图

- 右侧属性栏（20%）：选中元素属性编辑

这侧给出的程序基本可用：

右侧有个图标他打了，调整图标大小为：text-xl：

  <i class="pi pi-info-circle text-3xl text-500 mb-3 text-xl"></i>

  <p>请选择一个元素进行编辑</p>

测试一下添加仓库，添加库区，添加货架功能：

这次很惊喜，AI 生成了方格格货架，还怪好看的，这是我没想到的（因为我都不知道我提示了啥）。 而且基本都可用，不过在选择库区和货架的时候，属性面板没有刷新：

提示词选择库区和货架的时候，属性面板没有刷新：

AI 帮我把树结构和编辑区域同步的问题解决了，但是并没有解决选中同步的问题。

提示词Tree 数据隐藏根节点。Tree 增加选中状态，VueFlow 的数据和 Tree 数据同步，选中状态也同步

一次提的要求太多， AI 有点儿蒙圈，给出的代码添加功能不起作用了。

我们先让把树给改一下：

提示词库区结构不需要全部库区根节点。Tree 可以选中。

数据功能还是不对，我们先给新增数据重命名一下：

提示词新增库区的名称使用新库区1 ， 2 3 这样递增

提示词库区和货架使用单独的类

它推荐我拆分了 Zone、Shelf、Warehouse 三个类。

此时代码太长了，提示总是失败，我们让AI把代码拆分一下。

提示词使用 Warehsouse Zone Shelf 重构 EditScene, 代码 demo 数据代码拆分出去，让代码简洁，逻辑清晰，模块化。 数据和状态管理的拆分，VueFlow 画布逻辑的拆分，属性面板逻辑的拆分

这次程序给我生成了一堆类和组件，树和场景的数据也同步了，仓库切换功能也好了。

不过仓库的选中状态没有了，

提示词给仓库列表增加选中状态和样式

仓库选中状态不是很明显，优化下样式：

提示词warehouse-item 选中之后用深色背景，看起来更清晰一点。图标和字体水平居中对齐

上面部分样式手动调整了下

调整下滚动条，让页面不要出现全局滚动。

提示词优化界面布局，屏幕不要出现全局滚动条。左侧树和右侧属性编辑表单可以用 ScrollPanel 来局部滚动。 VueFlow 添加 MiniMap 和 控制栏。

效果并没有调整的很好，凑合先。

提示词属性面板使用 primevue form 实现

效果不咋地，继续优化

提示词Form 字段使用 FloatLabel 实现，一行放两个字段。美化布局。

然而程序的的交互出错了，我甚至不知道怎么提示（程序代码太多了）。

于是乎我先让AI把浏览器控制台的报警，一个个发给AI让他全部都解决掉。

中间重复了很多次，不展示了。

错误先不管，我们继续优化AI优化程序：

提示词增加独立的状态管理类，warehouseManager， selectedNode，selectedWarehouse，以及加减节点，选择仓库 等相关逻辑都放到这里

提示词addZone, addShelf, deleteSelectedNode, saveLayout 函数命名使用 handle开头， useWarehouseManager的函数不要别名

... 一堆改逻辑，以及后面一堆代码提示和优化就不展示了，总之经过漫长的过程，页面又回到最初的效果了， 我也被迫看了 AI 写得程序。

提示词库位属性增加宽度、深度、高度。界面展示俯视图。使用长度深度来计算货位面积。

这次提示又是没有一次成功，同样经过漫长的提示修改。

提示词为库区增加 VueFlow Resizer，支持拖动调整大小。

把手比较小，我手动把把手调大一点：

.vue-flow__resize-control.handle {

display: none;

}

.vue-flow__node.selected .vue-flow__resize-control.handle {

display: block;

width: 10px;

height: 10px;

background-color: rgb(51, 103, 217, 80%);

}

在我以为大功搞成的时候，才发现，变慢的编辑不能反馈到设计器上面。

不过今天先这样了，远离会儿 AI 出去接触下大自然。

感受

今天使用AI的感受是：

•惊喜是有的，看着AI一下子实现了你想要的功能，甚至比你想的还好；

•烦躁也是有的，和 AI 交流远不如和人类打交道简单，而且你经常需要一点一点教他，有些时候的效率会比较低下。

• 最后发现你在免费劳动，看起来你是使用 AI 帮你干活，其实是你花了大把时间在给云厂商免费训练AI，而且还要及其耐心的训练，不能打不能骂。

我再去问问前端同学，看看他做一个这样的功能要多久。