refactor(frontend): 移除对话控制面板及相关功能代码

移除不再需要的对话控制面板HTML结构、CSS样式和JavaScript功能代码
This commit is contained in:
2026-04-30 10:11:40 +08:00
parent ad676cf0b8
commit bc46246333
3 changed files with 1 additions and 310 deletions

View File

@@ -22,9 +22,6 @@
<button id="toggleConfigBtn" class="toolbar-btn" title="连接配置"> <button id="toggleConfigBtn" class="toolbar-btn" title="连接配置">
⚙️ ⚙️
</button> </button>
<button id="toggleControlBtn" class="toolbar-btn" title="对话控制">
🎮
</button>
<button id="toggleLogBtn" class="toolbar-btn" title="事件日志"> <button id="toggleLogBtn" class="toolbar-btn" title="事件日志">
📜 📜
</button> </button>
@@ -71,61 +68,6 @@
</div> </div>
</div> </div>
<!-- 浮动面板:对话控制 -->
<div id="controlPanel" class="floating-panel control-panel">
<div class="panel-header">
<h2>🎮 对话控制</h2>
<button class="panel-close" data-panel="controlPanel">×</button>
</div>
<div class="panel-content">
<div class="control-group">
<h3>对话控制</h3>
<div class="button-row">
<button id="startChatBtn" class="btn btn-success" disabled>
<span class="icon">▶️</span> 开始对话
</button>
<button id="stopChatBtn" class="btn btn-warning" disabled>
<span class="icon">⏹️</span> 停止对话
</button>
</div>
</div>
<div class="control-group">
<h3>语音交互</h3>
<div class="button-row">
<button id="startSpeakBtn" class="btn btn-info" disabled>
<span class="icon">🎤</span> 开始说话
</button>
<button id="stopSpeakBtn" class="btn btn-secondary" disabled>
<span class="icon">🛑</span> 停止说话
</button>
</div>
</div>
<div class="control-group">
<h3>文本交互</h3>
<div class="text-input-row">
<input type="text" id="textInput" placeholder="输入文本消息..." disabled>
<button id="sendTextBtn" class="btn btn-primary" disabled>
<span class="icon">📤</span> 发送
</button>
</div>
</div>
<div class="control-group">
<h3>其他控制</h3>
<div class="button-row">
<button id="interruptBtn" class="btn btn-warning" disabled>
<span class="icon">⚡</span> 打断说话
</button>
<button id="toggleAudioBtn" class="btn btn-secondary" disabled>
<span class="icon">🔊</span> 静音
</button>
</div>
</div>
</div>
</div>
<!-- 浮动面板:事件日志 --> <!-- 浮动面板:事件日志 -->
<div id="logPanel" class="floating-panel log-panel"> <div id="logPanel" class="floating-panel log-panel">
<div class="panel-header"> <div class="panel-header">

View File

@@ -53,20 +53,11 @@ const elements = {
initBtn: document.getElementById('initBtn'), initBtn: document.getElementById('initBtn'),
destroyBtn: document.getElementById('destroyBtn'), destroyBtn: document.getElementById('destroyBtn'),
getOnceCodeBtn: document.getElementById('getOnceCodeBtn'), getOnceCodeBtn: document.getElementById('getOnceCodeBtn'),
startChatBtn: document.getElementById('startChatBtn'),
stopChatBtn: document.getElementById('stopChatBtn'),
startSpeakBtn: document.getElementById('startSpeakBtn'),
stopSpeakBtn: document.getElementById('stopSpeakBtn'),
sendTextBtn: document.getElementById('sendTextBtn'),
interruptBtn: document.getElementById('interruptBtn'),
toggleAudioBtn: document.getElementById('toggleAudioBtn'),
clearLogBtn: document.getElementById('clearLogBtn'), clearLogBtn: document.getElementById('clearLogBtn'),
fullscreenBtn: document.getElementById('fullscreenBtn'), fullscreenBtn: document.getElementById('fullscreenBtn'),
toggleConfigBtn: document.getElementById('toggleConfigBtn'), toggleConfigBtn: document.getElementById('toggleConfigBtn'),
toggleControlBtn: document.getElementById('toggleControlBtn'),
toggleLogBtn: document.getElementById('toggleLogBtn'), toggleLogBtn: document.getElementById('toggleLogBtn'),
textInput: document.getElementById('textInput'),
logLevel: document.getElementById('logLevel'), logLevel: document.getElementById('logLevel'),
digitalHumanBox: document.getElementById('digitalHumanBox'), digitalHumanBox: document.getElementById('digitalHumanBox'),
@@ -82,7 +73,6 @@ const fullscreenState = {
const panelState = { const panelState = {
configPanel: false, configPanel: false,
controlPanel: false,
logPanel: false logPanel: false
}; };
@@ -170,28 +160,10 @@ const eventListeners = {
}; };
function updateUIState() { function updateUIState() {
const { isInitialized, isChatting, isSpeaking } = state; const { isInitialized } = state;
elements.initBtn.disabled = isInitialized; elements.initBtn.disabled = isInitialized;
elements.destroyBtn.disabled = !isInitialized; elements.destroyBtn.disabled = !isInitialized;
elements.startChatBtn.disabled = !isInitialized || isChatting;
elements.stopChatBtn.disabled = !isInitialized || !isChatting;
elements.startSpeakBtn.disabled = !isInitialized || !isChatting || isSpeaking;
elements.stopSpeakBtn.disabled = !isInitialized || !isChatting || !isSpeaking;
elements.textInput.disabled = !isInitialized || !isChatting;
elements.sendTextBtn.disabled = !isInitialized || !isChatting;
elements.interruptBtn.disabled = !isInitialized || !isChatting;
elements.toggleAudioBtn.disabled = !isInitialized;
if (isChatting) {
elements.digitalHumanBox.classList.add('active');
} else {
elements.digitalHumanBox.classList.remove('active');
}
} }
function updateConnectionStatus(connected) { function updateConnectionStatus(connected) {
@@ -228,7 +200,6 @@ function togglePanel(panelId) {
const btnMap = { const btnMap = {
configPanel: 'toggleConfigBtn', configPanel: 'toggleConfigBtn',
controlPanel: 'toggleControlBtn',
logPanel: 'toggleLogBtn' logPanel: 'toggleLogBtn'
}; };
@@ -344,152 +315,6 @@ async function destroySDK() {
} }
} }
async function startChat() {
try {
logger.info('正在开始对话...');
const result = await HwICSUiSdk.startChat({
interactionMode: InteractionMode.AUDIO,
wakeupType: undefined,
preCheckPermissions: true
});
if (result.result) {
state.isChatting = true;
logger.info('对话已开始', { chatId: result.chatId, sessionId: result.sessionId });
updateUIState();
} else {
logger.error('开始对话失败', result);
}
} catch (error) {
logger.error('开始对话出错', error);
}
}
async function stopChat() {
try {
logger.info('正在停止对话...');
const result = await HwICSUiSdk.stopChat();
if (result.result) {
state.isChatting = false;
state.isSpeaking = false;
logger.info('对话已停止');
updateUIState();
} else {
logger.error('停止对话失败', result);
}
} catch (error) {
logger.error('停止对话出错', error);
}
}
async function startUserSpeak() {
try {
logger.info('开始语音识别...');
const result = await HwICSUiSdk.startUserSpeak({
preCheckPermissions: true
});
if (result.result) {
logger.info('语音识别已启动');
} else {
logger.error('启动语音识别失败', result);
}
} catch (error) {
logger.error('启动语音识别出错', error);
}
}
async function stopUserSpeak() {
try {
logger.info('停止语音识别...');
const result = await HwICSUiSdk.stopUserSpeak();
if (result.result) {
logger.info('语音识别已停止');
} else {
logger.error('停止语音识别失败', result);
}
} catch (error) {
logger.error('停止语音识别出错', error);
}
}
async function sendTextMessage() {
const text = elements.textInput.value.trim();
if (!text) {
logger.warn('请输入文本内容');
return;
}
try {
logger.info('发送文本消息...', { text });
const result = await HwICSUiSdk.sendTextQuestion({
text,
questionParam: undefined
});
if (result.result) {
logger.info('消息发送成功', { chatId: result.chatId });
elements.textInput.value = '';
} else {
logger.error('发送消息失败', result);
}
} catch (error) {
logger.error('发送消息出错', error);
}
}
async function interruptSpeaking() {
try {
logger.info('打断说话...');
const result = await HwICSUiSdk.interruptSpeaking();
if (result.result) {
logger.info('已打断说话');
} else {
logger.error('打断说话失败', result);
}
} catch (error) {
logger.error('打断说话出错', error);
}
}
async function toggleAudio() {
try {
if (state.isMuted) {
const result = await HwICSUiSdk.unmuteRemoteAudio();
if (result) {
state.isMuted = false;
elements.toggleAudioBtn.innerHTML = '<span class="icon">🔊</span> 静音';
logger.info('已取消静音');
}
} else {
const result = await HwICSUiSdk.muteRemoteAudio();
if (result) {
state.isMuted = true;
elements.toggleAudioBtn.innerHTML = '<span class="icon">🔇</span> 取消静音';
logger.info('已静音');
}
}
} catch (error) {
logger.error('切换音频状态出错', error);
}
}
async function handleGetOnceCode() { async function handleGetOnceCode() {
try { try {
elements.getOnceCodeBtn.disabled = true; elements.getOnceCodeBtn.disabled = true;
@@ -579,22 +404,6 @@ function bindEvents() {
elements.destroyBtn.addEventListener('click', destroySDK); elements.destroyBtn.addEventListener('click', destroySDK);
elements.getOnceCodeBtn.addEventListener('click', handleGetOnceCode); elements.getOnceCodeBtn.addEventListener('click', handleGetOnceCode);
elements.startChatBtn.addEventListener('click', startChat);
elements.stopChatBtn.addEventListener('click', stopChat);
elements.startSpeakBtn.addEventListener('click', startUserSpeak);
elements.stopSpeakBtn.addEventListener('click', stopUserSpeak);
elements.sendTextBtn.addEventListener('click', sendTextMessage);
elements.textInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendTextMessage();
}
});
elements.interruptBtn.addEventListener('click', interruptSpeaking);
elements.toggleAudioBtn.addEventListener('click', toggleAudio);
elements.clearLogBtn.addEventListener('click', clearLogs); elements.clearLogBtn.addEventListener('click', clearLogs);
elements.logLevel.addEventListener('change', () => { elements.logLevel.addEventListener('change', () => {
if (state.isInitialized) { if (state.isInitialized) {
@@ -604,7 +413,6 @@ function bindEvents() {
}); });
elements.toggleConfigBtn.addEventListener('click', () => togglePanel('configPanel')); elements.toggleConfigBtn.addEventListener('click', () => togglePanel('configPanel'));
elements.toggleControlBtn.addEventListener('click', () => togglePanel('controlPanel'));
elements.toggleLogBtn.addEventListener('click', () => togglePanel('logPanel')); elements.toggleLogBtn.addEventListener('click', () => togglePanel('logPanel'));
elements.fullscreenBtn.addEventListener('click', toggleFullscreen); elements.fullscreenBtn.addEventListener('click', toggleFullscreen);

View File

@@ -333,65 +333,6 @@ body {
} }
/* ===== 对话控制面板 ===== */ /* ===== 对话控制面板 ===== */
.control-panel {
bottom: calc(var(--spacing-xl) + 60px);
right: var(--spacing-xl);
width: 360px;
}
.control-group {
margin-bottom: var(--spacing-lg);
}
.control-group:last-child {
margin-bottom: 0;
}
.control-group h3 {
font-size: 0.875rem;
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--spacing-sm);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.button-row {
display: flex;
gap: var(--spacing-sm);
flex-wrap: wrap;
}
.button-row .btn {
flex: 1;
min-width: 100px;
}
.text-input-row {
display: flex;
gap: var(--spacing-sm);
}
.text-input-row input {
flex: 1;
padding: var(--spacing-sm) var(--spacing-md);
background: var(--bg-tertiary);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: var(--text-primary);
font-size: 0.875rem;
}
.text-input-row input:focus {
outline: none;
border-color: var(--primary-color);
}
.text-input-row input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ===== 日志面板 ===== */ /* ===== 日志面板 ===== */
.log-panel { .log-panel {
bottom: calc(var(--spacing-xl) + 60px); bottom: calc(var(--spacing-xl) + 60px);