退款状态需后端返回语义化字符串（如"submitted"）并配合前端条件渲染，禁用硬编码或数字码；用Flex+伪元素实现响应式线性进度条，弃用<progress>标签；统一状态映射与字段契约确保逻辑一致。
退款状态怎么用 HTML + 后端数据联动显示
纯 HTML 无法动态更新退款进度，它只是静态骨架。真正显示“已提交→审核中→已打款→已完成”这类状态，必须配合后端返回的状态字段（比如 refund_status）和前端条件渲染逻辑。常见错误是把状态硬编码成固定文字或用一堆 <div> 手动切换，结果一改状态就要改 HTML，维护爆炸。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 后端至少返回一个可枚举的状态码（如
"pending"、"reviewing"、"refunded"），别传中文字符串 - 前端用
data-status属性绑定状态值，例如：<div class="refund-step" data-status="reviewing"> - 用 CSS 类名映射状态（如
.status-pending、.status-refunded），避免 JS 拼接样式 - 如果用模板引擎（如 EJS、Thymeleaf），直接根据
refund_status渲染对应 class 或文案，不写 if-else 块在 HTML 里
用 CSS 实现带箭头的线性进度条（非 SVG/Canvas）
很多团队想用纯 CSS 做“四步退款流程”的横向进度条，但卡在箭头连接、高亮当前步骤、响应式断点上。关键不是画得多像，而是状态语义清晰、适配小屏、不依赖 JS 控制宽度。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用 Flex 布局 +
::after伪元素画箭头，每个步骤项用<li>包裹，父容器设display: flex - 当前步骤加
.active类，用flex: 1占满剩余空间，前面步骤用flex: 0 0 auto固定宽高 - 箭头颜色与当前步骤一致，不要用 border 三角，改用旋转的
div或 SVG<svg>内联，确保缩放不失真 - 移动端折叠为垂直排列：用
@media (max-width: 768px)改flex-direction: column，箭头改用上下边框模拟
refund_status 字段设计不当导致前端反复适配
后端返回 refund_status: 2 或 "REFUND_SUCCESS" 这类值，前端就得写一堆 map 映射或 switch 判断，稍有新增状态就漏改。更糟的是，有些接口返回数字，有些返回小写字符串，有些混着时间戳一起塞进 status 字段。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 前后端约定统一使用小写、语义化字符串（如
"submitted"、"failed"、"cancelled"），禁止数字码或大写常量 - 后端在响应体中额外提供
status_label（如 “已驳回”）供展示，但前端逻辑仍只依赖refund_status做判断 - 前端定义 const STATUS_MAP = { submitted: '已提交', reviewing: '审核中' }，仅用于文案转换，状态流转逻辑一律走 key 比对
- 如果遇到历史接口返回不一致，用中间层函数 normalizeRefundStatus() 统一归一化，别在每个组件里重复处理
为什么不能用 <progress> 标签显示退款步骤
<progress> 是为百分比进度（如上传 65%）设计的，语义是“完成度”，而退款是离散状态跃迁（提交 → 审核 → 打款），没有中间值。强行用 value="2" 和 max="4" 会误导用户以为“已完成一半”，且无法标注各步骤名称、图标、时间戳等关键信息。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 彻底放弃
<progress>，改用语义化列表（<ol>或<dl>）+ 状态徽章（<span class="status-badge">） - 每个步骤包含：图标（
<svg>）、标题（<dt>）、时间/说明（<dd>）、状态标记（data-status） - 需要无障碍支持时，给当前步骤加
aria-current="step"，已过步骤加aria-disabled="true" - 如果产品硬要“视觉上有进度感”，用 CSS 渐变背景填充连接线，而非依赖
<progress>的原生行为
状态映射表、CSS 响应式断点、前后端字段契约——这三个地方出问题，进度条再好看也掩盖不了逻辑混乱。尤其注意后端加了个新状态但忘了通知前端，页面就卡在“未知状态”白屏。
