From f7b2349e32f663c8ca9b8b749610ab7f9dcfc756 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=BF=99=E4=B9=88=E9=9A=BE=E6=BC=94?=
 <jiangchengshi@gmail.com>
Date: Fri, 7 Jun 2024 12:54:46 +0800
Subject: [PATCH] =?UTF-8?q?=E3=80=90=E6=9B=B4=E6=96=B0=E3=80=91ColorPicker?=
 =?UTF-8?q?=20id=E5=B1=9E=E6=80=A7=E7=B2=BE=E5=87=86=E6=8E=A7=E5=88=B6?=
 =?UTF-8?q?=E5=85=83=E7=B4=A0=20&=20=E6=96=87=E6=9C=AC=E9=A2=9C=E8=89=B2?=
 =?UTF-8?q?=E4=B8=8E=E8=83=8C=E6=99=AF=E9=A2=9C=E8=89=B2=E5=8F=8D=E5=B7=AE?=
 =?UTF-8?q?=E6=98=BE=E7=A4=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/ColorPicker/index.vue      | 61 +++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/snowy-admin-web/src/components/ColorPicker/index.vue b/snowy-admin-web/src/components/ColorPicker/index.vue
index 27d18f27..0e8f197c 100644
--- a/snowy-admin-web/src/components/ColorPicker/index.vue
+++ b/snowy-admin-web/src/components/ColorPicker/index.vue
@@ -1,5 +1,5 @@
 <template>
-	<div class="snowy-color-picker" @click="forceResize">
+	<div class="snowy-color-picker" :id="id" @click="forceResize">
 		<color-picker v-bind="$attrs" format="hex" :pureColor="props.value" @update:pureColor="update" />
 	</div>
 </template>
@@ -7,6 +7,7 @@
 <script setup>
 	import { ColorPicker } from 'vue3-colorpicker'
 	import 'vue3-colorpicker/style.css'
+	import tool from '@/utils/tool'
 
 	const emit = defineEmits(['update:value'])
 
@@ -17,6 +18,8 @@
 		}
 	})
 
+	const id = tool.snowyUuid()
+
 	const forceResize = () => {
 		window.dispatchEvent(new Event('resize'))
 	}
@@ -29,20 +32,70 @@
 		showTxt(props.value)
 	})
 	const showTxt = (val) => {
-		const currentColor = document.querySelector('.current-color')
+		// 根据原色id，class获取元素
+		const currentColor = document.querySelector('#' + id + ' > .vc-color-wrap > .current-color')
 		if (currentColor) {
 			currentColor.textContent = val
 		}
+
+		// 改变文字颜色
+		currentColor.style.color = changeTextColor(currentColor.style.backgroundColor)
+	}
+
+	/**
+	 * 改变文字颜色
+	 * @param backgroundColor 背景色
+	 */
+	const changeTextColor = (backgroundColor) => {
+		const backgroundHexColor = backgroundColor.length > 7 ? convertRGBToHex(backgroundColor) : backgroundColor
+
+		let hex = backgroundHexColor
+		// 如果当前传入的参数以 # 开头,去除当前的
+		if (hex.startsWith('#')) {
+			hex = hex.substring(1)
+		}
+		// 如果当前传入的是 3 位小数值，直接转换为 6 位进行处理
+		if (hex.length === 3) {
+			hex = [hex[0], hex[0], hex[1], hex[1], hex[2], hex[2]].join('')
+		}
+		if (hex.length !== 6) {
+			throw new Error('Invalid background color.' + backgroundHexColor)
+		}
+
+		const r = parseInt(hex.slice(0, 2), 16)
+		const g = parseInt(hex.slice(2, 4), 16)
+		const b = parseInt(hex.slice(4, 6), 16)
+
+		if ([r, g, b].some((x) => Number.isNaN(x))) {
+			throw new Error('Invalid background color.' + backgroundHexColor)
+		}
+
+		return r * 0.299 + g * 0.587 + b * 0.114 > 186 ? '#000' : '#fff'
+	}
+	const toHex = (x) => ('0' + parseInt(x).toString(16)).slice(-2)
+	/**
+	 * RGB 转换为 HEX
+	 * @param rgb RGB 颜色
+	 */
+	const convertRGBToHex = (rgb) => {
+		const bg = rgb.match(/^rgb\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)$/)
+		// 返回空字符串，在后面判断长度为 6 时候会报错。不在此处进行操作
+		if (!bg) {
+			return ''
+		}
+		return '#' + toHex(bg[1]) + toHex(bg[2]) + toHex(bg[3])
 	}
 </script>
 
 <style lang="less">
 	.snowy-color-picker {
+		width: 100%;
+
 		.vc-color-wrap {
-			width: auto;
+			width: 100%;
 		}
+
 		.current-color {
-			color: #fff;
 			padding: 0 10px;
 		}
 	}