dsh-design-studio 0.9.0 → 0.11.0

package/lib/gallery/qrfind.js

@@ -0,0 +1,181 @@
+/**
+ * 截图里像不像有二维码：找二维码的三个「回」字定位块（黑白 1:1:3:1:1），三个摆成直角、间距合理就算像。
+ * 不解码（插件不带解码库）：分享前体检只提示「像是有二维码」；内容仓库的机器人再用 jsQR 真扫，能扫出来的才退回。
+ * 只依赖 Node 自带的 zlib。
+ *
+ *   decodePng(buf)       → { width, height, rgba } | null   （8 位、不隔行，Chrome 截图就是这种）
+ *   findQrLike(img)      → { at: [[x, y] ×3], module } | null
+ */
+
+import zlib from 'node:zlib'
+
+const MAX_PX = 40e6
+
+/** PNG → RGBA（透明的按白底合成）；看不懂、太大返回 null */
+export function decodePng(buf) {
+  if (!Buffer.isBuffer(buf) || buf.length < 45 || buf.readUInt32BE(0) !== 0x89504e47 || buf.readUInt32BE(4) !== 0x0d0a1a0a) return null
+  let i = 8
+  let w = 0
+  let h = 0
+  let depth = 0
+  let ctype = 0
+  let inter = 0
+  const idat = []
+  while (i + 12 <= buf.length) {
+    const len = buf.readUInt32BE(i)
+    const t = buf.toString('latin1', i + 4, i + 8)
+    if (i + 12 + len > buf.length) return null
+    const d = buf.subarray(i + 8, i + 8 + len)
+    if (t === 'IHDR') { w = d.readUInt32BE(0); h = d.readUInt32BE(4); depth = d[8]; ctype = d[9]; inter = d[12] } else if (t === 'IDAT') idat.push(d)
+    else if (t === 'IEND') break
+    i += 12 + len
+  }
+  const ch = { 0: 1, 2: 3, 4: 2, 6: 4 }[ctype]
+  if (!w || !h || depth !== 8 || !ch || inter || w * h > MAX_PX) return null
+  let raw
+  try { raw = zlib.inflateSync(Buffer.concat(idat), { maxOutputLength: (w * ch + 1) * h + 16 }) } catch { return null }
+  const stride = w * ch
+  if (raw.length < (stride + 1) * h) return null
+  const px = Buffer.alloc(stride * h)
+  for (let y = 0; y < h; y++) {
+    const f = raw[y * (stride + 1)]
+    const src = y * (stride + 1) + 1
+    const row = y * stride
+    for (let x = 0; x < stride; x++) {
+      const a = x >= ch ? px[row + x - ch] : 0
+      const b = y ? px[row - stride + x] : 0
+      const c = x >= ch && y ? px[row - stride + x - ch] : 0
+      let v = raw[src + x]
+      if (f === 1) v += a
+      else if (f === 2) v += b
+      else if (f === 3) v += (a + b) >> 1
+      else if (f === 4) { const p = a + b - c; const pa = Math.abs(p - a); const pb = Math.abs(p - b); const pc = Math.abs(p - c); v += pa <= pb && pa <= pc ? a : pb <= pc ? b : c }
+      px[row + x] = v & 255
+    }
+  }
+  const rgba = new Uint8ClampedArray(w * h * 4)
+  for (let k = 0, j = 0; k < w * h; k++, j += ch) {
+    const o = k * 4
+    const al = ch === 4 ? px[j + 3] : ch === 2 ? px[j + 1] : 255
+    const mix = (v) => Math.round((v * al + 255 * (255 - al)) / 255)
+    if (ch >= 3) { rgba[o] = mix(px[j]); rgba[o + 1] = mix(px[j + 1]); rgba[o + 2] = mix(px[j + 2]) } else rgba[o] = rgba[o + 1] = rgba[o + 2] = mix(px[j])
+    rgba[o + 3] = 255
+  }
+  return { width: w, height: h, rgba }
+}
+
+/** 五段黑白的长度合不合 1:1:3:1:1；合就返回一个模块多宽，不合返回 0 */
+function ratio(c) {
+  const tot = c[0] + c[1] + c[2] + c[3] + c[4]
+  if (tot < 7) return 0
+  const m = tot / 7
+  const v = m / 2
+  return Math.abs(m - c[0]) < v && Math.abs(m - c[1]) < v && Math.abs(3 * m - c[2]) < 3 * v && Math.abs(m - c[3]) < v && Math.abs(m - c[4]) < v ? m : 0
+}
+
+/** 黑白图（局部阈值：比周围平均暗一截、或本来就很黑的算黑） */
+function binarize({ width: w, height: h, rgba }) {
+  const n = w * h
+  const L = new Uint8Array(n)
+  for (let k = 0; k < n; k++) L[k] = (rgba[k * 4] * 299 + rgba[k * 4 + 1] * 587 + rgba[k * 4 + 2] * 114) / 1000
+  const W = w + 1
+  const S = new Float64Array(W * (h + 1))
+  for (let y = 0; y < h; y++) {
+    let row = 0
+    for (let x = 0; x < w; x++) { row += L[y * w + x]; S[(y + 1) * W + x + 1] = S[y * W + x + 1] + row }
+  }
+  const r = Math.max(7, Math.round(Math.min(w, h) / 16))
+  const dark = new Uint8Array(n)
+  for (let y = 0; y < h; y++) {
+    const y0 = Math.max(0, y - r)
+    const y1 = Math.min(h, y + r + 1)
+    for (let x = 0; x < w; x++) {
+      const x0 = Math.max(0, x - r)
+      const x1 = Math.min(w, x + r + 1)
+      const mean = (S[y1 * W + x1] - S[y0 * W + x1] - S[y1 * W + x0] + S[y0 * W + x0]) / ((y1 - y0) * (x1 - x0))
+      const v = L[y * w + x]
+      dark[y * w + x] = v < 60 || v < mean * 0.82 ? 1 : 0
+    }
+  }
+  return dark
+}
+
+const CAP_RUN = 400
+
+/** 从 (x, y) 沿一个方向量五段（中间那段经过这一点）→ { m, mid } | null */
+function cross(dark, w, h, x, y, dx, dy) {
+  const at = (k) => { const xx = x + dx * k; const yy = y + dy * k; return xx >= 0 && yy >= 0 && xx < w && yy < h ? dark[yy * w + xx] : -1 }
+  if (at(0) !== 1) return null
+  const c = [0, 0, 0, 0, 0]
+  let k = 0
+  while (at(k) === 1 && c[2] < CAP_RUN) { c[2]++; k-- }
+  while (at(k) === 0 && c[1] < CAP_RUN) { c[1]++; k-- }
+  while (at(k) === 1 && c[0] < CAP_RUN) { c[0]++; k-- }
+  k = 1
+  while (at(k) === 1 && c[2] < CAP_RUN) { c[2]++; k++ }
+  while (at(k) === 0 && c[3] < CAP_RUN) { c[3]++; k++ }
+  while (at(k) === 1 && c[4] < CAP_RUN) { c[4]++; k++ }
+  const m = ratio(c)
+  if (!m) return null
+  // 中间段的中点（相对 (x, y) 的步数）
+  const end = k - c[4] - c[3]
+  return { m, mid: end - c[2] / 2, tot: c.reduce((a, b) => a + b, 0) }
+}
+
+/**
+ * 找「像二维码」的地方。img：{ width, height, rgba }
+ * 返回第一个找到的 { at: [[x, y], [x, y], [x, y]], module } 或 null
+ */
+export function findQrLike(img) {
+  if (!img || !img.width || !img.height || img.width * img.height > MAX_PX) return null
+  const { width: w, height: h } = img
+  const dark = binarize(img)
+  const found = []
+  for (let y = 0; y < h; y++) {
+    // 这一行的黑白段
+    const runs = []
+    let x = 0
+    while (x < w) {
+      const v = dark[y * w + x]
+      const s = x
+      while (x < w && dark[y * w + x] === v) x++
+      runs.push([v, x - s, s])
+    }
+    for (let i = 0; i + 4 < runs.length; i++) {
+      if (runs[i][0] !== 1) continue
+      const c = [runs[i][1], runs[i + 1][1], runs[i + 2][1], runs[i + 3][1], runs[i + 4][1]]
+      const mh = ratio(c)
+      if (!mh) continue
+      const cx = Math.round(runs[i + 2][2] + runs[i + 2][1] / 2)
+      const v = cross(dark, w, h, cx, y, 0, 1)
+      if (!v || Math.abs(v.tot - 7 * mh) > 7 * mh * 0.4) continue
+      const cy = Math.round(y + v.mid)
+      const hh = cross(dark, w, h, cx, cy, 1, 0)
+      if (!hh || Math.abs(hh.tot - v.tot) > v.tot * 0.4) continue
+      const fx = cx + hh.mid
+      const m = (mh + v.m + hh.m) / 3
+      const hit = found.find((f) => Math.abs(f.x - fx) <= m * 2 && Math.abs(f.y - cy) <= m * 2 && f.m / m < 1.4 && m / f.m < 1.4)
+      if (hit) { hit.x = (hit.x * hit.n + fx) / (hit.n + 1); hit.y = (hit.y * hit.n + cy) / (hit.n + 1); hit.m = (hit.m * hit.n + m) / (hit.n + 1); hit.n++ } else if (found.length < 400) found.push({ x: fx, y: cy, m, n: 1 })
+    }
+  }
+  const pts = found.filter((f) => f.n >= 2).sort((a, b) => b.n - a.n).slice(0, 60)
+  for (let a = 0; a < pts.length; a++) {
+    for (let b = a + 1; b < pts.length; b++) {
+      for (let c = b + 1; c < pts.length; c++) {
+        const P = [pts[a], pts[b], pts[c]]
+        const ms = P.map((p) => p.m)
+        const mm = (ms[0] + ms[1] + ms[2]) / 3
+        if (Math.max(...ms) / Math.min(...ms) > 1.4) continue
+        const d2 = (p, q) => (p.x - q.x) ** 2 + (p.y - q.y) ** 2
+        const s = [d2(P[0], P[1]), d2(P[0], P[2]), d2(P[1], P[2])].sort((x, y) => x - y)
+        if (s[0] / s[1] < 0.75) continue // 两条直角边差不多长
+        const hyp = s[2] / (s[0] + s[1])
+        if (hyp < 0.85 || hyp > 1.15) continue // 勾股：是直角
+        const side = Math.sqrt((s[0] + s[1]) / 2) / mm
+        if (side < 13 || side > 172) continue // 版本 1–40：定位块中心间距 14–170 个模块
+        return { at: P.map((p) => [Math.round(p.x), Math.round(p.y)]), module: Math.round(mm * 10) / 10 }
+      }
+    }
+  }
+  return null
+}

package/lib/gallery/render.js

@@ -0,0 +1,148 @@
+/**
+ * 内容仓库的机器人用：一套设计断网开出来，跑体检（同 check_design）、每屏截一张图。
+ *
+ *   - 用设计台自己的预览服务器（只听 127.0.0.1），每个 HTML 都按「别人做的」加严格规矩（CSP + nonce）
+ *   - 浏览器断网：除了这台预览服务器，什么都不让拿
+ *   - 体检结果分两档：hard（CI 里算失败）和 soft（标出来给人看）。
+ *     CI 的字体和用户电脑不一样，截断 / 溢出 / 叠字这类先算 soft；被系统栏压住、图片坏了、跳转到不存在的页算 hard
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { createHub } from '../serve.js'
+import { createBrowser } from '../browser.js'
+import { measureAll, shootAll, prepare, KIND_SIZE, sizeOf } from '../look.js'
+import { decodePng, findQrLike } from './qrfind.js'
+
+const IMG_EXT = /\.(png|jpe?g|webp|gif|svg|avif)$/i
+// 扫描预算：每屏最多几段、一共最多几段、最多几张图。超了的不算「查过」：记进 skipped，机器人标出来转人工
+export const QR_BUDGET = { parts: 60, total: 300, images: 40 }
+
+/** 设计目录里的图片（相对路径；软链接不跟）→ { list, more }（more：超过预算没列进来的） */
+function imagesIn(dir, cap) {
+  const out = []
+  let more = false
+  const walk = (abs, rel, depth) => {
+    let ents = []
+    try { ents = fs.readdirSync(abs, { withFileTypes: true }) } catch { return }
+    for (const d of ents) {
+      if (d.name.startsWith('.')) continue
+      const r = rel ? `${rel}/${d.name}` : d.name
+      if (d.isDirectory()) { if (depth < 6) walk(path.join(abs, d.name), r, depth + 1); else more = true } else if (d.isFile() && IMG_EXT.test(d.name)) { if (out.length < cap) out.push(r); else more = true }
+    }
+  }
+  walk(dir, '', 0)
+  return { list: out, more }
+}
+
+/**
+ * 找二维码用的截图（无损 PNG、1 倍）：每屏从上到下每半屏截一张（长页面中段也截），再加每张图片单独开一次
+ * → { shots: [{ file, png }], skipped: [{ file, why }] }（why：long 页面太长没截完 / budget 总段数用完 / images 图太多 / open 开不出来）
+ */
+async function qrShots(b, { list, origin, dir, size, budget = QR_BUDGET }) {
+  const out = []
+  const skipped = []
+  let left = budget.total
+  const [w, h] = size
+  for (const sc of list) {
+    if (left <= 0) { skipped.push({ file: sc.key, why: 'budget' }); continue }
+    try {
+      await b.withPage({ url: sc.url, w, h, scale: 1 }, async (page) => {
+        await prepare(page, false)
+        const s0 = await page.eval('window.__dshDesign.scroll(0)')
+        const of = Math.max(1, Number(s0 && s0.of) || 1)
+        // 每次只往下滚半屏：相邻两张重叠一半，正好卡在接缝上的二维码在另一张里是整的
+        const at = []
+        for (let k = 0; k <= 2 * (of - 1); k++) at.push(k / 2)
+        const n = Math.min(at.length, budget.parts, left)
+        if (n < at.length) skipped.push({ file: sc.key, why: at.length > budget.parts ? 'long' : 'budget' })
+        for (let i = 0; i < n; i++) {
+          if (i) await page.eval(`window.__dshDesign.scroll(${at[i]})`)
+          out.push({ file: sc.key, png: await page.shot({ format: 'png' }) })
+          left--
+        }
+      })
+    } catch { skipped.push({ file: sc.key, why: 'open' }) /* 这一屏开不出来：上面的体检也会报 */ }
+  }
+  const imgs = imagesIn(dir, budget.images)
+  if (imgs.more) skipped.push({ file: '', why: 'images' })
+  for (const img of imgs.list) {
+    try {
+      await b.withPage({ url: `${origin}/${img.split('/').map(encodeURIComponent).join('/')}`, w: 1000, h: 1000, scale: 1 }, async (page) => {
+        out.push({ file: img, png: await page.shot({ format: 'png' }) })
+      })
+    } catch { skipped.push({ file: img, why: 'open' }) /* 打不开的图：体检里「图片坏了」会报 */ }
+  }
+  return { shots: out, skipped }
+}
+
+export const HARD = new Set(['covered', 'capsule', 'island', 'winctl', 'homebar', 'img', 'deadlink'])
+
+/**
+ * @param dir     设计目录（已经检查过、规范化过）
+ * @param screens 屏的文件名，按顺序
+ * @param size    design.json 里写的尺寸（'1080x1920'）；不给 / 不认识就按 kind 的默认尺寸
+ * @param thumb   给第一屏另截一张多宽的小图（webp，卡片封面用）；0 不截
+ * @param qr      找二维码：true 只给 qrLike（像二维码的文件）；'shots' 另外把用来找的 PNG 截图也给出来（机器人拿去用 jsQR 真扫）
+ * @param qrBudget 扫描预算（默认 QR_BUDGET）；超了的进 qrSkipped
+ * @param qrPages  不算屏、但也要扫二维码的页面（相对路径）
+ * @returns { rows, shots: [{ file, jpg }], thumb: webp | null, hard: [{ file, type, text }], soft: [...], errors: [{ file, error }], qrLike: [{ file }], qrSkipped: [{ file, why }], qrShots: [{ file, png }] }
+ */
+export async function renderPack(dir, { screens, kind = 'web', size: want = '', dark = false, shots = true, thumb = 0, browser = null, bin, qr = false, qrBudget = QR_BUDGET, qrPages = [] } = {}) {
+  const hub = createHub({ strict: { html: () => true, root: () => true } })
+  const own = !browser
+  const b = browser || createBrowser(bin ? { bin } : {})
+  if (!b.available()) throw new Error('没找到 Chrome / Chromium（设 CHROME_PATH）')
+  const offline = { ...b, withPage: (o, fn) => b.withPage({ ...o, offline: true }, fn) }
+  try {
+    const { origin } = await hub.open({ kind: 'file', root: dir })
+    const list = screens.map((f) => ({ key: f, label: f, url: `${origin}/${f.split('/').map(encodeURIComponent).join('/')}` }))
+    // design.json 里写了尺寸（海报 1080x1920）就按它，不然按类型默认
+    const size = sizeOf(want, kind) || KIND_SIZE[kind] || KIND_SIZE.web
+    const rows = await measureAll(offline, { screens: list, sizes: [size], kind, dark })
+    const hard = []
+    const soft = []
+    const errors = []
+    for (const r of rows) {
+      if (r.error) { errors.push({ file: r.key, error: r.error }); continue }
+      for (const it of r.issues) (HARD.has(it.type) ? hard : soft).push({ file: r.key, type: it.type, text: String(it.text || it.src || it.sel || '').slice(0, 60) })
+    }
+    const pics = shots
+      ? (await shootAll(offline, { screens: list, size, at: 'top', dark, kind, max: list.length })).map((s) => ({ file: s.key, jpg: s.jpg || null, error: s.error || '' }))
+      : []
+    for (const s of pics) if (s.error) errors.push({ file: s.file, error: s.error })
+    let cover = null
+    if (thumb > 0 && list.length) {
+      const [w, h] = size
+      try {
+        await offline.withPage({ url: list[0].url, w, h, scale: thumb / w, dark }, async (page) => {
+          await prepare(page, dark)
+          if (kind === 'miniprogram') await page.eval("window.__dshDesign.capsule('solid')").catch(() => null)
+          if (kind === 'desktop') await page.eval("window.__dshDesign.winctl('solid')").catch(() => null)
+          cover = await page.shot({ format: 'webp', quality: 72 })
+        })
+      } catch (e) {
+        errors.push({ file: list[0].key, error: String((e && e.message) || e).slice(0, 160) })
+      }
+    }
+    const qrLike = []
+    let qrPngs = []
+    let qrSkipped = []
+    if (qr) {
+      // 不算屏的页面（_ 开头的、设计系统子目录里的）也扫：能从链接点进去
+      const more = (qrPages || []).filter((f) => !screens.includes(f)).map((f) => ({ key: f, label: f, url: `${origin}/${f.split('/').map(encodeURIComponent).join('/')}` }))
+      const q0 = await qrShots(offline, { list: [...list, ...more], origin, dir, size, budget: qrBudget })
+      qrPngs = q0.shots
+      qrSkipped = q0.skipped
+      for (const q of qrPngs) {
+        if (qrLike.some((x) => x.file === q.file)) continue
+        const hit = findQrLike(decodePng(q.png))
+        if (hit) qrLike.push({ file: q.file, at: hit.at })
+      }
+    }
+    return { rows, shots: pics, thumb: cover, hard, soft, errors, size, qrLike, qrSkipped, qrShots: qr === 'shots' ? qrPngs : [] }
+  } finally {
+    hub.closeAll()
+    if (own) b.destroy()
+  }
+}