@scienjoy/sj-ai-plus 1.0.5 → 1.0.7

package/ui/es/packages/components/src/sjDigitalHumanAssistant/src/index.vue2.ts

@@ -1,27 +1,29 @@
-import { defineComponent as xe, ref as d, reactive as Ve, computed as _e, watch as te, nextTick as m, onMounted as Xe, onUnmounted as Ye, resolveDirective as Ie, openBlock as D, createElementBlock as F, normalizeStyle as Te, withDirectives as f, createElementVNode as n, vShow as w, normalizeClass as ke, toDisplayString as ne, withModifiers as oe, renderSlot as ae, createCommentVNode as A, createBlock as Be, Teleport as Oe } from "vue";
-import ie from "../../utils/api.ts";
-import Ce from "../../utils/utils.ts";
-import je from "../../utils/videoBackgroundRemoval.ts";
-const Ue = { class: "digital-human-assistant" }, ze = { class: "placeholder left-placeholder" }, Fe = { class: "placeholder right-placeholder" }, Ae = { class: "window-header-left" }, Ne = { class: "window-title-text" }, Ge = { class: "window-header-btns" }, Je = { class: "disconnect-btn" }, qe = {
+import { defineComponent as Se, useCssVars as Ye, ref as u, reactive as Be, computed as Te, watch as P, nextTick as p, onMounted as Ue, onUnmounted as Oe, resolveDirective as je, openBlock as S, createElementBlock as D, normalizeStyle as ke, withDirectives as w, createElementVNode as n, vShow as g, normalizeClass as J, toDisplayString as ae, withModifiers as se, renderSlot as le, createCommentVNode as $, createBlock as Ge, Teleport as ze } from "vue";
+import ce from "../../utils/api.ts";
+import q from "../../utils/utils.ts";
+import Fe from "../../utils/videoBackgroundRemoval.ts";
+const Ae = { class: "digital-human-assistant" }, Ne = { class: "placeholder left-placeholder" }, Je = { class: "placeholder right-placeholder" }, qe = { class: "window-header-left" }, Ke = { class: "window-title-text" }, Qe = { class: "window-header-btns" }, Ze = { class: "disconnect-btn" }, et = {
   class: "connect-btn",
   disabled: ""
-}, Ke = { class: "connect-btn" }, Qe = { class: "window-content" }, Ze = { class: "main-content-inner" }, et = { class: "window-header-left" }, tt = { class: "window-title-text" }, nt = { class: "window-header-btns" }, ot = { class: "disconnect-btn" }, at = {
+}, tt = { class: "connect-btn" }, nt = { class: "window-content" }, ot = { class: "main-content-inner" }, it = { class: "window-header-left" }, at = { class: "window-title-text" }, st = { class: "window-header-btns" }, lt = { class: "disconnect-btn" }, ct = {
   class: "connect-btn",
   disabled: ""
-}, it = { class: "connect-btn" }, lt = { class: "window-content" }, st = { class: "window-header-left" }, ct = { class: "window-title-text" }, dt = { class: "window-header-btns" }, ut = { class: "disconnect-btn" }, rt = {
+}, dt = { class: "connect-btn" }, ut = { class: "window-content" }, rt = { class: "window-header-left" }, vt = { class: "window-title-text" }, ft = { class: "window-header-btns" }, ht = { class: "disconnect-btn" }, wt = {
   class: "connect-btn",
   disabled: ""
-}, vt = { class: "connect-btn" }, ht = { class: "window-content" }, ft = xe({
+}, gt = { class: "connect-btn" }, mt = { class: "window-content" }, pt = {
+  key: 0,
+  class: "digital-video-loading"
+}, bt = Se({
   name: "SjDigitalHumanAssistant"
-}), bt = /* @__PURE__ */ xe({
-  ...ft,
+}), Tt = /* @__PURE__ */ Se({
+  ...bt,
   props: {
     windowWidth: { default: 320 },
     windowHeight: { default: 467 },
     windowTitle: { default: "数字人助手" },
     sidebarWidth: { default: "25%" },
-    sidebarLeftTitle: { default: "左侧业务区" },
-    sidebarRightTitle: { default: "右侧业务区" },
+    sidebarBgColor: { default: "#ffffff" },
     edgeThreshold: { default: 10 },
     dragThreshold: { default: 8 },
     defaultStickSide: { default: "" },
@@ -30,440 +32,439 @@ const Ue = { class: "digital-human-assistant" }, ze = { class: "placeholder left
     maxReconnectTimes: { default: 10 },
     baseUrl: { default: "" }
   },
-  setup($, { expose: Se }) {
-    const o = $, le = d(null), se = d(null), u = d(null), a = d(null), p = je(), ce = d(null), de = d(null), ue = d(null), P = d(null), E = d(!1), c = d(!1), h = d(!1), re = d(!0), V = d(!1), r = Ve({
+  setup(V, { expose: Ee }) {
+    Ye((e) => ({
+      f2c09f26: e.sidebarBgColor
+    }));
+    const i = V, de = u(null), ue = u(null), s = u(null), o = u(null), re = u(null), ve = u(null), fe = u(null), X = u(null), r = Fe(), E = u(!1), l = u(!1), f = u(!1), x = u(!1), he = u(!0), Y = u(!1), h = u(i.defaultStickSide), B = u(!1), R = u(!1), M = u(!1), K = u(!1), Q = u(!1);
+    let d = null, b = "";
+    const U = u(null), y = u(0), O = u(!1), L = u(!1), v = Be({
       x: 0,
       y: 0,
       offsetX: 0,
       offsetY: 0
-    }), v = d(o.defaultStickSide), X = d(!1), R = d(!1), L = d(!1), N = d(!1), G = d(!1);
-    let s = null, b = "";
-    const Y = d(null), y = d(0), I = d(!1), H = d(!1), Ee = _e(() => ({
-      "--sidebar-width": o.sidebarWidth,
-      "--window-width": `${o.windowWidth}px`,
-      "--window-height": `${o.windowHeight}px`
-    })), Le = _e(() => ({
-      left: `${r.x}px`,
-      top: `${r.y}px`,
-      width: `${o.windowWidth}px`,
-      height: `${o.windowHeight}px`,
-      zIndex: X.value || L.value ? 9999 : 1e3
-    })), He = (t) => {
-      !t && u.value ? (I.value = !1, y.value = 0, pe()) : t ? (I.value = !0, $e()) : console.warn("自动连接超时：video元素未挂载"), re.value = t;
-    }, B = (t) => {
-      He(!t), V.value = t, t && c.value && m(() => g());
-    }, Me = () => {
-      B(!0);
-    }, ve = () => {
-      switch (v.value) {
+    }), xe = Te(() => ({
+      "--sidebar-width": i.sidebarWidth,
+      "--window-width": `${i.windowWidth}px`,
+      "--window-height": `${i.windowHeight}px`
+    })), Me = Te(() => ({
+      left: `${v.x}px`,
+      top: `${v.y}px`,
+      width: `${i.windowWidth}px`,
+      height: `${i.windowHeight}px`,
+      zIndex: B.value || M.value ? 9999 : 1e3
+    })), Le = (e) => {
+      !e && s.value ? (O.value = !1, y.value = 0, Re()) : e ? (O.value = !0, Ve()) : console.warn("❌ 自动连接超时：video元素未挂载"), he.value = e;
+    }, j = (e) => {
+      Le(!e), Y.value = e, e && l.value ? p(() => m()) : e || (x.value = !1);
+    }, He = () => {
+      j(!0);
+    }, we = () => {
+      switch (h.value) {
         case "left":
-          return de.value ?? P.value;
+          return ve.value ?? X.value;
         case "right":
-          return ue.value ?? P.value;
+          return fe.value ?? X.value;
         default:
-          return ce.value ?? P.value;
+          return re.value ?? X.value;
       }
-    }, C = () => se.value?.getBoundingClientRect() || {
+    }, G = () => ue.value?.getBoundingClientRect() || {
       width: 0,
       height: 0,
       left: 0,
       right: 0,
       top: 0,
       bottom: 0
-    }, he = () => le.value?.getBoundingClientRect() || {
+    }, ge = () => de.value?.getBoundingClientRect() || {
       width: 0,
       height: 0,
       left: 0,
       right: 0,
       top: 0,
       bottom: 0
-    }, J = (t, e) => {
-      const i = C();
+    }, Z = (e, t) => {
+      const c = window.innerWidth || document.documentElement.clientWidth, a = window.innerHeight || document.documentElement.clientHeight;
       return {
-        x: Math.max(0, Math.min(t, i.width - o.windowWidth)),
-        y: Math.max(0, Math.min(e, i.height - o.windowHeight))
+        x: Math.max(0, Math.min(e, c - i.windowWidth)),
+        y: Math.max(0, Math.min(t, a - i.windowHeight))
       };
-    }, fe = () => {
-      const t = C(), e = t.width - o.windowWidth - 10, i = t.height - o.windowHeight - 10;
-      return J(e, i);
-    }, we = () => {
-      const t = C(), e = he();
-      N.value = e.left <= t.left + o.edgeThreshold, G.value = e.right >= t.right - o.edgeThreshold;
-    }, ge = () => {
-      const t = C(), e = he(), i = e.left <= t.left + o.edgeThreshold ? "left" : e.right >= t.right - o.edgeThreshold ? "right" : "";
-      i !== v.value && (v.value = i, u.value && (u.value.volume = i ? 0.5 : 1), M(), g()), N.value = G.value = !1;
-    }, We = (t) => {
-      X.value = !0, r.offsetX = t.clientX - r.x, r.offsetY = t.clientY - r.y, document.addEventListener("mousemove", q), document.addEventListener("mouseup", K);
-    }, q = (t) => {
-      if (!X.value) return;
-      const e = C(), { x: i, y: l } = J(t.clientX - e.left - r.offsetX, t.clientY - e.top - r.offsetY);
-      r.x = i, r.y = l, we();
-    }, K = () => {
-      ge(), X.value = !1, document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", K);
-    }, me = (t, e) => {
-      R.value = !0, r.offsetX = e.clientX - (e.clientX - o.windowWidth / 2), r.offsetY = e.clientY - (e.clientY - 20), document.addEventListener("mousemove", O);
-    }, O = (t) => {
+    }, me = () => {
+      const e = window.innerWidth || document.documentElement.clientWidth, t = window.innerHeight || document.documentElement.clientHeight, c = e - i.windowWidth - 10, a = t - i.windowHeight - 10;
+      return Z(c, a);
+    }, pe = () => {
+      const e = G(), t = ge();
+      K.value = t.left <= e.left + i.edgeThreshold, Q.value = t.right >= e.right - i.edgeThreshold;
+    }, be = () => {
+      const e = G(), t = ge(), c = t.left <= e.left + i.edgeThreshold ? "left" : t.right >= e.right - i.edgeThreshold ? "right" : "";
+      c !== h.value && (h.value = c, s.value && (s.value.volume = c ? 0.5 : 1), H(), m()), K.value = Q.value = !1;
+    }, Ie = () => {
+      x.value = !0;
+    }, Pe = () => {
+      x.value = !1;
+    }, De = (e) => {
+      B.value = !0, v.offsetX = e.clientX - v.x, v.offsetY = e.clientY - v.y, document.addEventListener("mousemove", ee), document.addEventListener("mouseup", te);
+    }, ee = (e) => {
+      if (!B.value) return;
+      const t = G(), { x: c, y: a } = Z(e.clientX - t.left - v.offsetX, e.clientY - t.top - v.offsetY);
+      v.x = c, v.y = a, pe();
+    }, te = () => {
+      be(), B.value = !1, document.removeEventListener("mousemove", ee), document.removeEventListener("mouseup", te);
+    }, ye = (e, t) => {
+      R.value = !0, v.offsetX = t.clientX - (t.clientX - i.windowWidth / 2), v.offsetY = t.clientY - (t.clientY - 20), document.addEventListener("mousemove", z);
+    }, z = (e) => {
       if (!R.value) return;
-      const e = Math.abs(t.movementX), i = Math.abs(t.movementY);
-      (e > o.dragThreshold || i > o.dragThreshold) && (L.value = !0, v.value = "", document.removeEventListener("mousemove", O), document.addEventListener("mousemove", Q), document.addEventListener("mouseup", Z));
-    }, Q = (t) => {
-      if (!L.value) return;
-      const e = C(), { x: i, y: l } = J(t.clientX - e.left - r.offsetX, t.clientY - e.top - r.offsetY);
-      r.x = i, r.y = l, we();
-    }, Z = () => {
-      ge(), R.value = L.value = !1, document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", Z);
-    }, j = () => {
-      R.value && !L.value && (R.value = !1, document.removeEventListener("mousemove", O));
-    }, ee = async (t) => {
-      if (!c.value || !b)
-        return;
-      await x(), console.log("已打断当前对话，准备播放新文本：", t);
-      const e = {
-        text: t,
+      const t = Math.abs(e.movementX), c = Math.abs(e.movementY);
+      (t > i.dragThreshold || c > i.dragThreshold) && (M.value = !0, h.value = "", document.removeEventListener("mousemove", z), document.addEventListener("mousemove", ne), document.addEventListener("mouseup", oe));
+    }, ne = (e) => {
+      if (!M.value) return;
+      const t = G(), { x: c, y: a } = Z(e.clientX - t.left - v.offsetX, e.clientY - t.top - v.offsetY);
+      v.x = c, v.y = a, pe();
+    }, oe = () => {
+      be(), R.value = M.value = !1, document.removeEventListener("mousemove", ne), document.removeEventListener("mouseup", oe);
+    }, F = () => {
+      R.value && !M.value && (R.value = !1, document.removeEventListener("mousemove", z));
+    }, ie = async (e) => {
+      if (!l.value || !b) return;
+      await T(), console.log("✅ 准备播放文本：", e);
+      const t = {
+        text: e,
         type: "echo",
         interrupt: !0,
         sessionid: parseInt(b)
       };
-      ie.digitalHumanChat(o.baseUrl, e).then((i) => {
-        i && Number(i.code);
-      }).catch((i) => {
-        console.log("api.digitalHumanChat：", i);
+      ce.digitalHumanChat(i.baseUrl, t).then((c) => {
+        c && Number(c.code) === 0 && console.log("✅ 播放指令发送成功");
+      }).catch((c) => {
+        console.error("❌ 播放指令发送失败:", c);
       });
-    }, x = async () => {
-      if (!c.value || !b) return;
-      const t = {
-        sessionid: parseInt(b)
-      };
-      ie.digitalHumanInterruptTalk(o.baseUrl, t).then((e) => {
-        e && Number(e.code) === 0 && console.log("数字人对话已成功打断");
-      }).catch((e) => {
-        console.log("api.digitalHumanInterruptTalk：", e);
+    }, T = async () => {
+      if (!l.value || !b) return;
+      const e = { sessionid: parseInt(b) };
+      ce.digitalHumanInterruptTalk(i.baseUrl, e).then((t) => {
+        t && Number(t.code) === 0 && console.log("✅ 对话已打断");
+      }).catch((t) => {
+        console.error("❌ 打断对话失败:", t);
       });
-    }, S = () => {
-      Y.value && (clearTimeout(Y.value), Y.value = null, console.log("重连定时器已清除")), H.value = !1;
-    }, M = (t = !1) => {
-      if (!a.value) return;
-      t || p.stopProcessing();
-      const e = a.value.getContext("2d");
-      if (e && (e.clearRect(0, 0, a.value.width, a.value.height), !t)) {
-        const i = a.value.width, l = a.value.height;
-        a.value.width = i, a.value.height = l;
+    }, k = () => {
+      U.value && (clearTimeout(U.value), U.value = null), L.value = !1, console.log("✅ 重连定时器已清除");
+    }, H = (e = !1) => {
+      if (!o.value) return;
+      e || r.stopProcessing();
+      const t = o.value.getContext("2d");
+      if (t && (t.clearRect(0, 0, o.value.width, o.value.height), !e)) {
+        const c = o.value.width, a = o.value.height;
+        o.value.width = c, o.value.height = a;
       }
-      a.value && !t && (a.value.style.width = "", a.value.style.height = "", v.value === "" && (a.value.style.marginLeft = "", a.value.style.marginTop = ""));
-    }, g = async (t = !1) => {
-      if (!u.value || !a.value || !E.value || !c.value) return;
-      await m();
-      const e = u.value.videoWidth || o.windowWidth, i = u.value.videoHeight || o.windowHeight, l = e / i;
-      console.log("视频原始宽高比：", l, "尺寸：", e, i);
-      let _;
-      const ye = ve();
-      ye ? _ = ye.getBoundingClientRect() : _ = {
-        width: v.value ? 0 : o.windowWidth,
-        height: v.value ? 0 : o.windowHeight,
-        left: 0,
-        top: 0,
-        right: 0,
-        bottom: 0
-      };
-      const U = _.width || (v.value ? 300 : o.windowWidth), z = _.height || (v.value ? window.innerHeight - 40 : o.windowHeight), Pe = U / z;
-      let T, k;
-      Pe > l ? (k = z, T = k * l) : (T = U, k = T / l);
-      const Re = window.devicePixelRatio || 1;
-      a.value.width = Math.floor(T * Re), a.value.height = Math.floor(k * Re), a.value.style.display = "block", a.value.style.objectFit = "contain", v.value === "" ? (a.value.style.width = `${T}px`, a.value.style.height = `${k}px`, a.value.style.marginLeft = `${(U - T) / 2}px`, a.value.style.marginTop = `${(z - k) / 2}px`) : (a.value.style.width = "100%", a.value.style.height = "100%", a.value.style.marginLeft = "0", a.value.style.marginTop = "0"), console.log("Canvas适配完成：", {
-        mode: v.value || "浮动",
-        container: { width: U, height: z },
-        canvas: { drawWidth: T, drawHeight: k, physicalWidth: a.value.width, physicalHeight: a.value.height }
-      }), t || (p.videoRef.value = u.value, p.canvasRef.value = a.value, await p.processVideo());
-    }, W = () => {
-      if (I.value || c.value || h.value || H.value) {
-        console.log("重连条件不满足：手动断开/已连接/正在连接/正在冷却");
+      o.value && !e && (o.value.style.width = "", o.value.style.height = "", h.value === "" && (o.value.style.marginLeft = "", o.value.style.marginTop = ""));
+    }, m = async (e = !1) => {
+      if (!s.value || !o.value || !E.value || !l.value) return;
+      await p();
+      const t = s.value.videoWidth || i.windowWidth, c = s.value.videoHeight || i.windowHeight, a = t / c;
+      let C;
+      const _e = we();
+      _e ? C = _e.getBoundingClientRect() : C = { width: 0, height: 0, left: 0, top: 0, right: 0, bottom: 0 };
+      const A = C.width || (h.value ? 300 : i.windowWidth), N = C.height || (h.value ? window.innerHeight - 40 : i.windowHeight), Xe = A / N;
+      let _, W;
+      Xe > a ? (W = N, _ = W * a) : (_ = A, W = _ / a);
+      const We = window.devicePixelRatio || 1;
+      o.value.width = Math.floor(_ * We), o.value.height = Math.floor(W * We), o.value.style.display = "block", o.value.style.objectFit = "contain", h.value === "" ? (o.value.style.width = `${_}px`, o.value.style.height = `${W}px`, o.value.style.marginLeft = `${(A - _) / 2}px`, o.value.style.marginTop = `${(N - W) / 2}px`) : (o.value.style.width = "100%", o.value.style.height = "100%", o.value.style.marginLeft = "0", o.value.style.marginTop = "0"), console.log("✅ Canvas适配完成：", {
+        mode: h.value || "浮动",
+        container: { width: A, height: N },
+        canvas: { drawWidth: _, drawHeight: W }
+      }), e || (r.videoRef.value = s.value, r.canvasRef.value = o.value, await r.processVideo()), !r.isInitSuccess.value && l.value && (console.log("🔄 检测到WebGPU未初始化，触发手动重连"), await r.reInitWebGPU() && await r.processVideo());
+    }, I = () => {
+      if (O.value || l.value || f.value || L.value) {
+        console.log("🚫 重连条件不满足");
         return;
       }
-      if (x().then(() => {
-        console.log("重连前已打断当前对话");
-      }), o.maxReconnectTimes !== -1 && y.value >= o.maxReconnectTimes) {
-        console.warn(`数字人重连已达最大次数(${o.maxReconnectTimes})，停止重连`), S(), Ce.funcElMessageShowCtrl(`数字人连接失败，已尝试${o.maxReconnectTimes}次重连，请重试！`), y.value = 0;
+      if (T(), i.maxReconnectTimes !== -1 && y.value >= i.maxReconnectTimes) {
+        console.warn(`🚫 重连已达最大次数(${i.maxReconnectTimes})`), k(), q.funcElMessageShowCtrl(`❌ 数字人连接失败，已尝试${i.maxReconnectTimes}次重连，请重试！`, "error"), y.value = 0;
         return;
       }
-      H.value = !0, Y.value = setTimeout(() => {
+      L.value = !0, U.value = setTimeout(() => {
         try {
-          y.value++, console.log(`数字人第${y.value}次重连... (最大次数：${o.maxReconnectTimes})`), pe();
+          y.value++, console.log(`🔄 第${y.value}次重连WebRTC...`), r.stopProcessing(), Re();
         } finally {
-          H.value = !1;
+          L.value = !1;
         }
-      }, o.reconnectInterval * 1e3);
-    }, De = async () => {
-      if (s)
+      }, i.reconnectInterval * 1e3);
+    }, $e = async () => {
+      if (d)
         try {
-          s.addTransceiver("video", { direction: "recvonly" }), s.addTransceiver("audio", { direction: "recvonly" });
-          const t = await s.createOffer();
-          await s.setLocalDescription(t), await new Promise((l) => {
-            if (s?.iceGatheringState === "complete")
-              l();
+          d.addTransceiver("video", { direction: "recvonly" }), d.addTransceiver("audio", { direction: "recvonly" });
+          const e = await d.createOffer();
+          await d.setLocalDescription(e), await new Promise((a) => {
+            if (d?.iceGatheringState === "complete")
+              a();
             else {
-              const _ = () => {
-                s?.iceGatheringState === "complete" && (s?.removeEventListener("icegatheringstatechange", _), l());
+              const C = () => {
+                d?.iceGatheringState === "complete" && (d?.removeEventListener("icegatheringstatechange", C), a());
               };
-              s?.addEventListener("icegatheringstatechange", _);
+              d?.addEventListener("icegatheringstatechange", C);
             }
           });
-          const e = s.localDescription, i = {
-            sdp: e.sdp,
-            type: e.type
-          };
-          ie.digitalHumanOffer(o.baseUrl, i).then((l) => {
-            l ? (b = l.sessionid, s.setRemoteDescription(new RTCSessionDescription(l)), c.value = !0, y.value = 0, S(), console.log("数字人连接成功，重置重连状态"), m(() => g())) : (c.value = !1, console.log("数字人连接失败：接口返回空"), W()), h.value = !1;
-          }).catch((l) => {
-            console.error("api.digitalHumanOffer 失败：", l), c.value = !1, h.value = !1, W();
+          const t = d.localDescription, c = { sdp: t.sdp, type: t.type };
+          ce.digitalHumanOffer(i.baseUrl, c).then((a) => {
+            a ? (b = a.sessionid, d.setRemoteDescription(new RTCSessionDescription(a)), l.value = !0, y.value = 0, k(), console.log("✅ WebRTC连接成功"), p(() => m())) : (l.value = !1, console.log("❌ WebRTC连接失败：接口返回空"), I()), f.value = !1;
+          }).catch((a) => {
+            console.error("❌ WebRTC Offer发送失败:", a), l.value = !1, f.value = !1, I();
           });
-        } catch (t) {
-          console.error("negotiate 失败：", t), c.value = !1, h.value = !1, W();
+        } catch (e) {
+          console.error("❌ WebRTC协商失败:", e), l.value = !1, f.value = !1, I();
         }
-    }, pe = () => {
-      if (c.value || h.value) {
-        console.log("当前已连接/正在连接，无需重复触发");
-        return;
-      }
-      h.value = !0, console.log("开始建立数字人连接...");
-      const t = {
-        sdpSemantics: "unified-plan"
-      };
-      s && (s.close(), s = null), s = new RTCPeerConnection(t), s.addEventListener("track", (e) => {
-        e.track.kind === "video" && u.value && (u.value.srcObject = e.streams[0], u.value.onloadedmetadata = async () => {
-          u.value && a.value && (p.videoRef.value = u.value, p.canvasRef.value = a.value, await g(), await p.processVideo());
-        }, u.value.onresize = () => {
-          g();
+    }, Re = () => {
+      if (l.value || f.value) return;
+      f.value = !0, console.log("🔄 开始建立WebRTC连接..."), d && (d.close(), d = null);
+      const e = { sdpSemantics: "unified-plan" };
+      d = new RTCPeerConnection(e), d.addEventListener("track", (t) => {
+        t.track.kind === "video" && s.value && (s.value.srcObject = t.streams[0], s.value.onloadedmetadata = async () => {
+          s.value && o.value && (r.videoRef.value = s.value, r.canvasRef.value = o.value, await m(), await r.processVideo());
+        }, s.value.onresize = () => {
+          m(!0);
         });
-      }), s.addEventListener("iceconnectionstatechange", () => {
-        switch (console.log("ICE连接状态变化：", s.iceConnectionState), s.iceConnectionState) {
+      }), d.addEventListener("iceconnectionstatechange", () => {
+        switch (console.log("📶 ICE状态变化：", d.iceConnectionState), d.iceConnectionState) {
           case "disconnected":
           case "failed":
           case "closed":
-            console.log("WebRTC连接断开/失败，触发重连"), c.value = !1, h.value = !1, s = null, b = "", u.value && (u.value.srcObject = null), M(), x().then(() => {
-              console.log("ICE连接断开，已打断对话");
-            }), W();
+            console.log("📶 ICE连接断开，触发重连"), l.value = !1, f.value = !1, d = null, b = "", s.value && (s.value.srcObject = null), H(), T(), I();
             break;
           case "connected":
-            y.value = 0, S(), console.log("ICE连接成功，重置重连状态"), m(() => g());
+            console.log("📶 ICE连接成功"), y.value = 0, k(), p(async () => {
+              !r.isInitSuccess.value && l.value && await r.reInitWebGPU() && await r.processVideo();
+            });
             break;
         }
-      }), De();
-    }, $e = () => {
-      I.value = !0, S(), h.value = !1, p.stopProcessing(), M(), x().then(() => {
-        console.log("手动断开连接，已打断当前对话");
-      }), setTimeout(() => {
-        s && (s.close(), s = null), b = "", u.value && (u.value.srcObject = null), c.value = !1, y.value = 0, console.log("手动断开连接，重置所有状态");
-      }, 500);
-    };
-    Se({
-      digitalHumanChat: ee,
-      // 播放文本的核心方法
-      digitalHumanInterruptTalk: x,
-      // 打断方法
-      isConnected: c,
-      // 连接状态
-      isConnecting: h,
-      // 连接中状态
-      reconnect: W,
-      // 手动触发重连
-      clearReconnectTimer: S,
-      // 手动停止重连
-      currentReconnectTimes: y,
-      // 暴露当前重连次数，方便调试
-      isWaitingReconnect: H,
-      adaptCanvasToContainer: g
-      // 暴露适配方法，方便父组件调用
-    }), te(
-      v,
-      async (t, e) => {
-        !E.value || !u.value || (await m(), u.value.volume = t ? 0.5 : 1, c.value && (M(), await g()));
+      }), $e();
+    }, Ve = () => {
+      O.value = !0, k(), f.value = !1, r.stopProcessing(), H(), T().then(() => {
+        setTimeout(() => {
+          d && (d.close(), d = null), b = "", s.value && (s.value.srcObject = null), l.value = !1, y.value = 0, console.log("✅ 手动断开连接，资源已清理");
+        }, 500);
+      });
+    }, Ce = q.debounce(() => {
+      if (h.value === "") {
+        const { x: e, y: t } = me();
+        v.x = e, v.y = t;
+      }
+      l.value && E.value && (H(!0), p(() => m(!0)));
+    }, 50);
+    return P(r.isInitSuccess, (e) => {
+      !e && f.value && q.funcElMessageShowCtrl("🔄 WebGPU初始化失败，正在尝试重连...", "warning");
+    }, { immediate: !0 }), P(
+      [() => r.isInitSuccess, () => l.value],
+      async ([e, t]) => {
+        !e && t && s.value && o.value ? (o.value.style.display = "none", s.value.style.opacity = "1", s.value.style.width = "100%", s.value.style.height = "100%", q.funcElMessageShowCtrl("ℹ️ 当前浏览器不支持WebGPU，将显示原始视频（无透明背景）", "info")) : e && t && s.value && o.value && (o.value.style.display = "block", s.value.style.opacity = "0");
+      },
+      { immediate: !0 }
+    ), P(
+      h,
+      async (e) => {
+        !E.value || !s.value || (await p(), s.value.volume = e ? 0.5 : 1, l.value && (H(), await m()));
       },
       { immediate: !0, deep: !0 }
-    ), te(
-      [() => c.value, () => o.defaultPlayText],
-      async ([t, e], [i]) => {
-        t && !i && e && b && (console.log("连接成功，自动播放默认文本：", e), await ee(e), m(() => g()));
+    ), P(
+      [() => l.value, () => i.defaultPlayText],
+      async ([e, t], [c]) => {
+        e && !c && t && b && (console.log("✅ 连接成功，自动播放默认文本：", t), await ie(t), p(() => m()));
       },
       { immediate: !1 }
-    ), te(
-      () => o.defaultPlayText,
-      async (t) => {
-        c.value && t && b && (console.log("默认文本加载完成，自动播放：", t), await ee(t), m(() => g()));
+    ), P(
+      () => i.defaultPlayText,
+      async (e) => {
+        l.value && e && b && (console.log("✅ 默认文本更新，自动播放：", e), await ie(e), p(() => m()));
       },
       { immediate: !0 }
-    ), Xe(async () => {
-      await m(), await m(), E.value = !0;
-      const { x: t, y: e } = fe();
-      r.x = t, r.y = e, window.addEventListener("resize", be);
-    });
-    const be = Ce.debounce(() => {
-      if (v.value === "") {
-        const { x: t, y: e } = fe();
-        r.x = t, r.y = e;
-      }
-      c.value && E.value && (M(!0), m(() => g(!0)));
-    }, 50);
-    return Ye(() => {
-      x().then(() => {
-        console.log("组件卸载，已打断当前对话");
-      }), document.removeEventListener("mousemove", O), document.removeEventListener("mousemove", Q), document.removeEventListener("mouseup", Z), document.removeEventListener("mousemove", q), document.removeEventListener("mouseup", K), window.removeEventListener("resize", be), S(), p.stopProcessing(), u.value && (u.value.srcObject = null), s && s.close();
-    }), (t, e) => {
-      const i = Ie("drag");
-      return D(), F("div", {
+    ), Ue(async () => {
+      await p(), await p(), E.value = !0;
+      const { x: e, y: t } = me();
+      v.x = e, v.y = t, window.addEventListener("resize", Ce);
+    }), Oe(() => {
+      document.removeEventListener("mousemove", z), document.removeEventListener("mousemove", ne), document.removeEventListener("mouseup", oe), document.removeEventListener("mousemove", ee), document.removeEventListener("mouseup", te), window.removeEventListener("resize", Ce), k(), r.stopProcessing(), T(), d && d.close(), s.value && (s.value.srcObject = null);
+    }), Ee({
+      digitalHumanChat: ie,
+      // 播放文本
+      digitalHumanInterruptTalk: T,
+      // 打断对话
+      isConnected: l,
+      // 连接状态
+      isConnecting: f,
+      // 连接中状态
+      reconnect: I,
+      // 手动重连WebRTC
+      clearReconnectTimer: k,
+      // 停止重连
+      currentReconnectTimes: y,
+      // 当前重连次数
+      isWaitingReconnect: L,
+      // 重连冷却状态
+      adaptCanvasToContainer: m,
+      // 手动适配Canvas
+      webgpuReInit: r.reInitWebGPU,
+      // 手动重连WebGPU
+      webgpuIsInitSuccess: r.isInitSuccess,
+      // WebGPU初始化状态
+      webgpuIsProcessing: r.isProcessing
+      // WebGPU运行状态
+    }), (e, t) => {
+      const c = je("drag");
+      return S(), D("div", {
         class: "draggable-window-container",
-        style: Te(Ee.value)
+        style: ke(xe.value)
       }, [
-        f(n("div", Ue, null, 512), [
-          [w, re.value],
-          [i, ["digital-human-assistant", Me, !0]]
+        w(n("div", Ae, null, 512), [
+          [g, he.value],
+          [c, ["digital-human-assistant", He, !0]]
         ]),
         n("div", {
           ref_key: "teleportFallbackRef",
-          ref: P,
+          ref: X,
           class: "teleport-fallback"
         }, null, 512),
-        f(n("div", ze, null, 512), [
-          [w, N.value]
+        w(n("div", Ne, null, 512), [
+          [g, K.value]
         ]),
-        f(n("div", Fe, null, 512), [
-          [w, G.value]
+        w(n("div", Je, null, 512), [
+          [g, Q.value]
         ]),
-        V.value && v.value === "left" ? (D(), F("div", {
+        Y.value && h.value === "left" ? (S(), D("div", {
           key: 0,
-          class: ke(["sidebar left-sidebar", { pressing: R.value }])
+          class: J(["sidebar left-sidebar", { pressing: R.value }])
         }, [
           n("div", {
             class: "window-header",
-            onMousedown: e[2] || (e[2] = (l) => me("left", l)),
-            onMouseup: j,
-            onMouseleave: j
+            onMousedown: t[2] || (t[2] = (a) => ye("left", a)),
+            onMouseup: F,
+            onMouseleave: F
           }, [
-            n("div", Ae, [
-              n("span", Ne, ne($.windowTitle), 1),
-              n("div", Ge, [
-                f(n("button", Je, "未连接", 512), [
-                  [w, !c.value && !h.value]
+            n("div", qe, [
+              n("span", Ke, ae(V.windowTitle), 1),
+              n("div", Qe, [
+                w(n("button", Ze, "未连接", 512), [
+                  [g, !l.value && !f.value]
                 ]),
-                f(n("button", qe, "连接中...", 512), [
-                  [w, h.value]
+                w(n("button", et, "连接中...", 512), [
+                  [g, f.value]
                 ]),
-                f(n("button", Ke, "已连接", 512), [
-                  [w, c.value]
+                w(n("button", tt, "已连接", 512), [
+                  [g, l.value]
                 ])
               ])
             ]),
             n("div", {
               class: "drag-window-hide",
-              onClick: e[0] || (e[0] = (l) => B(!1)),
-              onMousedown: e[1] || (e[1] = oe(() => {
+              onClick: t[0] || (t[0] = (a) => j(!1)),
+              onMousedown: t[1] || (t[1] = se(() => {
               }, ["stop"]))
             }, null, 32)
           ], 32),
-          n("div", Qe, [
-            ae(t.$slots, "sidebar-left", {}, void 0, !0),
+          n("div", nt, [
+            le(e.$slots, "sidebar-left", {}, void 0, !0),
             n("div", {
               ref_key: "sidebarLeftVideoRef",
-              ref: de,
+              ref: ve,
               class: "sidebar-video-container"
             }, null, 512)
           ])
-        ], 2)) : A("", !0),
+        ], 2)) : $("", !0),
         n("div", {
           class: "main-content-outer",
           ref_key: "containerRef",
-          ref: se
+          ref: ue
         }, [
-          n("div", Ze, [
-            ae(t.$slots, "main", {}, void 0, !0)
+          n("div", ot, [
+            le(e.$slots, "main", {}, void 0, !0)
           ]),
-          V.value && v.value === "" ? (D(), F("div", {
+          Y.value && h.value === "" ? (S(), D("div", {
             key: 0,
             ref_key: "dragWindowRef",
-            ref: le,
-            class: "draggable-window",
-            style: Te(Le.value)
+            ref: de,
+            class: J(["draggable-window", { "draggable-window-shadow": !l.value || x.value }]),
+            style: ke(Me.value),
+            onMouseenter: Ie,
+            onMouseleave: Pe
           }, [
             n("div", {
-              class: "window-header",
-              onMousedown: We
+              class: J(["window-header", { "window-header-opacity": l.value && !x.value }]),
+              onMousedown: De
             }, [
-              n("div", et, [
-                n("span", tt, ne($.windowTitle), 1),
-                n("div", nt, [
-                  f(n("button", ot, "未连接", 512), [
-                    [w, !c.value && !h.value]
+              n("div", it, [
+                n("span", at, ae(V.windowTitle), 1),
+                n("div", st, [
+                  w(n("button", lt, "未连接", 512), [
+                    [g, !l.value && !f.value]
                   ]),
-                  f(n("button", at, "连接中...", 512), [
-                    [w, h.value]
+                  w(n("button", ct, "连接中...", 512), [
+                    [g, f.value]
                   ]),
-                  f(n("button", it, "已连接", 512), [
-                    [w, c.value]
+                  w(n("button", dt, "已连接", 512), [
+                    [g, l.value]
                   ])
                 ])
               ]),
               n("div", {
                 class: "drag-window-hide",
-                onClick: e[3] || (e[3] = (l) => B(!1)),
-                onMousedown: e[4] || (e[4] = oe(() => {
+                onClick: t[3] || (t[3] = (a) => j(!1)),
+                onMousedown: t[4] || (t[4] = se(() => {
                 }, ["stop"]))
               }, null, 32)
-            ], 32),
-            n("div", lt, [
+            ], 34),
+            n("div", ut, [
               n("div", {
                 class: "video-container",
                 ref_key: "windowVideoRef",
-                ref: ce
+                ref: re
               }, null, 512)
             ])
-          ], 4)) : A("", !0)
+          ], 38)) : $("", !0)
         ], 512),
-        V.value && v.value === "right" ? (D(), F("div", {
+        Y.value && h.value === "right" ? (S(), D("div", {
           key: 1,
-          class: ke(["sidebar right-sidebar", { pressing: R.value }])
+          class: J(["sidebar right-sidebar", { pressing: R.value }])
         }, [
           n("div", {
             class: "window-header",
-            onMousedown: e[7] || (e[7] = (l) => me("right", l)),
-            onMouseup: j,
-            onMouseleave: j
+            onMousedown: t[7] || (t[7] = (a) => ye("right", a)),
+            onMouseup: F,
+            onMouseleave: F
           }, [
-            n("div", st, [
-              n("span", ct, ne($.windowTitle), 1),
-              n("div", dt, [
-                f(n("button", ut, "未连接", 512), [
-                  [w, !c.value && !h.value]
+            n("div", rt, [
+              n("span", vt, ae(V.windowTitle), 1),
+              n("div", ft, [
+                w(n("button", ht, "未连接", 512), [
+                  [g, !l.value && !f.value]
                 ]),
-                f(n("button", rt, "连接中...", 512), [
-                  [w, h.value]
+                w(n("button", wt, "连接中...", 512), [
+                  [g, f.value]
                 ]),
-                f(n("button", vt, "已连接", 512), [
-                  [w, c.value]
+                w(n("button", gt, "已连接", 512), [
+                  [g, l.value]
                 ])
               ])
             ]),
             n("div", {
               class: "drag-window-hide",
-              onClick: e[5] || (e[5] = (l) => B(!1)),
-              onMousedown: e[6] || (e[6] = oe(() => {
+              onClick: t[5] || (t[5] = (a) => j(!1)),
+              onMousedown: t[6] || (t[6] = se(() => {
               }, ["stop"]))
             }, null, 32)
           ], 32),
-          n("div", ht, [
-            ae(t.$slots, "sidebar-right", {}, void 0, !0),
+          n("div", mt, [
+            le(e.$slots, "sidebar-right", {}, void 0, !0),
             n("div", {
               ref_key: "sidebarRightVideoRef",
-              ref: ue,
+              ref: fe,
               class: "sidebar-video-container"
             }, null, 512)
           ])
-        ], 2)) : A("", !0),
-        E.value ? (D(), Be(Oe, {
+        ], 2)) : $("", !0),
+        E.value ? (S(), Ge(ze, {
           key: 2,
-          to: ve()
+          to: we()
         }, [
           n("video", {
             ref_key: "digitalHumanVideo",
-            ref: u,
+            ref: s,
             class: "digital-video source-video",
             poster: "",
             playsinline: "",
@@ -471,14 +472,15 @@ const Ue = { class: "digital-human-assistant" }, ze = { class: "placeholder left
           }, null, 512),
           n("canvas", {
             ref_key: "processedCanvas",
-            ref: a,
+            ref: o,
             class: "digital-video processed-canvas"
-          }, null, 512)
-        ], 8, ["to"])) : A("", !0)
+          }, null, 512),
+          f.value ? (S(), D("div", pt)) : $("", !0)
+        ], 8, ["to"])) : $("", !0)
       ], 4);
     };
   }
 });
 export {
-  bt as default
+  Tt as default
 };