# [前端] 景区/游玩项目 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 参数, 与本任务正交可独立做)
