96 lines
2.4 KiB
Vue
96 lines
2.4 KiB
Vue
<script setup lang="ts">
|
|
import type { LocaleObject } from '@nuxtjs/i18n'
|
|
import type { PickerColumn } from 'vant'
|
|
import type { ComputedRef } from 'vue'
|
|
import { Locale } from 'vant'
|
|
|
|
definePageMeta({
|
|
layout: 'default',
|
|
title: '主页',
|
|
i18n: 'menu.home',
|
|
})
|
|
|
|
const color = useColorMode()
|
|
|
|
useHead({
|
|
meta: [{
|
|
id: 'theme-color',
|
|
name: 'theme-color',
|
|
content: () => color.value === 'dark' ? '#222222' : '#ffffff',
|
|
}],
|
|
})
|
|
|
|
const checked = computed({
|
|
get: () => color.value === 'dark',
|
|
set: (val: boolean) => {
|
|
color.preference = val ? 'dark' : 'light'
|
|
},
|
|
})
|
|
|
|
const { setLocale, t } = useI18n()
|
|
const i18n = useNuxtApp().$i18n
|
|
|
|
const showLanguagePicker = ref(false)
|
|
|
|
const languageValues = ref<string[]>([i18n.locale.value])
|
|
|
|
const { locales } = useI18n() as { locales: ComputedRef<LocaleObject[]> }
|
|
|
|
const menus = computed(() => [
|
|
{ title: t('menu.unocssExample'), route: 'unocss' },
|
|
{ title: t('menu.keepAlive'), route: 'keepalive' },
|
|
{ title: t('menu.persistPiniaState'), route: 'counter' },
|
|
{ title: t('menu.fetch'), route: 'prose' },
|
|
{ title: t('menu.404Demo'), route: 'unknown' },
|
|
])
|
|
|
|
function onLanguageConfirm(event: { selectedOptions: PickerColumn }) {
|
|
const lang = event.selectedOptions[0]?.code
|
|
|
|
setLocale(lang)
|
|
Locale.use(lang)
|
|
localStorage.setItem('lang', lang)
|
|
|
|
showLanguagePicker.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<VanCellGroup inset>
|
|
<VanCell :title="$t('menu.darkMode')" center>
|
|
<template #right-icon>
|
|
<ClientOnly>
|
|
<VanSwitch
|
|
v-model="checked"
|
|
size="20px"
|
|
aria-label="on/off Dark Mode"
|
|
/>
|
|
</ClientOnly>
|
|
</template>
|
|
</VanCell>
|
|
|
|
<VanCell
|
|
:title="$t('menu.language')"
|
|
:value="locales.find(i => i.code === i18n.locale.value)?.name"
|
|
is-link
|
|
@click="showLanguagePicker = true"
|
|
/>
|
|
|
|
<template v-for="item in menus" :key="item.route">
|
|
<VanCell :title="item.title" :to="item.route" is-link />
|
|
</template>
|
|
</VanCellGroup>
|
|
|
|
<van-popup v-model:show="showLanguagePicker" position="bottom">
|
|
<van-picker
|
|
v-model="languageValues"
|
|
:columns="locales"
|
|
:columns-field-names="{ text: 'name', value: 'code' }"
|
|
@confirm="onLanguageConfirm"
|
|
@cancel="showLanguagePicker = false"
|
|
/>
|
|
</van-popup>
|
|
</div>
|
|
</template>
|