From eb28731f2189868bcae15a67e51f02815432f0c5 Mon Sep 17 00:00:00 2001
From: pipipi-pikachu <pipipi_pikachu@163.com>
Date: Fri, 17 Jun 2022 21:29:23 +0800
Subject: [PATCH] =?UTF-8?q?refactor:=20=E4=BC=98=E5=85=88=E4=BD=BF?=
 =?UTF-8?q?=E7=94=A8=E6=B5=8F=E8=A7=88=E5=99=A8=E5=8E=9F=E7=94=9F=E5=8F=96?=
 =?UTF-8?q?=E8=89=B2=E5=90=B8=E7=AE=A1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components.d.ts                  |  2 ++
 src/components/ColorPicker/index.vue | 31 ++++++++++++++++++++++++++--
 src/plugins/icon.ts                  |  2 ++
 3 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/components.d.ts b/src/components.d.ts
index f865f0fe..dc11a85d 100644
--- a/src/components.d.ts
+++ b/src/components.d.ts
@@ -109,6 +109,7 @@ import {
   Delete,
   Square,
   Round,
+  Needle,
 } from '@icon-park/vue-next'
 
 declare module 'vue' {
@@ -252,6 +253,7 @@ declare module 'vue' {
     IconDelete: typeof Delete
     IconSquare: typeof Square
     IconRound: typeof Round
+    IconNeedle: typeof Needle
   }
 }
 
diff --git a/src/components/ColorPicker/index.vue b/src/components/ColorPicker/index.vue
index dd59ba3c..cb650be9 100644
--- a/src/components/ColorPicker/index.vue
+++ b/src/components/ColorPicker/index.vue
@@ -20,7 +20,7 @@
 
     <div class="picker-field">
       <EditableInput class="input" :value="color" @colorChange="value => changeColor(value)" />
-      <div class="straw" @click="pickColor()"><IconPlatte /></div>
+      <div class="straw" @click="openEyeDropper()"><IconNeedle /></div>
     </div>
 
     <div class="picker-presets">
@@ -203,7 +203,34 @@ const changeColor = (value: ColorFormats.RGBA | ColorFormats.HSLA | ColorFormats
   updateRecentColorsCache()
 }
 
-const pickColor = () => {
+// 打开取色吸管
+// 检查环境是否支持原生取色吸管，支持则使用原生吸管，否则使用自定义吸管
+const openEyeDropper = () => {
+  const isSupportedEyeDropper = 'EyeDropper' in window
+
+  if (isSupportedEyeDropper) browserEyeDropper()
+  else customEyeDropper()
+}
+
+// 原生取色吸管
+const browserEyeDropper = () => {
+  message.success('按 ESC 键关闭取色吸管')
+
+  // eslint-disable-next-line
+  const eyeDropper = new (window as any).EyeDropper()
+  eyeDropper.open().then((result: { sRGBHex: string }) => {
+    const tColor = tinycolor(result.sRGBHex)
+    hue.value = tColor.toHsl().h
+    color.value = tColor.toRgb()
+
+    updateRecentColorsCache()
+  }).catch(() => {
+    message.success('关闭取色吸管')
+  })
+}
+
+// 基于 Canvas 的自定义取色吸管
+const customEyeDropper = () => {
   const targetRef: HTMLElement | null = document.querySelector('.canvas')
   if (!targetRef) return
 
diff --git a/src/plugins/icon.ts b/src/plugins/icon.ts
index 75460fa8..f0468963 100644
--- a/src/plugins/icon.ts
+++ b/src/plugins/icon.ts
@@ -106,6 +106,7 @@ import {
   Delete,
   Square,
   Round,
+  Needle,
 } from '@icon-park/vue-next'
 
 const icons = {
@@ -213,6 +214,7 @@ const icons = {
   Delete,
   Square,
   Round,
+  Needle,
 }
 
 export default {