推荐用布局审批流程图，语义清晰、自动伸缩、状态驱动样式；节点用；连接线由li:not(:last-child)::after生成；按钮动态插入并绑定data-action与data-node-id；历史记录用折叠，默认展开最新一条。

直接用

+ data-status 布局审批流程图，比画 div 圆圈靠谱得多——它能随节点增减自动伸缩，状态一改样式就变，JS 也好查、好绑、好刷新。

用

而不是

套流程节点

语义上

天然表达“有顺序的步骤”，浏览器和屏幕阅读器都认；CSS 里用 li:not(:last-child)::after 画连接线，不依赖绝对定位，换字体、调间距都不偏移。别再写一堆

然后 JS 算坐标连箭头了。

• 是唯一推荐的容器，每个环节用
• 状态值限定为 pending / approved / rejected / skipped，避免用 wait、doing 这类模糊词
• 后端返回的 JSON 必须带 status 字段，前端只做映射，不自己猜状态

按钮必须按权限动态渲染，不能靠 disabled 挡操作

用户右键检查元素删掉 disabled 就能点，或者 JS 状态没同步导致重复提交——这是线上最常被绕过的安全漏洞。

• 初始 HTML 不写任何 ，等 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

历史记录用

折叠，别堆满页面

移动端一拉到底全是审批意见，用户根本找不到当前要干啥。原生

不需要 JS，兼容性够用（Safari 旧版只差一句 el.open = true 补丁）。

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 每条历史包在
  2024-05-20 14:32|张三|已通过

  意见：资料齐全

• 里只放时间、人名、结果三要素，附件链接用 @#@#@#@#@#@#@#@#@#@0
• 默认只展开最新一条，用 JS 找到 document.querySelector('details:last-of-type') 设 open = true

最容易被忽略的是：流程线样式必须基于 li 的伪元素，而不是给每个节点加 position: absolute 的

。一旦后端多加一个节点，所有坐标全乱，而且响应式断点一调就错位。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！