frontend-feature: 行程保障模板编辑保障项加拖拽排序 (notify @mmg)

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

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<GuaranteeItem>` 原样落库 |
+| 详情接口 `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 — 不阻塞功能但运营反馈过, 顺手时排上。