docs: 修复库存3D查看器设计文档问题

wanshenmean

2026-03-30 a7b66e3e78a1de7ea88897d4450b5f2e397f9e34

docs: 修复库存3D查看器设计文档问题

- 明确颜色优先级规则和阈值定义
- 决定使用lerp替代TWEEN
- 添加筛选字段到API响应结构
- 统一筛选组件命名
- 将待补充改为实现注意事项

Co-Authored-By: Claude <noreply@anthropic.com>

 Code/WMS/docs/superpowers/specs/2026-03-30-stock-chat-3d-design.md

@@ -54,16 +54,21 @@
   - 右上角/底部颜色图例
   - 说明每种颜色代表的货位状态

### 3.2 货位状态颜色编码
### 3.2 货位状态颜色编码（颜色优先级：locationStatus > stockStatus）

| 状态 | 颜色 | Hex |
|------|------|-----|
| 空货位 | 暗灰 | `#4a4a4a` |
| 有库存 | 蓝色 | `#409EFF` |
| 库存紧张 (<10%) | 橙色 | `#E6A23C` |
| 已满 | 绿色 | `#67C23A` |
| 锁定/冻结 | 红色 | `#F56C6C` |
| 禁用 | 深灰 | `#2d2d2d` |
**颜色判定规则（按优先级顺序）：**

1. **`locationStatus = 3`（禁用）** → 深灰 `#2d2d2d`（最高优先级）
2. **`locationStatus = 2`（锁定）** → 红色 `#F56C6C`
3. **`locationStatus = 1`（占用）且 `stockStatus = 0`（无货）** → 暗灰 `#4a4a4a`
4. **`locationStatus = 1`（占用）且 `stockStatus = 1`（有货）** → 蓝色 `#409EFF`
5. **`locationStatus = 1`（占用）且 `stockStatus = 2`（库存紧张 <10%）** → 橙色 `#E6A23C`
6. **`locationStatus = 1`（占用）且 `stockStatus = 3`（已满 ≥90%）** → 绿色 `#67C23A`
7. **`locationStatus = 0`（空）** → 暗灰 `#4a4a4a`

**阈值定义：**
- 库存紧张：`stockQuantity / maxCapacity < 10%`
- 已满：`stockQuantity / maxCapacity ≥ 90%`

## 4. 后端 API

@@ -83,6 +88,8 @@
    "maxRow": 10,
    "maxColumn": 20,
    "maxLayer": 5,
    "materielCodeList": ["M001", "M002", "M003"],
    "batchNoList": ["B20260301", "B20260302"],
    "locations": [
      {
        "locationId": 1,
@@ -103,6 +110,13 @@
  }
}
```

**说明**：
- `locationStatus`: 0=空, 1=占用, 2=锁定, 3=禁用
- `stockStatus`: 0=无货, 1=有货, 2=库存紧张, 3=已满
- `maxCapacity`: 货位最大容量（用于计算填充率）
- `materielCodeList`: 当前仓库所有物料编号列表（用于筛选下拉）
- `batchNoList`: 当前仓库所有批次号列表（用于筛选下拉）

**说明**：
- `locationStatus`: 0=空, 1=占用, 2=锁定, 3=禁用
@@ -148,8 +162,13 @@

    <!-- 工具栏 -->
    <div class="toolbar">
      <el-select v-model="filterStatus" placeholder="库存状态筛选" clearable />
      <el-select v-model="filterMateriel" placeholder="物料筛选" clearable />
      <el-select v-model="filterStockStatus" placeholder="库存状态筛选" clearable>
        <el-option label="有货" :value="1" />
        <el-option label="库存紧张" :value="2" />
        <el-option label="已满" :value="3" />
      </el-select>
      <el-select v-model="filterMaterielCode" placeholder="物料筛选" clearable :options="materielCodeList" />
      <el-select v-model="filterBatchNo" placeholder="批次筛选" clearable :options="batchNoList" />
      <el-button @click="resetCamera">重置视角</el-button>
    </div>

@@ -201,8 +220,9 @@

### 7.4 相机聚焦动画

- 使用 `TWEEN` 或手动插值平滑移动相机
- 使用简单线性插值（lerp）平滑移动相机
- 目标位置：货位坐标 + 偏移量
- 插值公式：`camera.position.lerp(target, 0.05)` 每帧执行

## 8. 性能优化

@@ -225,9 +245,14 @@
}
```

## 10. 待补充
## 10. 实现注意事项

- [ ] 后端 `Get3DLayout` API 实现
- [ ] SignalR Hub 配置
- [ ] 货位颜色与后端状态枚举对齐
- [ ] 筛选功能具体字段确认
### 10.1 后端交付物
- `Get3DLayout` API 实现，返回结构见 4.1
- SignalR Hub 配置（`/stockHub`），推送 `stockUpdated` 事件
- 货位颜色判定逻辑按 3.2 规则在后端或前端实现均可

### 10.2 前端筛选联动
- `filterStockStatus`、`filterMaterielCode`、`filterBatchNo` 三者联动
- 筛选结果高亮显示，非匹配货位变暗（opacity: 0.3）
- 筛选为空时显示全部货位正常颜色