推荐用布局审批流程图，语义清晰、自动伸缩、状态驱动样式；节点用；连接线由li:not(:last-child)::after生成；按钮动态插入并绑定data-action与data-node-id；历史记录用折叠，默认展开最新一条。
直接用 <ol></ol> + data-status 布局审批流程图，比画 div 圆圈靠谱得多——它能随节点增减自动伸缩，状态一改样式就变，JS 也好查、好绑、好刷新。
用 <ol></ol> 而不是 <div> 套流程节点
<p>语义上 <code><ol></ol> 天然表达“有顺序的步骤”，浏览器和屏幕阅读器都认；CSS 里用 li:not(:last-child)::after 画连接线，不依赖绝对定位，换字体、调间距都不偏移。别再写一堆 <div class="node"> 然后 JS 算坐标连箭头了。
<ul>
<li>
<code><ol class="approval-steps"></ol> 是唯一推荐的容器，每个环节用 <li data-status="pending">
pending / approved / rejected / skipped，避免用 wait、doing 这类模糊词status 字段，前端只做映射，不自己猜状态按钮必须按权限动态渲染，不能靠 disabled 挡操作
用户右键检查元素删掉 disabled 就能点，或者 JS 状态没同步导致重复提交——这是线上最常被绕过的安全漏洞。
- 初始 HTML 不写任何
<button></button>，等 API 返回{ "can_approve": true, "node_id": "step_2" }后再插入 - 每个按钮必须带
data-action="approve"和data-node-id="step_2"，JS 统一监听document.addEventListener('click', ...)拼路径 - 点击后立即
btn.disabled = true; btn.textContent = '提交中...';，成功后再location.reload()或整节重 fetch
历史记录用 <details></details> 折叠，别堆满页面
移动端一拉到底全是审批意见，用户根本找不到当前要干啥。原生 <details></details> 不需要 JS，兼容性够用（Safari 旧版只差一句 el.open = true 补丁）。
DeepBI DHTML 页面生成器
下载
生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur
立即学习“前端免费学习笔记（深入）”；
- 每条历史包在
<details><summary>2024-05-20 14:32|张三|已通过</summary><p>意见：资料齐全</p></details> -
<summary></summary>里只放时间、人名、结果三要素，附件链接用<a href="/api/attach?id=xxx">查看附件.pdf</a> - 默认只展开最新一条，用 JS 找到
document.querySelector('details:last-of-type')设open = true
最容易被忽略的是：流程线样式必须基于 li 的伪元素，而不是给每个节点加 position: absolute 的 <div class="line">。一旦后端多加一个节点，所有坐标全乱，而且响应式断点一调就错位。</div>
