125 lines
3.3 KiB
JavaScript
125 lines
3.3 KiB
JavaScript
// 主题工具函数
|
|
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
|
|
}; |