ruiyun-human 1.0.19 → 1.0.21

package/dist/ruiyun-human.es.js

@@ -1,91 +1,4 @@
-import { openBlock, createElementBlock, normalizeClass, renderSlot, createCommentVNode, createElementVNode, computed, ref, watch, onMounted, onUnmounted, nextTick } from "vue";
-const _export_sfc = (sfc, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _sfc_main$2 = {
-  __name: "index",
-  props: {
-    type: {
-      type: String,
-      default: "primary"
-    }
-  },
-  emits: ["click"],
-  setup(__props) {
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("button", {
-        class: normalizeClass(["demo-btn", __props.type]),
-        onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click"))
-      }, [
-        renderSlot(_ctx.$slots, "default", {}, void 0, true)
-      ], 2);
-    };
-  }
-};
-const DemoButton = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-9a48516a"]]);
-DemoButton.install = (app) => app.component("DemoButton", DemoButton);
-const _hoisted_1 = { class: "demo-input-wrap" };
-const _hoisted_2 = {
-  key: 0,
-  class: "prefix"
-};
-const _hoisted_3 = ["type", "placeholder", "value", "disabled"];
-const _hoisted_4 = {
-  key: 1,
-  class: "suffix"
-};
-const _sfc_main$1 = {
-  __name: "index",
-  props: {
-    modelValue: {
-      type: [String, Number],
-      default: ""
-    },
-    placeholder: {
-      type: String,
-      default: "请输入内容"
-    },
-    inputType: {
-      type: String,
-      default: "text"
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-  emits: ["update:modelValue", "focus", "blur"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
-    const handleInput = (e) => emit("update:modelValue", e.target.value);
-    return (_ctx, _cache) => {
-      return openBlock(), createElementBlock("div", _hoisted_1, [
-        _ctx.$slots.prefix ? (openBlock(), createElementBlock("span", _hoisted_2, [
-          renderSlot(_ctx.$slots, "prefix", {}, void 0, true)
-        ])) : createCommentVNode("", true),
-        createElementVNode("input", {
-          class: "demo-input",
-          type: __props.inputType,
-          placeholder: __props.placeholder,
-          value: __props.modelValue,
-          disabled: __props.disabled,
-          onInput: handleInput,
-          onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("focus")),
-          onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.$emit("blur"))
-        }, null, 40, _hoisted_3),
-        _ctx.$slots.suffix ? (openBlock(), createElementBlock("span", _hoisted_4, [
-          renderSlot(_ctx.$slots, "suffix", {}, void 0, true)
-        ])) : createCommentVNode("", true)
-      ]);
-    };
-  }
-};
-const DemoInput = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-28a3493c"]]);
-DemoInput.install = (app) => app.component("DemoInput", DemoInput);
+import { computed, ref, watch, onMounted, onUnmounted, openBlock, createElementBlock, createElementVNode, nextTick } from "vue";
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, "default") ? x["default"] : x;
@@ -383,6 +296,13 @@ var recorder = { exports: {} };
 var recorderExports = recorder.exports;
 var jsAudioRecorder = recorderExports;
 const Recorder = /* @__PURE__ */ getDefaultExportFromCjs(jsAudioRecorder);
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
 const VOICE_CLIENT_ID = "e5cd2b";
 const VOICE_TENANT_ID = "000000";
 const TTS_USER = "web-test-user";
@@ -397,15 +317,28 @@ const _sfc_main = {
     },
     szraddress: {
       type: String,
+      // http://192.168.3.136:6039
       default: "https://sqsyky.xzspj.suqian.gov.cn:8443"
     }
   },
-  emits: ["loaded", "changed", "paused", "resumed", "audio-ready"],
+  emits: [
+    "loaded",
+    // 画面就绪：待机帧加载完并完成首次绘制
+    "frames-loaded",
+    // 全部帧（待机 + 说话）加载完成
+    "load-error",
+    // 待机帧全部不可用，画面出不来
+    "changed",
+    "paused",
+    "resumed",
+    "audio-ready"
+  ],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
-    const TTS_URL = computed(() => props.szraddress || "");
-    const ASR_URL = computed(() => props.szraddress || "");
-    const szrUrl = computed(() => `${props.szraddress || ""}/szrimage`);
+    const normalizeBase = (url) => String(url || "").replace(/\/+$/, "");
+    const TTS_URL = computed(() => normalizeBase(props.szraddress));
+    const ASR_URL = computed(() => normalizeBase(props.szraddress));
+    const szrUrl = computed(() => `${normalizeBase(props.szraddress)}/szrimage`);
     const buildPresets = (rootUrl) => ({
       1: {
         humanId: 1,
@@ -484,10 +417,19 @@ const _sfc_main = {
     const canvasRef = ref(null);
     const ctx = ref(null);
     const currentHuman = ref(null);
+    const isMutedNow = computed(() => {
+      var _a;
+      const raw = props.human;
+      if (raw && typeof raw === "object" && typeof raw.isMuted === "boolean") return raw.isMuted;
+      return ((_a = currentHuman.value) == null ? void 0 : _a.isMuted) ?? false;
+    });
     const animationId = ref(null);
     const frameIndex = ref(1);
     const timestamp = ref(null);
     const frames = ref({ standby: [], speakStart: [], speakLoop: [], speakEnd: [] });
+    const loadToken = ref(0);
+    const isReadyState = ref(false);
+    const isAllFramesLoaded = ref(false);
     const animationState = ref("standby");
     const loopDirection = ref(1);
     const isPaused = ref(false);
@@ -499,16 +441,25 @@ const _sfc_main = {
         standbyNum: currentHuman.value.standby.standbyNum,
         speakNum: currentHuman.value.speak.speakNum
       };
+      console.log("[DigitalHuman] 开始加载帧:", {
+        folder,
+        standbyNum,
+        speakNum,
+        humanId: currentHuman.value.humanId,
+        title: currentHuman.value.title
+      });
       const makeImage = (url) => {
         const image = new Image();
-        image.src = encodeURI(url);
         image.onload = () => {
           image.__broken = false;
+          image.__loaded = true;
         };
         image.onerror = () => {
           image.__broken = true;
-          console.warn("[DigitalHuman] 帧加载失败:", url);
+          image.__loaded = true;
+          console.warn("[DigitalHuman] ❌ 帧加载失败:", url);
         };
+        image.src = encodeURI(url);
         return image;
       };
       for (let i = 1; i <= standbyNum; i++) {
@@ -534,16 +485,29 @@ const _sfc_main = {
       }
     };
     const draw = (image) => {
-      if (!ctx.value || !image || image.width <= 0 || image.height <= 0) return;
+      if (!ctx.value || !isDrawable(image)) return;
       const canvas = canvasRef.value;
       ctx.value.clearRect(0, 0, canvas.width, canvas.height);
-      const scale = Math.min(canvas.width / image.width, canvas.height / image.height);
-      const width = image.width * scale;
-      const height = image.height * scale;
+      const scale = Math.min(canvas.width / image.naturalWidth, canvas.height / image.naturalHeight);
+      const width = image.naturalWidth * scale;
+      const height = image.naturalHeight * scale;
       const x = (canvas.width - width) / 2;
       const y = canvas.height - height;
       ctx.value.drawImage(image, x, y, width, height);
     };
+    const isDrawable = (image) => !!image && image.complete && image.naturalWidth > 0;
+    const pickDrawable = (list, index2) => {
+      if (!list || list.length === 0) return null;
+      const i = Math.min(Math.max(index2, 1), list.length);
+      if (isDrawable(list[i - 1])) return list[i - 1];
+      for (let k = i + 1; k <= list.length; k++) {
+        if (isDrawable(list[k - 1])) return list[k - 1];
+      }
+      for (let k = i - 1; k >= 1; k--) {
+        if (isDrawable(list[k - 1])) return list[k - 1];
+      }
+      return null;
+    };
     const stop = (keepAudio = false) => {
       var _a;
       if (animationId.value) {
@@ -630,7 +594,9 @@ const _sfc_main = {
               loopDirection.value = 1;
             }
           }
-          draw(currentFrames[frameIndex.value - 1]);
+          draw(
+            pickDrawable(currentFrames, frameIndex.value) || pickDrawable(frames.value.standby, frameIndex.value)
+          );
           const shouldStop = updateFrame();
           if (shouldStop) return;
           timestamp.value = time;
@@ -675,21 +641,32 @@ const _sfc_main = {
       }
       emit("resumed");
     };
-    const waitFramesLoaded = (callback) => {
+    const waitFramesLoaded = (list, callback, token, timeout = 1e4) => {
+      const targets = Array.from(new Set(list || []));
+      if (!targets.length) {
+        callback({ total: 0, loaded: 0, broken: 0, timedOut: false });
+        return;
+      }
       let loadedCount = 0;
-      const allFrames = [
-        ...frames.value.standby,
-        ...frames.value.speakStart,
-        ...frames.value.speakLoop,
-        ...frames.value.speakEnd
-      ];
+      let finished = false;
+      const finish = (timedOut = false) => {
+        if (finished) return;
+        finished = true;
+        clearTimeout(timer);
+        if (token !== loadToken.value) return;
+        callback({
+          total: targets.length,
+          loaded: loadedCount,
+          broken: targets.filter((img) => img.__broken).length,
+          timedOut
+        });
+      };
       const checkLoaded = () => {
         loadedCount++;
-        if (loadedCount >= allFrames.length) {
-          callback();
-        }
+        if (loadedCount >= targets.length) finish(false);
       };
-      allFrames.forEach((img) => {
+      const timer = setTimeout(() => finish(true), timeout);
+      targets.forEach((img) => {
         if (img.complete) {
           if (!img.naturalWidth) img.__broken = true;
           checkLoaded();
@@ -705,6 +682,71 @@ const _sfc_main = {
         }
       });
     };
+    const syncCanvasSize = () => {
+      const canvas = canvasRef.value;
+      const container = containerRef.value;
+      if (!canvas || !container) return false;
+      const dpr = window.devicePixelRatio || 1;
+      const width = container.clientWidth;
+      const height = container.clientHeight;
+      if (!width || !height) {
+        if (canvas.width !== Math.round(300 * dpr)) {
+          console.warn('[DigitalHuman] 容器宽高为 0！组件根元素是 width:100%;height:100%，需要父容器提供宽高（如 style="width:500px;height:500px"）。已用 300×300 兜底');
+          canvas.style.width = "300px";
+          canvas.style.height = "300px";
+          canvas.width = 300 * dpr;
+          canvas.height = 300 * dpr;
+          ctx.value = canvas.getContext("2d");
+        }
+        return false;
+      }
+      const w = Math.round(width * dpr);
+      const h = Math.round(height * dpr);
+      if (canvas.width === w && canvas.height === h) return false;
+      canvas.width = w;
+      canvas.height = h;
+      canvas.style.width = width + "px";
+      canvas.style.height = height + "px";
+      ctx.value = canvas.getContext("2d");
+      return true;
+    };
+    const redrawCurrent = () => {
+      draw(pickDrawable(frames.value.standby, frameIndex.value));
+    };
+    const trackAllFrames = (token, timeout = 3e4) => {
+      const all = Array.from(/* @__PURE__ */ new Set([
+        ...frames.value.standby,
+        ...frames.value.speakStart,
+        ...frames.value.speakLoop,
+        ...frames.value.speakEnd
+      ]));
+      if (!all.length) return;
+      isAllFramesLoaded.value = false;
+      waitFramesLoaded(all, (info) => {
+        var _a, _b, _c;
+        isAllFramesLoaded.value = !info.timedOut && info.broken === 0;
+        emit("frames-loaded", {
+          humanId: (_a = currentHuman.value) == null ? void 0 : _a.humanId,
+          title: (_b = currentHuman.value) == null ? void 0 : _b.title,
+          folder: (_c = currentHuman.value) == null ? void 0 : _c.folder,
+          total: info.total,
+          broken: info.broken,
+          timedOut: info.timedOut,
+          allReady: isAllFramesLoaded.value
+        });
+      }, token, timeout);
+    };
+    const buildLoadInfo = (info) => {
+      var _a, _b, _c;
+      return {
+        humanId: (_a = currentHuman.value) == null ? void 0 : _a.humanId,
+        title: (_b = currentHuman.value) == null ? void 0 : _b.title,
+        folder: (_c = currentHuman.value) == null ? void 0 : _c.folder,
+        total: (info == null ? void 0 : info.total) ?? 0,
+        broken: (info == null ? void 0 : info.broken) ?? 0,
+        timedOut: !!(info == null ? void 0 : info.timedOut)
+      };
+    };
     const init = () => {
       nextTick(() => {
         var _a, _b;
@@ -716,36 +758,33 @@ const _sfc_main = {
         const prevType = (_a = currentHuman.value) == null ? void 0 : _a.humanType;
         if (((_b = currentHuman.value) == null ? void 0 : _b.humanId) === human.humanId && prevType === human.humanType) {
           Object.assign(currentHuman.value, human);
+          if (syncCanvasSize()) redrawCurrent();
           return;
         }
         abortTTS();
         stop();
         timestamp.value = null;
         frameIndex.value = 1;
+        isReadyState.value = false;
         currentHuman.value = human;
-        console.log("init", currentHuman.value);
-        const canvas = canvasRef.value;
-        const dpr = window.devicePixelRatio || 1;
-        const width = containerRef.value.clientWidth;
-        const height = containerRef.value.clientHeight;
-        if (!width || !height) {
-          console.warn('[DigitalHuman] 容器宽高为 0！组件根元素是 width:100%;height:100%，需要父容器提供宽高（如 style="width:500px;height:500px" 或 class="w-full h-screen"）。已自动设置最小尺寸 300×300 作为兜底');
-          canvas.style.width = "300px";
-          canvas.style.height = "300px";
-          canvas.width = 300 * dpr;
-          canvas.height = 300 * dpr;
-        } else {
-          canvas.width = width * dpr;
-          canvas.height = height * dpr;
-          canvas.style.width = width + "px";
-          canvas.style.height = height + "px";
-        }
-        ctx.value = canvas.getContext("2d");
+        syncCanvasSize();
+        loadToken.value++;
+        const token = loadToken.value;
         loadFrames();
-        waitFramesLoaded(() => {
-          draw(frames.value.standby[0]);
-          emit("loaded", currentHuman.value);
-        });
+        trackAllFrames(token);
+        waitFramesLoaded(frames.value.standby, (info) => {
+          const first = pickDrawable(frames.value.standby, 1);
+          if (!first) {
+            isReadyState.value = false;
+            console.error("[DigitalHuman] 待机帧全部不可用，请检查图片地址/跨域配置：", currentHuman.value.folder);
+            emit("load-error", buildLoadInfo(info));
+            return;
+          }
+          isReadyState.value = true;
+          draw(first);
+          standby();
+          emit("loaded", currentHuman.value, buildLoadInfo(info));
+        }, token);
       });
     };
     const currentAudio = ref(null);
@@ -863,6 +902,7 @@ const _sfc_main = {
         return;
       }
       const audio = new Audio(objectUrl);
+      audio.muted = isMutedNow.value;
       currentAudio.value = audio;
       const cleanup = () => {
         URL.revokeObjectURL(objectUrl);
@@ -894,8 +934,12 @@ const _sfc_main = {
       if (!text) return;
       const latest = props.human ? resolveHuman(props.human) : null;
       if (latest) {
-        if (!latest.isMuted) return;
-        Object.assign(currentHuman.value || {}, latest);
+        if (currentHuman.value) Object.assign(currentHuman.value, latest);
+        else currentHuman.value = latest;
+      }
+      if (isMutedNow.value) {
+        console.log("[TTS] 当前为静音状态，跳过播放");
+        return;
       }
       abortTTS();
       ttsAbortController = new AbortController();
@@ -908,6 +952,10 @@ const _sfc_main = {
         console.log("[TTS] 提交合成请求:", { human: currentHuman.value, text: cleanText, length: cleanText.length });
         const audioBlob = await requestTTSAudio(cleanText, signal);
         if (signal.aborted || currentTtsRequestId.value !== requestId) return;
+        if (isMutedNow.value) {
+          console.log("[TTS] 合成期间已静音，丢弃音频");
+          return;
+        }
         if (!audioBlob || audioBlob.size === 0) {
           throw new Error("TTS 返回空音频");
         }
@@ -985,13 +1033,25 @@ const _sfc_main = {
         });
       }
     };
+    const applyMuted = () => {
+      if (isMutedNow.value) {
+        abortTTS();
+        stopSpeaking();
+      } else if (currentAudio.value) {
+        currentAudio.value.muted = false;
+      }
+    };
     watch(
       () => props.human,
       () => {
         init();
+        applyMuted();
       },
       { deep: true }
     );
+    watch(isMutedNow, () => {
+      applyMuted();
+    });
     const switchHuman = (humanId) => {
       const next = resolveHuman(humanId);
       if (!next) return;
@@ -999,13 +1059,63 @@ const _sfc_main = {
       stop();
       timestamp.value = null;
       frameIndex.value = 1;
+      isReadyState.value = false;
       currentHuman.value = next;
+      syncCanvasSize();
+      loadToken.value++;
+      const token = loadToken.value;
       loadFrames();
-      waitFramesLoaded(() => {
-        draw(frames.value.standby[0]);
-        emit("changed", currentHuman.value);
-      });
+      trackAllFrames(token);
+      waitFramesLoaded(frames.value.standby, (info) => {
+        const first = pickDrawable(frames.value.standby, 1);
+        if (!first) {
+          isReadyState.value = false;
+          console.error("[DigitalHuman] 待机帧全部不可用，请检查图片地址/跨域配置：", currentHuman.value.folder);
+          emit("load-error", buildLoadInfo(info));
+          return;
+        }
+        isReadyState.value = true;
+        draw(first);
+        standby();
+        emit("changed", currentHuman.value, buildLoadInfo(info));
+      }, token);
     };
+    const isReady = () => isReadyState.value;
+    const isFullyLoaded = () => isAllFramesLoaded.value;
+    const whenReady = (timeout = 15e3) => new Promise((resolve) => {
+      if (isReadyState.value) {
+        resolve(true);
+        return;
+      }
+      let timer = null;
+      const stopWatch = watch(isReadyState, (val) => {
+        if (!val) return;
+        clearTimeout(timer);
+        stopWatch();
+        resolve(true);
+      });
+      timer = setTimeout(() => {
+        stopWatch();
+        resolve(false);
+      }, timeout);
+    });
+    const whenFullyLoaded = (timeout = 3e4) => new Promise((resolve) => {
+      if (isAllFramesLoaded.value) {
+        resolve(true);
+        return;
+      }
+      let timer = null;
+      const stopWatch = watch(isAllFramesLoaded, (val) => {
+        if (!val) return;
+        clearTimeout(timer);
+        stopWatch();
+        resolve(true);
+      });
+      timer = setTimeout(() => {
+        stopWatch();
+        resolve(false);
+      }, timeout);
+    });
     __expose({
       standby,
       speak,
@@ -1015,16 +1125,29 @@ const _sfc_main = {
       playTTS,
       startRecord,
       stopRecord,
-      switchHuman
+      switchHuman,
+      // 加载状态查询
+      isReady,
+      isFullyLoaded,
+      whenReady,
+      whenFullyLoaded
     });
+    let resizeObserver = null;
     onMounted(() => {
-      console.log("onMounted", props.human);
       initRecorder();
       init();
+      if (typeof ResizeObserver !== "undefined" && containerRef.value) {
+        resizeObserver = new ResizeObserver(() => {
+          if (syncCanvasSize()) redrawCurrent();
+        });
+        resizeObserver.observe(containerRef.value);
+      }
     });
     onUnmounted(() => {
       abortTTS();
       stop();
+      resizeObserver == null ? void 0 : resizeObserver.disconnect();
+      resizeObserver = null;
       if (recorder2.value) {
         recorder2.value.stop();
       }
@@ -1043,16 +1166,14 @@ const _sfc_main = {
     };
   }
 };
-const DigitalHuman = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-b6f17245"]]);
+const DigitalHuman = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-26d22b04"]]);
 DigitalHuman.install = (app) => app.component("DigitalHuman", DigitalHuman);
-const components = [DemoButton, DemoInput, DigitalHuman];
+const components = [DigitalHuman];
 const install = (app) => {
   components.forEach((comp) => app.use(comp));
 };
 const index = { install };
 export {
-  DemoButton,
-  DemoInput,
   DigitalHuman,
   index as default
 };

package/dist/style.css

@@ -1 +1 @@
-.demo-btn[data-v-9a48516a]{padding:6px 14px;border-radius:4px;border:none;cursor:pointer;font-size:14px}.primary[data-v-9a48516a]{background:#409eff;color:#fff}.success[data-v-9a48516a]{background:#67c23a;color:#fff}.warning[data-v-9a48516a]{background:#e6a23c;color:#fff}.demo-input-wrap[data-v-28a3493c]{display:inline-flex;align-items:center;border:1px solid #dcdcdc;border-radius:4px;padding:0 10px}.demo-input-wrap[data-v-28a3493c]:focus-within{border-color:#409eff}.demo-input[data-v-28a3493c]{border:none;outline:none;padding:8px 6px;flex:1}.prefix[data-v-28a3493c],.suffix[data-v-28a3493c]{color:#909399}.digital-human[data-v-b6f17245]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.digital-human canvas[data-v-b6f17245]{max-width:100%;max-height:100%}
+.digital-human[data-v-26d22b04]{width:100%;height:100%;display:flex;align-items:center;justify-content:center}.digital-human canvas[data-v-26d22b04]{max-width:100%;max-height:100%}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ruiyun-human",
-  "version": "1.0.19",
+  "version": "1.0.21",
   "type": "module",
   "description": "数字人初步实现",
   "main": "./dist/ruiyun-human.cjs.js",