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

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

* fix: ci

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"