fix: an error was reported in the adaptation of the naive component library theme (#4041)

* fix: naive组件库 主题适配报错,需将hsl转换为rgb格式

* feat: 增加NDataTable示例

* chore: hsl转换函数移动到@vben/utils内

* fix: 优化正则表达式

* fix: 优化正则表达式2

* fix: 正则表达式优化,优化hlsStringToRGB函数

* fix: 使用tinyColor进行转换

* Update packages/@core/base/shared/src/colorful/convert.ts

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>

* fix: lint error

---------

Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
Co-authored-by: vince <vince292007@gmail.com>
This commit is contained in:
jinmao88
2024-08-07 12:13:54 +08:00
committed by GitHub
parent 279a3a4c21
commit d9ba9917ff
6 changed files with 76 additions and 6 deletions

View File

@@ -40,5 +40,34 @@ function isValidColor(color?: string) {
}
return new TinyColor(color).isValid;
}
/**
* 将HLS字符串转换为RGB颜色字符串
*
* 本函数接收一个表示HLS值的字符串移除其中的度量单位
* 并将其转换为TinyColor对象以便进行颜色处理。
* 如果转换后的颜色无效,则直接返回原始字符串;
* 否则返回转换后的RGB颜色字符串
*
* @param str 表示HLS颜色值的字符串可能包含度量单位如'deg'、'grad'、'rad'或'turn'
* @returns 如果颜色值有效则返回对应的RGB颜色字符串如果无效则返回原始字符串
*/
function hlsStringToRGBString(str: string): string {
// 移除HLS字符串中的度量单位以便正确解析
const color = new TinyColor(
`hsl(${str.replaceAll(/deg|grad|rad|turn/g, '')})`,
);
// 检查颜色是否有效,如果无效则直接返回原始字符串
if (!color.isValid) {
return str;
}
// 返回转换后的RGB颜色字符串
return color.toRgbString();
}
export { convertToHsl, convertToHslCssVar, isValidColor, TinyColor };
export {
convertToHsl,
convertToHslCssVar,
hlsStringToRGBString,
isValidColor,
TinyColor,
};