style: 重新设计语言切换按钮 — SVG 地球图标 + CN/EN 双标签

- emoji 🌐 替换为精致 SVG 线条地球图标
- 按钮改为圆角胶囊样式，透明底 + 细边框
- 显示 CN/EN 双标签（当前语言高亮，另一个淡显）
- hover 时整体变蓝色主题色

common/common.css

@@ -133,32 +133,62 @@
 .lang-switch {
   display: flex;
   align-items: center;
-  gap: 4px;
+  gap: 6px;
-  padding: 6px 12px;
+  padding: 5px 14px;
-  margin-left: 12px;
+  margin-left: 16px;
-  border-radius: 6px;
+  border-radius: 20px;
   cursor: pointer;
-  color: rgba(220, 228, 240, 0.85);
+  color: rgba(203, 213, 225, 0.7);
-  font-size: 13px;
+  font-size: 12px;
   font-weight: 500;
-  transition: background 0.15s ease, color 0.15s ease;
+  letter-spacing: 0.5px;
+  transition: all 0.25s ease;
   user-select: none;
-  background: rgba(255, 255, 255, 0.06);
+  background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.08);
+  border: 1px solid rgba(148, 163, 184, 0.15);
 }
 
 .lang-switch:hover {
-  background: rgba(255, 255, 255, 0.12);
+  background: rgba(56, 189, 248, 0.08);
-  color: #fff;
+  border-color: rgba(56, 189, 248, 0.3);
+  color: #38BDF8;
 }
 
 .lang-switch .lang-icon {
-  font-size: 15px;
+  width: 16px;
-  line-height: 1;
+  height: 16px;
+  flex-shrink: 0;
+  opacity: 0.7;
+  transition: opacity 0.25s ease;
+}
+
+.lang-switch:hover .lang-icon {
+  opacity: 1;
 }
 
 .lang-switch .lang-text {
   font-weight: 600;
+  color: rgba(226, 232, 240, 0.95);
+  transition: color 0.25s ease;
+}
+
+.lang-switch:hover .lang-text {
+  color: #38BDF8;
+}
+
+.lang-switch .lang-sep {
+  color: rgba(148, 163, 184, 0.3);
+  font-weight: 300;
+}
+
+.lang-switch .lang-alt {
+  color: rgba(148, 163, 184, 0.45);
+  font-weight: 400;
+  transition: color 0.25s ease;
+}
+
+.lang-switch:hover .lang-alt {
+  color: rgba(56, 189, 248, 0.6);
 }
 
 .breadcrumb {

js/i18n.js

@@ -14,7 +14,7 @@
       nav_console: '控制台',
       nav_login: '登录',
       nav_register: '立即注册',
-      lang_label: '中',
+      lang_label: 'CN',
 
       // === Banner 占位 ===
       banner_tag_cloud: '云计算',
@@ -332,10 +332,14 @@
     // 更新 html lang 属性
     document.documentElement.lang = lang === 'zh' ? 'zh-CN' : 'en';
 
-    // 更新语言切换按钮文字
+    // 更新语言切换按钮
-    var langText = document.querySelector('.lang-text');
+    var langTexts = document.querySelectorAll('.lang-text');
-    if (langText) {
+    var langAlts = document.querySelectorAll('.lang-alt');
-      langText.textContent = dict.lang_label || lang.toUpperCase();
+    for (var i = 0; i < langTexts.length; i++) {
+      langTexts[i].textContent = lang === 'zh' ? 'CN' : 'EN';
+    }
+    for (var j = 0; j < langAlts.length; j++) {
+      langAlts[j].textContent = lang === 'zh' ? 'EN' : 'CN';
     }
   };
 

public/header.html

@@ -54,8 +54,10 @@
       </div>
       <!-- 语言切换（始终显示） -->
       <div class="lang-switch nav-desktop-link" id="langSwitch" onclick="i18n.toggle()">
-        <span class="lang-icon">🌐</span>
+        <svg class="lang-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"/><path d="M2 12h20"/><path d="M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z"/></svg>
-        <span class="lang-text">中</span>
+        <span class="lang-text">CN</span>
+        <span class="lang-sep">/</span>
+        <span class="lang-alt">EN</span>
       </div>
       <!-- 移动端汉堡菜单按钮 -->
       <button class="mobile-menu-toggle" id="mobileMenuToggle" aria-label="Toggle navigation">