@lrplrplrp/dsh-live2d 0.1.1 → 0.1.3

package/assets/model_list.json

@@ -6,8 +6,8 @@
       "canvasWidth": 300,
       "canvasHeight": 400,
       "config": {
-        "x": -50,
-        "y": 100,
+        "x": 0,
+        "y": 0,
         "scaleX": 2,
         "scaleY": 2
       },

package/cordis.patch.yml

@@ -7,5 +7,5 @@
 #   pnpm dsh plugin --profile web add link:./dsh-live2d
 
 - insert:
-    - id: dsh-live2d
-      name: 'dsh-live2d'
+    - id: '@lrplrplrp/dsh-live2d'
+      name: '@lrplrplrp/dsh-live2d'

package/lib/client.js

@@ -11,7 +11,7 @@
 //
 // 移除了原项目的：对话框、小飞机游戏、关闭/关于/GitHub 按钮。
 
-window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
+window.__ModuleLoader__.load({ id: '@lrplrplrp/dsh-live2d', factory: (require) => {
   var module = { exports: {} }
   var exports = module.exports
 
@@ -27,6 +27,9 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
   const POSITION_KEY = 'dsh-live2d.position'
   const ACTIVE_MODEL_KEY = 'dsh-live2d.activeModel'
 
+  // 容器默认屏幕位置（无本地存档时使用），对应 position:fixed 的 left/top
+  const DEFAULT_POSITION = { x: 1240, y: 330 }
+
   // 本地文件路由前缀（由 host 端 index.js 注册）
   const LIB_BASE = '/plugins/dsh-live2d/lib/'
   const ASSETS_BASE = '/plugins/dsh-live2d/assets/'
@@ -69,13 +72,13 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       url: ASSETS_BASE + 'deepseek_l2d/deepseek.model3.json',
       canvasWidth: 300,
       canvasHeight: 400,
-      config: { x: -50, y: 100, scaleX: 2, scaleY: 2 },
+      config: { x: 0, y: 0, scaleX: 1.5, scaleY: 1.5 },
       animations: {
         IDLE: { motion: { group: 'Idle', index: 0 }, loop: false },
-        THINKING: { motion: { group: 'Anima', index: 2 }, loop: false },
+        THINKING: { motion: { group: 'Anima', index: 2 }, loop: true },
         THINK_END: { motion: { group: 'Anima', index: 1 }, loop: false },
-        WORKING: { motion: { group: 'Anima', index: 0 }, loop: false },
-        SPEAKING: { motion: { group: 'Anima', index: 0 }, loop: false },
+        WORKING: { expression: 'puzzled' },
+        SPEAKING: { motion: { group: 'Anima', index: 0 }, loop: true },
         SUCCESS: { expression: 'happy' },
         ERROR: { expression: 'unhappy' },
       },
@@ -204,8 +207,9 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
   const LIVE2D_CSS = [
     '#dsh-live2d-container {',
     '  position: fixed;',
-    '  bottom: 0;',
-    '  left: 0;',
+    '  top: 330px;',
+    '  left: 1240px;',
+    '  bottom: auto;',
     '  z-index: 9999;',
     // 容器本身不拦截指针事件，画布区域点击完全穿透到页面，不影响输入；
     // 只有拖拽图标与画布大小手柄单独开启 pointer-events。
@@ -243,52 +247,48 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
     '#dsh-live2d-container:hover .dsh-live2d-label {',
     '  opacity: 1;',
     '}',
-    // 画布大小拖拽手柄：平时隐藏，鼠标悬停画布（容器）时在右下角出现，与移动图标重叠
-    '#dsh-live2d-container .dsh-live2d-resize {',
-    '  position: absolute;',
-    '  right: 4px;',
-    '  bottom: 4px;',
-    '  width: 14px;',
-    '  height: 14px;',
+    // 控制浮层：固定定位，位置由 JS 动态计算——理想位置是画布右下角，
+    // 但会被夹在视口内（画布拖出屏幕时，图标停在离画布右下角最近的屏幕边缘）。
+    // 浮层本身不拦截指针（pointer-events:none），只有里面的图标可点。
+    '#dsh-live2d-controls {',
+    '  position: fixed;',
+    '  z-index: 10000;',
+    '  display: flex;',
+    '  align-items: center;',
+    '  gap: 8px;',
+    '  pointer-events: none;',
+    '}',
+    // 画布大小拖拽手柄：常驻右下角浮层，与移动图标并排
+    '#dsh-live2d-controls .dsh-live2d-resize {',
+    '  width: 16px;',
+    '  height: 16px;',
     '  border-right: 2px solid rgba(96,165,250,0.9);',
     '  border-bottom: 2px solid rgba(96,165,250,0.9);',
     '  cursor: nwse-resize;',
-    '  opacity: 0;',
-    '  transition: opacity 0.2s;',
+    '  opacity: 0.7;',
     '  pointer-events: auto;',
-    '  z-index: 1;',
-    '}',
-    '#dsh-live2d-container.hovering .dsh-live2d-resize {',
-    '  opacity: 0.9;',
+    '  flex: none;',
     '}',
-    // 拖拽移动图标：平时隐藏，鼠标悬停画布（容器）时出现，与画布大小手柄重叠显示在上方
-    '#dsh-live2d-container .dsh-live2d-drag {',
-    '  position: absolute;',
-    '  right: 9px;',
-    '  bottom: 9px;',
-    '  width: 22px;',
-    '  height: 22px;',
+    // 拖拽移动图标：常驻右下角浮层
+    '#dsh-live2d-controls .dsh-live2d-drag {',
+    '  width: 26px;',
+    '  height: 26px;',
     '  display: flex;',
     '  align-items: center;',
     '  justify-content: center;',
     '  border-radius: 6px;',
-    '  background: rgba(31,41,55,0.65);',
-    '  color: rgba(226,232,240,0.9);',
-    '  font-size: 14px;',
+    '  background: rgba(31,41,55,0.75);',
+    '  color: rgba(226,232,240,0.95);',
+    '  font-size: 15px;',
     '  line-height: 1;',
     '  cursor: grab;',
     '  user-select: none;',
     '  pointer-events: auto;',
-    '  opacity: 0;',
-    '  transition: opacity 0.2s;',
-    '  z-index: 2;',
-    '}',
-    '#dsh-live2d-container.hovering .dsh-live2d-drag {',
-    '  opacity: 0.9;',
+    '  opacity: 0.85;',
+    '  flex: none;',
     '}',
-    '#dsh-live2d-container.dragging .dsh-live2d-drag {',
+    '#dsh-live2d-controls .dsh-live2d-drag:active {',
     '  cursor: grabbing;',
-    '  opacity: 0.9;',
     '}',
   ].join('\n')
 
@@ -691,17 +691,38 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
    * 会优先满足 bottom，拖动看起来"完全没反应"。
    */
   function place(containerEl, x, y) {
-    // 容器是 position:fixed，left/top 相对视口；因此钳制也必须用视口尺寸，
-    // 不能用 offsetWidth/offsetHeight（offsetParent 是 overlay 层，原点未必是视口 0,0）。
-    const rect = containerEl.getBoundingClientRect()
-    const maxX = Math.max(0, window.innerWidth - rect.width)
-    const maxY = Math.max(0, window.innerHeight - rect.height)
-    containerEl.style.left = Math.min(Math.max(x, 0), maxX) + 'px'
-    containerEl.style.top = Math.min(Math.max(y, 0), maxY) + 'px'
+    // 画布可自由定位（允许拖出屏幕），仅写入 left/top；bottom 必须置 auto，
+    // 否则 left/top 与 bottom 同时生效时浏览器优先满足 bottom，拖动无反应。
+    containerEl.style.left = x + 'px'
+    containerEl.style.top = y + 'px'
     containerEl.style.bottom = 'auto'
   }
 
-  function setupDrag(handleEl, containerEl) {
+  // 控制浮层跟随画布右下角：clamp=true 时被夹在视口内（画布在屏幕内时图标贴
+  // 画布右下角；画布拖出屏幕时图标停在最近屏幕边缘）；clamp=false 时不夹边，
+  // 用于拖动画布大小手柄的过程中——否则手柄会被夹在视口底边，鼠标越过后即
+  // 收不到 pointermove，表现为"向下拖不动"。
+  function updateControls(containerEl, controlsEl, clamp = true) {
+    if (!containerEl || !controlsEl) return
+    const cr = containerEl.getBoundingClientRect()
+    const cs = controlsEl.getBoundingClientRect()
+    const w = cs.width || 60
+    const h = cs.height || 34
+    const OFFSET = 4 // 图标相对画布右下角内缩一点
+    const MARGIN = 4 // 离屏幕边缘的最小间距
+    let x = cr.right - w - OFFSET
+    let y = cr.bottom - h - OFFSET
+    if (clamp) {
+      x = Math.min(Math.max(x, MARGIN), window.innerWidth - w - MARGIN)
+      y = Math.min(Math.max(y, MARGIN), window.innerHeight - h - MARGIN)
+    }
+    controlsEl.style.left = x + 'px'
+    controlsEl.style.top = y + 'px'
+    controlsEl.style.right = 'auto'
+    controlsEl.style.bottom = 'auto'
+  }
+
+  function setupDrag(handleEl, containerEl, controlsEl) {
     let pointerId = null
     let startX = 0
     let startY = 0
@@ -715,6 +736,9 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
     const saved = getPosition()
     if (saved && Number.isFinite(saved.x) && Number.isFinite(saved.y)) {
       place(containerEl, saved.x, saved.y)
+    } else {
+      // 无本地存档时使用默认位置
+      place(containerEl, DEFAULT_POSITION.x, DEFAULT_POSITION.y)
     }
 
     const finish = () => {
@@ -756,6 +780,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       curX = origX + (e.clientX - startX)
       curY = origY + (e.clientY - startY)
       place(containerEl, curX, curY)
+      updateControls(containerEl, controlsEl)
       e.preventDefault()
     }
 
@@ -855,6 +880,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
   function Live2DWidget() {
     const containerRef = useRef(null)
     const dragHandleRef = useRef(null)
+    const controlsRef = useRef(null)
     const engineRef = useRef(null)
     const cleanupDragRef = useRef(null)
     const lastStateRef = useRef(DSHState.IDLE)
@@ -887,28 +913,19 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       engine.init(containerRef.current).then((ok) => {
         if (ok) {
           engine.playAnimation('IDLE')
+          updateControls(containerRef.current, controlsRef.current)
         }
       })
 
-      cleanupDragRef.current = setupDrag(dragHandleRef.current, containerRef.current)
+      cleanupDragRef.current = setupDrag(dragHandleRef.current, containerRef.current, controlsRef.current)
 
-      // 悬停探测：容器 pointer-events:none 导致 CSS :hover 只在子元素上触发，
-      // 这里用 window 级 mousemove 判断指针是否落在画布矩形内，动态切换 hovering 类，
-      // 实现"鼠标在画布上时显示两个手柄"，同时画布本身不拦截输入。
-      const onMouseMove = (e) => {
-        const el = containerRef.current
-        if (!el) return
-        const rect = el.getBoundingClientRect()
-        const inside = e.clientX >= rect.left && e.clientX <= rect.right &&
-          e.clientY >= rect.top && e.clientY <= rect.bottom
-        if (inside) el.classList.add('hovering')
-        else el.classList.remove('hovering')
-      }
-      window.addEventListener('mousemove', onMouseMove)
+      // 窗口尺寸变化时把图标夹回视口内（画布可能因此相对移出屏幕）
+      const onResize = () => updateControls(containerRef.current, controlsRef.current)
+      window.addEventListener('resize', onResize)
 
       return () => {
         cleanupDragRef.current?.()
-        window.removeEventListener('mousemove', onMouseMove)
+        window.removeEventListener('resize', onResize)
         engine.destroy()
       }
     }, [])
@@ -941,6 +958,7 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       if (!engine || !engine.ready) return
       const factor = e.deltaY < 0 ? 1.08 : 1 / 1.08
       engine.zoomBy(factor)
+      updateControls(containerRef.current, controlsRef.current)
     }, [])
 
     // 画布大小手柄：拖动右下角改变 canvasWidth/canvasHeight
@@ -953,20 +971,27 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
 
       const startX = e.clientX
       const startY = e.clientY
-      const rect = containerEl.getBoundingClientRect()
-      const startW = rect.width
-      const startH = rect.height
+      // 起点尺寸必须取 canvas 自身（CSS 像素），不能取 container 的
+      // getBoundingClientRect()：container 是 pointer-events:none 且内含一个
+      // position:fixed 的控制浮层，某些布局下其 rect 高度会塌缩为 0 / 与画布
+      // 不一致，导致 startH 错乱、向下拖时 h 计算异常、画布大小"拖不动"。
+      const canvasEl = engine.canvas
+      const startW = canvasEl ? canvasEl.offsetWidth : containerEl.getBoundingClientRect().width
+      const startH = canvasEl ? canvasEl.offsetHeight : containerEl.getBoundingClientRect().height
       const pointerId = e.pointerId
 
-      try { e.target.setPointerCapture(pointerId) } catch {}
+      try { e.currentTarget.setPointerCapture(pointerId) } catch {}
 
       const move = (ev) => {
         if (ev.pointerId !== pointerId) return
         const dw = ev.clientX - startX
         const dh = ev.clientY - startY
+        // 拖动过程中不夹边（clamp=false）：手柄自由跟随画布右下角，向下拖
+        // 时不会被夹在视口底边、鼠标越过后收不到 pointermove 而"拖不动"。
         const w = Math.min(800, Math.max(100, startW + dw))
         const h = Math.min(800, Math.max(100, startH + dh))
         engine.setCanvasSize(w, h)
+        updateControls(containerEl, controlsRef.current, false)
       }
       const up = (ev) => {
         if (ev.pointerId !== pointerId) return
@@ -974,6 +999,8 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
         window.removeEventListener('pointermove', move)
         window.removeEventListener('pointerup', up)
         window.removeEventListener('pointercancel', up)
+        // 松手后把图标夹回视口内（静止状态始终留在网页可见区域）。
+        updateControls(containerEl, controlsRef.current, true)
       }
       window.addEventListener('pointermove', move)
       window.addEventListener('pointerup', up)
@@ -985,18 +1012,25 @@ window.__ModuleLoader__.load({ id: 'dsh-live2d', factory: (require) => {
       id: 'dsh-live2d-container',
       onWheel: onWheel,
     },
-      // 右下角拖拽移动图标：只有拖动它才能移动整个看板娘，画布本身不再拦截输入
-      h('div', {
-        ref: dragHandleRef,
-        className: 'dsh-live2d-drag',
-        title: '拖动移动看板娘；鼠标滚轮缩放模型大小',
-      }, '✥'),
-      // 画布大小手柄：仅鼠标悬停画布（容器）时显示
+      // 控制浮层：固定钉在视口右下角，独立于画布。画布可以拖出屏幕，
+      // 但这两个图标始终留在页面内可见可点。
       h('div', {
-        className: 'dsh-live2d-resize',
-        title: '拖动改变画布大小',
-        onPointerDown: onResizePointerDown,
-      }),
+        ref: controlsRef,
+        id: 'dsh-live2d-controls',
+      },
+        // 画布大小手柄
+        h('div', {
+          className: 'dsh-live2d-resize',
+          title: '拖动改变画布大小',
+          onPointerDown: onResizePointerDown,
+        }),
+        // 拖拽移动图标：只有拖动它才能移动整个看板娘
+        h('div', {
+          ref: dragHandleRef,
+          className: 'dsh-live2d-drag',
+          title: '拖动移动看板娘；鼠标滚轮缩放模型大小',
+        }, '✥'),
+      ),
     )
   }
 

package/lib/index.js

@@ -37,7 +37,7 @@ const PLUGIN_ROOT = resolvedDir ? join(resolvedDir, '..') : null
 const LIB_DIR = PLUGIN_ROOT ? join(PLUGIN_ROOT, 'lib') : null
 const ASSETS_DIR = PLUGIN_ROOT ? join(PLUGIN_ROOT, 'assets') : null
 
-export const name = 'dsh-live2d'
+export const name = '@lrplrplrp/dsh-live2d'
 
 const STATE_ENDPOINT = '/plugins/dsh-live2d/state'
 const CONFIG_ENDPOINT = '/plugins/dsh-live2d/config'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lrplrplrp/dsh-live2d",
-  "version": "0.1.1",
+  "version": "0.1.3",
   "description": "Live2D 看板娘插件 for DeepSeek Harness — 可拖动的 Live2D 模型，支持 DSH 状态驱动动画、本地模型导入和完整配置页。",
   "type": "module",
   "main": "lib/index.js",