text-classify-ui/static/js/language-switcher.js

// 语言切换功能
document.addEventListener('DOMContentLoaded', function() {
  const languageSwitcher = document.getElementById('language-switcher');

  // 中文词汇表
  const zhTranslations = {
    'Login': '登录',
    'Register': '注册',
    'Email': '邮箱',
    'Password': '密码',
    'Confirm Password': '确认密码',
    'Name': '姓名',
    'Gender': '性别',
    'Male': '男',
    'Female': '女',
    'Other': '其他',
    'Birth Date': '出生日期',
    'Verification Code': '验证码',
    'Don\'t have an account?': '还没有账号？',
    'Sign up now': '立即注册',
    'Already have an account?': '已有账号？',
    'Sign in now': '立即登录',
    'Text Classification System': '中文文本分类系统',
    'Password must be at least 8 characters long': '密码长度至少为8个字符',
    'Passwords do not match': '两次输入的密码不一致',
    'A verification code has been sent to your email. Please enter the 6-digit code below to complete registration.': '验证码已发送到您的邮箱，请在下方输入6位数验证码完成注册。',
    'Verify': '验证',
    'Logging in...': '登录中...',
    'Sending verification code...': '发送验证码...',
    'Verifying...': '验证中...',
    'Ziyao Text Classification System': '子尧中文文本分类系统'
  };

  // 英文词汇表
  const enTranslations = {
    '登录': 'Login',
    '注册': 'Register',
    '邮箱': 'Email',
    '邮箱（用作登录名）': 'Email (used as login name)',
    '密码': 'Password',
    '确认密码': 'Confirm Password',
    '姓名': 'Name',
    '性别': 'Gender',
    '男': 'Male',
    '女': 'Female',
    '其他': 'Other',
    '出生日期': 'Birth Date',
    '验证码': 'Verification Code',
    '还没有账号？': 'Don\'t have an account?',
    '立即注册': 'Sign up now',
    '已有账号？': 'Already have an account?',
    '立即登录': 'Sign in now',
    '中文文本分类系统': 'Chinese Text Classification System',
    '文本分类系统登录': 'Text Classification System - Login',
    '注册新账号': 'Register New Account',
    '密码长度至少为8个字符': 'Password must be at least 8 characters long',
    '两次输入的密码不一致': 'Passwords do not match',
    '验证码已发送到您的邮箱，请在下方输入6位数验证码完成注册。': 'A verification code has been sent to your email. Please enter the 6-digit code below to complete registration.',
    '验证': 'Verify',
    '登录中...': 'Logging in...',
    '发送验证码...': 'Sending verification code...',
    '验证中...': 'Verifying...',
    '子尧中文文本分类系统': 'Ziyao Text Classification System'
  };

  // 检查本地存储中的语言偏好
  let currentLang = localStorage.getItem('language') || 'zh';
  updateLanguageButton(currentLang);

  // 如果当前是英文，则翻译页面
  if (currentLang === 'en') {
    translatePage(true);
  }

  // 语言切换事件
  languageSwitcher.addEventListener('click', function() {
    currentLang = currentLang === 'zh' ? 'en' : 'zh';
    localStorage.setItem('language', currentLang);
    updateLanguageButton(currentLang);
    translatePage(currentLang === 'en');
  });

  function updateLanguageButton(lang) {
    languageSwitcher.textContent = lang === 'zh' ? 'EN' : 'CN';
  }

  function translatePage(toEnglish) {
    // 获取所有文本节点
    const translationMap = toEnglish ? zhTranslations : enTranslations;

    // 翻译标题
    document.title = translateText(document.title, translationMap);

    // 翻译所有文本内容
    translateNode(document.body, translationMap);

    // 翻译属性
    translateAttributes(translationMap);
  }

  function translateNode(node, translationMap) {
    if (node.nodeType === 3) { // 文本节点
      const text = node.nodeValue.trim();
      if (text && text.length > 0) {
        const translated = translateText(text, translationMap);
        if (translated !== text) {
          node.nodeValue = node.nodeValue.replace(text, translated);
        }
      }
    } else if (node.nodeType === 1) { // 元素节点
      if (!node.classList.contains('no-translate')) {
        // 遍历子节点
        for (let i = 0; i < node.childNodes.length; i++) {
          translateNode(node.childNodes[i], translationMap);
        }

        // 翻译 placeholder
        if (node.hasAttribute('placeholder')) {
          const placeholder = node.getAttribute('placeholder');
          const translatedPlaceholder = translateText(placeholder, translationMap);
          if (translatedPlaceholder !== placeholder) {
            node.setAttribute('placeholder', translatedPlaceholder);
          }
        }
      }
    }
  }

  function translateText(text, translationMap) {
    return translationMap[text] || text;
  }

  function translateAttributes(translationMap) {
    // 翻译按钮文本、标题等
    document.querySelectorAll('[data-translate]').forEach(el => {
      const key = el.getAttribute('data-translate');
      if (key && translationMap[key]) {
        el.textContent = translationMap[key];
      }
    });
  }
});