137 lines
3.2 KiB
TypeScript
137 lines
3.2 KiB
TypeScript
/**
|
||
* 五行（金木水火土）枚举及颜色定义
|
||
*/
|
||
|
||
export enum WuxingElement {
|
||
/** 金 */
|
||
METAL = '金',
|
||
/** 木 */
|
||
WOOD = '木',
|
||
/** 水 */
|
||
WATER = '水',
|
||
/** 火 */
|
||
FIRE = '火',
|
||
/** 土 */
|
||
EARTH = '土'
|
||
}
|
||
|
||
/**
|
||
* 五行颜色配置
|
||
*/
|
||
export interface WuxingColorConfig {
|
||
/** 元素名称 */
|
||
label: WuxingElement;
|
||
/** 主色调（用于背景、填充等） */
|
||
color: string;
|
||
/** 浅色版本（用于浅色背景） */
|
||
lightColor?: string;
|
||
/** 深色版本（用于深色背景） */
|
||
darkColor?: string;
|
||
/** RGB 值（用于计算） */
|
||
rgb?: { r: number; g: number; b: number };
|
||
}
|
||
|
||
/**
|
||
* 五行颜色映射表
|
||
*/
|
||
export const WUXING_COLORS: Record<WuxingElement, WuxingColorConfig> = {
|
||
[WuxingElement.METAL]: {
|
||
label: WuxingElement.METAL,
|
||
color: '#E0E0E0', // 浅灰色/银色
|
||
lightColor: '#F5F5F5',
|
||
darkColor: '#BDBDBD',
|
||
rgb: { r: 224, g: 224, b: 224 }
|
||
},
|
||
[WuxingElement.WOOD]: {
|
||
label: WuxingElement.WOOD,
|
||
color: '#4CAF50', // 绿色
|
||
lightColor: '#81C784',
|
||
darkColor: '#388E3C',
|
||
rgb: { r: 76, g: 175, b: 80 }
|
||
},
|
||
[WuxingElement.WATER]: {
|
||
label: WuxingElement.WATER,
|
||
color: '#2196F3', // 蓝色
|
||
lightColor: '#64B5F6',
|
||
darkColor: '#1976D2',
|
||
rgb: { r: 33, g: 150, b: 243 }
|
||
},
|
||
[WuxingElement.FIRE]: {
|
||
label: WuxingElement.FIRE,
|
||
color: '#F44336', // 红色
|
||
lightColor: '#E57373',
|
||
darkColor: '#D32F2F',
|
||
rgb: { r: 244, g: 67, b: 54 }
|
||
},
|
||
[WuxingElement.EARTH]: {
|
||
label: WuxingElement.EARTH,
|
||
color: '#795548', // 棕色
|
||
lightColor: '#A1887F',
|
||
darkColor: '#5D4037',
|
||
rgb: { r: 121, g: 85, b: 72 }
|
||
}
|
||
};
|
||
|
||
/**
|
||
* 获取五行元素的颜色
|
||
* @param element 五行元素
|
||
* @param variant 颜色变体（默认使用主色调）
|
||
* @returns 颜色值（hex 格式）
|
||
*/
|
||
export function getWuxingColor(
|
||
element: WuxingElement,
|
||
variant: 'color' | 'lightColor' | 'darkColor' = 'color'
|
||
): string {
|
||
const config = WUXING_COLORS[element];
|
||
return config[variant] || config.color;
|
||
}
|
||
|
||
/**
|
||
* 获取五行元素的 RGB 值
|
||
* @param element 五行元素
|
||
* @returns RGB 对象
|
||
*/
|
||
export function getWuxingRgb(element: WuxingElement): { r: number; g: number; b: number } {
|
||
return WUXING_COLORS[element].rgb || { r: 0, g: 0, b: 0 };
|
||
}
|
||
|
||
/**
|
||
* 五行数组（按顺序：金木水火土）
|
||
*/
|
||
export const WUXING_ARRAY: WuxingElement[] = [
|
||
WuxingElement.METAL,
|
||
WuxingElement.WOOD,
|
||
WuxingElement.WATER,
|
||
WuxingElement.FIRE,
|
||
WuxingElement.EARTH
|
||
];
|
||
|
||
/**
|
||
* 五行数据格式（用于图表、列表等）
|
||
*/
|
||
export interface WuxingData {
|
||
/** 元素名称 */
|
||
label: WuxingElement;
|
||
/** 数值（0-100） */
|
||
value: number;
|
||
/** 颜色 */
|
||
color: string;
|
||
}
|
||
|
||
/**
|
||
* 创建五行数据数组
|
||
* @param values 五行数值数组，顺序为 [金, 木, 水, 火, 土]
|
||
* @returns 五行数据数组
|
||
*/
|
||
export function createWuxingData(values: number[]): WuxingData[] {
|
||
if (values.length !== 5) {
|
||
throw new Error('五行数值数组必须包含5个元素');
|
||
}
|
||
|
||
return WUXING_ARRAY.map((element, index) => ({
|
||
label: element,
|
||
value: Math.max(0, Math.min(100, values[index] || 0)), // 限制在 0-100 范围
|
||
color: WUXING_COLORS[element].color
|
||
}));
|
||
}
|