91 lines
2.4 KiB
JavaScript
91 lines
2.4 KiB
JavaScript
|
import { useMemo } from 'react';
|
||
|
|
import { useConfig } from '../context/ConfigContext';
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 使用设计令牌 Hook
|
||
|
|
* 集中管理主题配置，避免在多个组件中重复定义
|
||
|
|
* @returns {Object} 设计令牌对象
|
||
|
|
*/
|
||
|
|
export const useDesignTokens = () => {
|
||
|
|
const { config } = useConfig();
|
||
|
|
|
||
|
|
const designTokens = useMemo(() => {
|
||
|
|
const primaryColor = config?.primary_color || '#667eea';
|
||
|
|
const secondaryColor = config?.secondary_color || '#764ba2';
|
||
|
|
|
||
|
|
return {
|
||
|
|
colors: {
|
||
|
|
primary: {
|
||
|
|
main: primaryColor,
|
||
|
|
gradient: `linear-gradient(135deg, ${primaryColor} 0%, ${secondaryColor} 100%)`,
|
||
|
|
light: '#8b9ff0'
|
||
|
|
},
|
||
|
|
success: { main: '#10b981' },
|
||
|
|
warning: { main: '#f59e0b' },
|
||
|
|
error: { main: '#ef4444' },
|
||
|
|
text: {
|
||
|
|
primary: '#1e293b',
|
||
|
|
secondary: '#64748b',
|
||
|
|
inverse: '#ffffff'
|
||
|
|
},
|
||
|
|
background: {
|
||
|
|
primary: '#ffffff',
|
||
|
|
secondary: '#f8fafc',
|
||
|
|
dark: '#1e293b'
|
||
|
|
},
|
||
|
|
border: {
|
||
|
|
light: '#e2e8f0'
|
||
|
|
},
|
||
|
|
sidebar: {
|
||
|
|
bg: '#ffffff',
|
||
|
|
bgHover: `rgba(${hexToRgb(primaryColor)}, 0.08)`,
|
||
|
|
bgActive: `rgba(${hexToRgb(primaryColor)}, 0.15)`,
|
||
|
|
text: '#475569',
|
||
|
|
textHover: primaryColor,
|
||
|
|
textActive: primaryColor,
|
||
|
|
border: '#e2e8f0'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
shadows: {
|
||
|
|
small: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
|
||
|
|
medium: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1)',
|
||
|
|
large: '0 10px 15px -3px rgba(0, 0, 0, 0.1)'
|
||
|
|
},
|
||
|
|
borderRadius: {
|
||
|
|
small: '6px',
|
||
|
|
medium: '10px'
|
||
|
|
},
|
||
|
|
spacing: {
|
||
|
|
sm: '8px',
|
||
|
|
md: '16px',
|
||
|
|
lg: '24px'
|
||
|
|
}
|
||
|
|
};
|
||
|
|
}, [config?.primary_color, config?.secondary_color]);
|
||
|
|
|
||
|
|
return designTokens;
|
||
|
|
};
|
||
|
|
|
||
|
|
/**
|
||
|
|
* 将十六进制颜色转换为RGB字符串
|
||
|
|
* @param {string} hex - 十六进制颜色值
|
||
|
|
* @returns {string} RGB字符串 (如: "102, 126, 234")
|
||
|
|
*/
|
||
|
|
function hexToRgb(hex) {
|
||
|
|
// 移除 # 号
|
||
|
|
const cleanHex = hex.replace('#', '');
|
||
|
|
|
||
|
|
// 处理简写格式 (如: #fff)
|
||
|
|
const fullHex = cleanHex.length === 3
|
||
|
|
? cleanHex.split('').map(c => c + c).join('')
|
||
|
|
: cleanHex;
|
||
|
|
|
||
|
|
const r = parseInt(fullHex.substring(0, 2), 16);
|
||
|
|
const g = parseInt(fullHex.substring(2, 4), 16);
|
||
|
|
const b = parseInt(fullHex.substring(4, 6), 16);
|
||
|
|
|
||
|
|
return `${r}, ${g}, ${b}`;
|
||
|
|
}
|
||
|
|
|
||
|
|
export default useDesignTokens;
|