You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
59 lines
1.7 KiB
Vue
59 lines
1.7 KiB
Vue
<script setup lang="ts">
|
|
import ThemeColorPicker from './theme-color-picker.vue'
|
|
import SwitchItem from './switch-item.vue'
|
|
import { APP_PRESET_COLOR_LIST, HEADER_PRESET_BG_COLOR_LIST, ThemeChangeEnum } from '~/constants'
|
|
|
|
const { getHeaderBgColor } = useHeaderSetting()
|
|
const {
|
|
primaryColor,
|
|
infoColor,
|
|
successColor,
|
|
warningColor,
|
|
errorColor,
|
|
isSidebarDark,
|
|
toggleSidebarTheme,
|
|
} = useAppTheme()
|
|
</script>
|
|
|
|
<template>
|
|
<NSpace justify="space-between" align="center">
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.primaryColor')"
|
|
:def="primaryColor"
|
|
:event="ThemeChangeEnum.THEME_PRIMARY_COLOR_CHANGE"
|
|
:color-list="APP_PRESET_COLOR_LIST"
|
|
/>
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.infoColor')"
|
|
:def="infoColor"
|
|
:event="ThemeChangeEnum.THEME_INFO_COLOR_CHANGE"
|
|
/>
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.successColor')"
|
|
:def="successColor"
|
|
:event="ThemeChangeEnum.THEME_SUCCESS_COLOR_CHANGE"
|
|
/>
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.warningColor')"
|
|
:def="warningColor"
|
|
:event="ThemeChangeEnum.THEME_WARNING_COLOR_CHANGE"
|
|
/>
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.errorColor')"
|
|
:def="errorColor"
|
|
:event="ThemeChangeEnum.THEME_ERROR_COLOR_CHANGE"
|
|
/>
|
|
<ThemeColorPicker
|
|
:title="$t('layout.setting.headerTheme')"
|
|
:def="getHeaderBgColor"
|
|
:event="ThemeChangeEnum.THEME_HEADER_BG_COLOR_CHANGE"
|
|
:color-list="HEADER_PRESET_BG_COLOR_LIST"
|
|
/>
|
|
<SwitchItem
|
|
:title="$t('layout.setting.sidebarDark')"
|
|
:value="isSidebarDark"
|
|
:callback="toggleSidebarTheme"
|
|
/>
|
|
</NSpace>
|
|
</template>
|