From 2f4a20a4a950a9b955b1680ffadb3b3fb97c2b6e Mon Sep 17 00:00:00 2001 From: hxr <1490493387@qq.com> Date: Sat, 27 Apr 2024 19:32:50 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E4=B8=BB=E9=A2=98=E9=A2=9C?= =?UTF-8?q?=E8=89=B2=E8=AE=BE=E7=BD=AE=E8=A6=86=E7=9B=96=E6=9A=97=E9=BB=91?= =?UTF-8?q?=E6=A8=A1=E5=BC=8F=E4=B8=8Bel-table=E8=A1=8C=E6=BF=80=E6=B4=BB?= =?UTF-8?q?=E7=9A=84=E8=83=8C=E6=99=AF=E8=89=B2=E9=97=AE=E9=A2=98=E4=BF=AE?= =?UTF-8?q?=E5=A4=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 + src/store/modules/settings.ts | 21 +-- src/utils/color.ts | 287 ---------------------------------- src/utils/index.ts | 10 -- 4 files changed, 13 insertions(+), 307 deletions(-) delete mode 100644 src/utils/color.ts diff --git a/package.json b/package.json index 243ea3ee..76e3757b 100644 --- a/package.json +++ b/package.json @@ -47,6 +47,7 @@ "@wangeditor/editor-for-vue": "5.1.10", "animate.css": "^4.1.1", "axios": "^1.6.8", + "color": "^4.2.3", "echarts": "^5.5.0", "element-plus": "^2.7.2", "lodash-es": "^4.17.21", @@ -67,6 +68,7 @@ "@commitlint/cli": "^18.6.1", "@commitlint/config-conventional": "^18.6.3", "@iconify-json/ep": "^1.1.15", + "@types/color": "^3.0.6", "@types/lodash": "^4.17.0", "@types/node": "^20.12.7", "@types/nprogress": "^0.2.3", diff --git a/src/store/modules/settings.ts b/src/store/modules/settings.ts index 1a54daae..a581e90f 100644 --- a/src/store/modules/settings.ts +++ b/src/store/modules/settings.ts @@ -1,7 +1,6 @@ import defaultSettings from "@/settings"; -import { genMixColor } from "@/utils/color"; -import { setStyleProperty } from "@/utils"; import { ThemeEnum } from "@/enums/ThemeEnum"; +import Color from "color"; type SettingsValue = boolean | string; @@ -47,14 +46,16 @@ export const useSettingsStore = defineStore("setting", () => { } if (newThemeColor !== oldThemeColor) { - const { DEFAULT, dark, light } = genMixColor(newThemeColor); - setStyleProperty(`--el-color-primary`, DEFAULT); - setStyleProperty(`--el-color-primary-dark-2`, dark[2]); - setStyleProperty(`--el-color-primary-light-3`, light[3]); - setStyleProperty(`--el-color-primary-light-5`, light[5]); - setStyleProperty(`--el-color-primary-light-7`, light[7]); - setStyleProperty(`--el-color-primary-light-8`, light[8]); - setStyleProperty(`--el-color-primary-light-9`, light[9]); + const rootStyle = document.documentElement.style; + rootStyle.setProperty(`--el-color-primary`, newThemeColor); + rootStyle.setProperty(`--el-color-primary-dark-2`, newThemeColor); + + for (let i = 1; i < 10; i++) { + rootStyle.setProperty( + `--el-color-primary-light-${i}`, + `${Color(newThemeColor).alpha(1 - i * 0.1)}` + ); + } } }, { diff --git a/src/utils/color.ts b/src/utils/color.ts deleted file mode 100644 index 25035841..00000000 --- a/src/utils/color.ts +++ /dev/null @@ -1,287 +0,0 @@ -/** - * 颜色生成 - */ -type RGB = { - r: number; - g: number; - b: number; -}; -type HSL = { - h: number; - s: number; - l: number; -}; -type HEX = - | "0" - | "1" - | "2" - | "3" - | "4" - | "5" - | "6" - | "7" - | "8" - | "9" - | "A" - | "B" - | "C" - | "D" - | "E" - | "F"; - -const RGBUnit = 255; -const HEX_MAP: Record = { - 0: 0, - 1: 1, - 2: 2, - 3: 3, - 4: 4, - 5: 5, - 6: 6, - 7: 7, - 8: 8, - 9: 9, - A: 10, - B: 11, - C: 12, - D: 13, - E: 14, - F: 15, -}; -const rgbWhite = { - r: 255, - g: 255, - b: 255, -}; -const rgbBlack = { - r: 0, - g: 0, - b: 0, -}; - -/** - * RGB颜色转HSL颜色值 - * @param r 红色值 - * @param g 绿色值 - * @param b 蓝色值 - * @returns { h: [0, 360]; s: [0, 1]; l: [0, 1] } - */ -function rgbToHsl(rgb: RGB): HSL { - let { r, g, b } = rgb; - const hsl = { - h: 0, - s: 0, - l: 0, - }; - - // 计算rgb基数 ∈ [0, 1] - r /= RGBUnit; - g /= RGBUnit; - b /= RGBUnit; - const max = Math.max(r, g, b); - const min = Math.min(r, g, b); - - // 计算h - if (max === min) { - hsl.h = 0; - } else if (max === r) { - hsl.h = 60 * ((g - b) / (max - min)) + (g >= b ? 0 : 360); - } else if (max === g) { - hsl.h = 60 * ((b - r) / (max - min)) + 120; - } else { - hsl.h = 60 * ((r - g) / (max - min)) + 240; - } - hsl.h = hsl.h > 360 ? hsl.h - 360 : hsl.h; - - // 计算l - hsl.l = (max + min) / 2; - - // 计算s - if (hsl.l === 0 || max === min) { - // 灰/白/黑 - hsl.s = 0; - } else if (hsl.l > 0 && hsl.l <= 0.5) { - hsl.s = (max - min) / (max + min); - } else { - hsl.s = (max - min) / (2 - (max + min)); - } - - return hsl; -} - -/** - * hsl -> rgb - * @param h [0, 360] - * @param s [0, 1] - * @param l [0, 1] - * @returns RGB - */ -function hslToRgb(hsl: HSL): RGB { - const { h, s, l } = hsl; - const q = l < 0.5 ? l * (1 + s) : l + s - l * s; - const p = 2 * l - q; - const hUnit = h / 360; // 色相转换为 [0, 1] - - const Cr = fillCircleVal(hUnit + 1 / 3); - const Cg = fillCircleVal(hUnit); - const Cb = fillCircleVal(hUnit - 1 / 3); - - // 保持 [0, 1] 环状取值 - function fillCircleVal(val: number): number { - return val < 0 ? val + 1 : val > 1 ? val - 1 : val; - } - - function computedRgb(val: number): number { - let colorVal: number; - if (val < 1 / 6) { - colorVal = p + (q - p) * 6 * val; - } else if (val >= 1 / 6 && val < 1 / 2) { - colorVal = q; - } else if (val >= 1 / 2 && val < 2 / 3) { - colorVal = p + (q - p) * 6 * (2 / 3 - val); - } else { - colorVal = p; - } - return colorVal * 255; - } - - return { - r: Number(computedRgb(Cr).toFixed(0)), - g: Number(computedRgb(Cg).toFixed(0)), - b: Number(computedRgb(Cb).toFixed(0)), - }; -} - -/** - * 16进制颜色转换RGB - * @param color #rrggbb - * @returns RGB - */ -function hexToRGB(hex: string): RGB { - hex = hex.toUpperCase(); - const hexRegExp = /^#([0-9A-F]{6})$/; - if (!hexRegExp.test(hex)) { - throw new Error("请传入合法的16进制颜色值，eg: #FF0000"); - } - - const hexValArr = (hexRegExp.exec(hex)?.[1] || "000000").split( - "" - ) as Array; - - return { - r: HEX_MAP[hexValArr[0]] * 16 + HEX_MAP[hexValArr[1]], - g: HEX_MAP[hexValArr[2]] * 16 + HEX_MAP[hexValArr[3]], - b: HEX_MAP[hexValArr[4]] * 16 + HEX_MAP[hexValArr[5]], - }; -} - -/** - * rgb 转 16进制 - * @param rgb RGB - * @returns #HEX{6} - */ -function rgbToHex(rgb: RGB): string { - const HEX_MAP_REVERSE: Record = {}; - for (const key in HEX_MAP) { - HEX_MAP_REVERSE[HEX_MAP[key as HEX]] = key as HEX; - } - function getRemainderAndQuotient(val: number): string { - val = Math.round(val); - return `${HEX_MAP_REVERSE[Math.floor(val / 16)]}${ - HEX_MAP_REVERSE[val % 16] - }`; - } - - return `#${getRemainderAndQuotient(rgb.r)}${getRemainderAndQuotient( - rgb.g - )}${getRemainderAndQuotient(rgb.b)}`; -} - -// hsl 转 16进制 -function hslToHex(hsl: HSL): string { - return rgbToHex(hslToRgb(hsl)); -} - -// 16进制 转 hsl -function hexToHsl(hex: string): HSL { - return rgbToHsl(hexToRGB(hex)); -} - -// 生成混合色（混黑 + 混白） -function genMixColor(base: string | RGB | HSL): { - DEFAULT: string; - dark: { - 1: string; - 2: string; - 3: string; - 4: string; - 5: string; - 6: string; - 7: string; - 8: string; - 9: string; - }; - light: { - 1: string; - 2: string; - 3: string; - 4: string; - 5: string; - 6: string; - 7: string; - 8: string; - 9: string; - }; -} { - // 基准色统一转换为RGB - if (typeof base === "string") { - base = hexToRGB(base); - } else if ("h" in base) { - base = hslToRgb(base); - } - - // 混合色 - function mix(color: RGB, mixColor: RGB, weight: number): RGB { - return { - r: color.r * (1 - weight) + mixColor.r * weight, - g: color.g * (1 - weight) + mixColor.g * weight, - b: color.b * (1 - weight) + mixColor.b * weight, - }; - } - - return { - DEFAULT: rgbToHex(base), - dark: { - 1: rgbToHex(mix(base, rgbBlack, 0.1)), - 2: rgbToHex(mix(base, rgbBlack, 0.2)), - 3: rgbToHex(mix(base, rgbBlack, 0.3)), - 4: rgbToHex(mix(base, rgbBlack, 0.4)), - 5: rgbToHex(mix(base, rgbBlack, 0.5)), - 6: rgbToHex(mix(base, rgbBlack, 0.6)), - 7: rgbToHex(mix(base, rgbBlack, 0.7)), - 8: rgbToHex(mix(base, rgbBlack, 0.78)), - 9: rgbToHex(mix(base, rgbBlack, 0.85)), - }, - light: { - 1: rgbToHex(mix(base, rgbWhite, 0.1)), - 2: rgbToHex(mix(base, rgbWhite, 0.2)), - 3: rgbToHex(mix(base, rgbWhite, 0.3)), - 4: rgbToHex(mix(base, rgbWhite, 0.4)), - 5: rgbToHex(mix(base, rgbWhite, 0.5)), - 6: rgbToHex(mix(base, rgbWhite, 0.6)), - 7: rgbToHex(mix(base, rgbWhite, 0.7)), - 8: rgbToHex(mix(base, rgbWhite, 0.78)), - 9: rgbToHex(mix(base, rgbWhite, 0.85)), - }, - }; -} - -export { - genMixColor, - rgbToHsl, - rgbToHex, - hslToRgb, - hslToHex, - hexToRGB, - hexToHsl, -}; diff --git a/src/utils/index.ts b/src/utils/index.ts index fb42864a..44bb588b 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -39,13 +39,3 @@ export function isExternal(path: string) { const isExternal = /^(https?:|http?:|mailto:|tel:)/.test(path); return isExternal; } - -/** - * 设置Style属性 - * - * @param propName - * @param value - */ -export function setStyleProperty(propName: string, value: string) { - document.documentElement.style.setProperty(propName, value); -}