xiaoyuan-assistant 0.5.57 → 0.5.58

package/CHANGELOG.md

@@ -462,3 +462,9 @@ ls -lh /mnt/data/xiaoyuan-assistant-siliconflow-v0.5.29.zip
 - 收起状态小园悬浮图标支持按住鼠标/触控拖拽到屏幕任意位置。
 - 松开后自动吸附到距离最近的左侧或右侧屏幕边界，保持当前垂直位置。
 - 拖拽过程禁用点击误触和过渡动画，提升大屏操作稳定性。
+
+## v0.5.58
+- 收起状态拖拽后左右吸附固定保持 50px 边距。
+- 取消拖拽结束后的焦点黑框/系统焦点外观。
+- 展开面板跟随当前小园图标的位置与左右侧关系定位，不再固定在原始右上角。
+

package/XIAOYUAN-BUSINESS-FLOW.md

@@ -1280,3 +1280,8 @@ AI 分析开始提示音与数据获取/模型分析并行；多个数据源采
 ## v0.5.57｜收起态悬浮图标拖拽
 
 收起状态下，小园悬浮图标支持按住拖拽。用户可将图标移动到屏幕任意位置；松开鼠标或触控后，根据图标中心点距离自动吸附到最近的左侧或右侧边界，同时保持当前垂直位置。拖拽过程中不会触发打开小园的点击事件。
+
+## v0.5.58
+- 收起图标支持拖拽后吸附：无论左侧还是右侧，距离屏幕边界固定 50px。
+- 拖拽结束主动移除按钮焦点，避免出现黑色焦点框。
+- 打开小园时，面板根据当前图标的 left/top 与左右侧位置动态定位，保证弹窗与小园当前位置一致。

package/package.json

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

package/src/components/XiaoyuanAssistant.vue

@@ -27,7 +27,7 @@
     </button>
 
     <transition name="xy-pop">
-      <section v-if="expanded" class="xy-panel" aria-label="小园智能助手">
+      <section v-if="expanded" class="xy-panel" :style="panelStyle" aria-label="小园智能助手">
         <header class="xy-header">
           <div class="xy-title-wrap">
             <div class="xy-avatar small">园</div>
@@ -130,7 +130,7 @@ const runtime =
 // 如果宿主项目因为 HMR / 重复依赖导致当前模块暂时拿不到注入值，
 // 组件保持可挂载，并在 mounted 后再次尝试解析，避免整个页面崩溃。
 const safeRuntime = runtime || { manager: null, speech: null, options: {} }
-const XIAOYUAN_SDK_VERSION = '0.5.57'
+const XIAOYUAN_SDK_VERSION = '0.5.58'
 const { manager, speech, options } = safeRuntime
 
 const wakeWord = options.wakeWord || '你好小园'
@@ -170,9 +170,29 @@ const fabStyle = computed(() => {
   }
 })
 
+const panelStyle = computed(() => {
+  if (fabLeft.value == null || fabTop.value == null) return undefined
+  const fabSize = 66
+  const panelWidth = Math.min(430, Math.max(280, window.innerWidth - 28))
+  const distanceFromRight = Math.max(0, window.innerWidth - (fabLeft.value + fabSize))
+  const top = Math.max(8, Math.min(fabTop.value, Math.max(8, window.innerHeight - Math.min(680, window.innerHeight - 24))))
+  if (fabLeft.value + fabSize / 2 >= window.innerWidth / 2) {
+    return {
+      right: `${Math.max(14, distanceFromRight)}px`,
+      left: 'auto',
+      top: `${top}px`
+    }
+  }
+  return {
+    left: `${Math.max(14, fabLeft.value)}px`,
+    right: 'auto',
+    top: `${top}px`
+  }
+})
+
 function clampFab(left, top) {
   const size = 66
-  const margin = 0
+  const margin = 50
   const maxLeft = Math.max(margin, window.innerWidth - size - margin)
   const maxTop = Math.max(margin, window.innerHeight - size - margin)
   return {
@@ -222,13 +242,14 @@ function onFabPointerUp(event) {
   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 snappedLeft = rect.left + rect.width / 2 <= viewportMid ? 50 : Math.max(50, window.innerWidth - width - 50)
     const next = clampFab(snappedLeft, rect.top)
     fabLeft.value = next.left
     fabTop.value = next.top
   }
   fabDragging.value = false
   fabPointerId = null
+  try { document.activeElement?.blur?.() } catch (_) {}
   window.removeEventListener('pointermove', onFabPointerMove)
   window.removeEventListener('pointerup', onFabPointerUp)
   window.removeEventListener('pointercancel', onFabPointerUp)

package/src/styles/index.css

@@ -39,6 +39,8 @@
     0 0 0 1px rgba(255,255,255,.06) inset,
     0 0 32px rgba(109,93,252,.24);
   transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, filter .22s ease;
+  outline: none;
+  -webkit-tap-highlight-color: transparent;
   isolation: isolate;
 }
 .xy-fab:hover {
@@ -50,6 +52,7 @@
   filter: saturate(1.08);
 }
 .xy-fab:active { transform: translateY(-1px) scale(.985); }
+.xy-fab:focus, .xy-fab:focus-visible { outline: none; box-shadow: 0 18px 44px rgba(41,31,127,.44), 0 0 0 1px rgba(255,255,255,.06) inset, 0 0 32px rgba(109,93,252,.24); }
 .xy-fab.xy-dragging {
   cursor: grabbing;
   user-select: none;
@@ -168,10 +171,11 @@
 @keyframes xy-live-pulse { 0%,100% { transform: scale(.85); } 50% { transform: scale(1.15); } }
 
 .xy-panel {
-  position: relative;
+  position: fixed;
   width: min(430px, calc(100vw - 28px));
   height: min(680px, calc(100vh - 44px));
   min-height: 500px;
+  z-index: 2;
   background: linear-gradient(180deg, rgba(17,24,47,.985), rgba(8,13,29,.99));
   border: 1px solid var(--xy-border-strong);
   border-radius: 22px;