xieyao/web_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 所有18套前端模板 + 管理后台共20个HTML文件添加i18n引擎
- 前端JavaScript方案：I18N_LOCALES翻译字典 + data-i18n属性 + t()函数调用
- 语言切换器UI：下拉菜单选择，匹配各模板主题风格
- 语言持久化：localStorage存储 + URL参数覆盖 + 浏览器语言自动检测
- onLangChange回调：语言切换时动态重新渲染所有内容
- 支持语言：zh-CN(简体中文) / zh-TW(繁体中文) / en(English)
This commit is contained in:
Geliebte
2026-09-09 16:58:40 +08:00
parent 69c59f4fbd
commit a84129330e
20 changed files with 9343 additions and 3855 deletions
Download Patch File Download Diff File Expand all files Collapse all files

542
web/dist/shop2/index.html vendored
View File

@@ -3,7 +3,7 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>NEON MART · 暗黑霓虹跨境电商</title>
<title>NEON MART</title>
<style>
/* ========== 主题变量 ========== */
:root {
@@ -226,6 +226,37 @@ body::before {
border:1.5px solid var(--bg);
}
/* ========== 语言切换器 ========== */
.lang-switcher { position:relative; margin-left:4px; }
.lang-btn {
display:flex; align-items:center; gap:6px; padding:8px 14px;
border-radius:var(--radius-sm); font-size:13px; font-weight:600;
color:var(--text-muted); cursor:pointer;
background:var(--surface); border:1px solid var(--border);
transition:var(--transition);
}
.lang-btn:hover { color:var(--text); background:var(--surface-2); border-color:rgba(100,210,255,0.3); }
.lang-btn svg { width:16px; height:16px; }
.lang-dropdown {
position:absolute; top:calc(100% + 8px); right:0; min-width:160px;
background:rgba(18,18,26,0.96); backdrop-filter:blur(20px);
-webkit-backdrop-filter:blur(20px);
border:1px solid var(--border-2); border-radius:var(--radius-sm);
box-shadow:0 12px 40px rgba(0,0,0,0.5); overflow:hidden;
opacity:0; transform:translateY(-8px); pointer-events:none;
transition:var(--transition); z-index:1001;
}
.lang-dropdown.open { opacity:1; transform:none; pointer-events:auto; }
.lang-option {
display:flex; align-items:center; gap:10px; padding:12px 16px;
font-size:14px; color:var(--text-muted); cursor:pointer;
transition:var(--transition);
}
.lang-option:hover { background:rgba(100,210,255,0.1); color:var(--text); }
.lang-option.active { color:var(--neon-cyan); font-weight:600; }
.lang-option .check { width:16px; height:16px; opacity:0; transition:opacity .2s; }
.lang-option.active .check { opacity:1; }
/* ========== Hero Banner ========== */
.hero {
position:relative;
@@ -1210,6 +1241,8 @@ body::before {
.section-title { font-size:22px; }
.products-toolbar { flex-direction:column; align-items:stretch; }
.sort-group { justify-content:space-between; }
.lang-switcher { position:static; margin-left:0; }
.lang-dropdown { right:auto; left:0; }
}
@media (max-width:480px) {
.features-strip { grid-template-columns:1fr; }
@@ -1284,14 +1317,35 @@ body::before {
<span class="logo-text">NEON MART</span>
</div>
<ul class="nav-links">
<li><a href="#" class="active" onclick="resetPage();return false;">首页</a></li>
<li><a href="#products" onclick="scrollToProducts();return false;">全部商品</a></li>
<li><a href="#products" onclick="loadFeatured();return false;">热门推荐</a></li>
<li><a href="#" class="active" onclick="resetPage();return false;" data-i18n="nav_home">首页</a></li>
<li><a href="#products" onclick="scrollToProducts();return false;" data-i18n="nav_all_products">全部商品</a></li>
<li><a href="#products" onclick="loadFeatured();return false;" data-i18n="nav_featured">热门推荐</a></li>
</ul>
<div class="search-box">
<input type="text" id="searchInput" placeholder="搜索霓虹好物..." oninput="handleSearch(event)">
<input type="text" id="searchInput" data-i18n-placeholder="search_placeholder" placeholder="搜索霓虹好物..." oninput="handleSearch(event)">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
</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 viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="width:12px;height:12px"><polyline points="6 9 12 15 18 9"/></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>
</div>
<div class="nav-actions">
<button class="nav-btn" title="购物车" onclick="toggleCart()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
@@ -1310,26 +1364,26 @@ body::before {
<div class="hero-content">
<div class="hero-tag">
<span class="hero-tag-dot"></span>
GLOBAL CROSS-BORDER · 全球直邮
<span data-i18n="hero_tag">GLOBAL CROSS-BORDER · 全球直邮</span>
</div>
<h1 class="gradient-text">NEON<br>MART</h1>
<p class="hero-sub">点亮你的全球购物体验。精选智能电子、家居生活、时尚运动等品类好物，霓虹品质，跨境直达。</p>
<p class="hero-sub" data-i18n="hero_sub">点亮你的全球购物体验。精选智能电子、家居生活、时尚运动等品类好物，霓虹品质，跨境直达。</p>
<a href="#" class="hero-btn" onclick="scrollToProducts();return false;">
立即探索
<span data-i18n="hero_cta">立即探索</span>
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
</a>
<div class="hero-stats">
<div>
<div class="hero-stat-num">18+</div>
<div class="hero-stat-label">精选品类</div>
<div class="hero-stat-label" data-i18n="hero_stat_categories">精选品类</div>
</div>
<div>
<div class="hero-stat-num">50K+</div>
<div class="hero-stat-label">全球用户</div>
<div class="hero-stat-label" data-i18n="hero_stat_users">全球用户</div>
</div>
<div>
<div class="hero-stat-num">99.8%</div>
<div class="hero-stat-label">好评率</div>
<div class="hero-stat-label" data-i18n="hero_stat_rating">好评率</div>
</div>
</div>
</div>
@@ -1340,19 +1394,19 @@ body::before {
<div class="features-strip">
<div class="feature-item">
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="3" width="15" height="13"/><path d="M16 8h4l3 3v5h-7V8z"/><circle cx="5.5" cy="18.5" r="2.5"/><circle cx="18.5" cy="18.5" r="2.5"/></svg></div>
<div><h4>全球直邮</h4><p>满 $99 免运费</p></div>
<div><h4 data-i18n="feature1_title">全球直邮</h4><p data-i18n="feature1_desc">满 $99 免运费</p></div>
</div>
<div class="feature-item">
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M9 11l3 3L22 4"/><path d="M21 12v7a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11"/></svg></div>
<div><h4>正品保障</h4><p>品牌授权直供</p></div>
<div><h4 data-i18n="feature2_title">正品保障</h4><p data-i18n="feature2_desc">品牌授权直供</p></div>
</div>
<div class="feature-item">
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polyline points="23 4 23 10 17 10"/><polyline points="1 20 1 14 7 14"/><path d="M3.51 9a9 9 0 0 1 14.85-3.36L23 10M1 14l4.64 4.36A9 9 0 0 0 20.49 15"/></svg></div>
<div><h4>7天退换</h4><p>无理由退货</p></div>
<div><h4 data-i18n="feature3_title">7天退换</h4><p data-i18n="feature3_desc">无理由退货</p></div>
</div>
<div class="feature-item">
<div class="feature-icon"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="1" y="4" width="22" height="16" rx="2"/><line x1="1" y1="10" x2="23" y2="10"/></svg></div>
<div><h4>安全支付</h4><p>多渠道加密</p></div>
<div><h4 data-i18n="feature4_title">安全支付</h4><p data-i18n="feature4_desc">多渠道加密</p></div>
</div>
</div>
@@ -1361,9 +1415,9 @@ body::before {
<div class="section-header">
<div class="section-title">
<span class="section-title-bar"></span>
<span class="gradient-text-pink">霓虹好物</span>
<span class="gradient-text-pink" data-i18n="section_title">霓虹好物</span>
</div>
<span class="section-sub" id="productsCount">加载中...</span>
<span class="section-sub" id="productsCount" data-i18n="loading">加载中...</span>
</div>
<!-- 分类标签栏 -->
@@ -1371,15 +1425,15 @@ body::before {
<!-- 工具栏 -->
<div class="products-toolbar">
<div class="products-count" id="productsCountInner">加载中...</div>
<div class="products-count" id="productsCountInner" data-i18n="loading">加载中...</div>
<div class="sort-group">
<span class="sort-label">排序</span>
<span class="sort-label" data-i18n="sort_label">排序</span>
<select class="sort-select" id="sortSelect" onchange="applySort()">
<option value="default">默认排序</option>
<option value="sales">销量优先</option>
<option value="price_asc">价格升序</option>
<option value="price_desc">价格降序</option>
<option value="rating">评分最高</option>
<option value="default" data-i18n="sort_default">默认排序</option>
<option value="sales" data-i18n="sort_sales">销量优先</option>
<option value="price_asc" data-i18n="sort_price_asc">价格升序</option>
<option value="price_desc" data-i18n="sort_price_desc">价格降序</option>
<option value="rating" data-i18n="sort_rating">评分最高</option>
</select>
</div>
</div>
@@ -1397,7 +1451,7 @@ body::before {
<!-- 购物车抽屉 -->
<div class="cart-drawer" id="cartDrawer">
<div class="cart-header">
<h3>购物车 <span class="cart-header-count" id="cartCount">0</span></h3>
<h3><span data-i18n="cart_title">购物车</span> <span class="cart-header-count" id="cartCount">0</span></h3>
<button class="cart-close" onclick="toggleCart()">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M18 6L6 18M6 6l12 12"/></svg>
</button>
@@ -1405,10 +1459,10 @@ body::before {
<div class="cart-items" id="cartItems"></div>
<div class="cart-footer">
<div class="cart-total">
<span class="cart-total-label">合计</span>
<span class="cart-total-label" data-i18n="cart_total">合计</span>
<span class="cart-total-value" id="cartTotal">$0.00</span>
</div>
<button class="checkout-btn" id="checkoutBtn" onclick="checkout()" disabled>去结算</button>
<button class="checkout-btn" id="checkoutBtn" onclick="checkout()" disabled data-i18n="checkout">去结算</button>
</div>
</div>
@@ -1422,7 +1476,7 @@ body::before {
<div class="toast-icon success" id="toastIcon">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"/><polyline points="22 4 12 14.01 9 11.01"/></svg>
</div>
<span id="toastMsg">已加入购物车</span>
<span id="toastMsg" data-i18n="toast_added">已加入购物车</span>
</div>
<!-- 页脚 -->
@@ -1430,42 +1484,333 @@ body::before {
<div class="footer-content">
<div class="footer-brand">
<h3><span class="gradient-text">NEON MART</span></h3>
<p>点亮你的全球购物体验。我们精选全球优质商品，为您提供安全、便捷、愉悦的跨境购物体验。覆盖智能电子、家居生活、时尚服饰、运动户外、美妆个护等品类。</p>
<p data-i18n="footer_desc">点亮你的全球购物体验。我们精选全球优质商品，为您提供安全、便捷、愉悦的跨境购物体验。覆盖智能电子、家居生活、时尚服饰、运动户外、美妆个护等品类。</p>
</div>
<div class="footer-col">
<h4>购物指南</h4>
<h4 data-i18n="footer_guide">购物指南</h4>
<ul>
<li><a href="#">购物流程</a></li>
<li><a href="#">会员介绍</a></li>
<li><a href="#">常见问题</a></li>
<li><a href="#">联系客服</a></li>
<li><a href="#" data-i18n="footer_guide_process">购物流程</a></li>
<li><a href="#" data-i18n="footer_guide_member">会员介绍</a></li>
<li><a href="#" data-i18n="footer_guide_faq">常见问题</a></li>
<li><a href="#" data-i18n="footer_guide_support">联系客服</a></li>
</ul>
</div>
<div class="footer-col">
<h4>配送与退换</h4>
<h4 data-i18n="footer_shipping">配送与退换</h4>
<ul>
<li><a href="#">配送方式</a></li>
<li><a href="#">运费规则</a></li>
<li><a href="#">退换货政策</a></li>
<li><a href="#">退款说明</a></li>
<li><a href="#" data-i18n="footer_shipping_methods">配送方式</a></li>
<li><a href="#" data-i18n="footer_shipping_rules">运费规则</a></li>
<li><a href="#" data-i18n="footer_shipping_return">退换货政策</a></li>
<li><a href="#" data-i18n="footer_shipping_refund">退款说明</a></li>
</ul>
</div>
<div class="footer-col">
<h4>关于我们</h4>
<h4 data-i18n="footer_about">关于我们</h4>
<ul>
<li><a href="#">公司简介</a></li>
<li><a href="#">加入我们</a></li>
<li><a href="#">隐私政策</a></li>
<li><a href="#">用户协议</a></li>
<li><a href="#" data-i18n="footer_about_company">公司简介</a></li>
<li><a href="#" data-i18n="footer_about_join">加入我们</a></li>
<li><a href="#" data-i18n="footer_about_privacy">隐私政策</a></li>
<li><a href="#" data-i18n="footer_about_terms">用户协议</a></li>
</ul>
</div>
</div>
<div class="footer-bottom">
© 2026 <span class="neon">NEON MART</span> · All Rights Reserved · 全球好物 · 霓虹直达
© 2026 <span class="neon">NEON MART</span> · All Rights Reserved · <span data-i18n="footer_suffix">全球好物 · 霓虹直达</span>
</div>
</footer>
<script>
// ========== i18n 国际化引擎 ==========
const I18N_LOCALES = {
'zh-CN': {
page_title: 'NEON MART · 暗黑霓虹跨境电商',
nav_home: '首页',
nav_all_products: '全部商品',
nav_featured: '热门推荐',
search_placeholder: '搜索霓虹好物...',
hero_tag: 'GLOBAL CROSS-BORDER · 全球直邮',
hero_sub: '点亮你的全球购物体验。精选智能电子、家居生活、时尚运动等品类好物，霓虹品质，跨境直达。',
hero_cta: '立即探索',
hero_stat_categories: '精选品类',
hero_stat_users: '全球用户',
hero_stat_rating: '好评率',
feature1_title: '全球直邮',
feature1_desc: '满 $99 免运费',
feature2_title: '正品保障',
feature2_desc: '品牌授权直供',
feature3_title: '7天退换',
feature3_desc: '无理由退货',
feature4_title: '安全支付',
feature4_desc: '多渠道加密',
section_title: '霓虹好物',
loading: '加载中...',
sort_label: '排序',
sort_default: '默认排序',
sort_sales: '销量优先',
sort_price_asc: '价格升序',
sort_price_desc: '价格降序',
sort_rating: '评分最高',
product_count: '共 {n} 件商品',
product_sales: '已售 {n}',
product_add_cart: '加入购物车',
category_all: '全部',
cart_title: '购物车',
cart_total: '合计',
checkout: '去结算',
cart_empty: '购物车是空的',
cart_empty_sub: '快去挑选心仪的霓虹好物吧',
cart_item_delete: '删除',
toast_added: '已加入购物车',
toast_added_item: '已加入购物车: {name}',
toast_removed: '已移除商品',
toast_add_failed: '添加失败，请重试',
toast_featured_loaded: '已加载热门推荐商品',
modal_loading: '加载中...',
modal_discount_save: '省 {n}%',
modal_label_rating: '评分',
modal_label_sales: '销量',
modal_label_stock: '库存 {n} 件',
modal_qty: '数量',
modal_add_cart: '加入购物车',
modal_load_error: '商品信息加载失败',
modal_close: '关闭',
products_load_error: '商品加载失败，请稍后重试',
products_reload: '重新加载',
products_empty: '未找到匹配的商品',
products_empty_hint: '试试其他关键词或分类',
categories_load_error: '分类加载失败',
featured_load_error: '推荐加载失败',
featured_retry: '重试',
featured_count: '热门推荐 · {n} 件商品',
checkout_success: '订单已提交! 共 {count} 件商品, 合计 ${total}',
footer_desc: '点亮你的全球购物体验。我们精选全球优质商品，为您提供安全、便捷、愉悦的跨境购物体验。覆盖智能电子、家居生活、时尚服饰、运动户外、美妆个护等品类。',
footer_guide: '购物指南',
footer_guide_process: '购物流程',
footer_guide_member: '会员介绍',
footer_guide_faq: '常见问题',
footer_guide_support: '联系客服',
footer_shipping: '配送与退换',
footer_shipping_methods: '配送方式',
footer_shipping_rules: '运费规则',
footer_shipping_return: '退换货政策',
footer_shipping_refund: '退款说明',
footer_about: '关于我们',
footer_about_company: '公司简介',
footer_about_join: '加入我们',
footer_about_privacy: '隐私政策',
footer_about_terms: '用户协议',
footer_suffix: '全球好物 · 霓虹直达'
},
'en': {
page_title: 'NEON MART · Neon Cross-Border Shop',
nav_home: 'Home',
nav_all_products: 'All Products',
nav_featured: 'Featured',
search_placeholder: 'Search neon goodies...',
hero_tag: 'GLOBAL CROSS-BORDER · Direct Delivery',
hero_sub: 'Light up your global shopping experience. Curated smart electronics, home living, fashion & sports, and more — neon quality, delivered worldwide.',
hero_cta: 'Explore Now',
hero_stat_categories: 'Categories',
hero_stat_users: 'Global Users',
hero_stat_rating: 'Satisfaction',
feature1_title: 'Global Shipping',
feature1_desc: 'Free over $99',
feature2_title: 'Authentic Guarantee',
feature2_desc: 'Brand authorized',
feature3_title: '7-Day Returns',
feature3_desc: 'No-questions-asked',
feature4_title: 'Secure Payment',
feature4_desc: 'Multi-channel encrypted',
section_title: 'Neon Picks',
loading: 'Loading...',
sort_label: 'Sort',
sort_default: 'Default',
sort_sales: 'Top Sales',
sort_price_asc: 'Price Low→High',
sort_price_desc: 'Price High→Low',
sort_rating: 'Top Rated',
product_count: '{n} products',
product_sales: 'Sold {n}',
product_add_cart: 'Add to Cart',
category_all: 'All',
cart_title: 'Cart',
cart_total: 'Total',
checkout: 'Checkout',
cart_empty: 'Your cart is empty',
cart_empty_sub: 'Go explore some neon goodies!',
cart_item_delete: 'Delete',
toast_added: 'Added to cart',
toast_added_item: 'Added: {name}',
toast_removed: 'Item removed',
toast_add_failed: 'Failed to add, please retry',
toast_featured_loaded: 'Featured products loaded',
modal_loading: 'Loading...',
modal_discount_save: 'Save {n}%',
modal_label_rating: 'Rating',
modal_label_sales: 'Sales',
modal_label_stock: '{n} in stock',
modal_qty: 'Qty',
modal_add_cart: 'Add to Cart',
modal_load_error: 'Failed to load product',
modal_close: 'Close',
products_load_error: 'Failed to load products, please try again',
products_reload: 'Reload',
products_empty: 'No matching products found',
products_empty_hint: 'Try other keywords or categories',
categories_load_error: 'Failed to load categories',
featured_load_error: 'Failed to load featured',
featured_retry: 'Retry',
featured_count: 'Featured · {n} products',
checkout_success: 'Order placed! {count} items, total ${total}',
footer_desc: 'Light up your global shopping experience. We curate quality products worldwide for a safe, convenient, and delightful cross-border shopping experience.',
footer_guide: 'Shopping Guide',
footer_guide_process: 'How to Buy',
footer_guide_member: 'Membership',
footer_guide_faq: 'FAQ',
footer_guide_support: 'Support',
footer_shipping: 'Shipping & Returns',
footer_shipping_methods: 'Delivery Options',
footer_shipping_rules: 'Shipping Policy',
footer_shipping_return: 'Return Policy',
footer_shipping_refund: 'Refund Info',
footer_about: 'About Us',
footer_about_company: 'Company Profile',
footer_about_join: 'Join Us',
footer_about_privacy: 'Privacy Policy',
footer_about_terms: 'Terms of Use',
footer_suffix: 'Global Goods · Neon Delivery'
},
'zh-TW': {
page_title: 'NEON MART · 暗黑霓虹跨境電商',
nav_home: '首頁',
nav_all_products: '全部商品',
nav_featured: '熱門推薦',
search_placeholder: '搜尋霓虹好物...',
hero_tag: 'GLOBAL CROSS-BORDER · 全球直郵',
hero_sub: '點亮你的全球購物體驗。精選智能電子、家居生活、時尚運動等品類好物，霓虹品質，跨境直達。',
hero_cta: '立即探索',
hero_stat_categories: '精選品類',
hero_stat_users: '全球用戶',
hero_stat_rating: '好評率',
feature1_title: '全球直郵',
feature1_desc: '滿 $99 免運費',
feature2_title: '正品保障',
feature2_desc: '品牌授權直供',
feature3_title: '7天退換',
feature3_desc: '無理由退貨',
feature4_title: '安全支付',
feature4_desc: '多渠道加密',
section_title: '霓虹好物',
loading: '載入中...',
sort_label: '排序',
sort_default: '預設排序',
sort_sales: '銷量優先',
sort_price_asc: '價格升序',
sort_price_desc: '價格降序',
sort_rating: '評分最高',
product_count: '共 {n} 件商品',
product_sales: '已售 {n}',
product_add_cart: '加入購物車',
category_all: '全部',
cart_title: '購物車',
cart_total: '合計',
checkout: '去結帳',
cart_empty: '購物車是空的',
cart_empty_sub: '快去挑選心儀的霓虹好物吧',
cart_item_delete: '刪除',
toast_added: '已加入購物車',
toast_added_item: '已加入購物車: {name}',
toast_removed: '已移除商品',
toast_add_failed: '新增失敗，請重試',
toast_featured_loaded: '已載入熱門推薦商品',
modal_loading: '載入中...',
modal_discount_save: '省 {n}%',
modal_label_rating: '評分',
modal_label_sales: '銷量',
modal_label_stock: '{n} 件庫存',
modal_qty: '數量',
modal_add_cart: '加入購物車',
modal_load_error: '商品資訊載入失敗',
modal_close: '關閉',
products_load_error: '商品載入失敗，請稍後重試',
products_reload: '重新載入',
products_empty: '未找到符合的商品',
products_empty_hint: '試試其他關鍵字或分類',
categories_load_error: '分類載入失敗',
featured_load_error: '推薦載入失敗',
featured_retry: '重試',
featured_count: '熱門推薦 · {n} 件商品',
checkout_success: '訂單已提交! 共 {count} 件商品, 合計 ${total}',
footer_desc: '點亮你的全球購物體驗。我們精選全球優質商品，為您提供安全、便捷、愉悅的跨境購物體驗。覆蓋智能電子、家居生活、時尚服飾、運動戶外、美妝個護等品類。',
footer_guide: '購物指南',
footer_guide_process: '購物流程',
footer_guide_member: '會員介紹',
footer_guide_faq: '常見問題',
footer_guide_support: '聯繫客服',
footer_shipping: '配送與退換',
footer_shipping_methods: '配送方式',
footer_shipping_rules: '運費規則',
footer_shipping_return: '退換貨政策',
footer_shipping_refund: '退款說明',
footer_about: '關於我們',
footer_about_company: '公司簡介',
footer_about_join: '加入我們',
footer_about_privacy: '隱私政策',
footer_about_terms: '用戶協議',
footer_suffix: '全球好物 · 霓虹直達'
}
};
const LANG_LABELS = {'zh-CN':'中文','en':'EN','zh-TW':'繁中'};
let 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('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.title=t('page_title');
document.getElementById('langLabel').textContent=LANG_LABELS[currentLang]||currentLang;
document.querySelectorAll('.lang-option').forEach(function(opt){
opt.classList.toggle('active',opt.getAttribute('data-lang')===currentLang);
});
}
function switchLang(lang){
if(!I18N_LOCALES[lang]) return;
currentLang=lang;
try{localStorage.setItem('lang',lang);}catch(e){}
applyI18n();
if(typeof onLangChange==='function') onLangChange(lang);
document.getElementById('langDropdown').classList.remove('open');
}
function toggleLangDropdown(){
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');
});
// ========== 全局状态 ==========
let allCategories = [];
let currentPage = 1;
@@ -1479,11 +1824,11 @@ let modalQty = 1;
// ========== 分类渐变色 & 图标 ==========
const categoryGradients = {
1: 'linear-gradient(135deg, #BF5AF2 0%, #6B2FB5 100%)', // 智能电子 - 紫
2: 'linear-gradient(135deg, #64D2FF 0%, #2A7AB5 100%)', // 家居生活 - 青
3: 'linear-gradient(135deg, #FF375F 0%, #B51E3E 100%)', // 时尚服饰 - 粉
4: 'linear-gradient(135deg, #30D158 0%, #1A7A35 100%)', // 运动户外 - 绿
5: 'linear-gradient(135deg, #FF9F0A 0%, #B56B00 100%)', // 美妆个护 - 橙
1: 'linear-gradient(135deg, #BF5AF2 0%, #6B2FB5 100%)',
2: 'linear-gradient(135deg, #64D2FF 0%, #2A7AB5 100%)',
3: 'linear-gradient(135deg, #FF375F 0%, #B51E3E 100%)',
4: 'linear-gradient(135deg, #30D158 0%, #1A7A35 100%)',
5: 'linear-gradient(135deg, #FF9F0A 0%, #B56B00 100%)',
};
const defaultGradient = 'linear-gradient(135deg, #BF5AF2 0%, #64D2FF 100%)';
@@ -1491,7 +1836,6 @@ function getGradient(catId) {
return categoryGradients[catId] || defaultGradient;
}
// 按分类选择不同 SVG 图标
function productIconSVG(catId) {
const icons = {
1: '<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><rect x="2" y="6" width="20" height="14" rx="3"/><path d="M6 6V4a2 2 0 0 1 2-2h8a2 2 0 0 1 2 2v2"/><circle cx="8" cy="13" r="1.5"/><circle cx="16" cy="13" r="1.5"/></svg>',
@@ -1503,7 +1847,6 @@ function productIconSVG(catId) {
return icons[catId] || icons[1];
}
// 分类小图标
function categoryIconSVG(catId) {
return productIconSVG(catId);
}
@@ -1511,9 +1854,9 @@ function categoryIconSVG(catId) {
// ========== API 调用 ==========
async function fetchJSON(url) {
const res = await fetch(url);
if (!res.ok) throw new Error('网络错误 ' + res.status);
if (!res.ok) throw new Error('Network error ' + res.status);
const json = await res.json();
if (json.code !== 0) throw new Error(json.message || '请求失败');
if (json.code !== 0) throw new Error(json.message || 'Request failed');
return json.data;
}
@@ -1522,8 +1865,8 @@ async function loadCategories() {
allCategories = await fetchJSON('/api/v1/shop/categories');
renderCategoryChips();
} catch(e) {
console.error('分类加载失败:', e);
document.getElementById('categoryChips').innerHTML = '<span style="color:var(--text-dim);font-size:13px">分类加载失败</span>';
console.error('Category load failed:', e);
document.getElementById('categoryChips').innerHTML = '<span style="color:var(--text-dim);font-size:13px">' + t('categories_load_error') + '</span>';
}
}
@@ -1553,12 +1896,12 @@ async function loadProducts() {
renderProducts(data.list || [], data.total || 0);
renderPagination(data.total || 0);
} catch(e) {
console.error('商品加载失败:', e);
console.error('Product load failed:', e);
grid.innerHTML = `
<div class="error-block">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M12 8v4M12 16h.01"/></svg>
<p>商品加载失败，请稍后重试</p>
<button class="retry-btn" onclick="loadProducts()">重新加载</button>
<p>${t('products_load_error')}</p>
<button class="retry-btn" onclick="loadProducts()">${t('products_reload')}</button>
</div>`;
document.getElementById('pagination').innerHTML = '';
}
@@ -1569,12 +1912,12 @@ function renderCategoryChips() {
const container = document.getElementById('categoryChips');
let html = `<span class="category-chip ${selectedCategory === 0 ? 'active' : ''}" onclick="selectCategory(0)">
<svg class="category-chip-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/></svg>
全部
${t('category_all')}
</span>`;
html += allCategories.map(c => `
<span class="category-chip ${selectedCategory === c.id ? 'active' : ''}" onclick="selectCategory(${c.id})">
<span class="category-chip-icon">${categoryIconSVG(c.id)}</span>
${c.name}
${escapeHtml(c.name)}
</span>
`).join('');
container.innerHTML = html;
@@ -1585,14 +1928,14 @@ function parseTags(tagsStr) {
}
function tagClass(tag) {
if (tag.includes('热') || tag.includes('爆')) return 'tag-hot';
if (tag.includes('新')) return 'tag-new';
if (tag.includes('折') || tag.includes('惠') || tag.includes('特')) return 'tag-sale';
if (tag.includes('热') || tag.includes('爆') || tag.includes('Hot') || tag.includes('hot') || tag.includes('熱')) return 'tag-hot';
if (tag.includes('新') || tag.includes('New') || tag.includes('new')) return 'tag-new';
if (tag.includes('折') || tag.includes('惠') || tag.includes('特') || tag.includes('Sale') || tag.includes('sale') || tag.includes('OFF') || tag.includes('off')) return 'tag-sale';
return 'tag-default';
}
function formatSales(n) {
if (n >= 10000) return (n / 10000).toFixed(1) + '万';
if (n >= 10000) return (n / 10000).toFixed(1) + (currentLang === 'en' ? '0K' : '万');
return n.toString();
}
@@ -1603,16 +1946,16 @@ function escapeHtml(str) {
function renderProducts(products, total) {
const grid = document.getElementById('productsGrid');
const countText = `共 <strong>${total}</strong> 件商品`;
document.getElementById('productsCount').textContent = countText;
const countText = t('product_count').replace('{n}', '<strong>' + total + '</strong>');
document.getElementById('productsCount').textContent = t('product_count').replace('{n}', total);
document.getElementById('productsCountInner').innerHTML = countText;
if (products.length === 0) {
grid.innerHTML = `
<div class="error-block">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
<p>未找到匹配的商品</p>
<p style="font-size:13px;margin-top:6px;color:var(--text-dim)">试试其他关键词或分类</p>
<p>${t('products_empty')}</p>
<p style="font-size:13px;margin-top:6px;color:var(--text-dim)">${t('products_empty_hint')}</p>
</div>`;
return;
}
@@ -1644,10 +1987,10 @@ function renderProducts(products, total) {
<span class="stars">${'\u2605'.repeat(Math.round(p.rating))}</span>
<span class="rating-num">${p.rating.toFixed(1)}</span>
</div>
<span class="product-sales">已售 ${formatSales(p.sales)}</span>
<span class="product-sales">${t('product_sales').replace('{n}', formatSales(p.sales))}</span>
</div>
</div>
<button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${p.id})" title="加入购物车">
<button class="add-cart-btn" onclick="event.stopPropagation();addToCart(${p.id})" title="${t('product_add_cart')}">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M12 5v14M5 12h14"/></svg>
</button>
</div>`;
@@ -1729,12 +2072,12 @@ async function loadFeatured() {
const products = await fetchJSON('/api/v1/shop/featured?limit=8');
renderProducts(products, products.length);
document.getElementById('pagination').innerHTML = '';
document.getElementById('productsCount').innerHTML = '热门推荐 · <strong>' + products.length + '</strong> 件商品';
document.getElementById('productsCountInner').innerHTML = '热门推荐 · <strong>' + products.length + '</strong> 件商品';
document.getElementById('productsCount').innerHTML = t('featured_count').replace('{n}', products.length);
document.getElementById('productsCountInner').innerHTML = t('featured_count').replace('{n}', '<strong>' + products.length + '</strong>');
scrollToProducts();
showToast('已加载热门推荐商品', 'success');
showToast(t('toast_featured_loaded'), 'success');
} catch(e) {
grid.innerHTML = `<div class="error-block"><p>推荐加载失败</p><button class="retry-btn" onclick="loadFeatured()">重试</button></div>`;
grid.innerHTML = `<div class="error-block"><p>${t('featured_load_error')}</p><button class="retry-btn" onclick="loadFeatured()">${t('featured_retry')}</button></div>`;
}
}
@@ -1743,7 +2086,7 @@ async function showProductDetail(id) {
const modal = document.getElementById('productModal');
const content = document.getElementById('modalContent');
modalQty = 1;
content.innerHTML = '<div class="loading-center"><div class="spinner"></div><p>加载中...</p></div>';
content.innerHTML = '<div class="loading-center"><div class="spinner"></div><p>' + t('modal_loading') + '</p></div>';
modal.classList.add('open');
document.body.style.overflow = 'hidden';
@@ -1774,17 +2117,17 @@ async function showProductDetail(id) {
<span class="price-symbol">$</span>
<span class="price-current">${p.price.toFixed(2)}</span>
${p.original_price > p.price ? `<span class="price-original">$${p.original_price.toFixed(2)}</span>` : ''}
${discount > 0 ? `<span class="product-tag tag-sale">省 ${discount}%</span>` : ''}
${discount > 0 ? `<span class="product-tag tag-sale">${t('modal_discount_save').replace('{n}', discount)}</span>` : ''}
</div>
<div class="modal-tags">${tags.map(t => `<span class="product-tag ${tagClass(t)}">${escapeHtml(t)}</span>`).join('')}</div>
<p class="modal-desc">${escapeHtml(p.description)}</p>
<div class="modal-meta">
<div class="modal-meta-item"><span class="label">评分</span><span class="value cyan">${p.rating.toFixed(1)} \u2605</span></div>
<div class="modal-meta-item"><span class="label">销量</span><span class="value">${formatSales(p.sales)}</span></div>
<div class="modal-meta-item"><span class="label">库存</span><span class="value">${p.stock} 件</span></div>
<div class="modal-meta-item"><span class="label">${t('modal_label_rating')}</span><span class="value cyan">${p.rating.toFixed(1)} \u2605</span></div>
<div class="modal-meta-item"><span class="label">${t('modal_label_sales')}</span><span class="value">${formatSales(p.sales)}</span></div>
<div class="modal-meta-item"><span class="label">${t('modal_label_stock').replace('{n}', p.stock)}</span><span class="value">${p.stock}</span></div>
</div>
<div class="modal-qty-row">
<span class="modal-qty-label">数量</span>
<span class="modal-qty-label">${t('modal_qty')}</span>
<div class="modal-qty-control">
<button onclick="changeModalQty(-1)">\u2212</button>
<span class="val" id="modalQtyVal">1</span>
@@ -1793,13 +2136,13 @@ async function showProductDetail(id) {
</div>
<button class="modal-add-cart" onclick="addToCartFromModal(${p.id})">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
加入购物车
${t('modal_add_cart')}
</button>
</div>
</div>
`;
} catch(e) {
content.innerHTML = `<div class="error-block"><p>商品信息加载失败</p><button class="retry-btn" onclick="closeModal()">关闭</button></div>`;
content.innerHTML = `<div class="error-block"><p>${t('modal_load_error')}</p><button class="retry-btn" onclick="closeModal()">${t('modal_close')}</button></div>`;
}
}
@@ -1828,7 +2171,7 @@ async function addToCart(productId, qty) {
product = await fetchJSON(`/api/v1/shop/products/${productId}`);
productCache[productId] = product;
} catch(e) {
showToast('添加失败，请重试', 'error');
showToast(t('toast_add_failed'), 'error');
return;
}
}
@@ -1848,8 +2191,7 @@ async function addToCart(productId, qty) {
}
updateCartUI();
const shortName = product.name.length > 14 ? product.name.substring(0, 14) + '...' : product.name;
showToast('已加入购物车: ' + shortName, 'success');
// 购物车角标动画
showToast(t('toast_added_item').replace('{name}', shortName), 'success');
const badge = document.getElementById('cartBadge');
badge.style.animation = 'none';
setTimeout(() => { badge.style.animation = 'pulse 0.4s ease'; }, 10);
@@ -1858,7 +2200,7 @@ async function addToCart(productId, qty) {
function removeFromCart(productId) {
cart = cart.filter(i => i.id !== productId);
updateCartUI();
showToast('已移除商品', 'success');
showToast(t('toast_removed'), 'success');
}
function changeQty(productId, delta) {
@@ -1888,8 +2230,8 @@ function updateCartUI() {
container.innerHTML = `
<div class="cart-empty">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="9" cy="21" r="1"/><circle cx="20" cy="21" r="1"/><path d="M1 1h4l2.68 13.39a2 2 0 0 0 2 1.61h9.72a2 2 0 0 0 2-1.61L23 6H6"/></svg>
<p>购物车是空的</p>
<p class="sub">快去挑选心仪的霓虹好物吧</p>
<p>${t('cart_empty')}</p>
<p class="sub">${t('cart_empty_sub')}</p>
</div>`;
return;
}
@@ -1906,7 +2248,7 @@ function updateCartUI() {
<button class="qty-btn" onclick="changeQty(${item.id}, 1)">+</button>
<span class="cart-item-remove" onclick="removeFromCart(${item.id})">
<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>
删除
${t('cart_item_delete')}
</span>
</div>
</div>
@@ -1931,7 +2273,7 @@ function checkout() {
if (cart.length === 0) return;
const total = cart.reduce((s, i) => s + i.price * i.qty, 0);
const count = cart.reduce((s, i) => s + i.qty, 0);
showToast('订单已提交! 共 ' + count + ' 件商品, 合计 $' + total.toFixed(2), 'success');
showToast(t('checkout_success').replace('{count}', count).replace('{total}', total.toFixed(2)), 'success');
cart = [];
updateCartUI();
toggleCart();
@@ -1964,15 +2306,27 @@ document.addEventListener('keydown', function(e) {
// ========== 初始化 ==========
async function init() {
applyI18n();
await loadCategories();
await loadProducts();
updateCartUI();
}
// ========== 语言切换回调：重新渲染动态内容 ==========
function onLangChange(lang) {
renderCategoryChips();
renderProducts([], 0);
loadProducts();
updateCartUI();
if (document.getElementById('productModal').classList.contains('open')) {
document.getElementById('productModal').classList.remove('open');
document.body.style.overflow = '';
}
}
init();
// ========== 3D 动态效果 & 鼠标光影（新增） ==========
// 鼠标霓虹光斑跟随
// ========== 3D 动态效果 & 鼠标光影 ==========
const cursorGlow = document.createElement('div');
cursorGlow.className = 'cursor-glow';
cursorGlow.style.left = '50vw';
@@ -1983,7 +2337,6 @@ document.addEventListener('mousemove', e => {
cursorGlow.style.top = e.clientY + 'px';
});
// 产品卡片 3D 倾斜 + 表面霓虹高光（鼠标在卡片上时倾斜，离开时恢复）
document.addEventListener('mousemove', e => {
document.querySelectorAll('.product-card').forEach(card => {
const rect = card.getBoundingClientRect();
@@ -2001,7 +2354,6 @@ document.addEventListener('mousemove', e => {
});
});
// 创建霓虹浮动粒子（12 个，紫/青/粉/绿随机分布）
const particleColors = ['#BF5AF2', '#64D2FF', '#FF375F', '#30D158'];
for (let i = 0; i < 12; i++) {
const p = document.createElement('div');