mirror of
https://gitee.com/niucloud-team/niucloud-admin.git
synced 2025-12-15 04:02:47 +00:00
126 lines
4.7 KiB
Vue
126 lines
4.7 KiB
Vue
<template>
|
|
<div class="flex w-[100%] h-[100%]" @click="drawer = true">
|
|
<div class="h-[100%] w-[100%] flex items-center justify-center px-[8px]">
|
|
<icon name="element-Setting" />
|
|
</div>
|
|
<el-drawer v-model="drawer" :title="t('layout.layoutSetting')" size="300px">
|
|
<el-scrollbar>
|
|
<div class="setting-item flex items-baseline justify-between mb-[10px]">
|
|
<div class="title text-base text-tx-secondary whitespace-nowrap">{{ t('layout.sidebarStyle') }}</div>
|
|
<div class="">
|
|
<el-radio-group v-model="sidebarStyle" class="ml-4">
|
|
<el-radio label="oneType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/one_type.png" alt="">
|
|
</el-radio>
|
|
<el-radio label="twoType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/two_type.png" alt="">
|
|
</el-radio>
|
|
<el-radio label="threeType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/three_type.png" alt="">
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div>
|
|
<!-- 风格切换 -->
|
|
<!-- <div class="setting-item flex items-baseline justify-between mb-[10px]">
|
|
<div class="title text-base text-tx-secondary whitespace-nowrap">{{ t('layout.sidebarMode') }}</div>
|
|
<div class="">
|
|
<el-radio-group v-model="sidebar" class="ml-4">
|
|
<el-radio label="oneType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/one_type.png" alt="">
|
|
</el-radio>
|
|
<el-radio label="twoType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/two_type.png" alt="">
|
|
</el-radio>
|
|
<el-radio label="threeType" size="large">
|
|
<img class="w-[35px] h-[35px]" src="@/app/assets/images/three_type.png" alt="">
|
|
</el-radio>
|
|
</el-radio-group>
|
|
</div>
|
|
</div> -->
|
|
<!-- 黑暗模式 -->
|
|
<div class="setting-item flex items-center justify-between mb-[10px]">
|
|
<div class="title text-base text-tx-secondary">{{ t('layout.darkMode') }}</div>
|
|
<div class="">
|
|
<el-switch v-model="dark" :active-value="true" :inactive-value="false" />
|
|
</div>
|
|
</div>
|
|
<!-- 主题颜色 -->
|
|
<div class="setting-item flex items-center justify-between mb-[10px]">
|
|
<div class="title text-base text-tx-secondary">{{ t('layout.themeColor') }}</div>
|
|
<div class="">
|
|
<el-color-picker v-model="theme" />
|
|
</div>
|
|
</div>
|
|
</el-scrollbar>
|
|
</el-drawer>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, computed } from 'vue'
|
|
import useSystemStore from '@/stores/modules/system'
|
|
import { useDark, useToggle } from '@vueuse/core'
|
|
import { setThemeColor } from '@/utils/common'
|
|
import { t } from '@/lang'
|
|
|
|
const drawer = ref(false)
|
|
const systemStore = useSystemStore()
|
|
|
|
const isDark = useDark()
|
|
const toggleDark = useToggle(isDark)
|
|
|
|
const dark = computed({
|
|
get() {
|
|
return systemStore.dark
|
|
},
|
|
set(val) {
|
|
systemStore.setTheme('dark', val)
|
|
toggleDark(val)
|
|
setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
|
|
}
|
|
})
|
|
|
|
const sidebar = computed({
|
|
get() {
|
|
return systemStore.sidebar
|
|
},
|
|
set(val) {
|
|
systemStore.setTheme('sidebar', val)
|
|
setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
|
|
}
|
|
})
|
|
|
|
|
|
const sidebarStyle = computed({
|
|
get() {
|
|
return systemStore.sidebarStyle
|
|
},
|
|
set(val) {
|
|
systemStore.setTheme('sidebarStyle', val)
|
|
}
|
|
})
|
|
|
|
const theme = computed({
|
|
get() {
|
|
return systemStore.theme
|
|
},
|
|
set(val) {
|
|
systemStore.setTheme('theme', val)
|
|
setThemeColor(systemStore.theme, systemStore.dark ? 'dark' : 'light')
|
|
}
|
|
})
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
:deep(.el-drawer__header) {
|
|
margin-bottom: 0 !important;
|
|
}
|
|
|
|
.layout-style {
|
|
&>div:nth-child(2n+2) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|