dsh-pet-dom 2.0.0

package/lib/console.js

@@ -0,0 +1,422 @@
+// ============================================================================
+// dsh-pet-dom —— lib/console.js 桌宠控制台（UI 层，纯 DOM，不了解宠物）
+// ============================================================================
+// 形态：一个可拖动面板（右上角）。标题栏 × = 完全隐藏（双击宠物唤回）；
+//      双击标题栏 = 折叠/展开面板本体。
+// 图标：全部内联 SVG（无 emoji）。
+// 主题：自动跟随 DSH 页面白天/黑夜（body 背景亮度 <128 深色；每 2s 复查）。
+// 设计：玻璃拟态中性面板，accent（主题色）只出现在选中态/开关/当前项；
+//       分段模式选择器、自绘滑动开关、键帽弱化成中性 chip。
+// 回调交给 mascot：{ onMode(mode), onHighlight(enable, color), onTheme(color) }
+// ============================================================================
+
+const THEMES = [
+  { name: '霓虹紫', color: '#8b5cf6' },
+  { name: '薄荷绿', color: '#10b981' },
+  { name: '蜜桃粉', color: '#f472b6' },
+  { name: '金黄', color: '#f59e0b' },
+  { name: '冰蓝', color: '#38bdf8' },
+  { name: '珍珠白', color: '#f8fafc' }
+]
+
+const STORE_KEY = 'petDomConsole_v1'
+
+const ICON = {
+  paw: '<svg width="15" height="15" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><circle cx="12" cy="14.6" r="3.4"/><circle cx="5" cy="11.6" r="2.2"/><circle cx="8.6" cy="7" r="2.2"/><circle cx="15.4" cy="7" r="2.2"/><circle cx="19" cy="11.6" r="2.2"/></svg>',
+  chev: '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 9l6 6 6-6"/></svg>',
+  x: '<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M6 6l12 12M18 6L6 18"/></svg>',
+  pad: '<svg width="13" height="13" viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M8 6.5h8A5.5 5.5 0 0 1 21.5 12v3.6a3.6 3.6 0 0 1-6.5 2.2L13.6 16h-3.2l-1.4 1.8a3.6 3.6 0 0 1-6.5-2.2V12A5.5 5.5 0 0 1 8 6.5zM8.2 9v1.8H6.4v1.8h1.8v1.8H10v-1.8h1.8v-1.8H10V9H8.2zm7 1a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2zm2.6 2.6a1.1 1.1 0 1 0 0 2.2 1.1 1.1 0 0 0 0-2.2z"/></svg>',
+  sun: '<svg width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><circle cx="12" cy="12" r="4" fill="currentColor" stroke="none"/><path d="M12 2.8v2.2M12 19v2.2M2.8 12H5M19 12h2.2M5.5 5.5l1.6 1.6M16.9 16.9l1.6 1.6M18.5 5.5l-1.6 1.6M7.1 16.9L5.5 18.5"/></svg>'
+}
+
+function loadState() {
+  try { return JSON.parse(localStorage.getItem(STORE_KEY)) || {} } catch (e) { return {} }
+}
+function saveState(st) {
+  try { localStorage.setItem(STORE_KEY, JSON.stringify(st)) } catch (e) { /* 忽略 */ }
+}
+function detectDark() {
+  try {
+    var m = (getComputedStyle(document.body).backgroundColor.match(/\d+/g) || []).map(Number)
+    if (m.length >= 3) return (m[0] * 0.299 + m[1] * 0.587 + m[2] * 0.114) < 128
+  } catch (e) {}
+  try { return !!(window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) } catch (e) { return false }
+}
+
+// ---------- 样式表（面板级 CSS 变量；data-ui 切换明暗） ----------
+var CSS = `
+.petcon-root{position:fixed;z-index:2147483000;box-sizing:border-box;width:300px;color:var(--fg);
+  background:var(--bg);border:1px solid var(--line);border-radius:14px;box-shadow:0 10px 32px var(--shadow);
+  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);overflow:hidden;
+  font:12px/1.55 system-ui,-apple-system,"Segoe UI",sans-serif}
+.petcon-root[data-ui="dark"]{--bg:rgba(23,24,32,.78);--fg:#eceef4;--fg2:rgba(236,238,244,.55);
+  --line:rgba(255,255,255,.09);--head:rgba(255,255,255,.045);--chip:rgba(255,255,255,.07);
+  --chipHover:rgba(255,255,255,.12);--kbdBg:rgba(255,255,255,.09);--kbdBd:rgba(255,255,255,.16);
+  --swBg:rgba(255,255,255,.18);--swBd:rgba(255,255,255,.3);
+  --shadow:rgba(0,0,0,.5);--accentSoft:rgba(139,92,246,.32)}
+.petcon-root[data-ui="light"]{--bg:rgba(255,255,255,.86);--fg:#23262f;--fg2:rgba(35,38,47,.55);
+  --line:rgba(35,38,47,.1);--head:rgba(35,38,47,.035);--chip:rgba(35,38,47,.06);
+  --chipHover:rgba(35,38,47,.11);--kbdBg:rgba(35,38,47,.055);--kbdBd:rgba(35,38,47,.14);
+  --swBg:#c6cad4;--swBd:#aab0bf;
+  --shadow:rgba(20,22,30,.16);--accentSoft:rgba(139,92,246,.14)}
+.petcon-head{display:flex;align-items:center;gap:6px;padding:10px 12px 9px;cursor:move;
+  background:var(--head);user-select:none;border-bottom:1px solid var(--line)}
+.petcon-head .t{flex:1;font-weight:600;font-size:12.5px;display:flex;align-items:center;gap:6px}
+.petcon-head .ic{color:var(--accent)}
+.petcon-hbtn{border:0;background:transparent;color:var(--fg2);border-radius:7px;padding:4px;cursor:pointer;
+  display:inline-flex;align-items:center;transition:background .15s}
+.petcon-hbtn:hover{background:var(--chipHover);color:var(--fg)}
+.petcon-capbtn{position:fixed;z-index:2147483000;right:10px;top:8px;width:28px;height:28px;border-radius:50%;
+  color:var(--fg);background:var(--bg);border:1px solid var(--line);cursor:pointer;user-select:none;
+  display:none;align-items:center;justify-content:center;box-shadow:0 2px 10px var(--shadow);
+  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);transition:transform .15s,border-color .15s}
+.petcon-capbtn:hover{transform:scale(1.12);border-color:var(--accent)}
+.petcon-capbtn .i{color:var(--accent);display:inline-flex}
+.petcon-body{padding:10px 12px 12px;display:flex;flex-direction:column;gap:8px;
+  max-height:calc(100vh - 110px);overflow-y:auto;overscroll-behavior:contain}
+.petcon-seg{display:flex;position:relative;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--head)}
+.petcon-seg button{flex:1;border:0;background:transparent;color:var(--fg2);padding:6px 4px;font-size:11.5px;
+  cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:background .15s,color .15s}
+.petcon-seg button:hover{background:var(--chip)}
+.petcon-seg button.on{background:var(--accentSoft);color:var(--fg)}
+.petcon-seg button.on svg{color:var(--accent)}
+.petcon-keys{display:none;flex-direction:column;gap:6px;padding:2px 1px}
+.petcon-keys .row{display:flex;align-items:center;gap:5px;font-size:11px;color:var(--fg2);flex-wrap:wrap}
+.petcon-kbd{display:inline-block;min-width:17px;text-align:center;padding:1px 5px;border-radius:5px;
+  border:1px solid var(--kbdBd);border-bottom-width:2px;background:var(--kbdBg);color:var(--fg);
+  font:10.5px/16px ui-monospace,Consolas,monospace}
+.petcon-sw{display:flex;align-items:center;gap:8px;cursor:pointer;padding:4px 2px;border-radius:8px;transition:background .15s}
+.petcon-sw:hover{background:var(--chip)}
+.petcon-sw .track{flex:0 0 auto;width:30px;height:18px;border-radius:9px;background:var(--swBg);
+  border:1px solid var(--swBd);position:relative;transition:background .18s}
+.petcon-sw .track i{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
+  background:var(--fg2);transition:left .18s,background .18s}
+.petcon-sw.on .track{background:var(--swOn);border-color:var(--swOn)}
+.petcon-sw.on .track i{left:14px;background:#fff}
+.petcon-theme{display:flex;align-items:center;gap:7px}
+.petcon-theme .lbl{flex:0 0 40px;color:var(--fg2)}
+.petcon-dot{width:17px;height:17px;border-radius:50%;cursor:pointer;box-sizing:border-box;
+  border:1.5px solid var(--kbdBd);transition:transform .12s,box-shadow .12s}
+.petcon-dot:hover{transform:scale(1.18)}
+.petcon-dot.on{transform:scale(1.18);box-shadow:0 0 0 2px var(--bg),0 0 0 4px currentColor}
+.petcon-custom{background:conic-gradient(from 0deg,#f43f5e,#f59e0b,#10b981,#38bdf8,#8b5cf6,#f43f5e);
+  display:inline-flex;align-items:center;justify-content:center;padding:0;overflow:hidden}
+.petcon-custom i{width:9px;height:9px;border-radius:50%;background:currentColor;border:1px solid rgba(0,0,0,.15)}
+@media (max-width:480px){.petcon-root{width:min(280px,calc(100vw - 20px))}}
+`
+var styleEl = document.createElement('style')
+styleEl.textContent = CSS
+document.head.appendChild(styleEl)
+
+export function createPetConsole(handlers) {
+  handlers = handlers || {}
+  var st = Object.assign({ open: true, x: null, y: null, mode: 'default', collapsed: false, highlight: false, themeIdx: 0, customColor: null, dedupGap: 90, highlightAlpha: 0.2 }, loadState())
+  // 旧默认值迁移：存量 localStorage 里"旧默认 3px/50%"→ 新默认 90px/20%（用户已手动调的保留）
+  if (st.dedupGap === 3) st.dedupGap = 90
+  if (st.highlightAlpha === 0.5) st.highlightAlpha = 0.2
+  // 旧数据迁移：hidden（完全隐藏）→ collapsed（收起为可见小钮）
+  if (st.hidden && !st.collapsed) { st.collapsed = true }
+  delete st.hidden
+  var uiDark = detectDark()
+
+  // ---------- 结构 ----------
+  var root = document.createElement('div')
+  root.className = 'petcon-root'
+  root.setAttribute('data-ui', uiDark ? 'dark' : 'light')
+
+  var head = document.createElement('div')
+  head.className = 'petcon-head'
+  head.innerHTML =
+    '<span class="t"><span class="ic">' + ICON.paw + '</span>桌宠控制台</span>' +
+    '<button class="petcon-hbtn" data-a="fold" title="收起为悬浮小按钮">' + ICON.chev + '</button>'
+  var btnFold = head.querySelector('[data-a=fold]')
+
+  var body = document.createElement('div')
+  body.className = 'petcon-body'
+  body.innerHTML =
+    '<div class="petcon-seg">' +
+      '<button data-m="default">' + ICON.sun + ' 默认（自动）</button>' +
+      '<button data-m="game">' + ICON.pad + ' 游戏（键盘控制）</button>' +
+    '</div>' +
+    '<div class="petcon-keys">' +
+      '<div class="row"><span class="petcon-kbd">&#8592;</span><span class="petcon-kbd">A</span>左移</div>' +
+      '<div class="row"><span class="petcon-kbd">&#8594;</span><span class="petcon-kbd">D</span>右移</div>' +
+      '<div class="row"><span class="petcon-kbd">空格</span><span class="petcon-kbd">&#8593;</span><span class="petcon-kbd">W</span>跳跃（空中可连跳）</div>' +
+      '<div class="row"><span class="petcon-kbd">&#8595;</span><span class="petcon-kbd">S</span>快速下落（站在表面时=摔落）</div>' +
+      '<div class="row"><span class="petcon-kbd">H</span>胡桃摇</div>' +
+    '</div>' +
+    '<div class="petcon-sw"><span class="track"><i></i></span><span>高亮可跳跃边缘（上界）</span></div>' +
+    '<div class="petcon-sw petcon-sw2"><span class="track"><i></i></span><span>禁用 ↑↓</span></div>' +
+    '<div class="petcon-gap" style="display:flex;align-items:center;gap:8px;padding:4px 2px">' +
+      '<span style="flex:0 0 40px;color:var(--fg2)">表面合并</span>' +
+      '<input type="range" min="0" max="200" step="1" style="flex:1;accent-color:var(--accent)">' +
+      '<span class="val" style="flex:0 0 40px;text-align:right;color:var(--fg2)">90px</span>' +
+    '</div>' +
+    '<div class="petcon-alpha" style="display:flex;align-items:center;gap:8px;padding:4px 2px">' +
+      '<span style="flex:0 0 40px;color:var(--fg2)">高亮透明</span>' +
+      '<input type="range" min="5" max="100" step="5" style="flex:1;accent-color:var(--accent)">' +
+      '<span class="val" style="flex:0 0 40px;text-align:right;color:var(--fg2)">20%</span>' +
+    '</div>' +
+    '<div class="petcon-theme"><span class="lbl">主题</span></div>'
+
+  var segDefault = body.querySelector('[data-m=default]')
+  var segGame = body.querySelector('[data-m=game]')
+  var keysBox = body.querySelector('.petcon-keys')
+  var sw = body.querySelector('.petcon-sw')
+  var sw2 = body.querySelector('.petcon-sw2')
+  var gapRange = body.querySelector('.petcon-gap input')
+  var gapVal = body.querySelector('.petcon-gap .val')
+  var alphaRange = body.querySelector('.petcon-alpha input')
+  var alphaVal = body.querySelector('.petcon-alpha .val')
+  var themeRow = body.querySelector('.petcon-theme')
+
+  // 主题色点（6 预设）+ 自定义（彩虹环圆点，点击弹系统取色器；UI 与色点一致）
+  var dots = []
+  THEMES.forEach(function (t, i) {
+    var d = document.createElement('span')
+    d.className = 'petcon-dot' + (i === st.themeIdx ? ' on' : '')
+    d.style.background = t.color
+    d.style.color = t.color          // currentColor → 选中环用自身颜色（它是高亮色预览）
+    d.title = t.name
+    d.addEventListener('click', function () { setTheme(i) })
+    themeRow.appendChild(d); dots.push(d)
+  })
+  // 自定义圆点：彩虹环 + 中心 fg 点；点击 → 隐藏的原生取色器
+  var CUSTOM_IDX = 6
+  var customDot = document.createElement('span')
+  customDot.className = 'petcon-dot petcon-custom' + (st.themeIdx === CUSTOM_IDX ? ' on' : '')
+  customDot.title = '自定义颜色…'
+  customDot.innerHTML = '<i></i>'
+  var colorInput = document.createElement('input')
+  colorInput.type = 'color'
+  colorInput.value = st.customColor || '#8b5cf6'
+  colorInput.style.cssText = 'position:absolute;width:0;height:0;border:0;padding:0;visibility:hidden;'
+  colorInput.addEventListener('change', function () {
+    st.customColor = colorInput.value
+    setTheme(CUSTOM_IDX)
+  })
+  customDot.addEventListener('click', function (e) {
+    e.stopPropagation()
+    colorInput.value = st.customColor || '#8b5cf6'
+    colorInput.click()
+  })
+  themeRow.appendChild(customDot)
+  themeRow.appendChild(colorInput)
+  dots.push(customDot)
+
+  // 当前主题色（预设 0-5 / 自定义 6）
+  function themeColor() {
+    return st.themeIdx === CUSTOM_IDX ? (st.customColor || THEMES[0].color) : THEMES[st.themeIdx].color
+  }
+
+  // 收起态悬浮钮（可见的恢复入口；点击展开面板）
+  var capBtn = document.createElement('button')
+  capBtn.className = 'petcon-capbtn'
+  capBtn.innerHTML = '<span class="i">' + ICON.paw + '</span>'
+  capBtn.title = '展开桌宠控制台'
+  document.body.appendChild(capBtn)
+
+  // 面板本体
+  document.body.appendChild(root)
+  root.appendChild(head); root.appendChild(body)
+
+  function accent() { return themeColor() }   // 面板 UI accent = 当前主题色（与高亮一致）
+
+  // ---------- 状态 → UI ----------
+  function paint() {
+    root.setAttribute('data-ui', uiDark ? 'dark' : 'light')
+    // 安全 accent：用户色/主题色太浅（>200 亮度）→ 压深到银灰档；面板 UI 一律用它
+    var ac = swOnColor(accent())
+    root.style.setProperty('--accent', ac)
+    root.style.setProperty('--accentSoft', hexToRgba(ac, uiDark ? 0.32 : 0.15))
+    root.style.setProperty('--swOn', ac)
+    // capBtn 是 body 直接子元素（吃不到 root 的变量）—— 显式补齐，否则收起后透明无形
+    capBtn.style.setProperty('--accent', ac)
+    capBtn.style.setProperty('--bg', uiDark ? 'rgba(23,24,32,.9)' : 'rgba(255,255,255,.95)')
+    capBtn.style.setProperty('--fg', uiDark ? '#eceef4' : '#23262f')
+    capBtn.style.setProperty('--line', uiDark ? 'rgba(255,255,255,.16)' : 'rgba(35,38,47,.18)')
+    capBtn.style.setProperty('--shadow', uiDark ? 'rgba(0,0,0,.5)' : 'rgba(20,22,30,.18)')
+  }
+  // 混黑/混白（开关等小控件用；不依赖 mascot）
+  function shadeFor(hex, amt) {
+    var n = parseInt(hex.slice(1), 16) || 0
+    var r = (n >> 16) & 255, g = (n >> 8) & 255, b = n & 255
+    var t = amt > 0 ? 0 : 255, a = Math.abs(amt)
+    r = Math.round(r + (t - r) * a); g = Math.round(g + (t - g) * a); b = Math.round(b + (t - b) * a)
+    return 'rgb(' + r + ',' + g + ',' + b + ')'
+  }
+  // 安全色：亮度 >200（珍珠白/淡黄等浅色）→ 深派生（银灰色会）；普通颜色原样。
+  // 对用户自定义任意颜色同样生效（预设 0-5 / 自定义 6 都走这里）。
+  function swOnColor(hex) {
+    var n = parseInt(hex.slice(1), 16) || 0
+    var lum = 0.299 * ((n >> 16) & 255) + 0.587 * ((n >> 8) & 255) + 0.114 * (n & 255)
+    return lum > 200 ? shadeFor(hex, 0.45) : hex
+  }
+  function hexToRgba(hex, alpha) {
+    var n = parseInt(hex.slice(1), 16) || 0
+    return 'rgba(' + ((n >> 16) & 255) + ',' + ((n >> 8) & 255) + ',' + (n & 255) + ',' + alpha + ')'
+  }
+
+  function apply() {
+    // 收起 ⇄ 展开：锚点同源（st.x/st.y），收起钮留在面板原位置；展开面板恢复同位置
+    capBtn.style.display = st.collapsed ? 'flex' : 'none'
+    root.style.display = st.collapsed ? 'none' : 'block'
+    var px = st.x !== null ? st.x : (window.innerWidth - (st.collapsed ? 46 : root.offsetWidth + 14))
+    var py = st.y !== null ? st.y : 10
+    if (st.collapsed) {
+      capBtn.style.left = px + 'px'; capBtn.style.top = py + 'px'
+      capBtn.style.right = ''
+    } else {
+      root.style.left = px + 'px'; root.style.top = py + 'px'
+      save()
+    }
+  }
+
+  function refresh() {
+    var active = st.mode === 'game'
+    segDefault.classList.toggle('on', !active)
+    segGame.classList.toggle('on', active)
+    keysBox.style.display = active ? 'flex' : 'none'
+    sw.classList.toggle('on', st.highlight)
+    sw2.classList.toggle('on', st.disableUpDown)
+    gapRange.value = st.dedupGap
+    gapVal.textContent = st.dedupGap + 'px'
+    alphaRange.value = Math.round(st.highlightAlpha * 100)
+    alphaVal.textContent = Math.round(st.highlightAlpha * 100) + '%'
+    // 色点选中态：预设用自身色环；自定义圆点用当前值色环
+    dots.forEach(function (d, i) {
+      d.classList.toggle('on', i === st.themeIdx)
+    })
+    customDot.style.color = themeColor()
+    paint()
+    apply()
+  }
+
+  function save() {
+    st.x = parseFloat(root.style.left) || null
+    st.y = parseFloat(root.style.top) || null
+    saveState(st)
+  }
+  function persist() { saveState(st); refresh() }
+
+  // ---------- 交互 ----------
+  btnFold.addEventListener('click', function (e) { e.stopPropagation(); st.collapsed = true; refresh() })
+  capBtn.addEventListener('click', function () { st.collapsed = false; refresh() })
+  segDefault.addEventListener('click', function () { setMode('default') })
+  segGame.addEventListener('click', function () { setMode('game') })
+  sw.addEventListener('click', function () {
+    st.highlight = !st.highlight
+    if (handlers.onHighlight) handlers.onHighlight(st.highlight, accent())
+    persist()
+  })
+  sw2.addEventListener('click', function () {
+    st.disableUpDown = !st.disableUpDown
+    if (handlers.onDisableUpDown) handlers.onDisableUpDown(st.disableUpDown)
+    persist()
+  })
+  // 表面合并滑块：值显示/保存即时；重扫回调节流 120ms（拖动高频不卡）；change 兜底立即同步
+  var gapTimer = null
+  gapRange.addEventListener('input', function () {
+    st.dedupGap = parseInt(gapRange.value, 10) || 0
+    gapVal.textContent = st.dedupGap + 'px'
+    saveState(st)
+    if (gapTimer) clearTimeout(gapTimer)
+    gapTimer = setTimeout(function () {
+      gapTimer = null
+      if (handlers.onDedupGap) handlers.onDedupGap(st.dedupGap)
+    }, 120)
+  })
+  gapRange.addEventListener('change', function () {
+    st.dedupGap = parseInt(gapRange.value, 10) || 0
+    saveState(st)
+    if (gapTimer) { clearTimeout(gapTimer); gapTimer = null }
+    if (handlers.onDedupGap) handlers.onDedupGap(st.dedupGap)
+  })
+  // 高亮透明度滑块：同上（节流 120ms；默认 0.5）
+  var alphaTimer = null
+  alphaRange.addEventListener('input', function () {
+    st.highlightAlpha = (parseInt(alphaRange.value, 10) || 50) / 100
+    alphaVal.textContent = Math.round(st.highlightAlpha * 100) + '%'
+    saveState(st)
+    if (alphaTimer) clearTimeout(alphaTimer)
+    alphaTimer = setTimeout(function () {
+      alphaTimer = null
+      if (handlers.onHighlightAlpha) handlers.onHighlightAlpha(st.highlightAlpha)
+    }, 120)
+  })
+  alphaRange.addEventListener('change', function () {
+    st.highlightAlpha = (parseInt(alphaRange.value, 10) || 50) / 100
+    saveState(st)
+    if (alphaTimer) { clearTimeout(alphaTimer); alphaTimer = null }
+    if (handlers.onHighlightAlpha) handlers.onHighlightAlpha(st.highlightAlpha)
+  })
+  head.addEventListener('dblclick', function (e) {
+    if (e.target.closest('button')) return
+    st.collapsed = !st.collapsed; refresh()
+  })
+
+  // 拖动（标题栏 / 收起钮；共用 pointermove/up，位置锚点共享 st.x/st.y）
+  var drag = null
+  var btnDrag = null
+  head.addEventListener('pointerdown', function (e) {
+    if (e.target.closest('button')) return
+    drag = { dx: e.clientX - root.offsetLeft, dy: e.clientY - root.offsetTop }
+    e.preventDefault()
+  })
+  capBtn.addEventListener('pointerdown', function (e) {
+    btnDrag = { dx: e.clientX - capBtn.offsetLeft, dy: e.clientY - capBtn.offsetTop }
+    e.preventDefault()
+  })
+  window.addEventListener('pointermove', function (e) {
+    if (drag) {
+      root.style.left = Math.max(6, Math.min(window.innerWidth - root.offsetWidth - 6, e.clientX - drag.dx)) + 'px'
+      root.style.top = Math.max(6, Math.min(window.innerHeight - 44, e.clientY - drag.dy)) + 'px'
+    } else if (btnDrag) {
+      capBtn.style.left = Math.max(6, Math.min(window.innerWidth - 34, e.clientX - btnDrag.dx)) + 'px'
+      capBtn.style.top = Math.max(6, Math.min(window.innerHeight - 34, e.clientY - btnDrag.dy)) + 'px'
+    }
+  })
+  window.addEventListener('pointerup', function () {
+    if (drag) { drag = null; save(); apply() }
+    if (btnDrag) {
+      btnDrag = null
+      // 收起钮拖到哪 → 展开面板就到哪（锚点共享）
+      st.x = parseFloat(capBtn.style.left) || null
+      st.y = parseFloat(capBtn.style.top) || null
+      saveState(st)
+    }
+  })
+
+  // ---------- 主题跟随（2s 复查） ----------
+  function watchTheme() {
+    var d = detectDark()
+    if (d !== uiDark) { uiDark = d; paint(); refresh() }
+    else paint()
+  }
+
+  function setMode(m) {
+    st.mode = m; persist()
+    if (handlers.onMode) handlers.onMode(m)
+  }
+  function setTheme(i) {
+    st.themeIdx = i
+    var ac = themeColor()          // 预设色 / 自定义色（i=6 时）
+    persist()
+    if (handlers.onTheme) handlers.onTheme(ac)
+    if (st.highlight && handlers.onHighlight) handlers.onHighlight(true, ac)
+  }
+  paint(); refresh()
+  // 初始化状态同步给 mascot：mode（曾漏：localStorage 恢复'game'只改了 UI，宠物实际还在默认模式）
+  if (handlers.onMode) handlers.onMode(st.mode)
+  if (handlers.onHighlight) handlers.onHighlight(st.highlight, accent())
+  if (handlers.onTheme) handlers.onTheme(accent())
+  if (handlers.onDedupGap) handlers.onDedupGap(st.dedupGap)
+  if (handlers.onHighlightAlpha) handlers.onHighlightAlpha(st.highlightAlpha)
+  setInterval(watchTheme, 2000)
+
+  return {
+    show: function () { st.collapsed = false; refresh() },
+    getMode: function () { return st.mode },
+    getState: function () { return Object.assign({}, st) }
+  }
+}

package/lib/index.js

@@ -0,0 +1,147 @@
+// ============================================================================
+// dsh-pet-dom —— 宿主侧插件本体（cordis bundle 服务）
+// ============================================================================
+// 职责：
+//   1. 注册 HTTP 路由：/dsh-pet-dom/miku.gif（精灵图）、/dsh-pet-dom/mascot.js、
+//      /dsh-pet-dom/brain.js（客户端 ESM 模块）
+//   2. 通过 ctx.webServer.tapIndex 把 <script type="module" src="/dsh-pet-dom/mascot.js">
+//      注入 DSH Web 页面的 </body>，脚本运行后创建桌宠。
+// 桌宠的全部行为都在 lib/mascot.js（客户端）与 lib/brain.js（规划大脑，纯函数）
+// 里，由原 uniapp Pet.vue 纯浏览器移植。
+// ============================================================================
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// Package root: lib/index.js -> package root. 保持 bundle 可搬迁（本地 link 或 node_modules 均可）。
+const PACKAGE_ROOT = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+
+const SPRITE_FILE = path.join(PACKAGE_ROOT, 'assets', 'miku.gif')
+const MASCOT_FILE = path.join(PACKAGE_ROOT, 'lib', 'mascot.js')
+const BRAIN_FILE = path.join(PACKAGE_ROOT, 'lib', 'brain.js')
+const CONSOLE_FILE = path.join(PACKAGE_ROOT, 'lib', 'console.js')
+
+// 客户端脚本内容（每次请求现读，与 brain/console 一致 —— 开发期改代码刷新即生效，无需重启 dsh web）
+const name = 'dsh-pet-dom'
+const inject = ['webServer']
+
+function apply(ctx) {
+  let spriteBytes = null
+  const disposers = []
+
+  function loadSprite() {
+    if (spriteBytes) return spriteBytes
+    spriteBytes = fs.readFileSync(SPRITE_FILE)
+    return spriteBytes
+  }
+
+  const JSON_HEADERS = {
+    'Content-Type': 'application/json; charset=utf-8',
+    'Access-Control-Allow-Origin': '*',
+    'Cache-Control': 'no-store',
+  }
+
+  // 精灵图
+  disposers.push(ctx.webServer.register({
+    kind: 'exact',
+    path: '/dsh-pet-dom/miku.gif',
+    handler: (req, res) => {
+      try {
+        const bytes = loadSprite()
+        res.writeHead(200, {
+          'Content-Type': 'image/gif',
+          'Cache-Control': 'no-store',
+          'Content-Length': String(bytes.length),
+        })
+        res.end(bytes)
+      } catch (err) {
+        res.writeHead(404, { 'Content-Type': 'text/plain; charset=utf-8' })
+        res.end('sprite unavailable: ' + String((err && err.message) || err))
+      }
+    },
+  }))
+
+  // 客户端桌宠脚本（ESM：import brain.js / console.js；每次请求现读，开发期改代码刷新即生效）
+  disposers.push(ctx.webServer.register({
+    kind: 'exact',
+    path: '/dsh-pet-dom/mascot.js',
+    handler: (req, res) => {
+      try {
+        const src = fs.readFileSync(MASCOT_FILE, 'utf8')
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript; charset=utf-8',
+          'Cache-Control': 'no-store',
+        })
+        res.end(src)
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' })
+        res.end('mascot script unavailable: ' + String((err && err.message) || err))
+      }
+    },
+  }))
+
+  // 规划大脑模块（mascot.js 的 ESM 依赖；文件小，按请求现读，便于热改）
+  disposers.push(ctx.webServer.register({
+    kind: 'exact',
+    path: '/dsh-pet-dom/brain.js',
+    handler: (req, res) => {
+      try {
+        const src = fs.readFileSync(BRAIN_FILE, 'utf8')
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript; charset=utf-8',
+          'Cache-Control': 'no-store',
+        })
+        res.end(src)
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' })
+        res.end('brain script unavailable: ' + String((err && err.message) || err))
+      }
+    },
+  }))
+
+  // 控制台模块（mascot.js 的 ESM 依赖；按请求现读）
+  disposers.push(ctx.webServer.register({
+    kind: 'exact',
+    path: '/dsh-pet-dom/console.js',
+    handler: (req, res) => {
+      try {
+        const src = fs.readFileSync(CONSOLE_FILE, 'utf8')
+        res.writeHead(200, {
+          'Content-Type': 'application/javascript; charset=utf-8',
+          'Cache-Control': 'no-store',
+        })
+        res.end(src)
+      } catch (err) {
+        res.writeHead(500, { 'Content-Type': 'text/plain; charset=utf-8' })
+        res.end('console script unavailable: ' + String((err && err.message) || err))
+      }
+    },
+  }))
+
+  // 健康检查（可选，便于验证插件已挂载）
+  disposers.push(ctx.webServer.register({
+    kind: 'exact',
+    path: '/dsh-pet-dom/health.json',
+    handler: (req, res) => {
+      res.writeHead(200, JSON_HEADERS)
+      res.end(JSON.stringify({ ok: true, name, version: '2.0.0' }))
+    },
+  }))
+
+  // 把桌宠脚本注入 DSH Web 页面 </body>（ESM 模块：mascot.js 内部 import brain.js）
+  disposers.push(ctx.webServer.tapIndex((html) => {
+    if (html.indexOf('/dsh-pet-dom/mascot.js') !== -1) return html
+    const tag = '<script type="module" src="/dsh-pet-dom/mascot.js"></script>'
+    if (html.indexOf('</body>') !== -1) return html.replace('</body>', tag + '</body>')
+    return html + tag
+  }))
+
+  ctx.effect(() => () => {
+    for (const d of disposers) {
+      try { d() } catch (err) {}
+    }
+  })
+}
+
+export { name, inject, apply }