用SVG画退换货流程图更可控：节点可交互、颜色CSS控制、文字可选中，语义清晰且适配深色模式；需统一状态文案、显性展示异常路径，并优化移动端横向滚动体验。
用 <svg></svg> 画退换货流程图比用图片更可控
直接插入 PNG 或 JPG 流程图，缩放失真、无法适配深色模式、文字不能被屏幕阅读器识别。用 <svg></svg> 手写流程图，节点可交互、颜色可 CSS 控制、文字可选中，也方便后续加 tooltip 或点击跳转到对应条款。
关键不是“画得多漂亮”，而是让每个步骤语义清晰、视觉层级分明：
- 用
<rect></rect>或<circle></circle>表示状态节点（如“已签收”“申请提交成功”） - 用
<path></path>或<line></line>画带箭头的流向线，marker-end属性加箭头更可靠 - 所有文字用
<text></text>，别塞进图片；字号设为14px或0.875rem，确保小屏可读 - 给每个
<g></g>容器加data-step="return-applied"类似属性，方便 JS 后续高亮当前步骤
流程节点文案必须和客服话术/售后系统字段对齐
前端写的“审核中”如果后端 API 返回的是 status: "review_pending"，用户看到页面和收到短信不一致，就会怀疑流程卡住。实际开发中，退换货状态字段常有歧义：
-
"processing"在有些系统里指“仓库已揽收”，有些指“财务正在退款”——得查清楚再映射 - “已寄出”和“物流已发出”不是同一件事：前者是商家打单，后者是快递扫描出库，中间可能隔 2 小时
- 别写“预计 3–5 个工作日”，要拆成具体节点：“平台 2 小时内审核 → 仓库 48 小时内处理 → 快递 1–3 天送达”
建议把各状态文案列成 JSON 配置，和订单详情页共享同一份 returnStatusMap，避免前后端各写一遍。
立即学习“前端免费学习笔记（深入）”；
移动端流程图横向滚动比折行更可靠
用 CSS flex-wrap: wrap 把流程节点强行折成两行，容易导致箭头错位、文字重叠，尤其在 iOS Safari 上 flex 对齐 bug 较多。更稳的做法是：
- 整个
<svg></svg>设为固定高度（如120px），宽度设为足够容纳全部节点（例如800px） - 外层容器加
overflow-x: auto和scroll-behavior: smooth - 给容器加
padding-bottom: 16px，留出滚动条空间，避免遮挡底部文字 - 在节点上加
touch-action: pan-x，防止 iOS 上滑动时触发页面回弹
测试时重点看 iPhone SE（窄屏）下能否左右拖动看清每一步，而不是靠缩放——缩放会破坏 SVG 文字渲染精度。
别忽略“异常路径”的可视化表达
标准流程图只画主干（申请→审核→寄回→退款），但用户真正焦虑的是“卡在哪儿了”。比如审核失败、地址不匹配、商品超期，这些分支必须显性呈现：
- 用虚线箭头表示异常路径，颜色用
#F59E0B（琥珀色）而非红色，避免误判为错误提示 - 在异常节点旁加
<title></title>标签，鼠标悬停显示原因（如“退货超时：订单签收已超 7 天”） - 若该异常可自助操作（如“修改退货地址”），在节点内嵌一个
<a href="/return/edit-address">修改</a> - 所有异常分支终点必须指向明确出口：要么“重新提交申请”，要么“联系客服”，不能悬空
最常被忽略的一点：SVG 里的 <title></title> 默认不支持触屏长按，需要额外监听 touchstart 并手动 show tooltip——这点在安卓微信内置浏览器里尤其明显。
