dsh-design-studio 0.7.0 → 0.8.0

package/lib/picker.js

@@ -707,6 +707,8 @@
       dark: hasDark(),
       changes: pending ? { count: pending.count, whole: pending.whole } : null,
     })
+    postTop()
+    if (document.readyState !== 'complete') addEventListener('load', postTop, { once: true }) // 顶栏的底色可能等样式表 / 字体载完才定
     if (shown) reveal()
   }
 
@@ -1429,7 +1431,18 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       return !c || c === 'transparent' || /^rgba\(.*,\s*0\)$/.test(c) ? '' : c
     }
     const de = document.documentElement
-    return bg(de) || bg(document.body) || (/dark/.test(getComputedStyle(de).colorScheme) ? '#121212' : '#fff')
+    return bg(de) || bg(document.body) || (schemeDark() ? '#121212' : '#fff')
+  }
+
+  /**
+   * 页面实际用的是深色配色吗（决定没写底色时画布是白的还是深的）：color-scheme（没写看 <meta name="color-scheme">）只有 dark，
+   * 或 light、dark 都写了而系统偏好深色
+   */
+  function schemeDark() {
+    let s = String(getComputedStyle(document.documentElement).colorScheme || 'normal')
+    if (s === 'normal') { const m = document.querySelector('meta[name="color-scheme"]'); s = m ? String(m.getAttribute('content') || '') : '' }
+    if (!/dark/.test(s)) return false
+    return !/light/.test(s) || matchMedia('(prefers-color-scheme: dark)').matches
   }
 
   async function capture(opts) {
@@ -1578,6 +1591,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
 
     try {
+      const top = topDark() // 和复制页面同一刻量（后面等图片、字体时页面可能又变了）
       const root = walk(de)
       // 字体：页面样式表里的 @font-face，只带用到的字族
       const faces = []
@@ -1621,7 +1635,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       ctx.fillRect(0, 0, canvas.width, canvas.height)
       ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
       const png = await new Promise((resolve, reject) => canvas.toBlob((b) => (b ? resolve(b) : reject(new Error('toBlob 失败'))), 'image/png'))
-      return { png, w: W, h: H, scale }
+      return { png, w: W, h: H, scale, top }
     } finally {
       box.remove()
     }
@@ -1633,7 +1647,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 整页图从文档顶上画起，链接加上滚动距离；只截视口时就是视口里的位置
       const links = linksOf().map((l) => (d.full ? { ...l, x: l.x + scrollX, y: l.y + scrollY } : l))
         .filter((l) => l.x < r.w && l.y < r.h && l.x + l.w > 0 && l.y + l.h > 0)
-      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links })
+      post({ type: 'captured', id: d.id, png: r.png, w: r.w, h: r.h, scale: r.scale, title: document.title, links, top: r.top })
     } catch (e) {
       post({ type: 'captured', id: d.id, error: String((e && e.message) || e) })
     }
@@ -1644,12 +1658,15 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   //   hscroll 超出屏幕（会横向滚动 / 被切掉） · clipped 文字被截断 · overflow 文字超出框 · overlap 文字叠在一起
   //   contrast 对比度不够 · tap 点击区太小 · tiny 字太小 · img 图片没加载出来 · fonts 字号太杂
   //   covered 被固定栏压住（滚到底也看不全） · tight 离固定栏太近 · jserr 页面脚本报错 · missing 样式表 / 脚本 / 字体没载出来
+  //   capsule 小程序右上角的胶囊（微信画的，页面盖不住）挡住了字或按钮
   // 有意为之的不报：省略号（text-overflow: ellipsis）、行数截断（line-clamp）、可以滚动的区域（轮播）、很淡的装饰大字。
 
   const CHECK_PER = 8 // 每类最多报几条
   const CHECK_MAX = 40
   const CHECK_ATOMS = 600 // 最多看多少个带字的元素
   const CLICKABLE = 'a[href],button,[role="button"],[role="tab"],[role="link"],input:not([type="hidden"]),select,textarea,summary,[onclick],[data-href]'
+  // 小程序右上角的胶囊：离屏幕顶 48（状态栏 44 + 4）、离右边 7、87×32（和右侧栏外框画的一样）
+  const CAP = { top: 48, right: 7, w: 87, h: 32 }
   let checkMarks = []
 
   const isOurs = (el) => SIG_SKIP.has(el.tagName)
@@ -1672,13 +1689,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     return o
   }
 
-  /** 'rgb(1, 2, 3)' / 'rgba(1, 2, 3, .5)' / 'color(srgb …)' → [r, g, b, a]；别的写法（oklch 之类浏览器已经换算过）认不出就 null */
+  /**
+   * 'rgb(1, 2, 3)' / 'rgba(1, 2, 3, .5)' / 'color(srgb …)' → [r, g, b, a]。
+   * oklch()、oklab()、lab()、lch()、hwb()、color(display-p3 …) 这些（算好的值保留原写法，Tailwind 4 默认就是 oklch）：交给 canvas 换成 sRGB。认不出就 null
+   */
+  const colorMemo = new Map()
+  let colorCtx = null
   function rgba(s) {
     const m = /^rgba?\(\s*([\d.]+)[,\s]+([\d.]+)[,\s]+([\d.]+)(?:\s*[,/]\s*([\d.]+%?))?\s*\)$/.exec(s)
     if (m) return [+m[1], +m[2], +m[3], m[4] == null ? 1 : m[4].endsWith('%') ? parseFloat(m[4]) / 100 : +m[4]]
     const c = /^color\(srgb\s+([\d.]+)\s+([\d.]+)\s+([\d.]+)(?:\s*\/\s*([\d.]+%?))?\s*\)$/.exec(s)
     if (c) return [c[1] * 255, c[2] * 255, c[3] * 255, c[4] == null ? 1 : c[4].endsWith('%') ? parseFloat(c[4]) / 100 : +c[4]]
-    return null
+    if (typeof s !== 'string' || !/^(?:oklch|oklab|lab|lch|hwb|hsla?|color)\(/.test(s)) return null
+    if (colorMemo.has(s)) return colorMemo.get(s)
+    let out = null
+    try {
+      if (!colorCtx) { const cv = document.createElement('canvas'); cv.width = cv.height = 1; colorCtx = cv.getContext('2d', { willReadFrequently: true }) }
+      const g = colorCtx
+      g.fillStyle = '#010203'
+      g.fillStyle = s
+      if (g.fillStyle !== '#010203') {
+        g.clearRect(0, 0, 1, 1)
+        g.fillRect(0, 0, 1, 1)
+        const d = g.getImageData(0, 0, 1, 1).data
+        out = [d[0], d[1], d[2], d[3] / 255]
+      }
+    } catch { out = null }
+    if (colorMemo.size > 500) colorMemo.clear()
+    colorMemo.set(s, out)
+    return out
   }
   const over = (top, under) => {
     const a = top[3]
@@ -1693,37 +1732,158 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   const MEDIA = new Set(['IMG', 'VIDEO', 'CANVAS', 'IFRAME', 'PICTURE', 'OBJECT', 'EMBED'])
   /**
-   * 字背后的底色：从字往下一层层叠背景色，遇到不透明的为止；中间有背景图、渐变、图片视频就说不准，返回 null。
-   * 字在屏幕里时按实际叠放顺序找（字下面压着的可能不是祖先，比如首屏背景视频）；不在屏幕里就顺着祖先找
+   * 字背后的底色，和字叠上去以后的颜色：从字往下一层层叠背景色，遇到不透明（且不在半透明的组里）的为止；
+   * 透明度按组算（见 compose），字的透明度也一样。中间有背景图、渐变、图片视频就说不准，返回 null。
+   * 字在屏幕里时按实际叠放顺序找（字下面压着的可能不是祖先，比如首屏背景视频、不可点的装饰底）；
+   * 不在屏幕里、或被滚动区裁掉的按位置找（paintedBelow）。pool：页面上画了底的元素（见 paintPool）
    */
-  function backdrop(el, pt) {
+  function backdrop(el, pt, fg, pool) {
     let chain = null
-    if (pt && pt.x >= 0 && pt.y >= 0 && pt.x < innerWidth && pt.y < innerHeight) {
-      const stack = document.elementsFromPoint(pt.x, pt.y)
+    if (pt.x >= 0 && pt.y >= 0 && pt.x < innerWidth && pt.y < innerHeight) {
+      const stack = paintedAt(pt.x, pt.y) // 不可点的背景层（装饰底图、卡片底色）也算
       const i = stack.indexOf(el)
       if (i >= 0) chain = stack.slice(i)
     }
-    if (!chain) { chain = []; for (let e = el; e && e.nodeType === 1; e = e.parentElement) chain.push(e) }
+    if (!chain) chain = paintedBelow(el, pt.x, pt.y, pool())
+    if (!chain) return null
+    const { base, explicit, onCanvas } = canvasBase()
     const layers = []
-    let base = null
+    let floor = false
     for (const e of chain) {
       if (isOurs(e)) continue
+      if (e !== el && !e.contains(el) && opacityChain(e) <= 0.01) continue // 整个透明的装饰层（淡入前、藏起来的）什么都没画
       if (MEDIA.has(e.tagName) || (e instanceof SVGElement && e.tagName.toLowerCase() !== 'svg')) return null
       const cs = getComputedStyle(e)
       if (cs.backgroundImage && cs.backgroundImage !== 'none') return null
       const c = rgba(cs.backgroundColor)
       if (!c) return null
-      if (c[3] > 0) {
-        if (c[3] >= 0.999) { base = c; break }
-        layers.push(c)
+      if (onCanvas(e) || c[3] <= 0) continue
+      layers.push([e, c])
+      if (c[3] >= 0.999 && opacityChain(e) >= 0.999) { floor = true; break }
+    }
+    if (!floor && darkOn && !explicit) return null // 深色模式下画布底色不一定是白的
+    layers.reverse()
+    return { color: compose(layers, base), fg: fg ? compose([...layers, [el, fg]], base) : null }
+  }
+
+  /**
+   * 页面上画了东西、看得见的元素（底色、背景图、图片视频、SVG 图形）和它们现在的框，按位置找背景用。
+   * 按最近的固定 / 吸顶那层（自己或祖先，没有是 null）分组，组里按竖直位置分段放（rows，每段 POOL_ROW px）
+   */
+  const POOL_ROW = 256
+  function paintPool() {
+    const groups = new Map()
+    const pins = new Map()
+    const held = new Map() // 祖先里有给固定定位当包含块的（transform 之类）：里面的 fixed 其实跟着它走
+    const heldIn = (e) => {
+      if (!e || e.nodeType !== 1) return false
+      if (!held.has(e)) held.set(e, holds(getComputedStyle(e), true) || heldIn(e.parentElement))
+      return held.get(e)
+    }
+    const pinOf = (e) => {
+      if (!e || e.nodeType !== 1) return null
+      if (pins.has(e)) return pins.get(e)
+      const pos = getComputedStyle(e).position
+      const v = pos === 'sticky' || (pos === 'fixed' && !heldIn(e.parentElement)) ? e : pinOf(e.parentElement)
+      pins.set(e, v)
+      return v
+    }
+    const all = [document.documentElement, ...(document.body ? [document.body, ...document.body.getElementsByTagName('*')] : [])]
+    for (const e of all) {
+      if (isOurs(e)) continue
+      const svg = e instanceof SVGElement && e.tagName.toLowerCase() !== 'svg'
+      const cs = getComputedStyle(e)
+      if (cs.visibility !== 'visible') continue
+      const c = rgba(cs.backgroundColor)
+      if (!svg && !MEDIA.has(e.tagName) && c && c[3] <= 0 && cs.backgroundImage === 'none') continue
+      const r = e.getBoundingClientRect()
+      if (r.width < 1 || r.height < 1) continue
+      const pin = pinOf(e)
+      if (!groups.has(pin)) groups.set(pin, { rows: new Map(), all: [] })
+      const g = groups.get(pin)
+      g.all.push([e, r])
+      for (let k = Math.floor(r.top / POOL_ROW), n = Math.floor(r.bottom / POOL_ROW); k <= n; k++) {
+        if (!g.rows.has(k)) g.rows.set(k, [])
+        g.rows.get(k).push([e, r])
       }
     }
-    if (!base) {
-      if (darkOn) return null // 深色模式下画布底色不一定是白的
-      base = [255, 255, 255, 1]
+    // 固定 / 吸顶的那些对这个字来说看得见吗：整体透明的不算（量过记着）；被它自己那一支（不包着字的那几层）裁光的不算，
+    // 和字共用的滚动区暂时裁掉的照算（字滚进来时它也跟着进来）
+    const gone = new Map()
+    const clear = (e) => {
+      if (!gone.has(e)) gone.set(e, opacityChain(e) <= 0.01)
+      return gone.get(e)
     }
-    for (let i = layers.length - 1; i >= 0; i--) base = over(layers[i], base)
-    return { color: base }
+    const shown = (e, r, el) => !clear(e) && !!restBox(e, true, el)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+    return { groups, pinOf, shown, clear }
+  }
+
+  /** 底色不透明、没有背景图、不在半透明组里：叠到它就到底了 */
+  function solidFloor(e) {
+    if (MEDIA.has(e.tagName) || e instanceof SVGElement) return false
+    const cs = getComputedStyle(e)
+    const c = rgba(cs.backgroundColor)
+    return !!c && c[3] >= 0.999 && cs.backgroundImage === 'none' && opacityChain(e) >= 0.999
+  }
+
+  /**
+   * 字所在这一点（视口坐标，可以在屏幕外、被滚动区裁掉）下面画着的，从字往下排：框盖住这一点、画在字下面的（祖先，或按层叠顺序在它下面的）；
+   * 只算它自己那一支的裁剪。字在能滚的区域（main、横向轮播）里没滚进来时，对那个区域外面的东西（和区域自己的底）来说，
+   * 字滚进来以后在区域露出来的那块里——按就近滚进来算位置（由里往外一层层挪进去）。
+   * 和字不在同一个固定 / 吸顶层里的跟着窗口走，字滚进来以后它在哪说不准：横向盖得住、画在字下面、又不在到底那层（字自己的底也算）下面的，
+   * 返回 null（不查）。不滚页面（滚了会打断页面自己的滚动、带着外层画布一起滚）
+   */
+  function paintedBelow(el, x, y, pool) {
+    const mine = new Set([null]) // 和字一起动的：不固定的，和字所在的各层固定 / 吸顶
+    for (let p = pool.pinOf(el); p; p = pool.pinOf(p.parentElement)) mine.add(p)
+    // 字外面会裁的各层（由里往外）和字一层层挪进去以后的位置：pts[j] = 挪进了前 j 层
+    const boxes = []
+    const pts = [{ x, y }]
+    for (let e = el.parentElement; e && e !== document.body && e !== document.documentElement; e = e.parentElement) {
+      const cs = getComputedStyle(e)
+      const cx = cs.overflowX !== 'visible', cy = cs.overflowY !== 'visible'
+      if (!cx && !cy) continue
+      const r = e.getBoundingClientRect()
+      const kx = e.offsetWidth ? r.width / e.offsetWidth : 1 // 这层实际的缩放（transform、zoom），和 restBox 一样换成视口像素
+      const ky = e.offsetHeight ? r.height / e.offsetHeight : 1
+      const l = r.left + e.clientLeft * kx, t = r.top + e.clientTop * ky
+      const q = pts[pts.length - 1]
+      boxes.push(e)
+      pts.push({ x: cx ? Math.min(Math.max(q.x, l + 1), l + e.clientWidth * kx - 1) : q.x, y: cy ? Math.min(Math.max(q.y, t + 1), t + e.clientHeight * ky - 1) : q.y })
+    }
+    // c 看到的字在哪：c 外面那几层（c 自己能滚的话也算，它的底不跟着内容走）挪进去以后
+    const ptFor = (c) => { let j = 0; while (j < boxes.length && (boxes[j] === c || !boxes[j].contains(c))) j++; return pts[j] }
+    const near = new Set()
+    for (const pin of mine) {
+      const g = pool.groups.get(pin)
+      if (!g) continue
+      for (const k of new Set(pts.map((p) => Math.floor(p.y / POOL_ROW)))) for (const it of g.rows.get(k) || []) near.add(it)
+    }
+    const below = []
+    for (const [c, r] of near) {
+      if (c === el || el.contains(c)) continue
+      const p = ptFor(c)
+      if (p.x < r.left || p.x > r.right || p.y < r.top || p.y > r.bottom) continue
+      if (!paintsOver(el, c)) continue // 盖在字上面的不算
+      if (!c.contains(el)) {
+        const vis = restBox(c, true, el)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+        if (!vis || p.x < vis.l || p.x > vis.r || p.y < vis.t || p.y > vis.b) continue
+      }
+      below.push(c)
+    }
+    below.sort((a, b) => (paintsOver(a, b) ? -1 : paintsOver(b, a) ? 1 : 0))
+    const { onCanvas } = canvasBase()
+    const floor = [el, ...below].find((c) => !onCanvas(c) && solidFloor(c))
+    const out = pts[pts.length - 1].x // 各层都挪进去以后的横向位置
+    for (const [pin, g] of pool.groups) {
+      if (mine.has(pin)) continue
+      for (const [c, r] of g.all) {
+        if (out < r.left || out > r.right || pool.clear(c) || el.contains(c)) continue
+        if (floor && paintsOver(floor, c)) continue // 在到底那层下面（同一层的字都一样，记着）
+        if (paintsOver(el, c) && pool.shown(c, r, el)) return null
+      }
+    }
+    return [el, ...below]
   }
 
   /** 自己那几段文字在屏幕上的矩形（每行一块） */
@@ -2137,10 +2297,12 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       }
     }
 
-    // 4. 对比度（WCAG：正文 4.5，大字 3）
+    // 4. 对比度（WCAG：正文 4.5，大字 3）。取底色那段装一次「量画着什么」的临时样式（见 withProbe），量完撤掉
     const sizes = new Map()
-    const tinyMin = kind === 'app' ? 10 : kind === 'tablet' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
-    for (const a of atoms) {
+    const tinyMin = kind === 'app' || kind === 'miniprogram' ? 10 : kind === 'tablet' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
+    let pool = null
+    const poolOf = () => pool || (pool = paintPool()) // 有字不在屏幕里才建
+    withProbe(() => { for (const a of atoms) {
       const { el, cs } = a
       const px = parseFloat(cs.fontSize) || 0
       sizes.set(Math.round(px * 2) / 2, (sizes.get(Math.round(px * 2) / 2) || 0) + 1)
@@ -2153,17 +2315,17 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       const op = opacityChain(el)
       // 半透明还在变的（淡入动画、跟着滚动渐显的）量的是中间状态，不算
       if (op < 0.999 && (!inView(el) || animating(el))) continue
-      const bd = backdrop(el, { x: (r0.l + r0.r) / 2, y: (r0.t + r0.b) / 2 })
-      if (!bd) continue
-      fg = over([fg[0], fg[1], fg[2], fg[3] * op], bd.color)
+      const bd = backdrop(el, { x: (r0.l + r0.r) / 2, y: (r0.t + r0.b) / 2 }, fg, poolOf)
+      if (!bd || !bd.fg) continue
+      fg = bd.fg
       const cr = ratio(fg, bd.color)
       const bold = +cs.fontWeight >= 700
       const need = px >= 24 || (bold && px >= 18.66) ? 3 : 4.5
       if (cr < need - 0.05) add('contrast', el, { ratio: Math.round(cr * 100) / 100, need, fg: hex(fg), bg: hex(bd.color) }, cr < need * 0.75 ? 2 : 1)
-    }
+    } })
 
-    // 5. 点击区太小（App / 平板 44，网页 24；文字中间的链接不算）
-    const minTap = kind === 'app' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' ? 24 : 0
+    // 5. 点击区太小（App / 小程序 / 平板 44，网页 24；文字中间的链接不算）
+    const minTap = kind === 'app' || kind === 'miniprogram' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' ? 24 : 0
     if (minTap) {
       const small = []
       for (const el of body.querySelectorAll(CLICKABLE)) {
@@ -2255,6 +2417,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       for (const f of document.fonts || []) if (f.status === 'error') add('missing', null, { what: 'font', src: String(f.family || '').replace(/['"]/g, '') }, 1)
     } catch { /* 老浏览器 */ }
 
+    // 13. 小程序：右上角胶囊挡住的字和按钮。不固定的按没滚时的位置算（滚下去本来就会从胶囊下面过）
+    if (kind === 'miniprogram') capsuleCheck(add, atoms, vw)
+
     issues.sort((x, y) => y.sev - x.sev)
     const se0 = se()
     return {
@@ -2263,6 +2428,383 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
+  /**
+   * 元素在「各层都没滚」时露出来的那块（视口坐标）：窗口、内部滚动区滚过的量加回去，被外层裁掉的去掉。
+   * 滚动量、边框都按那层实际的缩放（transform、zoom）换成视口像素；裁剪按 padding box、只裁 overflow 不是 visible 的那个方向。
+   * 绝对 / 固定定位的只受包含块和更外面的管；固定 / 吸顶的那层按现在看到的位置算，它外面的滚动不管、裁剪照算。全被裁掉返回 null。
+   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）
+   */
+  function restBox(el, now = false, upto = null) {
+    const chain = []
+    let mode = ''
+    let pinned = false
+    for (let e = el; e && e !== document.documentElement; e = e.parentElement) {
+      if (upto && e !== el && e.contains(upto)) break
+      const cs = getComputedStyle(e)
+      if (e !== el) {
+        if ((mode === 'absolute' && !holds(cs, false)) || (mode === 'fixed' && !holds(cs, true))) continue
+        const r = e.getBoundingClientRect()
+        const kx = e.offsetWidth ? r.width / e.offsetWidth : 1
+        const ky = e.offsetHeight ? r.height / e.offsetHeight : 1
+        const cx = e !== document.body && cs.overflowX !== 'visible'
+        const cy = e !== document.body && cs.overflowY !== 'visible'
+        chain.push({
+          sx: pinned || now ? 0 : e.scrollLeft * kx,
+          sy: pinned || now ? 0 : e.scrollTop * ky,
+          clip: cx || cy ? {
+            l: cx ? r.left + e.clientLeft * kx : -Infinity, r: cx ? r.left + (e.clientLeft + e.clientWidth) * kx : Infinity,
+            t: cy ? r.top + e.clientTop * ky : -Infinity, b: cy ? r.top + (e.clientTop + e.clientHeight) * ky : Infinity,
+          } : null,
+        })
+      }
+      if (cs.position === 'fixed' || cs.position === 'sticky') pinned = true
+      mode = cs.position
+    }
+    let dx = pinned || now ? 0 : scrollX
+    let dy = pinned || now ? 0 : scrollY
+    let box = { l: -Infinity, r: Infinity, t: -Infinity, b: Infinity }
+    // 从外往里：每层的位置跟着它外面各层滚过的量走，它自己滚过的量只挪它里面的
+    for (let i = chain.length - 1; i >= 0; i--) {
+      const c = chain[i]
+      if (c.clip) box = { l: Math.max(box.l, c.clip.l + dx), r: Math.min(box.r, c.clip.r + dx), t: Math.max(box.t, c.clip.t + dy), b: Math.min(box.b, c.clip.b + dy) }
+      dx += c.sx
+      dy += c.sy
+    }
+    return (r) => {
+      const o = { l: Math.max(box.l, r.l + dx), r: Math.min(box.r, r.r + dx), t: Math.max(box.t, r.t + dy), b: Math.min(box.b, r.b + dy) }
+      return o.r - o.l > 0 && o.b - o.t > 0 ? o : null
+    }
+  }
+
+  function capsuleCheck(add, atoms, vw) {
+    const cap = { l: vw - CAP.right - CAP.w, r: vw - CAP.right, t: CAP.top, b: CAP.top + CAP.h }
+    // 伸进胶囊多少（横竖都要伸进 2px 以上才算）：按「各层都没滚」时露出来的那块量
+    const into = (r) => {
+      if (!r) return 0
+      const ow = Math.min(r.r, cap.r) - Math.max(r.l, cap.l)
+      const oh = Math.min(r.b, cap.b) - Math.max(r.t, cap.t)
+      return ow > 2 && oh > 2 ? Math.round(Math.min(ow, r.r - cap.l)) : 0
+    }
+    const hit = new Set()
+    const check = (el, rects) => {
+      if (hiddenChain(el) || [...hit].some((h) => h.contains(el) || el.contains(h))) return
+      const rest = restBox(el)
+      const px = Math.max(0, ...rects.map((r) => into(rest(r))))
+      if (!px) return
+      hit.add(el)
+      add('capsule', el, { px, x: Math.round(cap.l) }, 2)
+    }
+    for (const el of document.body.querySelectorAll(CLICKABLE)) {
+      if (isOurs(el) || el.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      const r = el.getBoundingClientRect()
+      if (r.width >= 1 && r.height >= 1) check(el, [{ l: r.left, r: r.right, t: r.top, b: r.bottom }])
+    }
+    for (const a of atoms) check(a.el, a.rects)
+  }
+
+  /**
+   * 最底下的画布：html（没有就 body）的底色铺满整个窗口。html 有底色或背景图时画布用 html 的、body 的背景照常算；
+   * 都没有时 body 的底色传到画布上。onCanvas(e)：它自己的底色就是画布，叠的时候别再算一遍。explicit：页面自己写了底色
+   */
+  function canvasBase() {
+    if (probe && probe.canvas) return probe.canvas
+    const de = document.documentElement
+    const dcs = getComputedStyle(de)
+    const htmlBg = rgba(dcs.backgroundColor)
+    const htmlHas = (!!htmlBg && htmlBg[3] > 0) || dcs.backgroundImage !== 'none'
+    const bodyBg = document.body ? rgba(getComputedStyle(document.body).backgroundColor) : null
+    const blank = schemeDark() ? [18, 18, 18, 1] : [255, 255, 255, 1]
+    const can = htmlHas ? htmlBg : bodyBg
+    const explicit = !!can && can[3] > 0
+    const out = { base: explicit ? (can[3] < 1 ? over(can, blank) : can) : blank, explicit, onCanvas: (e) => e === de || (e === document.body && !htmlHas) }
+    if (probe) probe.canvas = out
+    return out
+  }
+
+  /**
+   * 从下往上叠 [元素, 颜色] 这些层，透明度和浏览器一样按组算：opacity < 1 的元素连同它里面的先合成（从全透明起），再整体变淡叠下去。
+   * 元素的祖先不在层里（子元素伸出了它的框）也照算。base 是最底下的颜色（不透明），返回叠完的 [r, g, b, 1]
+   */
+  function compose(layers, base) {
+    const pre = (c) => [c[0] * c[3], c[1] * c[3], c[2] * c[3], c[3]]
+    const ov = (t, u) => [t[0] + u[0] * (1 - t[3]), t[1] + u[1] * (1 - t[3]), t[2] + u[2] * (1 - t[3]), t[3] + u[3] * (1 - t[3])]
+    const stack = [{ owner: null, o: 1, c: [0, 0, 0, 0] }]
+    const close = () => { const g = stack.pop(); const up = stack[stack.length - 1]; up.c = ov(g.c.map((v) => v * g.o), up.c) }
+    const memo = new Map()
+    const groupsOf = (e) => {
+      if (memo.has(e)) return memo.get(e)
+      const a = []
+      for (let p = e; p && p.nodeType === 1; p = p.parentElement) { const o = +getComputedStyle(p).opacity; if (o < 1) a.unshift([p, o]) }
+      memo.set(e, a)
+      return a
+    }
+    for (const [e, col] of layers) {
+      const want = groupsOf(e)
+      let k = 0
+      while (k < want.length && k + 1 < stack.length && stack[k + 1].owner === want[k][0]) k++
+      while (stack.length > k + 1) close()
+      for (let i = k; i < want.length; i++) stack.push({ owner: want[i][0], o: want[i][1], c: [0, 0, 0, 0] })
+      if (col && col[3] > 0) { const g = stack[stack.length - 1]; g.c = ov(pre(col), g.c) }
+    }
+    while (stack.length > 1) close()
+    const c = ov(stack[0].c, base)
+    return [c[0], c[1], c[2], 1]
+  }
+
+  /**
+   * 顶栏右边（胶囊那块）是不是深色：是的话外框画白色胶囊（和微信 navigationBarTextStyle: white 一样）。
+   * 页面写了 <meta name="dsh-capsule" content="white|black"> 就照它；不然从下往上叠胶囊中心那点的各层：
+   * 底色、渐变（取各色标的平均）、图片 / 视频 / canvas（按 object-fit / object-position 画到小画布上取那块的平均，跨域取不到就跳过）。
+   * 透明度和浏览器一样按组算：opacity < 1 的元素连同里面的先合成，再整体变淡。装饰 SVG 跳过。
+   * 导出带外框的图也用这个结果（截图复制页面那一刻量的），两边一致
+   */
+  function topDark() {
+    try {
+      const m = document.querySelector('meta[name="dsh-capsule"]')
+      const say = m ? String(m.getAttribute('content') || '').trim().toLowerCase() : ''
+      if (say === 'white' || say === 'black') return say === 'white'
+      const x = innerWidth - CAP.right - CAP.w / 2
+      const y = CAP.top + CAP.h / 2
+      const hits = paintedAt(x, y).filter((e) => !isOurs(e) && !(e instanceof SVGElement)).reverse() // 从下往上
+      const { base, onCanvas } = canvasBase()
+      const layers = []
+      for (const e of hits) {
+        const cs = getComputedStyle(e)
+        for (const l of [onCanvas(e) ? null : rgba(cs.backgroundColor), gradTone(cs.backgroundImage), MEDIA.has(e.tagName) ? mediaTone(e, cs) : null]) if (l) layers.push([e, l])
+      }
+      const c = compose(layers, base)
+      return 0.299 * c[0] + 0.587 * c[1] + 0.114 * c[2] < 140
+    } catch { return false }
+  }
+  /**
+   * 量「这一点上画着什么」的那段时间：临时加一张样式表（放在层里，盖得过页面没分层的 !important）把 pointer-events 全设成 auto，
+   * 命中测试就不会跳过不可点的背景层；量完撤掉——不改页面的 DOM，页面的 MutationObserver 不会知道。
+   * 还盖不过的（行内 !important、页面更早的层里写的）先列出来，paintedAt 按位置补。fn 得是同步的；嵌套调用共用一次
+   */
+  let probe = null
+  function withProbe(fn) {
+    if (probe) return fn()
+    const was = [...document.adoptedStyleSheets]
+    let sheet = null
+    try {
+      sheet = new CSSStyleSheet()
+      sheet.replaceSync('@layer dsh-design-probe{*{pointer-events:auto!important}}')
+      document.adoptedStyleSheets = [...was, sheet]
+    } catch { sheet = null }
+    try {
+      const extra = []
+      for (const e of [document.documentElement, document.body, ...(document.body ? document.body.querySelectorAll('*') : [])]) {
+        if (!e || isOurs(e) || e instanceof SVGElement) continue
+        const cs = getComputedStyle(e)
+        if (cs.pointerEvents === 'none' && cs.visibility === 'visible') extra.push(e)
+      }
+      probe = { extra, layers: new Map(), paths: new Map(), pairs: new Map(), canvas: null } // 后几个是量的这段时间里的缓存（页面不会变）
+      return fn()
+    } finally {
+      probe = null
+      if (sheet) document.adoptedStyleSheets = was
+    }
+  }
+  /** 这一点上画着的元素（从上往下）：不可点的背景层也算；命中测试漏掉的按位置找出来、估个上下顺序插进去（被外层裁掉的不算） */
+  function paintedAt(x, y) {
+    return withProbe(() => {
+      const list = document.elementsFromPoint(x, y)
+      for (const e of probe.extra) {
+        if (list.includes(e)) continue
+        const r = e.getBoundingClientRect()
+        if (x < r.left || x > r.right || y < r.top || y > r.bottom) continue
+        const vis = restBox(e, true)({ l: r.left, r: r.right, t: r.top, b: r.bottom })
+        if (!vis || x < vis.l || x > vis.r || y < vis.t || y > vis.b) continue
+        const i = list.findIndex((h) => paintsOver(e, h))
+        list.splice(i < 0 ? list.length : i, 0, e)
+      }
+      return list
+    })
+  }
+  /** 会建层叠上下文的元素：z-index 只在它里面比，里面的东西整块跟着它排 */
+  function stackRoot(e, cs) {
+    if (e === document.documentElement) return true
+    const zi = cs.zIndex !== 'auto'
+    const p = e.parentElement
+    return (zi && (cs.position !== 'static' || (!!p && /flex|grid/.test(getComputedStyle(p).display)))) || cs.position === 'fixed' || cs.position === 'sticky' ||
+      +cs.opacity < 1 || moved(cs) || cs.filter !== 'none' || cs.perspective !== 'none' || cs.isolation === 'isolate' || cs.mixBlendMode !== 'normal' ||
+      (!!cs.clipPath && cs.clipPath !== 'none') || (!!cs.maskImage && cs.maskImage !== 'none') || (!!cs.backdropFilter && cs.backdropFilter !== 'none') ||
+      /paint|layout|strict|content/.test(cs.contain) || /transform|scale|translate|rotate|opacity|filter|perspective|z-index/.test(cs.willChange)
+  }
+  /** 能给绝对定位（fixed：给固定定位）当包含块的：定位了的，或 transform / perspective / filter / contain / will-change 这些 */
+  function holds(cs, fixed) {
+    return (!fixed && cs.position !== 'static') || moved(cs) || cs.perspective !== 'none' || cs.filter !== 'none' ||
+      (!!cs.backdropFilter && cs.backdropFilter !== 'none') || /paint|layout|strict|content/.test(cs.contain) ||
+      /transform|scale|translate|rotate|perspective|filter/.test(cs.willChange)
+  }
+  /** 变换过的：transform，或单独写的 scale / translate / rotate */
+  function moved(cs) {
+    return cs.transform !== 'none' || (!!cs.scale && cs.scale !== 'none') || (!!cs.translate && cs.translate !== 'none') || (!!cs.rotate && cs.rotate !== 'none')
+  }
+  /**
+   * a 画在 b 上面吗（命中测试漏掉的那几个用来估位置）：祖先在下、后代在上（负 z-index 跑到不建上下文的祖先底下的除外）；不相干的找两者共同的层叠上下文，
+   * 各取在它里面代表自己的那个（往下第一个自己建上下文的，没有就是路上离自己最近的定位了的），比层级（负 z < 普通流 < 定位 / z 0 < 正 z），一样按文档顺序
+   */
+  function paintsOver(a, b) {
+    const memo = probe && probe.pairs
+    let row = memo && memo.get(a)
+    if (row && row.has(b)) return row.get(b)
+    const v = paintsOverNow(a, b)
+    if (memo) { if (!row) memo.set(a, (row = new Map())); row.set(b, v) }
+    return v
+  }
+  /** 叠放用到的几样（建不建层叠上下文、z-index、定位），量的这段时间里记着 */
+  function layerOf(e) {
+    const m = probe && probe.layers
+    let v = m && m.get(e)
+    if (v) return v
+    const cs = getComputedStyle(e)
+    v = { root: stackRoot(e, cs), z: parseInt(cs.zIndex, 10), pos: cs.position }
+    if (m) m.set(e, v)
+    return v
+  }
+  /** 从 html 到它的那串祖先（含自己），量的这段时间里记着 */
+  function pathOf(e) {
+    const m = probe && probe.paths
+    let v = m && m.get(e)
+    if (v) return v
+    v = e.parentElement ? [...pathOf(e.parentElement), e] : [e]
+    if (m) m.set(e, v)
+    return v
+  }
+  function paintsOverNow(a, b) {
+    // 后代 d 画在祖先 anc 底下：anc 自己不建层叠上下文，而 d 所在的、紧挨着 anc 的那个上下文是负 z-index 的（整块画到外面那层的最底下）
+    const under = (anc, d) => {
+      if (layerOf(anc).root) return false
+      let top = null
+      for (let x = d; x && x !== anc; x = x.parentElement) if (layerOf(x).root) top = x
+      return !!top && layerOf(top).z < 0
+    }
+    if (a.contains(b)) return under(a, b)
+    if (b.contains(a)) return !under(b, a)
+    const pa = pathOf(a), pb = pathOf(b)
+    let common = 0
+    for (let i = 0; i < pa.length && pa[i] === pb[i]; i++) if (layerOf(pa[i]).root) common = i
+    const rep = (path) => {
+      let pos = null
+      for (let k = common + 1; k < path.length; k++) {
+        const v = layerOf(path[k])
+        if (v.root) return { el: path[k], lv: Number.isFinite(v.z) && v.z !== 0 ? (v.z < 0 ? v.z - 1 : v.z + 1) : 1 }
+        if (v.pos !== 'static') pos = path[k] // 定位了没建上下文的：各自按文档顺序排，取离自己最近的那个
+      }
+      return pos ? { el: pos, lv: 1 } : { el: path[path.length - 1], lv: 0 }
+    }
+    const ra = rep(pa), rb = rep(pb)
+    if (ra.lv !== rb.lv) return ra.lv > rb.lv
+    const [x, y] = ra.el === rb.el ? [a, b] : [ra.el, rb.el]
+    return !!(y.compareDocumentPosition(x) & Node.DOCUMENT_POSITION_FOLLOWING)
+  }
+  /** 渐变 → 各色标的平均（rgb() 以外的写法也认，见 rgba）；没有渐变 / 只有图片地址 → null */
+  function gradTone(bi) {
+    if (!bi || bi === 'none' || !/gradient\(/.test(bi)) return null
+    const cs = (bi.match(/(?:rgba?|hsla?|hwb|lab|lch|oklab|oklch|color)\([^()]*\)/g) || []).map(rgba).filter(Boolean)
+    if (!cs.length) return null
+    const a = cs.reduce((s, c) => s + c[3], 0) / cs.length
+    if (a <= 0) return [0, 0, 0, 0]
+    const ch = (k) => cs.reduce((s, c) => s + c[k] * c[3], 0) / (a * cs.length)
+    return [ch(0), ch(1), ch(2), a]
+  }
+  /** 图片 / 视频 / canvas 在胶囊那块的平均色：按内容框、object-fit、object-position 摆，裁在内容框里；没载完、跨域取不到 → null */
+  function mediaTone(e, cs) {
+    try {
+      if (!/^(IMG|VIDEO|CANVAS)$/.test(e.tagName)) return null
+      const nw = e.naturalWidth || e.videoWidth || e.width
+      const nh = e.naturalHeight || e.videoHeight || e.height
+      if (!nw || !nh) return null
+      const r = e.getBoundingClientRect()
+      const k = e.offsetWidth ? r.width / e.offsetWidth : 1
+      const n = (v) => parseFloat(v) || 0
+      const cl = r.left + (n(cs.borderLeftWidth) + n(cs.paddingLeft)) * k
+      const ct = r.top + (n(cs.borderTopWidth) + n(cs.paddingTop)) * k
+      const cw = r.right - (n(cs.borderRightWidth) + n(cs.paddingRight)) * k - cl
+      const ch = r.bottom - (n(cs.borderBottomWidth) + n(cs.paddingBottom)) * k - ct
+      if (cw <= 0 || ch <= 0) return null
+      const fit = cs.objectFit || 'fill'
+      let w = cw, h = ch
+      if (fit !== 'fill') {
+        let z = fit === 'cover' ? Math.max(cw / nw, ch / nh) : fit === 'none' ? k : Math.min(cw / nw, ch / nh)
+        if (fit === 'scale-down') z = Math.min(k, z)
+        w = nw * z
+        h = nh * z
+      }
+      // object-position 算好的值是「横 竖」两项，每项是百分比、像素或 calc(百分比 ± 像素)（right 0 bottom 20px → 100% calc(100% - 20px)）；认不出的按居中
+      const toks = []
+      let depth = 0, cur = ''
+      for (const ch of String(cs.objectPosition || '')) {
+        if (ch === '(') depth++
+        else if (ch === ')') depth--
+        if (/\s/.test(ch) && !depth) { if (cur) toks.push(cur); cur = '' } else cur += ch
+      }
+      if (cur) toks.push(cur)
+      const [px, py] = toks.length === 2 ? toks : []
+      const WORD = { left: 0, top: 0, center: 50, right: 100, bottom: 100 }
+      const at = (v, free) => {
+        if (!v) return free / 2
+        if (v in WORD) return (free * WORD[v]) / 100
+        let pct = 0, pix = 0, ok = false
+        for (const m of v.matchAll(/([+-])?\s*(\d*\.?\d+)(%|px)/g)) { const n = (m[1] === '-' ? -1 : 1) * parseFloat(m[2]); if (m[3] === '%') pct += n; else pix += n; ok = true }
+        const r = (free * pct) / 100 + pix * k
+        return ok && Number.isFinite(r) ? r : free / 2
+      }
+      const ox = cl + at(px, cw - w)
+      const oy = ct + at(py, ch - h)
+      const c = document.createElement('canvas')
+      c.width = 22
+      c.height = 8
+      const g = c.getContext('2d')
+      const capL = innerWidth - CAP.right - CAP.w
+      const sx = c.width / CAP.w
+      const sy = c.height / CAP.h
+      g.beginPath()
+      g.rect((cl - capL) * sx, (ct - CAP.top) * sy, cw * sx, ch * sy)
+      g.clip()
+      g.drawImage(e, (ox - capL) * sx, (oy - CAP.top) * sy, w * sx, h * sy)
+      const d = g.getImageData(0, 0, c.width, c.height).data
+      let R = 0, G = 0, B = 0, A = 0
+      for (let i = 0; i < d.length; i += 4) { const a = d[i + 3] / 255; R += d[i] * a; G += d[i + 1] * a; B += d[i + 2] * a; A += a }
+      return A > 0 ? [R / A, G / A, B / A, A / (d.length / 4)] : [0, 0, 0, 0]
+    } catch { return null }
+  }
+  let lastTop = null
+  const postTop = () => { const dk = topDark(); if (dk !== lastTop) { lastTop = dk; post({ type: 'top', dark: dk }) } }
+  // 顶栏的颜色会变：切主题 / 调色的过渡放完、滚动后顶栏变实色、点了换状态、窗口换尺寸（媒体查询）、图片换了——过一下再量。
+  // 节流：一直滚也每 120ms 量一次；这段时间里又有动静就再补量一次（页面在 rAF 里换样式的也赶得上）
+  let topTimer = 0
+  let topAgain = false
+  const queueTop = () => {
+    if (topTimer) { topAgain = true; return }
+    const run = () => { postTop(); if (topAgain) { topAgain = false; topTimer = setTimeout(run, 120) } else topTimer = 0 }
+    topTimer = setTimeout(run, 120)
+  }
+  // 图片的 load 传不到 window（load 事件的路径到 document 为止），所以挂在 document 上；resize 只在 window 上
+  for (const ev of ['transitionend', 'animationend', 'scroll', 'click', 'load', 'error', 'loadeddata']) document.addEventListener(ev, queueTop, { capture: true, passive: true })
+  addEventListener('resize', queueTop, { passive: true })
+  try { matchMedia('(prefers-color-scheme: dark)').addEventListener('change', queueTop) } catch { /* 老浏览器 */ } // 系统换了深浅色
+
+  /** 无头浏览器截图用：右上角画上微信的胶囊（真机上它盖在页面上面）。ghost 半透明，透出下面被挡住的东西；别的值撤掉 */
+  let capEl = null
+  function showCapsule(how) {
+    if (capEl) { capEl.remove(); capEl = null }
+    if (how !== 'solid' && how !== 'ghost') return null
+    const white = topDark()
+    const fg = white ? '#fff' : '#000'
+    const soft = white ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.15)'
+    const h = document.createElement('dsh-design-fx')
+    h.style.cssText = `position:fixed;top:${CAP.top}px;right:${CAP.right}px;width:${CAP.w}px;height:${CAP.h}px;z-index:2147483646;pointer-events:none;opacity:${how === 'ghost' ? 0.5 : 1}`
+    h.attachShadow({ mode: 'closed' }).innerHTML = `<svg width="${CAP.w}" height="${CAP.h}" viewBox="0 0 ${CAP.w} ${CAP.h}" style="display:block;overflow:visible">` +
+      `<rect x=".25" y=".25" width="${CAP.w - 0.5}" height="${CAP.h - 0.5}" rx="${CAP.h / 2 - 0.25}" fill="${white ? 'rgba(0,0,0,.15)' : 'rgba(255,255,255,.6)'}" stroke="${white ? 'rgba(255,255,255,.25)' : 'rgba(0,0,0,.08)'}" stroke-width=".5"/>` +
+      `<g fill="${fg}"><circle cx="20.5" cy="16" r="2.2"/><circle cx="28" cy="16" r="3.1"/><circle cx="35.5" cy="16" r="2.2"/><circle cx="65" cy="16" r="2.6"/></g>` +
+      `<path d="M43.5 9v14" stroke="${soft}" stroke-width=".5"/><circle cx="65" cy="16" r="7.5" fill="none" stroke="${fg}" stroke-width="2"/></svg>`
+    document.documentElement.appendChild(h)
+    capEl = h
+    return { white }
+  }
+
   /** 量之前等字体、图片载完（最多等 2 秒）：刚载入的页面字体没到时字宽不对，断行、截断都会量错 */
   async function settle() {
     const wait = (p, ms) => Promise.race([p, new Promise((r) => setTimeout(r, ms))])
@@ -2444,13 +2986,13 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     else if (d.type === 'check') onCheck(d)
     else if (d.type === 'checkClear') { clearMarks(); lastIssues = [] }
     else if (d.type === 'checkFocus') focusIssue(Number(d.i))
-    else if (d.type === 'theme') setDark(d.dark)
+    else if (d.type === 'theme') { setDark(d.dark); postTop(); setTimeout(postTop, 400) }
     else if (d.type === 'demo') demo = !!d.on
     else if (d.type === 'edit') setTextEdit(!!d.on, d.hint !== false)
     else if (d.type === 'styleMode') setStyleMode(!!d.on)
     else if (d.type === 'styleSel') onStyleSel(d.selector)
-    else if (d.type === 'style') styleApply(d.css)
-    else if (d.type === 'tweak') applyTweak(d.vars, d.attrs)
+    else if (d.type === 'style') { styleApply(d.css); queueTop() }
+    else if (d.type === 'tweak') { applyTweak(d.vars, d.attrs); queueTop() }
   })
 
   // 无头浏览器（check_design / look_design 在电脑上另开的，见 browser.js）直接调这几个：
@@ -2469,6 +3011,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
           return { issues: r.issues.map(({ el, ...rest }) => rest), metrics: r.metrics }
         },
         dark: (on) => { const has = hasDark(); if (has) setDark(!!on); return has },
+        capsule: (how) => showCapsule(how),
         /** 调节滑块的值套到页面上（和右侧栏拖的时候一样） */
         tweak: (vars, attrs) => { applyTweak(vars, attrs); return true },
         settle: () => settle().then(() => true),
@@ -2476,7 +3019,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         links: () => linksOf().map(({ path, text }) => ({ path, text })),
         info: () => {
           const meta = document.querySelector('meta[name="dsh-design"]')
-          return { title: document.title, meta: meta ? String(meta.getAttribute('content') || '').slice(0, 80) : '', page: Math.max(se().scrollHeight, innerHeight), w: innerWidth, h: innerHeight }
+          return { title: document.title, meta: meta ? String(meta.getAttribute('content') || '').slice(0, 80) : '', page: Math.max(se().scrollHeight, innerHeight), w: innerWidth, h: innerHeight, topDark: topDark() }
         },
         /** 'end'：所有能滚的地方都滚到底；数字 i：主要的那块滚到第 i 屏（相邻两屏留出顶栏、底栏的高度，栏后面的内容下一屏能看到） */
         // 滚完等页面跟上再截图