<script setup lang="ts">
|
import { computed } from 'vue';
|
import { themeSchemaRecord } from '@/constants/app';
|
import { useThemeStore } from '@/store/modules/theme';
|
import { $t } from '@/locales';
|
import SettingItem from '../../../components/setting-item.vue';
|
|
defineOptions({
|
name: 'ThemeSchema'
|
});
|
|
const themeStore = useThemeStore();
|
|
const icons: Record<UnionKey.ThemeScheme, string> = {
|
light: 'material-symbols:sunny',
|
dark: 'material-symbols:nightlight-rounded',
|
auto: 'material-symbols:hdr-auto'
|
};
|
|
function handleSegmentChange(value: string | number) {
|
themeStore.setThemeScheme(value as UnionKey.ThemeScheme);
|
}
|
|
function handleGrayscaleChange(value: boolean) {
|
themeStore.setGrayscale(value);
|
}
|
|
function handleColourWeaknessChange(value: boolean) {
|
themeStore.setColourWeakness(value);
|
}
|
|
const showSiderInverted = computed(() => !themeStore.darkMode && themeStore.layout.mode.includes('vertical'));
|
</script>
|
|
<template>
|
<NDivider>{{ $t('theme.appearance.themeSchema.title') }}</NDivider>
|
<div class="flex-col-stretch gap-16px">
|
<div class="i-flex-center">
|
<NTabs
|
:key="themeStore.themeScheme"
|
type="segment"
|
size="small"
|
class="relative w-214px"
|
:value="themeStore.themeScheme"
|
@update:value="handleSegmentChange"
|
>
|
<NTab v-for="(_, key) in themeSchemaRecord" :key="key" :name="key">
|
<SvgIcon :icon="icons[key]" class="h-23px text-icon-small" />
|
</NTab>
|
</NTabs>
|
</div>
|
<Transition name="sider-inverted">
|
<SettingItem v-if="showSiderInverted" :label="$t('theme.layout.sider.inverted')">
|
<NSwitch v-model:value="themeStore.sider.inverted" />
|
</SettingItem>
|
</Transition>
|
<SettingItem :label="$t('theme.appearance.grayscale')">
|
<NSwitch :value="themeStore.grayscale" @update:value="handleGrayscaleChange" />
|
</SettingItem>
|
<SettingItem :label="$t('theme.appearance.colourWeakness')">
|
<NSwitch :value="themeStore.colourWeakness" @update:value="handleColourWeaknessChange" />
|
</SettingItem>
|
</div>
|
</template>
|
|
<style scoped>
|
.sider-inverted-enter-active,
|
.sider-inverted-leave-active {
|
--uno: h-22px transition-all-300;
|
}
|
|
.sider-inverted-enter-from,
|
.sider-inverted-leave-to {
|
--uno: translate-x-20px opacity-0 h-0;
|
}
|
</style>
|
