frontend: 景区/游玩项目 list 加季节标签列 (后端 seasons[] 字段早就返了)

mmg: 后端 PR #2229/#2234 已部署, /admin/scenic/spots + /admin/activity/items
records 已含 seasons 字段。但前端 list 表格没显示季节列。

精确改法已给:
- 景区列表 D:/work2/hl-ui/src/views/resource/scenic/index.vue line 417-456 columns 加 '季节' 列
- 游玩项目列表 D:/work2/hl-ui/src/views/resource/playservice/index.vue line 495 同款
- 渲染逻辑可读字典 product_season (含 4 季 dictValue+dictLabel+icon+color)

notify @mmg
这个提交包含在:
API Changelog Bot 2026-05-15 09:35:07 +08:00
父节点 65f019ddb5
当前提交 f957215002

查看文件

@ -0,0 +1,122 @@
# [前端] 景区/游玩项目 list 列表加"季节"标签列
> **服务**: 前端 hl-ui (管理端)
> **后端 PR**: 无新 PR (能力 PR #2229/#2234 已上线)
> **日期**: 2026-05-14
> **影响范围**: 管理端 资源管理 → 景区管理 + 游玩项目管理 列表表格
---
## ⚠️ 关键变化
后端 `/admin/scenic/spots``/admin/activity/items` 列表 records 已包含 `seasons: ["spring","summer","autumn","winter"]` 字段PR #2229/#2234 已上线测试服真测 PASS,但前端 list 表格**没有显示季节列**。
需要加 "季节" 标签列,4 季用色块展示,未配置的季节灰色 disabled。
---
## 后端字段证据
```bash
GET /admin/scenic/spots?page=1&pageSize=3&status=1
→ records[0].seasons = ["spring","summer","autumn","winter"] // 中俄边境公路 4 季全配
→ records[1].seasons = ["spring","autumn"] // 只配了春秋两季
→ records[2].seasons = [] // 未配任何季节
```
字典 `product_season` 已含 4 季 dictValue + dictLabel + icon + color,前端直接读字典渲染色块与产品编辑页"季节标签"组件一致)。
---
## 精确改法
### 1. 景区列表
**文件**: `D:/work2/hl-ui/src/views/resource/scenic/index.vue` line 417-456
`columns` 数组里加一列(建议放在"标签"列后面):
```js
const columns = [
{ type: 'selection', width: 50 },
{ title: '景区名称', key: 'name', width: 220, render: ... },
{ title: '城市', key: 'cityName', width: 100 },
{ title: '标签', key: 'tags', width: 160, render: ... },
// === 新增季节列 ===
{
title: '季节',
key: 'seasons',
width: 140,
render: (row) => renderSeasonTags(row.seasons), // 复用产品编辑页弹窗的 SeasonTags 组件
},
{ title: '状态', key: 'status', width: 80, render: ... },
...
]
```
### 2. 游玩项目列表
**文件**: `D:/work2/hl-ui/src/views/resource/playservice/index.vue` line 495
同款加列。
### 3. 复用现有 SeasonTags 组件
弹窗 `ResourcePickerModal.vue` 应该已有渲染 4 季色块的逻辑(弹窗里景区右侧"春 夏 秋 冬"已配/未配色块),直接抽组件复用。
如果还没抽,可参考字典 `product_season` 渲染:
```js
const seasonDict = dictStore.get('product_season')
// seasonDict = [
// { dictValue: 'spring', dictLabel: '春', color: '#5A8C3C', icon: '<svg>...' },
// { dictValue: 'summer', dictLabel: '夏', color: '...' },
// ...
// ]
function renderSeasonTags(seasons = []) {
const set = new Set(seasons)
return h('div', { style: 'display:flex;gap:4px' },
seasonDict.map(s =>
h('span', {
style: {
background: set.has(s.dictValue) ? s.color : '#e0e0e0',
color: '#fff',
padding: '2px 6px',
borderRadius: '4px',
fontSize: '12px',
opacity: set.has(s.dictValue) ? 1 : 0.5,
}
}, s.dictLabel)
)
)
}
```
效果同产品编辑页弹窗的季节色块:已配的彩色,未配的灰色。
---
## 验证
改完后:
- 景区列表 → 中俄边境公路(卡线)那行"季节"列显示 "春 夏 秋 冬" 4 个彩色色块
- 中俄边境公路季节内容已配齐, 4 个色块都彩色高亮
- 未配任何季节的景区, 4 个色块全灰
游玩项目同款。
---
## 不影响范围
- 仅前端表格列增加, 后端字段已就绪
- 不影响其他列 / 操作按钮 / 弹窗 / 编辑页
---
## 相关后端 PR / 文档
- PR #2229 (Closes #2227): 景区列表加 seasons 字段
- PR #2234 (Closes #2232): 游玩项目同款
- 字典 `product_season`: GET /admin/dict/all 已含 4 季 + icon + color + remark
- 相关 changelog: [14_frontend_admin_list_should_pass_seasons_param.md](./14_frontend_admin_list_should_pass_seasons_param.md) (弹窗补传 seasons 参数, 与本任务正交可独立做)