mirror of
https://github.com/XiaoDaiGua-Ray/ray-template.git
synced 2025-04-05 19:42:07 +08:00
96 lines
2.7 KiB
TypeScript
96 lines
2.7 KiB
TypeScript
import { get } from 'lodash-es'
|
||
import {
|
||
setClass,
|
||
removeClass,
|
||
setStyle,
|
||
colorToRgba,
|
||
getStorage,
|
||
} from '@/utils'
|
||
import { useSettingGetters } from '@/store'
|
||
import { APP_CATCH_KEY, THEME_CLASS_NAMES } from '@/app-config'
|
||
import { useWindowSize } from '@vueuse/core'
|
||
|
||
import type { SettingState } from '@/store/modules/setting/types'
|
||
|
||
export default defineComponent({
|
||
name: 'AppStyleProvider',
|
||
setup(_, { expose }) {
|
||
const { getAppTheme } = useSettingGetters()
|
||
const { height, width } = useWindowSize()
|
||
|
||
// 同步主题色变量至 html，如果未获取到缓存值则已默认值填充
|
||
const syncPrimaryColorToBody = () => {
|
||
const {
|
||
appPrimaryColor: { primaryColor, primaryFadeColor },
|
||
} = __APP_CFG__ // 默认主题色
|
||
const html = document.documentElement
|
||
|
||
// 获取缓存 naive ui 配置项
|
||
const primaryColorOverride = getStorage<SettingState>(
|
||
APP_CATCH_KEY.appPiniaSettingStore,
|
||
'localStorage',
|
||
)
|
||
|
||
if (primaryColorOverride) {
|
||
// 获取主色调
|
||
const p = get(
|
||
primaryColorOverride,
|
||
'primaryColorOverride.common.primaryColor',
|
||
primaryColor,
|
||
)
|
||
// 将主色调任意颜色转换为 rgba 格式
|
||
const fp = colorToRgba(p, 0.38)
|
||
|
||
// 设置全局主题色 css 变量
|
||
html.style.setProperty('--ray-theme-primary-color', p) // 主色调
|
||
html.style.setProperty(
|
||
'--ray-theme-primary-fade-color',
|
||
fp || primaryFadeColor,
|
||
) // 降低透明度后的主色调
|
||
}
|
||
}
|
||
|
||
// 隐藏加载动画
|
||
const hiddenLoadingAnimation = () => {
|
||
// pre-loading-animation 是默认 id
|
||
const el = document.getElementById('pre-loading-animation')
|
||
|
||
if (el) {
|
||
setStyle(el, {
|
||
display: 'none',
|
||
})
|
||
}
|
||
}
|
||
|
||
// 切换主题时，同步更新 html class 以便于进行自定义 css 配置
|
||
const updateGlobalThemeClass = (bool: boolean) => {
|
||
const html = document.documentElement
|
||
const { darkClassName, lightClassName } = THEME_CLASS_NAMES
|
||
|
||
bool
|
||
? removeClass(html, lightClassName)
|
||
: removeClass(html, darkClassName)
|
||
|
||
setClass(html, bool ? darkClassName : lightClassName)
|
||
}
|
||
|
||
syncPrimaryColorToBody()
|
||
hiddenLoadingAnimation()
|
||
|
||
watchEffect(() => {
|
||
// 当切换主题时，更新 html 当前的注入 class
|
||
updateGlobalThemeClass(getAppTheme.value)
|
||
// 注入全局宽高尺寸
|
||
setStyle(document.documentElement, {
|
||
'--html-height': `${height.value}px`,
|
||
'--html-width': `${width.value}px`,
|
||
})
|
||
})
|
||
|
||
expose()
|
||
},
|
||
render() {
|
||
return <div class="app-style-provider"></div>
|
||
},
|
||
})
|