fix(i18n): correct language label glyphs

This commit is contained in:
zhayujie
2026-07-08 10:58:41 +08:00
parent 06f9492518
commit adaf9a7813
2 changed files with 64 additions and 20 deletions

View File

@@ -270,14 +270,29 @@
<div class="flex-1"></div> <div class="flex-1"></div>
<!-- Language Toggle --> <!-- Language Selector (dropdown) -->
<button id="lang-toggle" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium <div id="lang-selector" class="relative">
text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10 <button id="lang-toggle" class="flex items-center gap-1.5 px-3 py-1.5 rounded-lg text-sm font-medium
cursor-pointer transition-colors duration-150" text-slate-500 dark:text-slate-400 hover:bg-slate-100 dark:hover:bg-white/10
onclick="toggleLanguage()"> cursor-pointer transition-colors duration-150"
<i class="fas fa-globe text-xs"></i> onclick="toggleLangMenu(event)">
<span id="lang-label">EN</span> <i class="fas fa-globe text-xs"></i>
</button> <span id="lang-label">EN</span>
<i class="fas fa-chevron-down text-[10px] opacity-60"></i>
</button>
<div id="lang-menu" class="hidden absolute right-0 mt-1 min-w-[120px] py-1 rounded-lg z-50
bg-white dark:bg-slate-800 shadow-lg ring-1 ring-black/5 dark:ring-white/10">
<button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="zh"
onclick="selectLanguage('zh')">简体中文</button>
<button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="zh-Hant"
onclick="selectLanguage('zh-Hant')">繁體中文</button>
<button class="lang-menu-item w-full text-left px-3 py-1.5 text-sm text-slate-600 dark:text-slate-300
hover:bg-slate-100 dark:hover:bg-white/10 cursor-pointer" data-lang="en"
onclick="selectLanguage('en')">English</button>
</div>
</div>
<!-- Theme Toggle --> <!-- Theme Toggle -->
<button id="theme-toggle" class="p-2 rounded-lg text-slate-500 dark:text-slate-400 <button id="theme-toggle" class="p-2 rounded-lg text-slate-500 dark:text-slate-400

View File

@@ -813,10 +813,17 @@ function applyI18n() {
const langLabel = document.getElementById('lang-label'); const langLabel = document.getElementById('lang-label');
if (langLabel) { if (langLabel) {
if (currentLang === 'zh-Hant') langLabel.textContent = '繁'; if (currentLang === 'zh-Hant') langLabel.textContent = '繁';
else if (currentLang === 'zh') langLabel.textContent = '簡中'; else if (currentLang === 'zh') langLabel.textContent = '简体';
else langLabel.textContent = 'EN'; else langLabel.textContent = 'EN';
} }
// Highlight the active option in the header language dropdown menu.
document.querySelectorAll('#lang-menu .lang-menu-item').forEach(item => {
const active = item.dataset.lang === currentLang;
item.classList.toggle('text-blue-600', active);
item.classList.toggle('dark:text-blue-400', active);
item.classList.toggle('font-medium', active);
});
// Point the docs link to the locale-specific documentation site. // Point the docs link to the locale-specific documentation site.
const docsLink = document.getElementById('docs-link'); const docsLink = document.getElementById('docs-link');
if (docsLink) docsLink.href = currentLang === 'zh' ? 'https://docs.cowagent.ai/zh' : 'https://docs.cowagent.ai'; if (docsLink) docsLink.href = currentLang === 'zh' ? 'https://docs.cowagent.ai/zh' : 'https://docs.cowagent.ai';
@@ -867,10 +874,17 @@ function syncLanguageToBackend(lang, callback) {
function updateLangControls() { function updateLangControls() {
const langLabel = document.getElementById('lang-label'); const langLabel = document.getElementById('lang-label');
if (langLabel) { if (langLabel) {
if (currentLang === 'zh-Hant') langLabel.textContent = '繁'; if (currentLang === 'zh-Hant') langLabel.textContent = '繁';
else if (currentLang === 'zh') langLabel.textContent = '簡體'; else if (currentLang === 'zh') langLabel.textContent = '简体';
else langLabel.textContent = 'EN'; else langLabel.textContent = 'EN';
} }
// Highlight the active option in the header language dropdown menu.
document.querySelectorAll('#lang-menu .lang-menu-item').forEach(item => {
const active = item.dataset.lang === currentLang;
item.classList.toggle('text-blue-600', active);
item.classList.toggle('dark:text-blue-400', active);
item.classList.toggle('font-medium', active);
});
// The config language picker is the custom .cfg-dropdown component. Only // The config language picker is the custom .cfg-dropdown component. Only
// sync it once it has been initialized (i.e. the config panel was opened). // sync it once it has been initialized (i.e. the config panel was opened).
const sel = document.getElementById('cfg-lang-select'); const sel = document.getElementById('cfg-lang-select');
@@ -888,16 +902,31 @@ function updateLangControls() {
} }
} }
function toggleLanguage() { // Toggle the header language dropdown menu open/closed.
if (currentLang === 'zh') { function toggleLangMenu(event) {
setLanguage('zh-Hant'); if (event) event.stopPropagation();
} else if (currentLang === 'zh-Hant') { const menu = document.getElementById('lang-menu');
setLanguage('en'); if (menu) menu.classList.toggle('hidden');
} else {
setLanguage('zh');
}
} }
// Pick a language from the dropdown, then close the menu.
function selectLanguage(lang) {
const menu = document.getElementById('lang-menu');
if (menu) menu.classList.add('hidden');
setLanguage(lang);
}
window.toggleLangMenu = toggleLangMenu;
window.selectLanguage = selectLanguage;
// Close the language menu when clicking outside of it.
document.addEventListener('click', (e) => {
const selector = document.getElementById('lang-selector');
const menu = document.getElementById('lang-menu');
if (menu && !menu.classList.contains('hidden') && selector && !selector.contains(e.target)) {
menu.classList.add('hidden');
}
});
// Refresh JS-rendered views after a language switch. Each branch uses the // Refresh JS-rendered views after a language switch. Each branch uses the
// lightweight in-memory re-render path (no extra network round-trips). // lightweight in-memory re-render path (no extra network round-trips).
function rerenderDynamicViews() { function rerenderDynamicViews() {