chore: switch back to @ctrl/tinycolor (#4077)

* chore: switch back to `@ctrl/tinycolor`

* fix: ci

Author: likui628

packages/@core/base/shared/package.json

@@ -55,7 +55,7 @@
     }
   },
   "dependencies": {
-    "@ant-design/fast-color": "^2.0.6",
+    "@ctrl/tinycolor": "^4.1.0",
     "@vue/shared": "^3.4.36",
     "clsx": "^2.1.1",
     "defu": "^6.1.4",

packages/@core/base/shared/src/color/convert.test.ts

@@ -29,13 +29,13 @@ describe('color conversion functions', () => {
 
   it('should correctly convert color to RGB CSS variable format', () => {
     const color = 'hsl(284, 100%, 50%)';
-    const expectedRgb = 'rgb(187,0,255)';
+    const expectedRgb = 'rgb(187, 0, 255)';
     expect(convertToRgb(color)).toEqual(expectedRgb);
   });
 
   it('should correctly convert color with alpha to RGBA CSS variable format', () => {
     const color = 'hsla(284, 100%, 50%, 0.92)';
-    const expectedRgba = 'rgba(187,0,255,0.92)';
+    const expectedRgba = 'rgba(187, 0, 255, 0.92)';
     expect(convertToRgb(color)).toEqual(expectedRgba);
   });
 });

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

@@ -1,6 +1,4 @@
-import { FastColor } from '@ant-design/fast-color';
-
-const Color = FastColor;
+import { TinyColor } from '@ctrl/tinycolor';
 
 /**
  * 将颜色转换为HSL格式。
@@ -11,7 +9,7 @@ const Color = FastColor;
  * @returns {string} HSL格式的颜色字符串。
  */
 function convertToHsl(color: string): string {
-  const { a, h, l, s } = new Color(color).toHsl();
+  const { a, h, l, s } = new TinyColor(color).toHsl();
   const hsl = `hsl(${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%)`;
   return a < 1 ? `${hsl} ${a}` : hsl;
 }
@@ -26,13 +24,21 @@ function convertToHsl(color: string): string {
  * @returns {string} 可以作为CSS变量使用的HSL格式的颜色字符串。
  */
 function convertToHslCssVar(color: string): string {
-  const { a, h, l, s } = new Color(color).toHsl();
+  const { a, h, l, s } = new TinyColor(color).toHsl();
   const hsl = `${Math.round(h)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`;
   return a < 1 ? `${hsl} / ${a}` : hsl;
 }
 
-function convertToRgb(color: string): string {
-  return new Color(color).toRgbString();
+/**
+ * 将颜色转换为RGB颜色字符串
+ * TinyColor无法处理hsl内包含'deg'、'grad'、'rad'或'turn'的字符串
+ * 比如 hsl(231deg 98% 65%)将被解析为rgb(0, 0, 0)
+ * 这里在转换之前先将这些单位去掉
+ * @param str 表示HLS颜色值的字符串
+ * @returns 如果颜色值有效，则返回对应的RGB颜色字符串；如果无效，则返回rgb(0, 0, 0)
+ */
+function convertToRgb(str: string): string {
+  return new TinyColor(str.replaceAll(/deg|grad|rad|turn/g, '')).toRgbString();
 }
 
-export { Color, convertToHsl, convertToHslCssVar, convertToRgb };
+export { convertToHsl, convertToHslCssVar, convertToRgb, TinyColor };

packages/@core/base/shared/src/color/generator.ts

@@ -1,6 +1,6 @@
 import { getColors } from 'theme-colors';
 
-import { Color, convertToHslCssVar } from './convert';
+import { convertToHslCssVar, TinyColor } from './convert';
 
 interface ColorItem {
   alias?: string;
@@ -13,7 +13,7 @@ function generatorColorVariables(colorItems: ColorItem[]) {
 
   colorItems.forEach(({ alias, color, name }) => {
     if (color) {
-      const colorsMap = getColors(new Color(color).toHexString());
+      const colorsMap = getColors(new TinyColor(color).toHexString());
       let mainColor = colorsMap['500'];
 
       const colorKeys = Object.keys(colorsMap);

packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue

@@ -9,7 +9,7 @@ import {
   BUILT_IN_THEME_PRESETS,
   type BuiltinThemePreset,
 } from '@vben/preferences';
-import { Color, convertToHsl } from '@vben/utils';
+import { convertToHsl, TinyColor } from '@vben/utils';
 
 defineOptions({
   name: 'PreferenceBuiltinTheme',
@@ -22,7 +22,7 @@ const modelValue = defineModel<BuiltinThemeType>({ default: 'default' });
 const themeColorPrimary = defineModel<string>('themeColorPrimary');
 
 const inputValue = computed(() => {
-  return new Color(themeColorPrimary.value || '').toHexString();
+  return new TinyColor(themeColorPrimary.value || '').toHexString();
 });
 
 const builtinThemePresets = computed(() => {

packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue

@@ -277,12 +277,6 @@ async function handleReset() {
                 v-model:theme-semi-dark-menu="themeSemiDarkMenu"
               />
             </Block>
-            <!-- <Block :title="$t('preferences.theme-color')">
-              <ThemeColor
-                v-model="themeColorPrimary"
-                :color-primary-presets="colorPrimaryPresets"
-              />
-            </Block> -->
             <Block :title="$t('preferences.theme.builtin.title')">
               <BuiltinTheme
                 v-model="themeBuiltinType"