From 8ffc853b86fc0342b2fef60976fe8b26d7d47758 Mon Sep 17 00:00:00 2001 From: Li Kui <90845831+likui628@users.noreply.github.com> Date: Thu, 8 Aug 2024 05:46:14 +0800 Subject: [PATCH] chore: switch back to `@ctrl/tinycolor` (#4077) * chore: switch back to `@ctrl/tinycolor` * fix: ci --- packages/@core/base/shared/package.json | 2 +- .../base/shared/src/color/convert.test.ts | 4 +-- .../@core/base/shared/src/color/convert.ts | 22 +++++++----- .../@core/base/shared/src/color/generator.ts | 4 +-- .../preferences/blocks/theme/builtin.vue | 4 +-- .../widgets/preferences/preferences-sheet.vue | 6 ---- pnpm-lock.yaml | 34 ++----------------- 7 files changed, 24 insertions(+), 52 deletions(-) diff --git a/packages/@core/base/shared/package.json b/packages/@core/base/shared/package.json index 2a9c7e40bfb..26015965ccd 100644 --- a/packages/@core/base/shared/package.json +++ b/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", diff --git a/packages/@core/base/shared/src/color/convert.test.ts b/packages/@core/base/shared/src/color/convert.test.ts index bdd67e78ea5..f7251888e27 100644 --- a/packages/@core/base/shared/src/color/convert.test.ts +++ b/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); }); }); diff --git a/packages/@core/base/shared/src/color/convert.ts b/packages/@core/base/shared/src/color/convert.ts index 23bb7802438..5303a6b6b30 100644 --- a/packages/@core/base/shared/src/color/convert.ts +++ b/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 }; diff --git a/packages/@core/base/shared/src/color/generator.ts b/packages/@core/base/shared/src/color/generator.ts index a03b4e00c32..c7a5cbb22e2 100644 --- a/packages/@core/base/shared/src/color/generator.ts +++ b/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); diff --git a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue b/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue index 50f530cd67b..52d65de16bb 100644 --- a/packages/effects/layouts/src/widgets/preferences/blocks/theme/builtin.vue +++ b/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({ default: 'default' }); const themeColorPrimary = defineModel('themeColorPrimary'); const inputValue = computed(() => { - return new Color(themeColorPrimary.value || '').toHexString(); + return new TinyColor(themeColorPrimary.value || '').toHexString(); }); const builtinThemePresets = computed(() => { diff --git a/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue b/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue index c2c87dd127b..057f436fca7 100644 --- a/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue +++ b/packages/effects/layouts/src/widgets/preferences/preferences-sheet.vue @@ -277,12 +277,6 @@ async function handleReset() { v-model:theme-semi-dark-menu="themeSemiDarkMenu" /> - =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))':