diff --git a/frontend/index.html b/frontend/index.html index 28ac07a..6db64c3 100644 --- a/frontend/index.html +++ b/frontend/index.html @@ -25,6 +25,9 @@ + @@ -272,6 +275,24 @@ + +
+
+

🌐 语言设置

+ +
+
+
+

当前语言

+
+ +
+
+
+
+
diff --git a/frontend/scripts/main.js b/frontend/scripts/main.js index 7de0ae3..a1c5e92 100644 --- a/frontend/scripts/main.js +++ b/frontend/scripts/main.js @@ -33,7 +33,8 @@ const ConfigKey = { ENABLE_DEVICE_SETTING: 'enableDeviceSetting', ENABLE_NETWORK_CHECK: 'enableNetworkCheck', AUTO_PLAY_REMOTE_VIDEO: 'autoPlayRemoteVideo', - DEFAULT_MUTE_REMOTE_AUDIO: 'defaultMuteRemoteAudio' + DEFAULT_MUTE_REMOTE_AUDIO: 'defaultMuteRemoteAudio', + ENABLE_LOCAL_WAKEUP: 'enableLocalWakeup' }; const state = { @@ -57,8 +58,10 @@ const elements = { fullscreenBtn: document.getElementById('fullscreenBtn'), toggleConfigBtn: document.getElementById('toggleConfigBtn'), toggleCaptionBtn: document.getElementById('toggleCaptionBtn'), + toggleLanguageBtn: document.getElementById('toggleLanguageBtn'), toggleLogBtn: document.getElementById('toggleLogBtn'), applyCaptionStyleBtn: document.getElementById('applyCaptionStyleBtn'), + languageSelect: document.getElementById('languageSelect'), containerBgColor: document.getElementById('containerBgColor'), containerBgOpacity: document.getElementById('containerBgOpacity'), @@ -189,6 +192,7 @@ const eventListeners = { [ICSEventKey.LANGUAGE_INFO_CHANGE]: (langInfo) => { logger.info('语言信息变更', langInfo); + updateLanguageSelect(langInfo); }, [ICSEventKey.JOB_END_MENTION]: (data) => { @@ -246,6 +250,7 @@ function togglePanel(panelId) { const btnMap = { configPanel: 'toggleConfigBtn', captionPanel: 'toggleCaptionBtn', + languagePanel: 'toggleLanguageBtn', logPanel: 'toggleLogBtn' }; @@ -256,6 +261,70 @@ function togglePanel(panelId) { } } +async function loadLanguageOptions() { + if (!state.isInitialized) { + elements.languageSelect.innerHTML = ''; + return; + } + + try { + const langInfo = await HwICSUiSdk.getLanguageInfo(); + logger.info('获取语言信息成功', langInfo); + + if (langInfo.languageList && langInfo.languageList.length > 0) { + elements.languageSelect.innerHTML = ''; + langInfo.languageList.forEach(item => { + const option = document.createElement('option'); + option.value = item.language; + option.textContent = item.language_desc; + elements.languageSelect.appendChild(option); + }); + + if (langInfo.currentLanguage) { + elements.languageSelect.value = langInfo.currentLanguage; + } + } else { + elements.languageSelect.innerHTML = ''; + } + } catch (error) { + logger.error('获取语言信息失败', error); + elements.languageSelect.innerHTML = ''; + } +} + +function updateLanguageSelect(langInfo) { + if (!langInfo) return; + + if (langInfo.languageList && langInfo.languageList.length > 0) { + elements.languageSelect.innerHTML = ''; + langInfo.languageList.forEach(item => { + const option = document.createElement('option'); + option.value = item.language; + option.textContent = item.language_desc; + elements.languageSelect.appendChild(option); + }); + } + + if (langInfo.currentLanguage) { + elements.languageSelect.value = langInfo.currentLanguage; + } +} + +async function changeLanguage(langCode) { + if (!state.isInitialized) { + logger.error('SDK 未初始化,无法切换语言'); + return; + } + + try { + logger.info('正在切换语言...', langCode); + await HwICSUiSdk.changeLanguage({ langCode }); + logger.info('语言切换成功', langCode); + } catch (error) { + logger.error('语言切换失败', error); + } +} + async function initializeSDK() { try { const serverAddress = elements.serverAddress.value.trim(); @@ -305,7 +374,8 @@ async function initializeSDK() { [ConfigKey.ENABLE_DEVICE_SETTING]: false, [ConfigKey.ENABLE_NETWORK_CHECK]: false, [ConfigKey.AUTO_PLAY_REMOTE_VIDEO]: true, - [ConfigKey.DEFAULT_MUTE_REMOTE_AUDIO]: false + [ConfigKey.DEFAULT_MUTE_REMOTE_AUDIO]: false, + [ConfigKey.ENABLE_LOCAL_WAKEUP]: true }, logLevel }; @@ -1140,6 +1210,13 @@ function bindEvents() { } }); elements.toggleLogBtn.addEventListener('click', () => togglePanel('logPanel')); + elements.toggleLanguageBtn.addEventListener('click', () => { + togglePanel('languagePanel'); + loadLanguageOptions(); + }); + elements.languageSelect.addEventListener('change', (e) => { + changeLanguage(e.target.value); + }); elements.fullscreenBtn.addEventListener('click', toggleFullscreen); document.querySelectorAll('.panel-close').forEach(btn => { diff --git a/frontend/styles/main.css b/frontend/styles/main.css index b942449..054411a 100644 --- a/frontend/styles/main.css +++ b/frontend/styles/main.css @@ -362,6 +362,13 @@ body { margin-bottom: var(--spacing-sm); } +/* ===== 语言切换面板 ===== */ +.language-panel { + bottom: calc(var(--spacing-xl) + 60px); + right: var(--spacing-xl); + width: 280px; +} + .caption-style-section .form-group label { font-size: 0.85rem; color: var(--text-muted);