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>

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

@@ -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,
+};

packages/effects/hooks/src/use-design-tokens.ts

@@ -1,7 +1,7 @@
 import { reactive, watch } from 'vue';
 
 import { preferences } from '@vben/preferences';
-import { updateCSSVariables } from '@vben/utils';
+import { hlsStringToRGBString, updateCSSVariables } from '@vben/utils';
 
 /**
  * 用于适配各个框架的设计系统
@@ -102,7 +102,7 @@ export function useNaiveDesignTokens() {
 
   const getCssVariableValue = (variable: string, isColor: boolean = true) => {
     const value = rootStyles.getPropertyValue(variable);
-    return isColor ? `hsl(${value})` : value;
+    return isColor ? hlsStringToRGBString(value) : value;
   };
 
   watch(
@@ -150,7 +150,6 @@ export function useNaiveDesignTokens() {
     },
     { immediate: true },
   );
-
   return {
     commonTokens,
   };