列表页

读者到列表页是来扫描并挑选的，不是来阅读的。每个条目要在半秒内回答"这是不是我要找的"。

条目：卡片的替代品

wx-entry 靠留白和单边线分组。信息顺序是元数据 → 标题 → 摘要：日期和分类在前，因为扫描时它们是过滤条件。

页面原型 B · 索引 / 列表阅读轨 · HTML 预览

2026-08-30 · 设计

留白不是空缺

留白是设计的一部分。足够的留白让内容呼吸、让层次清晰、让眼睛休息。
2026-08-24 · 排版

克制即力量

频率越低，力量越大。本例只把 accent 留给一个需要行动的节点；阅读轨上限是两处。

查看代码 · Source

<ol class="wx-list">
  <li><article class="wx-entry">
    <p class="wx-entry__meta">2026-08-30 · 设计</p>
    <h3 class="wx-entry__title"><a href="./pattern-detail.html">留白不是空缺</a></h3>
    <p>留白是设计的一部分。足够的留白让内容呼吸、让层次清晰、让眼睛休息。</p>
  </article></li>
  <li><article class="wx-entry wx-entry--ruled">
    <p class="wx-entry__meta">2026-08-24 · 排版</p>
    <h3 class="wx-entry__title"><a href="./pattern-detail.html">克制即力量</a></h3>
    <p>频率越低，力量越大。本例只把 accent 留给一个需要行动的节点；阅读轨上限是两处。</p>
  </article></li>
</ol>

连续流：时间线

当条目按时间连续排列、且读者会从头往下浏览时，wx-timeline 比独立条目更合适—— 一根线把它们连成一条流，而不是切成互不相干的块。

08-30

补齐组件清单，新增浮层与控件两类。
08-29

田野审计四个生产站点，吸收功能性文字色。

查看代码 · Source

<ol class="wx-timeline">
  <li class="wx-timeline__item">
    <span class="wx-timeline__dot" aria-hidden="true"></span>
    <div class="wx-timeline__content">
      <p class="wx-eyebrow"><time datetime="2026-08-30">08-30</time></p>
      <p>补齐组件清单，新增浮层与控件两类。</p>
    </div>
  </li>
  <li class="wx-timeline__item">
    <span class="wx-timeline__dot" aria-hidden="true"></span>
    <div class="wx-timeline__content">
      <p class="wx-eyebrow"><time datetime="2026-08-29">08-29</time></p>
      <p>田野审计四个生产站点，吸收功能性文字色。</p>
    </div>
  </li>
</ol>

筛选与排序

筛选栏是数据录入，按第三层规则走惯例。用 wx-toolbar 把它与内容用一条线分开。

查看代码 · Source

<div class="wx-toolbar" role="toolbar" aria-label="列表筛选与排序">
  <div class="wx-segmented" role="radiogroup" aria-label="视图">
    <button class="wx-segmented__option" type="button" role="radio" aria-checked="true">全部</button>
    <button class="wx-segmented__option" type="button" role="radio" aria-checked="false">设计</button>
    <button class="wx-segmented__option" type="button" role="radio" aria-checked="false">工程</button>
  </div>
  <span class="wx-toolbar__spacer"></span>
  <details class="wx-dropdown">
    <summary>排序：最新</summary>
    <ul class="wx-dropdown__menu">
      <li><button class="wx-dropdown__item" type="button">最新</button></li>
      <li><button class="wx-dropdown__item" type="button">最早</button></li>
      <li><button class="wx-dropdown__item" type="button">标题</button></li>
    </ul>
  </details>
</div>

分页

当前页不是填充色块，是更重的墨色 + 下划线——灰度可读，且不消耗 accent 预算。

查看代码 · Source

<nav class="wx-pagination" aria-label="分页">
  <ul class="wx-pagination__list">
    <li><span class="wx-pagination__link" aria-disabled="true" aria-label="上一页">←</span></li>
    <li><a class="wx-pagination__link" href="#" aria-current="page">1</a></li>
    <li><a class="wx-pagination__link" href="#">2</a></li>
    <li><a class="wx-pagination__link" href="#">3</a></li>
    <li><span class="wx-pagination__ellipsis">…</span></li>
    <li><a class="wx-pagination__link" href="#">12</a></li>
    <li><a class="wx-pagination__link" href="#">→</a></li>
  </ul>
  <span class="wx-pagination__total">共 143 条</span>
</nav>

空态

没有插图。一句说明加一个动作——插图是装饰性图像（被禁），而且推迟了真正有用的那句话。

没有匹配的条目

试着放宽筛选条件，或换一个关键词。

查看代码 · Source

<div class="wx-empty">
  <p class="wx-empty__title">没有匹配的条目</p>
  <p>试着放宽筛选条件，或换一个关键词。</p>
  <p style="margin-block-start:var(--space-6)"><button class="wx-btn" type="button">清除筛选</button></p>
</div>

表格型列表

只有水平分隔线，无外框、无竖线。数字右对齐并使用等宽数字。

名称	状态	条目
文辑	运行中	143
片语	运行中	2,081
知原	空闲	67