如何制作一个HTML审批流程页面布局？

本文共计904个文字，预计阅读时间需要4分钟。

直接上手写+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 这类规则。