mcp-probe-kit 3.0.3 → 3.0.6

package/docs/assets/js/i18n.js

@@ -0,0 +1,375 @@
+/**
+ * 客户端国际化系统
+ * 直接在浏览器中切换语言，无需生成多个文件
+ */
+
+// 支持的语言
+const LANGUAGES = {
+  'zh-CN': { name: '中文', flag: '🇨🇳' },
+  'en': { name: 'English', flag: '🇺🇸' },
+  'ja': { name: '日本語', flag: '🇯🇵' },
+  'ko': { name: '한국어', flag: '🇰🇷' },
+};
+
+// 当前语言
+let currentLang = localStorage.getItem('lang') || 'zh-CN';
+
+// 翻译数据缓存
+const translations = {};
+
+/**
+ * 加载翻译文件
+ */
+async function loadTranslations(lang) {
+  if (translations[lang]) {
+    return translations[lang];
+  }
+  
+  try {
+    // 根据当前页面路径确定翻译文件路径
+    const isInPages = window.location.pathname.includes('/pages/');
+    const isAllToolsPage = window.location.pathname.includes('all-tools.html');
+    
+    let basePath = isInPages ? '../i18n' : './i18n';
+    
+    // 如果是 all-tools 页面，需要加载两个翻译文件
+    if (isAllToolsPage) {
+      // 1. 先加载通用翻译（侧边栏等）
+      const commonPath = `${basePath}/${lang}.json`;
+      console.log(`[i18n] Loading common translation: ${lang}, path: ${commonPath}`);
+      
+      let commonTranslations = {};
+      try {
+        const commonResponse = await fetch(commonPath);
+        if (commonResponse.ok) {
+          commonTranslations = await commonResponse.json();
+          console.log(`[i18n] Common translation loaded successfully:`, lang);
+        }
+      } catch (error) {
+        console.warn(`通用翻译文件加载失败: ${commonPath}`, error);
+      }
+      
+      // 2. 再加载页面特定翻译（工具数据）
+      const toolsPath = `${basePath}/all-tools/${lang}.json`;
+      console.log(`[i18n] Loading all-tools translation: ${lang}, path: ${toolsPath}`);
+      
+      const toolsResponse = await fetch(toolsPath);
+      if (!toolsResponse.ok) {
+        console.warn(`工具翻译文件不存在: ${toolsPath}，回退到中文`);
+        // 回退到中文
+        if (lang !== 'zh-CN') {
+          const fallbackCommonPath = `${basePath}/zh-CN.json`;
+          const fallbackToolsPath = `${basePath}/all-tools/zh-CN.json`;
+          
+          const [fallbackCommonRes, fallbackToolsRes] = await Promise.all([
+            fetch(fallbackCommonPath),
+            fetch(fallbackToolsPath)
+          ]);
+          
+          if (fallbackCommonRes.ok && fallbackToolsRes.ok) {
+            const fallbackCommon = await fallbackCommonRes.json();
+            const fallbackTools = await fallbackToolsRes.json();
+            translations[lang] = { ...fallbackCommon, ...fallbackTools };
+            return translations[lang];
+          }
+        }
+        return null;
+      }
+      
+      const toolsTranslations = await toolsResponse.json();
+      
+      console.log(`[i18n] Tools translations loaded, checking toolShortDesc...`);
+      console.log(`[i18n] toolsTranslations keys:`, Object.keys(toolsTranslations));
+      console.log(`[i18n] toolsTranslations full content:`, JSON.stringify(toolsTranslations, null, 2).substring(0, 500));
+      console.log(`[i18n] toolsTranslations.toolShortDesc exists:`, !!toolsTranslations.toolShortDesc);
+      console.log(`[i18n] toolsTranslations.toolShortDesc content:`, toolsTranslations.toolShortDesc);
+      
+      // 3. 合并两个翻译对象
+      // 使用深度合并：commonTranslations 作为基础，toolsTranslations 覆盖同名键
+      // 但保留 toolsTranslations 中独有的键（如 toolShortDesc）
+      translations[lang] = {
+        ...commonTranslations,
+        ...toolsTranslations,
+        // 确保 toolShortDesc 不会被覆盖
+        toolShortDesc: toolsTranslations.toolShortDesc || {}
+      };
+      
+      console.log(`[i18n] All-tools translation loaded and merged successfully:`, lang);
+      console.log(`[i18n] Common translations keys:`, Object.keys(commonTranslations));
+      console.log(`[i18n] Tools translations keys:`, Object.keys(toolsTranslations));
+      console.log(`[i18n] Merged translations keys:`, Object.keys(translations[lang]));
+      console.log(`[i18n] toolShortDesc in tools:`, !!toolsTranslations.toolShortDesc);
+      console.log(`[i18n] toolShortDesc in merged:`, !!translations[lang].toolShortDesc);
+      if (translations[lang].toolShortDesc) {
+        console.log(`[i18n] toolShortDesc content:`, translations[lang].toolShortDesc);
+      }
+      return translations[lang];
+    } else {
+      // 其他页面使用通用翻译文件
+      const translationPath = `${basePath}/${lang}.json`;
+      console.log(`[i18n] Loading translation: ${lang}, path: ${translationPath}`);
+      
+      const response = await fetch(translationPath);
+      if (!response.ok) {
+        console.warn(`翻译文件不存在: ${translationPath}`);
+        return null;
+      }
+      translations[lang] = await response.json();
+      console.log(`[i18n] Translation loaded successfully:`, lang);
+      return translations[lang];
+    }
+  } catch (error) {
+    console.error(`加载翻译失败: ${lang}`, error);
+    return null;
+  }
+}
+
+/**
+ * 翻译文本
+ */
+function t(key, lang = currentLang) {
+  const trans = translations[lang];
+  if (!trans) return key;
+  
+  const keys = key.split('.');
+  let value = trans;
+  
+  for (const k of keys) {
+    if (value && typeof value === 'object' && k in value) {
+      value = value[k];
+    } else {
+      return key;
+    }
+  }
+  
+  return value;
+}
+
+/**
+ * 应用翻译到页面
+ */
+function applyTranslations() {
+  // 翻译所有带 data-i18n 属性的元素
+  document.querySelectorAll('[data-i18n]').forEach(el => {
+    const key = el.getAttribute('data-i18n');
+    const text = t(key);
+    if (text !== key) {
+      el.textContent = text;
+    }
+  });
+  
+  // 翻译所有带 data-i18n-placeholder 属性的元素
+  document.querySelectorAll('[data-i18n-placeholder]').forEach(el => {
+    const key = el.getAttribute('data-i18n-placeholder');
+    const text = t(key);
+    if (text !== key) {
+      el.placeholder = text;
+    }
+  });
+  
+  // 翻译所有带 data-i18n-title 属性的元素
+  document.querySelectorAll('[data-i18n-title]').forEach(el => {
+    const key = el.getAttribute('data-i18n-title');
+    const text = t(key);
+    if (text !== key) {
+      el.title = text;
+    }
+  });
+  
+  // 更新 HTML lang 属性
+  document.documentElement.lang = currentLang;
+  
+  // 更新页面标题
+  const titleKey = document.querySelector('meta[name="i18n-title"]')?.content;
+  if (titleKey) {
+    const title = t(titleKey);
+    if (title !== titleKey) {
+      document.title = title;
+    }
+  }
+  
+  // 标记 i18n 已准备好，显示页面内容
+  document.body.classList.add('i18n-ready');
+}
+
+/**
+ * 切换语言
+ */
+async function switchLanguage(lang) {
+  if (!LANGUAGES[lang]) {
+    console.error(`不支持的语言: ${lang}`);
+    return;
+  }
+  
+  currentLang = lang;
+  window.currentLang = lang; // 同步更新全局变量
+  localStorage.setItem('lang', lang);
+  
+  // 加载翻译
+  await loadTranslations(lang);
+  
+  // 应用翻译
+  applyTranslations();
+  
+  // 更新语言切换器
+  updateLanguageSwitcher();
+  
+  // 关闭菜单
+  const menu = document.getElementById('lang-menu');
+  const icon = document.getElementById('lang-icon');
+  if (menu && icon) {
+    menu.classList.add('hidden');
+    icon.style.transform = 'rotate(0deg)';
+  }
+  
+  // 触发自定义事件
+  window.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang } }));
+  document.dispatchEvent(new CustomEvent('languageChanged', { detail: { lang } }));
+}
+
+/**
+ * 创建语言切换器
+ */
+function createLanguageSwitcher() {
+  const container = document.getElementById('lang-switcher-container');
+  if (!container) {
+    console.warn('语言切换器容器不存在: #lang-switcher-container');
+    return;
+  }
+  
+  console.log('创建语言切换器...');
+  
+  const currentLangInfo = LANGUAGES[currentLang];
+  
+  const html = `
+    <div class="relative inline-block" id="lang-switcher">
+      <button onclick="toggleLangMenu()" class="flex items-center gap-1 px-3 py-2 text-sm text-text-secondary hover:text-primary transition-colors rounded-md hover:bg-bg-hover">
+        <span id="current-lang-display">${currentLangInfo.flag} ${currentLangInfo.name}</span>
+        <svg class="w-4 h-4 transition-transform" id="lang-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"/>
+        </svg>
+      </button>
+      <div id="lang-menu" class="hidden absolute right-0 mt-2 w-48 bg-white rounded-lg shadow-lg border border-border py-1 z-50">
+        ${Object.entries(LANGUAGES).map(([code, info]) => `
+          <a href="#" onclick="switchLanguage('${code}'); return false;" 
+             class="block px-4 py-2 text-sm hover:bg-bg-hover transition-colors ${code === currentLang ? 'bg-blue-50 text-primary font-medium' : ''}">
+            ${info.flag} ${info.name}
+          </a>
+        `).join('')}
+      </div>
+    </div>
+  `;
+  
+  container.innerHTML = html;
+  console.log('语言切换器创建完成');
+}
+
+/**
+ * 更新语言切换器显示
+ */
+function updateLanguageSwitcher() {
+  const display = document.getElementById('current-lang-display');
+  if (display) {
+    const info = LANGUAGES[currentLang];
+    display.textContent = `${info.flag} ${info.name}`;
+  }
+  
+  // 更新选中状态
+  document.querySelectorAll('#lang-menu a').forEach(link => {
+    const lang = link.getAttribute('onclick').match(/'([^']+)'/)[1];
+    if (lang === currentLang) {
+      link.classList.add('bg-blue-50', 'text-primary', 'font-medium');
+    } else {
+      link.classList.remove('bg-blue-50', 'text-primary', 'font-medium');
+    }
+  });
+}
+
+/**
+ * 切换语言菜单
+ */
+function toggleLangMenu() {
+  const menu = document.getElementById('lang-menu');
+  const icon = document.getElementById('lang-icon');
+  
+  if (menu.classList.contains('hidden')) {
+    menu.classList.remove('hidden');
+    icon.style.transform = 'rotate(180deg)';
+  } else {
+    menu.classList.add('hidden');
+    icon.style.transform = 'rotate(0deg)';
+  }
+}
+
+/**
+ * 点击外部关闭菜单
+ */
+document.addEventListener('click', (e) => {
+  const switcher = document.getElementById('lang-switcher');
+  if (switcher && !switcher.contains(e.target)) {
+    const menu = document.getElementById('lang-menu');
+    const icon = document.getElementById('lang-icon');
+    if (menu && !menu.classList.contains('hidden')) {
+      menu.classList.add('hidden');
+      icon.style.transform = 'rotate(0deg)';
+    }
+  }
+});
+
+/**
+ * 初始化
+ */
+async function initI18n() {
+  // 从 localStorage 读取保存的语言，如果没有则检测浏览器语言
+  const savedLang = localStorage.getItem('lang');
+  
+  if (savedLang && LANGUAGES[savedLang]) {
+    // 使用保存的语言
+    currentLang = savedLang;
+    console.log('[i18n] Using saved language:', currentLang);
+  } else {
+    // 检测浏览器语言（仅首次访问）
+    const browserLang = navigator.language.toLowerCase();
+    if (browserLang.startsWith('zh')) currentLang = 'zh-CN';
+    else if (browserLang.startsWith('ja')) currentLang = 'ja';
+    else if (browserLang.startsWith('ko')) currentLang = 'ko';
+    else currentLang = 'en'; // 默认英文
+    
+    localStorage.setItem('lang', currentLang);
+    console.log('[i18n] Detected browser language:', currentLang);
+  }
+  
+  // 同步到全局变量
+  window.currentLang = currentLang;
+  
+  // 加载当前语言的翻译
+  await loadTranslations(currentLang);
+  
+  // 创建语言切换器
+  createLanguageSwitcher();
+  
+  // 应用翻译
+  applyTranslations();
+  
+  // 触发 i18n 准备完成事件
+  console.log('[i18n] i18n initialization completed, dispatching i18nReady event');
+  window.dispatchEvent(new CustomEvent('i18nReady', { detail: { lang: currentLang } }));
+}
+
+  // 页面加载完成后初始化
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', initI18n);
+  } else {
+    initI18n();
+  }
+
+  // 导出到全局
+  window.switchLanguage = switchLanguage;
+  window.toggleLangMenu = toggleLangMenu;
+  window.t = t;
+  window.currentLang = currentLang;
+  window.translations = translations;
+  window.LANGUAGES = LANGUAGES;
+  window.applyTranslations = applyTranslations;
+
+