dsh-design-studio 0.7.1 → 0.9.0

package/lib/core.js

@@ -31,12 +31,14 @@ const JOB_READ_TOOL = /^(job_output|bash_output|read_job|job_read)$/i
 const BG_JOB = /\bbackground job\s+`?([\w.:-]{3,})/i
 const MAX_SCREENS = 24
 
-// 设计类型：决定右侧用什么画幅显示（网页框、手机、平板、海报、幻灯片、邮件）
-export const KINDS = ['web', 'app', 'tablet', 'poster', 'slides', 'email']
+// 设计类型：决定右侧用什么画幅显示（网页框、手机、小程序、平板、桌面软件窗口、海报、幻灯片、邮件）
+export const KINDS = ['web', 'app', 'miniprogram', 'tablet', 'desktop', 'poster', 'slides', 'email']
 const KIND_ALIAS = {
-  website: 'web', site: 'web', page: 'web', landing: 'web', desktop: 'web', dashboard: 'web',
-  phone: 'app', mobile: 'app', ios: 'app', android: 'app', miniapp: 'app',
+  website: 'web', site: 'web', page: 'web', landing: 'web', dashboard: 'web',
+  phone: 'app', mobile: 'app', ios: 'app', android: 'app',
+  mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram',
   pad: 'tablet', ipad: 'tablet',
+  pc: 'desktop', electron: 'desktop', tauri: 'desktop', mac: 'desktop', macos: 'desktop', windows: 'desktop', win: 'desktop', 桌面: 'desktop', 桌面软件: 'desktop',
   social: 'poster', image: 'poster', banner: 'poster', card: 'poster', flyer: 'poster', cover: 'poster',
   slide: 'slides', deck: 'slides', ppt: 'slides', presentation: 'slides',
   mail: 'email', newsletter: 'email', edm: 'email',

package/lib/handoff.js

@@ -199,6 +199,20 @@ export function handoffMd({ root, rows, kind, size, framework, dest, project, sy
   lines.push(`- 框架：${fwLabel}`)
   if (system) lines.push(`- 设计系统：${system}（设计用的是它的 tokens.css / components.css，项目里也照它）`)
   lines.push(`- 生成时间：${now.toISOString().slice(0, 16).replace('T', ' ')}`, '')
+  if (kind === 'miniprogram') {
+    lines.push('## 小程序要点', '')
+    lines.push(`- 这是微信小程序的设计（${size[0]} 宽）。要做成真小程序：原生写 WXML / WXSS，或用 Taro、uni-app；框架选的「${fwLabel}」是做成网页的写法，用户要的是哪种先问清。`)
+    lines.push(`- 尺寸换成 rpx：设计稿 1px = ${Math.round((750 / size[0]) * 100) / 100}rpx（整屏宽 750rpx）。`)
+    lines.push('- 设计稿顶上画的状态栏不用做，微信自带；右上角的胶囊也是微信画的。导航栏用 app.json / 页面 json 的默认导航栏，或 `navigationStyle: custom` 自己画——自己画时状态栏高用 `wx.getWindowInfo().statusBarHeight`、导航栏高度和右边让开的宽度按 `wx.getMenuButtonBoundingClientRect()` 算（设计稿的 44 / 88 / 101px 只是预览手机的）。顶栏是深色的（预览里胶囊是白的），页面配置写 `navigationBarTextStyle: white`。')
+    lines.push('- 底部标签栏写进 app.json 的 `tabBar`（样式特殊就用自定义 tabBar），底部留出安全区 `env(safe-area-inset-bottom)`。', '')
+  }
+
+  if (kind === 'desktop') {
+    lines.push('## 桌面软件要点', '')
+    lines.push(`- 这是桌面软件的设计（窗口内容 ${size[0]}×${size[1]}）。要做成真软件：Electron 或 Tauri 套网页，框架选的「${fwLabel}」写界面；用户要原生（SwiftUI / WinUI）就先问清。`)
+    lines.push('- 窗口按钮是系统画的：Mac 用无边框标题栏（Electron `titleBarStyle: \'hiddenInset\'`，Tauri `titleBarStyle: \'Overlay\'`），红绿灯盖在左上角，设计稿左上空出的 80×52 照留；顶栏可拖动的地方加 `-webkit-app-region: drag`，按钮、输入框加 `no-drag`。Windows 用自定义标题栏时右上角 138×32 留给系统按钮（Electron `titleBarOverlay`）。')
+    lines.push('- 整个窗口不滚，侧栏、列表、详情各自滚（`overflow: auto`）；最小窗口尺寸照设计里最小的那种（多尺寸里的 1024×680）设。', '')
+  }
 
   lines.push('## 屏幕和路由', '', '| 屏 | 设计文件 | 建议路由 | 截图（handoff/shots/） | 跳到 |', '| --- | --- | --- | --- | --- |')
   for (const r of rows) {

package/lib/index.js

@@ -117,7 +117,7 @@ export const previewTool = {
   name: 'preview_page',
   description:
     '在右侧栏「设计工作台」里实时打开一个页面，用户能边看边点选要改的地方。' +
-    '做网页、App 界面、海报、幻灯片、邮件这类界面设计时用：写好第一个 HTML 文件、或启动开发服务器后调一次就行，之后改文件会自动刷新，不用再调。' +
+    '做网页、App 界面、小程序、海报、幻灯片、邮件这类界面设计时用：写好第一个 HTML 文件、或启动开发服务器后调一次就行，之后改文件会自动刷新，不用再调。' +
     '只是把回答做成一页（对比、表格、清单、图表、计算器）给用户看或用时，有 show_page 工具就用它，不用这里。' +
     '本地 HTML 写文件路径；开发服务器写地址或端口（如 http://localhost:5173）。只能预览本机页面。' +
     'kind 说明是哪类设计，右侧按它的画幅显示（App 套手机外框、幻灯片 16:9 …）。' +
@@ -130,7 +130,7 @@ export const previewTool = {
     kind: {
       type: 'string',
       enum: KINDS,
-      description: '设计类型：web 网页（默认）、app 手机 App 界面（390×844）、tablet 平板、poster 海报 / 社媒图（1080×1350）、slides 幻灯片（16:9）、email 邮件',
+      description: '设计类型：web 网页（默认）、app 手机 App 界面（390×844）、miniprogram 微信小程序（375×812，外框带右上角胶囊）、tablet 平板、desktop 桌面软件（1280×800 的 Mac 窗口；Windows 软件在页面 meta 写 desktop windows）、poster 海报 / 社媒图（1080×1350）、slides 幻灯片（16:9）、email 邮件',
     },
     size: { type: 'string', description: '画幅尺寸，可选，如 1080x1920；不填按类型的默认尺寸' },
     screens: {
@@ -244,7 +244,7 @@ export const checkTool = {
           // 严重问题的局部截图（截不成就不附；附件库用不了的老版本 DSH 不截，清单照样给）
           let crops = []
           if (a.images !== false && ctx && typeof ctx.get === 'function' && ctx.get('attachments')) {
-            try { crops = await cropIssues(b, rows, { screens: pick.list, dark: !!a.dark }) } catch (e) { studio.log(e) }
+            try { crops = await cropIssues(b, rows, { screens: pick.list, dark: !!a.dark, kind }) } catch (e) { studio.log(e) }
           }
           const kept = crops.length ? await keepImages(ctx, id, crops) : null
           if (kept && !kept.images) crops = [] // 存进附件库失败：不提图
@@ -368,9 +368,9 @@ export const lookTool = {
     const at = ['top', 'bottom', 'full'].includes(a.at) ? a.at : 'top'
     const pick = pickScreens(snap, a.screens, MAX_SHOTS)
     if (!pick.list.length) return { text: `没找到要截的屏：${pick.missing.join('、')}。现在有：${(snap.screens || []).map((x) => x.key).join('、') || snap.focus}` }
-    const shots = await shootAll(b, { screens: pick.list, size: want, at, selector: a.selector, dark: !!a.dark, max: MAX_SHOTS })
+    const shots = await shootAll(b, { screens: pick.list, size: want, at, selector: a.selector, dark: !!a.dark, kind, max: MAX_SHOTS })
     const good = shots.filter((s) => s.jpg).slice(0, MAX_SHOTS)
-    const text = formatShots(shots, { where: whereOf(snap), missing: pick.missing, more: pick.more })
+    const text = formatShots(shots, { where: whereOf(snap), missing: pick.missing, more: pick.more, kind })
     if (!good.length) return { text }
     const kept = await keepImages(ctx, id, good, true)
     if (kept.images) return { text, images: kept.images }

package/lib/look.js

@@ -9,9 +9,9 @@
 import fs from 'node:fs'
 import path from 'node:path'
 
-export const KIND_SIZE = { web: [1280, 800], app: [390, 844], tablet: [820, 1180], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
+export const KIND_SIZE = { web: [1280, 800], app: [390, 844], miniprogram: [375, 812], tablet: [820, 1180], desktop: [1280, 800], poster: [1080, 1350], slides: [1280, 720], email: [640, 960] }
 const KIND_LIST = Object.keys(KIND_SIZE)
-const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', pad: 'tablet', ipad: 'tablet', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
+const META_ALIAS = { phone: 'app', mobile: 'app', ios: 'app', android: 'app', mini: 'miniprogram', miniapp: 'miniprogram', weapp: 'miniprogram', wechat: 'miniprogram', 小程序: 'miniprogram', pad: 'tablet', ipad: 'tablet', pc: 'desktop', electron: 'desktop', tauri: 'desktop', mac: 'desktop', macos: 'desktop', windows: 'desktop', win: 'desktop', 桌面: 'desktop', 桌面软件: 'desktop', social: 'poster', image: 'poster', slide: 'slides', deck: 'slides', ppt: 'slides', mail: 'email' }
 // 只给宽度时的高：常见真机的屏幕高；别的宽度按这一类默认的宽高比
 const PHONE_H = { 320: 568, 360: 780, 375: 667, 390: 844, 393: 852, 402: 874, 412: 915, 414: 896, 428: 926, 430: 932, 440: 956 }
 const TABLET_H = { 744: 1133, 768: 1024, 810: 1080, 820: 1180, 834: 1194, 1024: 1366, 1032: 1376 }
@@ -45,9 +45,9 @@ export function sizeOf(v, kind) {
   const w = +m[1]
   if (w < 200 || w > 4000) return null
   const [dw, dh] = KIND_SIZE[kind] || KIND_SIZE.web
-  if (kind === 'app' && PHONE_H[w]) return [w, PHONE_H[w]]
+  if ((kind === 'app' || kind === 'miniprogram') && PHONE_H[w]) return [w, PHONE_H[w]]
   if (kind === 'tablet' && TABLET_H[w]) return [w, TABLET_H[w]]
-  if (kind === 'app' || kind === 'tablet' || kind === 'poster' || kind === 'slides') return [w, Math.round((w * dh) / dw)]
+  if (kind === 'app' || kind === 'miniprogram' || kind === 'tablet' || kind === 'poster' || kind === 'slides') return [w, Math.round((w * dh) / dw)]
   return [w, dh]
 }
 
@@ -140,6 +140,7 @@ export async function measureAll(browser, { screens, sizes, kind, dark, fetcher
         const { info, darkOk } = await prepare(page, dark)
         if (info && info.title) row.title = String(info.title).slice(0, 40)
         if (dark && !darkOk) row.noDark = true
+        if (page.pseudo) await page.pseudo().catch(() => 0) // 伪元素的真实框（量不到就按样式推）
         const r = await page.eval(`window.__dshDesign.check(${JSON.stringify(kind)})`)
         row.issues = Array.isArray(r && r.issues) ? r.issues : []
         row.metrics = (r && r.metrics) || null
@@ -194,7 +195,7 @@ export async function measureAll(browser, { screens, sizes, kind, dark, fetcher
  * 截图：每屏一张（at = top 顶上一屏 / bottom 滚到底 / full 从上到下几屏），selector 只截那个元素。
  * @returns [{ key, label, w, h, at, part, of, jpg, note }]
  */
-export async function shootAll(browser, { screens, size, at, selector, dark, max = MAX_SHOTS }) {
+export async function shootAll(browser, { screens, size, at, selector, dark, kind = '', max = MAX_SHOTS }) {
   const [w, h] = size
   const scale = scaleFor(w, h)
   const out = []
@@ -205,6 +206,12 @@ export async function shootAll(browser, { screens, size, at, selector, dark, max
     try {
       await browser.withPage({ url: sc.url, w, h, scale, dark }, async (page) => {
         const { info, darkOk } = await prepare(page, dark)
+        // 小程序：每次截图前重画胶囊（滚动后顶栏可能变了色，胶囊黑白跟着重量）
+        const shoot = async (opts) => {
+          if (kind === 'miniprogram') await page.eval("window.__dshDesign.capsule('solid')").catch(() => null)
+          if (kind === 'desktop') await page.eval("window.__dshDesign.winctl('solid')").catch(() => null)
+          return page.shot(opts)
+        }
         const title = info && info.title ? String(info.title).slice(0, 40) : ''
         const note = { page: info ? info.page : 0, title, noDark: dark && !darkOk }
         if (selector) {
@@ -217,12 +224,12 @@ export async function shootAll(browser, { screens, size, at, selector, dark, max
           const x1 = Math.min(vx + vw, r.x + r.w + pad), y1 = Math.min(vy + vh, r.y + r.h + pad)
           if (x1 - x0 < 1 || y1 - y0 < 1) { shots.push({ ...base, ...note, at: 'selector', error: `「${selector}」不在屏幕里` }); return }
           const clip = { x: x0, y: y0, width: x1 - x0, height: y1 - y0 }
-          shots.push({ ...base, ...note, at: 'selector', jpg: await page.shot({ clip }) })
+          shots.push({ ...base, ...note, at: 'selector', jpg: await shoot({ clip }) })
           return
         }
         if (at === 'bottom') {
           await page.eval("window.__dshDesign.scroll('end')")
-          shots.push({ ...base, ...note, at, jpg: await page.shot() })
+          shots.push({ ...base, ...note, at, jpg: await shoot() })
           return
         }
         if (at === 'full') {
@@ -233,11 +240,11 @@ export async function shootAll(browser, { screens, size, at, selector, dark, max
           const parts = of <= cap ? [...Array(of).keys()] : [...[...Array(cap - 1).keys()], of - 1]
           for (const i of parts) {
             if (i) await page.eval(`window.__dshDesign.scroll(${i})`)
-            shots.push({ ...base, ...note, at, part: i + 1, of, jpg: await page.shot() })
+            shots.push({ ...base, ...note, at, part: i + 1, of, jpg: await shoot() })
           }
           return
         }
-        shots.push({ ...base, ...note, at: 'top', jpg: await page.shot() })
+        shots.push({ ...base, ...note, at: 'top', jpg: await shoot() })
       })
     } catch (e) {
       shots.push({ ...base, at, error: String((e && e.message) || e).slice(0, 160) })
@@ -248,7 +255,7 @@ export async function shootAll(browser, { screens, size, at, selector, dark, max
 }
 
 // 值得附图的问题（严重的、看图比看数字明白），越靠前越先截
-const CROP_ORDER = ['covered', 'overlap', 'clipped', 'overflow', 'hscroll', 'img', 'contrast']
+const CROP_ORDER = ['covered', 'capsule', 'island', 'winctl', 'homebar', 'overlap', 'clipped', 'overflow', 'hscroll', 'img', 'contrast']
 
 /** 两条问题挨得近（同一屏同一尺寸，元素上下差不到 48px、左右差不到 160px）：截一张图就都看得到 */
 function nearby(a, b) {
@@ -305,6 +312,10 @@ export function pickCrops(rows, max = MAX_CROPS) {
 function labelOf(it) {
   switch (it.type) {
     case 'covered': return `压住 ${it.px}px`
+    case 'capsule': return `挡住 ${it.px}px`
+    case 'island': return `挡住 ${it.px}px`
+    case 'winctl': return `挡住 ${it.px}px`
+    case 'homebar': return `伸进 ${it.px}px`
     case 'overlap': return it.px ? `叠了 ${it.px}px` : ''
     case 'clipped': return `切掉 ${it.px}px`
     case 'overflow': return `伸出 ${it.px}px`
@@ -319,7 +330,7 @@ function labelOf(it) {
  * 截不成的（元素没了、页面变了）就不附。
  * @returns [{ n, k, ks, key, w, h, type, jpg }]（n 从 1 起，按挑的顺序；ks 是图里看得到的几条问题）
  */
-export async function cropIssues(browser, rows, { screens, dark, max = MAX_CROPS }) {
+export async function cropIssues(browser, rows, { screens, dark, kind = '', max = MAX_CROPS }) {
   const picks = pickCrops(rows, max)
   const urlOf = new Map(screens.map((s) => [s.key, s.url]))
   const groups = new Map()
@@ -339,6 +350,9 @@ export async function cropIssues(browser, rows, { screens, dark, max = MAX_CROPS
           const how = { sel: it.sel, other: it.type === 'overlap' ? it.otherSel || '' : '', edge: it.type === 'covered' ? it.edge || '' : '', hscroll: it.type === 'hscroll', also: c.also.map((x) => x.it.sel), label: labelOf(it) }
           const at = await page.eval(`window.__dshDesign.crop ? window.__dshDesign.crop(${JSON.stringify(how)}) : null`).catch(() => null)
           if (!at || !(at.w >= 1 && at.h >= 1)) continue
+          // 小程序：滚到问题那儿以后再画胶囊（半透明，透出被挡住的东西；黑白按这时的顶栏）
+          if (kind === 'miniprogram') await page.eval("window.__dshDesign.capsule('ghost')").catch(() => null)
+          if (kind === 'desktop') await page.eval("window.__dshDesign.winctl('ghost')").catch(() => null)
           c.jpg = await page.shot({ clip: { x: at.x, y: at.y, width: at.w, height: at.h } })
           // 挨着的那几条：真在图里才算「看图几」
           c.ks = [c.k, ...c.also.filter((_, i) => at.inside && at.inside[i]).map((x) => x.k)]
@@ -356,6 +370,8 @@ const TYPE = {
   hscroll: '超出屏幕', clipped: '文字被截断', overflow: '文字超出框', overlap: '文字叠在一起', contrast: '对比度不够', tap: '点击区太小',
   tiny: '字太小', img: '图片没加载出来', fonts: '字号太杂', distort: '图片被拉变形', long: '一行太长', wrap: '文字被挤断行',
   covered: '被固定栏压住', tight: '离固定栏太近', jserr: '页面脚本报错', missing: '文件没载出来', deadlink: '跳到的页面不存在',
+  capsule: '被小程序胶囊挡住', island: '被灵动岛挡住', homebar: '伸进底部横条区', tabbar: '标签栏项太多', navbar: '没有导航栏',
+  winctl: '被窗口按钮挡住',
 }
 const EDGE = { top: '顶栏', bottom: '底栏' }
 const WHAT = { css: '样式表', script: '脚本', font: '字体', link: '文件', video: '视频', audio: '音频', source: '媒体', iframe: '内嵌页' }
@@ -397,6 +413,14 @@ export function detailOf(it) {
     case 'wrap': return `折成了 ${it.lines} 行（给它更多宽度、white-space: nowrap 或缩短文字）`
     case 'covered': return `${it.edge === 'top' ? '没滚时' : '滚到底还'}被${EDGE[it.edge] || ''} ${it.bar} 压住 ${it.px}px（给内容留出栏的高度：${it.edge === 'top' ? '顶上' : '底部'}至少再留 ${it.px + 16}px，用 ${it.edge === 'top' ? 'padding-top' : 'padding-bottom'}，栏是 fixed 时也可以用 scroll-padding）`
     case 'tight': return `离${EDGE[it.edge] || ''} ${it.bar} 只有 ${it.px}px（留 16px 以上）`
+    case 'capsule': return `伸进右上角胶囊 ${it.px}px（胶囊是微信画的、页面盖不住，在 y 48–80、x ${it.x} 以右：顶栏右边空出这块，标题居中或靠左）`
+    case 'island': return `被灵动岛挡住 ${it.px}px（灵动岛在屏幕顶上正中、y 11–45：状态栏中间空着，标题、按钮放到状态栏下面）`
+    case 'homebar': return `底栏 ${it.bar} 里的字或图标伸进底部横条区 ${it.px}px（屏幕最下面 34px 留给横条：栏的底色铺下去，内容抬到它上面，设计稿里栏写 padding-bottom: 34px——预览里 env(safe-area-inset-bottom) 是 0，靠它让不出来，做成真代码时再换成 env()）`
+    case 'tabbar': return `标签栏有 ${it.n} 项（最多 5 项；小程序 tabBar 超过 5 项微信直接报错）：留最常用的几项，其余放进「我的」或首页入口`
+    case 'navbar': return `顶上 y ${it.t}–${it.b}（导航栏那条）是空的：小程序每屏都有导航栏——一级页放标题或品牌 / 搜索（让开右上角胶囊），二级页标题居中、左边加返回；启动页、全屏大图可以不管`
+    case 'winctl': return it.os === 'win'
+      ? `伸进右上角的最小化 / 最大化 / 关闭按钮 ${it.px}px（外框画的、盖在页面上面，在最右边 138px、y 0–32：标题栏右边空出这块）`
+      : `伸进左上角红绿灯 ${it.px}px（外框画的、盖在页面上面，在 x 20–72、y 20–32：工具栏 / 侧栏顶上左边空出 80px，标题、按钮从 x 80 以后放）`
     case 'jserr': return `${it.msg}${it.src ? `（${it.src}${it.line ? `:${it.line}` : ''}）` : ''}`
     case 'missing': return `${WHAT[it.what] || '文件'} ${it.src} 载不出来（路径写错了，或者文件不在）`
     default: return ''
@@ -476,7 +500,7 @@ export function formatMeasure(rows, { sizes, where, missing = [], more = 0, dark
         : '没发现问题：下面每屏每种尺寸都量过、都通过了（要滚动的屏看「滚到底时离内容」，是正数就没被压住）。'
   const lines = [`用无头浏览器按真实尺寸量了 ${keys.length} 屏 × ${sizes.length} 种尺寸（${sz}${dark ? '，深色' : ''}）${where ? `，设计目录 ${where}` : ''}。${status}`]
   if (compared) lines.push(`比上次（同样的屏和尺寸）：修好 ${fixed} 个，新出 ${fresh.size} 个${fresh.size ? '（清单里标了「新」）' : ''}。`)
-  if (crops.length) lines.push(`严重的问题附了 ${crops.length} 张局部截图（图 1${crops.length > 1 ? `–${crops.length}` : ''}，真实渲染，按发现时的尺寸和滚动位置截的；红框是出问题的元素，框上标了差多少；叠在一起的另一个是橙色虚线框${crops.some((c) => c.type === 'covered') ? '；被栏压住的那几张把栏调成了半透明，透出下面被压住的字' : ''}；要看整屏用 look_design）。`)
+  if (crops.length) lines.push(`严重的问题附了 ${crops.length} 张局部截图（图 1${crops.length > 1 ? `–${crops.length}` : ''}，真实渲染，按发现时的尺寸和滚动位置截的；红框是出问题的元素，框上标了差多少；叠在一起的另一个是橙色虚线框${crops.some((c) => c.type === 'covered') ? '；被栏压住的那几张把栏调成了半透明，透出下面被压住的字' : ''}${crops.some((c) => c.type === 'capsule') ? '；小程序右上角的胶囊画成了半透明，透出下面被挡住的东西' : ''}；要看整屏用 look_design）。`)
   if (missing.length) lines.push(`没找到这几屏：${missing.join('、')}`)
   if (more) lines.push(`还有 ${more} 屏这次没量（一次最多 ${MAX_SCREENS} 屏，用 screens 挑着量）`)
   for (const key of keys) {
@@ -524,7 +548,7 @@ export function formatMeasure(rows, { sizes, where, missing = [], more = 0, dark
 }
 
 /** 截图的说明：第几张是哪屏、什么尺寸、哪一段 */
-export function formatShots(shots, { where, missing = [], more = 0 }) {
+export function formatShots(shots, { where, missing = [], more = 0, kind = '' }) {
   const AT = { top: '顶上一屏', bottom: '滚到底', selector: '元素' }
   const lines = [`无头浏览器按真实尺寸截的图（真实渲染的像素）${where ? `，设计目录 ${where}` : ''}：`]
   let n = 0
@@ -538,6 +562,8 @@ export function formatShots(shots, { where, missing = [], more = 0 }) {
     const skipped = mine[0].of - mine.length
     if (skipped > 0) lines.push(`${key} 一共 ${mine[0].of} 段，中间 ${skipped} 段没截（要看就单截这一屏，或用 selector 截那一块）`)
   }
+  if (kind === 'miniprogram' && n) lines.push('右上角画上了微信的胶囊（真机上它盖在页面上面，页面里别再画）。')
+  if (kind === 'desktop' && n) lines.push('画上了窗口按钮（Mac 左上角红绿灯 / Windows 右上角三个按钮，真窗口里系统画的，页面里别再画）。')
   if (missing.length) lines.push(`没找到这几屏：${missing.join('、')}`)
   if (more) lines.push(`还有 ${more} 屏没截（一次最多 ${MAX_SHOTS} 张，用 screens 挑着截）`)
   return lines.join('\n')