订单列表应使用语义化而非flex/grid，因其符合结构化数据本质，保障可访问性与维护性；状态需用css视觉强化并映射数字码；移动端通过媒体查询隐藏非核心列或展开；链接采用restful路径或命名路由，确保xss安全与无障碍支持。
订单列表用语义化表格还是 Flex/Grid？
直接用 <table> 最省事，也最合理——订单本质是结构化数据：每行一条记录，每列有明确含义（订单号、时间、状态、金额）。强行用 <code>div + flex 模拟表格，反而增加可访问性问题和维护成本。屏幕阅读器对 <table> 的支持成熟，<code><th> 自带作用域语义，排序、筛选逻辑也更直观。
<p>关键点：</p>
<ul><li><code><thead> 必须包裹 <code><tr><th>，不能只写 <code><th> 在外面
<li>每行 <code><td> 数量必须和 <code><th> 一致，否则视觉/语义错位
<li>状态列建议用 <code><span></span> 包裹并加 class（如 status-pending），方便 CSS 控制颜色和圆点标识
订单状态怎么显示才不翻车？
别用纯文字“待支付”“已发货”，用户扫一眼难分辨。状态需要视觉强化，但又不能靠图片（加载失败或缩放失真）。
推荐做法：
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 用
<span class="status status-shipped">已发货</span>，CSS 用background+color控制色块和文字反差 - 避免用
border-radius: 50%做圆点再加文字——小屏下文字会溢出，改用display: inline-flex; align-items: center;+::before伪元素画圆点 - 如果后端返回的是数字状态码（如
status: 2），前端必须做映射：{ 1: '待付款', 2: '已付款' }，别在 HTML 里硬写数字
移动端订单列表怎么不挤成一团？
桌面端能铺开 6 列，手机上必须折叠。别用 overflow-x: auto 拉横条——体验差，且 iOS Safari 对 <table> 的横向滚动支持不稳定。
<p>更可靠的方式：</p>
<ul>
<li>用媒体查询隐藏非核心列（如操作列、下单 IP），保留 <code>订单号、时间、状态、金额
<details><summary>更多</summary>...</details>，点击展开（兼容性好，无需 JS）<table> 外层包一层 <code><div style="overflow-x: auto;">，并加 <code>-webkit-overflow-scrolling: touch 提升 iOS 流畅度
点击订单跳转详情页，链接怎么写才安全？
别在 @#@#@#@#@#@#@#@#@#@0
<router-link :to="{ name: 'OrderDetail', params: { id: item.id } }"></router-link>
href 中插入未转义的变量，哪怕只是数字也要过一遍 encodeURIComponent（如果手动拼）另外，所有订单项的容器（<tr> 或 <code><li>）建议加 role="row" 和 tabindex="0"，让键盘用户也能回车触发跳转——这点常被忽略，但直接影响无障碍合规性。
