diff --git a/changelogs/2026-05/14_frontend_resource_list_add_seasons_column.md b/changelogs/2026-05/14_frontend_resource_list_add_seasons_column.md new file mode 100644 index 0000000..d1bf1df --- /dev/null +++ b/changelogs/2026-05/14_frontend_resource_list_add_seasons_column.md @@ -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: '...' }, +// { 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 参数, 与本任务正交可独立做)