纯HTML仅能实现供应链静态展示层，需后端与数据库支持；推荐语义化ol+li构建时间轴，用CSS变量管理状态色，fetch需处理CORS、分页参数、字段映射及超时，预计时间必须由后端计算并传ISO格式时间。
纯 HTML 无法实现真正的供应链管理功能——它没有数据存储、状态更新、权限控制或实时追踪能力。所谓“HTML 供应链页面”，实际只是静态展示层，必须配合后端（如 Node.js/Python）和数据库（如 PostgreSQL/MySQL）才能跑起来。下面说清楚怎么搭这个展示层，以及哪些地方最容易被当成功能来用却根本动不了。
用 table 还是 div 布局订单节点？
供应链追踪页核心是「时间轴+状态流转」，比如：下单 → 仓库拣货 → 物流发出 → 签收。用 table 强行对齐会卡死后续扩展；用一堆 div + flex 又容易在 IE11 或旧版 Edge 上错位。
- 推荐用语义化
ol+li实现时间轴，每个li包含状态名、时间、操作按钮占位符 - 关键样式加
min-width: 200px防止中文缩写（如“签收”变“签…”） - 不要给状态色块写死
background: #4CAF50，改用 CSS 变量如--status-shipped: #2196F3，方便后期统一换主题 - 若需兼容 IE11，放弃
gap，改用margin控制节点间距
fetch() 调接口时为什么总拿不到物流更新？
很多教程直接贴一段 fetch('/api/tracking?id=123') 就完事，但真实场景下这行代码大概率报错或返回空。
- 后端接口必须支持 CORS，否则浏览器直接拦截——检查响应头有没有
Access-Control-Allow-Origin: * - 供应链系统常用分页拉取，别只传一个
id，要带page和limit参数，否则前端一加载就卡死 - 物流状态字段名不统一：有的叫
status_code，有的叫event，前端必须做映射，不能硬写data.status === 'DELIVERED' - 网络不稳定时，建议加 5 秒超时：
AbortSignal.timeout(5000)，不然用户会以为页面卡了
表格里显示「预计送达时间」但总是不准？
静态 HTML 页面无法计算动态时间，所有「预计」都得靠后端算好传过来。常见错误是前端用 Date.now() + 3 * 24 * 60 * 60 * 1000 硬加三天，结果忽略节假日、仓库发货延迟、跨境清关等变量。
立即学习“前端免费学习笔记（深入）”；
- 真正可用的方案：后端返回
estimated_delivery_at字段（ISO 8601 格式），前端只负责格式化显示 - 格式化别手写正则，用
toLocaleDateString('zh-CN')+toLocaleTimeString('zh-CN')，避免时区错乱 - 如果后端没给该字段，宁可留空或显示「待更新」，也不要瞎猜——客户投诉第一来源就是这里
- 注意时区：后端应统一存 UTC，前端根据用户本地时区渲染，别让上海用户看到「预计明天 02:00」其实是美国时间
最常被忽略的一点：供应链页面不是信息堆砌，而是异常优先级排序。比如「仓库超24小时未出库」要比「已发货」显眼三倍。HTML 层做不到自动判断，但 class 名得预留钩子，像 status--urgent 或 row--delayed——这些类名后面会被 JS 动态加上，现在就得规划好。
