结果与异常页

出错的时候，读者最需要的是知道发生了什么、以及现在能做什么。插图两样都不提供。

成功

提交成功

我们会在两个工作日内回复到你填写的邮箱。

返回列表查看示例详情 →

失败

失败页必须包含可操作的下一步和可追踪的标识。 "出错了，请重试"是没有信息的。

提交失败

附件超过 20 MB 上限。压缩后重试，或改为提供链接。

返回修改

示例错误编号：E-4013

404 与无权限

这个页面不存在

链接可能已经失效，或者地址拼错了。

回到首页

页内反馈

不是所有结果都需要整页。三种粒度，按干扰程度递增：

通知——非阻塞、自动消失、aria-live="polite"：

行内提示——常驻页内，说明当前状态：

存储空间剩余不足 10%，请及时清理。

对话框——阻塞，仅用于不可逆操作确认：

查看代码 · Source

<p><strong>通知</strong>——非阻塞、自动消失、<code>aria-live="polite"</code>：</p>
<div class="wx-cluster">
  <button class="wx-btn" type="button" onclick="wxToast('已复制到剪贴板')">普通</button>
  <button class="wx-btn" type="button" onclick="wxToast('已保存', {level:'success', label:'成功'})">成功</button>
  <button class="wx-btn" type="button" onclick="wxToast('网络连接中断', {level:'danger', label:'失败'})">失败</button>
</div>
<p style="margin-block-start:var(--space-6)"><strong>行内提示</strong>——常驻页内，说明当前状态：</p>
<div class="wx-alert wx-alert--warn"><span>存储空间剩余不足 10%，请及时清理。</span></div>
<p style="margin-block-start:var(--space-6)"><strong>对话框</strong>——阻塞，仅用于不可逆操作确认：</p>
<button class="wx-btn wx-btn--danger" type="button" data-wx-open="#confirm-del">删除项目</button>
<dialog class="wx-modal" id="confirm-del" aria-labelledby="cd-t">
  <h3 class="wx-modal__title" id="cd-t">删除这个项目？</h3>
  <div class="wx-modal__body"><p>项目及其 143 条内容将被永久删除，无法恢复。</p></div>
  <div class="wx-modal__actions">
    <button class="wx-btn" type="button" data-wx-close>取消</button>
    <button class="wx-btn wx-btn--danger" type="button" data-wx-close>确认删除</button>
  </div>
</dialog>

选择粒度的判据

问一句：读者不看到这条消息会有什么后果？没后果 → 通知；影响后续操作 → 行内提示；不可逆 → 对话框。默认用通知，对话框是最后手段。