dsh-design-studio 0.8.0 → 0.9.0

package/lib/picker.js

@@ -1659,6 +1659,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   //   contrast 对比度不够 · tap 点击区太小 · tiny 字太小 · img 图片没加载出来 · fonts 字号太杂
   //   covered 被固定栏压住（滚到底也看不全） · tight 离固定栏太近 · jserr 页面脚本报错 · missing 样式表 / 脚本 / 字体没载出来
   //   capsule 小程序右上角的胶囊（微信画的，页面盖不住）挡住了字或按钮
+  //   island 灵动岛挡住了字或按钮 · homebar 底栏里的字、图标伸进底部横条区 · tabbar 标签栏超过 5 项 · navbar 小程序这屏没有导航栏
+  //   winctl 桌面软件的窗口按钮（Mac 红绿灯 / Windows 右上角三个）挡住了字或按钮
   // 有意为之的不报：省略号（text-overflow: ellipsis）、行数截断（line-clamp）、可以滚动的区域（轮播）、很淡的装饰大字。
 
   const CHECK_PER = 8 // 每类最多报几条
@@ -1667,6 +1669,13 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   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 }
+  // 预览手机的灵动岛：离顶 11、118×34、居中（和外框 .ddp-island 一样）；矮的手机（高不到宽的 1.9 倍）没有，也没有底部横条
+  const ISLAND = { top: 11, w: 118, h: 34 }
+  const HOMEBAR = 34 // 底部横条区（home indicator）的高
+  const NAVBAR = { top: 44, h: 44 } // 小程序导航栏：状态栏 44 下面那 44
+  // 桌面软件的窗口按钮（和右侧栏外框画的一样）：Mac 红绿灯在左上 x 20、y 20 起，三个 12px 圆点隔 8；Windows 最小化 / 最大化 / 关闭在右上角，各 46×32
+  const LIGHTS = { x: 20, y: 20, d: 12, gap: 8 }
+  const WINBTN = { w: 46, h: 32 }
   let checkMarks = []
 
   const isOurs = (el) => SIG_SKIP.has(el.tagName)
@@ -1941,15 +1950,17 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   /** 滚完等两帧、再等新露出来的图和字体（页面的滚动监听、懒加载的图有机会跟上），再截图 */
   const afterScroll = (v) => new Promise((r) => requestAnimationFrame(() => requestAnimationFrame(() => r(v)))).then((v2) => settle().then(() => v2, () => v2))
 
-  function barsAt(edge) {
+  function barsAt(edge, inflow = false) {
     const out = []
     const vw = innerWidth, vh = innerHeight
+    // inflow：页面本身不滚（flex / grid 撑满一屏、中间内容区自己滚）时，贴着屏幕边的普通元素也算栏
+    const shell = inflow && (document.scrollingElement || document.documentElement).scrollHeight <= vh + 2
     const all = document.body.getElementsByTagName('*')
     for (let i = 0; i < all.length; i++) {
       const el = all[i]
       if (isOurs(el)) continue
       const pos = getComputedStyle(el).position
-      if (pos !== 'fixed' && pos !== 'sticky' && pos !== 'absolute') continue
+      if (pos !== 'fixed' && pos !== 'sticky' && pos !== 'absolute' && !shell) continue
       if (out.some((b) => b.el.contains(el))) continue // 栏里面的东西
       const r = el.getBoundingClientRect()
       if (r.width < vw * 0.5 || r.height < 16 || r.height > vh * BAR_MAX) continue
@@ -2299,7 +2310,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
     // 4. 对比度（WCAG：正文 4.5，大字 3）。取底色那段装一次「量画着什么」的临时样式（见 withProbe），量完撤掉
     const sizes = new Map()
-    const tinyMin = kind === 'app' || kind === 'miniprogram' ? 10 : kind === 'tablet' ? 11 : kind === 'poster' || kind === 'slides' ? Math.max(12, Math.round(vw / 96)) : 12
+    const tinyMin = kind === 'app' || kind === 'miniprogram' ? 10 : kind === 'tablet' || kind === 'desktop' ? 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) {
@@ -2325,7 +2336,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     } })
 
     // 5. 点击区太小（App / 小程序 / 平板 44，网页 24；文字中间的链接不算）
-    const minTap = kind === 'app' || kind === 'miniprogram' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' ? 24 : 0
+    const minTap = kind === 'app' || kind === 'miniprogram' || kind === 'tablet' ? 44 : kind === 'web' || kind === 'email' || kind === 'desktop' ? 24 : 0
     if (minTap) {
       const small = []
       for (const el of body.querySelectorAll(CLICKABLE)) {
@@ -2419,6 +2430,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
     // 13. 小程序：右上角胶囊挡住的字和按钮。不固定的按没滚时的位置算（滚下去本来就会从胶囊下面过）
     if (kind === 'miniprogram') capsuleCheck(add, atoms, vw)
+    // 14. 手机：灵动岛挡住的、伸进底部横条区的，标签栏项数；小程序每屏要有导航栏
+    if (kind === 'app' || kind === 'miniprogram') phoneCheck(add, atoms, vw, kind)
+    // 15. 桌面软件：窗口按钮挡住的字和按钮
+    if (kind === 'desktop') winCheck(add, atoms, vw)
 
     issues.sort((x, y) => y.sev - x.sev)
     const se0 = se()
@@ -2432,29 +2447,45 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
    * 元素在「各层都没滚」时露出来的那块（视口坐标）：窗口、内部滚动区滚过的量加回去，被外层裁掉的去掉。
    * 滚动量、边框都按那层实际的缩放（transform、zoom）换成视口像素；裁剪按 padding box、只裁 overflow 不是 visible 的那个方向。
    * 绝对 / 固定定位的只受包含块和更外面的管；固定 / 吸顶的那层按现在看到的位置算，它外面的滚动不管、裁剪照算。全被裁掉返回 null。
-   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）
+   * now：按现在的滚动位置算（只去掉裁掉的部分）。upto：只算到包着它的那层为止（更外面的裁剪不管）。
+   * pos：量的是 el 的伪元素，它自己的定位方式（绝对定位的从 el 起只受包含块和更外面的裁，跳过中间不包它的层）
    */
-  function restBox(el, now = false, upto = null) {
+  function restBox(el, now = false, upto = null, self = false, pos = '') {
     const chain = []
-    let mode = ''
-    let pinned = false
+    let mode = pos === 'absolute' || pos === 'fixed' ? pos : ''
+    let pinned = pos === 'fixed'
     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
+      if (e !== el || self) { // self：量的是 el 里面的字，el 自己的 overflow 也裁它
+        // clip-path 不管包含块，里面的都裁（形状在边框框以内，按边框框算个外沿）
+        const cp = cs.clipPath && cs.clipPath !== 'none' ? e.getBoundingClientRect() : null
+        const cpClip = cp && { l: cp.left, r: cp.right, t: cp.top, b: cp.bottom }
+        if ((mode === 'absolute' && !holds(cs, false)) || (mode === 'fixed' && !holds(cs, true))) {
+          if (cpClip) chain.push({ sx: 0, sy: 0, clip: cpClip })
+          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'
+        const box = cs.display !== 'inline' && cs.display !== 'contents' // overflow 对行内元素不起作用（clientWidth 是 0）
+        const cx = box && e !== document.body && cs.overflowX !== 'visible'
+        const cy = box && e !== document.body && cs.overflowY !== 'visible'
+        // overflow: clip 可以往外放出 overflow-clip-margin 那么多（写了 border-box 从边框外沿算、content-box 从内容区算）
+        const ocm = String(cs.overflowClipMargin || '')
+        const len = (/(-?[\d.]+)px/.exec(ocm) || [])[1]
+        const grow = (pad, bd) => (parseFloat(len) || 0) + (/border-box/.test(ocm) ? bd : /content-box/.test(ocm) ? -pad : 0)
+        const mx = cs.overflowX === 'clip' ? grow(parseFloat(cs.paddingLeft) || 0, e.clientLeft) * kx : 0
+        const my = cs.overflowY === 'clip' ? grow(parseFloat(cs.paddingTop) || 0, e.clientTop) * ky : 0
+        let clip = cx || cy ? {
+          l: cx ? r.left + e.clientLeft * kx - mx : -Infinity, r: cx ? r.left + (e.clientLeft + e.clientWidth) * kx + mx : Infinity,
+          t: cy ? r.top + e.clientTop * ky - my : -Infinity, b: cy ? r.top + (e.clientTop + e.clientHeight) * ky + my : Infinity,
+        } : null
+        if (cpClip) clip = clip ? { l: Math.max(clip.l, cpClip.l), r: Math.min(clip.r, cpClip.r), t: Math.max(clip.t, cpClip.t), b: Math.min(clip.b, cpClip.b) } : cpClip
         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,
+          clip,
         })
       }
       if (cs.position === 'fixed' || cs.position === 'sticky') pinned = true
@@ -2476,30 +2507,340 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     }
   }
 
-  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
-    }
+  /**
+   * 盖在页面上面、页面盖不住的一块（胶囊、灵动岛）：可点的东西和字横竖都伸进去 2px 以上就报。
+   * 按「各层都没滚」时露出来的那块量（不固定的滚下去本来就会从下面过）；px(o, ow, oh) 算报多少
+   */
+  function zoneCheck(add, atoms, zone, type, px, extra) {
     const hit = new Set()
-    const check = (el, rects) => {
+    const into = (o) => {
+      if (!o) return 0
+      const ow = Math.min(o.r, zone.r) - Math.max(o.l, zone.l)
+      const oh = Math.min(o.b, zone.b) - Math.max(o.t, zone.t)
+      return ow > 2 && oh > 2 ? Math.round(px(o, ow, oh)) : 0
+    }
+    const check = (el, rects, self) => {
       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
+      const rest = restBox(el, false, null, self)
+      const n = Math.max(0, ...rects.map((r) => into(rest(r))))
+      if (!n) return
       hit.add(el)
-      add('capsule', el, { px, x: Math.round(cap.l) }, 2)
+      add(type, el, { px: n, ...extra }, 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)
+    for (const a of atoms) check(a.el, a.rects, true) // 字被它自己 overflow 裁掉的那截看不见，不算
+  }
+
+  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 }
+    // 报伸进去多宽（从胶囊左边算）
+    zoneCheck(add, atoms, cap, 'capsule', (o, ow) => Math.min(ow, o.r - cap.l), { x: Math.round(cap.l) })
+  }
+
+  /** 页面 meta 说的是不是 Windows 软件（<meta name="dsh-design" content="desktop windows">）；不写是 Mac */
+  function deskOs() {
+    const m = document.querySelector('meta[name="dsh-design"]')
+    const words = String(m ? m.getAttribute('content') || '' : '').toLowerCase().split(/[\s,;]+/)
+    return words.some((w) => /^(windows|win|win10|win11)$/.test(w)) ? 'win' : 'mac'
+  }
+
+  /** 桌面软件：Mac 左上角红绿灯（连同四周 4px），Windows 右上角三个按钮，盖在页面上面，伸进去的字和按钮报 winctl */
+  function winCheck(add, atoms, vw) {
+    const os = deskOs()
+    if (os === 'win') {
+      const z = { l: vw - WINBTN.w * 3, r: vw, t: 0, b: WINBTN.h }
+      zoneCheck(add, atoms, z, 'winctl', (o, ow) => Math.min(ow, o.r - z.l), { os })
+    } else {
+      const z = { l: LIGHTS.x - 4, r: LIGHTS.x + LIGHTS.d * 3 + LIGHTS.gap * 2 + 4, t: LIGHTS.y - 4, b: LIGHTS.y + LIGHTS.d + 4 }
+      zoneCheck(add, atoms, z, 'winctl', (o, ow) => Math.min(ow, z.r - o.l), { os })
+    }
+  }
+
+  /**
+   * 伪元素在屏幕上的框（量不到它自己，按算出来的样式推）：
+   * - 绝对 / 固定定位：算出来的 left / top / 宽高摆进包含块；
+   * - 普通流：挨着前后的子元素（字、元素）摆，flex 按排列方向和对齐，行内的跟所在那行居中；
+   * 最后套上它自己的 translate / rotate / scale / transform（绕 transform-origin）
+   */
+  const pxv = (v) => (/px$/.test(v) ? parseFloat(v) : NaN)
+  /** 伪元素的边框框宽高（算出来的宽高按 box-sizing 加上内边距和边框）；算不出来的是 NaN */
+  function pseudoSize(ps) {
+    const extra = (a, b) => (ps.boxSizing === 'border-box' ? 0 : (parseFloat(ps['padding' + a]) || 0) + (parseFloat(ps['padding' + b]) || 0) + (parseFloat(ps['border' + a + 'Width']) || 0) + (parseFloat(ps['border' + b + 'Width']) || 0))
+    return { w: pxv(ps.width) + extra('Left', 'Right'), h: pxv(ps.height) + extra('Top', 'Bottom') }
+  }
+  /** 行内的伪元素没有宽高：按行高（normal 按字号 1.2 倍） */
+  const lineOf = (ps) => { const v = pxv(ps.lineHeight); return isNaN(v) ? (parseFloat(ps.fontSize) || 16) * 1.2 : v }
+  /** 块级的显示方式：上下外边距在块布局里会合并 */
+  const BLOCKISH = /^(block|flex|grid|table|list-item|flow-root)$/
+  /** 替换元素：行内的也有上下外边距 */
+  const REPLACED = /^(IMG|SVG|svg|VIDEO|CANVAS|IFRAME|EMBED|OBJECT|INPUT|SELECT|TEXTAREA|PICTURE)$/
+
+  function pseudoBox(e, which, ps) {
+    const { w } = pseudoSize(ps)
+    let { h } = pseudoSize(ps)
+    let kx = 1, ky = 1, l, t, W
+    if (ps.position === 'absolute' || ps.position === 'fixed') {
+      let cb = null
+      for (let a = e; a && a !== document.documentElement; a = a.parentElement) if (holds(getComputedStyle(a), ps.position === 'fixed')) { cb = a; break }
+      const r = cb ? cb.getBoundingClientRect() : { left: 0, top: 0 }
+      if (cb && cb.offsetWidth) kx = r.width / cb.offsetWidth
+      if (cb && cb.offsetHeight) ky = r.height / cb.offsetHeight
+      const x = pxv(ps.left), y = pxv(ps.top)
+      if ([x, y, w, h].some(isNaN)) return null
+      l = r.left + ((cb ? cb.clientLeft : 0) + x + (parseFloat(ps.marginLeft) || 0)) * kx
+      t = r.top + ((cb ? cb.clientTop : 0) + y + (parseFloat(ps.marginTop) || 0)) * ky
+      W = w
+    } else {
+      const r = e.getBoundingClientRect()
+      if (e.offsetWidth) kx = r.width / e.offsetWidth
+      if (e.offsetHeight) ky = r.height / e.offsetHeight
+      const cs = getComputedStyle(e)
+      const side = (k) => (parseFloat(cs['padding' + k]) || 0) + (parseFloat(cs['border' + k + 'Width']) || 0)
+      const c = { l: r.left + side('Left') * kx, t: r.top + side('Top') * ky, r: r.right - side('Right') * kx, b: r.bottom - side('Bottom') * ky }
+      if (isNaN(h)) h = lineOf(ps)
+      const H = h * ky
+      // 普通流里挨着的子元素和字（第一行 / 最后一行的框）
+      // 字量出来的是字形的框，按行高撑成整行（line-height: 40px 这种，行比字高）
+      const lh = pxv(cs.lineHeight) * ky
+      const line = (q) => (isNaN(lh) || lh <= q.bottom - q.top ? q : { top: (q.top + q.bottom - lh) / 2, bottom: (q.top + q.bottom + lh) / 2 })
+      const near = []
+      for (const n of e.childNodes) {
+        if (n.nodeType === 3 && n.nodeValue.trim()) {
+          const rg = document.createRange()
+          rg.selectNodeContents(n)
+          const rs = rg.getClientRects()
+          if (rs.length) { const f = line(rs[0]), z = line(rs[rs.length - 1]); near.push({ first: f, last: z, mT: 0, mB: 0, block: false, top: f.top, bottom: z.bottom }) }
+        } else if (n.nodeType === 1 && !isOurs(n)) {
+          const s2 = getComputedStyle(n)
+          const rs = s2.display !== 'none' && s2.position !== 'absolute' && s2.position !== 'fixed' ? n.getClientRects() : []
+          // top / bottom 是带外边距的边；普通行内元素（span 这种）上下外边距不起作用，框按它的行高撑成整行
+          const inl = s2.display === 'inline' && !REPLACED.test(n.tagName)
+          const mT = inl ? 0 : (parseFloat(s2.marginTop) || 0) * ky, mB = inl ? 0 : (parseFloat(s2.marginBottom) || 0) * ky
+          const ln = (q) => {
+            const v = Math.max(pxv(s2.lineHeight) || 0, pxv(cs.lineHeight) || 0) * ky // 那一行至少有父元素的行高
+            return !inl || !v || v <= q.bottom - q.top ? q : { top: (q.top + q.bottom - v) / 2, bottom: (q.top + q.bottom + v) / 2 }
+          }
+          if (rs.length) { const f = ln(rs[0]), z = ln(rs[rs.length - 1]); near.push({ first: f, last: z, mT, mB, block: BLOCKISH.test(s2.display), top: f.top - mT, bottom: z.bottom + mB }) }
+        }
+      }
+      const flex = /flex/.test(cs.display), grid = /grid/.test(cs.display)
+      const rev = flex && /reverse/.test(cs.flexDirection)
+      if (rev && /column/.test(cs.flexDirection)) near.reverse() // 按屏幕上从上到下
+      const before = (which === '::before') !== rev
+      const mt = (parseFloat(ps.marginTop) || 0) * ky, mb = (parseFloat(ps.marginBottom) || 0) * ky
+      if (!flex && !grid && /inline/.test(ps.display)) {
+        const ln = near.length ? (before ? near[0].first : near[near.length - 1].last) : null
+        t = ln ? (ln.top + ln.bottom - H) / 2 : c.t
+      } else if (!flex || /column/.test(cs.flexDirection)) {
+        const gap = flex || grid ? (parseFloat(cs.rowGap) || 0) * ky : 0
+        const j = flex ? cs.justifyContent : ''
+        // 另一个伪元素也在普通流里排着（::before 图标 + 字 + ::after 箭头）：一起算剩余空间
+        const os = getComputedStyle(e, which === '::before' ? '::after' : '::before')
+        const other = os.content !== 'none' && os.content !== 'normal' && os.display !== 'none' && os.position !== 'absolute' && os.position !== 'fixed'
+        const osz = pseudoSize(os).h
+        const oh = other ? ((isNaN(osz) ? lineOf(os) : osz) + (parseFloat(os.marginTop) || 0) + (parseFloat(os.marginBottom) || 0)) * ky : 0
+        // 剩下的空按项数分（space-*），放不下（没剩）就不分
+        const n = near.length + 1 + (other ? 1 : 0)
+        const free = c.b - c.t - near.reduce((m, q) => m + q.bottom - q.top, 0) - H - mt - mb - oh - gap * (n - 1)
+        const between = free <= 0 || !flex ? 0 : /space-between/.test(j) ? free / (n - 1) : /space-around/.test(j) ? free / n : /space-evenly/.test(j) ? free / (n + 1) : 0
+        // 块布局里两个块级盒相邻，上下外边距合并成一个（正的取大、负的取小再相加）；flex / grid、行内块不合并
+        const fold = (a, b, q) => (flex || grid || !q.block || !BLOCKISH.test(ps.display) ? a + b : Math.max(a, b, 0) + Math.min(a, b, 0))
+        // 排到内容区的尾巴上：flex-start / normal（只有一项或放不下时的 space-between 也按它）在 column-reverse 里也是尾巴，start / end 不跟着反
+        const atEnd = /flex-end/.test(j) ? !rev : /(^|\s)end$/.test(j) ? true : /flex-start|normal|stretch|space-between/.test(j) ? rev : false
+        if (near.length) {
+          // 挨着第一项前面 / 最后一项后面
+          const q = before ? near[0] : near[near.length - 1]
+          t = before ? q.first.top - fold(q.mT, mb, q) - gap - between - H : q.last.bottom + fold(q.mB, mt, q) + gap + between
+        } else if (other && flex) {
+          // 只有前后两个伪元素：从内容区起点按 justify-content 排
+          const lead = /center/.test(j) ? free / 2 : free <= 0 ? (/space-around|space-evenly/.test(j) ? free / 2 : atEnd ? free : 0)
+            : /space-around/.test(j) ? free / 4 : /space-evenly/.test(j) ? free / 3 : /space-between/.test(j) ? 0 : atEnd ? free : 0
+          t = c.t + lead + mt + (before ? 0 : oh + gap + between)
+        } else t = /center|space-around|space-evenly/.test(j) ? (c.t + mt + c.b - mb - H) / 2 : atEnd ? c.b - mb - H : c.t + mt
+      } else {
+        const a = ps.alignSelf && ps.alignSelf !== 'auto' ? ps.alignSelf : cs.alignItems
+        t = /center/.test(a) ? (c.t + c.b - H) / 2 : /end/.test(a) ? c.b - H : c.t + mt
+      }
+      l = c.l
+      W = isNaN(w) ? Math.max(1, (c.r - c.l) / kx) : w
+      if (ps.position === 'relative') { l += (pxv(ps.left) || 0) * kx; t += (pxv(ps.top) || 0) * ky }
+    }
+    // 自己的变换：先 translate、rotate、scale，再 transform，都绕 transform-origin
+    let m = new DOMMatrix()
+    const set = (v) => v && v !== 'none'
+    const len = (v, full) => (/%$/.test(v) ? parseFloat(v) / 100 * full : parseFloat(v) || 0)
+    try {
+      if (set(ps.translate)) { const [x, y = '0px'] = ps.translate.split(' '); m = m.translate(len(x, W), len(y, h)) }
+      if (set(ps.rotate) && /^-?[\d.]+deg$/.test(ps.rotate)) m = m.rotate(parseFloat(ps.rotate))
+      if (set(ps.scale)) { const [sx, sy = sx] = ps.scale.split(' ').map(parseFloat); m = m.scale(sx, sy) }
+      if (set(ps.transform)) m = m.multiply(new DOMMatrix(ps.transform))
+    } catch { /* 解析不了的变换就当没有 */ }
+    const [ox, oy] = String(ps.transformOrigin).split(' ').map((v) => parseFloat(v) || 0)
+    m = new DOMMatrix().translate(ox, oy).multiply(m).translate(-ox, -oy)
+    const pts = [[0, 0], [W, 0], [0, h], [W, h]].map(([x, y]) => m.transformPoint(new DOMPoint(x, y)))
+    const xs = pts.map((p) => l + p.x * kx), ys = pts.map((p) => t + p.y * ky)
+    return { l: Math.min(...xs), t: Math.min(...ys), r: Math.max(...xs), b: Math.max(...ys) }
+  }
+
+  /** 一个元素里的图标（img、最外层的 svg）：不看框，只看画出来的东西 */
+  function iconRects(root, pseudo = false) {
+    const out = []
+    for (const e of root.querySelectorAll('img,svg')) {
+      if ((e.parentElement && e.parentElement.closest('svg')) || isOurs(e) || e.closest('dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      const r = e.getBoundingClientRect()
+      if (r.width >= 1 && r.height >= 1 && !hiddenChain(e)) out.push({ el: e, r: { l: r.left, t: r.top, r: r.right, b: r.bottom } })
+    }
+    if (!pseudo) return out
+    // 图标字体、背景图标：::before / ::after 里放了字或 url() 图（空白、渐变遮罩这种装饰不算）。量不到伪元素的框，按它算出来的位置和大小推
+    for (const e of [root, ...root.querySelectorAll('*')]) {
+      if (isOurs(e) || e.closest('svg,dsh-design-picker,dsh-design-fx,dsh-design-edit')) continue
+      for (const which of ['::before', '::after']) {
+        const ps = getComputedStyle(e, which)
+        if (ps.display === 'none' || ps.content === 'none' || ps.content === 'normal' || ps.visibility === 'hidden' || parseFloat(ps.opacity) === 0) continue
+        const glyph = /^["'][\s\S]*\S[\s\S]*["']$/.test(ps.content.replace(/\\[0-9a-f]{1,6}\s?|\\./gi, 'x')) || /url\(/.test(ps.content + ps.backgroundImage + ps.webkitMaskImage + ps.maskImage)
+        if (!glyph || hiddenChain(e)) continue
+        // 无头体检时浏览器给了真实框（同一滚动位置）就用它；全问到了还没框的是没排出来；没给的（实时预览、宿主太多没问到）按样式推
+        const at = scrollX + ',' + scrollY
+        const fresh = window.__dshPseudoAt === at
+        const got = fresh && e.__dshPseudo && e.__dshPseudo.at === at ? e.__dshPseudo : null
+        const o = got ? got[which] || null : fresh && window.__dshPseudoAll ? null : pseudoBox(e, which, ps)
+        // 伪元素是宿主的子盒：宿主自己的 overflow 也裁它；绝对 / 固定定位的按它自己的包含块裁（pos 交给 restBox）
+        if (o && o.r - o.l >= 1 && o.b - o.t >= 1) out.push({ el: e, r: o, pos: ps.position })
+      }
+    }
+    return out
+  }
+
+  /**
+   * 底栏里横排、等宽、铺满大半条的一排（标签栏的几项）：找最多的那排，返回这几项。
+   * 绝对 / 固定定位的子元素（当前项下面的小横线这种）不算项；能横着滑、或者伸出栏外一大截的一排（轮播、商品列表）不算
+   */
+  const slides = (el, top) => {
+    for (let e = el; e; e = e === top ? null : e.parentElement) {
+      if (/auto|scroll/.test(getComputedStyle(e).overflowX) && e.scrollWidth > e.clientWidth + 1) return true
+    }
+    return false
+  }
+  function tabCount(bar) {
+    let best = []
+    const walk = (el, depth) => {
+      const ks = []
+      for (const k of el.children) {
+        if (isOurs(k)) continue
+        const cs = getComputedStyle(k)
+        if (cs.display === 'none' || cs.position === 'absolute' || cs.position === 'fixed') continue
+        const r = k.getBoundingClientRect()
+        if (r.width >= 1 && r.height >= 1) ks.push({ k, r })
+      }
+      if (ks.length > best.length) {
+        const ws = ks.map((x) => x.r.width)
+        const avg = ws.reduce((m, w) => m + w, 0) / ws.length
+        const same = Math.max(...ws) - Math.min(...ws) <= Math.max(4, avg * 0.12)
+        const row = Math.max(...ks.map((x) => x.r.top)) - Math.min(...ks.map((x) => x.r.top)) <= 4
+        const fits = !slides(el, bar.el) && ks.every((x) => x.r.left >= bar.r.left - x.r.width / 4 && x.r.right <= bar.r.right + x.r.width / 4)
+        if (ks.length >= 2 && same && row && fits && avg * ks.length >= bar.r.width * 0.7) best = ks.map((x) => x.k)
+      }
+      if (depth < 4) for (const k of el.children) if (!isOurs(k)) walk(k, depth + 1)
+    }
+    walk(bar.el, 0)
+    return best
+  }
+
+  /**
+   * 这排是切换页面的标签栏（不是一排操作按钮），按这个次序定：
+   * - 这一排到栏之间（以及栏外面）写明了是工具栏（role=toolbar、class 带 toolbar / tools）：不是；
+   * - 写明了是导航（role=tab / tablist、项链到别的页面（#/home 这种路由也算，光一个 # 不算）、标了 aria-current、栏 / 这一排 / 项的 class 或 id 带 tab、nav）：是；
+   * - 一半以上是操作（裁剪、旋转、分享……）：不是；一半以上是页面名（首页、分类、我的……）：是；
+   * - 全是 <button>：不是；
+   * - 在 <nav> 里、项是占位链接（href="#"）、项标了选中（active、on……）、只有一项颜色不同（字或图标）：是
+   * 认字时只看文字（字符图标 ✂、↻ 这种去掉）
+   */
+  const ON = /(^|[-_\s])(on|active|current|cur|selected)($|[-_\s])/i
+  const PAGE_WORDS = new Set('首页 主页 分类 发现 消息 购物车 我的 我 个人 个人中心 通讯录 联系人 动态 社区 推荐 关注 订单 会员 商城 广场 朋友 视频 直播 学习 课程 工作台 应用 服务 钱包 资讯 附近 活动 收藏 设置 home discover explore messages message inbox chat chats cart profile me mine account settings feed library favorites orders shop store community friends contacts notifications activity wallet categories category deals news videos live learn courses'.split(' '))
+  const TOOL_WORDS = new Set('裁剪 剪裁 旋转 翻转 滤镜 调色 调节 贴纸 文字 文本 画笔 涂鸦 马赛克 边框 美颜 特效 配乐 音乐 变速 分割 删除 复制 粘贴 撤销 重做 分享 点赞 评论 转发 下载 保存 编辑 加粗 斜体 下划线 对齐 插入 表格 链接 拍照 相册 亮度 对比度 饱和度 美化 模板 背景 橡皮 播放 暂停 静音 全屏 crop rotate flip filter filters adjust sticker stickers text draw brush erase eraser undo redo share like comment save edit delete copy paste bold italic underline align insert download trim split speed effects music play pause mute fullscreen'.split(' '))
+  const classOf = (el) => (el.getAttribute('class') || '') + ' ' + el.id
+  const labelOf = (k) => String(k.innerText || k.textContent || '').toLowerCase().replace(/[^\p{L}]+/gu, '')
+  function navLike(bar, items) {
+    const row = items[0].parentElement
+    const boxes = [] // 这一排一直到栏（再往外由 closest 看）
+    for (let e = row; e; e = e === bar.el ? null : e.parentElement) boxes.push(e)
+    if (boxes.some((e) => e.matches('[role=toolbar]') || /(^|[-_\s])tool(bar|s)?($|[-_\s])/i.test(classOf(e))) || bar.el.closest('[role=toolbar]')) return false
+    const page = (k) => k.matches('a[href]') && !/^(#?|javascript:.*)$/i.test(k.getAttribute('href').trim())
+    if (items.some((k) => page(k) || k.matches('[role=tab],[aria-current]:not([aria-current=false])')) || boxes.some((e) => e.matches('[role=tablist]'))) return true
+    if ([...boxes, ...items].some((e) => /tab(?!le)|(^|[-_\s])nav/i.test(classOf(e)))) return true
+    const labels = items.map(labelOf)
+    if (labels.filter((x) => TOOL_WORDS.has(x)).length * 2 >= items.length) return false
+    if (labels.filter((x) => PAGE_WORDS.has(x)).length * 2 >= items.length) return true
+    if (items.every((k) => k.matches('button,[role=button]'))) return false
+    if (bar.el.closest('nav,[role=navigation]') || bar.el.querySelector('nav,[role=navigation]') || items.some((k) => k.matches('a[href]'))) return true
+    if (items.some((k) => k.matches('[aria-selected=true]') || ON.test(classOf(k)) || [...k.querySelectorAll('*')].some((e) => ON.test(classOf(e))))) return true
+    // 只有一项颜色不同：字的颜色，或者图标（svg 的 color / fill、图标字体的颜色）
+    const tint = (k) => {
+      const t = [k, ...k.querySelectorAll('*')].find((e) => ownText(e)) || k
+      const ic = k.querySelector('svg,i,[class*=icon]')
+      const ics = ic ? getComputedStyle(ic) : null
+      return getComputedStyle(t).color + '|' + (ics ? ics.color + ics.fill : '')
+    }
+    const tints = items.map(tint)
+    const odd = tints.filter((c) => tints.filter((x) => x === c).length === 1)
+    return odd.length === 1 && new Set(tints).size === 2
+  }
+
+  /**
+   * 手机（App、小程序）：
+   * - 灵动岛挡住的字和按钮（外框画在页面上面，挡住的看不见）；
+   * - 底栏里的字、图标伸进底部横条区（让出 34px，栏的底色可以铺下去）；
+   * - 标签栏超过 5 项（小程序最多 5 项，微信直接报错）；
+   * - 小程序：导航栏那条（44–88）什么都没有。
+   * 矮的手机（高不到宽的 1.9 倍）没有灵动岛、横条，只看后两条
+   */
+  function phoneCheck(add, atoms, vw, kind) {
+    const vh = innerHeight
+    const tall = vh / vw >= 1.9
+    if (tall) {
+      const isl = { l: vw / 2 - ISLAND.w / 2, r: vw / 2 + ISLAND.w / 2, t: ISLAND.top, b: ISLAND.top + ISLAND.h }
+      zoneCheck(add, atoms, isl, 'island', (o, ow, oh) => oh, {})
+    }
+    const line = vh - HOMEBAR
+    for (const bar of barsAt('bottom', true)) {
+      if (tall) {
+        let worst = null
+        // 只量看得见的那截：被自己（省略号、多行截断）或外层（轮播）裁掉的、在屏幕外的不算
+        const look = (el, r, self, pos) => {
+          const o = restBox(el, true, null, self, pos)(r)
+          if (!o || o.r <= 0 || o.l >= vw || o.t >= vh || o.b <= 0) return
+          const d = Math.min(o.b, vh) - line
+          if (d > 6 && (!worst || d > worst.d)) worst = { el, d }
+        }
+        for (const a of atoms) if (bar.el.contains(a.el) && !hiddenChain(a.el)) for (const r of a.rects) look(a.el, r, true)
+        for (const ic of iconRects(bar.el, true)) look(ic.el, ic.r, !!ic.pos, ic.pos)
+        // 伸进几像素看不出来，不报；伸进 12px 以上算严重
+        if (worst) add('homebar', worst.el, { px: Math.round(worst.d), bar: nameOf(bar.el) }, worst.d >= 12 ? 2 : 1)
+      }
+      const items = tabCount(bar)
+      if (items.length > 5 && navLike(bar, items)) add('tabbar', bar.el, { n: items.length }, kind === 'miniprogram' ? 2 : 1)
+    }
+    if (kind !== 'miniprogram') return
+    // 导航栏那条：没滚时有字、图标或按钮的竖直中线落在里面就算有
+    const band = { t: NAVBAR.top, b: NAVBAR.top + NAVBAR.h }
+    const inBand = (o) => o && (o.t + o.b) / 2 >= band.t && (o.t + o.b) / 2 <= band.b
+    const seen = (el, rects, self) => {
+      if (hiddenChain(el)) return false
+      const rest = restBox(el, false, null, self)
+      return rects.some((r) => inBand(rest(r)))
+    }
+    for (const a of atoms) if (seen(a.el, a.rects, true)) return
+    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 && seen(el, [{ l: r.left, r: r.right, t: r.top, b: r.bottom }])) return
+    }
+    for (const ic of iconRects(document.body)) if (seen(ic.el, [ic.r])) return
+    add('navbar', null, { t: band.t, b: band.b }, 1)
   }
 
   /**
@@ -2563,8 +2904,10 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       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
+      // Windows 桌面软件看右上角三个按钮那块，别的看胶囊那块
+      const win = deskOs() === 'win'
+      const x = win ? innerWidth - WINBTN.w * 1.5 : innerWidth - CAP.right - CAP.w / 2
+      const y = win ? WINBTN.h / 2 : CAP.top + CAP.h / 2
       const hits = paintedAt(x, y).filter((e) => !isOurs(e) && !(e instanceof SVGElement)).reverse() // 从下往上
       const { base, onCanvas } = canvasBase()
       const layers = []
@@ -2635,7 +2978,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   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|perspective|filter|contain/.test(cs.willChange)
   }
   /** 变换过的：transform，或单独写的 scale / translate / rotate */
   function moved(cs) {
@@ -2805,6 +3148,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     return { white }
   }
 
+  /** 截图时把桌面软件的窗口按钮画上去（和右侧栏外框一样）：solid 实的、ghost 半透明，别的值撤掉 */
+  let winEl = null
+  function showWinCtl(how) {
+    if (winEl) { winEl.remove(); winEl = null }
+    if (how !== 'solid' && how !== 'ghost') return null
+    const os = deskOs()
+    const h = document.createElement('dsh-design-fx')
+    let svg
+    if (os === 'win') {
+      const W = WINBTN.w, H = WINBTN.h
+      const c = topDark() ? '#fff' : '#1f1f1f'
+      h.style.cssText = `position:fixed;top:0;right:0;width:${W * 3}px;height:${H}px`
+      svg = `<svg width="${W * 3}" height="${H}" viewBox="0 0 ${W * 3} ${H}" style="display:block" fill="none" stroke="${c}" stroke-width="1">` +
+        `<path d="M${W / 2 - 5} ${H / 2 + 0.5}h10"/><rect x="${W * 1.5 - 4.5}" y="${H / 2 - 4.5}" width="9" height="9" rx="1"/>` +
+        `<path d="M${W * 2.5 - 5} ${H / 2 - 5}l10 10M${W * 2.5 + 5} ${H / 2 - 5}l-10 10"/></svg>`
+    } else {
+      const { x, y, d, gap } = LIGHTS
+      const w = d * 3 + gap * 2
+      h.style.cssText = `position:fixed;top:${y}px;left:${x}px;width:${w}px;height:${d}px`
+      svg = `<svg width="${w}" height="${d}" viewBox="0 0 ${w} ${d}" style="display:block">` +
+        ['#FF5F57', '#FEBC2E', '#28C840'].map((c, i) => `<circle cx="${d / 2 + i * (d + gap)}" cy="${d / 2}" r="${d / 2 - 0.25}" fill="${c}" stroke="rgba(0,0,0,.12)" stroke-width=".5"/>`).join('') + '</svg>'
+    }
+    h.style.cssText += `;z-index:2147483646;pointer-events:none;opacity:${how === 'ghost' ? 0.5 : 1}`
+    h.attachShadow({ mode: 'closed' }).innerHTML = svg
+    document.documentElement.appendChild(h)
+    winEl = h
+    return { os }
+  }
+
   /** 量之前等字体、图片载完（最多等 2 秒）：刚载入的页面字体没到时字宽不对，断行、截断都会量错 */
   async function settle() {
     const wait = (p, ms) => Promise.race([p, new Promise((r) => setTimeout(r, ms))])
@@ -3012,6 +3384,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         },
         dark: (on) => { const has = hasDark(); if (has) setDark(!!on); return has },
         capsule: (how) => showCapsule(how),
+        winctl: (how) => showWinCtl(how),
         /** 调节滑块的值套到页面上（和右侧栏拖的时候一样） */
         tweak: (vars, attrs) => { applyTweak(vars, attrs); return true },
         settle: () => settle().then(() => true),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-design-studio",
-  "version": "0.8.0",
+  "version": "0.9.0",
   "type": "module",
   "scripts": {
     "test": "node --test --test-concurrency=1 test/*.mjs"

package/skills/ui-design/SKILL.md

@@ -1,6 +1,6 @@
 # 界面设计（配合右侧「设计工作台」）
 
-做网页、App 界面、平板界面、海报 / 社媒图、幻灯片、邮件、组件这类**看得见的设计**时照这份来。目标：一眼看上去像专业设计师做的，不像模板，也没有「AI 味」。
+做网页、App 界面、微信小程序、平板界面、桌面软件、海报 / 社媒图、幻灯片、邮件、组件这类**看得见的设计**时照这份来。目标：一眼看上去像专业设计师做的，不像模板，也没有「AI 味」。
 
 > 不归这里管：用户只是要把回答做成一页看或用（对比、表格、清单、图表、计算器、学习卡片），而你有 `show_page` 工具——直接调 `show_page`，不用这份流程、不写文件、不开预览。
 
@@ -10,7 +10,7 @@
 
    - **什么时候跳过**：改已有的设计；用户说了「直接做」「不用问」；或者需求已经够具体（做什么、给谁用、什么风格或配色、要哪几屏都说了）。这时不问、也不出三个方向，第一句话说清你按什么理解开工（「按温暖手作风格做首页、详情、购物车三屏」），直接从第 1 步做全套。拿不准算不算够具体，就只问缺的那一两项。
 
-   - **问**：只问最关键的两三个问题，一次问完：给谁用、想要什么感觉（给三个具体选项，从工作台的风格卡里挑最合场景的三个：极简白、温暖手作、杂志编辑、深色高级、活泼年轻、清新自然、专业科技、玻璃质感、柔和立体、国潮、中式雅致、赛博朋克、可爱卡通、复古、电商促销）、有没有必须有的内容或品牌色。有 `ask_user_question` 工具就用它问（带选项），没有就在回复里问完、停下等回答。用户说「你定」就按场景替他定。
+   - **问**：只问最关键的两三个问题，一次问完：给谁用、想要什么感觉（给三个具体选项，从工作台的风格卡里挑最合场景的三个：极简白、温暖手作、杂志编辑、深色高级、活泼年轻、清新自然、专业科技、玻璃质感、柔和立体、国潮、中式雅致、赛博朋克、可爱卡通、复古、电商促销、日系原木、瑞士网格、粗野主义、奶油风、运动能量）、有没有必须有的内容或品牌色。有 `ask_user_question` 工具就用它问（带选项），没有就在回复里问完、停下等回答。用户说「你定」就按场景替他定。
    - **用户有默认的品牌设计系统**（这份技能末尾「设计系统」一节写着）：感觉已经定了，照那一节做，不问感觉、不推风格卡。
    - **用户点了风格卡**（消息以〔风格〕开头，带着配色、字体、形状和要点）：感觉已经定了，不用再问感觉，只问还缺的（给谁用、必须有的内容）；三个方向都按这套配色和字体来，在版式和信息重点上拉开。
    - **出三个方向**：先只做最能代表这套设计的一屏（通常是首页或封面），做三个明显不同的方向：`home-a.html`、`home-b.html`、`home-c.html`。用户已经挑了感觉（比如「温暖手作」），三个方向就都在这个感觉里拉开：版式、信息重点、字体搭配、配色深浅各不相同（比如「大图海报式 / 卡片列表式 / 一步下单式」），不要再出两个他没选的风格；没挑或说「你定」，三个方向就是三种不同的感觉。不管哪种，都不是同一个版式换颜色。这时还不建 `tokens.css`，每个方向的设计变量写在自己文件的 `<style>` 里（`:root{…}`）。`<title>` 写成「方向 A · 温暖手作」这样，画布上一眼分得清。写完第一个就调 `preview_page`，另外两个会并排出现。
@@ -24,6 +24,7 @@
    | `app` | 390×844（iPhone） | 手机 + 灵动岛 | `references/app.md` |
    | `miniprogram` | 375×812（微信小程序） | 手机 + 右上角胶囊 | `references/miniprogram.md` |
    | `tablet` | 820×1180 | 平板 | `references/app.md` 末尾 |
+   | `desktop` | 1280×800（Mac / Windows 软件窗口） | 窗口 + 左上角红绿灯（Windows 是右上角三个按钮） | `references/desktop.md` |
    | `poster` | 1080×1350（4:5），可改 1080×1920 / 1080×1080 | 卡片 | `references/poster.md` |
    | `slides` | 1280×720（16:9） | 卡片 | `references/slides.md` |
    | `email` | 600 宽 | 卡片 | `references/email.md` |
@@ -35,7 +36,7 @@
 3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写「屏名 · 产品名」，用界面的语言（如「首页 · 梅林练」「Home · Pedal」，每屏的产品名写成一样的）：画布上只显示屏名，导出整套展示图时产品名做大标题。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
 
    ```html
-   <meta name="dsh-design" content="app">          <!-- 类型；小程序写 miniprogram；海报可带尺寸：poster 1080x1920 -->
+   <meta name="dsh-design" content="app">          <!-- 类型；小程序写 miniprogram；Windows 软件写 desktop windows；海报可带尺寸：poster 1080x1920 -->
    ```
 
    **几屏共用的东西只写一份**：样式放 `tokens.css` 和一个公共的 `app.css`；图标、书封这类 SVG 放进一个 `icons.svg`（每个图标一个 `<symbol id="…">`），页面里用 `<svg><use href="icons.svg#cart"></use></svg>` 引用——换风格时改一处所有屏一起变，不会漏改。状态栏、标签栏这种 HTML 结构每屏照抄一份，保持一模一样。

package/skills/ui-design/references/app.md

@@ -4,7 +4,7 @@
 
 - 手机按 390×844（iPhone 15/16）设计，页面宽度跟着视口走（`width: 100%`），不要居中一个小盒子。`<meta name="viewport" content="width=device-width,initial-scale=1">`。别写死 `width: 390px`、也别给 body 加 `max-width` 再居中：工作台已经按 390 宽显示、套好手机外框，多尺寸视图还会拿 375 / 430 宽来看，写死就露馅。也别为了这个另开浏览器截图——要检查就调 `check_design`。
 - 顶部 54px 是状态栏 + 灵动岛：自己画一条状态栏（时间 9:41、信号、电量），中间空着——灵动岛预览的外框会画，页面里别再画一个（不然换尺寸看时会出现两个）。内容从 54px 以下开始。
-- 底部 34px 是横条（home indicator）区：底部的标签栏 / 按钮要把它让出来（标签栏总高约 83px）。
+- 底部 34px 是横条（home indicator）区：底部的标签栏 / 按钮要把它让出来（标签栏总高约 83px = 49 + 34）。设计稿里写死 34px：预览里 `env(safe-area-inset-bottom)` 是 0，靠它让不出来；做成真代码时再换成 `env()`。体检会报「伸进底部横条区」。
 - 左右边距 16–24px；卡片之间 12–16px。
 
 ## 结构和组件