框架重构

frame
lijingjia 3 days ago
parent b98bc30c41
commit 1a5d39a9c6

@ -4,41 +4,65 @@
* @Date: 2024-05-13 09:06:51
-->
<template>
<div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
<!-- <div v-if="getShowDarkModeToggle" :class="getClass" @click="toggleDarkMode">
<div :class="`${prefixCls}-inner`"></div>
<SvgIcon size="14" name="sun" />
<SvgIcon size="14" name="moon" />
</div> -->
<div>
<a-radio-group v-model:value="themeValue" button-style="solid">
<a-radio-button value="black">主题1</a-radio-button>
<a-radio-button value="blue">主题2</a-radio-button>
<a-radio-button value="white">主题3</a-radio-button>
</a-radio-group>
</div>
</template>
<script lang="ts" setup>
import { computed, unref } from 'vue'
import { SvgIcon } from '/@/components/Icon'
import { useDesign } from '/@/hooks/web/useDesign'
import { ref, watch } from 'vue'
// import { SvgIcon } from '/@/components/Icon'
// import { useDesign } from '/@/hooks/web/useDesign'
import { useRootSetting } from '/@/hooks/setting/useRootSetting'
import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'
import { updateDarkTheme } from '/@/logics/theme/dark'
import { ThemeEnum } from '/@/enums/appEnum'
// import { updateHeaderBgColor, updateSidebarBgColor } from '/@/logics/theme/updateBackground'
// import { updateDarkTheme } from '/@/logics/theme/dark'
import { baseHandler } from '/@/layouts/default/setting/handler'
// import { ThemeEnum } from '/@/enums/appEnum'
const { prefixCls } = useDesign('dark-switch')
const { getDarkMode, setDarkMode, getShowDarkModeToggle } = useRootSetting()
const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK)
const getClass = computed(() => [
prefixCls,
{
[`${prefixCls}--dark`]: unref(isDark),
},
])
function toggleDarkMode() {
console.log(getDarkMode)
const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
setDarkMode(darkMode)
updateDarkTheme(darkMode)
updateHeaderBgColor()
updateSidebarBgColor()
}
// const { prefixCls } = useDesign('dark-switch')
// console.log(prefixCls)
const { getDarkMode, setDarkMode } = useRootSetting()
//
const themeValue = ref(getDarkMode.value)
// const isDark = computed(() => getDarkMode.value === ThemeEnum.DARK)
// const getClass = computed(() => [
// prefixCls,
// {
// [`${prefixCls}--dark`]: unref(isDark),
// },
// ])
watch(
() => themeValue.value,
(v) => {
if (v == 'black') {
baseHandler(11, '#121826')
baseHandler(18, '#121826')
} else if (v == 'blue') {
baseHandler(11, '#275ECC')
baseHandler(18, '#275ECC')
} else {
baseHandler(11, '#FFFFFF')
baseHandler(18, '#FFFFFF')
}
setDarkMode(v)
}
)
// function toggleDarkMode() {
// console.log(getDarkMode)
// const darkMode = getDarkMode.value === ThemeEnum.DARK ? ThemeEnum.LIGHT : ThemeEnum.DARK
// setDarkMode(darkMode)
// updateDarkTheme(darkMode)
// updateHeaderBgColor()
// updateSidebarBgColor()
// }
</script>
<style lang="less" scoped>
@prefix-cls: ~'@{namespace}-dark-switch';

@ -379,9 +379,9 @@ export default defineComponent({
class="setting-drawer"
>
{unref(getShowDarkModeToggle) && <Divider>{() => t('layout.setting.sysTheme')}</Divider>}
{/* {unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />} */}
{unref(getShowDarkModeToggle) && <AppDarkModeToggle class="mx-auto" />}
{/* <Divider>{() => t('layout.setting.sysTheme')}</Divider> */}
{renderMainTheme()}
{/* {renderMainTheme()} */}
{/* <Divider>{() => t('layout.setting.headerTheme')}</Divider>
{renderHeaderTheme()}
<Divider>{() => t('layout.setting.sidebarTheme')}</Divider>

@ -1,3 +1,8 @@
/*
* @Desc:
* @Author: lijj
* @Date: 2024-05-13 09:06:51
*/
/**
* Application configuration
*/
@ -51,13 +56,23 @@ export function initAppConfigStore() {
// init dark mode
updateDarkTheme(darkMode)
if (darkMode === ThemeEnum.DARK) {
updateHeaderBgColor()
updateSidebarBgColor()
if (darkMode === 'black') {
updateHeaderBgColor('#121826')
updateSidebarBgColor('#121826')
} else if (darkMode === 'blue') {
updateHeaderBgColor('#275ECC')
updateSidebarBgColor('#275ECC')
} else {
headerBgColor && updateHeaderBgColor(headerBgColor)
bgColor && updateSidebarBgColor(bgColor)
updateHeaderBgColor('#ffffff')
updateSidebarBgColor('#ffffff')
}
// if (darkMode === ThemeEnum.DARK) {
// updateHeaderBgColor()
// updateSidebarBgColor()
// } else {
// headerBgColor && updateHeaderBgColor(headerBgColor)
// bgColor && updateSidebarBgColor(bgColor)
// }
// init store
localeStore.initLocale()

Loading…
Cancel
Save