From e4605c3755049ecc55f6c38e2d939509666f6b37 Mon Sep 17 00:00:00 2001 From: API Changelog Bot Date: Thu, 14 May 2026 10:43:06 +0800 Subject: [PATCH] =?UTF-8?q?frontend-feature:=20=E8=A1=8C=E7=A8=8B=E4=BF=9D?= =?UTF-8?q?=E9=9A=9C=E6=A8=A1=E6=9D=BF=E7=BC=96=E8=BE=91=E4=BF=9D=E9=9A=9C?= =?UTF-8?q?=E9=A1=B9=E5=8A=A0=E6=8B=96=E6=8B=BD=E6=8E=92=E5=BA=8F=20(notif?= =?UTF-8?q?y=20@mmg)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-Authored-By: Claude Opus 4.7 (1M context) --- ..._admin_travel-guarantee-items-drag-sort.md | 73 +++++++++++++++++++ 1 file changed, 73 insertions(+) create mode 100644 changelogs/2026-05/14_frontend_feature_admin_travel-guarantee-items-drag-sort.md diff --git a/changelogs/2026-05/14_frontend_feature_admin_travel-guarantee-items-drag-sort.md b/changelogs/2026-05/14_frontend_feature_admin_travel-guarantee-items-drag-sort.md new file mode 100644 index 0000000..cf1812b --- /dev/null +++ b/changelogs/2026-05/14_frontend_feature_admin_travel-guarantee-items-drag-sort.md @@ -0,0 +1,73 @@ +--- +date: 2026-05-14 +type: frontend-feature +module: admin-product-v2-travel-guarantee +priority: low +notify: ["@mmg"] +status: pending +--- + +# 行程管理 → 行程保障: 编辑模板时「保障项」列表加拖拽排序 + +## 需求 + +正式环境 (admin.1814.love/product/travel-guarantee) 「编辑安全保障模板」抽屉里, 「保障项」区域当前是固定顺序的 #1 / #2 / #3 / ... 卡片列表(每张卡片含图标、标题、描述), **无法调整顺序**。 + +运营需要能拖拽调整保障项顺序, 例如把「保险保障」从 #3 拖到 #1。 + +## 范围: 纯前端, 后端不动 + +经 `/@dev` 调研后端 `hl-product-service-v2`: + +| 项 | 现状 | +|---|------| +| 表 `travel_guarantee_template` | 用 `items` JSON 字段存全部保障项数组 `[{icon, title, description}]` | +| `TravelGuaranteeTemplateDO.items` | 字符串字段, JSON 数组 | +| 保存接口 `POST /admin/travel-guarantee-template` | 接收 `TravelGuaranteeTemplateSaveReqVO.items: List` 原样落库 | +| 详情接口 `GET /admin/travel-guarantee-template/{id}` | 原样吐回数组 | + +**关键: JSON 数组天然有序, 后端按前端传过来的数组顺序原样存原样取, 不做任何重排**。所以前端拖拽完后, 把数组按新顺序 PUT 给现有 save 接口即可, **后端零改动**。 + +## 前端实现建议 + +「编辑安全保障模板」抽屉的「保障项」区域: + +1. 每张 #N 卡片左侧加拖拽手柄(grip icon, 鼠标 hover 变 `cursor: grab`) +2. 用 vuedraggable / 等价拖拽库实现纵向拖拽排序 +3. 拖拽过程中 #N 序号实时刷新(#1/#2/#3 始终按当前位置) +4. 保存时**按新顺序**传 `items` 数组给 `POST /admin/travel-guarantee-template`(接口签名不变) + +## 接口 (无变化, 仅作前端参考) + +```http +POST /admin/travel-guarantee-template +Content-Type: application/json + +{ + "templateId": 123, // 编辑模式带 ID + "name": "额吉的故乡系列", + "items": [ + { "icon": "...", "title": "保险保障·安全托底", "description": "..." }, // 用户拖到 #1 + { "icon": "...", "title": "透明披露·无强制消费", "description": "..." }, // 拖到 #2 + { "icon": "...", "title": "独立用车·专属团队", "description": "..." } // 拖到 #3 + ], + ... +} +``` + +返回照旧, 不需要发新版本接口。 + +## 验证清单(前端改完自测) + +- [ ] 「行程管理 → 行程保障」点已有模板「额吉的故乡系列」进编辑抽屉, 拖动手柄能调整保障项顺序 +- [ ] 拖拽过程中 #N 序号(#1/#2/#3) 实时刷新 +- [ ] 保存后重进编辑页, 顺序与上次保存的一致 +- [ ] 新增模板时也能拖拽排序后再首次保存 +- [ ] 删除某项后剩余项序号自动重排, 不残留空 #N +- [ ] 移动端 / 触摸屏拖拽体验可用(如果运营会用 iPad) + +## 后端无需任何改动 + +`TravelGuaranteeTemplateDO.items` 是 JSON 数组字段, 前端传什么顺序后端就存什么顺序。这条 changelog 只为通知前端开做。 + +@mmg 看下 hl-ui 里行程保障模板编辑组件, 优先级 P3 — 不阻塞功能但运营反馈过, 顺手时排上。