审批流程页应以状态流转为核心，用语义化HTML（如<ol><li data-status>）构建骨架，动态渲染按钮并绑定API，历史记录用<details>折叠，连接线用伪元素实现自适应。
审批流程页的核心其实是状态流转，不是画几个圆圈
直接上手写 HTML 圆圈+箭头的“流程图”，大概率后续改不动——业务里审批节点会增减、会跳转、会驳回重走，纯静态结构扛不住。真正要做的，是把「当前节点」「可操作动作」「历史轨迹」三者用语义化 HTML 搭好骨架，让 JS 和后端能自然注入数据。
推荐用 <ol> 表达流程顺序（别用 <div> 堆），每个 <li> 对应一个审批环节，加 data-status 属性标状态：pending、approved、rejected、skipped。这样 CSS 可以精准控制样式，JS 也能靠属性查当前走到哪一步。
按钮和操作区必须绑定真实 API 能力，不能只写 disabled
常见错误：页面上放一堆 <button disabled>同意</button>，看起来灰了就以为安全。其实用户可能绕过禁用直接发请求，或者 JS 没同步更新按钮状态导致点两次。
正确做法：
立即学习“前端免费学习笔记（深入）”；
- 按钮初始不渲染，等接口返回当前用户权限和节点状态后再动态插入
<button> - 所有操作按钮必须带
data-action（如data-action="approve"）和data-node-id，方便 JS 统一绑定事件并拼出正确 API 路径 - 点击后立即置灰按钮并加
loading状态，响应成功再刷新整个流程节数据，而不是只改按钮文字
历史审批记录得用 <details> 折叠，别堆满屏幕
审批人、意见、时间戳、附件这些信息，90% 的场景下用户只看当前节点和自己要干啥。全展开会导致页面又长又慢，移动端尤其灾难。
建议结构：
<details> <summary>2024-05-20 14:32｜张三｜已通过</summary> <p>意见：资料齐全，同意</p> <a href="/api/attach/123" target="_blank">查看附件.pdf</a> </details>
注意：<details> 原生支持，无需 JS；但 Safari 旧版不支持 open 属性自动展开，如果默认要展开最新一条，得用 JS 补一句 detailsEl.open = true。
CSS 控制流程线时，用伪元素比绝对定位更稳
很多人用 position: absolute 给每个节点之间画线，结果一换字体、一调间距，线就偏移。更可靠的是用 ::after 在 <li> 上画连接线：
li:not(:last-child)::after {
content: "";
display: block;
width: 2px;
height: 1.5rem;
background: #e0e0e0;
margin: 0 auto;
}
这样线高随文字行高自适应，缩放、换主题色都只改一处。若需斜线或带箭头，改用 SVG 内联更可控，别用 border 或 transform 拼。
真正难的从来不是怎么画那条线，而是当某个节点被驳回、流程倒流时，如何让视觉路径也自然反向高亮——这得靠 JS 动态切换多个 data-status 组合，CSS 里提前写好 [data-status="rejected"] + [data-status="restarted"]::before 这类规则。
