feat: add Windows real RTC voice device simulator
This commit is contained in:
Codex Local
+40
@@ -0,0 +1,40 @@
|
||||
type SimulatorConfiguration = {
|
||||
apiURL: string;
|
||||
deviceID: string;
|
||||
deviceSecret: string;
|
||||
};
|
||||
|
||||
type RTCGrant = {
|
||||
app_id: string;
|
||||
room_id: string;
|
||||
user_id: string;
|
||||
agent_user_id: string;
|
||||
token: string;
|
||||
expires_at: string;
|
||||
};
|
||||
|
||||
type CreatedConversation = {
|
||||
conversation_id: string;
|
||||
status: string;
|
||||
rtc: RTCGrant;
|
||||
session: {
|
||||
engine_mode: string;
|
||||
heartbeat_interval_sec: number;
|
||||
allocation_expires_at: string;
|
||||
};
|
||||
};
|
||||
|
||||
interface Window {
|
||||
deviceSimulator: {
|
||||
configure(input: SimulatorConfiguration): Promise<{ apiURL: string; deviceID: string }>;
|
||||
probe(): Promise<Record<string, unknown>>;
|
||||
createConversation(): Promise<CreatedConversation>;
|
||||
activateConversation(input: { conversationID: string; roomID: string; userID: string }): Promise<Record<string, unknown>>;
|
||||
getConversation(conversationID: string): Promise<{ status: string; action: string; failure_code?: string }>;
|
||||
heartbeat(input: { conversationID: string; sequenceNo: number; credentialExpiresAt: string }): Promise<{
|
||||
actions?: Array<{ type: string; rtc?: RTCGrant }>;
|
||||
desired_config_revision?: number;
|
||||
}>;
|
||||
stopConversation(input: { conversationID: string; reason: string; lastHeartbeatSequence: number }): Promise<Record<string, unknown>>;
|
||||
};
|
||||
}
|
||||
@@ -0,0 +1,413 @@
|
||||
import VERTC, {
|
||||
IRTCEngine,
|
||||
LocalAudioPropertiesInfo,
|
||||
MediaType,
|
||||
RemoteAudioPropertiesInfo,
|
||||
RoomProfileType,
|
||||
} from "@volcengine/rtc";
|
||||
import "./style.css";
|
||||
|
||||
const EngineEventsTypes = VERTC.events;
|
||||
|
||||
type Phase = "idle" | "checking" | "ready" | "joining" | "waiting" | "active" | "stopping" | "error";
|
||||
|
||||
const state: {
|
||||
phase: Phase;
|
||||
engine?: IRTCEngine;
|
||||
conversation?: CreatedConversation;
|
||||
credentialExpiresAt?: string;
|
||||
heartbeatSequence: number;
|
||||
heartbeatTimer?: number;
|
||||
statusTimer?: number;
|
||||
startedAt?: number;
|
||||
durationTimer?: number;
|
||||
agentJoined: boolean;
|
||||
agentSpeaking: boolean;
|
||||
microphoneVolume: number;
|
||||
agentVolume: number;
|
||||
} = {
|
||||
phase: "idle",
|
||||
heartbeatSequence: 0,
|
||||
agentJoined: false,
|
||||
agentSpeaking: false,
|
||||
microphoneVolume: 0,
|
||||
agentVolume: 0,
|
||||
};
|
||||
|
||||
const app = document.querySelector<HTMLElement>("#app")!;
|
||||
app.innerHTML = `
|
||||
<section class="shell">
|
||||
<header class="hero">
|
||||
<div>
|
||||
<p class="eyebrow">WINDOWS · REAL RTC DEVICE</p>
|
||||
<h1>语音终端模拟器</h1>
|
||||
<p class="subtitle">使用真实麦克风和扬声器，验证“终端入房—豆包进房—双向语音—打断—结束”的完整链路。</p>
|
||||
</div>
|
||||
<div class="overall" id="overallStatus"><span class="pulse"></span><strong>尚未连接</strong></div>
|
||||
</header>
|
||||
|
||||
<section class="status-grid" aria-label="链路状态">
|
||||
<article class="status-card"><span>本地平台</span><strong id="apiStatus">未检测</strong><small id="apiDetail">localhost</small></article>
|
||||
<article class="status-card"><span>RTC 房间</span><strong id="rtcStatus">未加入</strong><small id="rtcDetail">等待开始</small></article>
|
||||
<article class="status-card"><span>豆包智能体</span><strong id="agentStatus">未进房</strong><small id="agentDetail">等待 StartVoiceChat</small></article>
|
||||
<article class="status-card"><span>通话时长</span><strong id="duration">00:00</strong><small id="modeDetail">处理方式：—</small></article>
|
||||
</section>
|
||||
|
||||
<section class="content-grid">
|
||||
<article class="panel setup-panel">
|
||||
<div class="panel-heading"><div><p class="eyebrow">LOCAL SETUP</p><h2>本地设备配置</h2></div><span class="safe">密钥仅驻留内存</span></div>
|
||||
<label>本地平台地址<input id="apiURL" value="http://localhost:58080" autocomplete="off" /></label>
|
||||
<label>模拟设备 ID<input id="deviceID" value="10000000-0000-0000-0000-000000000511" autocomplete="off" /></label>
|
||||
<label>设备签名密钥<input id="deviceSecret" type="password" value="local-simulated-device-secret-32-bytes-minimum" autocomplete="off" /></label>
|
||||
<div class="row">
|
||||
<label>麦克风<select id="microphone"><option value="">默认麦克风</option></select></label>
|
||||
<label>扬声器<select id="speaker"><option value="">默认扬声器</option></select></label>
|
||||
</div>
|
||||
<button class="secondary" id="checkButton">检测平台和音频设备</button>
|
||||
<p class="hint">RTC AppKey、火山 AK/SK 和豆包 Token 应配置在本地后端，本软件不会读取或保存它们。</p>
|
||||
</article>
|
||||
|
||||
<article class="panel call-panel">
|
||||
<div class="panel-heading"><div><p class="eyebrow">LIVE CONVERSATION</p><h2>真实双向语音</h2></div><span class="phase-badge" id="phaseBadge">待机</span></div>
|
||||
<div class="conversation-orb" id="conversationOrb"><div class="orb-core"><span id="orbLabel">准备开始</span></div></div>
|
||||
<div class="meters">
|
||||
<div><div class="meter-label"><span>我的麦克风</span><strong id="micValue">0</strong></div><div class="meter"><i id="micMeter"></i></div></div>
|
||||
<div><div class="meter-label"><span>豆包语音</span><strong id="agentValue">0</strong></div><div class="meter agent"><i id="agentMeter"></i></div></div>
|
||||
</div>
|
||||
<div class="call-actions">
|
||||
<button class="primary" id="startButton" disabled>开始语音聊天</button>
|
||||
<button class="danger" id="stopButton" disabled>结束通话</button>
|
||||
</div>
|
||||
<dl class="session-info">
|
||||
<div><dt>通话编号</dt><dd id="conversationID">—</dd></div>
|
||||
<div><dt>RTC 房间</dt><dd id="roomID">—</dd></div>
|
||||
<div><dt>终端用户</dt><dd id="userID">—</dd></div>
|
||||
<div><dt>智能体用户</dt><dd id="agentUserID">—</dd></div>
|
||||
</dl>
|
||||
</article>
|
||||
</section>
|
||||
|
||||
<section class="panel log-panel">
|
||||
<div class="panel-heading"><div><p class="eyebrow">EVENT STREAM</p><h2>实时事件</h2></div><button class="text-button" id="clearLog">清空</button></div>
|
||||
<ol id="eventLog" aria-live="polite"><li><time>系统</time><span>模拟器已启动，等待检测本地环境。</span></li></ol>
|
||||
</section>
|
||||
</section>
|
||||
`;
|
||||
|
||||
const $ = <T extends HTMLElement>(id: string) => document.getElementById(id) as T;
|
||||
const controls = {
|
||||
apiURL: $<HTMLInputElement>("apiURL"),
|
||||
deviceID: $<HTMLInputElement>("deviceID"),
|
||||
deviceSecret: $<HTMLInputElement>("deviceSecret"),
|
||||
microphone: $<HTMLSelectElement>("microphone"),
|
||||
speaker: $<HTMLSelectElement>("speaker"),
|
||||
check: $<HTMLButtonElement>("checkButton"),
|
||||
start: $<HTMLButtonElement>("startButton"),
|
||||
stop: $<HTMLButtonElement>("stopButton"),
|
||||
};
|
||||
|
||||
function setText(id: string, value: string) {
|
||||
$(id).textContent = value;
|
||||
}
|
||||
|
||||
function log(message: string, level: "info" | "success" | "error" = "info") {
|
||||
const item = document.createElement("li");
|
||||
item.className = level;
|
||||
const time = document.createElement("time");
|
||||
time.textContent = new Date().toLocaleTimeString("zh-CN", { hour12: false });
|
||||
const content = document.createElement("span");
|
||||
content.textContent = message;
|
||||
item.append(time, content);
|
||||
$("eventLog").prepend(item);
|
||||
}
|
||||
|
||||
function errorMessage(error: unknown): string {
|
||||
return error instanceof Error ? error.message : String(error);
|
||||
}
|
||||
|
||||
function setPhase(phase: Phase, detail?: string) {
|
||||
state.phase = phase;
|
||||
const labels: Record<Phase, string> = {
|
||||
idle: "待机", checking: "检测中", ready: "已就绪", joining: "正在入房", waiting: "等待豆包", active: "通话中", stopping: "结束中", error: "异常",
|
||||
};
|
||||
setText("phaseBadge", labels[phase]);
|
||||
setText("overallStatus", detail || labels[phase]);
|
||||
$("overallStatus").className = `overall phase-${phase}`;
|
||||
$("conversationOrb").className = `conversation-orb phase-${phase}${state.agentSpeaking ? " speaking" : ""}`;
|
||||
setText("orbLabel", detail || labels[phase]);
|
||||
controls.start.disabled = phase !== "ready";
|
||||
controls.stop.disabled = !["joining", "waiting", "active", "error"].includes(phase) || !state.conversation;
|
||||
controls.check.disabled = ["joining", "waiting", "active", "stopping"].includes(phase);
|
||||
}
|
||||
|
||||
async function configureAndProbe() {
|
||||
setPhase("checking", "正在检测");
|
||||
try {
|
||||
await window.deviceSimulator.configure({
|
||||
apiURL: controls.apiURL.value,
|
||||
deviceID: controls.deviceID.value,
|
||||
deviceSecret: controls.deviceSecret.value,
|
||||
});
|
||||
const supported = await VERTC.isSupported();
|
||||
if (!supported) throw new Error("当前 Electron 环境不支持火山 Web RTC SDK");
|
||||
const permission = await VERTC.enableDevices({ audio: true, video: false });
|
||||
if (!permission.audio) throw permission.audioExceptionError || new Error("未获得麦克风权限");
|
||||
await refreshAudioDevices();
|
||||
await window.deviceSimulator.probe();
|
||||
setText("apiStatus", "连接正常");
|
||||
setText("apiDetail", controls.apiURL.value);
|
||||
setPhase("ready", "可以开始通话");
|
||||
log(`环境检测通过，RTC Web SDK ${VERTC.getSdkVersion()}。`, "success");
|
||||
} catch (error) {
|
||||
setText("apiStatus", "检测失败");
|
||||
setText("apiDetail", errorMessage(error));
|
||||
setPhase("error", "检测失败");
|
||||
controls.start.disabled = true;
|
||||
log(`环境检测失败：${errorMessage(error)}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function refreshAudioDevices() {
|
||||
const [microphones, speakers] = await Promise.all([
|
||||
VERTC.enumerateAudioCaptureDevices(),
|
||||
VERTC.enumerateAudioPlaybackDevices(),
|
||||
]);
|
||||
fillDeviceOptions(controls.microphone, microphones, "默认麦克风");
|
||||
fillDeviceOptions(controls.speaker, speakers, "默认扬声器");
|
||||
}
|
||||
|
||||
function fillDeviceOptions(select: HTMLSelectElement, devices: MediaDeviceInfo[], fallback: string) {
|
||||
const previous = select.value;
|
||||
select.replaceChildren(new Option(fallback, ""));
|
||||
devices.forEach((device, index) => select.add(new Option(device.label || `${fallback} ${index + 1}`, device.deviceId)));
|
||||
if ([...select.options].some((option) => option.value === previous)) select.value = previous;
|
||||
}
|
||||
|
||||
function registerRTCEvents(engine: IRTCEngine) {
|
||||
engine.on(EngineEventsTypes.onUserJoined, (event) => {
|
||||
const userID = event.userInfo.userId;
|
||||
log(`远端用户已进房：${userID}`, "success");
|
||||
if (userID === state.conversation?.rtc.agent_user_id) {
|
||||
state.agentJoined = true;
|
||||
setText("agentStatus", "已进房");
|
||||
setText("agentDetail", userID);
|
||||
}
|
||||
});
|
||||
engine.on(EngineEventsTypes.onUserLeave, (event) => {
|
||||
const userID = event.userInfo.userId;
|
||||
log(`远端用户已离房：${userID}`);
|
||||
if (userID === state.conversation?.rtc.agent_user_id) {
|
||||
state.agentJoined = false;
|
||||
setText("agentStatus", "已离房");
|
||||
}
|
||||
});
|
||||
engine.on(EngineEventsTypes.onUserPublishStream, async (event) => {
|
||||
if ((event.mediaType & MediaType.AUDIO) === 0) return;
|
||||
log(`检测到远端音频流：${event.userId}`, "success");
|
||||
try {
|
||||
await engine.subscribeStream(event.userId, MediaType.AUDIO);
|
||||
await engine.play(event.userId, MediaType.AUDIO);
|
||||
if (event.userId === state.conversation?.rtc.agent_user_id) {
|
||||
setText("agentStatus", "语音已连接");
|
||||
setText("agentDetail", "正在接收豆包音频");
|
||||
}
|
||||
} catch (error) {
|
||||
log(`播放远端音频失败：${errorMessage(error)}`, "error");
|
||||
}
|
||||
});
|
||||
engine.on(EngineEventsTypes.onLocalAudioPropertiesReport, (reports: LocalAudioPropertiesInfo[]) => {
|
||||
const volume = Math.max(0, ...reports.map((item) => item.audioPropertiesInfo.linearVolume || 0));
|
||||
updateVolume("mic", volume);
|
||||
});
|
||||
engine.on(EngineEventsTypes.onRemoteAudioPropertiesReport, (reports: RemoteAudioPropertiesInfo[]) => {
|
||||
const agentID = state.conversation?.rtc.agent_user_id;
|
||||
const volume = Math.max(0, ...reports.filter((item) => !agentID || item.streamKey.userId === agentID).map((item) => item.audioPropertiesInfo.linearVolume || 0));
|
||||
state.agentSpeaking = volume > 5;
|
||||
updateVolume("agent", volume);
|
||||
setPhase(state.phase, state.phase === "active" ? (state.agentSpeaking ? "豆包正在说话" : "请开始说话") : undefined);
|
||||
});
|
||||
engine.on(EngineEventsTypes.onConnectionStateChanged, (event) => {
|
||||
log(`RTC 连接状态：${String(event.state)}`);
|
||||
});
|
||||
engine.on(EngineEventsTypes.onError, (event) => {
|
||||
log(`RTC 错误：${event.errorCode}`, "error");
|
||||
});
|
||||
engine.on(EngineEventsTypes.onTokenWillExpire, () => {
|
||||
log("RTC Token 即将过期，等待心跳续签。", "info");
|
||||
});
|
||||
}
|
||||
|
||||
function updateVolume(kind: "mic" | "agent", raw: number) {
|
||||
const value = Math.max(0, Math.min(100, Math.round(raw)));
|
||||
if (kind === "mic") state.microphoneVolume = value;
|
||||
else state.agentVolume = value;
|
||||
$(`${kind}Meter`).style.width = `${value}%`;
|
||||
setText(`${kind}Value`, String(value));
|
||||
}
|
||||
|
||||
async function startConversation() {
|
||||
setPhase("joining", "正在申请房间");
|
||||
controls.start.disabled = true;
|
||||
try {
|
||||
const created = await window.deviceSimulator.createConversation();
|
||||
state.conversation = created;
|
||||
state.credentialExpiresAt = created.rtc.expires_at;
|
||||
state.heartbeatSequence = 0;
|
||||
state.agentJoined = false;
|
||||
renderSession(created);
|
||||
log(`平台已分配 RTC 房间 ${created.rtc.room_id}。`, "success");
|
||||
|
||||
const engine = VERTC.createEngine(created.rtc.app_id);
|
||||
state.engine = engine;
|
||||
registerRTCEvents(engine);
|
||||
engine.enableAudioPropertiesReport({ interval: 300 });
|
||||
await engine.startAudioCapture(controls.microphone.value || undefined);
|
||||
if (controls.speaker.value) await engine.setAudioPlaybackDevice(controls.speaker.value);
|
||||
await engine.joinRoom(created.rtc.token, created.rtc.room_id, { userId: created.rtc.user_id }, {
|
||||
isAutoPublish: true,
|
||||
isAutoSubscribeAudio: true,
|
||||
isAutoSubscribeVideo: false,
|
||||
roomProfileType: RoomProfileType.chat,
|
||||
});
|
||||
setText("rtcStatus", "已加入");
|
||||
setText("rtcDetail", created.rtc.room_id);
|
||||
log("终端已加入 RTC 房间并发布麦克风。", "success");
|
||||
|
||||
await window.deviceSimulator.activateConversation({
|
||||
conversationID: created.conversation_id,
|
||||
roomID: created.rtc.room_id,
|
||||
userID: created.rtc.user_id,
|
||||
});
|
||||
setPhase("waiting", "正在拉入豆包");
|
||||
log("平台已提交 StartVoiceChat，等待豆包智能体激活。", "success");
|
||||
await waitUntilActive(created.conversation_id);
|
||||
state.startedAt = Date.now();
|
||||
setPhase("active", "请开始说话");
|
||||
startTimers(created.session.heartbeat_interval_sec || 15);
|
||||
log("豆包语音任务已激活，可以开始双向聊天。", "success");
|
||||
} catch (error) {
|
||||
setPhase("error", "启动失败");
|
||||
log(`启动通话失败：${errorMessage(error)}`, "error");
|
||||
await releaseRTC();
|
||||
}
|
||||
}
|
||||
|
||||
function renderSession(created: CreatedConversation) {
|
||||
setText("conversationID", created.conversation_id);
|
||||
setText("roomID", created.rtc.room_id);
|
||||
setText("userID", created.rtc.user_id);
|
||||
setText("agentUserID", created.rtc.agent_user_id);
|
||||
setText("modeDetail", `处理方式：${created.session.engine_mode}`);
|
||||
setText("agentStatus", "等待进房");
|
||||
setText("agentDetail", created.rtc.agent_user_id);
|
||||
}
|
||||
|
||||
async function waitUntilActive(conversationID: string) {
|
||||
const deadline = Date.now() + 30_000;
|
||||
while (Date.now() < deadline) {
|
||||
const result = await window.deviceSimulator.getConversation(conversationID);
|
||||
if (result.action === "continue" && result.status === "ACTIVE") return;
|
||||
if (result.action === "leave_room") throw new Error(result.failure_code || `智能体启动失败：${result.status}`);
|
||||
await new Promise((resolve) => window.setTimeout(resolve, 600));
|
||||
}
|
||||
throw new Error("等待豆包进房超时（30秒）");
|
||||
}
|
||||
|
||||
function startTimers(intervalSeconds: number) {
|
||||
stopTimers();
|
||||
state.durationTimer = window.setInterval(() => {
|
||||
if (!state.startedAt) return;
|
||||
const seconds = Math.floor((Date.now() - state.startedAt) / 1000);
|
||||
setText("duration", `${String(Math.floor(seconds / 60)).padStart(2, "0")}:${String(seconds % 60).padStart(2, "0")}`);
|
||||
}, 1000);
|
||||
state.heartbeatTimer = window.setInterval(() => void sendHeartbeat(), Math.max(5, intervalSeconds) * 1000);
|
||||
void sendHeartbeat();
|
||||
}
|
||||
|
||||
async function sendHeartbeat() {
|
||||
if (!state.conversation || !state.credentialExpiresAt || state.phase !== "active") return;
|
||||
try {
|
||||
state.heartbeatSequence += 1;
|
||||
const result = await window.deviceSimulator.heartbeat({
|
||||
conversationID: state.conversation.conversation_id,
|
||||
sequenceNo: state.heartbeatSequence,
|
||||
credentialExpiresAt: state.credentialExpiresAt,
|
||||
});
|
||||
for (const action of result.actions || []) {
|
||||
if (action.type === "renew_rtc_credential" && action.rtc?.token) {
|
||||
await state.engine?.updateToken(action.rtc.token);
|
||||
state.credentialExpiresAt = action.rtc.expires_at;
|
||||
log("RTC Token 已通过设备心跳完成续签。", "success");
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
log(`设备心跳失败：${errorMessage(error)}`, "error");
|
||||
}
|
||||
}
|
||||
|
||||
async function stopConversation(reason = "windows_user_hangup") {
|
||||
if (!state.conversation) return;
|
||||
setPhase("stopping", "正在结束通话");
|
||||
stopTimers();
|
||||
const conversation = state.conversation;
|
||||
try {
|
||||
await releaseRTC();
|
||||
await window.deviceSimulator.stopConversation({
|
||||
conversationID: conversation.conversation_id,
|
||||
reason,
|
||||
lastHeartbeatSequence: state.heartbeatSequence,
|
||||
});
|
||||
log("RTC 已离房，平台已提交 StopVoiceChat。", "success");
|
||||
resetSession();
|
||||
setPhase("ready", "可以再次通话");
|
||||
} catch (error) {
|
||||
log(`结束通话失败：${errorMessage(error)}`, "error");
|
||||
resetSession();
|
||||
setPhase("ready", "已释放本地音频");
|
||||
}
|
||||
}
|
||||
|
||||
async function releaseRTC() {
|
||||
const engine = state.engine;
|
||||
state.engine = undefined;
|
||||
if (!engine) return;
|
||||
try { await engine.unpublishStream(MediaType.AUDIO); } catch { /* no-op */ }
|
||||
try { await engine.leaveRoom(); } catch { /* no-op */ }
|
||||
try { await engine.stopAudioCapture(); } catch { /* no-op */ }
|
||||
try { VERTC.destroyEngine(engine); } catch { /* no-op */ }
|
||||
}
|
||||
|
||||
function stopTimers() {
|
||||
if (state.heartbeatTimer) window.clearInterval(state.heartbeatTimer);
|
||||
if (state.statusTimer) window.clearInterval(state.statusTimer);
|
||||
if (state.durationTimer) window.clearInterval(state.durationTimer);
|
||||
state.heartbeatTimer = undefined;
|
||||
state.statusTimer = undefined;
|
||||
state.durationTimer = undefined;
|
||||
}
|
||||
|
||||
function resetSession() {
|
||||
state.conversation = undefined;
|
||||
state.credentialExpiresAt = undefined;
|
||||
state.startedAt = undefined;
|
||||
state.agentJoined = false;
|
||||
state.agentSpeaking = false;
|
||||
setText("rtcStatus", "未加入");
|
||||
setText("rtcDetail", "等待开始");
|
||||
setText("agentStatus", "未进房");
|
||||
setText("agentDetail", "等待 StartVoiceChat");
|
||||
setText("duration", "00:00");
|
||||
updateVolume("mic", 0);
|
||||
updateVolume("agent", 0);
|
||||
}
|
||||
|
||||
controls.check.addEventListener("click", () => void configureAndProbe());
|
||||
controls.start.addEventListener("click", () => void startConversation());
|
||||
controls.stop.addEventListener("click", () => void stopConversation());
|
||||
$("clearLog").addEventListener("click", () => $("eventLog").replaceChildren());
|
||||
window.addEventListener("beforeunload", () => {
|
||||
stopTimers();
|
||||
void releaseRTC();
|
||||
});
|
||||
|
||||
setPhase("idle", "尚未连接");
|
||||
@@ -0,0 +1,74 @@
|
||||
:root {
|
||||
font-family: "Microsoft YaHei UI", "Segoe UI", sans-serif;
|
||||
color: #112d3f;
|
||||
background: #eef3f0;
|
||||
font-synthesis: none;
|
||||
}
|
||||
|
||||
* { box-sizing: border-box; }
|
||||
body { margin: 0; min-width: 980px; min-height: 100vh; background: radial-gradient(circle at 88% 0%, #f5dfbd 0, transparent 30%), linear-gradient(145deg, #edf5f3 0%, #f7f4eb 100%); }
|
||||
button, input, select { font: inherit; }
|
||||
button { cursor: pointer; }
|
||||
button:disabled { cursor: not-allowed; opacity: .45; }
|
||||
|
||||
.shell { width: min(1160px, calc(100vw - 48px)); margin: 0 auto; padding: 36px 0 48px; }
|
||||
.hero { display: flex; align-items: flex-start; justify-content: space-between; gap: 32px; margin-bottom: 26px; }
|
||||
.eyebrow { color: #c8652a; font-size: 12px; font-weight: 800; letter-spacing: .16em; margin: 0 0 9px; }
|
||||
h1 { margin: 0; font-family: Georgia, "Microsoft YaHei UI", serif; font-size: 44px; letter-spacing: -.035em; }
|
||||
h2 { margin: 0; font-size: 23px; }
|
||||
.subtitle { max-width: 760px; color: #66808e; line-height: 1.8; margin: 12px 0 0; }
|
||||
.overall { display: flex; align-items: center; min-width: 150px; justify-content: center; padding: 13px 18px; border-radius: 999px; background: rgba(255,255,255,.82); box-shadow: 0 12px 30px rgba(36,64,69,.1); color: #647a82; }
|
||||
.overall.phase-ready, .overall.phase-active { color: #1a7d57; }
|
||||
.overall.phase-error { color: #b63d2e; }
|
||||
|
||||
.status-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 16px; }
|
||||
.status-card, .panel { background: rgba(255,255,255,.9); border: 1px solid rgba(23,61,69,.08); box-shadow: 0 14px 40px rgba(34,61,63,.08); }
|
||||
.status-card { min-height: 118px; padding: 22px; border-radius: 20px; }
|
||||
.status-card span { display: block; color: #778b93; font-size: 14px; }
|
||||
.status-card strong { display: block; margin: 14px 0 6px; font-size: 21px; }
|
||||
.status-card small { display: block; color: #8da0a6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.content-grid { display: grid; grid-template-columns: .95fr 1.35fr; gap: 16px; }
|
||||
.panel { border-radius: 24px; padding: 28px; }
|
||||
.panel-heading { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 24px; }
|
||||
.safe, .phase-badge { color: #287858; background: #e8f5ed; border-radius: 999px; padding: 8px 12px; font-size: 12px; font-weight: 700; }
|
||||
label { display: block; color: #617985; font-size: 13px; margin-bottom: 16px; }
|
||||
input, select { width: 100%; border: 1px solid #d7e2de; border-radius: 12px; padding: 12px 13px; margin-top: 7px; color: #153244; background: #f9fbfa; outline: none; }
|
||||
input:focus, select:focus { border-color: #d6783f; box-shadow: 0 0 0 3px rgba(214,120,63,.12); }
|
||||
.row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
|
||||
.secondary, .primary, .danger { border: 0; border-radius: 13px; padding: 13px 18px; font-weight: 800; }
|
||||
.secondary { width: 100%; color: #173b4d; background: #e9f0ee; }
|
||||
.primary { flex: 1; color: white; background: #d36f32; box-shadow: 0 10px 24px rgba(211,111,50,.22); }
|
||||
.danger { color: #9d382c; background: #f7e6e2; }
|
||||
.hint { margin: 14px 0 0; color: #8a9aa0; font-size: 12px; line-height: 1.65; }
|
||||
|
||||
.conversation-orb { width: 180px; height: 180px; margin: 6px auto 24px; border-radius: 50%; display: grid; place-items: center; background: radial-gradient(circle, rgba(216,117,56,.17) 0 34%, rgba(31,88,91,.08) 35% 54%, transparent 55%); transition: .3s ease; }
|
||||
.orb-core { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; text-align: center; padding: 12px; color: white; background: linear-gradient(145deg, #173b4d, #0d2536); box-shadow: 0 18px 34px rgba(14,43,57,.25); }
|
||||
.conversation-orb.phase-active { animation: breathe 2.8s ease-in-out infinite; }
|
||||
.conversation-orb.speaking { background: radial-gradient(circle, rgba(76,173,126,.25) 0 34%, rgba(31,116,91,.13) 35% 62%, transparent 63%); }
|
||||
@keyframes breathe { 50% { transform: scale(1.045); } }
|
||||
|
||||
.meters { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
|
||||
.meter-label { display: flex; justify-content: space-between; color: #6c828b; font-size: 12px; margin-bottom: 7px; }
|
||||
.meter { height: 8px; border-radius: 999px; background: #e4ebe8; overflow: hidden; }
|
||||
.meter i { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #d36f32, #f0ad58); transition: width .18s linear; }
|
||||
.meter.agent i { background: linear-gradient(90deg, #2f8d67, #6fc591); }
|
||||
.call-actions { display: flex; gap: 10px; margin: 24px 0; }
|
||||
.session-info { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; padding-top: 18px; border-top: 1px solid #edf1ef; }
|
||||
.session-info div { min-width: 0; }
|
||||
.session-info dt { color: #8b9ba1; font-size: 11px; }
|
||||
.session-info dd { margin: 4px 0 0; font-family: Consolas, monospace; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
||||
|
||||
.log-panel { margin-top: 16px; padding-bottom: 18px; }
|
||||
.log-panel .panel-heading { margin-bottom: 12px; }
|
||||
.text-button { border: 0; color: #748991; background: transparent; }
|
||||
#eventLog { list-style: none; margin: 0; padding: 0; max-height: 180px; overflow: auto; }
|
||||
#eventLog li { display: grid; grid-template-columns: 82px 1fr; gap: 12px; padding: 9px 4px; border-bottom: 1px solid #edf1ef; color: #526c78; font-size: 13px; }
|
||||
#eventLog time { color: #9aa8ad; font-family: Consolas, monospace; }
|
||||
#eventLog li.success span { color: #247252; }
|
||||
#eventLog li.error span { color: #ae3b2f; }
|
||||
|
||||
@media (max-width: 1050px) {
|
||||
.status-grid { grid-template-columns: repeat(2, 1fr); }
|
||||
.content-grid { grid-template-columns: 1fr; }
|
||||
}
|
||||
Reference in New Issue
Block a user