import type { ThemeColorOption, ThemeMode } from '@/composables/types/theme'
|
import { themeColorOptions } from '@/composables/types/theme'
|
|
/**
|
* 完整版主题管理组合式API
|
*
|
* 功能特性：
|
* - 支持手动切换暗黑模式
|
* - 支持主题色选择
|
* - 支持跟随系统主题
|
* - 自动同步导航栏颜色
|
* - 持久化用户设置
|
*
|
* 适用场景：
|
* - 需要用户手动控制主题的应用
|
* - 需要主题色自定义的应用
|
* - 需要完整主题管理功能的复杂应用
|
*
|
* @example
|
* ```vue
|
* <script setup>
|
* import { useManualTheme } from '@/composables/useManualTheme'
|
*
|
* const {
|
* theme,
|
* isDark,
|
* toggleTheme,
|
* openThemeColorPicker,
|
* currentThemeColor,
|
* themeVars
|
* } = useManualTheme()
|
* </script>
|
*
|
* <template>
|
* <wd-config-provider :theme-vars="themeVars">
|
* <view :class="{ 'dark-mode': isDark }">
|
* <wd-button @click="toggleTheme">切换主题</wd-button>
|
* <wd-button @click="openThemeColorPicker">选择主题色</wd-button>
|
* </view>
|
* </wd-config-provider>
|
* </template>
|
* ```
|
*/
|
export function useManualTheme() {
|
const store = useManualThemeStore()
|
const showThemeColorSheet = ref(false)
|
|
/**
|
* 切换暗黑模式
|
* @param mode 指定主题模式，不传则自动切换
|
* @param isFollw 是否跟随系统
|
*/
|
function toggleTheme(mode?: ThemeMode, isFollw: boolean = false) {
|
store.toggleTheme(mode, isFollw)
|
}
|
|
/**
|
* 打开主题色选择器
|
*/
|
function openThemeColorPicker() {
|
showThemeColorSheet.value = true
|
}
|
|
/**
|
* 关闭主题色选择器
|
*/
|
function closeThemeColorPicker() {
|
showThemeColorSheet.value = false
|
}
|
|
/**
|
* 选择主题色
|
* @param option 主题色选项
|
*/
|
function selectThemeColor(option: ThemeColorOption) {
|
store.setCurrentThemeColor(option)
|
closeThemeColorPicker()
|
}
|
|
/**
|
* 初始化主题
|
*/
|
function initTheme() {
|
store.initTheme()
|
}
|
|
// 组件挂载前初始化主题
|
onBeforeMount(() => {
|
initTheme()
|
|
// 监听系统主题变化
|
if (typeof uni !== 'undefined' && uni.onThemeChange) {
|
uni.onThemeChange((res) => {
|
if (store.followSystem) {
|
toggleTheme(res.theme as ThemeMode, true)
|
}
|
})
|
}
|
})
|
|
// 页面显示时更新导航栏颜色，确保每次切换页面时导航栏颜色都是正确的
|
onShow(() => {
|
store.setNavigationBarColor()
|
})
|
|
// 组件卸载时清理监听
|
onUnmounted(() => {
|
if (typeof uni !== 'undefined' && uni.offThemeChange) {
|
uni.offThemeChange((res) => {
|
if (store.followSystem) {
|
toggleTheme(res.theme as ThemeMode, true)
|
}
|
})
|
}
|
})
|
|
return {
|
// 状态
|
theme: computed(() => store.theme),
|
isDark: computed(() => store.isDark),
|
followSystem: computed(() => store.followSystem),
|
hasUserSet: computed(() => store.hasUserSet),
|
currentThemeColor: computed(() => store.currentThemeColor),
|
themeVars: computed(() => store.themeVars),
|
showThemeColorSheet,
|
|
// 常量
|
themeColorOptions,
|
|
// 方法
|
initTheme,
|
toggleTheme,
|
setFollowSystem: store.setFollowSystem,
|
openThemeColorPicker,
|
closeThemeColorPicker,
|
selectThemeColor,
|
}
|
}
|
|
// 导出类型和常量供外部使用
|
export type { ThemeColorOption, ThemeMode }
|
export { themeColorOptions }
|
