mirror of
https://github.com/chansee97/nova-admin.git
synced 2025-04-06 03:57:54 +08:00
113 lines
3.7 KiB
Vue
113 lines
3.7 KiB
Vue
<script setup lang="ts">
|
|
import { ref } from 'vue'
|
|
import HeaderButton from '../common/HeaderButton.vue'
|
|
import { useAppStore } from '@/store'
|
|
const appStore = useAppStore()
|
|
|
|
const drawerActive = ref(false)
|
|
const openSetting = () => {
|
|
drawerActive.value = !drawerActive.value
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<n-tooltip
|
|
placement="bottom"
|
|
trigger="hover"
|
|
>
|
|
<template #trigger>
|
|
<HeaderButton @click="openSetting">
|
|
<div>
|
|
<i-icon-park-outline-setting-two />
|
|
<n-drawer
|
|
v-model:show="drawerActive"
|
|
:width="300"
|
|
>
|
|
<n-drawer-content title="系统设置">
|
|
<n-divider>主题设置</n-divider>
|
|
<n-space vertical>
|
|
<n-space justify="space-between">
|
|
深色模式
|
|
<n-switch
|
|
:value="appStore.darkMode"
|
|
@update:value="appStore.toggleDarkMode()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
色弱模式
|
|
<n-switch
|
|
:value="appStore.colorWeak"
|
|
@update:value="appStore.toggleColorWeak()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
灰色模式
|
|
<n-switch
|
|
:value="appStore.grayMode"
|
|
@update:value="appStore.toggleGrayMode()"
|
|
/>
|
|
</n-space>
|
|
</n-space>
|
|
<n-divider>界面显示</n-divider>
|
|
<n-space vertical>
|
|
<n-space justify="space-between">
|
|
LOGO显示
|
|
<n-switch
|
|
:value="appStore.showLogo"
|
|
@update:value="appStore.toggleShowLogo()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
多页签
|
|
<n-switch
|
|
:value="appStore.showTabs"
|
|
@update:value="appStore.toggleShowTabs()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
面包屑
|
|
<n-switch
|
|
:value="appStore.showBreadcrumb"
|
|
@update:value="appStore.toggleShowBreadcrumb()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
固定头部和多页签
|
|
<n-switch
|
|
:value="appStore.fixedHeader"
|
|
@update:value="appStore.toggleFixedHeader()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
侧边栏反转色
|
|
<n-switch
|
|
:value="appStore.invertedSider"
|
|
@update:value="appStore.toggleInvertedSider()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
头部反转色
|
|
<n-switch
|
|
:value="appStore.invertedHeader"
|
|
@update:value="appStore.toggleInvertedHeader()"
|
|
/>
|
|
</n-space>
|
|
<n-space justify="space-between">
|
|
水印
|
|
<n-switch
|
|
:value="appStore.showWatermark"
|
|
@update:value="appStore.toggleShowWatermark()"
|
|
/>
|
|
</n-space>
|
|
</n-space>
|
|
</n-drawer-content>
|
|
</n-drawer>
|
|
</div>
|
|
</HeaderButton>
|
|
</template>
|
|
<span>设置</span>
|
|
</n-tooltip>
|
|
</template>
|
|
|
|
<style scoped></style>
|