tongtong/vue3-element-admin
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 🐛 主题颜色设置覆盖暗黑模式下el-table行激活的背景色问题修复

Browse Source
This commit is contained in:
hxr
2024-04-27 19:32:50 +08:00
parent 0e1e9ef6dd
commit 2f4a20a4a9
4 changed files with 13 additions and 307 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@@ -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",

21
src/store/modules/settings.ts
View File

@@ -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)}`
);
}
}
},
{

287
src/utils/color.ts
View File

@@ -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<HEX, number> = {
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<HEX>;
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<string, HEX> = {};
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,
};

10
src/utils/index.ts
View File

@@ -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);
}