

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

数翼

2025-03-13

导读：本篇文章使用AI来实现一个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：

<div v-else class="empty-state">
    <i class="pi pi-info-circle text-3xl text-500 mb-3 text-xl"></i>
    <p>请选择一个元素进行编辑</p>
</div>

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

这次很惊喜，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%);
}