feat(color-picker): 支持吸色（EyeDropper API）#2585
Open
ceilf6 wants to merge 2 commits into
Open
Conversation
在颜色选择器面板中提供浏览器原生吸色能力，允许用户从页面任意位置取色， 无需在面板中手动调整色值。 - js/color-picker/eyedropper.ts：封装 EyeDropper API，提供 isEyedropperSupported 能力探测与 openEyedropper 调用方法（支持 AbortSignal 取消），通过 globalThis 读取构造函数以兼容浏览器/Worker/Node 测试环境，并避免与 lib.dom 内置类型冲突 - style/web：新增 .t-color-picker__eyedropper 按钮样式与变量，复用 __icon 视觉语言 - docs：补充 enableEyedropper 属性文档（中英文）与吸色交互设计说明 - test：新增单元测试覆盖支持/不支持/signal 透传/异常等路径 - .eslintrc.js：补充 globalThis 全局声明 各框架（vue-next/react/web-vue-next）随后以子模块形式消费本仓库的 JS 与样式， 在面板头部按 enableEyedropper 渲染吸色按钮，吸到的颜色经既有 onChange / v-model 回填。 Closes Tencent#2568 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
There was a problem hiding this comment.
Pull request overview
为 ColorPicker 在公共层补齐浏览器原生 EyeDropper API（吸色）能力封装，并提供对应样式与文档/测试支撑，供各框架仓库在渲染层按 enableEyedropper 开关接入。
Changes:
- 新增
isEyedropperSupported/openEyedropper封装并从js/color-picker导出 - 新增吸色按钮样式与 Less 变量
- 增补中英文文档示例段与单元测试覆盖
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 3 comments.
Show a summary per file
| File | Description |
|---|---|
js/color-picker/eyedropper.ts |
新增 EyeDropper API 封装与能力探测/调用方法 |
js/color-picker/index.ts |
导出 eyedropper 能力供外部消费 |
style/web/components/color-picker/_index.less |
新增 __eyedropper 吸色按钮样式 |
style/web/components/color-picker/_var.less |
新增吸色按钮相关设计变量 |
docs/web/api/color-picker.md |
中文 API 文档新增“支持吸色”示例说明与占位 demo |
docs/web/api/color-picker.en-US.md |
英文 API 文档新增“Color Picker with Eyedropper”示例说明与占位 demo |
test/unit/color-picker/eyedropper.test.ts |
新增 eyedropper 封装的单元测试用例 |
.eslintrc.js |
ESLint globals 增加 globalThis 以避免 no-undef |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Comment on lines
+34
to
+46
| const getEyeDropperConstructor = (): EyeDropperConstructor | undefined => { | ||
| if (typeof globalThis === 'undefined') { | ||
| return undefined; | ||
| } | ||
| return (globalThis as unknown as { EyeDropper?: EyeDropperConstructor }).EyeDropper; | ||
| }; | ||
|
|
||
| /** | ||
| * 判断当前环境是否支持吸色（EyeDropper API） | ||
| * @returns | ||
| */ | ||
| export const isEyedropperSupported = (): boolean => typeof getEyeDropperConstructor() === 'function'; | ||
|
|
Comment on lines
+60
to
+63
| flex-shrink: 0; | ||
| width: @color-picker-eyedropper-size; | ||
| height: @color-picker-eyedropper-size; | ||
| font-size: @color-picker-icon-font-size; |
| Component: true, | ||
| getRegExp: true, | ||
| NodeJS: true, | ||
| globalThis: true, |
Author
|
@ceilf6/repo-guard CR |
Author
代码评审报告: feat(color-picker): 支持吸色（EyeDropper API）风险等级: 低 级联分析
问题发现
行级发现
Karpathy 评审
缺失覆盖
|
- getEyeDropperConstructor 过滤非函数值，避免 new 抛通用 TypeError；
isEyedropperSupported 简化为判断构造函数是否存在，两者状态一致
- openEyedropper 补充 reject 语义说明（不支持 vs 原生异常透传）
- 删除未使用的 @color-picker-eyedropper-margin-left 变量
- .eslintrc.js 改用 env.es2020 声明 globalThis（只读），替代手动 writable 全局
- 移除文档中 {{ eyedropper }} demo 占位符，避免下游站点构建报 demo not found
- 测试补充：非函数 EyeDropper 边界 + isSupported/openEyedropper 一致性用例；
stubEyeDropper 增加注释说明为何用 function 而非 class
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
Author
|
感谢 @ceilf6/repo-guard 与 @copilot 的评审，已按意见在 e86985f 逐项处理： Copilot
repo-guard
关于"缺失覆盖"
验证： |
Author
代码评审报告: feat(color-picker): 支持吸色（EyeDropper API）风险等级: 低 级联分析
问题发现无 blocking findings。 行级发现
Karpathy 评审
缺失覆盖
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🤔 这个 PR 的性质是？
🔗 相关 Issue
ref #2568
💡 需求背景和解决方案
背景
Issue #2568 希望颜色选择器支持吸色：用户上传背景图后调整页面背景色时，希望能直接从页面中吸取颜色，而不是在面板里手动调整色值。浏览器已提供原生的 EyeDropper API（Chrome 95+、Edge 95+），本 PR 在公共库层面补齐该能力，供各框架实现消费。
方案
本仓库是各框架（vue-next / react / web-vue-next）共享的 JS 与样式层，组件渲染逻辑在各框架仓库实现，因此本 PR 只交付公共层：
JS 能力封装
js/color-picker/eyedropper.tsisEyedropperSupported()：能力探测，组件据此决定是否渲染吸色按钮（不支持的环境不渲染入口，避免出现不可用按钮）。openEyedropper(signal?)：调用原生EyeDropper.open()，返回sRGBHex；支持透传AbortSignal以便取消。JSDoc 标注 reject 语义（不支持 vs 原生异常透传）。getEyeDropperConstructor通过globalThis读取并过滤非函数值，兼容浏览器 / Worker / Node 测试环境，并通过本地类型声明避免与lib.dom内置EyeDropper类型冲突。js/color-picker/index.ts导出。样式
style/web/components/color-picker/.t-color-picker__eyedropper按钮样式（_index.less）与变量（_var.less），复用既有__icon视觉语言（次级文字色、hover 浅色容器底、圆角），点击热区略大于色板操作图标。enableEyedropper在面板头部放置；不支持环境整体不渲染。文档与设计规范
docs/web/api/color-picker.md（中 / 英）新增「支持吸色的颜色选择器」说明段，描述enableEyedropper的行为与浏览器兼容性（demo 由各框架仓库补充，未在本 PR 放占位符以免下游站点构建报错）。docs/web/_design/颜色选择器 ColorPicker.md新增「吸色」设计指南：何时使用、交互说明（系统级取色镜、Esc 取消、经onChange/v-model回填、渐变模式下回填到当前色点）、组成。测试
test/unit/color-picker/eyedropper.test.ts：覆盖不支持 / 支持 /signal透传 /open异常 / 非函数 EyeDropper 边界与isSupported↔openEyedropper一致性，共 8 个用例。eslint 配置
.eslintrc.js：在env启用es2020: true（自动以只读方式声明globalThis等标准全局），替代手动globals条目。API 用法（各框架实现侧）
enableEyedropper（Boolean，默认false）：是否展示吸色按钮。仅在支持 EyeDropper API 的浏览器中渲染。onChange/v-model通道回填，与手动选色行为一致；渐变模式下回填到当前选中的渐变色点。📝 更新日志
isEyedropperSupported/openEyedropper与.t-color-picker__eyedropper样式，供各框架实现按enableEyedropper渲染吸色按钮☑️ 请求合并前的自查清单
验证
npm run lint（stylelint + prettier + eslint + typecheck）通过npm run test:unit通过（28 文件 / 554 用例，含本次新增 8 个）🤖 Generated with Claude Code