797c42aea1
- 调整App.vue和所有通用组件为template→script→style顺序 - 涉及NovaDialog、UserCenter、IconSelect等核心组件 - 统一组件结构，提升代码可读性和维护性 - 符合项目新的Vue组件代码块排布规范
53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<n-popselect :value="appStore.storeColorMode" :render-label="renderLabel" :options="options" trigger="click" @update:value="appStore.setColorMode">
|
|
<CommonWrapper>
|
|
<icon-park-outline-moon v-if="appStore.storeColorMode === 'dark'" />
|
|
<icon-park-outline-sun-one v-if="appStore.storeColorMode === 'light'" />
|
|
<icon-park-outline-laptop-computer v-if="appStore.storeColorMode === 'auto'" />
|
|
</CommonWrapper>
|
|
</n-popselect>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useAppStore } from '@/store'
|
|
import IconAuto from '~icons/icon-park-outline/laptop-computer'
|
|
import IconMoon from '~icons/icon-park-outline/moon'
|
|
import IconSun from '~icons/icon-park-outline/sun-one'
|
|
import { NFlex } from 'naive-ui'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const appStore = useAppStore()
|
|
|
|
const options = computed(() => {
|
|
return [
|
|
{
|
|
label: t('app.light'),
|
|
value: 'light',
|
|
icon: IconSun,
|
|
},
|
|
{
|
|
label: t('app.dark'),
|
|
value: 'dark',
|
|
icon: IconMoon,
|
|
},
|
|
{
|
|
label: t('app.system'),
|
|
value: 'auto',
|
|
icon: IconAuto,
|
|
},
|
|
]
|
|
})
|
|
|
|
function renderLabel(option: any) {
|
|
return h(NFlex, { align: 'center' }, {
|
|
default: () => [
|
|
h(option.icon),
|
|
option.label,
|
|
],
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style scoped></style>
|