72 lines
1.4 KiB
Vue
72 lines
1.4 KiB
Vue
|
<script setup>
|
||
|
|
import {ref} from 'vue'
|
||
|
|
import { useI18n } from 'vue-i18n'
|
||
|
|
import { NConfigProvider, NDropdown } from 'naive-ui'
|
||
|
|
import AppHeader from '@/components/AppHeader.vue'
|
||
|
|
const { locale } = useI18n()
|
||
|
|
const primaryColor=ref('#2B69A1')
|
||
|
|
const themeOverrides = ref({
|
||
|
|
common: {
|
||
|
|
primaryColorPressed: primaryColor,
|
||
|
|
primaryHover:primaryColor,
|
||
|
|
primaryDefault: primaryColor,
|
||
|
|
primaryActive: primaryColor,
|
||
|
|
primarySuppl: primaryColor,
|
||
|
|
primaryColor: primaryColor,
|
||
|
|
primaryColorHover: primaryColor
|
||
|
|
}
|
||
|
|
})
|
||
|
|
|
||
|
|
const languageOptions = [
|
||
|
|
{
|
||
|
|
label: '简体中文',
|
||
|
|
key: 'zh'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '繁體中文',
|
||
|
|
key: 'zh-TW'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: 'English',
|
||
|
|
key: 'en'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
label: '日本語',
|
||
|
|
key: 'ja'
|
||
|
|
}
|
||
|
|
]
|
||
|
|
|
||
|
|
const handleLanguageChange = (key) => {
|
||
|
|
locale.value = key
|
||
|
|
localStorage.setItem('language', key)
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<template>
|
||
|
|
<n-config-provider :theme-overrides="themeOverrides">
|
||
|
|
|
||
|
|
<!-- <n-dropdown
|
||
|
|
trigger="hover"
|
||
|
|
:options="languageOptions"
|
||
|
|
@select="handleLanguageChange"
|
||
|
|
class="lang-switch"
|
||
|
|
>
|
||
|
|
<div class="lang-text">
|
||
|
|
{{ languageOptions.find(opt => opt.key === locale)?.label }}
|
||
|
|
</div>
|
||
|
|
</n-dropdown> -->
|
||
|
|
<router-view />
|
||
|
|
</n-config-provider>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<style>
|
||
|
|
|
||
|
|
.lang-text {
|
||
|
|
padding: 5px 10px;
|
||
|
|
border-radius: 4px;
|
||
|
|
background: #fff;
|
||
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
</style>
|