npm - @yfwu2020/dsh-selection-explain - Versions diffs - 0.1.1 → 0.1.3 - Mend

@yfwu2020/dsh-selection-explain 0.1.1 → 0.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (19) hide show

package/README.md +60 -12
package/assets/code.png +0 -0
package/assets/stage1.png +0 -0
package/assets/stage2.png +0 -0
package/assets/web.png +0 -0
package/lib/client.js +10 -4
package/lib/index.js +3 -136
package/lib/index.js.map +1 -1
package/lib/prompts.js +135 -0
package/lib/prompts.js.map +1 -0
package/lib/types/prompts.d.ts +26 -0
package/package.json +5 -3
package/scripts/build-demo-pages.mjs +296 -0
package/scripts/crop-png.mjs +142 -0
package/scripts/test-client.mjs +11 -0
package/scripts/test-prompt.mjs +178 -0
package/src/client/index.js +10 -4
package/src/index.ts +9 -142
package/src/prompts.ts +139 -0

package/scripts/build-demo-pages.mjs ADDED Viewed

@@ -0,0 +1,296 @@
+/**
+ * 生成 README 用的小窗演示页（docs/demo/*.html）。
+ *
+ * 目的：README 里的功能截图必须**和真实面板长得一样**，所以样式不能手抄 ——
+ * 这里直接从 lib/client.js 里把模块级 `CSS` 常量抽出来注入演示页，
+ * 类名 / 结构 / 文案也照 src/client/index.js 的渲染器与真实输出写。
+ *
+ * 用法：node scripts/build-demo-pages.mjs
+ * 产物：docs/demo/stage1.html / stage2.html / code.html（再交给 Chrome 截图）
+ */
+import { readFileSync, writeFileSync, mkdirSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+const HERE = dirname(fileURLToPath(import.meta.url))
+const ROOT = resolve(HERE, '..')
+/** 从客户端 bundle 里取出模块级 CSS 常量（不手抄，保证与线上一致）。 */
+function extractCss() {
+  const src = readFileSync(resolve(ROOT, 'lib', 'client.js'), 'utf8')
+  const m = src.match(/var CSS = \[([\s\S]*?)\]\s*\.join\(''\)/) || src.match(/var CSS = \[([\s\S]*?)\]\.join\('\\n'\)/)
+  if (!m) throw new Error('未能在 lib/client.js 里找到 CSS 常量')
+  // 元素是 '...' 单引号字符串字面量
+  const parts = []
+  const re = /'((?:[^'\\]|\\.)*)'/g
+  let e
+  while ((e = re.exec(m[1])) !== null) parts.push(e[1].replace(/\\'/g, "'").replace(/\\n/g, '\n'))
+  return parts.join('\n')
+}
+/** DSH 主题变量：用浅色主题的实际取值，让截图看起来像真的嵌在 DSH 里。 */
+const THEME_VARS = `
+  --dsw-alias-bg-layer-1: #ffffff;
+  --dsw-alias-label-primary: #1a1a1a;
+  --dsw-alias-label-secondary: #6b7280;
+  --dsw-alias-label-primary-foreground: #ffffff;
+  --dsw-alias-interactive-bg-hover: rgba(140,140,140,.11);
+  --dsw-alias-border-l3: rgba(140,140,140,.35);
+  --dsw-alias-border-l4: rgba(140,140,140,.22);
+  --dsw-alias-button-primary-fill: #3b6ef5;
+  --sel-a1: #0d9488;
+  --sel-a2: #0f766e;
+`
+const PAGE = (title, css, body) => `<!doctype html>
+<html lang="zh-CN"><head><meta charset="utf-8"><title>${title}</title>
+<style>
+  /* 只渲染小窗本体：纯白底、无外边距，宽度固定 540 —— 截图后统一裁切 */
+  html,body{margin:0;padding:0;background:#ffffff;font-family:-apple-system,"PingFang SC","Helvetica Neue",Arial,sans-serif}
+  body{display:block;width:540px}
+  ${THEME_VARS}
+${css}
+  /* 演示页专用：把浮层定位改成静态排版、并显示面板（真实面板默认 display:none，由 JS 打开） */
+  .dsh-sel-layer{position:static !important;pointer-events:auto}
+  /* 截图只要"小窗本体"：去掉投影、边框、圆角 —— 否则裁切后会在上下边缘留下一圈灰线
+     （真实面板的投影是给浮层用的，单独截图时只会变成灰边） */
+  .dsh-sel-panel{position:static !important;display:flex !important;max-height:none !important;width:540px !important;
+    box-shadow:none !important;border:0 !important;border-radius:0 !important}
+  /* 首轮：真实行为是「翻译一出来输入框就出现」（askRow.style.display = wide || translationReady），
+     所以演示页也照实显示，不再隐藏 */
+  .dsh-sel-ask{display:flex !important;border:0 !important}
+</style></head>
+<body>${body}</body></html>
+`
+const panel = (stage, inner) => `<div class="dsh-sel-layer">
+  <div class="dsh-sel-panel" data-stage="${stage}" data-theme="light" role="dialog" aria-label="划词解读">
+    <div class="dsh-sel-head">
+      <span class="dsh-sel-mark"></span>
+      <span class="dsh-sel-title">划词解读</span>
+      <span class="dsh-sel-headspace"></span>
+      <button class="dsh-sel-action">🕘 最近</button>
+      <button class="dsh-sel-action">↗ 升格</button>
+      <button class="dsh-sel-icon" title="关闭">✕</button>
+    </div>
+    <div class="dsh-sel-body">
+${inner}
+    </div>
+  </div>
+</div>`
+const quote = (text) => `      <div class="dsh-sel-quote">${text}</div>`
+const section = (key, title, content) => `      <div class="dsh-sel-sec" data-sec="${key}">
+        <div class="dsh-sel-sh"><i></i><span>${title}</span><span class="dsh-sel-hint"></span></div>
+        <div class="dsh-sel-c">
+${content}
+        </div>
+      </div>`
+const p = (html) => `          <p>${html}</p>`
+const list = (level, items) => `          <div class="dsh-sel-list" data-level="${level}">
+${items.map((it) => `            <div class="dsh-sel-item"${it.num ? ' data-num="1"' : ''}><span class="dsh-sel-bullet">${it.bullet || '•'}</span><span>${it.text}</span></div>`).join('\n')}
+          </div>`
+const callout = (tag, text) => `          <div class="dsh-sel-callout"><span class="dsh-sel-callout-tag">${tag}</span>${text}</div>`
+const expand = `      <button class="dsh-sel-expand"><span>↓ 展开详解</span></button>`
+/** 真实图标（照 src/client/index.js 的 markdownIcon / windowIcon / sendIcon）。 */
+const mdIcon = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M3.5 17.5V7.5l4.4 5 4.4-5v10"></path><path d="M17.4 7v9.6M14.3 13.6l3.1 3.1 3.1-3.1"></path></svg>`
+const webIcon = `<svg viewBox="0 0 24 24" width="13" height="13" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="4.5" width="18" height="15" rx="3"></rect><path d="M3 9.6h18"></path></svg>`
+const sendIcon = `<svg viewBox="0 0 16 16" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M8 13.2V3.4"></path><path d="M3.9 7.5 8 3.4l4.1 4.1"></path></svg>`
+/**
+ * 输入区（结构照 src/client/index.js 的真实构建顺序）：
+ *   .dsh-sel-ask > textarea.dsh-sel-askbox + .dsh-sel-asktools
+ *   asktools = 输出偏好(文字 + 分段开关 + 滑动药丸) + askspace(撑开) + 模型胶囊 + 发送键
+ */
+const askRow = (webOn, model = 'deepseek-v4.1-flash', tier = '高') => `      <div class="dsh-sel-ask">
+        <textarea class="dsh-sel-askbox" rows="1" placeholder="就这段文字继续追问…（Enter 发送，Shift+Enter 换行）"></textarea>
+        <div class="dsh-sel-asktools">
+          <span class="dsh-sel-pref" data-on="${webOn ? '1' : '0'}">
+            <span class="dsh-sel-preftext">输出偏好</span>
+            <span class="dsh-sel-seg" role="radiogroup" aria-label="输出偏好">
+              <span class="dsh-sel-segpill"></span>
+              <button class="dsh-sel-segcell" role="radio" aria-label="Markdown：普通段落，最省时间"${webOn ? '' : ' data-on="1"'}>${mdIcon}</button>
+              <button class="dsh-sel-segcell" role="radio" aria-label="网页：复杂问题生成一个 HTML 页面"${webOn ? ' data-on="1"' : ''}>${webIcon}</button>
+            </span>
+          </span>
+          <span class="dsh-sel-askspace"></span>
+          <button class="dsh-sel-picker" type="button" aria-haspopup="menu" aria-expanded="false">
+            <span class="dsh-sel-picker-name">${model}</span>
+            <span class="dsh-sel-picker-tier">· ${tier}</span>
+            <span class="dsh-sel-picker-caret">▼</span>
+          </button>
+          <button class="dsh-sel-iconbtn dsh-sel-asksend" type="button" aria-label="发送">${sendIcon}</button>
+        </div>
+      </div>`
+const chatBubble = (role, html) =>
+  `        <div class="dsh-sel-bubble ${role === 'user' ? 'dsh-sel-bubble-user' : 'dsh-sel-bubble-bot'}">${html}</div>`
+// ───────────────────────── 状态一：首轮只出翻译 ─────────────────────────
+const stage1 = panel(
+  'translation',
+  [
+    quote('the migration ran long'),
+    section(
+      'translation',
+      '翻译',
+      [
+        p('这句话里需要翻译的是 <b>the migration ran long</b>：'),
+        list(0, [{ text: '<b>migration</b> /maɪˈɡreɪʃn/ —— 迁移（把数据/服务从一处搬到另一处）' }]),
+        list(0, [{ text: '<b>ran long</b> —— 跑得比预期久（ran = run 的过去式，long 指耗时超出预期）' }]),
+        p('合起来：<b>迁移跑得比预期久</b>。'),
+        callout('在本句中', '迁移作业耗时超出了原计划——这是在陈述进度延迟的事实，不含"失败了"的意思。'),
+      ].join('\n'),
+    ),
+    expand,
+    askRow(false),
+  ].join('\n'),
+)
+// ───────────────────────── 状态二：展开详解 + 追问 ─────────────────────────
+const stage2 = panel(
+  'detail',
+  [
+    quote('the migration ran long'),
+    section(
+      'translation',
+      '翻译',
+      [
+        p('这句话里需要翻译的是 <b>the migration ran long</b>：'),
+        list(0, [{ text: '<b>migration</b> /maɪˈɡreɪʃn/ —— 迁移（把数据/服务从一处搬到另一处）' }]),
+        list(0, [{ text: '<b>ran long</b> —— 跑得比预期久（ran = run 的过去式，long 指耗时超出预期）' }]),
+        callout('在本句中', '迁移作业耗时超出了原计划——这是在陈述进度延迟的事实，不含"失败了"的意思。'),
+      ].join('\n'),
+    ),
+    section(
+      'detail',
+      '详解',
+      [
+        p('这句话出自一句对话，是开发者在向 PM 说明<b>进度为什么需要重新安排</b>——它不是报错，而是在为后面的决定做铺垫。'),
+        p('两个关键说法各指什么：'),
+        list(0, [
+          { text: '<b>migration</b>（迁移）：把数据或服务从旧结构搬到新结构的一次作业。在数据库语境里通常指改表结构、搬数据这类"不能中途停"的操作。' },
+          { text: '<b>ran long</b>（跑久了）：完成时态，说的是这次已经发生的执行<b>耗时超过预期</b>，而不是"即将变慢"。' },
+        ]),
+        p('承接关系：既然迁移比预期久，后面的 <b>freeze features</b>（冻结功能开发）就不是随口一说，而是把人力腾出来的实际动作。'),
+        callout('小结', '在说"迁移耗时超预期"，用来解释接下来的功能冻结——重点在<b>排期</b>，不在迁移本身的对错。'),
+      ].join('\n'),
+    ),
+    `      <div class="dsh-sel-chatlog" style="display:flex">`,
+    chatBubble('user', '那 freeze features 是指完全停止开发吗？'),
+    chatBubble('assistant', '不是完全停止，而是<b>暂停新功能合入</b>：已有功能的修 bug 与收尾照常，只是不再往主干加新特性，好让迁移期间的分支收敛。'),
+    '      </div>',
+    askRow(false),
+  ].join('\n'),
+)
+/** 代码块：真实渲染器逐行输出 `.dsh-sel-pre-line`，注释行带 data-wrap（可折行），代码行不折。 */
+const codeBlock = (lines) => `          <pre class="dsh-sel-pre" data-hl="light">${lines
+  .map((l) => `<div class="dsh-sel-pre-line"${l.wrap ? ' data-wrap="1"' : ''}>${l.wrap ? `<span class="dsh-sel-pre-cmt">${l.text}</span>` : l.text}</div>`)
+  .join('')}</pre>`
+// ───────────────────────── 状态三：选中代码 → 出注释 ─────────────────────────
+const codeDemo = panel(
+  'translation',
+  [
+    quote('function debounce(fn, wait) { … }'),
+    section(
+      'translation',
+      '注释',
+      [
+        codeBlock([
+          { wrap: true, text: '// 防抖：把连续触发压成「最后一次之后 wait 毫秒才真正执行」' },
+          { text: 'function debounce(fn, wait) {' },
+          { wrap: true, text: '  // 闭包变量：保存上一次的定时器，用来取消它' },
+          { text: '  let timer = null' },
+          { wrap: true, text: '  // 每次触发都先清掉上一个定时器，再重新计时' },
+          { text: '  return function (...args) {' },
+          { text: '    clearTimeout(timer)' },
+          { wrap: true, text: '    // wait 毫秒内没有新触发，才执行原函数' },
+          { text: '    timer = setTimeout(() =&gt; fn.apply(this, args), wait)' },
+          { text: '  }' },
+          { text: '}' },
+        ]),
+        callout('小结', '把高频触发收敛成一次执行——常用于搜索输入、窗口 resize 这类"只要最终结果"的场景。'),
+      ].join('\n'),
+    ),
+  ].join('\n'),
+)
+/** 网页模式：回答里嵌一张可交互的 HTML 页面（.dsh-sel-preview 结构照渲染器）。 */
+const previewBlock = (srcdoc) => `      <div class="dsh-sel-preview" data-view="preview" data-full="1">
+        <div class="dsh-sel-previewbar">
+          <div class="dsh-sel-previewtabs">
+            <button class="dsh-sel-previewtab" data-on="1">预览</button>
+            <button class="dsh-sel-previewtab" data-on="0">源码</button>
+          </div>
+          <button class="dsh-sel-previewzoom">⤡ 还原</button>
+        </div>
+        <div class="dsh-sel-previewbody">
+          <iframe class="dsh-sel-previewframe" srcdoc="${srcdoc.replace(/"/g, '&quot;')}"></iframe>
+        </div>
+      </div>`
+const DEMO_HTML = `<!doctype html><html><head><meta charset="utf-8"><style>
+body{margin:0;padding:14px 16px;font:13px/1.6 -apple-system,"PingFang SC",sans-serif;color:#1a1a1a;background:#fff}
+h3{margin:0 0 4px;font-size:14px}
+p.sub{margin:0 0 12px;color:#6b7280;font-size:12px}
+table{border-collapse:collapse;width:100%;font-size:12.5px}
+th,td{border-bottom:1px solid #e6e8eb;padding:7px 8px;text-align:left}
+th{background:#f6f8f9;font-weight:600;color:#374151}
+td.y{color:#0f766e;font-weight:600}
+td.n{color:#b45309}
+.bars{display:flex;align-items:flex-end;gap:10px;height:74px;margin:14px 0 4px}
+.bar{flex:1;border-radius:5px 5px 0 0;background:#0d9488;position:relative}
+.bar span{position:absolute;bottom:-19px;left:0;right:0;text-align:center;font-size:11px;color:#6b7280}
+.b1{height:34px;background:#99f6e4}.b2{height:58px}.b3{height:74px;background:#0f766e}
+</style></head><body>
+<h3>三种缓存策略的取舍</h3>
+<p class="sub">按"命中率 / 一致性风险 / 实现成本"三个维度对比</p>
+<table>
+  <tr><th>策略</th><th>命中率</th><th>一致性风险</th><th>实现成本</th></tr>
+  <tr><td>不缓存</td><td class="n">—</td><td class="y">无</td><td class="y">最低</td></tr>
+  <tr><td>进程内 LRU</td><td class="y">高</td><td class="n">中（多实例不一致）</td><td class="y">低</td></tr>
+  <tr><td>共享缓存 + TTL</td><td class="y">最高</td><td class="y">低（可配 TTL）</td><td class="n">中</td></tr>
+</table>
+<div class="bars"><div class="bar b1"><span>不缓存</span></div><div class="bar b2"><span>LRU</span></div><div class="bar b3"><span>共享缓存</span></div></div>
+</body></html>`
+// ───────────────────────── 状态四：网页模式（输出偏好拨到「网页」）─────────────────────────
+// 场景要能体现"为什么该用网页"：需要对比 + 图示的问题 → 直接给一页 HTML。
+const webDemo = panel(
+  'detail',
+  [
+    quote('缓存策略'),
+    section(
+      'detail',
+      '详解',
+      [
+        p('三种做法的差别是并列的，画成一页更好看：'),
+        previewBlock(DEMO_HTML),
+      ].join('\n'),
+    ),
+    `      <div class="dsh-sel-chatlog" style="display:flex">`,
+    chatBubble('user', '把三种缓存策略的差别画成一页对比'),
+    '      </div>',
+    askRow(true, 'deepseek-v4.1-flash', '高'),
+  ].join('\n'),
+)
+const css = extractCss()
+mkdirSync(resolve(ROOT, 'docs', 'demo'), { recursive: true })
+const out = {
+  'stage1.html': PAGE('划词解读 · 首轮翻译', css, stage1),
+  'stage2.html': PAGE('划词解读 · 详解与追问', css, stage2),
+  'code.html': PAGE('划词解读 · 代码注释', css, codeDemo),
+  'web.html': PAGE('划词解读 · 网页模式', css, webDemo),
+}
+for (const [name, html] of Object.entries(out)) {
+  writeFileSync(resolve(ROOT, 'docs', 'demo', name), html, 'utf8')
+  console.log(`✓ docs/demo/${name}  ${(html.length / 1024).toFixed(1)} kB`)
+}
+console.log(`\nCSS 来源：lib/client.js（${css.length} 字符，未手抄）`)

package/scripts/crop-png.mjs ADDED Viewed

@@ -0,0 +1,142 @@
+/**
+ * 裁掉截图四周的空白（仅用 Node 内置 zlib 解码/编码 PNG，不依赖 imagemagick）。
+ *
+ * 用途：README 的演示图需要紧凑。Chrome `--screenshot` 只能给固定窗口尺寸，
+ * 面板比窗口矮时底部会留下大片背景色 —— 这里把纯背景的边缘裁掉。
+ *
+ * 用法：node scripts/crop-png.mjs <in.png> <out.png> [边距px]
+ */
+import { readFileSync, writeFileSync } from 'node:fs'
+import { inflateSync, deflateSync } from 'node:zlib'
+const [, , inPath, outPath, padArg, tolArg] = process.argv
+if (!inPath || !outPath) {
+  console.error('用法: node scripts/crop-png.mjs <in.png> <out.png> [边距px] [背景容差]')
+  process.exit(1)
+}
+const PAD = Number(padArg ?? 0)
+// 容差要能吃掉面板投影造成的渐变（实测同一张图背景在 247~255 之间浮动）
+const TOL = Number(tolArg ?? 8)
+// ── 读 PNG（假定 Chrome 输出的 8bit RGB/RGBA 非隔行）──
+const buf = readFileSync(inPath)
+if (buf.readUInt32BE(0) !== 0x89504e47) throw new Error('不是 PNG')
+let pos = 8
+let width = 0
+let height = 0
+let bitDepth = 0
+let colorType = 0
+const idat = []
+while (pos < buf.length) {
+  const len = buf.readUInt32BE(pos)
+  const type = buf.toString('ascii', pos + 4, pos + 8)
+  const data = buf.subarray(pos + 8, pos + 8 + len)
+  if (type === 'IHDR') {
+    width = data.readUInt32BE(0)
+    height = data.readUInt32BE(4)
+    bitDepth = data[8]
+    colorType = data[9]
+    if (data[12] !== 0) throw new Error('不支持隔行 PNG')
+  } else if (type === 'IDAT') idat.push(data)
+  else if (type === 'IEND') break
+  pos += 12 + len
+}
+if (bitDepth !== 8 || (colorType !== 2 && colorType !== 6)) {
+  throw new Error(`不支持的 PNG 格式：bitDepth=${bitDepth} colorType=${colorType}`)
+}
+const bpp = colorType === 6 ? 4 : 3
+const raw = inflateSync(Buffer.concat(idat))
+// ── 反滤波 ──
+const stride = width * bpp
+const img = Buffer.alloc(height * stride)
+for (let y = 0; y < height; y++) {
+  const filter = raw[y * (stride + 1)]
+  const line = raw.subarray(y * (stride + 1) + 1, y * (stride + 1) + 1 + stride)
+  const prev = y > 0 ? img.subarray((y - 1) * stride, y * stride) : null
+  const cur = img.subarray(y * stride, (y + 1) * stride)
+  for (let x = 0; x < stride; x++) {
+    const a = x >= bpp ? cur[x - bpp] : 0
+    const b = prev ? prev[x] : 0
+    const c = prev && x >= bpp ? prev[x - bpp] : 0
+    let v = line[x]
+    if (filter === 1) v += a
+    else if (filter === 2) v += b
+    else if (filter === 3) v += (a + b) >> 1
+    else if (filter === 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
+    }
+    cur[x] = v & 0xff
+  }
+}
+// ── 找内容边界：以左上角像素为背景色 ──
+const bg = [img[0], img[1], img[2]]
+const isBg = (x, y) => {
+  const o = y * stride + x * bpp
+  return (
+    Math.abs(img[o] - bg[0]) <= TOL && Math.abs(img[o + 1] - bg[1]) <= TOL && Math.abs(img[o + 2] - bg[2]) <= TOL
+  )
+}
+let top = 0
+let bottom = height - 1
+let left = 0
+let right = width - 1
+outer: for (; top < height; top++) for (let x = 0; x < width; x++) if (!isBg(x, top)) break outer
+outer2: for (; bottom > top; bottom--) for (let x = 0; x < width; x++) if (!isBg(x, bottom)) break outer2
+outer3: for (; left < width; left++) for (let y = top; y <= bottom; y++) if (!isBg(left, y)) break outer3
+outer4: for (; right > left; right--) for (let y = top; y <= bottom; y++) if (!isBg(right, y)) break outer4
+top = Math.max(0, top - PAD)
+left = Math.max(0, left - PAD)
+bottom = Math.min(height - 1, bottom + PAD)
+right = Math.min(width - 1, right + PAD)
+const w = right - left + 1
+const h = bottom - top + 1
+// ── 重新编码（每行用 filter 0）──
+const outStride = w * bpp
+const rawOut = Buffer.alloc(h * (outStride + 1))
+for (let y = 0; y < h; y++) {
+  rawOut[y * (outStride + 1)] = 0
+  img.copy(rawOut, y * (outStride + 1) + 1, (top + y) * stride + left * bpp, (top + y) * stride + left * bpp + outStride)
+}
+const chunk = (type, data) => {
+  const len = Buffer.alloc(4)
+  len.writeUInt32BE(data.length)
+  const body = Buffer.concat([Buffer.from(type, 'ascii'), data])
+  const crc = Buffer.alloc(4)
+  crc.writeUInt32BE(crc32(body) >>> 0)
+  return Buffer.concat([len, body, crc])
+}
+let table = null
+function crc32(b) {
+  if (!table) {
+    table = new Int32Array(256)
+    for (let n = 0; n < 256; n++) {
+      let c = n
+      for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1
+      table[n] = c
+    }
+  }
+  let c = 0xffffffff
+  for (let i = 0; i < b.length; i++) c = table[(c ^ b[i]) & 0xff] ^ (c >>> 8)
+  return c ^ 0xffffffff
+}
+const ihdr = Buffer.alloc(13)
+ihdr.writeUInt32BE(w, 0)
+ihdr.writeUInt32BE(h, 4)
+ihdr[8] = 8
+ihdr[9] = colorType
+const png = Buffer.concat([
+  Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+  chunk('IHDR', ihdr),
+  chunk('IDAT', deflateSync(rawOut, { level: 9 })),
+  chunk('IEND', Buffer.alloc(0)),
+])
+writeFileSync(outPath, png)
+console.log(`✓ ${outPath}  ${width}x${height} → ${w}x${h}`)

package/scripts/test-client.mjs CHANGED Viewed

@@ -1994,9 +1994,20 @@ assert(
 )
 assert('标题文字完整（未被截断成省略号的短写）', textOf(rowParts[0]).indexOf('缓存探测词') >= 0, textOf(rowParts[0]))
 const sentBeforeClick = sent.length
+// 回归：点「最近」列表里的一条时，面板**不能**被重新锚到右下角胶囊上方。
+// 给胶囊一个特征坐标（左下角 10,860），若面板被挪到那里，下面的位置断言会立刻失败。
+const pillEl = Array.from(walk(panel.parentNode)).find((n) => n.className === 'dsh-sel-pill')
+if (pillEl) pillEl.getBoundingClientRect = () => ({ left: 10, top: 860, right: 150, bottom: 890, width: 140, height: 30 })
+const panelLeftBefore = panel.style.left
+const panelTopBefore = panel.style.top
 targetRow.dispatch('click', { stopPropagation() {} })
 await sleep(80)
 assert('点一条能把那段对话调回面板（不调模型）', sent.length === sentBeforeClick && textOf(sections[0]).indexOf('缓存测试内容') >= 0, `新增请求 ${sent.length - sentBeforeClick}`)
+assert(
+  '点列表条目时面板不跳到胶囊上方（保持原位）',
+  panel.style.left === panelLeftBefore && panel.style.top === panelTopBefore,
+  `before=${panelLeftBefore}/${panelTopBefore} after=${panel.style.left}/${panel.style.top}`,
+)
 assert('点完之后列表收起', histList.style.display === 'none', String(histList.style.display))
 // Esc：一次到位 —— 面板与侧边栏一起收（原先"第一下只收列表"那一级已按需求合并）

package/scripts/test-prompt.mjs ADDED Viewed

@@ -0,0 +1,178 @@
+/**
+ * 提示词契约测试 —— 保护提示词里的**关键约束**不被静默删除。
+ *
+ * 为什么需要它：提示词是产品行为的主要来源（两节结构、结论条、音标规则、来源判断、
+ * 网页模式要求…），但它们只是字符串常量，改动时**没有类型检查也没有编译错误**。
+ * 以前唯一的"验证"是手工看 PROMPTS.md，而那份快照会过期。这里把关键约束写成断言：
+ * 谁误删了，CI 直接红。
+ *
+ * 读取方式：优先直接 import src/prompts.ts（Node ≥ 22.14 的类型剥离支持直接加载 .ts，
+ * 与 GitHub Actions 的 Node 22.14 一致，无需编译步骤）；如果运行环境的 Node 太旧、
+ * 不支持类型剥离，则回退到"读源码文本 + 解析数组字面量"，保证测试在任何 Node 上都能跑。
+ */
+import { readFileSync } from 'node:fs'
+import { resolve, dirname } from 'node:path'
+import { fileURLToPath } from 'node:url'
+const HERE = dirname(fileURLToPath(import.meta.url))
+const PROMPTS_TS = resolve(HERE, '..', 'src', 'prompts.ts')
+const NAMES = [
+  'PROMPT_HEAD',
+  'TRANSLATION_PROMPT',
+  'CODE_PROMPT',
+  'DETAIL_PROMPT',
+  'CHAT_SYSTEM_PROMPT',
+]
+/** 回退方案：从源码文本里解析 `export const X = [ '...', ... ].join('\n')`。 */
+function loadFromSource() {
+  const src = readFileSync(PROMPTS_TS, 'utf8')
+  const out = {}
+  for (const name of NAMES) {
+    const re = new RegExp(`export const ${name} = \\[([\\s\\S]*?)\\]\\.join\\('\\\\n'\\)`)
+    const m = src.match(re)
+    if (!m) throw new Error(`回退解析失败：找不到 ${name}`)
+    const body = m[1]
+    // 元素既可能是字符串字面量，也可能是别的常量（片段复用），后者需要展开
+    const parts = []
+    const reElem = /'((?:[^'\\]|\\.)*)'|([A-Z_]+)/g
+    let em
+    while ((em = reElem.exec(body)) !== null) {
+      if (em[1] !== undefined) parts.push(em[1].replace(/\\'/g, "'").replace(/\\n/g, '\n'))
+      else parts.push(out[em[2]] ?? '')
+    }
+    out[name] = parts.join('\n')
+  }
+  return out
+}
+let P
+let loader = 'import src/prompts.ts（Node 类型剥离）'
+try {
+  P = await import(PROMPTS_TS)
+} catch (error) {
+  loader = `源码文本解析回退（类型剥离不可用：${error && error.message}）`
+  P = loadFromSource()
+}
+const { CHAT_SYSTEM_PROMPT, CODE_PROMPT, DETAIL_PROMPT, PROMPT_HEAD, TRANSLATION_PROMPT } = P
+console.log(`提示词来源：${loader}\n`)
+let failed = 0
+let passed = 0
+const assert = (label, ok, extra) => {
+  console.log(`${ok ? 'PASS' : 'FAIL'}  ${label}${extra ? ' — ' + extra : ''}`)
+  if (ok) passed += 1
+  else failed += 1
+}
+const has = (text, ...needles) => needles.every((n) => text.includes(n))
+// ───────────────────────── 公共前言 ─────────────────────────
+assert('人设：跨领域解读专家（含领域判断要求）', has(PROMPT_HEAD, '跨领域', '先判断【选中文字】实际属于哪个领域'))
+assert('人设：领域判断是内部动作，不许写出来', has(PROMPT_HEAD, '不要把判断过程写出来'))
+assert('人设：说明用户消息的形态（会话背景 + 选中文字）', has(PROMPT_HEAD, '【会话背景】', '【选中文字】'))
+// ───────────────────────── 翻译 / 解读（首轮）─────────────────────────
+assert('翻译提示词拼进了公共前言', TRANSLATION_PROMPT.startsWith(PROMPT_HEAD))
+assert(
+  '翻译：只输出一个章节（不许前言结语）',
+  has(TRANSLATION_PROMPT, '本轮只输出一个章节', '不要输出其它章节', '不要前言与结语'),
+)
+assert(
+  '结构契约：含英文 → 标题 `## 翻译`',
+  has(TRANSLATION_PROMPT, '## 翻译'),
+  '客户端按此标题切分渲染，改标题会同时破坏渲染',
+)
+assert(
+  '结构契约：全中文 → 标题 `## 解读`',
+  has(TRANSLATION_PROMPT, '## 解读'),
+)
+assert(
+  '结论条：固定写成引用行「在本句中：」',
+  has(TRANSLATION_PROMPT, '> 在本句中：'),
+  '面板据此渲染成高亮结论条，格式不能丢',
+)
+assert(
+  '音标规则：单词要标 IPA，且拿不准宁可不标',
+  has(TRANSLATION_PROMPT, '音标', 'IPA') && /拿不准就不写|宁可不标/.test(TRANSLATION_PROMPT),
+)
+assert(
+  '词义规则：词性与义项缩进两个空格作为子项',
+  has(TRANSLATION_PROMPT, '缩进两个空格'),
+)
+assert(
+  '语言自适应：按"有没有需要翻译的英文"分情形，只出一种',
+  has(TRANSLATION_PROMPT, '有没有需要翻译的英文') && has(TRANSLATION_PROMPT, '情形一', '情形二'),
+)
+// ───────────────────────── 代码注释（首轮）─────────────────────────
+assert('代码提示词拼进了公共前言', CODE_PROMPT.startsWith(PROMPT_HEAD))
+assert('结构契约：代码模式标题 `## 注释`', has(CODE_PROMPT, '## 注释'))
+assert(
+  '代码模式：原代码逐字不变、注释插在语句前',
+  has(CODE_PROMPT, '原代码') && /逐字不变|原样/.test(CODE_PROMPT),
+)
+// ───────────────────────── 详解（第二阶段）─────────────────────────
+assert('详解提示词拼进了公共前言', DETAIL_PROMPT.startsWith(PROMPT_HEAD))
+assert(
+  '详解：只输出 `## 详解` 一节',
+  has(DETAIL_PROMPT, '## 详解', '不要输出「## 翻译」或其它章节'),
+)
+assert(
+  '详解：要求先判断这段文字的来源（真实内容 vs 示例/测试/引用）',
+  has(DETAIL_PROMPT, '真实对话/正文', '示例', '测试用例', '演示输出', '引用别人的话'),
+  '早期缺这条时，示例句会被当成真实陈述解释',
+)
+assert('详解：单词仍带音标', has(DETAIL_PROMPT, '音标', 'IPA'))
+// ───────────────────────── 追问（小窗对话）─────────────────────────
+assert(
+  '追问：不要求两节结构，问什么答什么',
+  has(CHAT_SYSTEM_PROMPT, '用户问什么就答什么', '不必把话题拉回选中文字'),
+)
+assert(
+  '追问：不许重复前情已给的翻译/详解',
+  has(CHAT_SYSTEM_PROMPT, '不用重复', '一句话带过'),
+)
+assert(
+  '追问：网页模式要给完整单文件 HTML（内联样式与脚本）',
+  has(CHAT_SYSTEM_PROMPT, '完整的单文件 HTML', '```html', '样式和脚本都内联'),
+  '小窗会当场渲染成可交互页面，只给片段就渲染不出来',
+)
+// ───────────────────────── 卫生检查（防低级事故）─────────────────────────
+const ALL = [PROMPT_HEAD, TRANSLATION_PROMPT, CODE_PROMPT, DETAIL_PROMPT, CHAT_SYSTEM_PROMPT].join('\n')
+assert(
+  '没有未替换的占位符（{{…}} / ${…} / TODO）',
+  !/\{\{[^}]*\}\}|\$\{[^}]*\}|TODO/.test(ALL),
+)
+assert(
+  '没有残留的调试口吻（console.log / debugger）',
+  !/console\.log|debugger/.test(ALL),
+)
+assert(
+  '提示词不是空串（防止整体被清空）',
+  ALL.length > 2000,
+  `总长 ${ALL.length}`,
+)
+// ───────────────────────── 防复活：已弃用的规则不得重新接回 ─────────────────────────
+// TWO_LAYER_RULE（「专业 + 说人话、别套模板」的写作规则）**已弃用**：提示词瘦身时
+// 把"别写成同一个模子"那五条写法砍掉了，只留两条硬约束（只出 `## 详解` 一节 + 音标）。
+// 它曾作为常量残留（只定义、不使用），已于 2026-09-24 删除。
+// 这条断言防止有人把那段文字重新塞回提示词里 —— 那是被明确废弃的设计。
+{
+  const resurrected = [TRANSLATION_PROMPT, CODE_PROMPT, DETAIL_PROMPT, CHAT_SYSTEM_PROMPT].some((p) =>
+    p.includes('别写成同一个模子') || p.includes('**写法：内容有要求，形式随内容走。**'),
+  )
+  assert(
+    '已弃用的「两层写法规则」没有被重新塞回提示词',
+    !resurrected,
+    resurrected ? '检测到已废弃规则的原文，请确认是否有意恢复该设计' : '符合当前设计（该规则已弃用并删除）',
+  )
+}
+console.log(`\n=== 提示词契约测试结束：${passed} 通过 / ${failed} 失败 ===`)
+if (failed > 0) process.exitCode = 1
+process.exit(process.exitCode ?? 0)