[犀牛鸟]feat(color-picker): add native EyeDropper API support

packages/components/color-picker/__tests__/__snapshots__/color-picker-panel.test.tsx.snap

@@ -123,6 +123,40 @@ exports[`ColorPickerPanel > :props > :colorModes[monochrome,linear-gradient] 1`]
           style="background: rgb(0, 31, 151);"
         />
       </div>
+      <div
+        class="t-color-picker__eyedropper"
+      >
+        <svg
+          class="t-icon t-icon-sip"
+          fill="none"
+          height="1em"
+          style="fill: none;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="sip"
+          >
+            <path
+              d="M7.5 21H3L3.07202 16.5L13.7602 5.76025L18.25 10.25L7.5 21Z"
+              fill="transparent"
+              id="fill1"
+            />
+            <path
+              d="M15.7523 3.75805C16.9925 2.51181 19.009 2.50938 20.2522 3.75264C21.4934 4.99378 21.4934 7.00608 20.2522 8.24722L18.2495 10.2499L13.7598 5.76016L15.7523 3.75805Z"
+              fill="transparent"
+              id="fill2"
+            />
+            <path
+              d="M13 4.99993L19 10.9999M3.07202 16.4999L15.7527 3.75805C16.993 2.51181 19.0094 2.50938 20.2527 3.75264C21.4939 4.99378 21.4939 7.00608 20.2527 8.24722L7.5 20.9999H3L3.07202 16.4999Z"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
     <div
       class="t-color-picker__format"
@@ -1030,6 +1064,40 @@ exports[`ColorPickerPanel > :props > :colorModes[monochrome,linear-gradient] 2`]
           class="t-color-picker__sliders-preview-inner"
         />
       </div>
+      <div
+        class="t-color-picker__eyedropper"
+      >
+        <svg
+          class="t-icon t-icon-sip"
+          fill="none"
+          height="1em"
+          style="fill: none;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="sip"
+          >
+            <path
+              d="M7.5 21H3L3.07202 16.5L13.7602 5.76025L18.25 10.25L7.5 21Z"
+              fill="transparent"
+              id="fill1"
+            />
+            <path
+              d="M15.7523 3.75805C16.9925 2.51181 19.009 2.50938 20.2522 3.75264C21.4934 4.99378 21.4934 7.00608 20.2522 8.24722L18.2495 10.2499L13.7598 5.76016L15.7523 3.75805Z"
+              fill="transparent"
+              id="fill2"
+            />
+            <path
+              d="M13 4.99993L19 10.9999M3.07202 16.4999L15.7527 3.75805C16.993 2.51181 19.0094 2.50938 20.2527 3.75264C21.4939 4.99378 21.4939 7.00608 20.2527 8.24722L7.5 20.9999H3L3.07202 16.4999Z"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
     <div
       class="t-color-picker__format"
@@ -1469,6 +1537,40 @@ exports[`ColorPickerPanel > :props > :colorModes[monochrome,linear-gradient] 3`]
           class="t-color-picker__sliders-preview-inner"
         />
       </div>
+      <div
+        class="t-color-picker__eyedropper"
+      >
+        <svg
+          class="t-icon t-icon-sip"
+          fill="none"
+          height="1em"
+          style="fill: none;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="sip"
+          >
+            <path
+              d="M7.5 21H3L3.07202 16.5L13.7602 5.76025L18.25 10.25L7.5 21Z"
+              fill="transparent"
+              id="fill1"
+            />
+            <path
+              d="M15.7523 3.75805C16.9925 2.51181 19.009 2.50938 20.2522 3.75264C21.4934 4.99378 21.4934 7.00608 20.2522 8.24722L18.2495 10.2499L13.7598 5.76016L15.7523 3.75805Z"
+              fill="transparent"
+              id="fill2"
+            />
+            <path
+              d="M13 4.99993L19 10.9999M3.07202 16.4999L15.7527 3.75805C16.993 2.51181 19.0094 2.50938 20.2527 3.75264C21.4939 4.99378 21.4939 7.00608 20.2527 8.24722L7.5 20.9999H3L3.07202 16.4999Z"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
     <div
       class="t-color-picker__format"
@@ -2368,6 +2470,40 @@ exports[`ColorPickerPanel > :ui > :mount 1`] = `
           style="background: rgb(0, 31, 151);"
         />
       </div>
+      <div
+        class="t-color-picker__eyedropper"
+      >
+        <svg
+          class="t-icon t-icon-sip"
+          fill="none"
+          height="1em"
+          style="fill: none;"
+          viewBox="0 0 24 24"
+          width="1em"
+        >
+          <g
+            id="sip"
+          >
+            <path
+              d="M7.5 21H3L3.07202 16.5L13.7602 5.76025L18.25 10.25L7.5 21Z"
+              fill="transparent"
+              id="fill1"
+            />
+            <path
+              d="M15.7523 3.75805C16.9925 2.51181 19.009 2.50938 20.2522 3.75264C21.4934 4.99378 21.4934 7.00608 20.2522 8.24722L18.2495 10.2499L13.7598 5.76016L15.7523 3.75805Z"
+              fill="transparent"
+              id="fill2"
+            />
+            <path
+              d="M13 4.99993L19 10.9999M3.07202 16.4999L15.7527 3.75805C16.993 2.51181 19.0094 2.50938 20.2527 3.75264C21.4939 4.99378 21.4939 7.00608 20.2527 8.24722L7.5 20.9999H3L3.07202 16.4999Z"
+              id="stroke1"
+              stroke="currentColor"
+              stroke-linecap="square"
+              stroke-width="2"
+            />
+          </g>
+        </svg>
+      </div>
     </div>
     <div
       class="t-color-picker__format"

packages/components/color-picker/color-picker-panel-props.ts

@@ -68,6 +68,11 @@ export default {
     type: String,
     default: '',
   },
+  /** 是否显示拾色器功能 */
+  showEyeDropper: {
+    type: Boolean,
+    default: true,
+  },
   /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
   onChange: Function as PropType<TdColorPickerPanelProps['onChange']>,
   /** 调色板控制器的值变化时触发，`context.color` 指调色板控制器的值 */

packages/components/color-picker/components/panel/index.tsx

@@ -9,6 +9,8 @@ import {
   GradientColorPoint,
   initColorFormat,
   TD_COLOR_USED_COLORS_MAX_SIZE,
+  // PR合并后需要从子包导入
+  // getEyeDropper,
 } from '@tdesign/common-js/color-picker/index';
 import { useCommonClassName, useConfig, useDefaultValue, useVModel } from '@tdesign/shared-hooks';
 import props from '../../color-picker-panel-props';
@@ -22,6 +24,9 @@ import HueSlider from './hue';
 import LinearGradient from './linear-gradient';
 import SaturationPanel from './saturation';
 import SwatchesPanel from './swatches';
+// PR合并后需要删除这个导入语句
+import { getEyeDropper } from '../../utils/eyedropper';
+import { SipIcon } from 'tdesign-icons-vue-next';
 
 export default defineComponent({
   name: 'ColorPanel',
@@ -229,6 +234,17 @@ export default defineComponent({
       emitColorChange(trigger);
     };
 
+    const openEyeDropper = async (trigger?: ColorPickerChangeTrigger): Promise<void> => {
+      const eyeDropper = getEyeDropper();
+
+      const result = await eyeDropper.open();
+      if (!result) {
+        return;
+      }
+      color.value.update(result.sRGBHex);
+      emitColorChange(trigger);
+    };
+
     return () => {
       const baseProps = {
         color: color.value,
@@ -317,6 +333,11 @@ export default defineComponent({
                   />
                 </div>
               ) : null}
+              {props.showEyeDropper ? (
+                <div class={`${baseClassName.value}__eyedropper`} onClick={() => openEyeDropper('eyedropper')}>
+                  <SipIcon />
+                </div>
+              ) : null}
             </div>
 
             <FormatPanel {...props} color={color.value} format={formatModel.value} onInputChange={handleInputChange} />

packages/components/color-picker/props.ts

@@ -93,6 +93,11 @@ export default {
     type: String,
     default: '',
   },
+  /** 是否显示拾色器功能 */
+  showEyeDropper: {
+    type: Boolean,
+    default: true,
+  },
   /** 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源 */
   onChange: Function as PropType<TdColorPickerProps['onChange']>,
   /** 清空按钮点击时触发 */

packages/components/color-picker/type.ts

@@ -198,7 +198,8 @@ export type ColorPickerChangeTrigger =
   | 'palette-alpha-bar'
   | 'input'
   | 'preset'
-  | 'recent';
+  | 'recent'
+  | 'eyedropper';
 
 export interface ColorObject {
   alpha: number;

packages/components/color-picker/utils/eyedropper.ts

@@ -0,0 +1,45 @@
+/**
+ * @see https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper
+ * PR合并后 该文件可以删除
+ * */
+
+declare global {
+  interface Window {
+    EyeDropper?: new () => {
+      open(options?: EyeDropperOpenOptions): Promise<EyeDropperOpenResult | undefined>;
+    };
+  }
+}
+
+export interface EyeDropperOpenResult {
+  sRGBHex: string;
+}
+
+export interface EyeDropperOpenOptions {
+  signal?: AbortSignal;
+}
+
+export const getEyeDropper = () => {
+  if (typeof window === 'undefined') return undefined;
+
+  const EyeDropperClass = window.EyeDropper;
+  if (EyeDropperClass === undefined) {
+    // 浏览器不支持 EyeDropper 兼容性:https://developer.mozilla.org/zh-CN/docs/Web/API/EyeDropper#%E6%B5%8F%E8%A7%88%E5%99%A8%E5%85%BC%E5%AE%B9%E6%80%A7
+    return undefined;
+  }
+
+  const eyeDropper = new EyeDropperClass();
+  const originOpen = eyeDropper.open.bind(eyeDropper);
+  eyeDropper.open = async (options?: EyeDropperOpenOptions) => {
+    try {
+      return await originOpen(options);
+    } catch (e) {
+      // 用户取消操作
+      if (e instanceof DOMException && e.name === 'AbortError') {
+        return undefined;
+      }
+      throw e;
+    }
+  };
+  return eyeDropper;
+};

packages/tdesign-vue-next/.changelog/pr-6830.md

@@ -0,0 +1,6 @@
+---
+pr_number: 6830
+contributor: yuxi-ovo
+---
+
+- fix(Swiper): 修复只有两个轮播图内容场景下切换逻辑错误的问题 @yuxi-ovo ([#6830](https://github.com/Tencent/tdesign-vue-next/pull/6830))