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 }