72 lines
2.4 KiB
Vue
72 lines
2.4 KiB
Vue
<template>
|
||
<button class="language-switcher" @click="toggleLanguage" :title="currentLanguage === 'zh' ? '切换到英文' : 'Switch to Chinese'">
|
||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none">
|
||
<path d="M4.16602 12.4998V14.1665C4.16602 15.0452 4.84592 15.765 5.7083 15.8286L5.83268 15.8332H8.33268V17.4998H5.83268C3.99173 17.4998 2.49935 16.0074 2.49935 14.1665V12.4998H4.16602ZM14.9993 8.33317L18.666 17.4998H16.8702L15.8694 14.9998H12.461L11.4618 17.4998H9.66685L13.3327 8.33317H14.9993ZM14.166 10.7375L13.1268 13.3332H15.2035L14.166 10.7375ZM6.66602 1.6665V3.33317H9.99935V9.1665H6.66602V11.6665H4.99935V9.1665H1.66602V3.33317H4.99935V1.6665H6.66602ZM14.166 2.49984C16.0069 2.49984 17.4993 3.99222 17.4993 5.83317V7.49984H15.8327V5.83317C15.8327 4.9127 15.0865 4.1665 14.166 4.1665H11.666V2.49984H14.166ZM4.99935 4.99984H3.33268V7.49984H4.99935V4.99984ZM8.33268 4.99984H6.66602V7.49984H8.33268V4.99984Z" fill="currentColor"/>
|
||
</svg>
|
||
<span class="lang-text">{{ currentLanguage === 'zh' ? '中' : 'EN' }}</span>
|
||
</button>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { computed } from 'vue'
|
||
import { useI18n } from 'vue-i18n'
|
||
|
||
const { locale } = useI18n()
|
||
|
||
const currentLanguage = computed(() => locale.value)
|
||
|
||
const toggleLanguage = () => {
|
||
console.log('[LanguageSwitcher] 当前语言:', locale.value)
|
||
|
||
// 切换语言
|
||
const newLang = locale.value === 'zh' ? 'en' : 'zh'
|
||
console.log('[LanguageSwitcher] 切换到:', newLang)
|
||
|
||
// 直接更新 locale（响应式切换）
|
||
locale.value = newLang
|
||
|
||
// 保存到 localStorage 以便下次刷新时使用
|
||
localStorage.setItem('language', newLang)
|
||
console.log('[LanguageSwitcher] localStorage 已保存:', localStorage.getItem('language'))
|
||
console.log('[LanguageSwitcher] 语言切换完成（无刷新）')
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.language-switcher {
|
||
height: 36px;
|
||
padding: 0 12px;
|
||
border-radius: 18px;
|
||
background: rgba(255, 255, 255, 0.12);
|
||
display: inline-flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
gap: 6px;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: all 0.2s ease;
|
||
color: white;
|
||
}
|
||
|
||
.language-switcher:hover {
|
||
background: rgba(255, 255, 255, 0.2);
|
||
transform: scale(1.05);
|
||
}
|
||
|
||
.language-switcher:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.language-switcher svg {
|
||
width: 20px;
|
||
height: 20px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.lang-text {
|
||
font-size: 13px;
|
||
font-weight: 500;
|
||
letter-spacing: 0.5px;
|
||
}
|
||
</style>
|