45 lines
2.2 KiB
Plaintext
45 lines
2.2 KiB
Plaintext
|
|
|||
|
|
BUG-003 已按你的要求修好，修改总结如下。
|
|||
|
|
|
|||
|
|
## 1. Template 与数据来源（确认）
|
|||
|
|
|
|||
|
|
- **`.food-image` 的 `:src`**：绑定为 `getFoodImage(item)`，由该方法统一取图并处理占位。
|
|||
|
|
- **`.nutrition-item` 的 v-for**：遍历 `(item.nutrition || [])`，数据在 `normalizeFoodItem` 里统一整理成 `nutrition` 数组。
|
|||
|
|
|
|||
|
|
## 2. 后端数据结构（api/tool.js + ToolFoodServiceImpl）
|
|||
|
|
|
|||
|
|
- **列表/搜索** 返回每条为：`id`, `name`, `image`, `category`, `energy`, `protein`, `potassium`, `phosphorus`, `suitabilityLevel`。
|
|||
|
|
没有 `nutrition`/`nutrients` 数组，营养来自扁平字段。
|
|||
|
|
|
|||
|
|
## 3. 具体修改
|
|||
|
|
|
|||
|
|
**（1）图片字段与占位**
|
|||
|
|
|
|||
|
|
- 在 **`getFoodImage(item)`** 中：
|
|||
|
|
- 统一取 `item.imageUrl || item.image || item.img`。
|
|||
|
|
- 若为相对路径（以 `/` 开头且非 `//`），用 `HTTP_REQUEST_URL` 拼成完整 URL。
|
|||
|
|
- 无有效 URL 时返回已有的灰色 SVG 占位图（`defaultPlaceholder`）。
|
|||
|
|
|
|||
|
|
**（2）营养字段与列表**
|
|||
|
|
|
|||
|
|
- 在 **`normalizeFoodItem(item)`** 中：
|
|||
|
|
- **图片**：同样做 image/imageUrl/img 兼容和相对路径补全，并写入 `image` / `imageUrl`，保证列表项有统一图源。
|
|||
|
|
- **营养**：
|
|||
|
|
- 若有 `item.nutrition` 数组，按 `{ label, value, colorClass }` 规范化（兼容 `name`/`labelName`）。
|
|||
|
|
- 否则若有 `item.nutrients`，同样规范化后当作 `nutrition`。
|
|||
|
|
- 否则用后端扁平字段组装：能量、蛋白质、钾、磷、钠、钙（有值才加），保证列表有 `nutrition` 数组供 `.nutrition-item` 使用。
|
|||
|
|
|
|||
|
|
**（3）列表数据来源**
|
|||
|
|
|
|||
|
|
- `loadFoodList` 和搜索回调中，列表来源改为：
|
|||
|
|
`result.data.list || (Array.isArray(result.data) ? result.data : [])`，再对每一项执行 `normalizeFoodItem`，避免因接口形态不同导致列表为空。
|
|||
|
|
|
|||
|
|
**（4）配置**
|
|||
|
|
|
|||
|
|
- 顶部增加：`import { HTTP_REQUEST_URL } from '@/config/app.js'`，用于相对路径补全。
|
|||
|
|
|
|||
|
|
效果上：
|
|||
|
|
|
|||
|
|
- `.food-image` 会正确显示后端返回的图（含相对路径补全），无图时显示灰色占位图。
|
|||
|
|
- `.nutrition-item` 会正确展示营养简介（来自后端扁平字段或已有的 nutrition/nutrients 数组）。
|