dsh-design-studio 0.10.0 → 0.12.0

package/lib/index.js

@@ -40,14 +40,21 @@
  * 页面本身由 serve.js 开的独立端口提供（见那边的说明）。
  */
 
+import crypto from 'node:crypto'
 import fs from 'node:fs'
 import path from 'node:path'
 import { fileURLToPath } from 'node:url'
 import os from 'node:os'
 import { execFile } from 'node:child_process'
-import { createHub, webOrigins, trustedOrigins, resolveInRoot, ERR_CATCHER } from './serve.js'
-import { bundle, inlinePicker, MAX_TOTAL as BUNDLE_MAX } from './bundle.js'
+import { createHub, webOrigins, trustedOrigins, resolveInRoot, ERR_CATCHER, defang } from './serve.js'
+import { bundle, inlinePicker, strictMeta, MAX_TOTAL as BUNDLE_MAX } from './bundle.js'
+import { createLibrary } from './works.js'
+import { createInspiration } from './inspire.js'
+import { createLibraryRoutes } from './gallery/routes.js'
+import { createMarket } from './gallery/market.js'
+import { createMarketRoutes } from './gallery/market-routes.js'
 import { createTracker, parseTarget, findRule, KINDS } from './core.js'
+import { createDrafts } from './draft.js'
 import { createHistory } from './history.js'
 import { createPhone } from './phone.js'
 import { qrMatrix } from './qr.js'
@@ -82,7 +89,7 @@ const SKILL_RANK = 600 // 和 DSH 自带的技能同一档；用户 / 项目里
  * 几行之间靠这个互通（同一个包里的模块 Node 只加载一次）：工作台起来后放 tracker、无头浏览器（browser）；
  * 「自动打开预览」那行开着时 autoOpen > 0
  */
-export const studio = { tracker: null, autoOpen: 0, check: null, browser: null, log: () => {} }
+export const studio = { tracker: null, autoOpen: 0, offline: 0, check: null, browser: null, market: null, log: () => {} }
 
 /** 设计技能：模型做界面设计时加载（DSH 的 skill 工具），也能让用户手动调 */
 export const designSkill = {
@@ -439,10 +446,10 @@ export const handoffTool = {
   name: 'handoff_design',
   description:
     '把右侧「设计工作台」里的设计（本地 HTML 那几屏）整理成交接包，准备做成真项目的代码：写好 <设计目录>/handoff/HANDOFF.md（每屏的文件、建议路由、跳转、设计变量、几屏共用该抽成组件的部分、交互和状态、调节滑块、素材、做法和验收），和每屏从上到下的截图。' +
-    '用户说「转成代码」「做成真的项目」「用 React / Vue 做出来」时先调它，读 HANDOFF.md 照着做；每做完一屏用 compare_design 和设计稿比一遍，差异降到 3% 以下再做下一屏。' +
-    'framework：same 跟目标目录现有项目一样（认得出框架时默认）、react、vue、next、html；dest：代码放哪个目录（不填：会话目录是项目就放进去，不是就新建 <设计名>-app）。要先用 preview_page 打开过设计。',
+    '用户说「转成代码」「做成真的项目」「用 React / Vue / uni-app 做出来」「做成小程序」时先调它，读 HANDOFF.md 照着做；每做完一屏用 compare_design 和设计稿比一遍，差异降到 3% 以下再做下一屏（原生小程序在浏览器里跑不起来，照 HANDOFF.md 说的请用户在微信开发者工具里看）。' +
+    'framework：same 跟目标目录现有项目一样（认得出框架时默认，uni-app（含 HBuilderX 建的、没有 package.json 的）、Taro、微信原生小程序也认得出）、react、vue、next、html、uniapp、weapp；dest：代码放哪个目录（不填：会话目录是项目就放进去，不是就新建 <设计名>-app）。要先用 preview_page 打开过设计。',
   parameters: specToJsonSchema({
-    framework: { type: 'string', enum: ['same', ...Object.keys(FRAMEWORKS)], description: 'same 跟现有项目一样；react（React + Vite）、vue（Vue 3 + Vite）、next（Next.js）、html（纯 HTML / CSS）。不填：目标目录（或它所在的项目）认得出框架就 same，没有 package.json 的纯 HTML 站点 html，别的 react' },
+    framework: { type: 'string', enum: ['same', ...Object.keys(FRAMEWORKS)], description: 'same 跟现有项目一样；react（React + Vite）、vue（Vue 3 + Vite）、next（Next.js）、html（纯 HTML / CSS）、uniapp（uni-app，出微信小程序和网页版）、weapp（微信原生小程序 WXML / WXSS）。不填：目标目录（或它所在的项目）认得出框架就 same，没有 package.json 的纯 HTML 站点 html，小程序的设计 uniapp，别的 react' },
     dest: { type: 'string', description: '代码放哪：现有项目的目录（或它里面的子目录），或要新建的项目目录（绝对路径或相对会话目录）。不填：会话目录有 package.json 就放进去，没有就新建 <设计名>-app（设计目录在会话目录下就建在会话目录里，不然建在设计目录旁边）' },
     screens: { type: 'array', items: { type: 'string' }, description: '只转哪几屏（文件名）；不填全部' },
   }),
@@ -470,15 +477,17 @@ export const handoffTool = {
     const dest = typeof a.dest === 'string' && a.dest.trim() ? resolvePath(a.dest, cwd) : defaultDest(t.root, cwd, detectProject(cwd))
     if (within(dest, t.root)) return { text: `代码别放进设计目录（${t.root}）里：设计稿留着做对比。换一个目录。` }
     const project = projectFor(dest)
-    const framework = typeof a.framework === 'string' && (a.framework === 'same' || FRAMEWORKS[a.framework]) ? a.framework : defaultFramework(project)
-    if (framework === 'same' && !(project.pkg && project.framework)) return { text: `${dest} 里没有认得出的前端项目（package.json 里没有 React / Vue / Next …）：framework 选 react、vue、next 或 html。` }
+    const framework = typeof a.framework === 'string' && (a.framework === 'same' || FRAMEWORKS[a.framework]) ? a.framework : defaultFramework(project, kind)
+    if (framework === 'same' && !project.framework) return { text: `${dest} 里没有认得出的前端项目（package.json 里没有 React / Vue / Next / uni-app …，也不是 HBuilderX 或微信原生小程序的项目）：framework 选 react、vue、next、html、uniapp 或 weapp。` }
     let r
     try {
       r = await buildHandoff(studio.browser, { root: t.root, screens: pick.list, kind, size, framework, dest, project, system: systemOfDir(t.root) })
     } catch (e) {
       return { text: `没写成交接包：${String((e && e.message) || e).slice(0, 200)}` }
     }
-    const head = `交接包写好了：${r.file}（${r.shots} 张截图在 handoff/shots/）。下面是全文，照「做法和验收」一屏一屏做，每屏做完用 compare_design 比。\n\n`
+    // 原生小程序跑不了网页版：比不了，照 HANDOFF.md 请用户在微信开发者工具里看
+    const native = framework === 'weapp' || (framework === 'same' && project.framework === 'weapp')
+    const head = `交接包写好了：${r.file}（${r.shots} 张截图在 handoff/shots/）。下面是全文，照「做法和验收」一屏一屏做，${native ? '每屏做完请用户在微信开发者工具里看' : '每屏做完用 compare_design 比'}。\n\n`
     // 每屏顶上一张附上，直接看到要做成什么样
     const firsts = r.rows.filter((row) => row.shots.length).slice(0, 4).map((row) => ({ key: row.key, jpg: fs.readFileSync(path.join(r.dir, 'shots', row.shots[0])) }))
     const kept = firsts.length ? await keepImages(ctx, id, firsts) : {}
@@ -569,6 +578,8 @@ async function keepImages(ctx, id, list, toFile = false) {
   return { files }
 }
 
+const VERSION = (() => { try { return JSON.parse(fs.readFileSync(new URL('../package.json', import.meta.url), 'utf8')).version || '' } catch { return '' } })()
+
 const fileStore = {
   load: () => JSON.parse(fs.readFileSync(STORE_FILE, 'utf8')),
   save: (data) => {
@@ -641,9 +652,18 @@ export function apply(ctx) {
   const previewPorts = new Set()
   let tracker = null
   const history = createHistory({ base: HISTORY_DIR, log })
+  // 我的作品 + 哪些文件是别人做的（设计库来的）：别人做的、没改过的页面预览时加硬规矩
+  const library = createLibrary({ log })
+  // 设计市场：目录和批次包从 npm 镜像来，验过签名、逐个文件核对过才用；市场上的页面原样预览时也加硬规矩
+  const seedDir = fileURLToPath(new URL('../gallery-seed', import.meta.url))
+  // 「设计库不联网」那行开着：市场不访问任何网址
+  const market = createMarket({ version: VERSION, log, seedDir: fs.existsSync(path.join(seedDir, 'index.json')) ? seedDir : '', online: () => studio.offline === 0 })
+  const drafts = createDrafts({ log }) // 正在写的页面（边写边看）：tracker 往里推，预览服务器往外吐
   const hub = createHub({
     log,
     history,
+    drafts,
+    strict: { html: (buf) => library.strictHtml(buf) || market.strictHtml(buf), root: (dir) => library.strictRoot(dir) || market.isStaging(dir), versions: (dir) => library.strictVersions(dir) },
     // 桌面版的 dsh-app://app 是默认就认的；这里补上 DSH 网页端的地址，和 DSH 配置里声明的对外地址（反向代理 / 域名）
     parents: () => {
       let own = []
@@ -662,11 +682,15 @@ export function apply(ctx) {
   }
   tracker = createTracker({
     open,
+    drafts,
     log,
     history,
-    store: fileStore,
+    // 记会话的同时，在做的设计目录补进「我的作品」
+    store: { load: fileStore.load, save: (data) => { fileStore.save(data); try { library.sync(data) } catch (e) { log(e) } } },
     alive: (origin) => hub.alive(origin),
     autoOpen: () => studio.autoOpen > 0,
+    // 装好的别人的设计系统退回旧版：退回来的页面先记成别人做的（预览照样加规矩）
+    beforeRestore: (root, html) => { if (html.length) library.addPast(root, html) },
     skipPorts: () => {
       const s = new Set(previewPorts)
       const own = ownHost(ctx).split(':')[1]
@@ -674,11 +698,15 @@ export function apply(ctx) {
       return s
     },
   })
-  ctx.effect(() => () => hub.closeAll(), 'dsh-design-studio: preview servers')
+  ctx.effect(() => () => { drafts.clear(); hub.closeAll() }, 'dsh-design-studio: preview servers')
   ctx.effect(() => {
     studio.tracker = tracker
     studio.log = log
-    return () => { if (studio.tracker === tracker) { studio.tracker = null; studio.log = () => {} } }
+    studio.market = market
+    return () => {
+      if (studio.tracker === tracker) { studio.tracker = null; studio.log = () => {} }
+      if (studio.market === market) { market.abort(); studio.market = null }
+    }
   }, 'dsh-design-studio: tracker')
   // check_design / look_design 用的无头浏览器：用到时才开，闲置自己关，这一行停用时关掉
   ctx.effect(() => {
@@ -746,10 +774,36 @@ export function apply(ctx) {
     const t = tracker.stateOf(session).target
     let tweaks = null
     if (t && t.kind === 'file') { try { tweaks = readTweaks(t.root) } catch (e) { log(e) } }
-    json(res, 200, { ...tracker.snapshot(session), phone: { on: ph.on, seen: ph.seen || 0 }, tweaks, ...(c ? { checkReq: c.id } : {}) })
+    const snap = tracker.snapshot(session)
+    json(res, 200, { ...snap, strict: strictScreens(snap), phone: { on: ph.on, seen: ph.seen || 0 }, tweaks, ...(c ? { checkReq: c.id } : {}) })
+  }
+
+  /** 正在看的几屏里，哪些是别人做的、没改过的（地址列表）：右侧栏给它们的 iframe 加沙盒、不给剪贴板 */
+  const strictCache = new Map() // 文件 → { sig, strict }
+  function strictScreens(snap) {
+    const t = snap.target
+    if (!t || t.kind !== 'file' || !Array.isArray(snap.screens)) return []
+    const out = []
+    const files = new Set([...snap.screens.map((s) => s.key), snap.focus].filter(Boolean))
+    for (const key of files) {
+      const file = path.join(t.root, key)
+      let st
+      try { st = fs.statSync(file) } catch { continue }
+      const sig = `${st.mtimeMs}:${st.size}:${library.file && fs.existsSync(library.file) ? fs.statSync(library.file).mtimeMs : 0}`
+      let hit = strictCache.get(file)
+      if (!hit || hit.sig !== sig) {
+        let strict = false
+        try { strict = st.size <= 8 * 1024 * 1024 && library.strictHtml(fs.readFileSync(file)) } catch { strict = false }
+        hit = { sig, strict }
+        strictCache.set(file, hit)
+        if (strictCache.size > 500) strictCache.delete(strictCache.keys().next().value)
+      }
+      if (hit.strict) out.push(`${snap.origin}/${encodeURIComponent(key)}`)
+    }
+    return out
   }
 
-  /** 调节滑块写回文件：values = { id: 值 } */
+  /** 调节滑块写回文件：values = { id: 值 }；外观面板里直接改的设计变量：vars = { '--名字': 值 } */
   async function tweakRoute(req, res) {
     if (!admit(req, res)) return
     if (req.method !== 'POST') return json(res, 405, { error: 'method not allowed' })
@@ -757,7 +811,8 @@ export function apply(ctx) {
     try { body = await readBody(req) } catch (e) { return json(res, 400, { error: e.message }) }
     const values = body.values && typeof body.values === 'object' && !Array.isArray(body.values) ? body.values : {}
     try {
-      const r = tracker.editDir(String(body.session || ''), (root) => applyTweaks(root, values), (x) => `调节：${x.changed.map((c) => `${c.label} ${c.to}`).join('、')}`.slice(0, 60), String(body.root || ''))
+      const vars = body.vars && typeof body.vars === 'object' && !Array.isArray(body.vars) ? body.vars : null
+      const r = tracker.editDir(String(body.session || ''), (root) => applyTweaks(root, values, vars), (x) => `调节：${x.changed.map((c) => `${c.label} ${c.to}`).join('、')}`.slice(0, 60), String(body.root || ''))
       json(res, 200, r)
     } catch (e) {
       json(res, 500, { error: e.message })
@@ -806,11 +861,12 @@ export function apply(ctx) {
   }
 
   /** 转成代码前：会话目录是不是个前端项目（右侧栏默认选「跟项目一样」、填好放哪） */
-  function projectRoute(req, res) {
+  async function projectRoute(req, res) {
     if (!admit(req, res)) return
     const q = new URL(req.url, 'http://x').searchParams
     const session = q.get('session') || ''
-    const cwd = tracker.cwdOf(session)
+    // 新会话（还没跑过工具，比如从设计库「用这个开始」、浏览打开的）插件不知道目录：问 DSH，别拿家目录当项目找
+    const cwd = await sessionCwd(session)
     const p = detectProject(cwd)
     const t = tracker.stateOf(session).target
     const root = t && t.kind === 'file' ? t.root : ''
@@ -820,7 +876,9 @@ export function apply(ctx) {
     const pk = picked ? pickedDest(resolvePath(picked, cwd), root) : null
     const dest = pk ? pk.dest : defaultDest(root, cwd, p)
     const project = projectFor(dest)
-    json(res, 200, { cwd, root, project, fw: defaultFramework(project), dest, why: pk ? pk.why : '', frameworks: Object.fromEntries(Object.entries(FRAMEWORKS).map(([k, v]) => [k, v.label])) })
+    // 设计类型跟着回去：小程序的设计右侧栏多两个选项（uni-app、原生小程序），默认 uni-app
+    const kind = root ? designFor(session).kind : ''
+    json(res, 200, { cwd, root, kind, project, fw: defaultFramework(project, kind), dest, why: pk ? pk.why : '', frameworks: Object.fromEntries(Object.entries(FRAMEWORKS).map(([k, v]) => [k, v.label])) })
   }
 
   async function checkRoute(req, res) {
@@ -848,7 +906,8 @@ export function apply(ctx) {
     const session = String(body.session || '')
     if (!session) return json(res, 400, { error: '缺 session' })
     try {
-      const target = parseTarget(body.target, tracker.cwdOf(session))
+      // 输入框里写的相对路径按会话目录算（新会话也问 DSH 要）
+      const target = parseTarget(body.target, await sessionCwd(session))
       await tracker.setTarget(session, target, { source: 'user', popup: false })
       json(res, 200, tracker.snapshot(session))
     } catch (e) {
@@ -974,9 +1033,13 @@ export function apply(ctx) {
       const page = read(key)
       if (!page) return json(res, 404, { error: 'no-screen' })
       const href = st.origin ? `${st.origin}/${v ? `__dsh_design__/v/${v}/` : ''}${key.split('/').map(encodeURIComponent).join('/')}` : ''
-      const html = bundle(page.toString('utf8'), { key, read, base: href, lead: ERR_CATCHER, tail: inlinePicker(fs.readFileSync(PICKER_FILE, 'utf8'), parent, href) })
+      // 别人做的设计（设计库来的、没改过）：加硬规矩，右侧栏的沙盒也不放行表单
+      const strict = library.strictHtml(page) || (v > 0 && library.strictVersions(t.root))
+      const nonce = strict ? crypto.randomBytes(16).toString('base64') : ''
+      const lead = strict ? strictMeta(nonce) + ERR_CATCHER.replace('<script>', `<script nonce="${nonce}">`) : ERR_CATCHER
+      const html = bundle(strict ? defang(page.toString('utf8')) : page.toString('utf8'), { key, read, base: href, lead, tail: inlinePicker(fs.readFileSync(PICKER_FILE, 'utf8'), parent, href, nonce) })
       // 用到的文件太多就不列（null = 右侧栏不按文件筛，目录里一有改动就重新打包）
-      json(res, 200, { html, deps: deps.size > 200 ? null : [...deps] })
+      json(res, 200, { html, deps: deps.size > 200 ? null : [...deps], strict })
     } catch (e) {
       json(res, 500, { error: e.message })
     }
@@ -1116,7 +1179,36 @@ export function apply(ctx) {
     json(res, 200, st.on ? { ...st, qr: qrMatrix(st.url).map((row) => row.map((c) => (c ? 1 : 0)).join('')) } : st)
   }
 
-  const routes = { state, open: openRoute, view: viewRoute, close: closeRoute, history: historyRoute, restore: restoreRoute, edit: editRoute, style: styleRoute, bundle: bundleRoute, ref: refRoute, export: exportRoute, doc: docRoute, reveal: revealRoute, phone: phoneRoute, check: checkRoute, locate: locateRoute, tweak: tweakRoute, systems: systemsRoute, systhumb: systhumbRoute, project: projectRoute }
+  // 设计库：我的作品、灵感、打 zip、拖 zip 进来用
+  const inspiration = createInspiration({ log })
+  /**
+   * 会话目录：跑过工具的会话插件自己记着；新会话（还没跑过工具）问 DSH——先看活着的会话，再查存下来的会话头。
+   * 都拿不到给家目录（「用这个开始」就放到 ~/DSH 设计）
+   */
+  async function sessionCwd(id) {
+    const known = tracker.cwdOf(id)
+    if (known && path.resolve(known) !== path.resolve(os.homedir())) return known
+    const ok = (c) => typeof c === 'string' && path.isAbsolute(c) ? c : ''
+    try {
+      const ss = ctx && typeof ctx.get === 'function' ? ctx.get('sessions') : null
+      const live = ss && typeof ss.list === 'function' ? [...ss.list()].find((s) => s && s.id === id) : null
+      const c = live && ok(live.header && live.header.cwd)
+      if (c) return c
+    } catch (e) { log(e) }
+    try {
+      const q = ctx && typeof ctx.get === 'function' ? ctx.get('sessionQuery') : null
+      if (q && typeof q.listSessions === 'function') {
+        const rec = (await q.listSessions()).find((r) => r && r.header && r.header.id === id)
+        const c = rec && ok(rec.header.cwd)
+        if (c) return c
+      }
+    } catch (e) { log(e) }
+    return known
+  }
+  const lib = createLibraryRoutes({ admit, readBody, json, tracker, library, inspiration, studio, open, storeLoad: fileStore.load, version: VERSION, exported, log, sessionCwd })
+  const mk = createMarketRoutes({ admit, readBody, json, tracker, library, market, open, systemsDir: SYSTEMS_DIR, log, sessionCwd })
+
+  const routes = { works: lib.works, workthumb: lib.workthumb, pack: lib.pack, usezip: lib.usezip, inspire: lib.inspire, inspimg: lib.inspimg, ...mk, state, open: openRoute, view: viewRoute, close: closeRoute, history: historyRoute, restore: restoreRoute, edit: editRoute, style: styleRoute, bundle: bundleRoute, ref: refRoute, export: exportRoute, doc: docRoute, reveal: revealRoute, phone: phoneRoute, check: checkRoute, locate: locateRoute, tweak: tweakRoute, systems: systemsRoute, systhumb: systhumbRoute, project: projectRoute }
   for (const [key, handler] of Object.entries(routes)) {
     ctx.effect(() => ctx.webServer.register({
       kind: 'exact',
@@ -1140,5 +1232,14 @@ export function apply(ctx) {
         log(e)
       }
     })
+    // 模型边说边推的流：写大文件时参数要流好几分钟，靠它提前知道在写哪个文件（老版本 DSH 没有这个事件，就只是收不到）
+    ctx.on('agent/assistant-stream', (e) => {
+      try {
+        const id = e && e.agent && e.agent.session && e.agent.session.id
+        if (id && e.frame) tracker.stream(id, e.frame)
+      } catch (err) {
+        log(err)
+      }
+    }, { global: true })
   }
 }

package/lib/inspire.js

@@ -0,0 +1,142 @@
+/**
+ * 设计库 › 灵感：只存在用户电脑上，不上传、不统计
+ *
+ *   <库>/inspiration.json          { format: 1, items: [{ id, type, at, … }] }，新的在前
+ *     image  { name, file, w, h }   拖进来的参考图（图在 <库>/inspiration/<file>）→「照这个做」走参考图流程
+ *     url    { url, name }          存下的网址 →「提取设计系统」
+ *     style  { name, style, mid? }  我的风格（从当前设计存下来的一组配色、字体、圆角；mid＝从市场收藏的那张）→ 和内置风格卡放一起用
+ *     market { mid, mtype, name }   收藏的市场设计（模板 / 设计系统）：只记 id；离线看靠市场缓存，下架了界面标「已下架」
+ *
+ * 风格的字段和风格卡一样（policy.checkStyle 的白名单）；本机存的不卡对比度（分享时才卡）
+ */
+
+import crypto from 'node:crypto'
+import fs from 'node:fs'
+import path from 'node:path'
+import { LIBRARY_DIR } from './works.js'
+import { checkStyle, imageInfo } from './gallery/policy.js'
+import { ID_RE } from './gallery/market.js'
+
+const MAX_ITEMS = 300
+const MAX_IMAGE = 6 * 1024 * 1024
+const IMG_EXT = { png: 'png', jpg: 'jpg', webp: 'webp', gif: 'gif', avif: 'avif' }
+const oneLine = (s, n) => [...String(s == null ? '' : s).replace(/[\x00-\x1f\x7f\u2028\u2029]+/g, ' ').replace(/\s+/g, ' ').trim()].slice(0, n).join('')
+
+export function createInspiration({ dir = LIBRARY_DIR, log = () => {}, now = Date.now } = {}) {
+  const file = path.join(dir, 'inspiration.json')
+  const imgDir = path.join(dir, 'inspiration')
+
+  function load() {
+    try {
+      const raw = JSON.parse(fs.readFileSync(file, 'utf8'))
+      if (raw && Array.isArray(raw.items)) return { format: 1, items: raw.items.filter((x) => x && typeof x.id === 'string' && /^[a-z0-9]{8,32}$/.test(x.id)) }
+    } catch (e) {
+      if (e.code !== 'ENOENT') {
+        log(e)
+        try { fs.copyFileSync(file, `${file}.bad-${now()}`) } catch { /* 算了 */ }
+      }
+    }
+    return { format: 1, items: [] }
+  }
+
+  function save(data) {
+    // 太多了：最旧的图片 / 网址先删（我的风格、收藏留着）
+    while (data.items.length > MAX_ITEMS) {
+      let i = data.items.length - 1
+      while (i >= 0 && (data.items[i].type === 'style' || data.items[i].type === 'market')) i--
+      if (i < 0) break
+      const [gone] = data.items.splice(i, 1)
+      if (gone.type === 'image' && gone.file) try { fs.rmSync(path.join(imgDir, gone.file), { force: true }) } catch { /* 算了 */ }
+    }
+    fs.mkdirSync(dir, { recursive: true })
+    const tmp = `${file}.${process.pid}.tmp`
+    fs.writeFileSync(tmp, JSON.stringify(data, null, 1), { mode: 0o600 })
+    fs.renameSync(tmp, file)
+  }
+
+  const newId = () => crypto.randomBytes(8).toString('hex')
+
+  function add(item) {
+    const data = load()
+    const it = { id: newId(), at: now(), ...item }
+    data.items.unshift(it)
+    save(data)
+    return it
+  }
+
+  /** 参考图：data 是图片的 Buffer */
+  function addImage({ name, data }) {
+    if (!Buffer.isBuffer(data) || !data.length) throw new Error('不是图片')
+    if (data.length > MAX_IMAGE) throw new Error('图片太大（最多 6MB）')
+    const info = imageInfo(data)
+    const ext = info && IMG_EXT[info.type]
+    if (!ext) throw new Error('不是图片')
+    const id = newId()
+    fs.mkdirSync(imgDir, { recursive: true })
+    fs.writeFileSync(path.join(imgDir, `${id}.${ext}`), data, { mode: 0o600 })
+    const data2 = load()
+    const it = { id, at: now(), type: 'image', name: oneLine(name, 60) || 'image', file: `${id}.${ext}`, w: info.w, h: info.h }
+    data2.items.unshift(it)
+    save(data2)
+    return it
+  }
+
+  /** 网址：只收 http(s)，带不带协议都行 */
+  function addUrl({ url, name }) {
+    let s = String(url || '').trim()
+    if (!/^https?:\/\//i.test(s)) s = 'https://' + s
+    let u
+    try { u = new URL(s) } catch { throw new Error('不是网址') }
+    if (!/^https?:$/.test(u.protocol) || !u.hostname.includes('.') || s.length > 500) throw new Error('不是网址')
+    const data = load()
+    const href = u.href
+    const old = data.items.find((x) => x.type === 'url' && x.url === href)
+    if (old) return old
+    return add({ type: 'url', url: href, name: oneLine(name, 60) || u.hostname })
+  }
+
+  /** 我的风格：字段按风格卡的白名单查；对比度本机不卡 */
+  function addStyle({ name, style, mid }) {
+    const problems = checkStyle(style).filter((p) => p.code !== 'contrast')
+    if (problems.length) throw new Error(`风格不对：${problems.map((p) => p.x).join('、')}`)
+    const s = {}
+    for (const k of ['c', 'head', 'w', 'radius', 'shadow', 'nzh', 'nen', 'dzh', 'den', 'bgImage']) if (style[k] !== undefined) s[k] = style[k]
+    // 从市场收藏的：同一张只存一份
+    const from = typeof mid === 'string' && ID_RE.test(mid) ? mid : ''
+    if (from) {
+      const old = load().items.find((x) => x.type === 'style' && x.mid === from)
+      if (old) return old
+    }
+    return add({ type: 'style', name: oneLine(name, 24) || '我的风格', style: s, ...(from ? { mid: from } : {}) })
+  }
+
+  /** 收藏市场上的一套：同一套只记一次 */
+  function addMarket({ mid, mtype, name }) {
+    const id = String(mid || '')
+    if (!ID_RE.test(id) || (mtype !== 'template' && mtype !== 'system')) throw new Error('不是市场上的设计')
+    const data = load()
+    const old = data.items.find((x) => x.type === 'market' && x.mid === id)
+    if (old) return old
+    return add({ type: 'market', mid: id, mtype, name: oneLine(name, 40) || id.split('__')[1] })
+  }
+
+  function remove(id) {
+    const data = load()
+    const i = data.items.findIndex((x) => x.id === id)
+    if (i < 0) return false
+    const [gone] = data.items.splice(i, 1)
+    if (gone.type === 'image' && gone.file) try { fs.rmSync(path.join(imgDir, path.basename(gone.file)), { force: true }) } catch { /* 算了 */ }
+    save(data)
+    return true
+  }
+
+  /** 图片文件的绝对路径（只认登记过的） */
+  function imageFile(id) {
+    const it = load().items.find((x) => x.id === id && x.type === 'image')
+    if (!it || !it.file || path.basename(it.file) !== it.file) return null
+    const p = path.join(imgDir, it.file)
+    return fs.existsSync(p) ? p : null
+  }
+
+  return { list: () => load().items, addImage, addUrl, addStyle, addMarket, remove, imageFile, file }
+}

package/lib/offline.js

@@ -0,0 +1,17 @@
+/**
+ * dsh-design-studio/offline：设计库不联网（默认关）。
+ * 打开后设计库的「市场」一个网址都不访问，只显示已经下载过的；「我的作品」「灵感」照常用。
+ * 默认关、反着来：老版本升级上来插件页里还没有这一行时，市场照常联网
+ */
+import { studio } from './index.js'
+
+export const name = 'dsh-design-studio-offline'
+
+export function apply(ctx) {
+  ctx.effect(() => {
+    studio.offline++
+    // 正在下载的目录 / 批次包马上掐掉（不等下完）
+    try { if (studio.market) studio.market.abort() } catch { /* 市场还没起来 */ }
+    return () => { studio.offline-- }
+  }, 'dsh-design-studio: gallery offline')
+}