#前端

zhou zhou

4 小时以前 fec285d150b377d004e47f0973d298b92fe4c711

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
import { useSettingStore } from '@/store/modules/setting'
function getCssVar(name) {
  return getComputedStyle(document.documentElement).getPropertyValue(name)
}
function isValidHexColor(hex) {
  const cleanHex = hex.trim().replace(/^#/, '')
  return /^[0-9A-Fa-f]{3}$|^[0-9A-Fa-f]{6}$/.test(cleanHex)
}
function isValidRgbValue(r, g, b) {
  const isValid = (value) => Number.isInteger(value) && value >= 0 && value <= 255
  return isValid(r) && isValid(g) && isValid(b)
}
function hexToRgba(hex, opacity) {
  if (!isValidHexColor(hex)) {
    throw new Error('Invalid hex color format')
  }
  let cleanHex = hex.trim().replace(/^#/, '').toUpperCase()
  if (cleanHex.length === 3) {
    cleanHex = cleanHex
      .split('')
      .map((char) => char.repeat(2))
      .join('')
  }
  const [red, green, blue] = cleanHex.match(/\w\w/g).map((x) => parseInt(x, 16))
  const validOpacity = Math.max(0, Math.min(1, opacity))
  const rgba = `rgba(${red}, ${green}, ${blue}, ${validOpacity.toFixed(2)})`
  return { red, green, blue, rgba }
}
function hexToRgb(hexColor) {
  if (!isValidHexColor(hexColor)) {
    ElMessage.warning('输入错误的hex颜色值')
    throw new Error('Invalid hex color format')
  }
  const cleanHex = hexColor.replace(/^#/, '')
  let hex = cleanHex
  if (hex.length === 3) {
    hex = hex
      .split('')
      .map((char) => char.repeat(2))
      .join('')
  }
  const hexPairs = hex.match(/../g)
  if (!hexPairs) {
    throw new Error('Invalid hex color format')
  }
  return hexPairs.map((hexPair) => parseInt(hexPair, 16))
}
function rgbToHex(r, g, b) {
  if (!isValidRgbValue(r, g, b)) {
    ElMessage.warning('输入错误的RGB颜色值')
    throw new Error('Invalid RGB color values')
  }
  const toHex = (value) => {
    const hex = value.toString(16)
    return hex.length === 1 ? `0${hex}` : hex
  }
  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
}
function colourBlend(color1, color2, ratio) {
  const validRatio = Math.max(0, Math.min(1, Number(ratio)))
  const rgb1 = hexToRgb(color1)
  const rgb2 = hexToRgb(color2)
  const blendedRgb = rgb1.map((value1, index) => {
    const value2 = rgb2[index]
    return Math.round(value1 * (1 - validRatio) + value2 * validRatio)
  })
  return rgbToHex(blendedRgb[0], blendedRgb[1], blendedRgb[2])
}
function getLightColor(color, level, isDark = false) {
  if (!isValidHexColor(color)) {
    ElMessage.warning('输入错误的hex颜色值')
    throw new Error('Invalid hex color format')
  }
  if (isDark) {
    return getDarkColor(color, level)
  }
  const rgb = hexToRgb(color)
  const lightRgb = rgb.map((value) => Math.floor((255 - value) * level + value))
  return rgbToHex(lightRgb[0], lightRgb[1], lightRgb[2])
}
function getDarkColor(color, level) {
  if (!isValidHexColor(color)) {
    ElMessage.warning('输入错误的hex颜色值')
    throw new Error('Invalid hex color format')
  }
  const rgb = hexToRgb(color)
  const darkRgb = rgb.map((value) => Math.floor(value * (1 - level)))
  return rgbToHex(darkRgb[0], darkRgb[1], darkRgb[2])
}
function handleElementThemeColor(theme, isDark = false) {
  document.documentElement.style.setProperty('--el-color-primary', theme)
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-light-${i}`,
      getLightColor(theme, i / 10, isDark)
    )
  }
  for (let i = 1; i <= 9; i++) {
    document.documentElement.style.setProperty(
      `--el-color-primary-dark-${i}`,
      getDarkColor(theme, i / 10)
    )
  }
}
function setElementThemeColor(color) {
  const mixColor = '#ffffff'
  const elStyle = document.documentElement.style
  elStyle.setProperty('--el-color-primary', color)
  handleElementThemeColor(color, useSettingStore().isDark)
  for (let i = 1; i < 16; i++) {
    const itemColor = colourBlend(color, mixColor, i / 16)
    elStyle.setProperty(`--el-color-primary-custom-${i}`, itemColor)
  }
}
export {
  colourBlend,
  getCssVar,
  getDarkColor,
  getLightColor,
  handleElementThemeColor,
  hexToRgb,
  hexToRgba,
  rgbToHex,
  setElementThemeColor
}