From 2a936ecf48c4ae4a7777bdc308a6a8eb69e2e318 Mon Sep 17 00:00:00 2001 From: rohit Date: Wed, 2 Apr 2025 10:19:46 +0800 Subject: [PATCH 1/3] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=97=A0=E6=95=88?= =?UTF-8?q?vscode=E9=85=8D=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .vscode/settings.json | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index cc1dae50..12895f81 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -62,16 +62,16 @@ "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescript]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[typescriptreact]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[html]": { "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[css]": { - "editor.defaultFormatter": "rvest.vs-code-prettier-eslint" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "[less]": { "editor.defaultFormatter": "esbenp.prettier-vscode" @@ -87,7 +87,7 @@ "source.fixAll.stylelint": "explicit" }, "[vue]": { - "editor.defaultFormatter": "octref.vetur" + "editor.defaultFormatter": "Vue.volar" }, "i18n-ally.localesPaths": ["src/locales"], "i18n-ally.keystyle": "nested", From 841083b11c62a04c85a5568dd6079ba72e3ba74f Mon Sep 17 00:00:00 2001 From: rohit Date: Thu, 10 Apr 2025 10:42:11 +0800 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E4=BF=9D=E6=8C=81=E9=A2=84=E8=AE=BE?= =?UTF-8?q?=E9=85=8D=E7=BD=AE=E5=92=8C=E6=96=87=E6=A1=A3=E4=B8=80=E8=87=B4?= =?UTF-8?q?=EF=BC=8C=E4=B8=8D=E7=94=A8=E5=86=8D=E6=89=8B=E5=8A=A8=E8=AE=BE?= =?UTF-8?q?=E7=BD=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit https://doc.iocoder.cn/vue3/format/#_1-%E5%A6%82%E4%BD%95%E5%BC%80%E5%90%AF --- .vscode/settings.json | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/.vscode/settings.json b/.vscode/settings.json index 12895f81..74ab52a7 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -86,8 +86,9 @@ "source.fixAll.eslint": "explicit", "source.fixAll.stylelint": "explicit" }, + "editor.formatOnSave": true, "[vue]": { - "editor.defaultFormatter": "Vue.volar" + "editor.defaultFormatter": "esbenp.prettier-vscode" }, "i18n-ally.localesPaths": ["src/locales"], "i18n-ally.keystyle": "nested", From 1613370080e0f06df3c381986e68d966e743e7bb Mon Sep 17 00:00:00 2001 From: hqzh <616928019@qq.com> Date: Tue, 6 May 2025 17:53:35 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix:=20#64=20=E4=BF=AE=E5=A4=8D=E5=88=87?= =?UTF-8?q?=E6=8D=A2=E4=B8=BB=E9=A2=98=E5=90=8Ehover=E9=A2=9C=E8=89=B2?= =?UTF-8?q?=E6=9C=AA=E5=8F=98=EF=BC=8C=E4=BB=A5=E5=8F=8A=E4=B8=BB=E9=A2=98?= =?UTF-8?q?=E8=89=B2=E5=92=8C=E8=BE=85=E5=8A=A9=E8=89=B2=E7=9A=84rgb?= =?UTF-8?q?=E5=8F=98=E9=87=8F=E6=9C=AA=E5=8F=98=E5=8C=96=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/store/modules/app.ts | 45 ++++++++++++++++++++++++++++++++++++---- src/utils/color.ts | 43 ++++++++++++++++++++++++++++++++++++++ 2 files changed, 84 insertions(+), 4 deletions(-) diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts index e3d6a56f..4a2ca9ae 100644 --- a/src/store/modules/app.ts +++ b/src/store/modules/app.ts @@ -1,11 +1,12 @@ -import { defineStore } from 'pinia' -import { store } from '../index' -import { humpToUnderline, setCssVar } from '@/utils' -import { ElMessage } from 'element-plus' import { CACHE_KEY, useCache } from '@/hooks/web/useCache' import { ElementPlusSize } from '@/types/elementPlus' import { LayoutType } from '@/types/layout' import { ThemeTypes } from '@/types/theme' +import { humpToUnderline, setCssVar } from '@/utils' +import { getCssColorVariable, hexToRGB, mix } from '@/utils/color' +import { ElMessage } from 'element-plus' +import { defineStore } from 'pinia' +import { store } from '../index' const { wsCache } = useCache() @@ -183,6 +184,40 @@ export const useAppStore = defineStore('app', { } }, actions: { + setPrimaryLight() { + if (this.theme.elColorPrimary) { + const elColorPrimary = this.theme.elColorPrimary + const color = this.isDark ? '#000000' : '#ffffff' + const lightList = [3, 5, 7, 8, 9] + lightList.forEach((v) => { + setCssVar(`--el-color-primary-light-${v}`, mix(color, elColorPrimary, v / 10)) + }) + setCssVar(`--el-color-primary-dark-2`, mix(color, elColorPrimary, 0.2)) + + this.setAllColorRgbVars() + } + }, + + // 处理element自带的主题色和辅助色的-rgb切换主题变化，如：--el-color-primary-rgb + setAllColorRgbVars() { + // 需要处理的颜色类型列表 + const colorTypes = ['primary', 'success', 'warning', 'danger', 'error', 'info'] + + colorTypes.forEach((type) => { + // 获取当前颜色值 + const colorValue = getCssColorVariable(`--el-color-${type}`) + if (colorValue) { + // 转换为rgba并提取RGB部分 + const rgbaString = hexToRGB(colorValue, 1) + const rgbValues = rgbaString.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/i) + if (rgbValues) { + const [, r, g, b] = rgbValues + // 设置对应的RGB变量 + setCssVar(`--el-color-${type}-rgb`, `${r}, ${g}, ${b}`) + } + } + }) + }, setBreadcrumb(breadcrumb: boolean) { this.breadcrumb = breadcrumb }, @@ -256,6 +291,7 @@ export const useAppStore = defineStore('app', { document.documentElement.classList.remove('dark') } wsCache.set(CACHE_KEY.IS_DARK, this.isDark) + this.setPrimaryLight() }, setCurrentSize(currentSize: ElementPlusSize) { this.currentSize = currentSize @@ -272,6 +308,7 @@ export const useAppStore = defineStore('app', { for (const key in this.theme) { setCssVar(`--${humpToUnderline(key)}`, this.theme[key]) } + this.setPrimaryLight() }, setFooter(footer: boolean) { this.footer = footer diff --git a/src/utils/color.ts b/src/utils/color.ts index 13424e57..943be97e 100644 --- a/src/utils/color.ts +++ b/src/utils/color.ts @@ -172,3 +172,46 @@ export const PREDEFINE_COLORS = [ '#1f73c3', '#711f57' ] + + +/** + * Mixes two colors. + * + * @param {string} color1 - The first color, should be a 6-digit hexadecimal color code starting with `#`. + * @param {string} color2 - The second color, should be a 6-digit hexadecimal color code starting with `#`. + * @param {number} [weight=0.5] - The weight of color1 in the mix, should be a number between 0 and 1, where 0 represents 100% of color2, and 1 represents 100% of color1. + * @returns {string} The mixed color, a 6-digit hexadecimal color code starting with `#`. + */ +export const mix = (color1: string, color2: string, weight: number = 0.5): string => { + let color = '#' + for (let i = 0; i <= 2; i++) { + const c1 = parseInt(color1.substring(1 + i * 2, 3 + i * 2), 16) + const c2 = parseInt(color2.substring(1 + i * 2, 3 + i * 2), 16) + const c = Math.round(c1 * weight + c2 * (1 - weight)) + color += c.toString(16).padStart(2, '0') + } + return color +} + +/** + * getCssColorVariable + * @description 获取css变量的颜色值 + * @param colorVariable css变量名 + * @param opacity 透明度 + * @returns {string} 颜色值 + * @example getCssColorVariable('--el-color-primary', 0.5) + * @example getCssColorVariable('--el-color-primary') + * @example getCssColorVariable() + */ +export const getCssColorVariable = ( + colorVariable: string = '--el-color-primary', + opacity?: number +) => { + const colorValue = getComputedStyle(document.documentElement) + .getPropertyValue(colorVariable) + .trim() + if (colorValue) { + return opacity ? hexToRGB(colorValue, opacity) : colorValue + } + return '' +}