// 主题工具函数 import { themeConfig } from '@/sheep/config/theme'; /** * 获取主题色 * @param {string} type - 主题色类型 'main' | 'light' | 'dark' * @returns {string} 颜色值 */ export function getThemeColor(type = 'main') { return themeConfig.primary[type] || themeConfig.primary.main; } /** * 获取主题色透明度版本 * @param {number} opacity - 透明度 1-5 * @returns {string} rgba颜色值 */ export function getThemeColorWithOpacity(opacity = 1) { return themeConfig.primary.opacity[opacity] || themeConfig.primary.opacity[1]; } /** * 获取语义化颜色 * @param {string} type - 颜色类型 'success' | 'warning' | 'danger' | 'info' * @returns {string} 颜色值 */ export function getSemanticColor(type) { return themeConfig.colors[type] || themeConfig.colors.info; } /** * 获取文本颜色 * @param {string} type - 文本类型 'primary' | 'regular' | 'secondary' | 'placeholder' * @returns {string} 颜色值 */ export function getTextColor(type = 'primary') { return themeConfig.colors.text[type] || themeConfig.colors.text.primary; } /** * 获取边框颜色 * @param {string} type - 边框类型 'base' | 'light' | 'lighter' | 'extra_light' * @returns {string} 颜色值 */ export function getBorderColor(type = 'base') { return themeConfig.colors.border[type] || themeConfig.colors.border.base; } /** * 获取背景颜色 * @param {string} type - 背景类型 'base' | 'page' | 'card' * @returns {string} 颜色值 */ export function getBackgroundColor(type = 'base') { return themeConfig.colors.background[type] || themeConfig.colors.background.base; } /** * 设置主题色 * @param {string} color - 新的主题色 */ export function setThemeColor(color) { // 更新主题配置 themeConfig.primary.main = color; // 生成相关颜色 themeConfig.primary.light = lightenColor(color, 20); themeConfig.primary.dark = darkenColor(color, 20); // 生成透明度颜色 const rgb = hexToRgb(color); for (let i = 1; i <= 5; i++) { themeConfig.primary.opacity[i] = `rgba(${rgb.r}, ${rgb.g}, ${rgb.b}, 0.${i})`; } } /** * 十六进制颜色转RGB */ function hexToRgb(hex) { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); return result ? { r: parseInt(result[1], 16), g: parseInt(result[2], 16), b: parseInt(result[3], 16) } : null; } /** * 颜色变亮 */ function lightenColor(hex, percent) { const rgb = hexToRgb(hex); if (!rgb) return hex; const factor = percent / 100; rgb.r = Math.round(rgb.r + (255 - rgb.r) * factor); rgb.g = Math.round(rgb.g + (255 - rgb.g) * factor); rgb.b = Math.round(rgb.b + (255 - rgb.b) * factor); return `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`; } /** * 颜色变暗 */ function darkenColor(hex, percent) { const rgb = hexToRgb(hex); if (!rgb) return hex; const factor = percent / 100; rgb.r = Math.round(rgb.r * (1 - factor)); rgb.g = Math.round(rgb.g * (1 - factor)); rgb.b = Math.round(rgb.b * (1 - factor)); return `#${rgb.r.toString(16).padStart(2, '0')}${rgb.g.toString(16).padStart(2, '0')}${rgb.b.toString(16).padStart(2, '0')}`; } export default { getThemeColor, getThemeColorWithOpacity, getSemanticColor, getTextColor, getBorderColor, getBackgroundColor, setThemeColor };