From d9ba9917ffce0463ecc05f2ffc5fe7ca15d02788 Mon Sep 17 00:00:00 2001 From: jinmao88 <50581550+jinmao88@users.noreply.github.com> Date: Wed, 7 Aug 2024 12:13:54 +0800 Subject: [PATCH] fix: an error was reported in the adaptation of the naive component library theme (#4041) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 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 --- apps/web-naive/src/locales/langs/en-US.json | 3 +- apps/web-naive/src/locales/langs/zh-CN.json | 3 +- .../src/router/routes/modules/demos.ts | 9 ++++++ .../web-naive/src/views/demos/table/index.vue | 31 +++++++++++++++++++ .../@core/base/shared/src/colorful/convert.ts | 31 ++++++++++++++++++- .../effects/hooks/src/use-design-tokens.ts | 5 ++- 6 files changed, 76 insertions(+), 6 deletions(-) create mode 100644 apps/web-naive/src/views/demos/table/index.vue diff --git a/apps/web-naive/src/locales/langs/en-US.json b/apps/web-naive/src/locales/langs/en-US.json index 5f48dc4c..c22d75df 100644 --- a/apps/web-naive/src/locales/langs/en-US.json +++ b/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" } } } diff --git a/apps/web-naive/src/locales/langs/zh-CN.json b/apps/web-naive/src/locales/langs/zh-CN.json index 69b85185..50535ba3 100644 --- a/apps/web-naive/src/locales/langs/zh-CN.json +++ b/apps/web-naive/src/locales/langs/zh-CN.json @@ -2,7 +2,8 @@ "page": { "demos": { "title": "演示", - "naive": "Naive UI" + "naive": "Naive UI", + "table": "Table" } } } diff --git a/apps/web-naive/src/router/routes/modules/demos.ts b/apps/web-naive/src/router/routes/modules/demos.ts index 54ee5baa..8ddf81eb 100644 --- a/apps/web-naive/src/router/routes/modules/demos.ts +++ b/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'), + }, ], }, ]; diff --git a/apps/web-naive/src/views/demos/table/index.vue b/apps/web-naive/src/views/demos/table/index.vue new file mode 100644 index 00000000..02acf580 --- /dev/null +++ b/apps/web-naive/src/views/demos/table/index.vue @@ -0,0 +1,31 @@ + + + + + diff --git a/packages/@core/base/shared/src/colorful/convert.ts b/packages/@core/base/shared/src/colorful/convert.ts index d8d29813..f4fcc819 100644 --- a/packages/@core/base/shared/src/colorful/convert.ts +++ b/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, +}; diff --git a/packages/effects/hooks/src/use-design-tokens.ts b/packages/effects/hooks/src/use-design-tokens.ts index 9839aa34..b4719cd9 100644 --- a/packages/effects/hooks/src/use-design-tokens.ts +++ b/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, };