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"

pnpm-lock.yaml

@@ -655,9 +655,9 @@ importers:
 
   packages/@core/base/shared:
     dependencies:
-      '@ant-design/fast-color':
-        specifier: ^2.0.6
-        version: 2.0.6
+      '@ctrl/tinycolor':
+        specifier: ^4.1.0
+        version: 4.1.0
       '@vue/shared':
         specifier: ^3.4.36
         version: 3.4.36
@@ -1179,10 +1179,6 @@ packages:
   '@ant-design/colors@6.0.0':
     resolution: {integrity: sha512-qAZRvPzfdWHtfameEGP2Qvuf838NhergR35o+EuVyB5XvSA98xod5r4utvi4TJ3ywmevm290g9nsCG5MryrdWQ==}
 
-  '@ant-design/fast-color@2.0.6':
-    resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==}
-    engines: {node: '>=8.x'}
-
   '@ant-design/icons-svg@4.4.2':
     resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
 
@@ -1223,42 +1219,36 @@ packages:
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@ast-grep/napi-linux-arm64-gnu@0.22.6':
     resolution: {integrity: sha512-9PAqNJlAQfFm1RW0DVCM/S4gFHdppxUTWacB3qEeJZXgdLnoH0KGQa4z3Xo559SPYDKZy0VnY02mZ3XJ+v6/Vw==}
     engines: {node: '>= 10'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@ast-grep/napi-linux-x64-gnu@0.21.4':
     resolution: {integrity: sha512-U7jl8RGpxKV+pjFstY0y5qD+D+wm9dXNO7NBbIOnETgTMizTFiUuQWT7SOlIklhcxxuXqWzfwhNN1qwI0tGNWw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@ast-grep/napi-linux-x64-gnu@0.22.6':
     resolution: {integrity: sha512-nZf+gxXVrZqvP1LN6HwzOMA4brF3umBXfMequQzv8S6HeJ4c34P23F0Tw8mHtQpVYP9PQWJUvt3LJQ8Xvd5Hiw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@ast-grep/napi-linux-x64-musl@0.21.4':
     resolution: {integrity: sha512-SOGR93kGomRR+Vh87+jXI3pJLR+J+dekCI8a4S22kGX9iAen8/+Ew++lFouDueKLyszmmhCrIk1WnJvYPuSFBw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@ast-grep/napi-linux-x64-musl@0.22.6':
     resolution: {integrity: sha512-gcJeBMgJQf2pZZo0lgH0Vg4ycyujM7Am8VlomXhavC/dPpkddA1tiHSIC4fCNneLU1EqHITy3ALSmM4GLdsjBw==}
     engines: {node: '>= 10'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@ast-grep/napi-win32-arm64-msvc@0.21.4':
     resolution: {integrity: sha512-ciGaTbkPjbCGqUyLwIPvcNeftNXjSG3cXE+5NiLThRbDhh2yUOE8YJkElUQcu0xQCdSlXnb4l/imEED/65jGfw==}
@@ -3393,35 +3383,30 @@ packages:
     engines: {node: '>= 10.0.0'}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-glibc@2.4.1':
     resolution: {integrity: sha512-BJ7mH985OADVLpbrzCLgrJ3TOpiZggE9FMblfO65PlOCdG++xJpKUJ0Aol74ZUIYfb8WsRlUdgrZxKkz3zXWYA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-arm64-musl@2.4.1':
     resolution: {integrity: sha512-p4Xb7JGq3MLgAfYhslU2SjoV9G0kI0Xry0kuxeG/41UfpjHGOhv7UoUDAz/jb1u2elbhazy4rRBL8PegPJFBhA==}
     engines: {node: '>= 10.0.0'}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-linux-x64-glibc@2.4.1':
     resolution: {integrity: sha512-s9O3fByZ/2pyYDPoLM6zt92yu6P4E39a03zvO0qCHOTjxmt3GHRMLuRZEWhWLASTMSrrnVNWdVI/+pUElJBBBg==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@parcel/watcher-linux-x64-musl@2.4.1':
     resolution: {integrity: sha512-L2nZTYR1myLNST0O632g0Dx9LyMNHrn6TOt76sYxWLdff3cB22/GZX2UPtJnaqQPdCRoszoY5rcOj4oMTtp5fQ==}
     engines: {node: '>= 10.0.0'}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@parcel/watcher-wasm@2.4.1':
     resolution: {integrity: sha512-/ZR0RxqxU/xxDGzbzosMjh4W6NdYFMqq2nvo2b8SLi7rsl/4jkL8S5stIikorNkdR50oVDvqb/3JT05WM+CRRA==}
@@ -3601,55 +3586,46 @@ packages:
     resolution: {integrity: sha512-jMYvxZwGmoHFBTbr12Xc6wOdc2xA5tF5F2q6t7Rcfab68TT0n+r7dgawD4qhPEvasDsVpQi+MgDzj2faOLsZjA==}
     cpu: [arm]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm-musleabihf@4.20.0':
     resolution: {integrity: sha512-1asSTl4HKuIHIB1GcdFHNNZhxAYEdqML/MW4QmPS4G0ivbEcBr1JKlFLKsIRqjSwOBkdItn3/ZDlyvZ/N6KPlw==}
     cpu: [arm]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-arm64-gnu@4.20.0':
     resolution: {integrity: sha512-COBb8Bkx56KldOYJfMf6wKeYJrtJ9vEgBRAOkfw6Ens0tnmzPqvlpjZiLgkhg6cA3DGzCmLmmd319pmHvKWWlQ==}
     cpu: [arm64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-arm64-musl@4.20.0':
     resolution: {integrity: sha512-+it+mBSyMslVQa8wSPvBx53fYuZK/oLTu5RJoXogjk6x7Q7sz1GNRsXWjn6SwyJm8E/oMjNVwPhmNdIjwP135Q==}
     cpu: [arm64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-linux-powerpc64le-gnu@4.20.0':
     resolution: {integrity: sha512-yAMvqhPfGKsAxHN8I4+jE0CpLWD8cv4z7CK7BMmhjDuz606Q2tFKkWRY8bHR9JQXYcoLfopo5TTqzxgPUjUMfw==}
     cpu: [ppc64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-riscv64-gnu@4.20.0':
     resolution: {integrity: sha512-qmuxFpfmi/2SUkAw95TtNq/w/I7Gpjurx609OOOV7U4vhvUhBcftcmXwl3rqAek+ADBwSjIC4IVNLiszoj3dPA==}
     cpu: [riscv64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-s390x-gnu@4.20.0':
     resolution: {integrity: sha512-I0BtGXddHSHjV1mqTNkgUZLnS3WtsqebAXv11D5BZE/gfw5KoyXSAXVqyJximQXNvNzUo4GKlCK/dIwXlz+jlg==}
     cpu: [s390x]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-gnu@4.20.0':
     resolution: {integrity: sha512-y+eoL2I3iphUg9tN9GB6ku1FA8kOfmF4oUEWhztDJ4KXJy1agk/9+pejOuZkNFhRwHAOxMsBPLbXPd6mJiCwew==}
     cpu: [x64]
     os: [linux]
-    libc: [glibc]
 
   '@rollup/rollup-linux-x64-musl@4.20.0':
     resolution: {integrity: sha512-hM3nhW40kBNYUkZb/r9k2FKK+/MnKglX7UYd4ZUy5DJs8/sMsIbqWK2piZtVGE3kcXVNj3B2IrUYROJMMCikNg==}
     cpu: [x64]
     os: [linux]
-    libc: [musl]
 
   '@rollup/rollup-win32-arm64-msvc@4.20.0':
     resolution: {integrity: sha512-psegMvP+Ik/Bg7QRJbv8w8PAytPA7Uo8fpFjXyCRHWm6Nt42L+JtoqH8eDQ5hRP7/XW2UiIriy1Z46jf0Oa1kA==}
@@ -9687,10 +9663,6 @@ snapshots:
     dependencies:
       '@ctrl/tinycolor': 4.1.0
 
-  '@ant-design/fast-color@2.0.6':
-    dependencies:
-      '@babel/runtime': 7.25.0
-
   '@ant-design/icons-svg@4.4.2': {}
 
   '@ant-design/icons-vue@7.0.1(vue@3.4.36(typescript@5.5.4))':