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>

apps/web-naive/src/locales/langs/en-US.json

@@ -2,7 +2,8 @@
   "page": {
     "demos": {
       "title": "Demos",
-      "naive": "Naive UI"
+      "naive": "Naive UI",
+      "table": "Table"
     }
   }
 }

apps/web-naive/src/locales/langs/zh-CN.json

@@ -2,7 +2,8 @@
   "page": {
     "demos": {
       "title": "演示",
-      "naive": "Naive UI"
+      "naive": "Naive UI",
+      "table": "Table"
     }
   }
 }

apps/web-naive/src/router/routes/modules/demos.ts

@@ -24,6 +24,15 @@ const routes: RouteRecordRaw[] = [
         path: '/demos/naive',
         component: () => import('#/views/demos/naive/index.vue'),
       },
+      {
+        meta: {
+          icon: 'mdi:shield-key-outline',
+          title: $t('page.demos.table'),
+        },
+        name: 'Table',
+        path: '/demos/table',
+        component: () => import('#/views/demos/table/index.vue'),
+      },
     ],
   },
 ];

apps/web-naive/src/views/demos/table/index.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+import { NDataTable } from 'naive-ui';
+
+const columns = ref([
+  {
+    key: 'no',
+    title: 'No',
+  },
+  {
+    key: 'title',
+    title: 'Title',
+  },
+  {
+    key: 'length',
+    title: 'Length',
+  },
+]);
+const data = [
+  { length: '4:18', no: 3, title: 'Wonderwall' },
+  { length: '4:48', no: 4, title: "Don't Look Back in Anger" },
+  { length: '7:27', no: 12, title: 'Champagne Supernova' },
+];
+</script>
+
+<template>
+  <NDataTable :columns="columns" :data="data" />
+</template>
+
+<style scoped></style>