xiaoyuan-assistant 0.5.56 → 0.5.57

package/CHANGELOG.md

@@ -455,3 +455,10 @@ ls -lh /mnt/data/xiaoyuan-assistant-siliconflow-v0.5.29.zip
 - 去掉小园弹窗右上角除最小化之外的静音/停止播报入口，右上角仅保留收起按钮。
 - 升级收起状态的小园悬浮图标：增加呼吸光晕、扩散聆听波纹、轨道光点和动态音波，默认有轻微动效。
 - 当处于监听/处理状态时，收起图标自动加快波纹与音波动画，强化“正在聆听/工作中”的视觉反馈。
+
+
+## v0.5.57
+
+- 收起状态小园悬浮图标支持按住鼠标/触控拖拽到屏幕任意位置。
+- 松开后自动吸附到距离最近的左侧或右侧屏幕边界，保持当前垂直位置。
+- 拖拽过程禁用点击误触和过渡动画，提升大屏操作稳定性。

package/XIAOYUAN-BUSINESS-FLOW.md

@@ -1275,3 +1275,8 @@ AI 分析开始提示音与数据获取/模型分析并行；多个数据源采
 - 展开面板右上角仅保留“收起/最小化”按钮，不提供静音按钮。
 - 小园收起状态采用高级悬浮球视觉：中心徽记 + 呼吸光晕 + 多层扩散聆听波纹 + 环绕光点 + 动态音波。
 - 空闲状态使用轻量呼吸动画；监听/处理状态自动加速动画，提示用户小园正在聆听或处理。
+
+
+## v0.5.57｜收起态悬浮图标拖拽
+
+收起状态下，小园悬浮图标支持按住拖拽。用户可将图标移动到屏幕任意位置；松开鼠标或触控后，根据图标中心点距离自动吸附到最近的左侧或右侧边界，同时保持当前垂直位置。拖拽过程中不会触发打开小园的点击事件。

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xiaoyuan-assistant",
-  "version": "0.5.56",
+  "version": "0.5.57",
   "type": "module",
   "main": "./src/index.js",
   "module": "./src/index.js",

package/src/components/XiaoyuanAssistant.vue

@@ -3,10 +3,12 @@
     <button
       v-if="!expanded"
       class="xy-fab"
-      :class="stateClass"
+      :class="[stateClass, { 'xy-dragging': fabDragging }]"
       type="button"
       aria-label="打开小园"
-      @click="activate"
+      :style="fabStyle"
+      @pointerdown="onFabPointerDown"
+      @click="onFabClick"
     >
       <span class="xy-fab-glow"></span>
       <span class="xy-fab-ring ring-a"></span>
@@ -128,13 +130,22 @@ const runtime =
 // 如果宿主项目因为 HMR / 重复依赖导致当前模块暂时拿不到注入值，
 // 组件保持可挂载，并在 mounted 后再次尝试解析，避免整个页面崩溃。
 const safeRuntime = runtime || { manager: null, speech: null, options: {} }
-const XIAOYUAN_SDK_VERSION = '0.5.56'
+const XIAOYUAN_SDK_VERSION = '0.5.57'
 const { manager, speech, options } = safeRuntime
 
 const wakeWord = options.wakeWord || '你好小园'
 const autoCollapseMs = options.autoCollapseMs ?? 0
 
 const expanded = ref(false)
+const fabLeft = ref(null)
+const fabTop = ref(null)
+const fabDragging = ref(false)
+let fabPointerId = null
+let fabStartX = 0
+let fabStartY = 0
+let fabStartLeft = 0
+let fabStartTop = 0
+let fabMoved = false
 const listening = ref(false)
 const wakeListening = ref(false)
 const processing = ref(false)
@@ -150,6 +161,89 @@ let speechQueue = Promise.resolve()
 let speechQueueToken = 0
 let commandSessionId = 0
 
+const fabStyle = computed(() => {
+  if (fabLeft.value == null || fabTop.value == null) return undefined
+  return {
+    left: `${fabLeft.value}px`,
+    top: `${fabTop.value}px`,
+    right: 'auto'
+  }
+})
+
+function clampFab(left, top) {
+  const size = 66
+  const margin = 0
+  const maxLeft = Math.max(margin, window.innerWidth - size - margin)
+  const maxTop = Math.max(margin, window.innerHeight - size - margin)
+  return {
+    left: Math.min(Math.max(margin, left), maxLeft),
+    top: Math.min(Math.max(margin, top), maxTop)
+  }
+}
+
+function getFabRect() {
+  const el = document.querySelector('.xy-fab')
+  return el?.getBoundingClientRect?.() || null
+}
+
+function onFabPointerDown(event) {
+  if (expanded.value) return
+  if (event.button != null && event.button !== 0) return
+  const rect = getFabRect()
+  if (!rect) return
+  fabPointerId = event.pointerId
+  fabStartX = event.clientX
+  fabStartY = event.clientY
+  fabStartLeft = rect.left
+  fabStartTop = rect.top
+  fabMoved = false
+  fabDragging.value = true
+  try { event.currentTarget.setPointerCapture?.(event.pointerId) } catch (_) {}
+  window.addEventListener('pointermove', onFabPointerMove, { passive: false })
+  window.addEventListener('pointerup', onFabPointerUp, { passive: true })
+  window.addEventListener('pointercancel', onFabPointerUp, { passive: true })
+}
+
+function onFabPointerMove(event) {
+  if (!fabDragging.value || (fabPointerId != null && event.pointerId !== fabPointerId)) return
+  const dx = event.clientX - fabStartX
+  const dy = event.clientY - fabStartY
+  if (!fabMoved && Math.hypot(dx, dy) < 4) return
+  fabMoved = true
+  event.preventDefault?.()
+  const next = clampFab(fabStartLeft + dx, fabStartTop + dy)
+  fabLeft.value = next.left
+  fabTop.value = next.top
+}
+
+function onFabPointerUp(event) {
+  if (!fabDragging.value || (fabPointerId != null && event.pointerId !== fabPointerId)) return
+  const rect = getFabRect()
+  const width = 66
+  if (rect) {
+    const viewportMid = window.innerWidth / 2
+    const snappedLeft = rect.left + rect.width / 2 <= viewportMid ? 0 : Math.max(0, window.innerWidth - width)
+    const next = clampFab(snappedLeft, rect.top)
+    fabLeft.value = next.left
+    fabTop.value = next.top
+  }
+  fabDragging.value = false
+  fabPointerId = null
+  window.removeEventListener('pointermove', onFabPointerMove)
+  window.removeEventListener('pointerup', onFabPointerUp)
+  window.removeEventListener('pointercancel', onFabPointerUp)
+}
+
+function onFabClick(event) {
+  if (fabMoved) {
+    event.preventDefault()
+    event.stopPropagation()
+    fabMoved = false
+    return
+  }
+  activate()
+}
+
 const state = computed(() => {
   if (processing.value) return 'processing'
   if (listening.value) return 'listening'
@@ -588,6 +682,9 @@ onMounted(() => {
 })
 
 onBeforeUnmount(() => {
+  window.removeEventListener('pointermove', onFabPointerMove)
+  window.removeEventListener('pointerup', onFabPointerUp)
+  window.removeEventListener('pointercancel', onFabPointerUp)
   wakeController?.stop?.()
   speech?.stopSpeaking?.()
   window.clearTimeout(collapseTimer)

package/src/styles/index.css

@@ -22,7 +22,9 @@
 .xy-root textarea { font: inherit; }
 
 .xy-fab {
-  position: relative;
+  position: fixed;
+  top: 22px;
+  right: 22px;
   width: 66px;
   height: 66px;
   border: 1px solid rgba(255,255,255,.24);
@@ -48,6 +50,20 @@
   filter: saturate(1.08);
 }
 .xy-fab:active { transform: translateY(-1px) scale(.985); }
+.xy-fab.xy-dragging {
+  cursor: grabbing;
+  user-select: none;
+  transition: none;
+  transform: scale(1.02);
+  box-shadow:
+    0 20px 54px rgba(41,31,127,.56),
+    0 0 0 1px rgba(255,255,255,.12) inset,
+    0 0 44px rgba(109,93,252,.40);
+}
+.xy-fab {
+  touch-action: none;
+  user-select: none;
+}
 .xy-fab-glow {
   position: absolute;
   inset: -18px;
@@ -271,6 +287,7 @@
 
 @media (max-width: 720px) {
   .xy-root { top: 12px; right: 12px; }
+  .xy-fab { top: 12px; right: 12px; }
   .xy-panel { width: calc(100vw - 24px); height: calc(100vh - 24px); min-height: 0; border-radius: 18px; }
 }