virtual-human-cf 1.0.0

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

@@ -0,0 +1,43 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    screenClientId: {
+        type: StringConstructor;
+        required: true;
+    };
+    wsUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    error: (...args: any[]) => void;
+    pause: (...args: any[]) => void;
+    highlight: (...args: any[]) => void;
+    showDialog: (...args: any[]) => void;
+    end: (...args: any[]) => void;
+    connected: (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    screenClientId: {
+        type: StringConstructor;
+        required: true;
+    };
+    wsUrl: {
+        type: StringConstructor;
+        required: true;
+    };
+}>> & Readonly<{
+    onError?: ((...args: any[]) => any) | undefined;
+    onPause?: ((...args: any[]) => any) | undefined;
+    onHighlight?: ((...args: any[]) => any) | undefined;
+    onShowDialog?: ((...args: any[]) => any) | undefined;
+    onEnd?: ((...args: any[]) => any) | undefined;
+    onConnected?: ((...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;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,73 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    videoSrc: {
+        type: StringConstructor;
+        required: true;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isPlaying: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    screenClientId: {
+        type: StringConstructor;
+        required: false;
+    };
+    wsUrl: {
+        type: StringConstructor;
+        required: false;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    ended: (...args: any[]) => void;
+    "update:isPlaying": (...args: any[]) => void;
+    "update:visible": (...args: any[]) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    videoSrc: {
+        type: StringConstructor;
+        required: true;
+    };
+    visible: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isPlaying: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    muted: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    isDark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    screenClientId: {
+        type: StringConstructor;
+        required: false;
+    };
+    wsUrl: {
+        type: StringConstructor;
+        required: false;
+    };
+}>> & Readonly<{
+    onEnded?: ((...args: any[]) => any) | undefined;
+    "onUpdate:isPlaying"?: ((...args: any[]) => any) | undefined;
+    "onUpdate:visible"?: ((...args: any[]) => any) | undefined;
+}>, {
+    visible: boolean;
+    isPlaying: boolean;
+    muted: boolean;
+    isDark: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+import { Plugin } from 'vue';
+import { default as VirtualHumanPersona } from './components/VirtualHumanPersona.vue';
+import { default as VirtualHumanEventAdapter } from './components/VirtualHumanEventAdapter.vue';
+
+export { VirtualHumanPersona, VirtualHumanEventAdapter };
+declare const _default: Plugin;
+export default _default;

package/dist/style.css

@@ -0,0 +1 @@
+.fade-enter-active[data-v-288a71c0],.fade-leave-active[data-v-288a71c0]{transition:opacity .5s ease,transform .5s ease}.fade-enter-from[data-v-288a71c0],.fade-leave-to[data-v-288a71c0]{opacity:0;transform:translateY(10px)}.virtual-human-container[data-v-288a71c0]{position:relative;width:100%;max-width:400px;border-radius:1rem;overflow:hidden;box-shadow:0 10px 25px #0000001a;background:#fff;transition:background-color .3s ease}.virtual-human-container.is-dark[data-v-288a71c0]{background:#1f2937;box-shadow:0 10px 25px #00000080}.video-wrapper[data-v-288a71c0]{position:relative;width:100%;aspect-ratio:9 / 16;background:#000}.persona-video[data-v-288a71c0]{width:100%;height:100%;object-fit:cover}.overlay[data-v-288a71c0]{position:absolute;top:1rem;right:1rem;z-index:10}.status-badge[data-v-288a71c0]{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-288a71c0]{background:#ef4444cc}.status-badge.playing[data-v-288a71c0]{background:#22c55ecc}.dot[data-v-288a71c0]{width:6px;height:6px;border-radius:50%;background-color:#fff}@keyframes pulse-288a71c0{0%,to{opacity:1}50%{opacity:.5}}.animate-pulse[data-v-288a71c0]{animation:pulse-288a71c0 2s cubic-bezier(.4,0,.6,1) infinite}

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

@@ -0,0 +1,245 @@
+import { defineComponent as H, ref as g, watch as w, onMounted as I, onUnmounted as _, openBlock as h, createBlock as E, Transition as x, withCtx as B, createElementBlock as A, normalizeClass as W, createElementVNode as y, createTextVNode as U, createCommentVNode as $, renderSlot as D } from "vue";
+const F = { class: "video-wrapper" }, T = ["src", "muted"], q = { class: "overlay" }, M = {
+  key: 0,
+  class: "status-badge paused"
+}, N = {
+  key: 1,
+  class: "status-badge playing"
+}, R = /* @__PURE__ */ H({
+  __name: "VirtualHumanPersona",
+  props: {
+    videoSrc: {
+      type: String,
+      required: !0
+    },
+    visible: {
+      type: Boolean,
+      default: !0
+    },
+    isPlaying: {
+      type: Boolean,
+      default: !1
+    },
+    muted: {
+      type: Boolean,
+      default: !0
+      // Auto-play policies usually require muted
+    },
+    isDark: {
+      type: Boolean,
+      default: !1
+    },
+    screenClientId: {
+      type: String,
+      required: !1
+    },
+    wsUrl: {
+      type: String,
+      required: !1
+    }
+  },
+  emits: ["update:isPlaying", "ended", "update:visible"],
+  setup(r, { emit: p }) {
+    const e = r, s = p, o = g(null), c = g(null), n = g(!1), u = () => {
+      if (c.value && c.value.close(), !(!e.wsUrl || !e.screenClientId))
+        try {
+          const i = new URL(e.wsUrl);
+          i.searchParams.append("sessionId", e.screenClientId + "-persona"), c.value = new WebSocket(i.toString()), c.value.onopen = () => {
+            n.value = !0, console.log(`[VirtualHumanPersona] Connected to ${e.wsUrl} for session ${e.screenClientId}-persona`);
+          }, c.value.onmessage = (t) => {
+            try {
+              const a = JSON.parse(t.data);
+              b(a);
+            } catch (a) {
+              console.error("[VirtualHumanPersona] Failed to parse message:", t.data, a);
+            }
+          }, c.value.onerror = (t) => {
+            console.error("[VirtualHumanPersona] WebSocket error:", t);
+          }, c.value.onclose = () => {
+            n.value = !1, console.log("[VirtualHumanPersona] WebSocket disconnected");
+          };
+        } catch (i) {
+          console.error("[VirtualHumanPersona] Failed to initialize WebSocket:", i);
+        }
+    }, b = (i) => {
+      const { type: t, action: a } = i;
+      t === "control" && (a === "play" ? (s("update:isPlaying", !0), s("update:visible", !0)) : a === "pause" ? (s("update:isPlaying", !1), s("update:visible", !1)) : a === "stop" && (s("update:isPlaying", !1), s("update:visible", !1), o.value && (o.value.currentTime = 0)));
+    };
+    w(() => e.screenClientId, () => {
+      e.screenClientId && e.wsUrl && u();
+    }), w(() => e.wsUrl, () => {
+      e.screenClientId && e.wsUrl && u();
+    }), w(() => e.isPlaying, (i) => {
+      o.value && (i ? o.value.play().catch((t) => console.error("Video play failed:", t)) : o.value.pause());
+    });
+    const k = () => {
+      e.isPlaying || s("update:isPlaying", !0);
+    }, C = () => {
+      e.isPlaying && s("update:isPlaying", !1);
+    }, v = () => {
+      s("update:isPlaying", !1), s("ended");
+    };
+    return I(() => {
+      e.isPlaying && o.value && o.value.play().catch((i) => console.error("Video play failed:", i)), e.screenClientId && e.wsUrl && u();
+    }), _(() => {
+      c.value && c.value.close();
+    }), (i, t) => (h(), E(x, { name: "fade" }, {
+      default: B(() => [
+        r.visible ? (h(), A("div", {
+          key: 0,
+          class: W(["virtual-human-container", { "is-dark": r.isDark }])
+        }, [
+          y("div", F, [
+            y("video", {
+              ref_key: "videoRef",
+              ref: o,
+              src: r.videoSrc,
+              class: "persona-video",
+              muted: r.muted,
+              playsinline: "",
+              loop: "",
+              onPlay: k,
+              onPause: C,
+              onEnded: v
+            }, null, 40, T),
+            y("div", q, [
+              r.isPlaying ? (h(), A("div", N, [...t[1] || (t[1] = [
+                y("span", { class: "dot animate-pulse" }, null, -1),
+                U(" 播放中 ", -1)
+              ])])) : (h(), A("div", M, [...t[0] || (t[0] = [
+                y("span", { class: "dot" }, null, -1),
+                U(" 暂停中 ", -1)
+              ])]))
+            ])
+          ])
+        ], 2)) : $("", !0)
+      ]),
+      _: 1
+    }));
+  }
+}), z = (r, p) => {
+  const e = r.__vccOpts || r;
+  for (const [s, o] of p)
+    e[s] = o;
+  return e;
+}, O = /* @__PURE__ */ z(R, [["__scopeId", "data-v-288a71c0"]]), J = /* @__PURE__ */ H({
+  __name: "VirtualHumanEventAdapter",
+  props: {
+    screenClientId: {
+      type: String,
+      required: !0
+    },
+    wsUrl: {
+      type: String,
+      required: !0
+    }
+  },
+  emits: ["highlight", "showDialog", "end", "pause", "connected", "error"],
+  setup(r, { emit: p }) {
+    const e = r, s = p, o = g(null), c = g(!1);
+    let n = null, u = 0;
+    const b = () => {
+      n || (n = new (window.AudioContext || window.webkitAudioContext)({
+        sampleRate: 24e3
+      })), n.state === "suspended" && n.resume();
+    }, k = (t) => {
+      if (b(), !!n)
+        try {
+          const a = window.atob(t), l = a.length, m = new Uint8Array(l);
+          for (let d = 0; d < l; d++)
+            m[d] = a.charCodeAt(d);
+          const f = new Int16Array(m.buffer), P = new Float32Array(f.length);
+          for (let d = 0; d < f.length; d++)
+            P[d] = f[d] / 32768;
+          const S = n.createBuffer(1, P.length, 24e3);
+          S.getChannelData(0).set(P);
+          const V = n.createBufferSource();
+          V.buffer = S, V.connect(n.destination), u < n.currentTime && (u = n.currentTime), V.start(u), u += S.duration;
+        } catch (a) {
+          console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:", a);
+        }
+    }, C = (t) => {
+      if (n)
+        switch (t) {
+          case "play":
+            n.state === "suspended" && n.resume();
+            break;
+          case "pause":
+            n.state === "running" && n.suspend();
+            break;
+          case "stop":
+            n.close(), n = null, u = 0;
+            break;
+          default:
+            console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${t}`);
+        }
+    }, v = () => {
+      o.value && o.value.close();
+      try {
+        const t = new URL(e.wsUrl);
+        t.searchParams.append("sessionId", e.screenClientId + "-event"), o.value = new WebSocket(t.toString()), o.value.onopen = () => {
+          c.value = !0, s("connected"), console.log(`[VirtualHumanEventAdapter] Connected to ${e.wsUrl} for session ${e.screenClientId}-event`);
+        }, o.value.onmessage = (a) => {
+          try {
+            const l = JSON.parse(a.data);
+            i(l);
+          } catch (l) {
+            console.error("[VirtualHumanEventAdapter] Failed to parse message:", a.data, l);
+          }
+        }, o.value.onerror = (a) => {
+          console.error("[VirtualHumanEventAdapter] WebSocket error:", a), s("error", a);
+        }, o.value.onclose = () => {
+          c.value = !1, console.log("[VirtualHumanEventAdapter] WebSocket disconnected");
+        };
+      } catch (t) {
+        console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:", t), s("error", t);
+      }
+    }, i = (t) => {
+      const { type: a, payload: l, action: m } = t;
+      switch (a) {
+        case "audio":
+          const f = (l == null ? void 0 : l.data) || t.data;
+          f && k(f);
+          break;
+        case "dialog_event":
+          t.event && s(t.event, t.params);
+          break;
+        case "control":
+          m && C(m);
+          break;
+        case "highlight":
+          s("highlight", l);
+          break;
+        case "showDialog":
+          s("showDialog", l);
+          break;
+        case "end":
+          s("end", l);
+          break;
+        case "pause":
+          s("pause", l);
+          break;
+        default:
+          console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${a}`);
+      }
+    };
+    return w(() => e.screenClientId, () => {
+      e.screenClientId && e.wsUrl && v();
+    }), w(() => e.wsUrl, () => {
+      e.screenClientId && e.wsUrl && v();
+    }), I(() => {
+      e.screenClientId && e.wsUrl && v();
+    }), _(() => {
+      o.value && o.value.close(), n && n.close();
+    }), (t, a) => D(t.$slots, "default");
+  }
+}), L = (r) => {
+  r.component("VirtualHumanPersona", O), r.component("VirtualHumanEventAdapter", J);
+}, G = {
+  install: L
+};
+export {
+  J as VirtualHumanEventAdapter,
+  O as VirtualHumanPersona,
+  G as default
+};

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

@@ -0,0 +1 @@
+(function(u,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],e):(u=typeof globalThis<"u"?globalThis:u||self,e(u.VirtualHumanCf={},u.Vue))})(this,function(u,e){"use strict";const U={class:"video-wrapper"},_=["src","muted"],A={class:"overlay"},E={key:0,class:"status-badge paused"},H={key:1,class:"status-badge playing"},P=((l,y)=>{const t=l.__vccOpts||l;for(const[s,r]of y)t[s]=r;return t})(e.defineComponent({__name:"VirtualHumanPersona",props:{videoSrc:{type:String,required:!0},visible:{type:Boolean,default:!0},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(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(null),a=e.ref(!1),f=()=>{if(d.value&&d.value.close(),!(!t.wsUrl||!t.screenClientId))try{const c=new URL(t.wsUrl);c.searchParams.append("sessionId",t.screenClientId+"-persona"),d.value=new WebSocket(c.toString()),d.value.onopen=()=>{a.value=!0,console.log(`[VirtualHumanPersona] Connected to ${t.wsUrl} for session ${t.screenClientId}-persona`)},d.value.onmessage=n=>{try{const o=JSON.parse(n.data);w(o)}catch(o){console.error("[VirtualHumanPersona] Failed to parse message:",n.data,o)}},d.value.onerror=n=>{console.error("[VirtualHumanPersona] WebSocket error:",n)},d.value.onclose=()=>{a.value=!1,console.log("[VirtualHumanPersona] WebSocket disconnected")}}catch(c){console.error("[VirtualHumanPersona] Failed to initialize WebSocket:",c)}},w=c=>{const{type:n,action:o}=c;n==="control"&&(o==="play"?(s("update:isPlaying",!0),s("update:visible",!0)):o==="pause"?(s("update:isPlaying",!1),s("update:visible",!1)):o==="stop"&&(s("update:isPlaying",!1),s("update:visible",!1),r.value&&(r.value.currentTime=0)))};e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&f()}),e.watch(()=>t.isPlaying,c=>{r.value&&(c?r.value.play().catch(n=>console.error("Video play failed:",n)):r.value.pause())});const k=()=>{t.isPlaying||s("update:isPlaying",!0)},b=()=>{t.isPlaying&&s("update:isPlaying",!1)},g=()=>{s("update:isPlaying",!1),s("ended")};return e.onMounted(()=>{t.isPlaying&&r.value&&r.value.play().catch(c=>console.error("Video play failed:",c)),t.screenClientId&&t.wsUrl&&f()}),e.onUnmounted(()=>{d.value&&d.value.close()}),(c,n)=>(e.openBlock(),e.createBlock(e.Transition,{name:"fade"},{default:e.withCtx(()=>[l.visible?(e.openBlock(),e.createElementBlock("div",{key:0,class:e.normalizeClass(["virtual-human-container",{"is-dark":l.isDark}])},[e.createElementVNode("div",U,[e.createElementVNode("video",{ref_key:"videoRef",ref:r,src:l.videoSrc,class:"persona-video",muted:l.muted,playsinline:"",loop:"",onPlay:k,onPause:b,onEnded:g},null,40,_),e.createElementVNode("div",A,[l.isPlaying?(e.openBlock(),e.createElementBlock("div",H,[...n[1]||(n[1]=[e.createElementVNode("span",{class:"dot animate-pulse"},null,-1),e.createTextVNode(" 播放中 ",-1)])])):(e.openBlock(),e.createElementBlock("div",E,[...n[0]||(n[0]=[e.createElementVNode("span",{class:"dot"},null,-1),e.createTextVNode(" 暂停中 ",-1)])]))])])],2)):e.createCommentVNode("",!0)]),_:1}))}}),[["__scopeId","data-v-288a71c0"]]),S=e.defineComponent({__name:"VirtualHumanEventAdapter",props:{screenClientId:{type:String,required:!0},wsUrl:{type:String,required:!0}},emits:["highlight","showDialog","end","pause","connected","error"],setup(l,{emit:y}){const t=l,s=y,r=e.ref(null),d=e.ref(!1);let a=null,f=0;const w=()=>{a||(a=new(window.AudioContext||window.webkitAudioContext)({sampleRate:24e3})),a.state==="suspended"&&a.resume()},k=n=>{if(w(),!!a)try{const o=window.atob(n),i=o.length,h=new Uint8Array(i);for(let p=0;p<i;p++)h[p]=o.charCodeAt(p);const m=new Int16Array(h.buffer),v=new Float32Array(m.length);for(let p=0;p<m.length;p++)v[p]=m[p]/32768;const C=a.createBuffer(1,v.length,24e3);C.getChannelData(0).set(v);const V=a.createBufferSource();V.buffer=C,V.connect(a.destination),f<a.currentTime&&(f=a.currentTime),V.start(f),f+=C.duration}catch(o){console.error("[VirtualHumanEventAdapter] Failed to decode and play audio:",o)}},b=n=>{if(a)switch(n){case"play":a.state==="suspended"&&a.resume();break;case"pause":a.state==="running"&&a.suspend();break;case"stop":a.close(),a=null,f=0;break;default:console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${n}`)}},g=()=>{r.value&&r.value.close();try{const n=new URL(t.wsUrl);n.searchParams.append("sessionId",t.screenClientId+"-event"),r.value=new WebSocket(n.toString()),r.value.onopen=()=>{d.value=!0,s("connected"),console.log(`[VirtualHumanEventAdapter] Connected to ${t.wsUrl} for session ${t.screenClientId}-event`)},r.value.onmessage=o=>{try{const i=JSON.parse(o.data);c(i)}catch(i){console.error("[VirtualHumanEventAdapter] Failed to parse message:",o.data,i)}},r.value.onerror=o=>{console.error("[VirtualHumanEventAdapter] WebSocket error:",o),s("error",o)},r.value.onclose=()=>{d.value=!1,console.log("[VirtualHumanEventAdapter] WebSocket disconnected")}}catch(n){console.error("[VirtualHumanEventAdapter] Failed to initialize WebSocket:",n),s("error",n)}},c=n=>{const{type:o,payload:i,action:h}=n;switch(o){case"audio":const m=(i==null?void 0:i.data)||n.data;m&&k(m);break;case"dialog_event":n.event&&s(n.event,n.params);break;case"control":h&&b(h);break;case"highlight":s("highlight",i);break;case"showDialog":s("showDialog",i);break;case"end":s("end",i);break;case"pause":s("pause",i);break;default:console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${o}`)}};return e.watch(()=>t.screenClientId,()=>{t.screenClientId&&t.wsUrl&&g()}),e.watch(()=>t.wsUrl,()=>{t.screenClientId&&t.wsUrl&&g()}),e.onMounted(()=>{t.screenClientId&&t.wsUrl&&g()}),e.onUnmounted(()=>{r.value&&r.value.close(),a&&a.close()}),(n,o)=>e.renderSlot(n.$slots,"default")}}),I={install:l=>{l.component("VirtualHumanPersona",P),l.component("VirtualHumanEventAdapter",S)}};u.VirtualHumanEventAdapter=S,u.VirtualHumanPersona=P,u.default=I,Object.defineProperties(u,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -0,0 +1,38 @@
+{
+  "name": "virtual-human-cf",
+  "version": "1.0.0",
+  "description": "Vue3 Digital Human Component Package by cf ",
+  "main": "dist/virtual-human-cf.umd.js",
+  "module": "dist/virtual-human-cf.es.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/virtual-human-cf.es.js",
+      "require": "./dist/virtual-human-cf.umd.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc --noEmit && vite build"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.0",
+    "typescript": "^5.9.3",
+    "vite": "^5.0.0",
+    "vite-plugin-dts": "^3.0.0",
+    "vue": "^3.4.0",
+    "vue-tsc": "^3.2.6"
+  },
+  "keywords": [
+    "vue",
+    "virtual-human",
+    "component"
+  ],
+  "author": "cuihan",
+  "license": "MIT"
+}

package/src/components/VirtualHumanEventAdapter.vue

@@ -0,0 +1,205 @@
+<template>
+  <slot></slot>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  screenClientId: {
+    type: String,
+    required: true,
+  },
+  wsUrl: {
+    type: String,
+    required: true,
+  }
+});
+
+const emit = defineEmits(['highlight', 'showDialog', 'end', 'pause', 'connected', 'error']);
+
+const ws = ref<WebSocket | null>(null);
+const isConnected = ref(false);
+
+// Audio playback variables
+let audioContext: AudioContext | null = null;
+let nextStartTime = 0;
+
+const initAudioContext = () => {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || (window as any).webkitAudioContext)({
+      sampleRate: 24000
+    });
+  }
+  if (audioContext.state === 'suspended') {
+    audioContext.resume();
+  }
+};
+
+const handleAudioMessage = (base64Data: string) => {
+  initAudioContext();
+  if (!audioContext) return;
+
+  try {
+    const binaryString = window.atob(base64Data);
+    const len = binaryString.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+      bytes[i] = binaryString.charCodeAt(i);
+    }
+    
+    // 16-bit PCM is 2 bytes per sample
+    const int16Array = new Int16Array(bytes.buffer);
+    const float32Array = new Float32Array(int16Array.length);
+    for (let i = 0; i < int16Array.length; i++) {
+      float32Array[i] = int16Array[i] / 32768.0; // convert to range -1 to 1
+    }
+
+    const audioBuffer = audioContext.createBuffer(1, float32Array.length, 24000);
+    audioBuffer.getChannelData(0).set(float32Array);
+
+    const source = audioContext.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(audioContext.destination);
+
+    // Keep track of the start time for seamless playback
+    if (nextStartTime < audioContext.currentTime) {
+      nextStartTime = audioContext.currentTime;
+    }
+    source.start(nextStartTime);
+    nextStartTime += audioBuffer.duration;
+  } catch (error) {
+    console.error('[VirtualHumanEventAdapter] Failed to decode and play audio:', error);
+  }
+};
+
+const handleControlMessage = (action: string) => {
+  if (!audioContext) return;
+  switch (action) {
+    case 'play':
+      if (audioContext.state === 'suspended') {
+        audioContext.resume();
+      }
+      break;
+    case 'pause':
+      if (audioContext.state === 'running') {
+        audioContext.suspend();
+      }
+      break;
+    case 'stop':
+      audioContext.close();
+      audioContext = null;
+      nextStartTime = 0;
+      break;
+    default:
+      console.warn(`[VirtualHumanEventAdapter] Unknown control action: ${action}`);
+  }
+};
+
+const connectWebSocket = () => {
+  if (ws.value) {
+    ws.value.close();
+  }
+
+  try {
+    const url = new URL(props.wsUrl);
+    url.searchParams.append('sessionId', props.screenClientId + '-event');
+    ws.value = new WebSocket(url.toString());
+
+    ws.value.onopen = () => {
+      isConnected.value = true;
+      emit('connected');
+      console.log(`[VirtualHumanEventAdapter] Connected to ${props.wsUrl} for session ${props.screenClientId}-event`);
+    };
+
+    ws.value.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        handleMessage(message);
+      } catch (e) {
+        console.error('[VirtualHumanEventAdapter] Failed to parse message:', event.data, e);
+      }
+    };
+
+    ws.value.onerror = (error) => {
+      console.error('[VirtualHumanEventAdapter] WebSocket error:', error);
+      emit('error', error);
+    };
+
+    ws.value.onclose = () => {
+      isConnected.value = false;
+      console.log('[VirtualHumanEventAdapter] WebSocket disconnected');
+    };
+  } catch (error) {
+    console.error('[VirtualHumanEventAdapter] Failed to initialize WebSocket:', error);
+    emit('error', error);
+  }
+};
+
+const handleMessage = (msg: any) => {
+  const { type, payload, action } = msg;
+  switch (type) {
+    case 'audio':
+      const base64Data = payload?.data || msg.data;
+      if (base64Data) {
+        handleAudioMessage(base64Data);
+      }
+      break;
+    case 'dialog_event':
+      if (msg.event) {
+        emit(msg.event as any, msg.params);
+      }
+      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);
+      break;
+    case 'pause':
+      // 触发暂停播放事件
+      emit('pause', payload);
+      break;
+    default:
+      console.warn(`[VirtualHumanEventAdapter] Unknown message type: ${type}`);
+  }
+};
+
+watch(() => props.screenClientId, () => {
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+watch(() => props.wsUrl, () => {
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+onMounted(() => {
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+onUnmounted(() => {
+  if (ws.value) {
+    ws.value.close();
+  }
+  if (audioContext) {
+    audioContext.close();
+  }
+});
+</script>

package/src/components/VirtualHumanPersona.vue

@@ -0,0 +1,274 @@
+<template>
+  <Transition name="fade">
+    <div
+      v-if="visible"
+      class="virtual-human-container"
+      :class="{ 'is-dark': isDark }"
+    >
+      <div class="video-wrapper">
+        <video
+          ref="videoRef"
+          :src="videoSrc"
+          class="persona-video"
+          :muted="muted"
+          playsinline
+          loop
+          @play="handlePlay"
+          @pause="handlePause"
+          @ended="handleEnded"
+        ></video>
+        
+        <!-- UI Overlay for controls or status -->
+        <div class="overlay">
+          <div v-if="!isPlaying" class="status-badge paused">
+            <span class="dot"></span>
+            暂停中
+          </div>
+          <div v-else class="status-badge playing">
+            <span class="dot animate-pulse"></span>
+            播放中
+          </div>
+        </div>
+      </div>
+    </div>
+  </Transition>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, onMounted, onUnmounted } from 'vue';
+
+const props = defineProps({
+  videoSrc: {
+    type: String,
+    required: true,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+  isPlaying: {
+    type: Boolean,
+    default: false,
+  },
+  muted: {
+    type: Boolean,
+    default: true, // Auto-play policies usually require muted
+  },
+  isDark: {
+    type: Boolean,
+    default: false,
+  },
+  screenClientId: {
+    type: String,
+    required: false,
+  },
+  wsUrl: {
+    type: String,
+    required: false,
+  }
+});
+
+const emit = defineEmits(['update:isPlaying', 'ended', 'update:visible']);
+
+const videoRef = ref<HTMLVideoElement | null>(null);
+
+const ws = ref<WebSocket | null>(null);
+const isConnected = ref(false);
+
+const connectWebSocket = () => {
+  if (ws.value) {
+    ws.value.close();
+  }
+
+  if (!props.wsUrl || !props.screenClientId) return;
+
+  try {
+    const url = new URL(props.wsUrl);
+    url.searchParams.append('sessionId', props.screenClientId + '-persona');
+    ws.value = new WebSocket(url.toString());
+
+    ws.value.onopen = () => {
+      isConnected.value = true;
+      console.log(`[VirtualHumanPersona] Connected to ${props.wsUrl} for session ${props.screenClientId}-persona`);
+    };
+
+    ws.value.onmessage = (event) => {
+      try {
+        const message = JSON.parse(event.data);
+        handleMessage(message);
+      } catch (e) {
+        console.error('[VirtualHumanPersona] Failed to parse message:', event.data, e);
+      }
+    };
+
+    ws.value.onerror = (error) => {
+      console.error('[VirtualHumanPersona] WebSocket error:', error);
+    };
+
+    ws.value.onclose = () => {
+      isConnected.value = false;
+      console.log('[VirtualHumanPersona] WebSocket disconnected');
+    };
+  } catch (error) {
+    console.error('[VirtualHumanPersona] Failed to initialize WebSocket:', error);
+  }
+};
+
+const handleMessage = (msg: any) => {
+  const { type, action } = msg;
+  if (type === 'control') {
+    if (action === 'play') {
+      emit('update:isPlaying', true);
+      emit('update:visible', true);
+    } else if (action === 'pause') {
+      emit('update:isPlaying', false);
+      emit('update:visible', false);
+    } else if (action === 'stop') {
+      emit('update:isPlaying', false);
+      emit('update:visible', false);
+      if (videoRef.value) {
+        videoRef.value.currentTime = 0;
+      }
+    }
+  }
+};
+
+watch(() => props.screenClientId, () => {
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+watch(() => props.wsUrl, () => {
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+watch(() => props.isPlaying, (newVal) => {
+  if (videoRef.value) {
+    if (newVal) {
+      videoRef.value.play().catch(e => console.error('Video play failed:', e));
+    } else {
+      videoRef.value.pause();
+    }
+  }
+});
+
+const handlePlay = () => {
+  if (!props.isPlaying) {
+    emit('update:isPlaying', true);
+  }
+};
+
+const handlePause = () => {
+  if (props.isPlaying) {
+    emit('update:isPlaying', false);
+  }
+};
+
+const handleEnded = () => {
+  emit('update:isPlaying', false);
+  emit('ended');
+};
+
+onMounted(() => {
+  if (props.isPlaying && videoRef.value) {
+    videoRef.value.play().catch(e => console.error('Video play failed:', e));
+  }
+  if (props.screenClientId && props.wsUrl) {
+    connectWebSocket();
+  }
+});
+
+onUnmounted(() => {
+  if (ws.value) {
+    ws.value.close();
+  }
+});
+</script>
+
+<style scoped>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease, transform 0.5s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translateY(10px);
+}
+
+.virtual-human-container {
+  position: relative;
+  width: 100%;
+  max-width: 400px;
+  border-radius: 1rem;
+  overflow: hidden;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
+  background: #ffffff;
+  transition: background-color 0.3s ease;
+}
+
+.virtual-human-container.is-dark {
+  background: #1f2937;
+  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
+}
+
+.video-wrapper {
+  position: relative;
+  width: 100%;
+  aspect-ratio: 9 / 16; /* Portrait ratio for digital human */
+  background: #000;
+}
+
+.persona-video {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.overlay {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 10;
+}
+
+.status-badge {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0.25rem 0.75rem;
+  border-radius: 9999px;
+  font-size: 0.75rem;
+  font-weight: 500;
+  color: white;
+  backdrop-filter: blur(4px);
+}
+
+.status-badge.paused {
+  background: rgba(239, 68, 68, 0.8); /* red-500 */
+}
+
+.status-badge.playing {
+  background: rgba(34, 197, 94, 0.8); /* green-500 */
+}
+
+.dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: white;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+.animate-pulse {
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+}
+</style>

package/src/index.ts

@@ -0,0 +1,16 @@
+import type { App, Plugin } from 'vue';
+import VirtualHumanPersona from './components/VirtualHumanPersona.vue';
+import VirtualHumanEventAdapter from './components/VirtualHumanEventAdapter.vue';
+
+// 导出组件供按需引入
+export { VirtualHumanPersona, VirtualHumanEventAdapter };
+
+// 提供全局安装的插件方式
+const install = (app: App) => {
+  app.component('VirtualHumanPersona', VirtualHumanPersona);
+  app.component('VirtualHumanEventAdapter', VirtualHumanEventAdapter);
+};
+
+export default {
+  install,
+} as Plugin;

package/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "strict": true,
+    "jsx": "preserve",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "esModuleInterop": true,
+    "lib": ["ESNext", "DOM"],
+    "skipLibCheck": true,
+    "noEmit": true,
+    "declaration": true,
+    "declarationDir": "dist",
+    "outDir": "dist"
+  },
+  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/tsconfig.node.json

@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "Node",
+    "allowSyntheticDefaultImports": true,
+    "resolveJsonModule": true
+  },
+  "include": ["vite.config.ts"]
+}

package/vite.config.ts

@@ -0,0 +1,34 @@
+import { defineConfig } from 'vite';
+import vue from '@vitejs/plugin-vue';
+import dts from 'vite-plugin-dts';
+import { resolve } from 'path';
+
+export default defineConfig({
+  plugins: [
+    vue(),
+    dts({
+      insertTypesEntry: true,
+      include: ['src/**/*.ts', 'src/**/*.vue'],
+    }),
+  ],
+  build: {
+    lib: {
+      entry: resolve(__dirname, 'src/index.ts'),
+      name: 'VirtualHumanCf',
+      fileName: (format) => `virtual-human-cf.${format}.js`,
+    },
+    rollupOptions: {
+      // make sure to externalize deps that shouldn't be bundled
+      // into your library
+      external: ['vue'],
+      output: {
+        // Provide global variables to use in the UMD build
+        // for externalized deps
+        globals: {
+          vue: 'Vue',
+        },
+        exports: 'named',
+      },
+    },
+  },
+});