feat: 优化英文版 footer 和语言设置

- 英文版 footer 不显示备案信息
- 英文版 footer 显示英文社交图标（Twitter, Facebook, LinkedIn, GitHub）
- 中文版 footer 保持原有中文社交图标（微信、微博、抖音、知乎）
- 添加动态更新 HTML lang 属性的功能，根据语言切换自动更新

src/shared/i18n/index.ts

@@ -28,6 +28,10 @@ export function setLocale(code: string) {
   if (locales.some(l => l.code === code)) {
     locale.value = code
     localStorage.setItem('locale', code)
+    // 动态更新 HTML 的 lang 属性
+    if (typeof document !== 'undefined') {
+      document.documentElement.lang = code
+    }
   }
 }
 
@@ -42,4 +46,8 @@ export function initLocale() {
   if (saved && locales.some(l => l.code === saved)) {
     locale.value = saved
   }
+  // 初始化时设置 HTML 的 lang 属性
+  if (typeof document !== 'undefined') {
+    document.documentElement.lang = locale.value
+  }
 }

src/views/HomePage.vue

@@ -1199,22 +1199,40 @@ onUnmounted(() => {
                 </router-link>
               </div>
               <div class="footer-social">
-                <a href="#" class="social-icon" :title="t('WeChat')">
+                <!-- 中文版社交图标 -->
-                  <Icon icon="tabler:brand-wechat" />
+                <template v-if="!isEnglish">
-                </a>
+                  <a href="#" class="social-icon" :title="t('WeChat')">
-                <a href="#" class="social-icon" :title="t('Weibo')">
+                    <Icon icon="tabler:brand-wechat" />
-                  <Icon icon="ant-design:weibo-outlined" />
+                  </a>
-                </a>
+                  <a href="#" class="social-icon" :title="t('Weibo')">
-                <a href="#" class="social-icon" :title="t('TikTok')">
+                    <Icon icon="ant-design:weibo-outlined" />
-                  <Icon icon="tabler:brand-tiktok" />
+                  </a>
-                </a>
+                  <a href="#" class="social-icon" :title="t('TikTok')">
-                <a href="#" class="social-icon" :title="t('Zhihu')">
+                    <Icon icon="tabler:brand-tiktok" />
-                  <Icon icon="ant-design:zhihu-square-filled" />
+                  </a>
-                </a>
+                  <a href="#" class="social-icon" :title="t('Zhihu')">
+                    <Icon icon="ant-design:zhihu-square-filled" />
+                  </a>
+                </template>
+                <!-- 英文版社交图标 -->
+                <template v-else>
+                  <a href="#" class="social-icon" title="Twitter">
+                    <Icon icon="tabler:brand-twitter" />
+                  </a>
+                  <a href="#" class="social-icon" title="Facebook">
+                    <Icon icon="tabler:brand-facebook" />
+                  </a>
+                  <a href="#" class="social-icon" title="LinkedIn">
+                    <Icon icon="tabler:brand-linkedin" />
+                  </a>
+                  <a href="#" class="social-icon" title="GitHub">
+                    <Icon icon="tabler:brand-github" />
+                  </a>
+                </template>
               </div>
               <div class="footer-copyright">
                 <p class="copyright-text">© {{ currentYear }} {{ appName }} {{ t('All Rights Reserved') }}</p>
-                <p class="icp-text">
+                <p v-if="!isEnglish" class="icp-text">
                   <a href="https://beian.miit.gov.cn" target="_blank" rel="noopener noreferrer">粤ICP备20016818号</a>
                 </p>
               </div>