uniapp-starter/src/composables/useTheme.ts at main · IceyWu/uniapp-starter · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
/**
 * 主题配置 - 基于 wot-design-uni
 * 文档: https://wot-design-uni.netlify.app/component/config-provider.html
 */
import type { ConfigProviderThemeVars } from 'wot-design-uni'

import type { ThemeColors } from '@/config/theme'
import { defaultThemeColors, fetchThemeColors } from '@/config/theme'

// 存储键名
const THEME_STORAGE_KEY = 'app-theme-colors'

// 从本地存储读取主题色
function getStoredThemeColors(): ThemeColors | null {
  try {
    const stored = uni.getStorageSync(THEME_STORAGE_KEY)
    return stored ? JSON.parse(stored) : null
  } catch (error) {
    console.error('读取主题色失败:', error)
    return null
  }
}

// 保存主题色到本地存储
function saveThemeColors(colors: ThemeColors) {
  try {
    uni.setStorageSync(THEME_STORAGE_KEY, JSON.stringify(colors))
  } catch (error) {
    console.error('保存主题色失败:', error)
  }
}

// 主题色 - 优先使用本地存储的值
const themeColors = ref<ThemeColors>(
  getStoredThemeColors() || defaultThemeColors
)

// 主题变量
const themeVars = computed<ConfigProviderThemeVars>(() => ({
  colorTheme: themeColors.value.primary,
  colorSuccess: themeColors.value.success,
  colorWarning: themeColors.value.warning,
  colorDanger: themeColors.value.danger,
  colorInfo: themeColors.value.info,
}))

/**
 * 计算主题辅助色（浅色变体）
 * 用于背景、悬停等场景
 */
const themeVarsExtended = computed(() => {
  /**
   * 将 hex 颜色转换为 rgba 格式
   */
  function hexToRgba(hex: string, alpha: number): string {
    // 移除 # 号
    const cleanHex = hex.replace('#', '')

    // 处理 3 位和 6 位 hex
    let r: number, g: number, b: number
    if (cleanHex.length === 3) {
      r = Number.parseInt(cleanHex[0] + cleanHex[0], 16)
      g = Number.parseInt(cleanHex[1] + cleanHex[1], 16)
      b = Number.parseInt(cleanHex[2] + cleanHex[2], 16)
    } else {
      r = Number.parseInt(cleanHex.substring(0, 2), 16)
      g = Number.parseInt(cleanHex.substring(2, 4), 16)
      b = Number.parseInt(cleanHex.substring(4, 6), 16)
    }

    return `rgba(${r}, ${g}, ${b}, ${alpha})`
  }

  return {
    // 主色及其变体
    primary: themeColors.value.primary,
    primaryLight: hexToRgba(themeColors.value.primary, 0.1),
    primaryLighter: hexToRgba(themeColors.value.primary, 0.05),
    primaryShadow: hexToRgba(themeColors.value.primary, 0.4),

    // 成功色及其变体
    success: themeColors.value.success,
    successLight: hexToRgba(themeColors.value.success, 0.1),

    // 警告色及其变体
    warning: themeColors.value.warning,
    warningLight: hexToRgba(themeColors.value.warning, 0.1),

    // 危险色及其变体
    danger: themeColors.value.danger,
    dangerLight: hexToRgba(themeColors.value.danger, 0.1),

    // 信息色及其变体
    info: themeColors.value.info,
    infoLight: hexToRgba(themeColors.value.info, 0.1),
  }
})

/**
 * 初始化主题色（从服务端获取）
 */
export async function initThemeColors() {
  // 先尝试从服务端获取
  const colors = await fetchThemeColors()
  if (colors) {
    themeColors.value = colors
    saveThemeColors(colors)
  }
  // 如果服务端没有返回，但本地也没有存储，则保存默认主题色
  else if (!getStoredThemeColors()) {
    saveThemeColors(themeColors.value)
  }
}

/**
 * 使用主题配置
 */
export function useTheme() {
  /**
   * 更新主题色
   */
  function updateThemeColors(colors: Partial<ThemeColors>) {
    themeColors.value = { ...themeColors.value, ...colors }
    // 保存到本地存储
    saveThemeColors(themeColors.value)
  }

  return {
    themeVars,
    themeColors: computed(() => themeColors.value),
    themeVarsExtended,
    updateThemeColors,
    initThemeColors,
  }
}