dsh-design-studio 0.6.2 → 0.7.1

package/lib/picker.js

@@ -28,6 +28,14 @@
   const fitsParent = (o) => o === anc || (o.endsWith(':*') && anc.startsWith(o.slice(0, -1)) && /^\d+$/.test(anc.slice(o.length - 1)))
   const parentOrigins = window.parent === window ? [] : anc ? (allowed.some(fitsParent) ? [anc] : []) : allowed.filter((o) => !o.endsWith(':*'))
   const parentWin = parentOrigins.length ? window.parent : null
+  // 在右侧栏里不画滚动条（和手机上一样）：电脑设成「总是显示滚动条」时它占掉 15px，App 按 375 排版而不是 390，
+  // 右侧栏的体检就和 check_design（无头浏览器不画滚动条）对不上
+  if (parentWin) {
+    const s = document.createElement('style')
+    s.setAttribute('data-dsh-design', '')
+    s.textContent = '*{scrollbar-width:none}*::-webkit-scrollbar{display:none}'
+    ;(document.head || document.documentElement).appendChild(s)
+  }
   const SEED_KEY = '__dsh_design_seed__'
   // 远程看（右侧栏把这一屏打包放进沙盒 iframe 的 srcdoc，location 是 about:srcdoc）：这一屏原本的地址由右侧栏给
   const HERE = cfg.remote && typeof cfg.href === 'string' ? cfg.href : ''
@@ -1131,8 +1139,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
 
   const LINK_SEL = 'a[href], [data-href], [data-to], [onclick]'
 
-  /** 页面里跳到别的屏的地方：路径 + 在视口里的位置（画布上从这里画一条线到那一屏） */
-  function linksOf() {
+  /** 页面里跳到别的屏的地方：路径 + 在视口里的位置（画布上从这里画一条线到那一屏）
+   *  shown：只要这会儿露在外面的（画布连线用；导出、交接要全部） */
+  function linksOf(shown) {
     const out = []
     const seen = new Set()
     for (const el of document.querySelectorAll(LINK_SEL)) {
@@ -1146,6 +1155,9 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       // 正在播动画（生成动画、页面自己的淡入）的按钮这会儿透明度是 0，但它是看得见的按钮
       const moving = typeof el.getAnimations === 'function' && el.getAnimations().length > 0
       if (cs.visibility === 'hidden' || cs.display === 'none' || (!moving && Number(cs.opacity) === 0)) continue
+      // 被固定的底栏 / 顶栏盖住的按钮（滚到它下面了）看不见，画布上别从它出线
+      const top = shown ? document.elementFromPoint(r.left + r.width / 2, r.top + r.height / 2) : null
+      if (top && top !== el && !el.contains(top) && !(host && host.contains(top))) continue
       const k = p + '|' + Math.round(r.left / 8) + '|' + Math.round(r.top / 8)
       if (seen.has(k)) continue
       seen.add(k)
@@ -1160,14 +1172,14 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
   let linkSig = ''
   let linkTimer = 0
   function firstLinks() {
-    const links = linksOf()
+    const links = linksOf(true)
     linkSig = JSON.stringify(links)
     addEventListener('resize', () => { clearTimeout(linkTimer); linkTimer = setTimeout(resendLinks, 120) })
     setTimeout(resendLinks, 600)
     return links
   }
   function resendLinks() {
-    const links = linksOf()
+    const links = linksOf(true)
     const sig = JSON.stringify(links)
     if (sig === linkSig) return
     linkSig = sig
@@ -1432,6 +1444,35 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     const families = new Set()
     const jobs = []
     let seq = 0
+    // <use href="icons.svg#x">：画成图时（SVG 当图片）不会去载别的文件，图标全没了。
+    // 把用到的那个图标复制进画出来的页面，href 改成指它（和 bundle.js 远程看时一样的道理）
+    const sprites = document.createElementNS(SVGNS, 'svg')
+    sprites.setAttribute('style', 'position:absolute;width:0;height:0;overflow:hidden')
+    const spriteDocs = new Map()
+    const spriteIds = new Map()
+    const spriteOf = (abs) => {
+      if (spriteIds.has(abs)) return spriteIds.get(abs)
+      const u = new URL(abs)
+      const frag = decodeURIComponent(u.hash.slice(1))
+      u.hash = ''
+      if (!spriteDocs.has(u.href)) {
+        spriteDocs.set(u.href, fetch(u.href, { credentials: 'same-origin' })
+          .then((r) => (r.ok ? r.text() : ''))
+          .then((t) => (t ? new DOMParser().parseFromString(t, 'image/svg+xml') : null))
+          .catch(() => null))
+      }
+      const p = spriteDocs.get(u.href).then((doc) => {
+        const src = doc && frag ? doc.getElementById(frag) : null
+        if (!src || src.namespaceURI !== SVGNS) return ''
+        const id = 'ddpu' + (++seq)
+        const copy = document.importNode(src, true)
+        copy.setAttribute('id', id)
+        sprites.appendChild(copy)
+        return id
+      })
+      spriteIds.set(abs, p)
+      return p
+    }
 
     function walk(node) {
       if (node.nodeType === 3) return document.createTextNode(node.nodeValue)
@@ -1486,6 +1527,18 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
         const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href')
         if (href) jobs.push(inline(new URL(href, here()).href).then((d) => { if (d) c.setAttribute('href', d) }))
       }
+      if (el.namespaceURI === SVGNS && el.localName === 'use') {
+        const href = el.getAttribute('href') || el.getAttributeNS('http://www.w3.org/1999/xlink', 'href') || ''
+        let abs = ''
+        try { abs = href && !href.startsWith('#') ? new URL(href, here()).href : '' } catch { /* 怪地址 */ }
+        if (abs && abs.includes('#')) {
+          jobs.push(spriteOf(abs).then((id) => {
+            if (!id) return
+            c.removeAttributeNS('http://www.w3.org/1999/xlink', 'href')
+            c.setAttribute('href', '#' + id)
+          }))
+        }
+      }
       if (tag === 'INPUT') {
         if (el.type === 'checkbox' || el.type === 'radio') { if (el.checked) c.setAttribute('checked', '') } else c.setAttribute('value', el.value)
       }
@@ -1549,6 +1602,7 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
       style.textContent = fontCss + '\n' + pseudoRules.join('\n') + '\n*::-webkit-scrollbar{display:none}'
       const body = [...root.childNodes].find((n) => n.localName === 'body')
       ;(body || root).insertBefore(style, (body || root).firstChild)
+      if (sprites.childNodes.length) (body || root).appendChild(sprites)
       if (!full && (scrollX || scrollY) && body) {
         body.setAttribute('style', body.getAttribute('style') + `transform:translate(${-scrollX}px,${-scrollY}px);`)
       }
@@ -2378,7 +2432,8 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     if (!d || d.dshDesign !== 1) return
     if (d.type === 'pick') start(d.hint !== false)
     else if (d.type === 'cancel') { if (!styleOn) stop(true) }
-    else if (d.type === 'init') boot(d.seed || null)
+    else if (d.type === 'init') { if (d.relay) relay(); boot(d.seed || null) }
+    else if (d.type === 'files') { relay(); onFiles(String(d.file || ''), Array.isArray(d.files) ? d.files : null) }
     else if (d.type === 'reveal') reveal(d)
     else if (d.type === 'zoom') setK(1 / (Number(d.z) || 1))
     else if (d.type === 'snapshot') post({ type: 'snap', seed: seedNow() })
@@ -2512,21 +2567,34 @@ background:rgba(20,20,22,.86);color:#e8e8ea;font:12px/18px -apple-system,system-
     return files.every((f) => /\.html?$/i.test(f) && String(f).replace(/\\/g, '/') !== me)
   }
 
+  /** 目录里有文件改了（file 是最后一个，files 是这一批全部；空的 = 不知道改了啥） */
+  function onFiles(file, files) {
+    if (!shown) return
+    if (othersOnly(files)) return
+    if (parentWin) post({ type: 'changed', file, seed: seedNow() })
+    else selfReload()
+  }
+
+  // 改动通知：在右侧栏里由右侧栏转告（init 里说 relay，之后发 files）。每屏各开一条 SSE 的话，
+  // 画布上到 6 屏就占满浏览器对同一地址的 6 条连接，之后刷新要载的页面、样式表全排着队，预览从此不再变。
+  // 不在右侧栏里（手机上看、单独打开），或右侧栏是老版本不转告（等 3 秒没说），才自己开 SSE。
   // 旧版本（/__dsh_design__/v/…）只读，不跟着目录改动刷新
-  if (cfg.live && window.EventSource && !location.pathname.startsWith('/__dsh_design__/v/')) {
-    const es = new EventSource('/__dsh_design__/events')
+  const LIVE = !!cfg.live && !!window.EventSource && !location.pathname.startsWith('/__dsh_design__/v/')
+  let es = null
+  let relayed = false
+  const openEvents = () => {
+    if (es || relayed || !LIVE) return
+    es = new EventSource('/__dsh_design__/events')
     es.addEventListener('change', (e) => {
-      if (!shown) return
-      let file = ''
-      let files = null
-      try {
-        const d = JSON.parse(e.data)
-        file = d.file || ''
-        files = d.files || null
-      } catch { /* 没带文件名 */ }
-      if (othersOnly(files)) return
-      if (parentWin) post({ type: 'changed', file, seed: seedNow() })
-      else selfReload()
+      let d = {}
+      try { d = JSON.parse(e.data) || {} } catch { /* 没带文件名 */ }
+      onFiles(d.file || '', d.files || null)
     })
   }
+  function relay() {
+    relayed = true
+    if (es) { es.close(); es = null }
+  }
+  if (!parentWin) openEvents()
+  else setTimeout(openEvents, 3000)
 })()

package/lib/serve.js

@@ -526,5 +526,12 @@ export function createHub({ log = () => {}, onChange = () => {}, history = null,
     return false
   }
 
-  return { open, close, closeAll, alive, size: () => servers.size }
+  /** 现在一共连着几条改动通知（SSE）：右侧栏里的页面靠转告，不该自己开（浏览器对同一地址最多 6 条连接） */
+  function listeners() {
+    let n = 0
+    for (const e of servers.values()) n += e.clients.size
+    return n
+  }
+
+  return { open, close, closeAll, alive, listeners, size: () => servers.size }
 }

package/package.json

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

package/skills/ui-design/SKILL.md

@@ -31,7 +31,7 @@
 
 2. **先写设计变量**：在设计目录建 `tokens.css`（起手模板 `tokens.css` 就在这个技能目录里，复制过去再按品牌改；有默认的品牌设计系统就复制它的 `tokens.css` 和 `components.css`），颜色、字体、字号阶梯、间距、圆角、阴影都从这里取。每屏都 `<link rel="stylesheet" href="tokens.css">`。之后要统一改风格，改这一个文件，所有屏一起变。
 
-3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写这屏的中文名（画布上显示它）。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
+3. **一屏一个 HTML 文件，放同一个目录**，按用户会看的顺序一屏一屏写（画布按创建顺序排：登录 → 首页 → 详情 → …）。文件名用英文小写（`login.html`、`home.html`），`<title>` 写「屏名 · 产品名」，用界面的语言（如「首页 · 梅林练」「Home · Pedal」，每屏的产品名写成一样的）：画布上只显示屏名，导出整套展示图时产品名做大标题。临时试验的页面用 `_` 开头（`_test.html`），不会上画布。每屏 `<head>` 里写：
 
    ```html
    <meta name="dsh-design" content="app">          <!-- 类型；海报可带尺寸：poster 1080x1920 -->
@@ -109,7 +109,11 @@
 
 **形状和层次**：圆角一套（如 8 / 12 / 16 / 999），同类元素圆角一致，嵌套时内圆角 = 外圆角 − 内边距。阴影最多两三档，用低透明度、大模糊、略带主色调的阴影；深色背景用亮一点的表面色区分层级，不靠阴影。
 
-**真实内容**：不要 Lorem ipsum、「标题一」「示例文字」。写像真产品的中文文案、合理的数字和价格、真实感的人名地名。图片位置用 SVG 插画、几何构图或带色块的占位，不引用外网图片（预览离线也要好看）。
+**真实内容**：不要 Lorem ipsum、「标题一」「示例文字」。写像真产品的文案、合理的数字和价格、真实感的人名地名。
+
+**界面语言跟着用户走**：用户用什么语言提需求，界面文案就用什么语言（英文提问做英文界面，中文提问做中文界面）；用户点名了语言或市场（「给日本用户」「做英文版」）就照他说的。货币、日期格式、人名地名也跟着那个市场。跟用户说话仍用他的语言。
+
+**图片**：图片位置用 SVG 插画、几何构图或带色块的占位，不引用外网图片（预览离线也要好看）。
 
 **图标**：用一套线性 SVG 图标（同样的线宽 1.75–2、圆角端点、24 网格），内联写进 HTML。不要用 emoji 当图标。
 
@@ -119,7 +123,7 @@
 
 **可访问性**：语义标签（`header` `nav` `main` `button`），图片有 `alt`，焦点样式看得见（`:focus-visible`），可点的区域至少 44×44。
 
-## 中文排版
+## 中文排版（中文界面）
 
 - 字体栈：`"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", system-ui, sans-serif`；数字和英文想更精致可以把 `"Inter"` / `-apple-system` 放在前面。
 - 中文不用斜体；字重用 400 / 500 / 600，标题最多 700。
@@ -127,6 +131,8 @@
 - 中文行高比英文大一点（正文 1.6–1.75）；段落之间用间距分开，不用首行缩进。
 - 标题不要一行只剩一两个字：调整宽度或用 `text-wrap: balance`。
 
+英文界面：字体把 `"Inter"` / `-apple-system` 放最前；标题大小写全套统一一种（句首大写或每词首字母大写）；正文一行 `65ch` 左右；标点用半角。
+
 ## 别有「AI 味」
 
 一眼像 AI 生成的通病，避开：
@@ -145,7 +151,7 @@
 - [ ] 一屏只有一个焦点；主按钮只有一个
 - [ ] 间距都是 4 / 8 的倍数，同类元素间距一致，左边缘对齐
 - [ ] 正文对比度 ≥ 4.5:1，灰字没有太浅
-- [ ] 文案是真实的中文内容，没有占位文字、没有错别字
+- [ ] 文案是真实内容、用的是用户的语言，没有占位文字、没有错别字
 - [ ] 图标同一套风格，没有 emoji 图标
 - [ ] 画幅对：App 留出顶部 54px 状态栏和底部 34px 横条；海报 / 幻灯片内容在安全区内不溢出
 - [ ] 文字没有被截断、没有伸出框、没有叠在一起；页面没有比屏幕宽；滚到底最后的内容没被底栏压住（`check_design` 实测这几项）