feat: 国际化支持 + 导航右侧改造

- 新建 js/i18n.js:轻量 i18n 引擎,130+ key 中英字典
- header.html: 去掉文档链接,控制台移入已登录区域
- header.html: 新增语言切换按钮 🌐(中/EN)
- header.html: 所有文字加 data-i18n 属性
- index.html: Banner/促销/产品/解决方案/基础设施/荣誉/新闻约 60 处 data-i18n
- common.css: 新增 .lang-switch 按钮样式
- 移动端侧边栏同步更新
This commit is contained in:
yiqiu
2026-03-18 18:33:12 +08:00
parent f78bded54f
commit f42dde0f95
5 changed files with 487 additions and 96 deletions

View File

@@ -27,31 +27,36 @@
</div>
</div>
<div class="nav-right">
<a href="/document.html" class="nav-text-link nav-desktop-link">文档</a>
<span class="nav-divider nav-desktop-link">|</span>
<a href="/home.htm" class="nav-text-link nav-desktop-link">控制台</a>
<span class="nav-divider nav-desktop-link">|</span>
<!-- 未登录状态 -->
<div class="no-login nav-desktop-link d-none">
<span class="nav-text-link" id="loginBtn">登录</span>
<span class="nav-text-link" id="loginBtn" data-i18n="nav_login">登录</span>
<span class="nav-divider">|</span>
<div class="btn btn-normal" id="registBtn">
<img src="/web/BlackFruit-web/assets/img/header/liwu.svg" class="regist-icon" alt="Gift">
<span class="regist-text">立即注册</span>
<span class="regist-text" data-i18n="nav_register">立即注册</span>
</div>
</div>
<!-- 已登录状态 -->
<div class="login-in nav-desktop-link d-none">
<a href="/home.htm" class="nav-text-link" data-i18n="nav_console">控制台</a>
<span class="nav-divider">|</span>
<div id="headImg" class="head-img"></div>
<span class="ml-10 font-el1 name" id="username"></span>
<div class="login-menu animated fadeIn">
<div class="login-menu-item" id="accountBtn">账户信息
<span class="no-real-name real-name" id="noCertification">未实名</span>
<span class="real-name d-none" id="isCertification">已实名</span>
<div class="login-menu-item" id="accountBtn"><span data-i18n="menu_account">账户信息</span>
<span class="no-real-name real-name" id="noCertification" data-i18n="menu_not_certified">未实名</span>
<span class="real-name d-none" id="isCertification" data-i18n="menu_certified">已实名</span>
</div>
<div class="login-menu-item" id="financeBtn">未付款订单</div>
<div class="login-menu-item" id="ticketBtn">我的工单</div>
<div class="login-menu-item" id="logout">退出账户</div>
<div class="login-menu-item" id="financeBtn" data-i18n="menu_unpaid">未付款订单</div>
<div class="login-menu-item" id="ticketBtn" data-i18n="menu_ticket">我的工单</div>
<div class="login-menu-item" id="logout" data-i18n="menu_logout">退出账户</div>
</div>
</div>
<!-- 语言切换(始终显示) -->
<div class="lang-switch nav-desktop-link" id="langSwitch" onclick="i18n.toggle()">
<span class="lang-icon">🌐</span>
<span class="lang-text"></span>
</div>
<!-- 移动端汉堡菜单按钮 -->
<button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">
<img src="/web/BlackFruit-web/assets/img/header/bar.svg" alt="Menu" class="mobile-menu-icon">
@@ -171,20 +176,17 @@
{/if}
<!-- 分隔线 -->
<div class="mobile-nav-divider"></div>
<!-- 文档和控制台 -->
<div class="mobile-nav-item">
<a href="/document.html" class="mobile-nav-link">文档</a>
</div>
<div class="mobile-nav-item">
<a href="/home.htm" class="mobile-nav-link">控制台</a>
<!-- 控制台(已登录时显示) -->
<div class="mobile-nav-item mobile-login-in" style="display: none;">
<a href="/home.htm" class="mobile-nav-link" data-i18n="nav_console">控制台</a>
</div>
<!-- 登录注册(未登录状态) -->
<div class="mobile-nav-actions mobile-no-login" style="display: none;">
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLoginBtn">登录</span>
<span class="mobile-nav-link" id="mobileLoginBtn" data-i18n="nav_login">登录</span>
</div>
<div class="mobile-nav-item">
<div class="mobile-nav-btn" id="mobileRegistBtn">立即注册</div>
<div class="mobile-nav-btn" id="mobileRegistBtn" data-i18n="nav_register">立即注册</div>
</div>
</div>
<!-- 用户信息(已登录状态) -->
@@ -195,18 +197,23 @@
<div class="mobile-user-name" id="mobileUsername"></div>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileAccountBtn">账户信息</span>
<span class="mobile-nav-link" id="mobileAccountBtn" data-i18n="menu_account">账户信息</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileFinanceBtn">未付款订单</span>
<span class="mobile-nav-link" id="mobileFinanceBtn" data-i18n="menu_unpaid">未付款订单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileTicketBtn">我的工单</span>
<span class="mobile-nav-link" id="mobileTicketBtn" data-i18n="menu_ticket">我的工单</span>
</div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" id="mobileLogout">退出账户</span>
<span class="mobile-nav-link" id="mobileLogout" data-i18n="menu_logout">退出账户</span>
</div>
</div>
<!-- 语言切换 -->
<div class="mobile-nav-divider"></div>
<div class="mobile-nav-item">
<span class="mobile-nav-link" onclick="i18n.toggle()">🌐 <span class="lang-text"></span> / EN</span>
</div>
</div>
</div>
</div>