docs: 新增前端修复指引 - 轮播图链接目标产品类型 Tag
后端零改动,BannerVO.linkTargetType 与 ProductListRespVO.productType 均已返回。 前端 EditModal/index.vue 硬编码"产品"二字未消费字段,附完整修复步骤与回归清单。
这个提交包含在:
父节点
a34bbf3efb
当前提交
b2ec05f79e
@ -0,0 +1,76 @@
|
||||
# 轮播图"链接目标"产品类型 Tag 前端修复指引(后端零改动)
|
||||
|
||||
- **日期**: 2026-04-18
|
||||
- **PR**: 无(后端无代码改动,纯前端 BUG)
|
||||
- **状态**: 后端字段早已就绪,仅需前端消费
|
||||
|
||||
---
|
||||
|
||||
## 背景
|
||||
|
||||
管理端"轮播图管理"编辑/列表页,链接类型 = "产品详情"时:
|
||||
- 当前:`[产品] 小蒙马·呼伦贝尔亲子研学5日营`(Tag 硬编码"产品"二字,不区分核心/小蒙马)
|
||||
- 期望:`[小蒙马] 小蒙马·呼伦贝尔亲子研学5日营` 或 `[核心] xxx`
|
||||
|
||||
## 后端状态:零改动,契约已齐备
|
||||
|
||||
1. **轮播图详情接口** `GET /admin/banner/{id}`(`hl-user-service`):
|
||||
- 响应 VO `BannerVO` 已包含 `linkTargetType`(CORE / GROUP / null)
|
||||
- `BannerService.enrichLinkTargetType()` 在 list / get / create / update 四条路径批量回填(走 `ProductTypeFeignClient.batchProductType` 批量查产品 productType,Feign 降级留空不阻塞)
|
||||
- 已验证:返回 JSON 里 `linkTargetType` 为英文常量 `CORE` / `GROUP`
|
||||
|
||||
2. **产品 picker 列表接口** `GET /product/item/list`(`hl-product-service-v2` 的 `AdminProductController`):
|
||||
- 响应 VO `ProductListRespVO` 已包含 `productType`(CORE / GROUP / CUSTOM)
|
||||
- 前端 picker 选中产品时可直接从 `row.productType` 读值
|
||||
|
||||
## 前端需要做的修改
|
||||
|
||||
### 1. `hl-ui/src/views/mp-config/home/banner/EditModal.vue`
|
||||
|
||||
- **`formData` 加字段**(约第 337-353 行)
|
||||
```js
|
||||
linkTargetType: '' // CORE / GROUP / null
|
||||
```
|
||||
|
||||
- **`fillFormData()` 回显时取字段**(约第 435-453 行)
|
||||
```js
|
||||
linkTargetType: data.linkTargetType || ''
|
||||
```
|
||||
|
||||
- **`handleLinkTypeChange` / `clearLinkTarget` 清空时同步清 `linkTargetType`**
|
||||
|
||||
- **`linkResourceTag` 计算属性改为动态**(原第 333-335 行硬编码 Map):
|
||||
- `linkType === 'PRODUCT'` → 读 `formData.linkTargetType`,用字典 `product_type` 取 label(CORE→"核心"、GROUP→"小蒙马")
|
||||
- `linkType === 'PRODUCT_LINE'` → 同理走字典(若有产品线类型字典)
|
||||
- 其他类型(ARTICLE/URL/MINI_PAGE/NONE)保留原 `LINK_RESOURCE_MAP`
|
||||
|
||||
- **`handlePickLinkTarget` 选中产品后**:同步把 `row.productType` 写入 `formData.linkTargetType`
|
||||
|
||||
### 2. `hl-ui/src/views/mp-config/home/banner/index.vue`
|
||||
|
||||
- 表格"链接类型"列(约第 84-92 行 `linkTypeMap` + 第 147-152 行渲染):
|
||||
- `PRODUCT` 行改读 `row.linkTargetType` 走字典 `product_type` 渲染;字段缺失时兜底显示"产品"
|
||||
- 其他类型维持不变
|
||||
|
||||
### 3. 字典使用建议
|
||||
|
||||
用 `dictStore.getDictOptions('product_type')` 拿中文 label,避免硬编码"核心/小蒙马"字面量。字典已配置:
|
||||
```
|
||||
product_type:
|
||||
CORE → 核心
|
||||
GROUP → 小蒙马
|
||||
```
|
||||
|
||||
## 回归验证清单
|
||||
|
||||
| 场景 | 期望 |
|
||||
|------|------|
|
||||
| 编辑 linkType=PRODUCT + 目标产品 productType=CORE | Tag 显示"核心" |
|
||||
| 编辑 linkType=PRODUCT + 目标产品 productType=GROUP | Tag 显示"小蒙马" |
|
||||
| 新建 linkType=PRODUCT + picker 选 CORE 产品 | Tag 实时变"核心",保存后回显仍"核心" |
|
||||
| 列表页 linkType=PRODUCT + productType=GROUP 数据 | 列显示"小蒙马" |
|
||||
| `linkTargetType` 为 null(历史脏数据) | Tag 兜底显示"产品",不崩 |
|
||||
|
||||
## 重启范围
|
||||
|
||||
无。后端零改动,**不需要重启任何服务**。
|
||||
正在加载...
x
在新工单中引用
屏蔽一个用户