---
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 — 不阻塞功能但运营反馈过, 顺手时排上。
