From 00cac6a831c2a0bb2f8a9df8b9264f1cad13ddde Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E8=B4=A2=E5=AF=8C?= <1501583478@qq.com>
Date: Tue, 26 Dec 2023 12:00:55 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20el-button=E7=BB=84=E4=BB=B6=E5=92=8C?=
 =?UTF-8?q?=E5=85=B6=E4=BB=96=E9=83=A8=E5=88=86=E4=BD=BF=E7=94=A8=E5=88=B0?=
 =?UTF-8?q?=E7=9B=B8=E5=85=B3=E5=8F=98=E9=87=8F=E7=9A=84=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E6=97=A0=E6=B3=95=E9=80=82=E9=85=8D=E4=B8=BB=E9=A2=98=E8=89=B2?=
 =?UTF-8?q?=E5=8F=98=E5=8C=96=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/store/modules/app.ts | 14 ++++++++++++++
 src/utils/color.ts       | 19 +++++++++++++++++++
 2 files changed, 33 insertions(+)

diff --git a/src/store/modules/app.ts b/src/store/modules/app.ts
index c5459ea..4126dcf 100644
--- a/src/store/modules/app.ts
+++ b/src/store/modules/app.ts
@@ -1,6 +1,7 @@
 import { defineStore } from 'pinia'
 import { store } from '../index'
 import { setCssVar, humpToUnderline } from '@/utils'
+import { mix } from '@/utils/color'
 import { ElMessage, ComponentSize } from 'element-plus'
 
 interface AppState {
@@ -239,6 +240,7 @@ export const useAppStore = defineStore('app', {
         document.documentElement.classList.add('light')
         document.documentElement.classList.remove('dark')
       }
+      this.setPrimaryLight()
     },
     setCurrentSize(currentSize: ComponentSize) {
       this.currentSize = currentSize
@@ -253,9 +255,21 @@ 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
+    },
+    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))
+      }
     }
   },
   persist: true
diff --git a/src/utils/color.ts b/src/utils/color.ts
index 6888583..387ffc6 100644
--- a/src/utils/color.ts
+++ b/src/utils/color.ts
@@ -151,3 +151,22 @@ const subtractLight = (color: string, amount: number) => {
   const c = cc < 0 ? 0 : cc
   return c.toString(16).length > 1 ? c.toString(16) : `0${c.toString(16)}`
 }
+
+/**
+ * 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
+}