蛛网之上 Above the Web
笔记 AIGC 快讯 Prompt 大师 任务书
GitHub ↗

平台工程

文档密集页两栏排版与对外截图脱敏

一句话:图多的说明/参考页塞进窄 prose 单栏,截图一张张竖着堆 → 桌面端又长又窄;正解是加宽容器 + 每个「说明+图」做左右两栏 grid、窄屏回落单栏。附带三条同场景复用纪律:对外截图脱敏「裁窗口外围 > 逐处打码」、空状态给成型卡片、无头 Chrome 截图做静态视觉自检。

事实记录(不可修改区)

主诊断:图多页别在窄栏里竖堆

反直觉点:窄栏(46rem)是为「正文可读行长」调的,读纯文字很舒服;但一旦每段配一张占满宽度的截图,窄栏就把图也压窄、被迫竖排,页面纵向被拉到两三屏,横向又空一半——「适合读字的宽度」不等于「适合图文并排的宽度」。

正解不是把图缩小(图会看不清),而是给图文一人一半:

<!-- 每个「说明 + 截图」单元 -->
<div class="step">
  <div class="step-text"> …标题 + 说明… </div>
  <figure><img src="…" loading="lazy" /><figcaption>…</figcaption></figure>
</div>
.spec { max-width: 60rem; }               /* 先加宽容器,腾出两栏空间 */
.step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); /* 图一侧略宽 */
  gap: 1.2rem 2.4rem;
  align-items: start;                      /* 图顶对齐标题,不被拉伸居中 */
  margin: 1.6em 0 2em;
}
@media (max-width: 760px) {                /* 窄屏回落单栏:图落到文字下方 */
  .step { grid-template-columns: 1fr; }
  .spec figcaption { text-align: center; }
}

要点:

纪律一:对外截图,裁窗口外围优于逐处打码

一句话律:对外发布的操作截图,先裁到只剩内容面板,再谈打码。 浏览器窗口外围是敏感信息的高发区,裁掉比逐处涂黑更干净、更不易漏。

三类高发泄露点(本次 6 张原图全中):

  1. 地址栏:SaaS 文档(钉钉 alidocs / 飞书等)分享链接常带 authCode / code / token 等登录态凭证,公开即等于把令牌贴上互联网,且撤回不干净;
  2. 侧栏 / 面包屑:组织名、团队名、成员头像(如「课研组 / 厦门鲸鹭潮起…」);
  3. 卡片 / 列表内容:内部知识库的 wiki 链接、他人文档地址。

处置顺序:能裁则裁(教学内容通常集中在中间/右侧面板,外围是浏览器 chrome 和无关列表)——裁完往往一处敏感信息都不剩,可读性反而更好(大分辨率截图大半是 OS 菜单栏和程序坞);裁不掉的孤立字段再纯色块覆盖。本次裁窗口顺带把体积从 14MB 压到 613KB。

判据补充:身份类信息(成员名、头像)是否算敏感看语境——本页规范正文本就拿真实姓名日期当命名范例(作者已确认公开),对应截图里的同名信息就不必打码;凭证类(authCode)则无条件处理。改动前把这类判断显式抛给作者拍板,不自作主张发或撤。

纪律二:空状态给成型卡片,不要悬空文字

列表页「暂无内容」若只是一句居中文字,夹在版块的重分隔线之间会显得像内容没加载出来(本次任务书列表 masthead 与归档区各有一条 2px 黑线,空文字悬在中间的大片空白里)。

改成一张虚线边框的成型卡片:主题标记(蛛网 emoji 呼应站名)+ 标题 + 一句引导 + 一个出口链接(去看归档 / 读交付标准)。空状态从「像坏了」变成「像刻意留白的引导位」。这是低成本高回报的观感项——空状态是真实会被看到的状态,值得当正式设计对待。

纪律三:静态视觉问题用无头 Chrome 自检

排版/观感类改动不能靠脑补,但也不必等真人看。本地就能闭环:

astro build && astro preview --port <p>       # 起本地预览
# 桌面 + 窄屏两种宽度各抓一张
chrome --headless=new --disable-gpu --hide-scrollbars \
       --window-size=1280,2400 --screenshot=out.png "http://localhost:<p>/<path>"

抓图后读图诊断(两栏是否成立、窄屏是否回落、有无溢出),改完再抓,直到两种宽度都对再推。

这是 Claude预览环境不派发滚动事件_滚动类功能无法行为验证_v1 结论的正向复用:那篇讲的是预览 iframe 不派发 scroll/动画事件、行为类功能无法在预览里验证,只能退到无头 Chrome / 真机;而静态版式恰好是无头 Chrome 的强项——不依赖滚动、不依赖动画时钟,一张 --screenshot 就能定性。行为验证退级用的同一把工具,拿来做视觉自检是顺水人情。

结果分析

关联文档

类型/平台工程主题/版式与组件