项目初始化
This commit is contained in:
libingxiang
commit
db73bcd2ae
12
index.html
Normal file
12
index.html
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
<!doctype html>
|
||||||
|
<html lang="zh-CN">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>数字人交互平台</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
<script type="module" src="/src/main.ts"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
5920
package-lock.json
generated
Normal file
5920
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
31
package.json
Normal file
31
package.json
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
{
|
||||||
|
"name": "digital-human-merged",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"private": true,
|
||||||
|
"type": "module",
|
||||||
|
"scripts": {
|
||||||
|
"dev": "vite",
|
||||||
|
"build": "vite build",
|
||||||
|
"preview": "vite preview",
|
||||||
|
"test": "vitest run",
|
||||||
|
"test:watch": "vitest"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@bddh/starling-realtime-client": "^2.0.9",
|
||||||
|
"crypto-js": "^4.2.0",
|
||||||
|
"element-plus": "^2.9.7",
|
||||||
|
"uuid": "^9.0.1",
|
||||||
|
"vue": "^3.5.13"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@types/crypto-js": "^4.2.2",
|
||||||
|
"@types/uuid": "^9.0.8",
|
||||||
|
"@vitejs/plugin-legacy": "^5.4.3",
|
||||||
|
"@vitejs/plugin-vue": "^5.2.1",
|
||||||
|
"sass": "^1.97.3",
|
||||||
|
"terser": "^5.48.0",
|
||||||
|
"typescript": "^5.7.3",
|
||||||
|
"vite": "^5.4.11",
|
||||||
|
"vitest": "^4.1.8"
|
||||||
|
}
|
||||||
|
}
|
||||||
1298
src/App.vue
Normal file
1298
src/App.vue
Normal file
File diff suppressed because it is too large
Load Diff
907
src/components/SubtitlePanel.vue
Normal file
907
src/components/SubtitlePanel.vue
Normal file
@ -0,0 +1,907 @@
|
|||||||
|
<template>
|
||||||
|
<div class="subtitle-panel">
|
||||||
|
<!-- 字幕模式下拉框 -->
|
||||||
|
<div class="subtitle-header">
|
||||||
|
<div class="dropdown-wrapper" :class="{ open: dropdownOpen }">
|
||||||
|
<button class="dropdown-trigger" @click="dropdownOpen = !dropdownOpen">
|
||||||
|
<span class="dropdown-label">{{ modeLabel }}</span>
|
||||||
|
<svg
|
||||||
|
class="dropdown-arrow"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="6 9 12 15 18 9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
<Transition name="dropdown">
|
||||||
|
<div v-if="dropdownOpen" class="dropdown-menu">
|
||||||
|
<button
|
||||||
|
v-for="opt in modeOptions"
|
||||||
|
:key="opt.value"
|
||||||
|
class="dropdown-item"
|
||||||
|
:class="{ active: currentMode === opt.value }"
|
||||||
|
@click="selectMode(opt.value)"
|
||||||
|
>
|
||||||
|
<span class="item-icon">{{ opt.icon }}</span>
|
||||||
|
<span class="item-label">{{ opt.label }}</span>
|
||||||
|
<svg
|
||||||
|
v-if="currentMode === opt.value"
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="3"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
>
|
||||||
|
<polyline points="20 6 9 17 4 12" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</Transition>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模式1：仅AI字幕 -->
|
||||||
|
<div
|
||||||
|
v-if="currentMode === 'ai-only'"
|
||||||
|
class="subtitle-content ai-only-mode"
|
||||||
|
ref="scrollContainerRef"
|
||||||
|
>
|
||||||
|
<div v-if="aiSubtitle" class="ai-subtitle-bar" ref="aiSubtitleBarRef">
|
||||||
|
<div
|
||||||
|
class="ai-subtitle-text"
|
||||||
|
ref="aiSubtitleTextRef"
|
||||||
|
:style="{ fontSize: aiFontSize + 'px' }"
|
||||||
|
>
|
||||||
|
{{ aiSubtitle }}
|
||||||
|
</div>
|
||||||
|
<!-- 滚动指示器 -->
|
||||||
|
<div
|
||||||
|
v-if="aiTextOverflow"
|
||||||
|
class="scroll-hint"
|
||||||
|
@click="scrollAIToBottom"
|
||||||
|
>
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="14"
|
||||||
|
height="14"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2"
|
||||||
|
stroke-linecap="round"
|
||||||
|
>
|
||||||
|
<polyline points="6 9 12 15 18 9" />
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div v-else class="subtitle-placeholder">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
等待AI回复...
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模式2：对话气泡 -->
|
||||||
|
<div
|
||||||
|
v-if="currentMode === 'bubble'"
|
||||||
|
class="subtitle-content bubble-mode"
|
||||||
|
ref="scrollContainerRef"
|
||||||
|
>
|
||||||
|
<div v-if="messages.length === 0" class="subtitle-placeholder">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
等待对话开始...
|
||||||
|
</div>
|
||||||
|
<div class="chat-list" ref="chatListRef">
|
||||||
|
<div
|
||||||
|
v-for="msg in messages"
|
||||||
|
:key="msg.id"
|
||||||
|
:class="[
|
||||||
|
'chat-bubble',
|
||||||
|
msg.role === 'user' ? 'bubble-user' : 'bubble-ai',
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<div class="bubble-body">
|
||||||
|
<div
|
||||||
|
class="bubble-text"
|
||||||
|
:class="{
|
||||||
|
collapsed: isCollapsed(msg.id) && isLongText(msg.content),
|
||||||
|
'text-user': msg.role === 'user',
|
||||||
|
'text-ai': msg.role === 'ai',
|
||||||
|
}"
|
||||||
|
:ref="(el) => setMsgRef(msg.id, el)"
|
||||||
|
>
|
||||||
|
{{ msg.content }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="isLongText(msg.content)"
|
||||||
|
class="expand-btn"
|
||||||
|
@click="toggleCollapse(msg.id)"
|
||||||
|
>
|
||||||
|
{{ isCollapsed(msg.id) ? "展开全部" : "收起" }}
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
:style="{
|
||||||
|
transform: isCollapsed(msg.id)
|
||||||
|
? 'rotate(0deg)'
|
||||||
|
: 'rotate(180deg)',
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<polyline points="6 9 12 15 18 9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 模式3：合并气泡 -->
|
||||||
|
<div
|
||||||
|
v-if="currentMode === 'merged'"
|
||||||
|
class="subtitle-content merged-mode"
|
||||||
|
ref="scrollContainerRef"
|
||||||
|
>
|
||||||
|
<div v-if="messages.length === 0" class="subtitle-placeholder">
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="20"
|
||||||
|
height="20"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="1.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
等待对话开始...
|
||||||
|
</div>
|
||||||
|
<div class="merged-list" ref="mergedListRef">
|
||||||
|
<div
|
||||||
|
v-for="(pair, idx) in pairedMessages"
|
||||||
|
:key="idx"
|
||||||
|
class="merged-bubble"
|
||||||
|
>
|
||||||
|
<div v-if="pair.user" class="merged-user-section">
|
||||||
|
<div
|
||||||
|
class="merged-text text-user"
|
||||||
|
:class="{
|
||||||
|
collapsed:
|
||||||
|
isCollapsed(pair.user.id) && isLongText(pair.user.content),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ pair.user.content }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="isLongText(pair.user.content)"
|
||||||
|
class="expand-btn"
|
||||||
|
@click="toggleCollapse(pair.user.id)"
|
||||||
|
>
|
||||||
|
{{ isCollapsed(pair.user.id) ? "展开全部" : "收起" }}
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
:style="{
|
||||||
|
transform: isCollapsed(pair.user.id)
|
||||||
|
? 'rotate(0deg)'
|
||||||
|
: 'rotate(180deg)',
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<polyline points="6 9 12 15 18 9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div v-if="pair.ai" class="merged-ai-section">
|
||||||
|
<div
|
||||||
|
class="merged-text text-ai"
|
||||||
|
:class="{
|
||||||
|
collapsed:
|
||||||
|
isCollapsed(pair.ai.id) && isLongText(pair.ai.content),
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
{{ pair.ai.content }}
|
||||||
|
</div>
|
||||||
|
<button
|
||||||
|
v-if="isLongText(pair.ai.content)"
|
||||||
|
class="expand-btn"
|
||||||
|
@click="toggleCollapse(pair.ai.id)"
|
||||||
|
>
|
||||||
|
{{ isCollapsed(pair.ai.id) ? "展开全部" : "收起" }}
|
||||||
|
<svg
|
||||||
|
viewBox="0 0 24 24"
|
||||||
|
width="12"
|
||||||
|
height="12"
|
||||||
|
fill="none"
|
||||||
|
stroke="currentColor"
|
||||||
|
stroke-width="2.5"
|
||||||
|
stroke-linecap="round"
|
||||||
|
stroke-linejoin="round"
|
||||||
|
:style="{
|
||||||
|
transform: isCollapsed(pair.ai.id)
|
||||||
|
? 'rotate(0deg)'
|
||||||
|
: 'rotate(180deg)',
|
||||||
|
transition: 'transform 0.2s',
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<polyline points="6 9 12 15 18 9" />
|
||||||
|
</svg>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
ref,
|
||||||
|
computed,
|
||||||
|
watch,
|
||||||
|
nextTick,
|
||||||
|
onMounted,
|
||||||
|
onBeforeUnmount,
|
||||||
|
} from "vue";
|
||||||
|
import type { ChatMessage, SubtitleMode } from "@/types";
|
||||||
|
|
||||||
|
const props = defineProps<{
|
||||||
|
mode: SubtitleMode;
|
||||||
|
aiSubtitle: string;
|
||||||
|
userSubtitle: string;
|
||||||
|
messages: ChatMessage[];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
"update:mode": [value: SubtitleMode];
|
||||||
|
}>();
|
||||||
|
|
||||||
|
const currentMode = computed({
|
||||||
|
get: () => props.mode,
|
||||||
|
set: (val: SubtitleMode) => emit("update:mode", val),
|
||||||
|
});
|
||||||
|
|
||||||
|
const dropdownOpen = ref(false);
|
||||||
|
// 滚动容器ref：指向 .subtitle-content（实际可滚动容器）
|
||||||
|
const scrollContainerRef = ref<HTMLElement | null>(null);
|
||||||
|
const aiSubtitleBarRef = ref<HTMLElement | null>(null);
|
||||||
|
const aiSubtitleTextRef = ref<HTMLElement | null>(null);
|
||||||
|
|
||||||
|
// ===== AI字幕自适应字号 =====
|
||||||
|
const aiFontSize = ref(18);
|
||||||
|
const aiTextOverflow = ref(false);
|
||||||
|
|
||||||
|
// 计算AI字幕字号：根据文本长度动态调整
|
||||||
|
const computeAIFontSize = () => {
|
||||||
|
const text = props.aiSubtitle;
|
||||||
|
if (!text) {
|
||||||
|
aiFontSize.value = 18;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const len = text.length;
|
||||||
|
if (len <= 50) aiFontSize.value = 18;
|
||||||
|
else if (len <= 100) aiFontSize.value = 16;
|
||||||
|
else if (len <= 200) aiFontSize.value = 14;
|
||||||
|
else if (len <= 400) aiFontSize.value = 13;
|
||||||
|
else aiFontSize.value = 12;
|
||||||
|
};
|
||||||
|
|
||||||
|
// 检测AI字幕是否溢出
|
||||||
|
const checkAIOverflow = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
const bar = aiSubtitleBarRef.value;
|
||||||
|
const textEl = aiSubtitleTextRef.value;
|
||||||
|
if (bar && textEl) {
|
||||||
|
aiTextOverflow.value = textEl.scrollHeight > bar.clientHeight + 4;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollAIToBottom = () => {
|
||||||
|
if (aiSubtitleBarRef.value) {
|
||||||
|
aiSubtitleBarRef.value.scrollTo({
|
||||||
|
top: aiSubtitleBarRef.value.scrollHeight,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== 长文本折叠/展开 =====
|
||||||
|
const COLLAPSE_THRESHOLD = 120; // 超过120字符视为长文本
|
||||||
|
const collapsedIds = ref<Set<string>>(new Set());
|
||||||
|
const msgRefs = new Map<string, HTMLElement>();
|
||||||
|
|
||||||
|
const isLongText = (text: string): boolean => text.length > COLLAPSE_THRESHOLD;
|
||||||
|
|
||||||
|
const isCollapsed = (id: string): boolean => collapsedIds.value.has(id);
|
||||||
|
|
||||||
|
const toggleCollapse = (id: string) => {
|
||||||
|
if (collapsedIds.value.has(id)) {
|
||||||
|
collapsedIds.value.delete(id);
|
||||||
|
} else {
|
||||||
|
collapsedIds.value.add(id);
|
||||||
|
}
|
||||||
|
// 触发响应式更新
|
||||||
|
collapsedIds.value = new Set(collapsedIds.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const setMsgRef = (id: string, el: any) => {
|
||||||
|
if (el) msgRefs.set(id, el as HTMLElement);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== 下拉框 =====
|
||||||
|
const modeOptions = [
|
||||||
|
{ value: "ai-only" as SubtitleMode, label: "AI字幕", icon: "💬" },
|
||||||
|
{ value: "bubble" as SubtitleMode, label: "对话气泡", icon: "💭" },
|
||||||
|
{ value: "merged" as SubtitleMode, label: "合并气泡", icon: "📋" },
|
||||||
|
];
|
||||||
|
|
||||||
|
const modeLabel = computed(() => {
|
||||||
|
return (
|
||||||
|
modeOptions.find((o) => o.value === currentMode.value)?.label || "AI字幕"
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
const selectMode = (val: SubtitleMode) => {
|
||||||
|
currentMode.value = val;
|
||||||
|
dropdownOpen.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleClickOutside = (e: MouseEvent) => {
|
||||||
|
const target = e.target as HTMLElement;
|
||||||
|
if (!target.closest(".dropdown-wrapper")) {
|
||||||
|
dropdownOpen.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener("click", handleClickOutside);
|
||||||
|
});
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener("click", handleClickOutside);
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== 消息配对 =====
|
||||||
|
const pairedMessages = computed(() => {
|
||||||
|
const pairs: { user: ChatMessage | null; ai: ChatMessage | null }[] = [];
|
||||||
|
let currentPair: { user: ChatMessage | null; ai: ChatMessage | null } = {
|
||||||
|
user: null,
|
||||||
|
ai: null,
|
||||||
|
};
|
||||||
|
|
||||||
|
for (const msg of props.messages) {
|
||||||
|
if (msg.role === "user") {
|
||||||
|
if (currentPair.user) {
|
||||||
|
pairs.push(currentPair);
|
||||||
|
currentPair = { user: msg, ai: null };
|
||||||
|
} else {
|
||||||
|
currentPair.user = msg;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
currentPair.ai = msg;
|
||||||
|
pairs.push(currentPair);
|
||||||
|
currentPair = { user: null, ai: null };
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (currentPair.user || currentPair.ai) {
|
||||||
|
pairs.push(currentPair);
|
||||||
|
}
|
||||||
|
return pairs;
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== 监听变化 =====
|
||||||
|
|
||||||
|
// 模式切换时：立即刷新内容并滚动到底部
|
||||||
|
watch(
|
||||||
|
() => props.mode,
|
||||||
|
() => {
|
||||||
|
computeAIFontSize();
|
||||||
|
nextTick(() => {
|
||||||
|
checkAIOverflow();
|
||||||
|
scrollToBottom();
|
||||||
|
// AI模式切换后确保字幕滚动到底部
|
||||||
|
if (props.mode === "ai-only" && aiSubtitleBarRef.value) {
|
||||||
|
aiSubtitleBarRef.value.scrollTo({
|
||||||
|
top: aiSubtitleBarRef.value.scrollHeight,
|
||||||
|
behavior: "instant" as ScrollBehavior,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// AI字幕变化时：自适应字号 + 检测溢出 + 自动滚动
|
||||||
|
watch(
|
||||||
|
() => props.aiSubtitle,
|
||||||
|
() => {
|
||||||
|
computeAIFontSize();
|
||||||
|
checkAIOverflow();
|
||||||
|
// 自动滚动AI字幕到底部
|
||||||
|
nextTick(() => {
|
||||||
|
if (aiSubtitleBarRef.value) {
|
||||||
|
aiSubtitleBarRef.value.scrollTo({
|
||||||
|
top: aiSubtitleBarRef.value.scrollHeight,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 消息变化时：自动滚动到底部 + 新消息默认折叠
|
||||||
|
watch(
|
||||||
|
() => props.messages.length,
|
||||||
|
(newLen, oldLen) => {
|
||||||
|
// 新增的消息默认折叠
|
||||||
|
if (newLen > (oldLen ?? 0)) {
|
||||||
|
for (let i = oldLen ?? 0; i < newLen; i++) {
|
||||||
|
const msg = props.messages[i];
|
||||||
|
if (msg && isLongText(msg.content)) {
|
||||||
|
collapsedIds.value.add(msg.id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
collapsedIds.value = new Set(collapsedIds.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
nextTick(() => {
|
||||||
|
scrollToBottom();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 流式内容更新时：自动滚动到底部（消息数量不变但内容变化）
|
||||||
|
watch(
|
||||||
|
() => {
|
||||||
|
const msgs = props.messages;
|
||||||
|
if (msgs.length === 0) return "";
|
||||||
|
// 监听最后一条消息的内容变化，用于流式更新时自动滚动
|
||||||
|
return msgs[msgs.length - 1].content;
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
nextTick(() => {
|
||||||
|
scrollToBottom();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 将对话列表滚动到底部
|
||||||
|
* 兼容不同内容量：内容少时无需滚动，内容超出可见区域时平滑滚动到底部
|
||||||
|
*/
|
||||||
|
const scrollToBottom = () => {
|
||||||
|
const el = scrollContainerRef.value;
|
||||||
|
if (!el) return;
|
||||||
|
el.scrollTo({
|
||||||
|
top: el.scrollHeight,
|
||||||
|
behavior: "smooth",
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.subtitle-panel {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 下拉框 ===== */
|
||||||
|
.subtitle-header {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px solid rgba(255, 255, 255, 0.06);
|
||||||
|
margin-bottom: 8px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-wrapper {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-trigger {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 8px 14px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: rgba(255, 255, 255, 0.75);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: rgba(255, 255, 255, 0.18);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-wrapper.open & {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
border-color: rgba(108, 140, 255, 0.4);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-arrow {
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
.dropdown-wrapper.open & {
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-menu {
|
||||||
|
position: absolute;
|
||||||
|
bottom: calc(100% + 8px);
|
||||||
|
left: 0;
|
||||||
|
min-width: 180px;
|
||||||
|
background: rgba(20, 25, 50, 0.97);
|
||||||
|
backdrop-filter: blur(24px);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 12px;
|
||||||
|
padding: 6px;
|
||||||
|
z-index: 100;
|
||||||
|
box-shadow: 0 -8px 32px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 10px;
|
||||||
|
width: 100%;
|
||||||
|
padding: 10px 14px;
|
||||||
|
border-radius: 8px;
|
||||||
|
border: none;
|
||||||
|
background: none;
|
||||||
|
color: rgba(255, 255, 255, 0.65);
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 13px;
|
||||||
|
font-weight: 500;
|
||||||
|
transition: all 0.15s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.08);
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
&.active {
|
||||||
|
background: rgba(108, 140, 255, 0.15);
|
||||||
|
color: #6c8cff;
|
||||||
|
}
|
||||||
|
.item-icon {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
.item-label {
|
||||||
|
flex: 1;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.dropdown-enter-active,
|
||||||
|
.dropdown-leave-active {
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
}
|
||||||
|
.dropdown-enter-from,
|
||||||
|
.dropdown-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(6px) scale(0.96);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 字幕内容 ===== */
|
||||||
|
.subtitle-content {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 0;
|
||||||
|
max-height: calc(30vh - 60px);
|
||||||
|
overflow-y: auto;
|
||||||
|
animation: contentFade 0.3s ease;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(255, 255, 255, 0.12);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes contentFade {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(6px);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.subtitle-placeholder {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
gap: 8px;
|
||||||
|
height: 100%;
|
||||||
|
color: rgba(255, 255, 255, 0.3);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 模式1：AI字幕 ===== */
|
||||||
|
.ai-only-mode {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
padding-bottom: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-subtitle-bar {
|
||||||
|
width: 100%;
|
||||||
|
max-height: 100%;
|
||||||
|
overflow-y: auto;
|
||||||
|
background: linear-gradient(
|
||||||
|
135deg,
|
||||||
|
rgba(108, 140, 255, 0.06) 0%,
|
||||||
|
rgba(79, 110, 247, 0.03) 100%
|
||||||
|
);
|
||||||
|
border: 1px solid rgba(108, 140, 255, 0.06);
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 8px 12px;
|
||||||
|
backdrop-filter: blur(4px);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::-webkit-scrollbar {
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
&::-webkit-scrollbar-thumb {
|
||||||
|
background: rgba(108, 140, 255, 0.15);
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ai-subtitle-text {
|
||||||
|
line-height: 1.6;
|
||||||
|
color: #ffffff;
|
||||||
|
word-break: break-word;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 14px;
|
||||||
|
letter-spacing: 0.2px;
|
||||||
|
transition: font-size 0.3s ease;
|
||||||
|
text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
|
||||||
|
}
|
||||||
|
|
||||||
|
.scroll-hint {
|
||||||
|
position: sticky;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 28px;
|
||||||
|
height: 28px;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: rgba(108, 140, 255, 0.3);
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 8px auto 0;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(108, 140, 255, 0.5);
|
||||||
|
transform: translateX(-50%) scale(1.1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 模式2：对话气泡 ===== */
|
||||||
|
.bubble-mode {
|
||||||
|
.chat-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.chat-bubble {
|
||||||
|
animation: bubbleSlide 0.35s ease;
|
||||||
|
|
||||||
|
&.bubble-user {
|
||||||
|
.bubble-body {
|
||||||
|
background: rgba(240, 242, 255, 0.92);
|
||||||
|
border-color: rgba(79, 110, 247, 0.12);
|
||||||
|
border-radius: 14px 14px 4px 14px;
|
||||||
|
margin-left: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bubble-ai {
|
||||||
|
.bubble-body {
|
||||||
|
background: rgba(20, 30, 50, 0.85);
|
||||||
|
border-color: rgba(52, 211, 153, 0.12);
|
||||||
|
border-radius: 14px 14px 14px 4px;
|
||||||
|
margin-right: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bubbleSlide {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(10px) scale(0.96);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0) scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-body {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border: 1px solid;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.bubble-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.35s ease;
|
||||||
|
|
||||||
|
&.text-user {
|
||||||
|
color: #1a1a1a;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-ai {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
max-height: 4.8em;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2em;
|
||||||
|
background: linear-gradient(transparent, rgba(10, 14, 30, 0.5));
|
||||||
|
pointer-events: none;
|
||||||
|
border-radius: 0 0 8px 8px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 展开/收起按钮 ===== */
|
||||||
|
.expand-btn {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 4px;
|
||||||
|
margin-top: 6px;
|
||||||
|
padding: 3px 10px;
|
||||||
|
background: rgba(255, 255, 255, 0.06);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||||
|
border-radius: 6px;
|
||||||
|
color: rgba(255, 255, 255, 0.55);
|
||||||
|
font-size: 11px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.1);
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
border-color: rgba(255, 255, 255, 0.2);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 模式3：合并气泡 ===== */
|
||||||
|
.merged-mode {
|
||||||
|
.merged-list {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: 8px;
|
||||||
|
padding: 2px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.merged-bubble {
|
||||||
|
background: rgba(255, 255, 255, 0.02);
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.04);
|
||||||
|
border-radius: 12px;
|
||||||
|
overflow: hidden;
|
||||||
|
animation: bubbleSlide 0.35s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.merged-user-section {
|
||||||
|
padding: 8px 12px;
|
||||||
|
border-bottom: 1px solid rgba(79, 110, 247, 0.08);
|
||||||
|
}
|
||||||
|
|
||||||
|
.merged-ai-section {
|
||||||
|
padding: 8px 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.merged-text {
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.6;
|
||||||
|
word-break: break-word;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: max-height 0.35s ease;
|
||||||
|
|
||||||
|
&.text-user {
|
||||||
|
color: #303030ab;
|
||||||
|
text-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.text-ai {
|
||||||
|
color: #ffffff;
|
||||||
|
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.collapsed {
|
||||||
|
max-height: 4.8em;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 2em;
|
||||||
|
background: linear-gradient(transparent, rgba(10, 14, 30, 0.5));
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
833
src/hooks/useDigitalHuman.ts
Normal file
833
src/hooks/useDigitalHuman.ts
Normal file
@ -0,0 +1,833 @@
|
|||||||
|
import { ref, onBeforeUnmount, watch } from "vue";
|
||||||
|
import { v4 as uuidv4 } from "uuid";
|
||||||
|
import RealTimeHuman from "@bddh/starling-realtime-client";
|
||||||
|
import { checkPlayUnMute } from "@/utils/audioUtils";
|
||||||
|
import { SilenceDetector } from "@/utils/SilenceDetector";
|
||||||
|
import { TokenManager } from "@/utils/tokenManager";
|
||||||
|
import type { ChatMessage, SubtitleMode } from "@/types";
|
||||||
|
|
||||||
|
const DEFAULT_TEXT =
|
||||||
|
"我是虚拟数字人，这是我的开场白，你可以在左侧输入框内输入想要让我播报的内容";
|
||||||
|
const OPENING_TTS_DELAY_MS = 200;
|
||||||
|
const SILENCE_TIMEOUT_MS = 5000;
|
||||||
|
// 最短有效语音时长（秒），低于此时长视为无效输入
|
||||||
|
const MIN_VALID_DURATION_SEC = 0.5;
|
||||||
|
// 播报超时保护（毫秒）：如果FINISHED回调未触发，自动恢复状态
|
||||||
|
const BROADCAST_TIMEOUT_MS = 60000;
|
||||||
|
const APPID = "i-sfkmd7h8ex6nd";
|
||||||
|
const APP_KEY = "hs6b9nu9b080ap9hswgp";
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检测文本是否包含实质内容（去除空白和标点后仍有字符）
|
||||||
|
* 用于区分真实语音输入和环境噪音触发的空白ASR结果
|
||||||
|
*/
|
||||||
|
const hasSubstantialContent = (text: string): boolean => {
|
||||||
|
const cleaned = text.replace(
|
||||||
|
/[\s\u3000.,!?;:，。！？；：、…—\-_·""''（）()\[\]【】《》<>]/g,
|
||||||
|
"",
|
||||||
|
);
|
||||||
|
return cleaned.length > 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
enum ReadyState {
|
||||||
|
UNINSTANTIATED = -1,
|
||||||
|
CONNECTING = 0,
|
||||||
|
OPEN = 1,
|
||||||
|
CLOSING = 2,
|
||||||
|
CLOSED = 3,
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 拾音阶段状态机
|
||||||
|
* - idle: 空闲，可开始拾音
|
||||||
|
* - recording: 正在录音（BTN模式按住/RTC模式ASR确认有效语音）
|
||||||
|
* - processing: 语音采集完成，ASR正在识别
|
||||||
|
* - waiting: 等待AI回复
|
||||||
|
* - broadcasting: 数字人正在播报，不可拾音
|
||||||
|
*
|
||||||
|
* 合法状态转换：
|
||||||
|
* idle → recording (BTN模式按下 / RTC模式ASR确认有效语音内容)
|
||||||
|
* recording → processing (BTN松手 / RTC静音超时 / 收到ASR结果)
|
||||||
|
* recording → idle (音频被中断)
|
||||||
|
* processing → waiting (有效语音输入完成)
|
||||||
|
* processing → idle (无效语音输入 / ASR错误 / 音频被中断)
|
||||||
|
* waiting → broadcasting (AI回复到达，开始播报)
|
||||||
|
* broadcasting → idle (播报完成 / 播报被打断 / 播报超时)
|
||||||
|
*
|
||||||
|
* 关键防护：
|
||||||
|
* - idle状态下仅当ASR返回包含实质内容的QUERY时才转换到recording
|
||||||
|
* - 环境噪音触发的空白/标点ASR结果在idle状态下被忽略
|
||||||
|
* - SilenceDetector声音回调不触发状态转换，仅用于静音超时检测
|
||||||
|
*/
|
||||||
|
export type PickPhase =
|
||||||
|
| "idle"
|
||||||
|
| "recording"
|
||||||
|
| "processing"
|
||||||
|
| "waiting"
|
||||||
|
| "broadcasting";
|
||||||
|
|
||||||
|
/** 合法状态转换映射表 */
|
||||||
|
const VALID_TRANSITIONS: Record<PickPhase, PickPhase[]> = {
|
||||||
|
idle: ["recording"],
|
||||||
|
recording: ["processing", "idle"],
|
||||||
|
processing: ["waiting", "idle"],
|
||||||
|
waiting: ["broadcasting", "idle"],
|
||||||
|
broadcasting: ["idle"],
|
||||||
|
};
|
||||||
|
|
||||||
|
export function useDigitalHuman(options?: {
|
||||||
|
onUserQueryComplete?: (text: string) => void;
|
||||||
|
}) {
|
||||||
|
const humanInstanceRef = ref<any>(null);
|
||||||
|
const realTimeVideoReady = ref(false);
|
||||||
|
const wsConnected = ref(false);
|
||||||
|
const videoIsMuted = ref(false);
|
||||||
|
const checkOver = ref(false);
|
||||||
|
const openingPlayed = ref(false);
|
||||||
|
const audioMode = ref<"btn" | "rtc" | "">("");
|
||||||
|
const isRecording = ref(false);
|
||||||
|
const canTransfer = ref(false);
|
||||||
|
const isMuted = ref(true);
|
||||||
|
const enableInterruptRef = ref(true);
|
||||||
|
const pullAudioFromRTC = ref(false);
|
||||||
|
const isConnected = ref(false);
|
||||||
|
|
||||||
|
// ===== 拾音状态机 =====
|
||||||
|
const pickPhase = ref<PickPhase>("idle");
|
||||||
|
|
||||||
|
const setPickPhase = (phase: PickPhase, reason: string) => {
|
||||||
|
const prev = pickPhase.value;
|
||||||
|
// 状态转换守卫：检查是否为合法转换
|
||||||
|
const allowed = VALID_TRANSITIONS[prev];
|
||||||
|
if (allowed && !allowed.includes(phase)) {
|
||||||
|
console.warn(
|
||||||
|
`[状态机] 非法状态转换: ${prev} → ${phase} (${reason})，已阻止`,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
pickPhase.value = phase;
|
||||||
|
console.info(`[状态机] pickPhase: ${prev} → ${phase} (${reason})`);
|
||||||
|
};
|
||||||
|
|
||||||
|
// ===== 播报状态追踪 =====
|
||||||
|
// 数字人是否正在播报（TTS语音输出中）
|
||||||
|
const isBroadcasting = ref(false);
|
||||||
|
|
||||||
|
// 字幕相关
|
||||||
|
const subtitleMode = ref<SubtitleMode>("ai-only");
|
||||||
|
const currentAISubtitle = ref("");
|
||||||
|
const currentUserSubtitle = ref("");
|
||||||
|
const chatMessages = ref<ChatMessage[]>([]);
|
||||||
|
let streamingAIId: string | null = null;
|
||||||
|
let streamingUserId: string | null = null;
|
||||||
|
|
||||||
|
// Token 配置：使用 TokenManager 自动生成与刷新
|
||||||
|
const tokenManager = new TokenManager(APPID, APP_KEY);
|
||||||
|
const token = ref(tokenManager.getToken());
|
||||||
|
|
||||||
|
// Token 更新时同步到 ref
|
||||||
|
tokenManager.onTokenRefreshed((tokenInfo) => {
|
||||||
|
token.value = tokenInfo.token;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 静音检测器（RTC模式专用）
|
||||||
|
const silenceDetector = new SilenceDetector({
|
||||||
|
volumeThreshold: 8,
|
||||||
|
silenceDurationMs: SILENCE_TIMEOUT_MS,
|
||||||
|
});
|
||||||
|
|
||||||
|
// 录音时长追踪（BTN模式）
|
||||||
|
let recordStartTime = 0;
|
||||||
|
|
||||||
|
// 播报超时保护计时器
|
||||||
|
let broadcastTimeoutId: ReturnType<typeof setTimeout> | null = null;
|
||||||
|
|
||||||
|
const clearBroadcastTimeout = () => {
|
||||||
|
if (broadcastTimeoutId !== null) {
|
||||||
|
clearTimeout(broadcastTimeoutId);
|
||||||
|
broadcastTimeoutId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startBroadcastTimeout = () => {
|
||||||
|
clearBroadcastTimeout();
|
||||||
|
broadcastTimeoutId = setTimeout(() => {
|
||||||
|
console.warn("[播报] 超时保护触发：FINISHED回调未收到，自动恢复状态");
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
setPickPhase("idle", "播报超时保护，恢复空闲");
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
resumeAutoPickup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}, BROADCAST_TIMEOUT_MS);
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 进入播报状态：静音麦克风 + 暂停静音检测器（互斥锁）
|
||||||
|
*/
|
||||||
|
const enterBroadcasting = () => {
|
||||||
|
isBroadcasting.value = true;
|
||||||
|
setPickPhase("broadcasting", "数字人开始播报");
|
||||||
|
startBroadcastTimeout();
|
||||||
|
// RTC模式：播报期间禁用拾音
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(true);
|
||||||
|
isMuted.value = true;
|
||||||
|
canTransfer.value = false;
|
||||||
|
silenceDetector.pause();
|
||||||
|
console.info("[播报] RTC模式：麦克风已静音，静音检测器已暂停");
|
||||||
|
}
|
||||||
|
console.info("[播报] 开始播报，等待FINISHED信号");
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检测语音输入是否有效
|
||||||
|
*/
|
||||||
|
const isValidVoiceInput = (text: string, durationSec: number): boolean => {
|
||||||
|
const cleaned = text.replace(
|
||||||
|
/[\s\u3000.,!?;:，。！？；：、…—\-_·""''（）()\[\]【】《》<>]/g,
|
||||||
|
"",
|
||||||
|
);
|
||||||
|
if (!cleaned) {
|
||||||
|
console.info("[语音有效性] 文本为空或仅含标点/空白，判定为无效输入");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
if (durationSec < MIN_VALID_DURATION_SEC) {
|
||||||
|
console.info(
|
||||||
|
`[语音有效性] 录音时长 ${durationSec.toFixed(2)}s 不足 ${MIN_VALID_DURATION_SEC}s，判定为无效输入`,
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
return true;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 无效语音输入处理：重置状态，恢复可拾音
|
||||||
|
*/
|
||||||
|
const handleInvalidVoiceInput = () => {
|
||||||
|
console.info("[语音有效性] 终止当前交互流程，不进入等待回复状态");
|
||||||
|
currentUserSubtitle.value = "";
|
||||||
|
// 先暂停静音检测器，防止恢复拾音时产生竞争
|
||||||
|
silenceDetector.pause();
|
||||||
|
setPickPhase("idle", "无效语音输入，恢复空闲");
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
resumeAutoPickup();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 播报完成后的统一处理：恢复空闲状态，RTC模式下恢复拾音
|
||||||
|
*/
|
||||||
|
const onBroadcastFinished = () => {
|
||||||
|
clearBroadcastTimeout();
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
console.info("[播报] 数字人播报完成");
|
||||||
|
// 仅在 broadcasting 状态下恢复空闲，避免状态错乱
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
setPickPhase("idle", "播报完成，恢复空闲");
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
resumeAutoPickup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const addChatMessage = (
|
||||||
|
role: "user" | "ai",
|
||||||
|
content: string,
|
||||||
|
completed: boolean = false,
|
||||||
|
): ChatMessage => {
|
||||||
|
const msg: ChatMessage = {
|
||||||
|
id: uuidv4(),
|
||||||
|
role,
|
||||||
|
content,
|
||||||
|
timestamp: Date.now(),
|
||||||
|
completed,
|
||||||
|
};
|
||||||
|
if (!completed) {
|
||||||
|
if (role === "ai") {
|
||||||
|
streamingAIId = msg.id;
|
||||||
|
} else {
|
||||||
|
streamingUserId = msg.id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
chatMessages.value = [...chatMessages.value, msg];
|
||||||
|
return msg;
|
||||||
|
};
|
||||||
|
|
||||||
|
const updateStreamingMessage = (
|
||||||
|
role: "user" | "ai",
|
||||||
|
content: string,
|
||||||
|
completed: boolean,
|
||||||
|
) => {
|
||||||
|
const targetId = role === "ai" ? streamingAIId : streamingUserId;
|
||||||
|
if (!targetId) return;
|
||||||
|
|
||||||
|
const idx = chatMessages.value.findIndex((m) => m.id === targetId);
|
||||||
|
if (idx === -1) return;
|
||||||
|
|
||||||
|
const updated: ChatMessage = {
|
||||||
|
...chatMessages.value[idx],
|
||||||
|
content,
|
||||||
|
completed,
|
||||||
|
};
|
||||||
|
chatMessages.value = [
|
||||||
|
...chatMessages.value.slice(0, idx),
|
||||||
|
updated,
|
||||||
|
...chatMessages.value.slice(idx + 1),
|
||||||
|
];
|
||||||
|
|
||||||
|
if (completed) {
|
||||||
|
if (role === "ai") streamingAIId = null;
|
||||||
|
else streamingUserId = null;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startNewAIReply = () => {
|
||||||
|
currentAISubtitle.value = "";
|
||||||
|
streamingAIId = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const startNewUserQuery = () => {
|
||||||
|
currentUserSubtitle.value = "";
|
||||||
|
streamingUserId = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleDigitalHumanCallback = async (data: any) => {
|
||||||
|
const { status, content } = data;
|
||||||
|
console.info("[DH Callback]", status, content);
|
||||||
|
|
||||||
|
if (status === "DH_LIB_MESSAGE") {
|
||||||
|
switch (content.action) {
|
||||||
|
case "DOWN_SUBTITLE": {
|
||||||
|
const {
|
||||||
|
content: subtitleContent,
|
||||||
|
completed,
|
||||||
|
type,
|
||||||
|
} = JSON.parse(content.body);
|
||||||
|
if (type === "QUERY") {
|
||||||
|
// 播报期间忽略ASR结果（双重守卫：麦克风已静音，但防止残余回调）
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
console.info("[状态机] 播报中收到ASR结果，忽略");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// waiting 状态下忽略ASR结果（正在等LLM回复，不应接受新输入）
|
||||||
|
if (pickPhase.value === "waiting") {
|
||||||
|
console.info("[状态机] 等待AI回复中，忽略QUERY字幕");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
// idle 状态下收到 QUERY：必须验证内容有实质才允许状态转换
|
||||||
|
// 环境噪音可能触发 ASR 产生空白/标点内容的 QUERY，不应进入识别
|
||||||
|
if (pickPhase.value === "idle") {
|
||||||
|
const hasSubstance = hasSubstantialContent(subtitleContent);
|
||||||
|
if (!hasSubstance) {
|
||||||
|
console.info(
|
||||||
|
"[状态机] idle状态下QUERY内容无实质（空白/标点），忽略",
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// 内容有实质：用户已开始有效说话
|
||||||
|
// 暂停静音检测器避免竞争，然后进入 recording 再到 processing
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
silenceDetector.pause();
|
||||||
|
}
|
||||||
|
console.info(
|
||||||
|
"[状态机] idle状态下收到有效ASR结果，用户已开始说话",
|
||||||
|
);
|
||||||
|
setPickPhase("recording", "ASR确认检测到有效语音");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (pickPhase.value === "recording") {
|
||||||
|
setPickPhase("processing", "收到ASR识别结果");
|
||||||
|
}
|
||||||
|
|
||||||
|
if (streamingUserId && !completed) {
|
||||||
|
currentUserSubtitle.value = subtitleContent;
|
||||||
|
updateStreamingMessage("user", subtitleContent, completed);
|
||||||
|
} else if (!streamingUserId) {
|
||||||
|
startNewUserQuery();
|
||||||
|
currentUserSubtitle.value = subtitleContent;
|
||||||
|
addChatMessage("user", subtitleContent, completed);
|
||||||
|
} else {
|
||||||
|
currentUserSubtitle.value = subtitleContent;
|
||||||
|
updateStreamingMessage("user", subtitleContent, completed);
|
||||||
|
}
|
||||||
|
if (completed) {
|
||||||
|
console.info("完整询问内容：", subtitleContent);
|
||||||
|
const recordDuration =
|
||||||
|
recordStartTime > 0
|
||||||
|
? (Date.now() - recordStartTime) / 1000
|
||||||
|
: MIN_VALID_DURATION_SEC;
|
||||||
|
recordStartTime = 0;
|
||||||
|
if (!isValidVoiceInput(subtitleContent, recordDuration)) {
|
||||||
|
handleInvalidVoiceInput();
|
||||||
|
} else {
|
||||||
|
setPickPhase("waiting", "有效语音输入完成，等待AI回复");
|
||||||
|
options?.onUserQueryComplete?.(subtitleContent);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (type === "REPLY") {
|
||||||
|
if (streamingAIId && !completed) {
|
||||||
|
currentAISubtitle.value = subtitleContent;
|
||||||
|
updateStreamingMessage("ai", subtitleContent, completed);
|
||||||
|
} else if (!streamingAIId) {
|
||||||
|
startNewAIReply();
|
||||||
|
currentAISubtitle.value = subtitleContent;
|
||||||
|
addChatMessage("ai", subtitleContent, completed);
|
||||||
|
} else {
|
||||||
|
currentAISubtitle.value = subtitleContent;
|
||||||
|
updateStreamingMessage("ai", subtitleContent, completed);
|
||||||
|
}
|
||||||
|
// REPLY字幕完成 ≠ 播报完成，不在此处恢复拾音
|
||||||
|
// 拾音恢复由 TEXT_RENDER 的 FINISHED 回调触发
|
||||||
|
if (completed) {
|
||||||
|
console.info("[字幕] AI回复字幕完成，等待播报音频结束");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
case "AUDIO_QUERY_INTERRUPT":
|
||||||
|
console.info("停止发送音频");
|
||||||
|
if (
|
||||||
|
pickPhase.value === "recording" ||
|
||||||
|
pickPhase.value === "processing"
|
||||||
|
) {
|
||||||
|
setPickPhase("idle", "音频被中断，恢复空闲");
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "EMPTY_ASR_RESULT":
|
||||||
|
console.info("空ASR结果，判定为无效语音输入");
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
console.info("[状态机] 播报中收到空ASR结果，忽略");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// 仅在 recording/processing 状态下才处理为无效输入
|
||||||
|
// idle 状态下收到空ASR结果说明环境噪音触发，不应改变状态
|
||||||
|
if (
|
||||||
|
pickPhase.value !== "recording" &&
|
||||||
|
pickPhase.value !== "processing"
|
||||||
|
) {
|
||||||
|
console.info(`[状态机] 当前状态 ${pickPhase.value}，忽略空ASR结果`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
handleInvalidVoiceInput();
|
||||||
|
break;
|
||||||
|
case "ASR_ERROR":
|
||||||
|
console.info("ASR错误:", content);
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
console.info("[状态机] 播报中收到ASR错误，忽略");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// 仅在 recording/processing 状态下才处理为无效输入
|
||||||
|
if (
|
||||||
|
pickPhase.value !== "recording" &&
|
||||||
|
pickPhase.value !== "processing"
|
||||||
|
) {
|
||||||
|
console.info(`[状态机] 当前状态 ${pickPhase.value}，忽略ASR错误`);
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
handleInvalidVoiceInput();
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (status === "DH_LIB_FULL_STATUS") {
|
||||||
|
const { type, action } = content;
|
||||||
|
if (type === "rtcState") {
|
||||||
|
if (action === "remotevideoon") {
|
||||||
|
realTimeVideoReady.value = true;
|
||||||
|
checkPlayUnMuteFun();
|
||||||
|
}
|
||||||
|
if (action === "localVideoMuted" && content.body) {
|
||||||
|
videoIsMuted.value = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (type === "wsState") {
|
||||||
|
if (content.readyState === ReadyState.OPEN) {
|
||||||
|
wsConnected.value = true;
|
||||||
|
isConnected.value = true;
|
||||||
|
} else if (
|
||||||
|
content.readyState === ReadyState.CLOSED ||
|
||||||
|
content.readyState === ReadyState.CLOSING
|
||||||
|
) {
|
||||||
|
wsConnected.value = false;
|
||||||
|
isConnected.value = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const checkPlayUnMuteFun = async () => {
|
||||||
|
const result = await checkPlayUnMute();
|
||||||
|
videoIsMuted.value = !result;
|
||||||
|
checkOver.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
const destroyCurrentInstance = async () => {
|
||||||
|
if (!humanInstanceRef.value) return;
|
||||||
|
try {
|
||||||
|
await humanInstanceRef.value.destroy();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("销毁旧实例失败:", error);
|
||||||
|
} finally {
|
||||||
|
humanInstanceRef.value = null;
|
||||||
|
isConnected.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const connect = async (mode: "btn" | "rtc" | "" = "btn") => {
|
||||||
|
await destroyCurrentInstance();
|
||||||
|
openingPlayed.value = false;
|
||||||
|
audioMode.value = mode;
|
||||||
|
pullAudioFromRTC.value = mode === "rtc";
|
||||||
|
pickPhase.value = "idle";
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
|
||||||
|
// 获取最新 Token 并启动自动刷新
|
||||||
|
token.value = tokenManager.getToken();
|
||||||
|
tokenManager.startAutoRefresh();
|
||||||
|
|
||||||
|
const config: any = {
|
||||||
|
token: token.value,
|
||||||
|
wrapperId: "human-wrapper",
|
||||||
|
connectParams: {
|
||||||
|
ttsPer: "CAP_4189",
|
||||||
|
figureId: "3999826",
|
||||||
|
resolutionHeight: 1920,
|
||||||
|
resolutionWidth: 1080,
|
||||||
|
inactiveDisconnectSec: 300,
|
||||||
|
},
|
||||||
|
renderParams: {
|
||||||
|
closeLog: true,
|
||||||
|
autoChromaKey: false,
|
||||||
|
fullStatus: true,
|
||||||
|
},
|
||||||
|
onDigitalHumanCallback: handleDigitalHumanCallback,
|
||||||
|
};
|
||||||
|
|
||||||
|
if (mode !== "") {
|
||||||
|
config.connectParams.pullAudioFromRtc = mode === "rtc";
|
||||||
|
config.connectParams.pickAudioMode =
|
||||||
|
mode === "btn" ? "pressButton" : "free";
|
||||||
|
config.connectParams.enableInterrupt = enableInterruptRef.value;
|
||||||
|
}
|
||||||
|
|
||||||
|
humanInstanceRef.value = new RealTimeHuman(config);
|
||||||
|
humanInstanceRef.value.createServer();
|
||||||
|
};
|
||||||
|
|
||||||
|
const disconnect = async () => {
|
||||||
|
silenceDetector.stop();
|
||||||
|
clearBroadcastTimeout();
|
||||||
|
tokenManager.stopAutoRefresh();
|
||||||
|
pickPhase.value = "idle";
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
|
||||||
|
currentAISubtitle.value = "";
|
||||||
|
currentUserSubtitle.value = "";
|
||||||
|
chatMessages.value = [];
|
||||||
|
streamingAIId = null;
|
||||||
|
streamingUserId = null;
|
||||||
|
isRecording.value = false;
|
||||||
|
canTransfer.value = false;
|
||||||
|
isMuted.value = true;
|
||||||
|
realTimeVideoReady.value = false;
|
||||||
|
wsConnected.value = false;
|
||||||
|
checkOver.value = false;
|
||||||
|
videoIsMuted.value = false;
|
||||||
|
openingPlayed.value = false;
|
||||||
|
try {
|
||||||
|
await humanInstanceRef.value?.destroy?.();
|
||||||
|
} catch (error) {
|
||||||
|
console.error("销毁发生错误：", error);
|
||||||
|
} finally {
|
||||||
|
humanInstanceRef.value = null;
|
||||||
|
isConnected.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const textRender = (text: string) => {
|
||||||
|
const commandId = uuidv4();
|
||||||
|
enterBroadcasting();
|
||||||
|
|
||||||
|
humanInstanceRef.value?.sendMessage?.(
|
||||||
|
{
|
||||||
|
action: "TEXT_RENDER",
|
||||||
|
body: text,
|
||||||
|
requestId: commandId,
|
||||||
|
},
|
||||||
|
({ action }: { action: string }) => {
|
||||||
|
console.info(`[播报] TEXT_RENDER callback: ${action}`);
|
||||||
|
if (action === "FINISHED") {
|
||||||
|
onBroadcastFinished();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const streamTextRender = (texts: string[], requestId?: string) => {
|
||||||
|
const commandId = requestId || uuidv4();
|
||||||
|
enterBroadcasting();
|
||||||
|
|
||||||
|
texts.forEach((text, index) => {
|
||||||
|
humanInstanceRef.value?.textStreamRender?.({
|
||||||
|
body: JSON.stringify({
|
||||||
|
first: index === 0,
|
||||||
|
last: index === texts.length - 1,
|
||||||
|
text,
|
||||||
|
}),
|
||||||
|
requestId: commandId,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const interrupt = async () => {
|
||||||
|
console.info("发送打断");
|
||||||
|
clearBroadcastTimeout();
|
||||||
|
await humanInstanceRef.value?.interrupt?.();
|
||||||
|
// 打断后播报结束，恢复状态
|
||||||
|
if (isBroadcasting.value) {
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
console.info("[播报] 被打断，播报终止");
|
||||||
|
}
|
||||||
|
if (pickPhase.value === "broadcasting") {
|
||||||
|
setPickPhase("idle", "播报被打断，恢复空闲");
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
resumeAutoPickup();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
console.info("打断生效");
|
||||||
|
};
|
||||||
|
|
||||||
|
const muteHuman = () => humanInstanceRef.value?.muteHuman?.();
|
||||||
|
const unMuteHuman = () => humanInstanceRef.value?.unMuteHuman?.();
|
||||||
|
const playHuman = () => humanInstanceRef.value?.playHuman?.();
|
||||||
|
const pauseHuman = () => humanInstanceRef.value?.pauseHuman?.();
|
||||||
|
|
||||||
|
const changeMicrophoneState = (mute: boolean) => {
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(mute);
|
||||||
|
canTransfer.value = !mute;
|
||||||
|
isMuted.value = mute;
|
||||||
|
|
||||||
|
if (audioMode.value === "rtc") {
|
||||||
|
if (mute) {
|
||||||
|
silenceDetector.pause();
|
||||||
|
} else {
|
||||||
|
const resumed = silenceDetector.resume();
|
||||||
|
if (!resumed) {
|
||||||
|
startSilenceDetection();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 启动静音检测（仅RTC模式）
|
||||||
|
*/
|
||||||
|
const startSilenceDetection = async () => {
|
||||||
|
if (audioMode.value !== "rtc") return;
|
||||||
|
|
||||||
|
const started = await silenceDetector.start(
|
||||||
|
() => {
|
||||||
|
// 状态守卫：仅在 recording 状态下才触发识别流程
|
||||||
|
// idle 状态下静音超时不应自动进入识别（用户未主动开始录入）
|
||||||
|
if (pickPhase.value !== "recording") {
|
||||||
|
console.info(
|
||||||
|
`[自动拾音] 当前状态为 ${pickPhase.value}，忽略静音超时回调`,
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
console.info("[自动拾音] 检测到5秒静音，暂停拾音等待ASR结果");
|
||||||
|
setPickPhase("processing", "RTC静音超时，等待ASR结果");
|
||||||
|
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(true);
|
||||||
|
isMuted.value = true;
|
||||||
|
canTransfer.value = false;
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
// 声音恢复回调：仅用于日志记录，不自动改变状态
|
||||||
|
// 状态转换由 ASR 的 QUERY 结果驱动（有实质内容才转换）
|
||||||
|
// 避免环境噪音触发 idle → recording 导致误进入识别状态
|
||||||
|
console.info("[自动拾音] 检测到声音");
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
if (!started) {
|
||||||
|
console.warn("[自动拾音] 静音检测器启动失败，可能没有麦克风权限");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 自动恢复拾音（播报完成后或无效输入时调用）
|
||||||
|
*/
|
||||||
|
const resumeAutoPickup = () => {
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(false);
|
||||||
|
isMuted.value = false;
|
||||||
|
canTransfer.value = true;
|
||||||
|
|
||||||
|
const resumed = silenceDetector.resume();
|
||||||
|
if (!resumed) {
|
||||||
|
console.warn("[自动拾音] resume 失败，回退到 start 重新获取麦克风");
|
||||||
|
startSilenceDetection();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const startRecord = async () => {
|
||||||
|
if (isRecording.value) return;
|
||||||
|
// 播报中不允许录音，防止中断数字人播报
|
||||||
|
if (isBroadcasting.value) {
|
||||||
|
console.info("[状态机] 数字人播报中，不可开始录音");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
// waiting/broadcasting状态下不允许录音
|
||||||
|
if (pickPhase.value === "waiting" || pickPhase.value === "broadcasting") {
|
||||||
|
console.info(`[状态机] 当前状态 ${pickPhase.value}，不可开始录音`);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (enableInterruptRef.value) {
|
||||||
|
await humanInstanceRef.value?.interrupt();
|
||||||
|
}
|
||||||
|
isRecording.value = true;
|
||||||
|
recordStartTime = Date.now();
|
||||||
|
setPickPhase("recording", "BTN模式开始录音");
|
||||||
|
humanInstanceRef.value?.startRecord?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
const stopRecord = () => {
|
||||||
|
if (!isRecording.value) return;
|
||||||
|
isRecording.value = false;
|
||||||
|
if (pickPhase.value === "recording") {
|
||||||
|
setPickPhase("processing", "BTN模式松手，等待ASR结果");
|
||||||
|
}
|
||||||
|
humanInstanceRef.value?.stopRecord?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
// 开场白自动播放
|
||||||
|
watch(
|
||||||
|
[realTimeVideoReady, wsConnected, checkOver, videoIsMuted, audioMode],
|
||||||
|
([isVideoReady, isWsConnected, isCheckOver, isVideoMuted, mode]) => {
|
||||||
|
if (mode === "rtc") {
|
||||||
|
changeMicrophoneState(true);
|
||||||
|
}
|
||||||
|
if (openingPlayed.value) return;
|
||||||
|
if (isVideoReady && isWsConnected && isCheckOver && !isVideoMuted) {
|
||||||
|
openingPlayed.value = true;
|
||||||
|
const commandId = uuidv4();
|
||||||
|
if (mode === "rtc") {
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(true);
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
humanInstanceRef.value?.sendMessage?.(
|
||||||
|
{
|
||||||
|
action: "TEXT_RENDER",
|
||||||
|
body: DEFAULT_TEXT,
|
||||||
|
requestId: commandId,
|
||||||
|
},
|
||||||
|
({ action }: { action: string }) => {
|
||||||
|
if (action === "FINISHED") {
|
||||||
|
isBroadcasting.value = false;
|
||||||
|
if (mode === "rtc") {
|
||||||
|
humanInstanceRef.value?.muteMicrophone?.(false);
|
||||||
|
isMuted.value = false;
|
||||||
|
setPickPhase("idle", "开场白播放完成，RTC模式就绪");
|
||||||
|
startSilenceDetection();
|
||||||
|
} else {
|
||||||
|
setPickPhase("idle", "开场白播放完成");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
}, OPENING_TTS_DELAY_MS);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
|
// 键盘事件
|
||||||
|
const onKeyDown = (e: KeyboardEvent) => {
|
||||||
|
e.preventDefault();
|
||||||
|
if (e.repeat || audioMode.value !== "btn") return;
|
||||||
|
if (e.code === "Space" || e.keyCode === 32) {
|
||||||
|
startRecord();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onKeyUp = (e: KeyboardEvent) => {
|
||||||
|
if (e.repeat) return;
|
||||||
|
if (audioMode.value === "btn" && (e.code === "Space" || e.keyCode === 32)) {
|
||||||
|
stopRecord();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(
|
||||||
|
audioMode,
|
||||||
|
(mode) => {
|
||||||
|
if (mode === "btn") {
|
||||||
|
document.addEventListener("keydown", onKeyDown);
|
||||||
|
document.addEventListener("keyup", onKeyUp);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
document.removeEventListener("keydown", onKeyDown);
|
||||||
|
document.removeEventListener("keyup", onKeyUp);
|
||||||
|
},
|
||||||
|
{ immediate: true },
|
||||||
|
);
|
||||||
|
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
document.removeEventListener("keydown", onKeyDown);
|
||||||
|
document.removeEventListener("keyup", onKeyUp);
|
||||||
|
silenceDetector.stop();
|
||||||
|
clearBroadcastTimeout();
|
||||||
|
tokenManager.stopAutoRefresh();
|
||||||
|
const inst = humanInstanceRef.value;
|
||||||
|
humanInstanceRef.value = null;
|
||||||
|
if (inst) {
|
||||||
|
void inst.destroy().catch((error: unknown) => {
|
||||||
|
console.error("组件卸载销毁数字人实例失败:", error);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return {
|
||||||
|
// 状态
|
||||||
|
humanInstanceRef,
|
||||||
|
isConnected,
|
||||||
|
realTimeVideoReady,
|
||||||
|
wsConnected,
|
||||||
|
videoIsMuted,
|
||||||
|
audioMode,
|
||||||
|
isRecording,
|
||||||
|
canTransfer,
|
||||||
|
isMuted,
|
||||||
|
token,
|
||||||
|
tokenManager,
|
||||||
|
// 拾音状态机
|
||||||
|
pickPhase,
|
||||||
|
setPickPhase,
|
||||||
|
// 播报状态
|
||||||
|
isBroadcasting,
|
||||||
|
// 字幕
|
||||||
|
subtitleMode,
|
||||||
|
currentAISubtitle,
|
||||||
|
currentUserSubtitle,
|
||||||
|
chatMessages,
|
||||||
|
// 方法
|
||||||
|
connect,
|
||||||
|
disconnect,
|
||||||
|
textRender,
|
||||||
|
streamTextRender,
|
||||||
|
interrupt,
|
||||||
|
muteHuman,
|
||||||
|
unMuteHuman,
|
||||||
|
playHuman,
|
||||||
|
pauseHuman,
|
||||||
|
changeMicrophoneState,
|
||||||
|
startRecord,
|
||||||
|
stopRecord,
|
||||||
|
};
|
||||||
|
}
|
||||||
115
src/hooks/useLLM.ts
Normal file
115
src/hooks/useLLM.ts
Normal file
@ -0,0 +1,115 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
// 火山方舟 Chat Completions API 配置
|
||||||
|
const LLM_API_URL =
|
||||||
|
"https://ai.yantootech.com/polyhedron/api/ark/chat/completions";
|
||||||
|
const DEFAULT_MODEL = "bot-20260605135355-68pth";
|
||||||
|
|
||||||
|
interface LLMMessage {
|
||||||
|
role: "system" | "user" | "assistant";
|
||||||
|
content: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LLMChoice {
|
||||||
|
index: number;
|
||||||
|
message: {
|
||||||
|
role: string;
|
||||||
|
content: string;
|
||||||
|
};
|
||||||
|
finish_reason: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
interface LLMResponse {
|
||||||
|
id?: string;
|
||||||
|
object?: string;
|
||||||
|
created?: number;
|
||||||
|
model?: string;
|
||||||
|
choices?: LLMChoice[];
|
||||||
|
usage?: {
|
||||||
|
prompt_tokens: number;
|
||||||
|
completion_tokens: number;
|
||||||
|
total_tokens: number;
|
||||||
|
};
|
||||||
|
error?: string;
|
||||||
|
details?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useLLM() {
|
||||||
|
const isLoading = ref(false);
|
||||||
|
const error = ref("");
|
||||||
|
const conversationHistory = ref<LLMMessage[]>([]);
|
||||||
|
|
||||||
|
const SYSTEM_PROMPT: LLMMessage = {
|
||||||
|
role: "system",
|
||||||
|
content: "你是一个友好的数字人助手，请用简洁自然的语言回答用户的问题。",
|
||||||
|
};
|
||||||
|
|
||||||
|
const sendToLLM = async (userMessage: string): Promise<string> => {
|
||||||
|
if (!userMessage.trim()) return "";
|
||||||
|
|
||||||
|
isLoading.value = true;
|
||||||
|
error.value = "";
|
||||||
|
|
||||||
|
conversationHistory.value.push({
|
||||||
|
role: "user",
|
||||||
|
content: userMessage,
|
||||||
|
});
|
||||||
|
|
||||||
|
try {
|
||||||
|
const messages: LLMMessage[] = [
|
||||||
|
SYSTEM_PROMPT,
|
||||||
|
...conversationHistory.value,
|
||||||
|
];
|
||||||
|
|
||||||
|
const response = await fetch(LLM_API_URL, {
|
||||||
|
method: "POST",
|
||||||
|
headers: {
|
||||||
|
"Content-Type": "application/json",
|
||||||
|
},
|
||||||
|
body: JSON.stringify({
|
||||||
|
model: DEFAULT_MODEL,
|
||||||
|
stream: false,
|
||||||
|
messages,
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP错误: ${response.status}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const data: LLMResponse = await response.json();
|
||||||
|
|
||||||
|
if (data.error) {
|
||||||
|
throw new Error(`API错误: ${data.error}`);
|
||||||
|
}
|
||||||
|
|
||||||
|
const aiReply = data.choices?.[0]?.message?.content || "";
|
||||||
|
|
||||||
|
conversationHistory.value.push({
|
||||||
|
role: "assistant",
|
||||||
|
content: aiReply,
|
||||||
|
});
|
||||||
|
|
||||||
|
return aiReply;
|
||||||
|
} catch (err: any) {
|
||||||
|
const errorMsg = err.message || "请求失败";
|
||||||
|
error.value = errorMsg;
|
||||||
|
console.error("LLM请求错误:", err);
|
||||||
|
throw err;
|
||||||
|
} finally {
|
||||||
|
isLoading.value = false;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const clearHistory = () => {
|
||||||
|
conversationHistory.value = [];
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isLoading,
|
||||||
|
error,
|
||||||
|
conversationHistory,
|
||||||
|
sendToLLM,
|
||||||
|
clearHistory,
|
||||||
|
};
|
||||||
|
}
|
||||||
70
src/hooks/useTTS.ts
Normal file
70
src/hooks/useTTS.ts
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
import { ref } from "vue";
|
||||||
|
|
||||||
|
export function useTTS() {
|
||||||
|
const isSpeaking = ref(false);
|
||||||
|
let currentUtterance: SpeechSynthesisUtterance | null = null;
|
||||||
|
|
||||||
|
const speak = (text: string, onEnd?: () => void): void => {
|
||||||
|
if (!text.trim()) return;
|
||||||
|
|
||||||
|
// 先停止当前播放
|
||||||
|
stop();
|
||||||
|
|
||||||
|
const utterance = new SpeechSynthesisUtterance(text);
|
||||||
|
utterance.lang = "zh-CN";
|
||||||
|
utterance.rate = 1.0;
|
||||||
|
utterance.pitch = 1.0;
|
||||||
|
utterance.volume = 1.0;
|
||||||
|
|
||||||
|
// 尝试选择中文语音
|
||||||
|
const voices = window.speechSynthesis.getVoices();
|
||||||
|
const zhVoice = voices.find((v) => v.lang.includes("zh"));
|
||||||
|
if (zhVoice) {
|
||||||
|
utterance.voice = zhVoice;
|
||||||
|
}
|
||||||
|
|
||||||
|
utterance.onstart = () => {
|
||||||
|
isSpeaking.value = true;
|
||||||
|
};
|
||||||
|
|
||||||
|
utterance.onend = () => {
|
||||||
|
isSpeaking.value = false;
|
||||||
|
currentUtterance = null;
|
||||||
|
onEnd?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
utterance.onerror = (e) => {
|
||||||
|
console.error("TTS播放错误:", e);
|
||||||
|
isSpeaking.value = false;
|
||||||
|
currentUtterance = null;
|
||||||
|
onEnd?.();
|
||||||
|
};
|
||||||
|
|
||||||
|
currentUtterance = utterance;
|
||||||
|
window.speechSynthesis.speak(utterance);
|
||||||
|
};
|
||||||
|
|
||||||
|
const stop = (): void => {
|
||||||
|
if (window.speechSynthesis.speaking) {
|
||||||
|
window.speechSynthesis.cancel();
|
||||||
|
}
|
||||||
|
isSpeaking.value = false;
|
||||||
|
currentUtterance = null;
|
||||||
|
};
|
||||||
|
|
||||||
|
const pause = (): void => {
|
||||||
|
window.speechSynthesis.pause();
|
||||||
|
};
|
||||||
|
|
||||||
|
const resume = (): void => {
|
||||||
|
window.speechSynthesis.resume();
|
||||||
|
};
|
||||||
|
|
||||||
|
return {
|
||||||
|
isSpeaking,
|
||||||
|
speak,
|
||||||
|
stop,
|
||||||
|
pause,
|
||||||
|
resume,
|
||||||
|
};
|
||||||
|
}
|
||||||
9
src/main.ts
Normal file
9
src/main.ts
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
import { createApp } from "vue";
|
||||||
|
import ElementPlus from "element-plus";
|
||||||
|
import "element-plus/dist/index.css";
|
||||||
|
import App from "./App.vue";
|
||||||
|
import "./style.css";
|
||||||
|
|
||||||
|
const app = createApp(App);
|
||||||
|
app.use(ElementPlus);
|
||||||
|
app.mount("#app");
|
||||||
38
src/style.css
Normal file
38
src/style.css
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
html, body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
font-family: "PingFang SC", "Noto Sans SC", "Microsoft YaHei", sans-serif;
|
||||||
|
color: #fff;
|
||||||
|
background-color: #0a0e1a;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
#app {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-color: #4f6ef7;
|
||||||
|
--primary-light: #6c8cff;
|
||||||
|
--bg-dark: #0a0e1a;
|
||||||
|
--card-bg: rgba(255, 255, 255, 0.04);
|
||||||
|
--border-color: rgba(255, 255, 255, 0.08);
|
||||||
|
--text-primary: rgba(255, 255, 255, 0.92);
|
||||||
|
--text-secondary: rgba(255, 255, 255, 0.5);
|
||||||
|
--ai-accent: #34d399;
|
||||||
|
--user-accent: #6c8cff;
|
||||||
|
--danger-color: #f87171;
|
||||||
|
--purple-accent: #c084fc;
|
||||||
|
}
|
||||||
269
src/tests/tokenManager.test.ts
Normal file
269
src/tests/tokenManager.test.ts
Normal file
@ -0,0 +1,269 @@
|
|||||||
|
import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
|
||||||
|
import CryptoJS from "crypto-js";
|
||||||
|
import {
|
||||||
|
generateToken,
|
||||||
|
isTokenExpiring,
|
||||||
|
isTokenExpired,
|
||||||
|
isAuthError,
|
||||||
|
TokenManager,
|
||||||
|
} from "../utils/tokenManager";
|
||||||
|
|
||||||
|
const TEST_APP_ID = "test-app-id";
|
||||||
|
const TEST_APP_KEY = "test-app-key";
|
||||||
|
|
||||||
|
// ===== Token 生成算法测试 =====
|
||||||
|
|
||||||
|
describe("generateToken", () => {
|
||||||
|
it("应生成格式为 appId/signature/time 的 token", () => {
|
||||||
|
const result = generateToken(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
|
||||||
|
expect(result.token).toMatch(
|
||||||
|
/^test-app-id\/[a-f0-9]+\/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("签名应使用 HMAC-SHA256(appId+time, appKey) 算法", () => {
|
||||||
|
const result = generateToken(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
const parts = result.token.split("/");
|
||||||
|
const signature = parts[1];
|
||||||
|
const time = parts.slice(2).join("/"); // 时间戳含 /，需特殊处理
|
||||||
|
|
||||||
|
const expectedSignature = CryptoJS.HmacSHA256(
|
||||||
|
TEST_APP_ID + time,
|
||||||
|
TEST_APP_KEY,
|
||||||
|
).toString(CryptoJS.enc.Hex);
|
||||||
|
|
||||||
|
expect(signature).toBe(expectedSignature);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("过期时间应为当前时间往后60分钟", () => {
|
||||||
|
const before = Date.now();
|
||||||
|
const result = generateToken(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
const after = Date.now();
|
||||||
|
|
||||||
|
const expiresAtMs = new Date(result.expiresAt).getTime();
|
||||||
|
const expectedMin = before + 60 * 60 * 1000;
|
||||||
|
const expectedMax = after + 60 * 60 * 1000;
|
||||||
|
|
||||||
|
expect(expiresAtMs).toBeGreaterThanOrEqual(expectedMin);
|
||||||
|
expect(expiresAtMs).toBeLessThanOrEqual(expectedMax);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("appId 为空时应抛出错误", () => {
|
||||||
|
expect(() => generateToken("", TEST_APP_KEY)).toThrow(
|
||||||
|
"appId 和 appKey 不能为空",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("appKey 为空时应抛出错误", () => {
|
||||||
|
expect(() => generateToken(TEST_APP_ID, "")).toThrow(
|
||||||
|
"appId 和 appKey 不能为空",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("不同 appKey 应生成不同签名", () => {
|
||||||
|
const result1 = generateToken(TEST_APP_ID, "key1");
|
||||||
|
const result2 = generateToken(TEST_APP_ID, "key2");
|
||||||
|
|
||||||
|
// 时间戳不同，签名也不同；但即使时间戳相同，不同 key 签名也不同
|
||||||
|
expect(result1.token).not.toBe(result2.token);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== Token 过期检测测试 =====
|
||||||
|
|
||||||
|
describe("isTokenExpiring", () => {
|
||||||
|
it("剩余有效期超过30秒时应返回 false", () => {
|
||||||
|
const futureTime = new Date(Date.now() + 60_000).toISOString();
|
||||||
|
expect(isTokenExpiring(futureTime)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("剩余有效期不足30秒时应返回 true", () => {
|
||||||
|
const nearExpiry = new Date(Date.now() + 10_000).toISOString();
|
||||||
|
expect(isTokenExpiring(nearExpiry)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("已过期的 Token 应返回 true", () => {
|
||||||
|
const pastTime = new Date(Date.now() - 1000).toISOString();
|
||||||
|
expect(isTokenExpiring(pastTime)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("isTokenExpired", () => {
|
||||||
|
it("未过期的 Token 应返回 false", () => {
|
||||||
|
const futureTime = new Date(Date.now() + 60_000).toISOString();
|
||||||
|
expect(isTokenExpired(futureTime)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("已过期的 Token 应返回 true", () => {
|
||||||
|
const pastTime = new Date(Date.now() - 1000).toISOString();
|
||||||
|
expect(isTokenExpired(pastTime)).toBe(true);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("isAuthError", () => {
|
||||||
|
it("401 应为授权错误", () => {
|
||||||
|
expect(isAuthError(401)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("403 应为授权错误", () => {
|
||||||
|
expect(isAuthError(403)).toBe(true);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("200 不应为授权错误", () => {
|
||||||
|
expect(isAuthError(200)).toBe(false);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("500 不应为授权错误", () => {
|
||||||
|
expect(isAuthError(500)).toBe(false);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
// ===== TokenManager 测试 =====
|
||||||
|
|
||||||
|
describe("TokenManager", () => {
|
||||||
|
let manager: TokenManager;
|
||||||
|
|
||||||
|
beforeEach(() => {
|
||||||
|
manager = new TokenManager(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
manager.stopAutoRefresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("构造时应自动生成初始 Token", () => {
|
||||||
|
const token = manager.getToken();
|
||||||
|
expect(token).toMatch(
|
||||||
|
/^test-app-id\/[a-f0-9]+\/\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}\.\d{3}Z$/,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("getTokenInfo 应返回有效的 TokenInfo", () => {
|
||||||
|
const info = manager.getTokenInfo();
|
||||||
|
expect(info.token).toBeTruthy();
|
||||||
|
expect(info.expiresAt).toBeTruthy();
|
||||||
|
expect(new Date(info.expiresAt).getTime()).toBeGreaterThan(Date.now());
|
||||||
|
});
|
||||||
|
|
||||||
|
it("appId 为空时构造应抛出错误", () => {
|
||||||
|
expect(() => new TokenManager("", TEST_APP_KEY)).toThrow(
|
||||||
|
"appId 和 appKey 不能为空",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("appKey 为空时构造应抛出错误", () => {
|
||||||
|
expect(() => new TokenManager(TEST_APP_ID, "")).toThrow(
|
||||||
|
"appId 和 appKey 不能为空",
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Token 更新回调应被正确调用", () => {
|
||||||
|
const callback = vi.fn();
|
||||||
|
manager.onTokenRefreshed(callback);
|
||||||
|
|
||||||
|
// 手动触发刷新：通过模拟 Token 即将过期
|
||||||
|
// 直接调用内部方法不方便，我们通过重新构造来验证回调
|
||||||
|
const manager2 = new TokenManager(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
const callback2 = vi.fn();
|
||||||
|
manager2.onTokenRefreshed(callback2);
|
||||||
|
|
||||||
|
// 验证回调已注册
|
||||||
|
expect(callback2).not.toHaveBeenCalled();
|
||||||
|
|
||||||
|
manager2.stopAutoRefresh();
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("自动刷新", () => {
|
||||||
|
beforeEach(() => {
|
||||||
|
vi.useFakeTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
afterEach(() => {
|
||||||
|
vi.useRealTimers();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("启动自动刷新后应设置定时器", () => {
|
||||||
|
manager.startAutoRefresh();
|
||||||
|
// 定时器已启动，10秒后应检查一次
|
||||||
|
const initialToken = manager.getToken();
|
||||||
|
vi.advanceTimersByTime(10_000);
|
||||||
|
// Token 未过期，不应变化
|
||||||
|
expect(manager.getToken()).toBeTruthy();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("停止自动刷新后定时器应被清除", () => {
|
||||||
|
manager.startAutoRefresh();
|
||||||
|
manager.stopAutoRefresh();
|
||||||
|
// 不应抛出异常
|
||||||
|
vi.advanceTimersByTime(60_000);
|
||||||
|
});
|
||||||
|
|
||||||
|
it("Token 即将过期时应自动刷新", () => {
|
||||||
|
// 在 fake timers 环境下重新构造 manager，确保 token 过期时间与 fake 时钟对齐
|
||||||
|
const fakeManager = new TokenManager(TEST_APP_ID, TEST_APP_KEY);
|
||||||
|
const callback = vi.fn();
|
||||||
|
fakeManager.onTokenRefreshed(callback);
|
||||||
|
|
||||||
|
// 推进59分31秒，使剩余有效期不足30秒
|
||||||
|
vi.advanceTimersByTime(59 * 60 * 1000 + 31 * 1000);
|
||||||
|
|
||||||
|
// 启动自动刷新定时器
|
||||||
|
fakeManager.startAutoRefresh();
|
||||||
|
|
||||||
|
// 触发定时器检查（10秒间隔）
|
||||||
|
vi.advanceTimersByTime(10_000);
|
||||||
|
|
||||||
|
// Token 应已被刷新
|
||||||
|
expect(callback).toHaveBeenCalled();
|
||||||
|
|
||||||
|
fakeManager.stopAutoRefresh();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("授权错误触发刷新", () => {
|
||||||
|
it("401 错误应触发刷新", async () => {
|
||||||
|
const callback = vi.fn();
|
||||||
|
manager.onTokenRefreshed(callback);
|
||||||
|
|
||||||
|
await manager.refreshOnAuthError(401);
|
||||||
|
|
||||||
|
expect(callback).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("403 错误应触发刷新", async () => {
|
||||||
|
const callback = vi.fn();
|
||||||
|
manager.onTokenRefreshed(callback);
|
||||||
|
|
||||||
|
await manager.refreshOnAuthError(403);
|
||||||
|
|
||||||
|
expect(callback).toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
|
||||||
|
it("200 错误不应触发刷新", async () => {
|
||||||
|
const callback = vi.fn();
|
||||||
|
manager.onTokenRefreshed(callback);
|
||||||
|
|
||||||
|
await manager.refreshOnAuthError(200);
|
||||||
|
|
||||||
|
expect(callback).not.toHaveBeenCalled();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
describe("重试机制", () => {
|
||||||
|
it("并发刷新请求应被合并（原子性）", async () => {
|
||||||
|
// 同时触发多次刷新
|
||||||
|
const promises = [
|
||||||
|
manager.refreshOnAuthError(401),
|
||||||
|
manager.refreshOnAuthError(401),
|
||||||
|
manager.refreshOnAuthError(401),
|
||||||
|
];
|
||||||
|
|
||||||
|
await Promise.all(promises);
|
||||||
|
|
||||||
|
// 应只刷新一次，不会出错
|
||||||
|
const token = manager.getToken();
|
||||||
|
expect(token).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
||||||
|
});
|
||||||
15
src/types/index.ts
Normal file
15
src/types/index.ts
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export interface ChatMessage {
|
||||||
|
id: string;
|
||||||
|
role: 'user' | 'ai';
|
||||||
|
content: string;
|
||||||
|
timestamp: number;
|
||||||
|
completed: boolean;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type SubtitleMode = 'ai-only' | 'bubble' | 'merged';
|
||||||
|
|
||||||
|
export const SUBTITLE_MODE_LABELS: Record<SubtitleMode, string> = {
|
||||||
|
'ai-only': 'AI字幕',
|
||||||
|
'bubble': '对话气泡',
|
||||||
|
'merged': '合并气泡',
|
||||||
|
};
|
||||||
240
src/utils/SilenceDetector.ts
Normal file
240
src/utils/SilenceDetector.ts
Normal file
@ -0,0 +1,240 @@
|
|||||||
|
/**
|
||||||
|
* 静音检测器
|
||||||
|
* 使用 Web Audio API 的 AnalyserNode 监测麦克风输入音量
|
||||||
|
* 当连续指定时长无声音输入时触发回调
|
||||||
|
*/
|
||||||
|
export class SilenceDetector {
|
||||||
|
private audioContext: AudioContext | null = null;
|
||||||
|
private analyser: AnalyserNode | null = null;
|
||||||
|
private mediaStream: MediaStream | null = null;
|
||||||
|
private animationFrameId: number | null = null;
|
||||||
|
private silenceStart: number = 0;
|
||||||
|
private isSilent = false;
|
||||||
|
private running = false;
|
||||||
|
|
||||||
|
// 音量阈值（0-128），低于此值视为静音
|
||||||
|
private volumeThreshold: number;
|
||||||
|
// 连续静音时长阈值（毫秒）
|
||||||
|
private silenceDurationMs: number;
|
||||||
|
// 静音回调
|
||||||
|
private onSilenceCallback: (() => void) | null = null;
|
||||||
|
// 声音恢复回调
|
||||||
|
private onSoundResumedCallback: (() => void) | null = null;
|
||||||
|
|
||||||
|
constructor(
|
||||||
|
options: {
|
||||||
|
volumeThreshold?: number;
|
||||||
|
silenceDurationMs?: number;
|
||||||
|
} = {},
|
||||||
|
) {
|
||||||
|
this.volumeThreshold = options.volumeThreshold ?? 8;
|
||||||
|
this.silenceDurationMs = options.silenceDurationMs ?? 5000;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 首次启动监测（获取麦克风权限，创建 AudioContext）
|
||||||
|
*/
|
||||||
|
async start(
|
||||||
|
onSilence: () => void,
|
||||||
|
onSoundResumed?: () => void,
|
||||||
|
): Promise<boolean> {
|
||||||
|
// 如果已经在运行，先停止
|
||||||
|
if (this.running) {
|
||||||
|
this.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
this.onSilenceCallback = onSilence;
|
||||||
|
this.onSoundResumedCallback = onSoundResumed ?? null;
|
||||||
|
|
||||||
|
// 如果已有可用的音频资源，直接复用
|
||||||
|
if (this.audioContext && this.analyser && this.mediaStream) {
|
||||||
|
// 检查 AudioContext 是否已关闭
|
||||||
|
if (this.audioContext.state === "closed") {
|
||||||
|
this.audioContext = null;
|
||||||
|
this.analyser = null;
|
||||||
|
this.mediaStream = null;
|
||||||
|
} else {
|
||||||
|
// 复用已有资源，仅重启检测循环
|
||||||
|
this.resetState();
|
||||||
|
this.running = true;
|
||||||
|
this.detectLoop();
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 首次启动，获取麦克风权限并创建音频资源
|
||||||
|
try {
|
||||||
|
this.mediaStream = await navigator.mediaDevices.getUserMedia({
|
||||||
|
audio: true,
|
||||||
|
});
|
||||||
|
this.audioContext = new AudioContext();
|
||||||
|
const source = this.audioContext.createMediaStreamSource(
|
||||||
|
this.mediaStream,
|
||||||
|
);
|
||||||
|
|
||||||
|
this.analyser = this.audioContext.createAnalyser();
|
||||||
|
this.analyser.fftSize = 512;
|
||||||
|
this.analyser.minDecibels = -90;
|
||||||
|
this.analyser.maxDecibels = -10;
|
||||||
|
source.connect(this.analyser);
|
||||||
|
|
||||||
|
this.resetState();
|
||||||
|
this.running = true;
|
||||||
|
this.detectLoop();
|
||||||
|
|
||||||
|
return true;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[SilenceDetector] 启动失败:", error);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 恢复检测（复用已有的 AudioContext/Stream，仅重启检测循环）
|
||||||
|
* 用于静音触发后、AI回复完成时自动恢复场景
|
||||||
|
*/
|
||||||
|
resume(): boolean {
|
||||||
|
if (!this.audioContext || !this.analyser || !this.mediaStream) {
|
||||||
|
console.warn(
|
||||||
|
"[SilenceDetector] resume 失败：无可用音频资源，请先调用 start()",
|
||||||
|
);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查 AudioContext 状态
|
||||||
|
if (this.audioContext.state === "closed") {
|
||||||
|
console.warn("[SilenceDetector] resume 失败：AudioContext 已关闭");
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 如果已在运行，先暂停
|
||||||
|
if (this.running) {
|
||||||
|
this.pause();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 恢复可能被挂起的 AudioContext
|
||||||
|
if (this.audioContext.state === "suspended") {
|
||||||
|
this.audioContext.resume().catch(() => {});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.resetState();
|
||||||
|
this.running = true;
|
||||||
|
this.detectLoop();
|
||||||
|
|
||||||
|
console.info("[SilenceDetector] 检测已恢复");
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 暂停检测（保留音频资源，仅停止检测循环）
|
||||||
|
* 用于静音触发后暂时停止检测
|
||||||
|
*/
|
||||||
|
pause(): void {
|
||||||
|
this.running = false;
|
||||||
|
|
||||||
|
if (this.animationFrameId !== null) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId);
|
||||||
|
this.animationFrameId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isSilent = false;
|
||||||
|
this.silenceStart = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 完全停止监测（释放所有音频资源）
|
||||||
|
* 用于断开连接或组件卸载时
|
||||||
|
*/
|
||||||
|
stop(): void {
|
||||||
|
this.pause();
|
||||||
|
|
||||||
|
if (this.mediaStream) {
|
||||||
|
this.mediaStream.getTracks().forEach((track) => track.stop());
|
||||||
|
this.mediaStream = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.audioContext) {
|
||||||
|
this.audioContext.close().catch(() => {});
|
||||||
|
this.audioContext = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.analyser = null;
|
||||||
|
this.onSilenceCallback = null;
|
||||||
|
this.onSoundResumedCallback = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置静音计时（收到声音时调用）
|
||||||
|
*/
|
||||||
|
resetSilenceTimer(): void {
|
||||||
|
this.isSilent = false;
|
||||||
|
this.silenceStart = 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 重置内部状态（不释放资源）
|
||||||
|
*/
|
||||||
|
private resetState(): void {
|
||||||
|
this.isSilent = false;
|
||||||
|
this.silenceStart = 0;
|
||||||
|
|
||||||
|
if (this.animationFrameId !== null) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId);
|
||||||
|
this.animationFrameId = null;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检测循环
|
||||||
|
*/
|
||||||
|
private detectLoop = (): void => {
|
||||||
|
if (!this.running || !this.analyser) return;
|
||||||
|
|
||||||
|
const dataArray = new Uint8Array(this.analyser.frequencyBinCount);
|
||||||
|
this.analyser.getByteFrequencyData(dataArray);
|
||||||
|
|
||||||
|
// 计算平均音量
|
||||||
|
const average =
|
||||||
|
dataArray.reduce((sum, val) => sum + val, 0) / dataArray.length;
|
||||||
|
const now = Date.now();
|
||||||
|
|
||||||
|
if (average < this.volumeThreshold) {
|
||||||
|
// 静音状态
|
||||||
|
if (!this.isSilent) {
|
||||||
|
this.isSilent = true;
|
||||||
|
this.silenceStart = now;
|
||||||
|
}
|
||||||
|
|
||||||
|
const silenceElapsed = now - this.silenceStart;
|
||||||
|
if (silenceElapsed >= this.silenceDurationMs) {
|
||||||
|
console.info(
|
||||||
|
`[SilenceDetector] 连续${this.silenceDurationMs / 1000}秒无声音，触发静音回调`,
|
||||||
|
);
|
||||||
|
|
||||||
|
// 先取消待执行的动画帧，防止残留回调
|
||||||
|
if (this.animationFrameId !== null) {
|
||||||
|
cancelAnimationFrame(this.animationFrameId);
|
||||||
|
this.animationFrameId = null;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 暂停检测（设置 running=false），再触发回调
|
||||||
|
// 这样外部恢复时调用 resume() 才能正确重启检测循环
|
||||||
|
this.running = false;
|
||||||
|
this.isSilent = false;
|
||||||
|
this.silenceStart = 0;
|
||||||
|
|
||||||
|
this.onSilenceCallback?.();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 有声音
|
||||||
|
if (this.isSilent) {
|
||||||
|
this.isSilent = false;
|
||||||
|
this.silenceStart = 0;
|
||||||
|
this.onSoundResumedCallback?.();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.animationFrameId = requestAnimationFrame(this.detectLoop);
|
||||||
|
};
|
||||||
|
}
|
||||||
39
src/utils/audioUtils.ts
Normal file
39
src/utils/audioUtils.ts
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
export const checkPlayUnMute: () => Promise<boolean> = () => {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
const audioElem: HTMLAudioElement = document.createElement("audio");
|
||||||
|
audioElem.src =
|
||||||
|
"data:audio/wav;base64,UklGRp4AAABXQVZFZm10IBAAAAABAAEARKwAAIhYAQACABAATElTVBoAAABJTkZPSVNGVA0AAABMYXZmNjEuNy4xMDAAAGRhdGFYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA==";
|
||||||
|
audioElem.muted = false;
|
||||||
|
|
||||||
|
const playPromise: Promise<void> | undefined = audioElem.play();
|
||||||
|
|
||||||
|
if (playPromise !== undefined) {
|
||||||
|
playPromise
|
||||||
|
.then(() => resolve(true))
|
||||||
|
.catch((error: Error) => {
|
||||||
|
resolve(
|
||||||
|
error.name === "NotAllowedError" || error.name === "AbortError"
|
||||||
|
? false
|
||||||
|
: false,
|
||||||
|
);
|
||||||
|
});
|
||||||
|
setTimeout(() => {
|
||||||
|
audioElem.remove();
|
||||||
|
resolve(true);
|
||||||
|
}, 300);
|
||||||
|
} else {
|
||||||
|
audioElem.remove();
|
||||||
|
resolve(false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
export function arrayBufferToBase64(buffer: ArrayBuffer): string {
|
||||||
|
let binary = "";
|
||||||
|
const bytes = new Uint8Array(buffer);
|
||||||
|
const len = bytes.byteLength;
|
||||||
|
for (let i = 0; i < len; i++) {
|
||||||
|
binary += String.fromCharCode(bytes[i]);
|
||||||
|
}
|
||||||
|
return window.btoa(binary);
|
||||||
|
}
|
||||||
225
src/utils/tokenManager.ts
Normal file
225
src/utils/tokenManager.ts
Normal file
@ -0,0 +1,225 @@
|
|||||||
|
import CryptoJS from "crypto-js";
|
||||||
|
|
||||||
|
/** Token 有效期（毫秒）：60分钟 */
|
||||||
|
const TOKEN_TTL_MS = 60 * 60 * 1000;
|
||||||
|
/** Token 过期前提前刷新时间（毫秒）：30秒 */
|
||||||
|
const TOKEN_REFRESH_BEFORE_EXPIRY_MS = 30 * 1000;
|
||||||
|
/** Token 更新失败最大重试次数 */
|
||||||
|
const MAX_RETRY_COUNT = 3;
|
||||||
|
/** 重试间隔（毫秒） */
|
||||||
|
const RETRY_INTERVAL_MS = 1000;
|
||||||
|
|
||||||
|
/** Token 信息结构 */
|
||||||
|
export interface TokenInfo {
|
||||||
|
/** Authorization 请求头值，格式: appId/signature/time */
|
||||||
|
token: string;
|
||||||
|
/** Token 过期时间（ISO格式） */
|
||||||
|
expiresAt: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 生成 Token
|
||||||
|
* - 使用 HMAC-SHA256 算法，以 appKey 为密钥，对 appId + 时间戳 进行签名
|
||||||
|
* - 返回 TokenInfo 包含 token 字符串和过期时间
|
||||||
|
*/
|
||||||
|
export function generateToken(appId: string, appKey: string): TokenInfo {
|
||||||
|
if (!appId || !appKey) {
|
||||||
|
throw new Error("[Token] appId 和 appKey 不能为空");
|
||||||
|
}
|
||||||
|
|
||||||
|
const expiresAt = new Date(Date.now() + TOKEN_TTL_MS).toISOString();
|
||||||
|
const message = appId + expiresAt;
|
||||||
|
const signature = CryptoJS.HmacSHA256(message, appKey).toString(
|
||||||
|
CryptoJS.enc.Hex,
|
||||||
|
);
|
||||||
|
const token = `${appId}/${signature}/${expiresAt}`;
|
||||||
|
|
||||||
|
console.info(`[Token] 生成成功，过期时间: ${expiresAt}`);
|
||||||
|
return { token, expiresAt };
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查 Token 是否即将过期（剩余有效期不足30秒）
|
||||||
|
*/
|
||||||
|
export function isTokenExpiring(expiresAt: string): boolean {
|
||||||
|
const expiryTime = new Date(expiresAt).getTime();
|
||||||
|
const remaining = expiryTime - Date.now();
|
||||||
|
return remaining <= TOKEN_REFRESH_BEFORE_EXPIRY_MS;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查 Token 是否已过期
|
||||||
|
*/
|
||||||
|
export function isTokenExpired(expiresAt: string): boolean {
|
||||||
|
return new Date(expiresAt).getTime() <= Date.now();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 检查 HTTP 状态码是否为授权错误
|
||||||
|
*/
|
||||||
|
export function isAuthError(status: number): boolean {
|
||||||
|
return status === 401 || status === 403;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Token 管理器：封装 Token 生成、自动更新、重试机制
|
||||||
|
*
|
||||||
|
* 使用方式：
|
||||||
|
* const manager = new TokenManager(appId, appKey);
|
||||||
|
* const tokenInfo = manager.getTokenInfo(); // 获取当前 Token
|
||||||
|
* manager.startAutoRefresh(); // 启动自动刷新
|
||||||
|
* manager.stopAutoRefresh(); // 停止自动刷新
|
||||||
|
* manager.refreshOnAuthError(401); // 授权错误时触发刷新
|
||||||
|
*/
|
||||||
|
export class TokenManager {
|
||||||
|
private appId: string;
|
||||||
|
private appKey: string;
|
||||||
|
private tokenInfo: TokenInfo | null = null;
|
||||||
|
private refreshTimer: ReturnType<typeof setInterval> | null = null;
|
||||||
|
private isRefreshing = false; // 原子锁，防止并发刷新
|
||||||
|
private retryCount = 0;
|
||||||
|
|
||||||
|
/** Token 更新回调列表 */
|
||||||
|
private onTokenRefreshedCallbacks: Array<(tokenInfo: TokenInfo) => void> = [];
|
||||||
|
|
||||||
|
constructor(appId: string, appKey: string) {
|
||||||
|
if (!appId || !appKey) {
|
||||||
|
throw new Error("[TokenManager] appId 和 appKey 不能为空");
|
||||||
|
}
|
||||||
|
this.appId = appId;
|
||||||
|
this.appKey = appKey;
|
||||||
|
// 初始化时立即生成一个 Token
|
||||||
|
this.tokenInfo = generateToken(this.appId, this.appKey);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前 TokenInfo（如果即将过期则自动刷新）
|
||||||
|
*/
|
||||||
|
getTokenInfo(): TokenInfo {
|
||||||
|
if (this.tokenInfo && !isTokenExpiring(this.tokenInfo.expiresAt)) {
|
||||||
|
return this.tokenInfo;
|
||||||
|
}
|
||||||
|
// 即将过期或已过期，同步刷新
|
||||||
|
this.refreshSync();
|
||||||
|
return this.tokenInfo!;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取当前 token 字符串
|
||||||
|
*/
|
||||||
|
getToken(): string {
|
||||||
|
return this.getTokenInfo().token;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 注册 Token 更新回调
|
||||||
|
*/
|
||||||
|
onTokenRefreshed(callback: (tokenInfo: TokenInfo) => void): void {
|
||||||
|
this.onTokenRefreshedCallbacks.push(callback);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 启动自动刷新定时器
|
||||||
|
* - 每10秒检查一次 Token 是否即将过期
|
||||||
|
* - 过期前30秒自动触发刷新
|
||||||
|
*/
|
||||||
|
startAutoRefresh(): void {
|
||||||
|
this.stopAutoRefresh();
|
||||||
|
console.info("[TokenManager] 启动自动刷新定时器");
|
||||||
|
|
||||||
|
this.refreshTimer = setInterval(() => {
|
||||||
|
if (this.tokenInfo && isTokenExpiring(this.tokenInfo.expiresAt)) {
|
||||||
|
console.info("[TokenManager] Token 即将过期，触发自动刷新");
|
||||||
|
this.refreshWithRetry();
|
||||||
|
}
|
||||||
|
}, 10_000);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 停止自动刷新定时器
|
||||||
|
*/
|
||||||
|
stopAutoRefresh(): void {
|
||||||
|
if (this.refreshTimer) {
|
||||||
|
clearInterval(this.refreshTimer);
|
||||||
|
this.refreshTimer = null;
|
||||||
|
console.info("[TokenManager] 停止自动刷新定时器");
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 授权错误时触发 Token 刷新
|
||||||
|
* - 检测到 401/403 时调用此方法
|
||||||
|
*/
|
||||||
|
async refreshOnAuthError(status: number): Promise<void> {
|
||||||
|
if (!isAuthError(status)) return;
|
||||||
|
console.info(`[TokenManager] 检测到授权错误 ${status}，触发 Token 刷新`);
|
||||||
|
await this.refreshWithRetry();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 同步刷新 Token（内部使用，无重试）
|
||||||
|
*/
|
||||||
|
private refreshSync(): void {
|
||||||
|
try {
|
||||||
|
this.tokenInfo = generateToken(this.appId, this.appKey);
|
||||||
|
this.retryCount = 0;
|
||||||
|
} catch (error) {
|
||||||
|
console.error("[TokenManager] Token 生成失败:", error);
|
||||||
|
throw error;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 带重试的异步刷新
|
||||||
|
* - 最多重试 MAX_RETRY_COUNT 次，每次间隔 RETRY_INTERVAL_MS
|
||||||
|
* - 使用原子锁防止并发刷新
|
||||||
|
*/
|
||||||
|
private async refreshWithRetry(): Promise<void> {
|
||||||
|
// 原子锁：防止并发刷新
|
||||||
|
if (this.isRefreshing) {
|
||||||
|
console.info("[TokenManager] Token 刷新进行中，跳过本次请求");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.isRefreshing = true;
|
||||||
|
|
||||||
|
try {
|
||||||
|
while (this.retryCount < MAX_RETRY_COUNT) {
|
||||||
|
try {
|
||||||
|
this.tokenInfo = generateToken(this.appId, this.appKey);
|
||||||
|
this.retryCount = 0;
|
||||||
|
console.info("[TokenManager] Token 刷新成功");
|
||||||
|
|
||||||
|
// 通知所有回调
|
||||||
|
this.onTokenRefreshedCallbacks.forEach((cb) => {
|
||||||
|
try {
|
||||||
|
cb(this.tokenInfo!);
|
||||||
|
} catch (e) {
|
||||||
|
console.error("[TokenManager] Token 更新回调执行失败:", e);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return;
|
||||||
|
} catch (error) {
|
||||||
|
this.retryCount++;
|
||||||
|
console.warn(
|
||||||
|
`[TokenManager] Token 刷新失败（第 ${this.retryCount}/${MAX_RETRY_COUNT} 次）:`,
|
||||||
|
error,
|
||||||
|
);
|
||||||
|
|
||||||
|
if (this.retryCount < MAX_RETRY_COUNT) {
|
||||||
|
await new Promise((resolve) =>
|
||||||
|
setTimeout(resolve, RETRY_INTERVAL_MS),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
console.error(
|
||||||
|
`[TokenManager] Token 刷新失败，已达到最大重试次数 ${MAX_RETRY_COUNT}`,
|
||||||
|
);
|
||||||
|
} finally {
|
||||||
|
this.isRefreshing = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
src/vite-env.d.ts
vendored
Normal file
1
src/vite-env.d.ts
vendored
Normal file
@ -0,0 +1 @@
|
|||||||
|
/// <reference types="vite/client" />
|
||||||
20
tsconfig.json
Normal file
20
tsconfig.json
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
{
|
||||||
|
"compilerOptions": {
|
||||||
|
"target": "ES2020",
|
||||||
|
"useDefineForClassFields": true,
|
||||||
|
"module": "ESNext",
|
||||||
|
"moduleResolution": "Bundler",
|
||||||
|
"strict": true,
|
||||||
|
"jsx": "preserve",
|
||||||
|
"resolveJsonModule": true,
|
||||||
|
"isolatedModules": true,
|
||||||
|
"esModuleInterop": true,
|
||||||
|
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
||||||
|
"skipLibCheck": true,
|
||||||
|
"baseUrl": ".",
|
||||||
|
"paths": {
|
||||||
|
"@/*": ["src/*"]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.vue"]
|
||||||
|
}
|
||||||
31
vite.config.ts
Normal file
31
vite.config.ts
Normal file
@ -0,0 +1,31 @@
|
|||||||
|
import { defineConfig } from "vite";
|
||||||
|
import vue from "@vitejs/plugin-vue";
|
||||||
|
import legacy from "@vitejs/plugin-legacy";
|
||||||
|
import path from "path";
|
||||||
|
|
||||||
|
export default defineConfig({
|
||||||
|
base: "./",
|
||||||
|
plugins: [
|
||||||
|
vue(),
|
||||||
|
legacy({
|
||||||
|
targets: [
|
||||||
|
"> 0.5%",
|
||||||
|
"last 2 versions",
|
||||||
|
"Firefox ESR",
|
||||||
|
"not dead",
|
||||||
|
"iOS >= 12",
|
||||||
|
"Android >= 5",
|
||||||
|
],
|
||||||
|
additionalLegacyPolyfills: ["regenerator-runtime/runtime"],
|
||||||
|
modernPolyfills: true,
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
resolve: {
|
||||||
|
alias: {
|
||||||
|
"@": path.resolve(__dirname, "./src"),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
test: {
|
||||||
|
globals: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
Loading…
x
Reference in New Issue
Block a user