应使用 data-status 控制订单状态样式，避免 class 混乱；状态文案与颜色须统一从 STATUS_CONFIG 配置对象读取；隐藏已取消订单应过滤或用 aria-hidden+inert 而非 visibility: hidden；状态切换按钮需立即禁用并更新 data-status，失败时回滚。
订单状态用 data-status 而不是 class 控制样式
直接写 class="status-pending" 看似方便，但后续 JS 切换状态时容易漏掉 class 清理，导致样式错乱。用 data-status 作为唯一状态源，CSS 通过属性选择器响应：
li[data-status="pending"] .status-badge { background: #FFA726; }<br>li[data-status="shipped"] .status-badge { background: #4CAF50; }<br>li[data-status="cancelled"] .status-badge { background: #F44336; }这样 JS 只需改一个属性：orderEl.dataset.status = "shipped"，样式自动更新，无残留风险。
状态文案和颜色必须从配置对象统一读取
硬编码文案和颜色在多处出现（HTML、CSS、JS）会引发不一致。定义一个状态映射对象：
const STATUS_CONFIG = {<br> pending: { text: "待付款", color: "#FFA726" },<br> shipped: { text: "已发货", color: "#4CAF50" },<br> cancelled: { text: "已取消", color: "#F44336" }<br>};渲染列表时，用 STATUS_CONFIG[status].text 填文案，内联 style 设置 background-color 或动态加 class。改一种状态的文案或色值，只改一处。
避免用 visibility: hidden 隐藏“已取消”订单
用户可能需要导出全部订单（含已取消），但又不想在页面上显示。用 display: none 会彻底移除布局，影响 JS 获取元素高度或做动画；用 visibility: hidden 仍占位且无法被屏幕阅读器跳过。正确做法是：服务端或 JS 过滤时剔除，或添加 aria-hidden="true" + inert 属性（现代浏览器支持），再配合 CSS opacity: 0; pointer-events: none;。若必须保留在 DOM 中，用 data-inactive="true" 标记，让筛选逻辑可识别。
点击状态切换按钮时，要防重复提交和视觉滞后
用户连点“标记为已发货”按钮，后端可能收到多次请求。必须在点击后立即禁用按钮并更新 UI：
button.addEventListener("click", async () => {<br> button.disabled = true;<br> orderEl.dataset.status = "shipped"; // 立即更新状态标记<br> try {<br> await fetch("/api/orders/123/status", { method: "PATCH", body: JSON.stringify({ status: "shipped" }) });<br> } catch (err) {<br> orderEl.dataset.status = "pending"; // 失败则回滚标记<br> } finally {<br> button.disabled = false;<br> }<br>});不等接口返回就更新 DOM，用户感知更流畅；失败时主动还原 data-status，避免状态与实际不一致。
立即学习“前端免费学习笔记（深入）”；
状态标记的可靠性取决于数据源是否唯一，data-status 是最轻量又可控的锚点——别让它和 class、文本内容、JS 变量三头并存。 
