feat: 全站20个模板添加国际化(i18n)支持 - 简体中文/繁体中文/英文三语切换

- 所有18套前端模板 + 管理后台共20个HTML文件添加i18n引擎
- 前端JavaScript方案：I18N_LOCALES翻译字典 + data-i18n属性 + t()函数调用
- 语言切换器UI：下拉菜单选择，匹配各模板主题风格
- 语言持久化：localStorage存储 + URL参数覆盖 + 浏览器语言自动检测
- onLangChange回调：语言切换时动态重新渲染所有内容
- 支持语言：zh-CN(简体中文) / zh-TW(繁体中文) / en(English)

web/dist/app3/index.html

@@ -138,6 +138,34 @@ img { max-width: 100%; display: block; }
 .search-go:hover { transform: scale(1.08); box-shadow: 0 6px 16px rgba(78,205,196,0.4); }
 .search-go:active { transform: scale(0.95); }
 
+/* ==================== Language Switcher ==================== */
+.lang-switcher { position: relative; flex-shrink: 0; }
+.lang-btn {
+  display: flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 980px;
+  font-size: 13px; font-weight: 500; color: var(--text-mid);
+  border: 1px solid rgba(78,205,196,0.2); background: rgba(255,255,255,0.8);
+  transition: all .25s ease;
+}
+.lang-btn:hover { background: rgba(78,205,196,0.12); color: var(--mint); border-color: var(--mint); }
+.lang-btn svg { width: 16px; height: 16px; }
+.lang-btn .chevron { width: 12px; height: 12px; }
+.lang-dropdown {
+  position: absolute; top: calc(100% + 6px); right: 0; min-width: 150px;
+  background: #fff; border: 1px solid rgba(78,205,196,0.2); border-radius: var(--radius-md);
+  box-shadow: var(--shadow-hover); padding: 6px; z-index: 200;
+  opacity: 0; visibility: hidden; transform: translateY(-6px); transition: all .2s ease;
+}
+.lang-dropdown.open { opacity: 1; visibility: visible; transform: translateY(0); }
+.lang-option {
+  display: flex; align-items: center; gap: 8px; padding: 9px 12px;
+  border-radius: var(--radius-sm); font-size: 14px; color: var(--text-mid);
+  cursor: pointer; transition: all .15s;
+}
+.lang-option:hover { background: rgba(78,205,196,0.1); color: var(--text-dark); }
+.lang-option.active { color: var(--mint); font-weight: 600; }
+.lang-option .check { width: 16px; height: 16px; opacity: 0; transition: opacity .2s; }
+.lang-option.active .check { opacity: 1; }
+
 /* ==================== Hero ==================== */
 .hero {
   position: relative; max-width: 1400px; margin: 32px auto; padding: 0 24px; z-index: 1;
@@ -688,19 +716,40 @@ img { max-width: 100%; display: block; }
 <!-- ==================== Header ==================== -->
 <header class="header" id="header">
   <div class="header-inner">
-    <a href="#hero" class="logo">应用集市</a>
+    <a href="#hero" class="logo" data-i18n="logo_name">应用集市</a>
     <nav class="nav">
-      <a href="#hero" class="nav-link active" data-target="hero">首页</a>
-      <a href="#library" class="nav-link" data-target="library">发现</a>
-      <a href="#featured" class="nav-link" data-target="featured">精选</a>
-      <a href="#new" class="nav-link" data-target="new">最新</a>
+      <a href="#hero" class="nav-link active" data-target="hero" data-i18n="nav_home">首页</a>
+      <a href="#library" class="nav-link" data-target="library" data-i18n="nav_discover">发现</a>
+      <a href="#featured" class="nav-link" data-target="featured" data-i18n="nav_featured">精选</a>
+      <a href="#new" class="nav-link" data-target="new" data-i18n="nav_new">最新</a>
     </nav>
     <div class="header-search">
       <div class="search-pill-wrap">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-        <input type="text" id="header-search" class="search-pill" placeholder="搜索应用...">
+        <input type="text" id="header-search" class="search-pill" data-i18n-placeholder="search_placeholder" placeholder="搜索应用...">
+      </div>
+      <button class="search-go" id="header-search-btn" data-i18n="search_btn">搜索</button>
+    </div>
+    <div class="lang-switcher" id="langSwitcher">
+      <button class="lang-btn" id="langBtn" onclick="toggleLangDropdown()">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15 15 0 0 1 0 20 15 15 0 0 1 0-20z"/></svg>
+        <span id="langLabel">中文</span>
+        <svg class="chevron" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round"><path d="M6 9l6 6 6-6"/></svg>
+      </button>
+      <div class="lang-dropdown" id="langDropdown">
+        <div class="lang-option" data-lang="zh-CN" onclick="switchLang('zh-CN')">
+          <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <span>简体中文</span>
+        </div>
+        <div class="lang-option" data-lang="zh-TW" onclick="switchLang('zh-TW')">
+          <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <span>繁體中文</span>
+        </div>
+        <div class="lang-option" data-lang="en" onclick="switchLang('en')">
+          <svg class="check" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 17 4 12"/></svg>
+          <span>English</span>
+        </div>
       </div>
-      <button class="search-go" id="header-search-btn">搜索</button>
     </div>
   </div>
 </header>
@@ -714,25 +763,25 @@ img { max-width: 100%; display: block; }
     <div class="hero-shape hero-shape-2"></div>
     <div class="hero-shape hero-shape-3"></div>
     <div class="hero-content">
-      <span class="hero-badge">✨ 全新体验 · 海量应用</span>
-      <h1 class="hero-title">发现好应用，点亮新生活</h1>
-      <p class="hero-subtitle">精选优质应用，覆盖生活方方面面，让你的每一天都更加高效、有趣、美好</p>
+      <span class="hero-badge" data-i18n="hero_badge">✨ 全新体验 · 海量应用</span>
+      <h1 class="hero-title" data-i18n="hero_title">发现好应用，点亮新生活</h1>
+      <p class="hero-subtitle" data-i18n="hero_subtitle">精选优质应用，覆盖生活方方面面，让你的每一天都更加高效、有趣、美好</p>
       <button class="hero-btn" id="hero-explore-btn">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
-        开始探索
+        <span data-i18n="hero_explore">开始探索</span>
       </button>
       <div class="hero-stats">
         <div class="hero-stat">
           <div class="hero-stat-num" id="stat-apps">10万+</div>
-          <div class="hero-stat-label">优质应用</div>
+          <div class="hero-stat-label" data-i18n="stat_quality_apps">优质应用</div>
         </div>
         <div class="hero-stat">
           <div class="hero-stat-num" id="stat-downloads">5亿+</div>
-          <div class="hero-stat-label">累计下载</div>
+          <div class="hero-stat-label" data-i18n="stat_total_downloads">累计下载</div>
         </div>
         <div class="hero-stat">
           <div class="hero-stat-num" id="stat-users">800万+</div>
-          <div class="hero-stat-label">活跃用户</div>
+          <div class="hero-stat-label" data-i18n="stat_active_users">活跃用户</div>
         </div>
       </div>
     </div>
@@ -746,8 +795,8 @@ img { max-width: 100%; display: block; }
       <div class="section-title-wrap">
         <div class="section-icon" style="background:linear-gradient(135deg,var(--amber),var(--coral))">🏷</div>
         <div>
-          <h2 class="section-title">应用分类</h2>
-          <p class="section-subtitle">找到你感兴趣的领域</p>
+          <h2 class="section-title" data-i18n="section_categories">应用分类</h2>
+          <p class="section-subtitle" data-i18n="section_categories_sub">找到你感兴趣的领域</p>
         </div>
       </div>
     </div>
@@ -768,11 +817,11 @@ img { max-width: 100%; display: block; }
       <div class="section-title-wrap">
         <div class="section-icon" style="background:linear-gradient(135deg,var(--coral),var(--pink))">★</div>
         <div>
-          <h2 class="section-title">精选好应用</h2>
-          <p class="section-subtitle">编辑团队精心挑选</p>
+          <h2 class="section-title" data-i18n="section_featured">精选好应用</h2>
+          <p class="section-subtitle" data-i18n="section_featured_sub">编辑团队精心挑选</p>
         </div>
       </div>
-      <a href="#library" class="section-more" data-target="library">查看全部 →</a>
+      <a href="#library" class="section-more" data-target="library" data-i18n="see_all">查看全部 →</a>
     </div>
     <div class="featured-grid" id="featured-grid">
       <div class="skeleton-card"><div style="display:flex;gap:16px;margin-bottom:16px"><div class="skel-shimmer skel-icon" style="width:72px;height:72px;border-radius:20px"></div><div style="flex:1"><div class="skel-shimmer skel-line" style="width:60%;height:16px"></div><div class="skel-shimmer skel-line short" style="margin-top:8px"></div></div></div><div class="skel-shimmer skel-line mid"></div><div class="skel-shimmer skel-line mid"></div></div>
@@ -789,11 +838,11 @@ img { max-width: 100%; display: block; }
       <div class="section-title-wrap">
         <div class="section-icon" style="background:linear-gradient(135deg,var(--green),var(--mint))">✦</div>
         <div>
-          <h2 class="section-title">新鲜上架</h2>
-          <p class="section-subtitle">最新上架的优质应用</p>
+          <h2 class="section-title" data-i18n="section_new">新鲜上架</h2>
+          <p class="section-subtitle" data-i18n="section_new_sub">最新上架的优质应用</p>
         </div>
       </div>
-      <a href="#library" class="section-more" data-target="library">查看全部 →</a>
+      <a href="#library" class="section-more" data-target="library" data-i18n="see_all">查看全部 →</a>
     </div>
     <div class="new-scroll-wrap" id="new-scroll-wrap">
       <div class="skeleton-card" style="flex:0 0 280px"><div class="skel-shimmer skel-icon"></div><div class="skel-shimmer skel-line" style="width:60%;height:16px;margin-top:12px"></div><div class="skel-shimmer skel-line short" style="margin-top:8px"></div><div class="skel-shimmer skel-line mid" style="margin-top:12px"></div></div>
@@ -811,21 +860,21 @@ img { max-width: 100%; display: block; }
       <div class="section-title-wrap">
         <div class="section-icon" style="background:linear-gradient(135deg,var(--sky),var(--purple))">⊞</div>
         <div>
-          <h2 class="section-title">应用大全</h2>
-          <p class="section-subtitle">探索所有应用</p>
+          <h2 class="section-title" data-i18n="section_library">应用大全</h2>
+          <p class="section-subtitle" data-i18n="section_library_sub">探索所有应用</p>
         </div>
       </div>
     </div>
     <div class="library-toolbar">
       <div class="library-search">
         <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
-        <input type="text" id="library-search" placeholder="搜索应用名称...">
+        <input type="text" id="library-search" data-i18n-placeholder="search_lib" placeholder="搜索应用名称...">
       </div>
       <select class="sort-select" id="sort-select">
-        <option value="">默认排序</option>
-        <option value="rating">评分最高</option>
-        <option value="downloads">下载最多</option>
-        <option value="newest">最新上架</option>
+        <option value="" data-i18n="sort_default">默认排序</option>
+        <option value="rating" data-i18n="sort_rating">评分最高</option>
+        <option value="downloads" data-i18n="sort_downloads">下载最多</option>
+        <option value="newest" data-i18n="sort_newest">最新上架</option>
       </select>
       <div class="library-count" id="library-count">加载中...</div>
     </div>
@@ -843,7 +892,7 @@ img { max-width: 100%; display: block; }
 <!-- ==================== Modal ==================== -->
 <div class="modal-overlay" id="modal-overlay">
   <div class="modal" id="modal">
-    <div class="modal-loading" id="modal-loading">加载中...</div>
+    <div class="modal-loading" id="modal-loading" data-i18n="modal_loading">加载中...</div>
   </div>
 </div>
 
@@ -851,33 +900,33 @@ img { max-width: 100%; display: block; }
 <footer class="footer">
   <div class="footer-inner">
     <div class="footer-brand">
-      <div class="footer-logo">应用集市</div>
-      <p>发现好应用，点亮新生活。致力于为用户提供优质、安全、便捷的应用下载服务。</p>
+      <div class="footer-logo" data-i18n="footer_logo">应用集市</div>
+      <p data-i18n="footer_desc">发现好应用，点亮新生活。致力于为用户提供优质、安全、便捷的应用下载服务。</p>
     </div>
     <div class="footer-col">
-      <h4>关于我们</h4>
-      <a href="#">公司介绍</a>
-      <a href="#">加入我们</a>
-      <a href="#">联系方式</a>
-      <a href="#">隐私政策</a>
+      <h4 data-i18n="footer_about">关于我们</h4>
+      <a href="#" data-i18n="footer_about_intro">公司介绍</a>
+      <a href="#" data-i18n="footer_join_us">加入我们</a>
+      <a href="#" data-i18n="footer_contact">联系方式</a>
+      <a href="#" data-i18n="footer_privacy">隐私政策</a>
     </div>
     <div class="footer-col">
-      <h4>帮助中心</h4>
-      <a href="#">常见问题</a>
-      <a href="#">使用指南</a>
-      <a href="#">意见反馈</a>
-      <a href="#">投诉建议</a>
+      <h4 data-i18n="footer_help">帮助中心</h4>
+      <a href="#" data-i18n="footer_faq">常见问题</a>
+      <a href="#" data-i18n="footer_guide">使用指南</a>
+      <a href="#" data-i18n="footer_feedback">意见反馈</a>
+      <a href="#" data-i18n="footer_complaint">投诉建议</a>
     </div>
     <div class="footer-col">
-      <h4>合作伙伴</h4>
-      <a href="#">开发者入驻</a>
-      <a href="#">广告合作</a>
-      <a href="#">商务洽谈</a>
-      <a href="#">开放平台</a>
+      <h4 data-i18n="footer_partner">合作伙伴</h4>
+      <a href="#" data-i18n="footer_dev_join">开发者入驻</a>
+      <a href="#" data-i18n="footer_ad">广告合作</a>
+      <a href="#" data-i18n="footer_biz">商务洽谈</a>
+      <a href="#" data-i18n="footer_platform">开放平台</a>
     </div>
   </div>
   <div class="footer-bottom">
-    <p>© 2024 应用集市 · All rights reserved · 仅供学习交流使用</p>
+    <p data-i18n="footer_copyright">© 2024 应用集市 · All rights reserved · 仅供学习交流使用</p>
   </div>
 </footer>
 
@@ -891,6 +940,283 @@ img { max-width: 100%; display: block; }
 (function() {
   'use strict';
 
+  /* ==================== i18n ==================== */
+  var I18N_LOCALES = {
+    'zh-CN': {
+      logo_name: '应用集市',
+      nav_home: '首页',
+      nav_discover: '发现',
+      nav_featured: '精选',
+      nav_new: '最新',
+      search_placeholder: '搜索应用...',
+      search_btn: '搜索',
+      search_lib: '搜索应用名称...',
+      hero_badge: '✨ 全新体验 · 海量应用',
+      hero_title: '发现好应用，点亮新生活',
+      hero_subtitle: '精选优质应用，覆盖生活方方面面，让你的每一天都更加高效、有趣、美好',
+      hero_explore: '开始探索',
+      stat_quality_apps: '优质应用',
+      stat_total_downloads: '累计下载',
+      stat_active_users: '活跃用户',
+      section_categories: '应用分类',
+      section_categories_sub: '找到你感兴趣的领域',
+      section_featured: '精选好应用',
+      section_featured_sub: '编辑团队精心挑选',
+      section_new: '新鲜上架',
+      section_new_sub: '最新上架的优质应用',
+      section_library: '应用大全',
+      section_library_sub: '探索所有应用',
+      see_all: '查看全部 →',
+      cat_all: '全部',
+      sort_default: '默认排序',
+      sort_rating: '评分最高',
+      sort_downloads: '下载最多',
+      sort_newest: '最新上架',
+      empty_categories: '暂无分类数据',
+      empty_featured: '暂无精选应用',
+      empty_new: '暂无新上架应用',
+      empty_library: '没有找到相关应用，试试其他关键词吧',
+      loading: '加载中...',
+      modal_loading: '加载中...',
+      modal_desc: '📝 应用介绍',
+      modal_tags: '🏷 标签',
+      modal_features: '✨ 特色功能',
+      modal_screenshots: '🖼 应用截图',
+      modal_info: '📊 应用信息',
+      modal_downloads: '下载量',
+      modal_size: '大小',
+      modal_version: '版本',
+      modal_update: '更新日期',
+      modal_download: '立即下载',
+      modal_unknown_dev: '未知开发者',
+      modal_unknown_cat: '未分类',
+      modal_no_desc: '暂无描述',
+      modal_platform: '多平台',
+      modal_free: '免费',
+      modal_reviews: '评价',
+      download: '下载',
+      downloads_suffix: ' 下载',
+      footer_logo: '应用集市',
+      footer_desc: '发现好应用，点亮新生活。致力于为用户提供优质、安全、便捷的应用下载服务。',
+      footer_about: '关于我们',
+      footer_about_intro: '公司介绍',
+      footer_join_us: '加入我们',
+      footer_contact: '联系方式',
+      footer_privacy: '隐私政策',
+      footer_help: '帮助中心',
+      footer_faq: '常见问题',
+      footer_guide: '使用指南',
+      footer_feedback: '意见反馈',
+      footer_complaint: '投诉建议',
+      footer_partner: '合作伙伴',
+      footer_dev_join: '开发者入驻',
+      footer_ad: '广告合作',
+      footer_biz: '商务洽谈',
+      footer_platform: '开放平台',
+      footer_copyright: '\u00a9 2024 应用集市 \u00b7 All rights reserved \u00b7 仅供学习交流使用',
+      total_apps: '共 <strong>{n}</strong> 款应用'
+    },
+    'zh-TW': {
+      logo_name: '應用集市',
+      nav_home: '首頁',
+      nav_discover: '發現',
+      nav_featured: '精選',
+      nav_new: '最新',
+      search_placeholder: '搜尋應用...',
+      search_btn: '搜尋',
+      search_lib: '搜尋應用名稱...',
+      hero_badge: '✨ 全新體驗 · 海量應用',
+      hero_title: '發現好應用，點亮新生活',
+      hero_subtitle: '精選優質應用，覆蓋生活方方面面，讓你的每一天都更加高效、有趣、美好',
+      hero_explore: '開始探索',
+      stat_quality_apps: '優質應用',
+      stat_total_downloads: '累計下載',
+      stat_active_users: '活躍使用者',
+      section_categories: '應用分類',
+      section_categories_sub: '找到你感興趣的領域',
+      section_featured: '精選好應用',
+      section_featured_sub: '編輯團隊精心挑選',
+      section_new: '新鮮上架',
+      section_new_sub: '最新上架的優質應用',
+      section_library: '應用大全',
+      section_library_sub: '探索所有應用',
+      see_all: '查看全部 →',
+      cat_all: '全部',
+      sort_default: '預設排序',
+      sort_rating: '評分最高',
+      sort_downloads: '下載最多',
+      sort_newest: '最新上架',
+      empty_categories: '暫無分類資料',
+      empty_featured: '暫無精選應用',
+      empty_new: '暫無新上架應用',
+      empty_library: '沒有找到相關應用，試試其他關鍵詞吧',
+      loading: '載入中...',
+      modal_loading: '載入中...',
+      modal_desc: '📝 應用介紹',
+      modal_tags: '🏷 標籤',
+      modal_features: '✨ 特色功能',
+      modal_screenshots: '🖼 應用截圖',
+      modal_info: '📊 應用資訊',
+      modal_downloads: '下載量',
+      modal_size: '大小',
+      modal_version: '版本',
+      modal_update: '更新日期',
+      modal_download: '立即下載',
+      modal_unknown_dev: '未知開發者',
+      modal_unknown_cat: '未分類',
+      modal_no_desc: '暫無描述',
+      modal_platform: '多平台',
+      modal_free: '免費',
+      modal_reviews: '評價',
+      download: '下載',
+      downloads_suffix: ' 下載',
+      footer_logo: '應用集市',
+      footer_desc: '發現好應用，點亮新生活。致力於為使用者提供優質、安全、便捷的應用下載服務。',
+      footer_about: '關於我們',
+      footer_about_intro: '公司介紹',
+      footer_join_us: '加入我們',
+      footer_contact: '聯絡方式',
+      footer_privacy: '隱私政策',
+      footer_help: '幫助中心',
+      footer_faq: '常見問題',
+      footer_guide: '使用指南',
+      footer_feedback: '意見回饋',
+      footer_complaint: '投訴建議',
+      footer_partner: '合作夥伴',
+      footer_dev_join: '開發者入駐',
+      footer_ad: '廣告合作',
+      footer_biz: '商務洽談',
+      footer_platform: '開放平台',
+      footer_copyright: '\u00a9 2024 應用集市 \u00b7 All rights reserved \u00b7 僅供學習交流使用',
+      total_apps: '共 <strong>{n}</strong> 款應用'
+    },
+    'en': {
+      logo_name: 'App Bazaar',
+      nav_home: 'Home',
+      nav_discover: 'Discover',
+      nav_featured: 'Featured',
+      nav_new: 'New',
+      search_placeholder: 'Search apps...',
+      search_btn: 'Search',
+      search_lib: 'Search app name...',
+      hero_badge: '✨ All-New Experience · Tons of Apps',
+      hero_title: 'Discover Great Apps, Light Up Your Life',
+      hero_subtitle: 'Curated quality apps covering every aspect of life, making your days more efficient, fun, and beautiful',
+      hero_explore: 'Start Exploring',
+      stat_quality_apps: 'Quality Apps',
+      stat_total_downloads: 'Total Downloads',
+      stat_active_users: 'Active Users',
+      section_categories: 'Categories',
+      section_categories_sub: 'Find what interests you',
+      section_featured: 'Featured Apps',
+      section_featured_sub: 'Handpicked by our editorial team',
+      section_new: 'Fresh Picks',
+      section_new_sub: 'Latest quality apps just added',
+      section_library: 'All Apps',
+      section_library_sub: 'Explore all apps',
+      see_all: 'See All →',
+      cat_all: 'All',
+      sort_default: 'Default',
+      sort_rating: 'Top Rated',
+      sort_downloads: 'Most Downloaded',
+      sort_newest: 'Newest',
+      empty_categories: 'No categories available',
+      empty_featured: 'No featured apps',
+      empty_new: 'No new apps',
+      empty_library: 'No apps found, try different keywords',
+      loading: 'Loading...',
+      modal_loading: 'Loading...',
+      modal_desc: '📝 Description',
+      modal_tags: '🏷 Tags',
+      modal_features: '✨ Key Features',
+      modal_screenshots: '🖼 Screenshots',
+      modal_info: '📊 App Info',
+      modal_downloads: 'Downloads',
+      modal_size: 'Size',
+      modal_version: 'Version',
+      modal_update: 'Updated',
+      modal_download: 'Download Now',
+      modal_unknown_dev: 'Unknown Developer',
+      modal_unknown_cat: 'Uncategorized',
+      modal_no_desc: 'No description available',
+      modal_platform: 'Multi-platform',
+      modal_free: 'Free',
+      modal_reviews: 'Reviews',
+      download: 'Get',
+      downloads_suffix: ' downloads',
+      footer_logo: 'App Bazaar',
+      footer_desc: 'Discover great apps, light up your life. Dedicated to providing quality, safe, and convenient app download services.',
+      footer_about: 'About Us',
+      footer_about_intro: 'Company Intro',
+      footer_join_us: 'Join Us',
+      footer_contact: 'Contact',
+      footer_privacy: 'Privacy Policy',
+      footer_help: 'Help Center',
+      footer_faq: 'FAQ',
+      footer_guide: 'User Guide',
+      footer_feedback: 'Feedback',
+      footer_complaint: 'Complaints',
+      footer_partner: 'Partners',
+      footer_dev_join: 'Developer Program',
+      footer_ad: 'Advertise',
+      footer_biz: 'Business',
+      footer_platform: 'Open Platform',
+      footer_copyright: '\u00a9 2024 App Bazaar \u00b7 All rights reserved \u00b7 For demonstration purposes only',
+      total_apps: '<strong>{n}</strong> apps total'
+    }
+  };
+
+  var LANG_LABELS = {'zh-CN': '中文', 'zh-TW': '繁中', 'en': 'EN'};
+
+  var currentLang = (function(){
+    try {
+      var u = new URLSearchParams(location.search).get('lang');
+      if (u && I18N_LOCALES[u]) return u;
+    } catch(e) {}
+    try { var s = localStorage.getItem('appbazaar_lang'); if (s && I18N_LOCALES[s]) return s; } catch(e) {}
+    var b = navigator.language || navigator.userLanguage || '';
+    if (b.startsWith('zh-TW') || b.startsWith('zh-Hant')) return 'zh-TW';
+    if (b.startsWith('zh')) return 'zh-CN';
+    return 'en';
+  })();
+
+  function t(key) {
+    return (I18N_LOCALES[currentLang] && I18N_LOCALES[currentLang][key]) || (I18N_LOCALES['zh-CN'][key]) || key;
+  }
+
+  function applyI18n() {
+    document.querySelectorAll('[data-i18n]').forEach(function(el) {
+      var key = el.getAttribute('data-i18n');
+      el.textContent = t(key);
+    });
+    document.querySelectorAll('[data-i18n-placeholder]').forEach(function(el) {
+      var key = el.getAttribute('data-i18n-placeholder');
+      el.placeholder = t(key);
+    });
+    document.documentElement.lang = currentLang === 'zh-TW' ? 'zh-TW' : currentLang === 'zh-CN' ? 'zh-CN' : 'en';
+    document.getElementById('langLabel').textContent = LANG_LABELS[currentLang] || currentLang;
+    document.querySelectorAll('.lang-option').forEach(function(opt) {
+      opt.classList.toggle('active', opt.getAttribute('data-lang') === currentLang);
+    });
+  }
+
+  window.switchLang = function(lang) {
+    if (!I18N_LOCALES[lang]) return;
+    currentLang = lang;
+    try { localStorage.setItem('appbazaar_lang', lang); } catch(e) {}
+    applyI18n();
+    if (typeof window.onLangChange === 'function') window.onLangChange(lang);
+    document.getElementById('langDropdown').classList.remove('open');
+  };
+
+  window.toggleLangDropdown = function() {
+    document.getElementById('langDropdown').classList.toggle('open');
+  };
+  document.addEventListener('click', function(e) {
+    var sw = document.getElementById('langSwitcher');
+    if (sw && !sw.contains(e.target)) document.getElementById('langDropdown').classList.remove('open');
+  });
+
   // ==================== Config ====================
   var API_BASE = '';
 
@@ -936,8 +1262,14 @@ img { max-width: 100%; display: block; }
   function formatNumber(num) {
     if (num === undefined || num === null || isNaN(num)) return '0';
     num = Number(num);
-    if (num >= 100000000) return (num / 100000000).toFixed(1).replace(/\.0$/, '') + '亿';
-    if (num >= 10000) return (num / 10000).toFixed(1).replace(/\.0$/, '') + '万';
+    if (currentLang === 'en') {
+      if (num >= 1000000000) return (num / 1000000000).toFixed(1).replace(/\.0$/, '') + 'B';
+      if (num >= 1000000) return (num / 1000000).toFixed(1).replace(/\.0$/, '') + 'M';
+      if (num >= 1000) return (num / 1000).toFixed(1).replace(/\.0$/, '') + 'K';
+      return num.toString();
+    }
+    if (num >= 100000000) return (num / 100000000).toFixed(1).replace(/\.0$/, '') + '\u4ebf';
+    if (num >= 10000) return (num / 10000).toFixed(1).replace(/\.0$/, '') + '\u4e07';
     return num.toString();
   }
 
@@ -1063,7 +1395,7 @@ img { max-width: 100%; display: block; }
   function renderCategories() {
     var wrap = document.getElementById('categories-wrap');
     if (!state.categories.length) {
-      wrap.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">📭</div><div class="empty-state-text">暂无分类数据</div></div>';
+      wrap.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">📭</div><div class="empty-state-text">' + t('empty_categories') + '</div></div>';
       return;
     }
     var html = '';
@@ -1071,7 +1403,7 @@ img { max-width: 100%; display: block; }
     var allColor = state.library.categoryId === null
       ? 'background:linear-gradient(135deg,var(--coral),var(--pink));color:#fff'
       : '';
-    html += '<button class="cat-pill' + allActive + '" data-cat-id="" style="' + allColor + '"><span class="cat-emoji">🌟</span>全部</button>';
+    html += '<button class="cat-pill' + allActive + '" data-cat-id="" style="' + allColor + '"><span class="cat-emoji">🌟</span>' + escapeHtml(t('cat_all')) + '</button>';
     state.categories.forEach(function(cat, i) {
       var c = getCatColor(i);
       var isActive = state.library.categoryId == cat.id;
@@ -1100,7 +1432,7 @@ img { max-width: 100%; display: block; }
   function renderFeatured() {
     var grid = document.getElementById('featured-grid');
     if (!state.featuredApps.length) {
-      grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">✨</div><div class="empty-state-text">暂无精选应用</div></div>';
+      grid.innerHTML = '<div class="empty-state" style="grid-column:1/-1"><div class="empty-state-icon">✨</div><div class="empty-state-text">' + t('empty_featured') + '</div></div>';
       return;
     }
     var html = '';
@@ -1118,20 +1450,20 @@ img { max-width: 100%; display: block; }
             + renderAppIcon(app, 72)
             + '<div style="flex:1;min-width:0">'
               + '<div class="featured-card-name">' + escapeHtml(app.name) + '</div>'
-              + '<div class="featured-card-dev">' + escapeHtml(app.developer || '未知开发者') + '</div>'
+              + '<div class="featured-card-dev">' + escapeHtml(app.developer || t('modal_unknown_dev')) + '</div>'
             + '</div>'
           + '</div>'
         + '</div>'
         + '<div class="featured-card-body">'
-          + '<p class="featured-card-desc">' + escapeHtml(app.description || '暂无描述') + '</p>'
+          + '<p class="featured-card-desc">' + escapeHtml(app.description || t('modal_no_desc')) + '</p>'
           + '<div class="featured-card-tags">' + tagsHtml + '</div>'
         + '</div>'
         + '<div class="featured-card-footer">'
           + '<div class="featured-card-stats">'
-            + '<div class="featured-stat"><div class="featured-stat-val">' + (app.rating ? app.rating.toFixed(1) : '-') + '</div><div class="featured-stat-label">评分</div></div>'
-            + '<div class="featured-stat"><div class="featured-stat-val">' + formatNumber(app.downloads) + '</div><div class="featured-stat-label">下载</div></div>'
+            + '<div class="featured-stat"><div class="featured-stat-val">' + (app.rating ? app.rating.toFixed(1) : '-') + '</div><div class="featured-stat-label">' + t('sort_rating') + '</div></div>'
+            + '<div class="featured-stat"><div class="featured-stat-val">' + formatNumber(app.downloads) + '</div><div class="featured-stat-label">' + t('modal_downloads') + '</div></div>'
           + '</div>'
-          + '<button class="btn-download coral" data-download-id="' + app.id + '">获取</button>'
+          + '<button class="btn-download coral" data-download-id="' + app.id + '">' + t('download') + '</button>'
         + '</div>'
       + '</div>';
     });
@@ -1157,7 +1489,7 @@ img { max-width: 100%; display: block; }
   function renderNew() {
     var wrap = document.getElementById('new-scroll-wrap');
     if (!state.newApps.length) {
-      wrap.innerHTML = '<div class="empty-state" style="width:100%"><div class="empty-state-icon">🆕</div><div class="empty-state-text">暂无新上架应用</div></div>';
+      wrap.innerHTML = '<div class="empty-state" style="width:100%"><div class="empty-state-icon">🆕</div><div class="empty-state-text">' + t('empty_new') + '</div></div>';
       return;
     }
     var html = '';
@@ -1167,16 +1499,16 @@ img { max-width: 100%; display: block; }
         + '<div class="app-card-top">' + renderAppIcon(app, 56) + ''
           + '<div class="app-card-info">'
             + '<div class="app-card-name">' + escapeHtml(app.name) + '</div>'
-            + '<div class="app-card-dev">' + escapeHtml(app.developer || '未知') + '</div>'
+            + '<div class="app-card-dev">' + escapeHtml(app.developer || t('modal_unknown_dev')) + '</div>'
           + '</div>'
         + '</div>'
-        + '<p class="app-card-desc">' + escapeHtml(app.description || '暂无描述') + '</p>'
+        + '<p class="app-card-desc">' + escapeHtml(app.description || t('modal_no_desc')) + '</p>'
         + '<div class="app-card-bottom">'
           + '<div class="app-card-meta">'
             + '<div class="stars">' + renderStars(app.rating) + '</div>'
-            + '<div class="app-card-downloads">' + formatNumber(app.downloads) + ' 下载</div>'
+            + '<div class="app-card-downloads">' + formatNumber(app.downloads) + t('downloads_suffix') + '</div>'
           + '</div>'
-          + '<button class="btn-download" data-download-id="' + app.id + '">下载</button>'
+          + '<button class="btn-download" data-download-id="' + app.id + '">' + t('download') + '</button>'
         + '</div>'
       + '</div>';
     });
@@ -1202,7 +1534,7 @@ img { max-width: 100%; display: block; }
   function renderLibrary() {
     var grid = document.getElementById('app-grid');
     var count = document.getElementById('library-count');
-    count.innerHTML = '共 <strong>' + state.library.total + '</strong> 款应用';
+    count.innerHTML = t('total_apps').replace('{n}', state.library.total);
 
     if (state.library.loading) {
       var skelHtml = '';
@@ -1215,7 +1547,7 @@ img { max-width: 100%; display: block; }
     }
 
     if (!state.library.list.length) {
-      grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">没有找到相关应用，试试其他关键词吧</div></div>';
+      grid.innerHTML = '<div class="empty-state"><div class="empty-state-icon">🔍</div><div class="empty-state-text">' + t('empty_library') + '</div></div>';
       document.getElementById('pagination').innerHTML = '';
       return;
     }
@@ -1227,16 +1559,16 @@ img { max-width: 100%; display: block; }
         + '<div class="app-card-top">' + renderAppIcon(app, 56) + ''
           + '<div class="app-card-info">'
             + '<div class="app-card-name">' + escapeHtml(app.name) + '</div>'
-            + '<div class="app-card-dev">' + escapeHtml(app.developer || '未知') + '</div>'
+            + '<div class="app-card-dev">' + escapeHtml(app.developer || t('modal_unknown_dev')) + '</div>'
           + '</div>'
         + '</div>'
-        + '<p class="app-card-desc">' + escapeHtml(app.description || '暂无描述') + '</p>'
+        + '<p class="app-card-desc">' + escapeHtml(app.description || t('modal_no_desc')) + '</p>'
         + '<div class="app-card-bottom">'
           + '<div class="app-card-meta">'
             + '<div class="stars">' + renderStars(app.rating) + '</div>'
-            + '<div class="app-card-rating-text">' + (app.rating ? app.rating.toFixed(1) : '-') + ' · ' + formatNumber(app.downloads) + ' 下载</div>'
+            + '<div class="app-card-rating-text">' + (app.rating ? app.rating.toFixed(1) : '-') + ' \u00b7 ' + formatNumber(app.downloads) + t('downloads_suffix') + '</div>'
           + '</div>'
-          + '<button class="btn-download' + dlClass + '" data-download-id="' + app.id + '">下载</button>'
+          + '<button class="btn-download' + dlClass + '" data-download-id="' + app.id + '">' + t('download') + '</button>'
         + '</div>'
       + '</div>';
     });
@@ -1272,7 +1604,7 @@ img { max-width: 100%; display: block; }
 
     var html = '';
     if (page > 1) {
-      html += '<button class="page-btn" data-page="' + (page - 1) + '">‹ 上一页</button>';
+      html += '<button class="page-btn" data-page="' + (page - 1) + '">&#8249;</button>';
     }
 
     var start = Math.max(1, page - 2);
@@ -1290,7 +1622,7 @@ img { max-width: 100%; display: block; }
       html += '<button class="page-btn" data-page="' + totalPages + '">' + totalPages + '</button>';
     }
     if (page < totalPages) {
-      html += '<button class="page-btn" data-page="' + (page + 1) + '">下一页 ›</button>';
+      html += '<button class="page-btn" data-page="' + (page + 1) + '">&#8250;</button>';
     }
 
     wrap.innerHTML = html;
@@ -1325,15 +1657,15 @@ img { max-width: 100%; display: block; }
     var screenshotsHtml = '';
     screenshots.forEach(function(ss, i) {
       if (typeof ss === 'string' && ss.indexOf('http') === 0) {
-        screenshotsHtml += '<div class="screenshot-item"><img src="' + escapeHtml(ss) + '" alt="截图' + (i+1) + '" loading="lazy"></div>';
+        screenshotsHtml += '<div class="screenshot-item"><img src="' + escapeHtml(ss) + '" alt="Screenshot ' + (i+1) + '" loading="lazy"></div>';
       } else {
         var ssGrad = generateGradient(app.name + '_ss_' + i);
         screenshotsHtml += '<div class="screenshot-item"><div class="screenshot-placeholder" style="background:' + ssGrad + '">' + escapeHtml(app.name) + '</div></div>';
       }
     });
 
-    var platformText = app.platform || '多平台';
-    var priceText = app.price || '免费';
+    var platformText = app.platform || t('modal_platform');
+    var priceText = app.price || t('modal_free');
 
     return '<div class="modal-header" style="--modal-grad:' + grad + '">'
       + '<button class="modal-close" id="modal-close">✕</button>'
@@ -1341,39 +1673,39 @@ img { max-width: 100%; display: block; }
         + renderAppIcon(app, 88)
         + '<div style="flex:1;min-width:0">'
           + '<h3 class="modal-app-name">' + escapeHtml(app.name) + '</h3>'
-          + '<div class="modal-app-dev">' + escapeHtml(app.developer || '未知开发者') + '</div>'
+          + '<div class="modal-app-dev">' + escapeHtml(app.developer || t('modal_unknown_dev')) + '</div>'
           + '<div class="modal-rating-row">'
             + '<span class="stars" style="font-size:16px">' + renderStars(app.rating) + '</span>'
             + '<span class="modal-rating-num">' + (app.rating ? app.rating.toFixed(1) : '-') + '</span>'
-            + '<span class="modal-rating-text">' + formatNumber(app.reviews) + ' 评价</span>'
+            + '<span class="modal-rating-text">' + formatNumber(app.reviews) + ' ' + t('modal_reviews') + '</span>'
           + '</div>'
         + '</div>'
       + '</div>'
     + '</div>'
     + '<div class="modal-body">'
       + '<div class="modal-section">'
-        + '<div class="modal-section-title">📝 应用介绍</div>'
-        + '<p class="modal-desc">' + escapeHtml(app.description || '暂无描述') + '</p>'
+        + '<div class="modal-section-title">' + t('modal_desc') + '</div>'
+        + '<p class="modal-desc">' + escapeHtml(app.description || t('modal_no_desc')) + '</p>'
       + '</div>'
-      + (tags.length ? '<div class="modal-section"><div class="modal-section-title">🏷 标签</div><div class="modal-tags">' + tagsHtml + '</div></div>' : '')
-      + (features.length ? '<div class="modal-section"><div class="modal-section-title">✨ 特色功能</div><div class="modal-features">' + featuresHtml + '</div></div>' : '')
+      + (tags.length ? '<div class="modal-section"><div class="modal-section-title">' + t('modal_tags') + '</div><div class="modal-tags">' + tagsHtml + '</div></div>' : '')
+      + (features.length ? '<div class="modal-section"><div class="modal-section-title">' + t('modal_features') + '</div><div class="modal-features">' + featuresHtml + '</div></div>' : '')
       + '<div class="modal-section">'
-        + '<div class="modal-section-title">📊 应用信息</div>'
+        + '<div class="modal-section-title">' + t('modal_info') + '</div>'
         + '<div class="modal-stats-grid">'
-          + '<div class="modal-stat-item"><div class="modal-stat-val">' + formatNumber(app.downloads) + '</div><div class="modal-stat-label">下载量</div></div>'
-          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.size || '-') + '</div><div class="modal-stat-label">大小</div></div>'
-          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.version || '-') + '</div><div class="modal-stat-label">版本</div></div>'
-          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.update_date || '-') + '</div><div class="modal-stat-label">更新日期</div></div>'
+          + '<div class="modal-stat-item"><div class="modal-stat-val">' + formatNumber(app.downloads) + '</div><div class="modal-stat-label">' + t('modal_downloads') + '</div></div>'
+          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.size || '-') + '</div><div class="modal-stat-label">' + t('modal_size') + '</div></div>'
+          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.version || '-') + '</div><div class="modal-stat-label">' + t('modal_version') + '</div></div>'
+          + '<div class="modal-stat-item"><div class="modal-stat-val">' + escapeHtml(app.update_date || '-') + '</div><div class="modal-stat-label">' + t('modal_update') + '</div></div>'
         + '</div>'
       + '</div>'
-      + (screenshots.length ? '<div class="modal-section"><div class="modal-section-title">🖼 应用截图</div><div class="modal-screenshots">' + screenshotsHtml + '</div></div>' : '')
+      + (screenshots.length ? '<div class="modal-section"><div class="modal-section-title">' + t('modal_screenshots') + '</div><div class="modal-screenshots">' + screenshotsHtml + '</div></div>' : '')
       + '<div style="display:flex;gap:12px;margin-top:8px">'
         + '<button class="modal-download-btn" id="modal-download-btn">'
           + '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>'
-          + '立即下载'
+          + t('modal_download')
         + '</button>'
       + '</div>'
-      + '<div style="text-align:center;margin-top:12px;font-size:13px;color:var(--text-light)">' + escapeHtml(platformText) + ' · ' + escapeHtml(priceText) + '</div>'
+      + '<div style="text-align:center;margin-top:12px;font-size:13px;color:var(--text-light)">' + escapeHtml(platformText) + ' \u00b7 ' + escapeHtml(priceText) + '</div>'
     + '</div>';
   }
 
@@ -1395,7 +1727,6 @@ img { max-width: 100%; display: block; }
         if (data.featured) state.featuredApps = data.featured;
         if (data.new) state.newApps = data.new;
       } else {
-        // Fallback: fetch individually
         return Promise.all([
           fetchData('/api/v1/app/categories'),
           fetchData('/api/v1/app/featured?limit=8'),
@@ -1453,7 +1784,7 @@ img { max-width: 100%; display: block; }
         var dlBtn = document.getElementById('modal-download-btn');
         if (dlBtn) dlBtn.addEventListener('click', function() { handleDownload(app); });
       } else {
-        modal.innerHTML = '<div class="modal-error"><div style="font-size:48px;margin-bottom:16px">😵</div>加载失败，请稍后重试<br><button class="btn-download" style="margin-top:20px" onclick="closeAppDetail()">关闭</button></div>';
+        modal.innerHTML = '<div class="modal-error"><div style="font-size:48px;margin-bottom:16px">😵</div>' + t('empty_library') + '<br><button class="btn-download" style="margin-top:20px" onclick="closeAppDetail()">' + t('modal_close') + '</button></div>';
       }
     });
   }
@@ -1465,7 +1796,7 @@ img { max-width: 100%; display: block; }
   }
 
   function handleDownload(app) {
-    showToast('开始下载 ' + (app.name || '应用') + '...', 'success');
+    showToast(t('download') + ' ' + (app.name || '') + '...', 'success');
   }
 
   function handleCategoryClick(catId) {
@@ -1523,7 +1854,6 @@ img { max-width: 100%; display: block; }
 
   // ==================== Event Listeners ====================
   function setupEventListeners() {
-    // Header search
     var headerSearch = document.getElementById('header-search');
     var headerSearchBtn = document.getElementById('header-search-btn');
 
@@ -1549,7 +1879,6 @@ img { max-width: 100%; display: block; }
       scrollToSection('library');
     });
 
-    // Library search
     var librarySearch = document.getElementById('library-search');
     var debouncedLibrarySearch = debounce(function(val) {
       handleSearch(val);
@@ -1558,12 +1887,10 @@ img { max-width: 100%; display: block; }
       debouncedLibrarySearch(this.value);
     });
 
-    // Sort select
     document.getElementById('sort-select').addEventListener('change', function() {
       handleSortChange(this.value);
     });
 
-    // Nav links
     document.querySelectorAll('.nav-link').forEach(function(link) {
       link.addEventListener('click', function(e) {
         e.preventDefault();
@@ -1576,7 +1903,6 @@ img { max-width: 100%; display: block; }
       });
     });
 
-    // Section more links
     document.querySelectorAll('.section-more').forEach(function(link) {
       link.addEventListener('click', function(e) {
         e.preventDefault();
@@ -1585,22 +1911,18 @@ img { max-width: 100%; display: block; }
       });
     });
 
-    // Hero explore button
     document.getElementById('hero-explore-btn').addEventListener('click', function() {
       scrollToSection('library');
     });
 
-    // Modal overlay click to close
     document.getElementById('modal-overlay').addEventListener('click', function(e) {
       if (e.target === this) closeAppDetail();
     });
 
-    // ESC to close modal
     document.addEventListener('keydown', function(e) {
       if (e.key === 'Escape') closeAppDetail();
     });
 
-    // Scroll header shadow + scroll-to-top + scrollspy
     var scrollTop = document.getElementById('scroll-top');
     var header = document.getElementById('header');
     var sections = ['hero', 'featured', 'new', 'library'];
@@ -1609,7 +1931,6 @@ img { max-width: 100%; display: block; }
       header.classList.toggle('scrolled', sy > 10);
       scrollTop.classList.toggle('show', sy > 400);
 
-      // Scrollspy
       var current = 'hero';
       for (var i = 0; i < sections.length; i++) {
         var el = document.getElementById(sections[i]);
@@ -1622,14 +1943,23 @@ img { max-width: 100%; display: block; }
       });
     });
 
-    // Scroll to top
     scrollTop.addEventListener('click', function() {
       window.scrollTo({ top: 0, behavior: 'smooth' });
     });
   }
 
+  // ==================== onLangChange ====================
+  window.onLangChange = function() {
+    applyI18n();
+    renderCategories();
+    renderFeatured();
+    renderNew();
+    loadLibrary();
+  };
+
   // ==================== Init ====================
   function init() {
+    applyI18n();
     setupEventListeners();
     loadHome();
     loadLibrary();
@@ -1642,7 +1972,6 @@ img { max-width: 100%; display: block; }
     init();
   }
 
-  // Expose closeAppDetail for inline onclick
   window.closeAppDetail = closeAppDetail;
 })();
 </script>