vue/jingrowtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
- 英文版 footer 不显示备案信息
- 英文版 footer 显示英文社交图标（Twitter, Facebook, LinkedIn, GitHub）
- 中文版 footer 保持原有中文社交图标（微信、微博、抖音、知乎）
- 添加动态更新 HTML lang 属性的功能，根据语言切换自动更新
This commit is contained in:
jingrow 2026-01-03 21:58:46 +08:00
parent 1749d13987
commit f8958bd65f
2 changed files with 39 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/shared/i18n/index.ts
View File

@ -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
}
}

44
src/views/HomePage.vue
View File

@ -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" />
</a>
<a href="#" class="social-icon" :title="t('Weibo')">
<Icon icon="ant-design:weibo-outlined" />
</a>
<a href="#" class="social-icon" :title="t('TikTok')">
<Icon icon="tabler:brand-tiktok" />
</a>
<a href="#" class="social-icon" :title="t('Zhihu')">
<Icon icon="ant-design:zhihu-square-filled" />
</a>
<!-- 中文版社交图标 -->
<template v-if="!isEnglish">
<a href="#" class="social-icon" :title="t('WeChat')">
<Icon icon="tabler:brand-wechat" />
</a>
<a href="#" class="social-icon" :title="t('Weibo')">
<Icon icon="ant-design:weibo-outlined" />
</a>
<a href="#" class="social-icon" :title="t('TikTok')">
<Icon icon="tabler:brand-tiktok" />
</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>