virtual-human-cf 1.0.4 → 1.0.6

package/README.md

@@ -113,11 +113,20 @@ const onEnded = () => {
 | 事件名 | 说明 | 回调参数 |
 |--------|------|----------|
 | connected | WebSocket 连接成功 | - |
-| highlight | 高亮大屏某区域 | 载荷数据 |
-| showDialog | 显示弹窗 | 载荷数据 |
+| eventNotifaction | 自定义事件接收器 | 载荷数据: {
+  
+    "type": "send_event",
+    // 自定义事件名称
+    "event": "heightlight",
+    // 自定义事件参数
+    "params": {
+        "domid": "wrap-1"
+    }
+} |
 | end | 数字人对话结束 | 载荷数据 |
 | pause | 暂停播放 | 载荷数据 |
 | error | 错误事件 | 错误信息 |
+| playComplete | 播放完成，数字人对话结束，关闭数字人 | - |
 
 #### 示例
 
@@ -127,8 +136,8 @@ const onEnded = () => {
     :screen-client-id="clientId"
     :ws-url="websocketUrl"
     @connected="onConnected"
-    @highlight="onHighlight"
-    @showDialog="onShowDialog"
+    @eventNotifaction="onEventNotifaction"
+    @playComplete="onPlayComplete"
     @end="onEnd"
     @error="onError"
   >
@@ -146,12 +155,12 @@ const onConnected = () => {
   console.log('WebSocket 连接成功');
 };
 
-const onHighlight = (payload) => {
-  console.log('高亮事件:', payload);
+const onEventNotifaction = (payload) => {
+  console.log('自定义事件接收:', payload);
 };
 
-const onShowDialog = (payload) => {
-  console.log('显示弹窗:', payload);
+const onPlayComplete = () => {
+  console.log('播放完成');
 };
 
 const onEnd = (payload) => {
@@ -173,23 +182,25 @@ const onError = (error) => {
   <div class="container">
     <VirtualHumanPersona
       :video-src="videoUrl"
+      :visible="personaVisible"
       :is-playing="isPlaying"
       :muted="true"
       :is-dark="isDarkMode"
-      :screen-client-id="clientId"
+      :screen-client-id="activeScreenClientId"
       :ws-url="websocketUrl"
-      @update:isPlaying="(val) => isPlaying = val"
+      @update:isPlaying="onPersonaPlayingUpdate"
+      @update:visible="onPersonaVisibleUpdate"
       @ended="onVideoEnded"
     />
     
     <VirtualHumanEventAdapter
-      :screen-client-id="clientId"
+      :screen-client-id="activeScreenClientId"
       :ws-url="websocketUrl"
       @connected="onConnected"
-      @highlight="onHighlight"
-      @showDialog="onShowDialog"
+      @eventNotifaction="onEventNotifaction"
       @end="onEnd"
       @error="onError"
+      @playComplete="onPlayComplete"
     />
   </div>
 </template>
@@ -201,7 +212,8 @@ import { VirtualHumanPersona, VirtualHumanEventAdapter } from 'virtual-human-cf'
 const videoUrl = ref('/path/to/digital-human-video.mp4');
 const isPlaying = ref(false);
 const isDarkMode = ref(false);
-const clientId = ref('screen-123');
+const personaVisible = ref(true);
+const activeScreenClientId = ref('screen-123');
 const websocketUrl = ref('ws://localhost:8080/ws');
 
 const onConnected = () => {
@@ -212,19 +224,22 @@ const onVideoEnded = () => {
   console.log('视频播放结束');
 };
 
-const onHighlight = (payload) => {
-  console.log('收到高亮指令:', payload);
-};
-
-const onShowDialog = (payload) => {
-  console.log('显示对话框:', payload);
-};
 
 const onEnd = (payload) => {
   console.log('数字人交互结束:', payload);
   isPlaying.value = false;
 };
 
+const onEventNotifaction = (payload) => {
+  console.log('自定义事件接收:', payload);
+};
+
+const onPlayComplete = () => {
+  console.log('播放完成');
+  // 关闭数字人
+  personaVisible.value = false;
+}
+
 const onError = (error) => {
   console.error('发生错误:', error);
 };

package/dist/components/VirtualHumanEventAdapter.vue.d.ts

@@ -13,10 +13,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     error: (...args: any[]) => void;
     pause: (...args: any[]) => void;
-    highlight: (...args: any[]) => void;
-    showDialog: (...args: any[]) => void;
+    eventNotifaction: (...args: any[]) => void;
     end: (...args: any[]) => void;
     connected: (...args: any[]) => void;
+    playComplete: (...args: any[]) => void;
 }, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     screenClientId: {
         type: StringConstructor;
@@ -29,10 +29,10 @@ declare const __VLS_component: import('vue').DefineComponent<import('vue').Extra
 }>> & Readonly<{
     onError?: ((...args: any[]) => any) | undefined;
     onPause?: ((...args: any[]) => any) | undefined;
-    onHighlight?: ((...args: any[]) => any) | undefined;
-    onShowDialog?: ((...args: any[]) => any) | undefined;
+    onEventNotifaction?: ((...args: any[]) => any) | undefined;
     onEnd?: ((...args: any[]) => any) | undefined;
     onConnected?: ((...args: any[]) => any) | undefined;
+    onPlayComplete?: ((...args: any[]) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
 export default _default;

package/dist/style.css

@@ -1 +1 @@
-.fade-enter-active[data-v-19d39d2e],.fade-leave-active[data-v-19d39d2e]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-19d39d2e],.fade-leave-to[data-v-19d39d2e]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-19d39d2e]{position:fixed;left:16px;bottom:16px;width:400px;height:500px;z-index:2147483647;overflow:visible}.video-wrapper[data-v-19d39d2e]{position:relative;width:400px;height:500px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease,box-shadow .3s ease}.virtual-human-container.is-dark .video-wrapper[data-v-19d39d2e]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-19d39d2e]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-19d39d2e]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-19d39d2e]{opacity:1}.resize-handle[data-v-19d39d2e]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-19d39d2e]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-19d39d2e]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-19d39d2e]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-19d39d2e]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-19d39d2e]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-19d39d2e]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-19d39d2e]{background:#ef4444cc}.status-badge.playing[data-v-19d39d2e]{background:#22c55ecc}.dot[data-v-19d39d2e]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-19d39d2e{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-19d39d2e]{animation:pulse-19d39d2e 2s cubic-bezier(.4,0,.6,1) infinite}
+.fade-enter-active[data-v-6c9e435e],.fade-leave-active[data-v-6c9e435e]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-6c9e435e],.fade-leave-to[data-v-6c9e435e]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-6c9e435e]{position:fixed;z-index:2147483647;overflow:visible}.video-wrapper[data-v-6c9e435e]{position:relative;width:100%;height:100%;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;border:2px solid transparent;transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease}.video-wrapper[data-v-6c9e435e]:hover{border-color:#409eff}.virtual-human-container.is-dark .video-wrapper[data-v-6c9e435e]{background:#1f2937;box-shadow:0 10px 25px #00000080}.persona-video[data-v-6c9e435e]{width:100%;height:100%;object-fit:cover;transform-origin:center;transition:transform .1s ease-out}.resize-handle[data-v-6c9e435e]{position:absolute;width:20px;height:20px;background:#00000080;border:2px solid rgba(255,255,255,.8);border-radius:4px;cursor:pointer;z-index:20;opacity:0;pointer-events:none;transition:opacity .3s ease,background .2s,border-color .2s}.video-wrapper:hover .resize-handle[data-v-6c9e435e]{opacity:1;pointer-events:auto}.resize-handle[data-v-6c9e435e]:hover{background:#000000b3;border-color:#fff}.resize-handle.top-left[data-v-6c9e435e]{top:10px;left:10px;cursor:nwse-resize}.resize-handle.top-right[data-v-6c9e435e]{top:10px;right:10px;cursor:nesw-resize}.resize-handle.bottom-left[data-v-6c9e435e]{bottom:10px;left:10px;cursor:nesw-resize}.resize-handle.bottom-right[data-v-6c9e435e]{bottom:10px;right:10px;cursor:nwse-resize}.overlay[data-v-6c9e435e]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-6c9e435e]{display:flex;align-items:center;gap:.5rem;padding:.25rem .75rem;border-radius:9999px;font-size:.75rem;font-weight:500;color:#fff;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.status-badge.paused[data-v-6c9e435e]{background:#ef4444cc}.status-badge.playing[data-v-6c9e435e]{background:#22c55ecc}.dot[data-v-6c9e435e]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-6c9e435e{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-6c9e435e]{animation:pulse-6c9e435e 2s cubic-bezier(.4,0,.6,1) infinite}

package/dist/virtual-human-cf.es.js

@@ -1,11 +1,11 @@
-import { defineComponent as T, ref as v, watch as z, onMounted as W, onUnmounted as X, openBlock as h, createBlock as D, Transition as F, withCtx as q, createElementBlock as b, normalizeClass as N, createElementVNode as H, normalizeStyle as O, createCommentVNode as I, createTextVNode as L, renderSlot as J } from "vue";
-const j = ["src", "muted"], G = { class: "overlay" }, K = {
+import { defineComponent as j, ref as v, watch as X, onMounted as G, onUnmounted as K, openBlock as S, createBlock as Q, Transition as Z, withCtx as _, createElementBlock as E, normalizeStyle as ee, normalizeClass as te, createElementVNode as R, createCommentVNode as T, createTextVNode as J, renderSlot as ne } from "vue";
+const ae = ["src", "muted"], se = { class: "overlay" }, le = {
   key: 0,
   class: "status-badge paused"
-}, Q = {
+}, oe = {
   key: 1,
   class: "status-badge playing"
-}, Z = /* @__PURE__ */ T({
+}, re = /* @__PURE__ */ j({
   __name: "VirtualHumanPersona",
   props: {
     // 视频源URL
@@ -46,131 +46,138 @@ const j = ["src", "muted"], G = { class: "overlay" }, K = {
     }
   },
   emits: ["update:isPlaying", "ended", "update:visible"],
-  setup(i, { emit: P }) {
-    const t = i, s = P, l = v(null), k = v(null), n = v(null), m = v(!1), V = v(1), E = v(!1), p = v(null), C = v(0), x = v(0), o = v(1), u = () => {
+  setup(c, { emit: W }) {
+    const t = c, i = W, r = v(null), Y = v(null), n = v(null), p = v(!1), y = v(400), g = v(500), w = v(16), z = v(16), I = v(!1), h = v(null), M = v(0), A = v(0), k = v(0), s = v(0), l = v(0), u = v(0), b = () => {
       if (n.value && n.value.close(), !(!t.wsUrl || !t.screenClientId))
         try {
-          const r = new URL(t.wsUrl);
-          r.searchParams.append("sessionId", t.screenClientId + "-persona"), n.value = new WebSocket(r.toString()), n.value.onopen = () => {
-            m.value = !0, console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`);
+          const o = new URL(t.wsUrl);
+          o.searchParams.append("sessionId", t.screenClientId + "-persona"), n.value = new WebSocket(o.toString()), n.value.onopen = () => {
+            p.value = !0, console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`);
           }, n.value.onmessage = (e) => {
             try {
               const a = JSON.parse(e.data);
-              c(a);
+              C(a);
             } catch (a) {
               console.error("[VirtualHumanPersona] Failed to parse message:", e.data, a);
             }
           }, n.value.onerror = (e) => {
             console.error("[VirtualHumanPersona] WebSocket error:", e);
           }, n.value.onclose = () => {
-            m.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+            p.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
           };
-        } catch (r) {
-          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", r);
+        } catch (o) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", o);
         }
-    }, c = (r) => {
-      const { type: e, action: a } = r;
-      e === "control" && (a === "play" || a === "resume" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? s("update:isPlaying", !1) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), l.value && (l.value.currentTime = 0)));
+    }, C = (o) => {
+      const { type: e, action: a } = o;
+      e === "control" && (a === "play" || a === "resume" ? (i("update:isPlaying", !0), i("update:visible", !0)) : a === "pause" ? i("update:isPlaying", !1) : a === "stop" && (i("update:isPlaying", !1), i("update:visible", !1), r.value && (r.value.currentTime = 0)));
     };
-    z(() => t.screenClientId, () => {
-      t.screenClientId && t.wsUrl && u();
-    }), z(() => t.wsUrl, () => {
-      t.screenClientId && t.wsUrl && u();
-    }), z(() => t.isPlaying, (r) => {
-      l.value && (r ? l.value.play().catch((e) => console.error("Video play failed:", e)) : l.value.pause());
+    X(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && b();
+    }), X(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && b();
+    }), X(() => t.isPlaying, (o) => {
+      r.value && (o ? r.value.play().catch((e) => console.error("Video play failed:", e)) : r.value.pause());
     });
-    const w = () => {
-      t.isPlaying || s("update:isPlaying", !0);
-    }, g = () => {
-      t.isPlaying && s("update:isPlaying", !1);
-    }, A = () => {
-      s("update:isPlaying", !1), s("ended");
-    }, f = (r, e) => {
-      E.value = !0, p.value = r, o.value = V.value;
-      const a = "clientX" in e ? e.clientX : e.touches[0].clientX, S = "clientY" in e ? e.clientY : e.touches[0].clientY;
-      C.value = a, x.value = S, document.addEventListener("mousemove", y), document.addEventListener("mouseup", d), document.addEventListener("touchmove", y), document.addEventListener("touchend", d);
-    }, y = (r) => {
-      if (!E.value || !k.value) return;
-      const e = "clientX" in r ? r.clientX : r.touches[0].clientX, a = "clientY" in r ? r.clientY : r.touches[0].clientY, S = e - C.value, M = a - x.value, B = k.value.getBoundingClientRect(), Y = 0.5, $ = 2;
-      let U = o.value;
-      const R = Math.min(B.width, B.height);
-      p.value === "bottom-right" ? U = o.value + (S + M) / R : p.value === "bottom-left" ? U = o.value + (-S + M) / R : p.value === "top-right" ? U = o.value + (S - M) / R : p.value === "top-left" && (U = o.value + (-S - M) / R), V.value = Math.max(Y, Math.min($, U));
-    }, d = () => {
-      E.value = !1, p.value = null, document.removeEventListener("mousemove", y), document.removeEventListener("mouseup", d), document.removeEventListener("touchmove", y), document.removeEventListener("touchend", d);
+    const B = () => {
+      t.isPlaying || i("update:isPlaying", !0);
+    }, L = () => {
+      t.isPlaying && i("update:isPlaying", !1);
+    }, U = () => {
+      i("update:isPlaying", !1), i("ended");
+    }, d = (o, e) => {
+      e.preventDefault(), I.value = !0, h.value = o;
+      const a = "clientX" in e ? e.clientX : e.touches[0].clientX, P = "clientY" in e ? e.clientY : e.touches[0].clientY;
+      M.value = a, A.value = P, k.value = y.value, s.value = g.value, l.value = w.value, u.value = z.value, document.addEventListener("mousemove", $), document.addEventListener("mouseup", N), document.addEventListener("touchmove", $, { passive: !1 }), document.addEventListener("touchend", N);
+    }, $ = (o) => {
+      if (!I.value) return;
+      o.preventDefault();
+      const e = "clientX" in o ? o.clientX : o.touches[0].clientX, a = "clientY" in o ? o.clientY : o.touches[0].clientY, P = e - M.value, x = a - A.value, D = 200, F = 250, q = 800, O = 1e3;
+      let f = k.value, m = s.value, H = l.value, V = u.value;
+      h.value === "bottom-right" ? (f = k.value + P, V = u.value - x, m = s.value + x) : h.value === "bottom-left" ? (H = l.value + P, f = k.value - P, V = u.value - x, m = s.value + x) : h.value === "top-right" ? (f = k.value + P, m = s.value - x) : h.value === "top-left" && (H = l.value + P, f = k.value - P, m = s.value - x), f < D && (H !== l.value && (H -= D - f), f = D), m < F && (V !== u.value && (V -= F - m), m = F), f > q && (H !== l.value && (H += f - q), f = q), m > O && (V !== u.value && (V += m - O), m = O), y.value = f, g.value = m, w.value = H, z.value = V;
+    }, N = () => {
+      I.value = !1, h.value = null, document.removeEventListener("mousemove", $), document.removeEventListener("mouseup", N), document.removeEventListener("touchmove", $), document.removeEventListener("touchend", N);
     };
-    return W(() => {
-      t.isPlaying && l.value && l.value.play().catch((r) => console.error("Video play failed:", r)), t.screenClientId && t.wsUrl && u();
-    }), X(() => {
+    return G(() => {
+      t.isPlaying && r.value && r.value.play().catch((o) => console.error("Video play failed:", o)), t.screenClientId && t.wsUrl && b();
+    }), K(() => {
       n.value && n.value.close();
-    }), (r, e) => (h(), D(F, { name: "fade" }, {
-      default: q(() => [
-        i.visible ? (h(), b("div", {
+    }), (o, e) => (S(), Q(Z, { name: "fade" }, {
+      default: _(() => [
+        c.visible ? (S(), E("div", {
           key: 0,
-          class: N(["virtual-human-container", { "is-dark": i.isDark }])
+          class: te(["virtual-human-container", { "is-dark": c.isDark }]),
+          style: ee({
+            width: y.value + "px",
+            height: g.value + "px",
+            left: w.value + "px",
+            bottom: z.value + "px"
+          })
         }, [
-          H("div", {
+          R("div", {
             class: "video-wrapper",
             ref_key: "wrapperRef",
-            ref: k,
-            style: O({ transform: `scale(${V.value})`, transformOrigin: "left bottom" })
+            ref: Y
           }, [
-            H("video", {
+            R("video", {
               ref_key: "videoRef",
-              ref: l,
-              src: i.videoSrc,
+              ref: r,
+              src: c.videoSrc,
               class: "persona-video",
-              muted: i.muted,
+              muted: c.muted,
               playsinline: "",
               loop: "",
-              onPlay: w,
-              onPause: g,
-              onEnded: A
-            }, null, 40, j),
-            i.visible ? (h(), b("div", {
+              autoPlay: "",
+              disablePictureInPicture: "false",
+              onPlay: B,
+              onPause: L,
+              onEnded: U
+            }, null, 40, ae),
+            c.visible ? (S(), E("div", {
               key: 0,
               class: "resize-handle top-left",
-              onMousedown: e[0] || (e[0] = (a) => f("top-left", a)),
-              onTouchstart: e[1] || (e[1] = (a) => f("top-left", a))
-            }, null, 32)) : I("", !0),
-            i.visible ? (h(), b("div", {
+              onMousedown: e[0] || (e[0] = (a) => d("top-left", a)),
+              onTouchstart: e[1] || (e[1] = (a) => d("top-left", a))
+            }, null, 32)) : T("", !0),
+            c.visible ? (S(), E("div", {
               key: 1,
               class: "resize-handle top-right",
-              onMousedown: e[2] || (e[2] = (a) => f("top-right", a)),
-              onTouchstart: e[3] || (e[3] = (a) => f("top-right", a))
-            }, null, 32)) : I("", !0),
-            i.visible ? (h(), b("div", {
+              onMousedown: e[2] || (e[2] = (a) => d("top-right", a)),
+              onTouchstart: e[3] || (e[3] = (a) => d("top-right", a))
+            }, null, 32)) : T("", !0),
+            c.visible ? (S(), E("div", {
               key: 2,
               class: "resize-handle bottom-left",
-              onMousedown: e[4] || (e[4] = (a) => f("bottom-left", a)),
-              onTouchstart: e[5] || (e[5] = (a) => f("bottom-left", a))
-            }, null, 32)) : I("", !0),
-            i.visible ? (h(), b("div", {
+              onMousedown: e[4] || (e[4] = (a) => d("bottom-left", a)),
+              onTouchstart: e[5] || (e[5] = (a) => d("bottom-left", a))
+            }, null, 32)) : T("", !0),
+            c.visible ? (S(), E("div", {
               key: 3,
               class: "resize-handle bottom-right",
-              onMousedown: e[6] || (e[6] = (a) => f("bottom-right", a)),
-              onTouchstart: e[7] || (e[7] = (a) => f("bottom-right", a))
-            }, null, 32)) : I("", !0),
-            H("div", G, [
-              i.isPlaying ? (h(), b("div", Q, [...e[9] || (e[9] = [
-                H("span", { class: "dot animate-pulse" }, null, -1),
-                L(" 播放中 ", -1)
-              ])])) : (h(), b("div", K, [...e[8] || (e[8] = [
-                H("span", { class: "dot" }, null, -1),
-                L(" 暂停中 ", -1)
+              onMousedown: e[6] || (e[6] = (a) => d("bottom-right", a)),
+              onTouchstart: e[7] || (e[7] = (a) => d("bottom-right", a))
+            }, null, 32)) : T("", !0),
+            R("div", se, [
+              c.isPlaying ? (S(), E("div", oe, [...e[9] || (e[9] = [
+                R("span", { class: "dot animate-pulse" }, null, -1),
+                J(" 播放中 ", -1)
+              ])])) : (S(), E("div", le, [...e[8] || (e[8] = [
+                R("span", { class: "dot" }, null, -1),
+                J(" 暂停中 ", -1)
               ])]))
             ])
-          ], 4)
-        ], 2)) : I("", !0)
+          ], 512)
+        ], 6)) : T("", !0)
       ]),
       _: 1
     }));
   }
-}), _ = (i, P) => {
-  const t = i.__vccOpts || i;
-  for (const [s, l] of P)
-    t[s] = l;
+}), ie = (c, W) => {
+  const t = c.__vccOpts || c;
+  for (const [i, r] of W)
+    t[i] = r;
   return t;
-}, ee = /* @__PURE__ */ _(Z, [["__scopeId", "data-v-19d39d2e"]]), te = /* @__PURE__ */ T({
+}, ue = /* @__PURE__ */ ie(re, [["__scopeId", "data-v-6c9e435e"]]), ce = /* @__PURE__ */ j({
   __name: "VirtualHumanEventAdapter",
   props: {
     // 屏幕客户端ID
@@ -184,113 +191,115 @@ const j = ["src", "muted"], G = { class: "overlay" }, K = {
       required: !0
     }
   },
-  emits: ["highlight", "showDialog", "end", "pause", "connected", "error"],
-  setup(i, { emit: P }) {
-    const t = i, s = P, l = v(null), k = v(!1);
-    let n = null, m = 0;
-    const V = () => {
+  emits: ["eventNotifaction", "end", "pause", "connected", "error", "playComplete"],
+  setup(c, { emit: W }) {
+    const t = c, i = W, r = v(null), Y = v(!1);
+    let n = null, p = 0, y = !1, g = 0, w = !1;
+    const z = () => {
       n || (n = new (window.AudioContext || window.webkitAudioContext)({
         sampleRate: 24e3
-      })), n.state === "suspended" && n.resume();
-    }, E = (o) => {
-      if (V(), !!n)
+      })), n.state === "suspended" && !w && n.resume();
+    }, I = () => {
+      y && g === 0 && (i("playComplete", t.screenClientId), y = !1);
+    }, h = (s) => {
+      if (z(), !!n)
         try {
-          const u = window.atob(o), c = u.length, w = new Uint8Array(c);
-          for (let d = 0; d < c; d++)
-            w[d] = u.charCodeAt(d);
-          const g = new Int16Array(w.buffer), A = new Float32Array(g.length);
-          for (let d = 0; d < g.length; d++)
-            A[d] = g[d] / 32768;
-          const f = n.createBuffer(1, A.length, 24e3);
-          f.getChannelData(0).set(A);
-          const y = n.createBufferSource();
-          y.buffer = f, y.connect(n.destination), m < n.currentTime && (m = n.currentTime), y.start(m), m += f.duration;
-        } catch (u) {
-          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", u);
-        }
-    }, p = (o) => {
-      if (n)
-        switch (o) {
-          case "play":
-          case "resume":
-            n.state === "suspended" && n.resume();
-            break;
-          case "pause":
-            n.state === "running" && n.suspend();
-            break;
-          case "stop":
-            n.close(), n = null, m = 0;
-            break;
-          default:
-            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${o}`);
+          const l = window.atob(s), u = l.length, b = new Uint8Array(u);
+          for (let d = 0; d < u; d++)
+            b[d] = l.charCodeAt(d);
+          const C = new Int16Array(b.buffer), B = new Float32Array(C.length);
+          for (let d = 0; d < C.length; d++)
+            B[d] = C[d] / 32768;
+          const L = n.createBuffer(1, B.length, 24e3);
+          L.getChannelData(0).set(B);
+          const U = n.createBufferSource();
+          U.buffer = L, U.connect(n.destination), p < n.currentTime && (p = n.currentTime), U.start(p), p += L.duration, g++, U.onended = () => {
+            g--, I();
+          };
+        } catch (l) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", l);
         }
-    }, C = () => {
-      l.value && l.value.close();
+    }, M = (s) => {
+      switch (s) {
+        case "play":
+          y = !1, g = 0, p = 0, w = !1, n && n.state === "suspended" && n.resume();
+          break;
+        case "resume":
+          w = !1, n && n.state === "suspended" && n.resume();
+          break;
+        case "pause":
+          w = !0, n && n.state === "running" && n.suspend();
+          break;
+        case "stop":
+          w = !1, n && (n.close(), n = null), p = 0, y = !1, g = 0;
+          break;
+        case "tts_complete":
+          y = !0, I();
+          break;
+        default:
+          console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${s}`);
+      }
+    }, A = () => {
+      r.value && r.value.close();
       try {
-        const o = new URL(t.wsUrl);
-        o.searchParams.append("sessionId", t.screenClientId + "-event"), l.value = new WebSocket(o.toString()), l.value.onopen = () => {
-          k.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`);
-        }, l.value.onmessage = (u) => {
+        const s = new URL(t.wsUrl);
+        s.searchParams.append("sessionId", t.screenClientId + "-event"), r.value = new WebSocket(s.toString()), r.value.onopen = () => {
+          Y.value = !0, i("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`);
+        }, r.value.onmessage = (l) => {
           try {
-            const c = JSON.parse(u.data);
-            x(c);
-          } catch (c) {
-            console.error("[VirtualHumanEventAdapter] Failed to parse message:", u.data, c);
+            const u = JSON.parse(l.data);
+            k(u);
+          } catch (u) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", l.data, u);
           }
-        }, l.value.onerror = (u) => {
-          console.error("[VirtualHumanEventAdapter] WebSocket error:", u), s("error", u);
-        }, l.value.onclose = () => {
-          k.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        }, r.value.onerror = (l) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", l), i("error", l);
+        }, r.value.onclose = () => {
+          Y.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
         };
-      } catch (o) {
-        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", o), s("error", o);
+      } catch (s) {
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", s), i("error", s);
       }
-    }, x = (o) => {
-      const { type: u, payload: c, action: w } = o;
-      switch (console.log("msgmsg", o), u) {
+    }, k = (s) => {
+      const { type: l, payload: u, action: b } = s;
+      switch (console.log("msgmsg-002", s), l) {
         case "audio":
-          const g = (c == null ? void 0 : c.data) || o.data;
-          g && E(g);
+          const C = (u == null ? void 0 : u.data) || s.data;
+          C && h(C);
           break;
-        case "dialog_event":
-          o.event && s(o.event, o.params);
+        case "send_event":
+          s.event && i("eventNotifaction", s);
           break;
         case "control":
-          w && p(w);
-          break;
-        case "highlight":
-          s("highlight", c);
-          break;
-        case "showDialog":
-          s("showDialog", c);
+          b && M(b);
           break;
         case "end":
-          s("end", c);
+          i("end", u);
           break;
         case "pause":
-          s("pause", c);
+          i("pause", u);
           break;
         default:
-          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${u}`);
+          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${l}`);
       }
     };
-    return z(() => t.screenClientId, () => {
-      t.screenClientId && t.wsUrl && C();
-    }), z(() => t.wsUrl, () => {
-      t.screenClientId && t.wsUrl && C();
-    }), W(() => {
-      t.screenClientId && t.wsUrl && C();
-    }), X(() => {
-      l.value && l.value.close(), n && n.close();
-    }), (o, u) => J(o.$slots, "default");
+    return X(() => t.screenClientId, () => {
+      t.screenClientId && t.wsUrl && A();
+    }), X(() => t.wsUrl, () => {
+      t.screenClientId && t.wsUrl && A();
+    }), G(() => {
+      t.screenClientId && t.wsUrl && A();
+    }), K(() => {
+      r.value && r.value.close(), n && n.close();
+    }), (s, l) => ne(s.$slots, "default");
   }
-}), ne = (i) => {
-  i.component("VirtualHumanPersona", ee), i.component("VirtualHumanEventAdapter", te);
-}, oe = {
-  install: ne
+}), de = (c) => {
+  c.component("VirtualHumanPersona", ue), c.component("VirtualHumanEventAdapter", ce);
+}, fe = {
+  install: de
 };
 export {
-  te as VirtualHumanEventAdapter,
-  ee as VirtualHumanPersona,
-  oe as default
+  ce as VirtualHumanEventAdapter,
+  ue as VirtualHumanPersona,
+  fe as default
 };

package/dist/virtual-human-cf.umd.js

@@ -1 +1 @@
-(function(p,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(p=typeof globalThis<"u"?globalThis:p||self,e(p.VirtualHumanCf={},p.Vue))})(this,function(p,e){"use strict";const z=["src","muted"],N={class:"overlay"},T={key:0,class:"status-badge paused"},R={key:1,class:"status-badge playing"},I=((c,V)=>{const n=c.__vccOpts||c;for(const[s,r]of V)n[s]=r;return n})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(null),o=e.ref(null),g=e.ref(!1),E=e.ref(1),S=e.ref(!1),h=e.ref(null),b=e.ref(0),H=e.ref(0),l=e.ref(1),d=()=>{if(o.value&&o.value.close(),!(!n.wsUrl||!n.screenClientId))try{const i=new URL(n.wsUrl);i.searchParams.append("sessionId",n.screenClientId+"-persona"),o.value=new WebSocket(i.toString()),o.value.onopen=()=>{g.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},o.value.onmessage=t=>{try{const a=JSON.parse(t.data);u(a)}catch(a){console.error("[VirtualHumanPersona] Failed to parse message:",t.data,a)}},o.value.onerror=t=>{console.error("[VirtualHumanPersona] WebSocket error:",t)},o.value.onclose=()=>{g.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(i){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",i)}},u=i=>{const{type:t,action:a}=i;t==="control"&&(a==="play"||a==="resume"?(s("update:isPlaying",!0),s("update:visible",!0)):a==="pause"?s("update:isPlaying",!1):a==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&d()}),e.watch(()=>n.isPlaying,i=>{r.value&&(i?r.value.play().catch(t=>console.error("Video play failed:",t)):r.value.pause())});const k=()=>{n.isPlaying||s("update:isPlaying",!0)},y=()=>{n.isPlaying&&s("update:isPlaying",!1)},P=()=>{s("update:isPlaying",!1),s("ended")},m=(i,t)=>{S.value=!0,h.value=i,l.value=E.value;const a="clientX"in t?t.clientX:t.touches[0].clientX,C="clientY"in t?t.clientY:t.touches[0].clientY;b.value=a,H.value=C,document.addEventListener("mousemove",w),document.addEventListener("mouseup",f),document.addEventListener("touchmove",w),document.addEventListener("touchend",f)},w=i=>{if(!S.value||!v.value)return;const t="clientX"in i?i.clientX:i.touches[0].clientX,a="clientY"in i?i.clientY:i.touches[0].clientY,C=t-b.value,U=a-H.value,x=v.value.getBoundingClientRect(),W=.5,X=2;let B=l.value;const A=Math.min(x.width,x.height);h.value==="bottom-right"?B=l.value+(C+U)/A:h.value==="bottom-left"?B=l.value+(-C+U)/A:h.value==="top-right"?B=l.value+(C-U)/A:h.value==="top-left"&&(B=l.value+(-C-U)/A),E.value=Math.max(W,Math.min(X,B))},f=()=>{S.value=!1,h.value=null,document.removeEventListener("mousemove",w),document.removeEventListener("mouseup",f),document.removeEventListener("touchmove",w),document.removeEventListener("touchend",f)};return e.onMounted(()=>{n.isPlaying&&r.value&&r.value.play().catch(i=>console.error("Video play failed:",i)),n.screenClientId&&n.wsUrl&&d()}),e.onUnmounted(()=>{o.value&&o.value.close()}),(i,t)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":c.isDark}])},[e.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:v,style:e.normalizeStyle({transform:`scale(${E.value})`,transformOrigin:"left bottom"})},[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:c.videoSrc,class:"persona-video",muted:c.muted,playsinline:"",loop:"",onPlay:k,onPause:y,onEnded:P},null,40,z),c.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"resize-handle top-left",onMousedown:t[0]||(t[0]=a=>m("top-left",a)),onTouchstart:t[1]||(t[1]=a=>m("top-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:1,class:"resize-handle top-right",onMousedown:t[2]||(t[2]=a=>m("top-right",a)),onTouchstart:t[3]||(t[3]=a=>m("top-right",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:2,class:"resize-handle bottom-left",onMousedown:t[4]||(t[4]=a=>m("bottom-left",a)),onTouchstart:t[5]||(t[5]=a=>m("bottom-left",a))},null,32)):e.createCommentVNode("",!0),c.visible?(e.openBlock(),e.createElementBlock("div",{key:3,class:"resize-handle bottom-right",onMousedown:t[6]||(t[6]=a=>m("bottom-right",a)),onTouchstart:t[7]||(t[7]=a=>m("bottom-right",a))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",N,[c.isPlaying?(e.openBlock(),e.createElementBlock("div",R,[...t[9]||(t[9]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",T,[...t[8]||(t[8]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])],4)],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-19d39d2e"]]),M=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(c,{emit:V}){const n=c,s=V,r=e.ref(null),v=e.ref(!1);let o=null,g=0;const E=()=>{o||(o=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),o.state==="suspended"&&o.resume()},S=l=>{if(E(),!!o)try{const d=window.atob(l),u=d.length,k=new Uint8Array(u);for(let f=0;f<u;f++)k[f]=d.charCodeAt(f);const y=new Int16Array(k.buffer),P=new Float32Array(y.length);for(let f=0;f<y.length;f++)P[f]=y[f]/32768;const m=o.createBuffer(1,P.length,24e3);m.getChannelData(0).set(P);const w=o.createBufferSource();w.buffer=m,w.connect(o.destination),g<o.currentTime&&(g=o.currentTime),w.start(g),g+=m.duration}catch(d){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",d)}},h=l=>{if(o)switch(l){case"play":case"resume":o.state==="suspended"&&o.resume();break;case"pause":o.state==="running"&&o.suspend();break;case"stop":o.close(),o=null,g=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${l}`)}},b=()=>{r.value&&r.value.close();try{const l=new URL(n.wsUrl);l.searchParams.append("sessionId",n.screenClientId+"-event"),r.value=new WebSocket(l.toString()),r.value.onopen=()=>{v.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},r.value.onmessage=d=>{try{const u=JSON.parse(d.data);H(u)}catch(u){console.error("[VirtualHumanEventAdapter] Failed to parse message:",d.data,u)}},r.value.onerror=d=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",d),s("error",d)},r.value.onclose=()=>{v.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",l),s("error",l)}},H=l=>{const{type:d,payload:u,action:k}=l;switch(console.log("msgmsg",l),d){case"audio":const y=(u==null?void 0:u.data)||l.data;y&&S(y);break;case"dialog_event":l.event&&s(l.event,l.params);break;case"control":k&&h(k);break;case"highlight":s("highlight",u);break;case"showDialog":s("showDialog",u);break;case"end":s("end",u);break;case"pause":s("pause",u);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${d}`)}};return e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&b()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&b()}),e.onMounted(()=>{n.screenClientId&&n.wsUrl&&b()}),e.onUnmounted(()=>{r.value&&r.value.close(),o&&o.close()}),(l,d)=>e.renderSlot(l.$slots,"default")}}),L={install:c=>{c.component("VirtualHumanPersona",I),c.component("VirtualHumanEventAdapter",M)}};p.VirtualHumanEventAdapter=M,p.VirtualHumanPersona=I,p.default=L,Object.defineProperties(p,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(v,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(v=typeof globalThis<"u"?globalThis:v||self,e(v.VirtualHumanCf={},v.Vue))})(this,function(v,e){"use strict";const F=["src","muted"],O={class:"overlay"},j={key:0,class:"status-badge paused"},J={key:1,class:"status-badge playing"},q=((d,A)=>{const n=d.__vccOpts||d;for(const[c,i]of A)n[c]=i;return n})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!1},isPlaying:{type:Boolean,default:!1},muted:{type:Boolean,default:!0},isDark:{type:Boolean,default:!1},screenClientId:{type:String,required:!1},wsUrl:{type:String,required:!1}},emits:["update:isPlaying","ended","update:visible"],setup(d,{emit:A}){const n=d,c=A,i=e.ref(null),W=e.ref(null),a=e.ref(null),y=e.ref(!1),g=e.ref(400),w=e.ref(500),h=e.ref(16),x=e.ref(16),H=e.ref(!1),b=e.ref(null),z=e.ref(0),B=e.ref(0),C=e.ref(0),l=e.ref(0),s=e.ref(0),u=e.ref(0),k=()=>{if(a.value&&a.value.close(),!(!n.wsUrl||!n.screenClientId))try{const r=new URL(n.wsUrl);r.searchParams.append("sessionId",n.screenClientId+"-persona"),a.value=new WebSocket(r.toString()),a.value.onopen=()=>{y.value=!0,console.log(`[VirtualHumanPersona] Connected to ${n.wsUrl} for session ${n.screenClientId}-persona`)},a.value.onmessage=t=>{try{const o=JSON.parse(t.data);V(o)}catch(o){console.error("[VirtualHumanPersona] Failed to parse message:",t.data,o)}},a.value.onerror=t=>{console.error("[VirtualHumanPersona] WebSocket error:",t)},a.value.onclose=()=>{y.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(r){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",r)}},V=r=>{const{type:t,action:o}=r;t==="control"&&(o==="play"||o==="resume"?(c("update:isPlaying",!0),c("update:visible",!0)):o==="pause"?c("update:isPlaying",!1):o==="stop"&&(c("update:isPlaying",!1),c("update:visible",!1),i.value&&(i.value.currentTime=0)))};e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&k()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&k()}),e.watch(()=>n.isPlaying,r=>{i.value&&(r?i.value.play().catch(t=>console.error("Video play failed:",t)):i.value.pause())});const N=()=>{n.isPlaying||c("update:isPlaying",!0)},T=()=>{n.isPlaying&&c("update:isPlaying",!1)},I=()=>{c("update:isPlaying",!1),c("ended")},f=(r,t)=>{t.preventDefault(),H.value=!0,b.value=r;const o="clientX"in t?t.clientX:t.touches[0].clientX,P="clientY"in t?t.clientY:t.touches[0].clientY;z.value=o,B.value=P,C.value=g.value,l.value=w.value,s.value=h.value,u.value=x.value,document.addEventListener("mousemove",L),document.addEventListener("mouseup",M),document.addEventListener("touchmove",L,{passive:!1}),document.addEventListener("touchend",M)},L=r=>{if(!H.value)return;r.preventDefault();const t="clientX"in r?r.clientX:r.touches[0].clientX,o="clientY"in r?r.clientY:r.touches[0].clientY,P=t-z.value,U=o-B.value,R=200,X=250,Y=800,$=1e3;let m=C.value,p=l.value,E=s.value,S=u.value;b.value==="bottom-right"?(m=C.value+P,S=u.value-U,p=l.value+U):b.value==="bottom-left"?(E=s.value+P,m=C.value-P,S=u.value-U,p=l.value+U):b.value==="top-right"?(m=C.value+P,p=l.value-U):b.value==="top-left"&&(E=s.value+P,m=C.value-P,p=l.value-U),m<R&&(E!==s.value&&(E-=R-m),m=R),p<X&&(S!==u.value&&(S-=X-p),p=X),m>Y&&(E!==s.value&&(E+=m-Y),m=Y),p>$&&(S!==u.value&&(S+=p-$),p=$),g.value=m,w.value=p,h.value=E,x.value=S},M=()=>{H.value=!1,b.value=null,document.removeEventListener("mousemove",L),document.removeEventListener("mouseup",M),document.removeEventListener("touchmove",L),document.removeEventListener("touchend",M)};return e.onMounted(()=>{n.isPlaying&&i.value&&i.value.play().catch(r=>console.error("Video play failed:",r)),n.screenClientId&&n.wsUrl&&k()}),e.onUnmounted(()=>{a.value&&a.value.close()}),(r,t)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[d.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":d.isDark}]),style:e.normalizeStyle({width:g.value+"px",height:w.value+"px",left:h.value+"px",bottom:x.value+"px"})},[e.createElementVNode("div",{class:"video-wrapper",ref_key:"wrapperRef",ref:W},[e.createElementVNode("video",{ref_key:"videoRef",ref:i,src:d.videoSrc,class:"persona-video",muted:d.muted,playsinline:"",loop:"",autoPlay:"",disablePictureInPicture:"false",onPlay:N,onPause:T,onEnded:I},null,40,F),d.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:"resize-handle top-left",onMousedown:t[0]||(t[0]=o=>f("top-left",o)),onTouchstart:t[1]||(t[1]=o=>f("top-left",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:1,class:"resize-handle top-right",onMousedown:t[2]||(t[2]=o=>f("top-right",o)),onTouchstart:t[3]||(t[3]=o=>f("top-right",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:2,class:"resize-handle bottom-left",onMousedown:t[4]||(t[4]=o=>f("bottom-left",o)),onTouchstart:t[5]||(t[5]=o=>f("bottom-left",o))},null,32)):e.createCommentVNode("",!0),d.visible?(e.openBlock(),e.createElementBlock("div",{key:3,class:"resize-handle bottom-right",onMousedown:t[6]||(t[6]=o=>f("bottom-right",o)),onTouchstart:t[7]||(t[7]=o=>f("bottom-right",o))},null,32)):e.createCommentVNode("",!0),e.createElementVNode("div",O,[d.isPlaying?(e.openBlock(),e.createElementBlock("div",J,[...t[9]||(t[9]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",j,[...t[8]||(t[8]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])],512)],6)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-6c9e435e"]]),D=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["eventNotifaction","end","pause","connected","error","playComplete"],setup(d,{emit:A}){const n=d,c=A,i=e.ref(null),W=e.ref(!1);let a=null,y=0,g=!1,w=0,h=!1;const x=()=>{a||(a=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),a.state==="suspended"&&!h&&a.resume()},H=()=>{g&&w===0&&(c("playComplete",n.screenClientId),g=!1)},b=l=>{if(x(),!!a)try{const s=window.atob(l),u=s.length,k=new Uint8Array(u);for(let f=0;f<u;f++)k[f]=s.charCodeAt(f);const V=new Int16Array(k.buffer),N=new Float32Array(V.length);for(let f=0;f<V.length;f++)N[f]=V[f]/32768;const T=a.createBuffer(1,N.length,24e3);T.getChannelData(0).set(N);const I=a.createBufferSource();I.buffer=T,I.connect(a.destination),y<a.currentTime&&(y=a.currentTime),I.start(y),y+=T.duration,w++,I.onended=()=>{w--,H()}}catch(s){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",s)}},z=l=>{switch(l){case"play":g=!1,w=0,y=0,h=!1,a&&a.state==="suspended"&&a.resume();break;case"resume":h=!1,a&&a.state==="suspended"&&a.resume();break;case"pause":h=!0,a&&a.state==="running"&&a.suspend();break;case"stop":h=!1,a&&(a.close(),a=null),y=0,g=!1,w=0;break;case"tts_complete":g=!0,H();break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${l}`)}},B=()=>{i.value&&i.value.close();try{const l=new URL(n.wsUrl);l.searchParams.append("sessionId",n.screenClientId+"-event"),i.value=new WebSocket(l.toString()),i.value.onopen=()=>{W.value=!0,c("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${n.wsUrl} for session ${n.screenClientId}-event`)},i.value.onmessage=s=>{try{const u=JSON.parse(s.data);C(u)}catch(u){console.error("[VirtualHumanEventAdapter] Failed to parse message:",s.data,u)}},i.value.onerror=s=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",s),c("error",s)},i.value.onclose=()=>{W.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(l){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",l),c("error",l)}},C=l=>{const{type:s,payload:u,action:k}=l;switch(console.log("msgmsg-002",l),s){case"audio":const V=(u==null?void 0:u.data)||l.data;V&&b(V);break;case"send_event":l.event&&c("eventNotifaction",l);break;case"control":k&&z(k);break;case"end":c("end",u);break;case"pause":c("pause",u);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${s}`)}};return e.watch(()=>n.screenClientId,()=>{n.screenClientId&&n.wsUrl&&B()}),e.watch(()=>n.wsUrl,()=>{n.screenClientId&&n.wsUrl&&B()}),e.onMounted(()=>{n.screenClientId&&n.wsUrl&&B()}),e.onUnmounted(()=>{i.value&&i.value.close(),a&&a.close()}),(l,s)=>e.renderSlot(l.$slots,"default")}}),G={install:d=>{d.component("VirtualHumanPersona",q),d.component("VirtualHumanEventAdapter",D)}};v.VirtualHumanEventAdapter=D,v.VirtualHumanPersona=q,v.default=G,Object.defineProperties(v,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "virtual-human-cf",
-  "version": "1.0.4",
+  "version": "1.0.6",
   "description": "Vue3 Digital Human Component Package by cf ",
   "main": "dist/virtual-human-cf.umd.js",
   "module": "dist/virtual-human-cf.es.js",

package/src/components/VirtualHumanEventAdapter.vue

@@ -18,7 +18,7 @@ const props = defineProps({
   }
 });
 
-const emit = defineEmits(['highlight', 'showDialog', 'end', 'pause', 'connected', 'error']);
+const emit = defineEmits(['eventNotifaction', 'end', 'pause', 'connected', 'error', 'playComplete']);
 
 const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
@@ -26,6 +26,9 @@ const isConnected = ref(false);
 // Audio playback variables
 let audioContext: AudioContext | null = null;
 let nextStartTime = 0;
+let isTtsComplete = false;
+let activeSources = 0;
+let isIntentionallyPaused = false;
 
 const initAudioContext = () => {
   if (!audioContext) {
@@ -33,11 +36,18 @@ const initAudioContext = () => {
       sampleRate: 24000
     });
   }
-  if (audioContext.state === 'suspended') {
+  if (audioContext.state === 'suspended' && !isIntentionallyPaused) {
     audioContext.resume();
   }
 };
 
+const checkPlayComplete = () => {
+  if (isTtsComplete && activeSources === 0) {
+    emit('playComplete', props.screenClientId);
+    isTtsComplete = false;
+  }
+};
+
 const handleAudioMessage = (base64Data: string) => {
   initAudioContext();
   if (!audioContext) return;
@@ -70,29 +80,53 @@ const handleAudioMessage = (base64Data: string) => {
     }
     source.start(nextStartTime);
     nextStartTime += audioBuffer.duration;
+
+    activeSources++;
+    source.onended = () => {
+      activeSources--;
+      checkPlayComplete();
+    };
   } catch (error) {
     console.error('[VirtualHumanEventAdapter] Failed to decode and play audio:', error);
   }
 };
 
 const handleControlMessage = (action: string) => {
-  if (!audioContext) return;
   switch (action) {
     case 'play':
+      isTtsComplete = false;
+      activeSources = 0;
+      nextStartTime = 0;
+      isIntentionallyPaused = false;
+      if (audioContext && audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+      break;
     case 'resume':
-      if (audioContext.state === 'suspended') {
+      isIntentionallyPaused = false;
+      if (audioContext && audioContext.state === 'suspended') {
         audioContext.resume();
       }
       break;
     case 'pause':
-      if (audioContext.state === 'running') {
+      isIntentionallyPaused = true;
+      if (audioContext && audioContext.state === 'running') {
         audioContext.suspend();
       }
       break;
     case 'stop':
-      audioContext.close();
-      audioContext = null;
+      isIntentionallyPaused = false;
+      if (audioContext) {
+        audioContext.close();
+        audioContext = null;
+      }
       nextStartTime = 0;
+      isTtsComplete = false;
+      activeSources = 0;
+      break;
+    case 'tts_complete':
+      isTtsComplete = true;
+      checkPlayComplete();
       break;
     default:
       console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${action}`);
@@ -141,32 +175,27 @@ const connectWebSocket = () => {
 
 const handleMessage = (msg: any) => {
   const { type, payload, action } = msg;
-  console.log("msgmsg",msg)
+  console.log("msgmsg-002",msg)
   switch (type) {
+    // 接收音频
     case 'audio':
       const base64Data = payload?.data || msg.data;
       if (base64Data) {
         handleAudioMessage(base64Data);
       }
       break;
-    case 'dialog_event':
+    // 接收事件通知
+    case 'send_event':
       if (msg.event) {
-        emit(msg.event as any, msg.params);
+        emit('eventNotifaction', msg);
       }
       break;
+    // 控制指令接口
     case 'control':
       if (action) {
         handleControlMessage(action);
       }
       break;
-    case 'highlight':
-      // 触发高亮大屏某区域事件
-      emit('highlight', payload);
-      break;
-    case 'showDialog':
-      // 触发弹窗显示事件
-      emit('showDialog', payload);
-      break;
     case 'end':
       // 触发数字人对话结束事件
       emit('end', payload);

package/src/components/VirtualHumanPersona.vue

@@ -4,12 +4,14 @@
       v-if="visible"
       class="virtual-human-container"
       :class="{ 'is-dark': isDark }"
+      :style="{
+        width: containerWidth + 'px',
+        height: containerHeight + 'px',
+        left: containerLeft + 'px',
+        bottom: containerBottom + 'px'
+      }"
     >
-      <div
-        class="video-wrapper"
-        ref="wrapperRef"
-        :style="{ transform: `scale(${scale})`, transformOrigin: 'left bottom' }"
-      >
+      <div class="video-wrapper" ref="wrapperRef">
         <video
           ref="videoRef"
           :src="videoSrc"
@@ -17,6 +19,8 @@
           :muted="muted"
           playsinline
           loop
+          autoPlay
+          disablePictureInPicture="false"
           @play="handlePlay"
           @pause="handlePause"
           @ended="handleEnded"
@@ -114,12 +118,19 @@ const ws = ref<WebSocket | null>(null);
 const isConnected = ref(false);
 
 // 缩放相关状态
-const scale = ref(1);
+const containerWidth = ref(400);
+const containerHeight = ref(500);
+const containerLeft = ref(16);
+const containerBottom = ref(16);
+
 const isResizing = ref(false);
 const resizeHandle = ref<string | null>(null);
 const startX = ref(0);
 const startY = ref(0);
-const startScale = ref(1);
+const startW = ref(0);
+const startH = ref(0);
+const startL = ref(0);
+const startB = ref(0);
 
 const connectWebSocket = () => {
   if (ws.value) {
@@ -220,23 +231,29 @@ const handleEnded = () => {
 
 // 缩放功能
 const startResize = (handle: string, event: MouseEvent | TouchEvent) => {
+  event.preventDefault();
   isResizing.value = true;
   resizeHandle.value = handle;
-  startScale.value = scale.value;
 
   const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
   const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
   startX.value = clientX;
   startY.value = clientY;
 
+  startW.value = containerWidth.value;
+  startH.value = containerHeight.value;
+  startL.value = containerLeft.value;
+  startB.value = containerBottom.value;
+
   document.addEventListener('mousemove', handleResize);
   document.addEventListener('mouseup', stopResize);
-  document.addEventListener('touchmove', handleResize);
+  document.addEventListener('touchmove', handleResize, { passive: false });
   document.addEventListener('touchend', stopResize);
 };
 
 const handleResize = (event: MouseEvent | TouchEvent) => {
-  if (!isResizing.value || !wrapperRef.value) return;
+  if (!isResizing.value) return;
+  event.preventDefault();
 
   const clientX = 'clientX' in event ? event.clientX : event.touches[0].clientX;
   const clientY = 'clientY' in event ? event.clientY : event.touches[0].clientY;
@@ -244,25 +261,57 @@ const handleResize = (event: MouseEvent | TouchEvent) => {
   const deltaX = clientX - startX.value;
   const deltaY = clientY - startY.value;
 
-  const rect = wrapperRef.value.getBoundingClientRect();
-  const minScale = 0.5;
-  const maxScale = 2;
+  const minWidth = 200;
+  const minHeight = 250;
+  const maxWidth = 800;
+  const maxHeight = 1000;
 
-  // 根据拖动的角计算缩放比例
-  let newScale = startScale.value;
-  const baseSize = Math.min(rect.width, rect.height);
+  let newW = startW.value;
+  let newH = startH.value;
+  let newL = startL.value;
+  let newB = startB.value;
 
   if (resizeHandle.value === 'bottom-right') {
-    newScale = startScale.value + (deltaX + deltaY) / baseSize;
+    newW = startW.value + deltaX;
+    newB = startB.value - deltaY;
+    newH = startH.value + deltaY;
   } else if (resizeHandle.value === 'bottom-left') {
-    newScale = startScale.value + (-deltaX + deltaY) / baseSize;
+    newL = startL.value + deltaX;
+    newW = startW.value - deltaX;
+    newB = startB.value - deltaY;
+    newH = startH.value + deltaY;
   } else if (resizeHandle.value === 'top-right') {
-    newScale = startScale.value + (deltaX - deltaY) / baseSize;
+    newW = startW.value + deltaX;
+    newH = startH.value - deltaY;
   } else if (resizeHandle.value === 'top-left') {
-    newScale = startScale.value + (-deltaX - deltaY) / baseSize;
+    newL = startL.value + deltaX;
+    newW = startW.value - deltaX;
+    newH = startH.value - deltaY;
   }
 
-  scale.value = Math.max(minScale, Math.min(maxScale, newScale));
+  // 约束最小宽高
+  if (newW < minWidth) {
+    if (newL !== startL.value) newL -= (minWidth - newW);
+    newW = minWidth;
+  }
+  if (newH < minHeight) {
+    if (newB !== startB.value) newB -= (minHeight - newH);
+    newH = minHeight;
+  }
+  // 约束最大宽高
+  if (newW > maxWidth) {
+    if (newL !== startL.value) newL += (newW - maxWidth);
+    newW = maxWidth;
+  }
+  if (newH > maxHeight) {
+    if (newB !== startB.value) newB += (newH - maxHeight);
+    newH = maxHeight;
+  }
+
+  containerWidth.value = newW;
+  containerHeight.value = newH;
+  containerLeft.value = newL;
+  containerBottom.value = newB;
 };
 
 const stopResize = () => {
@@ -304,23 +353,25 @@ onUnmounted(() => {
 
 .virtual-human-container {
   position: fixed;
-  left: 16px;
-  bottom: 16px;
-  width: 400px;
-  height: 500px;
+  /* left, bottom, width, height are set dynamically */
   z-index: 2147483647;
   overflow: visible;
 }
 
 .video-wrapper {
   position: relative;
-  width: 400px;
-  height: 500px;
+  width: 100%;
+  height: 100%;
   border-radius: 1rem;
   overflow: hidden;
   box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
   background: #ffffff;
-  transition: background-color 0.3s ease, box-shadow 0.3s ease;
+  border: 2px solid transparent;
+  transition: background-color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
+}
+
+.video-wrapper:hover {
+  border-color: #409EFF;
 }
 
 .virtual-human-container.is-dark .video-wrapper {
@@ -346,11 +397,13 @@ onUnmounted(() => {
   cursor: pointer;
   z-index: 20;
   opacity: 0;
+  pointer-events: none;
   transition: opacity 0.3s ease, background 0.2s, border-color 0.2s;
 }
 
 .video-wrapper:hover .resize-handle {
   opacity: 1;
+  pointer-events: auto;
 }
 
 .resize-handle:hover {