Skip to content

feat(color-picker): new component - #1055

Open
liweijie0812 wants to merge 29 commits into
developfrom
liweijie/cnb-issue-105/feat/color-picker
Open

feat(color-picker): new component#1055
liweijie0812 wants to merge 29 commits into
developfrom
liweijie/cnb-issue-105/feat/color-picker

Conversation

@liweijie0812

@liweijie0812 liweijie0812 commented Aug 27, 2026

Copy link
Copy Markdown
Collaborator

🤔 这个 PR 的性质是?

勾选规则:
1.只要有新增参数,就勾选”新特性提交“
2.只修改内部bug,未新增参数,才勾选”日常 bug 修复“
3.其他选项视具体改动判断

  • 日常 bug 修复
  • 新特性提交
  • 文档改进
  • 演示代码改进
  • 组件样式/交互改进
  • CI/CD 改进
  • 重构
  • 代码风格优化
  • 测试用例
  • 分支合并
  • 其他

🔗 相关 Issue

参考 tdesign-mobile-vue 新增颜色选择器组件,示例与 API 尽量对齐。
设计文档见 Spec:specs/009-color-picker/

💡 需求背景和解决方案

新增 TColorPicker 颜色选择器组件,API 与交互对齐 tdesign-mobile-vue TdColorPickerProps

  • 支持 base(仅系统预设色板)与 multiple(色板 + 色相条 + 透明条 + 系统预设色板)两种类型。
  • 支持 HEX / HEX8 / RGB / RGBA / HSL / HSLA / HSV / HSVA / CMYK / CSS 格式输出,enableAlpha 时自动升级为带 alpha 的格式。
  • 支持 swatchColors 自定义系统预设色板、clearable 清空、onPaletteBarChange 色板拖拽回调。
  • 新增纯 Dart 颜色工具类 TColorObject,无第三方依赖。
  • 新增主题 TColorPickerThemeData
  • 新增示例页与站点文档。
TColorPicker(
  value: '#0052D9',
  type: TColorPickerType.multiple,
  enableAlpha: true,
  onChanged: (result) {
    final (value, _) = result;
  },
  onPaletteBarChange: (color) {
    // 色板拖拽过程回调
  },
);

📝 更新日志

  • feat(ColorPicker): 新增颜色选择器组件

  • 本条 PR 不需要纳入 Changelog

☑️ 请求合并前的自查清单

⚠️ 请自检并全部勾选全部选项⚠️

  • 标题遵循 Conventional Commits 格式:type(<scope>?): 修改描述
    示例:fix(TBottomTabBar): 修复 iconText 模式底部溢出
  • “相关 Issue”处带上修复的 Issue 链接或无关联 Issue
  • 已添加对应的 Spec 链接,或已由 Review 确认本次改动无需 Spec
  • 相关文档已补充或无须补充

liweijie0812 and others added 18 commits August 21, 2026 23:42
colorScheme.dividerColor 在较新 Flutter 版本中已从 ColorScheme 移除,
改用 DividerTheme.of(context).color ?? colorScheme.outlineVariant 保持双版本兼容。
- 格式区由只读整串文本改为分段通道展示(RGB | 0 | 26 | 87 | 100%),格式名框+连体分段框,对齐 mobile-vue __format
- 色相条渐变 stop 对齐 mobile-vue 非均匀分布(17%/33%/50%/67%/83%)
- 滑块轨道包裹 thumb 区域、白圆底内嵌当前色圆点
- 透明条底改斜向棋盘格(6px 网格 #c5c5c5)
- 饱和度面板改三层渐变叠加(基色/白色横渐/黑色纵渐)
- 区块间距对齐 mobile-vue(16/20/28),swatch 改单行横向滚动、间距 12
- 清除按钮移至系统预设色彩标题行右侧
- 修复三处 num→double 隐式转型(clamp 补 toDouble())
- 展示按钮用 SizedBox 包裹展开为通栏宽度,对齐 mobile-vue popup 示例
  (新 TButton 契约下按钮收缩内容宽,原先纵向堆叠视觉不符)
- 拖拽取色改为弹窗内草稿值,「确定」才提交、「取消 / 蒙层」回显旧值,
  对齐 calendar 等示例的确认链路
- 文案统一使用 TText;站点文档弹窗示例同步
@tencent-adm

tencent-adm commented Aug 27, 2026

Copy link
Copy Markdown
Member

CLA assistant check
Thank you for your submission, we really appreciate it. Like many open source projects, we ask that you all sign our Contributor License Agreement before we can accept your contribution.
1 out of 3 committers have signed the CLA.

✅ liweijie0812
❌ npc/CodeBuddy(glm-5.3-flash)
❌ autofix-ci[bot]


npc/CodeBuddy(glm-5.3-flash) seems not to be a GitHub user. You need a GitHub account to be able to sign the CLA. If you have already a GitHub account, please add the email address used for this commit to your account.
You have signed the CLA already but the status is still pending? Let us recheck it.

@github-actions

github-actions Bot commented Aug 27, 2026

Copy link
Copy Markdown
Contributor

完成

Web Demo

APK 下载

autofix-ci Bot and others added 4 commits August 27, 2026 09:29
修复 check-flutter-component-contracts.mjs 报
'missing API manifest entry for site route: color-picker' 的问题:
- 在 tool/components.json 中为 color-picker 添加 API manifest 条目
- 新增生成的 example/assets/api/color-picker_api.md
- fix(color-picker): TColorPickerThemeData 注册进全局主题管道,主题子树注入生效
- fix(color-picker): HEX/HEX8/CSS 格式区补右端 alpha 固定段(对齐 getFormatList)
- fix(color-picker): 透明条棋盘格调整到彩色渐变 rail 下层,避免污染不透明区
- refactor(ColorPicker): onChanged 收敛为具名双参签名 (value, change)
- style(ColorPicker): 格式区文字与色板标题改用 placeholder 弱化色 Token
- test(ColorPicker): 补拖拽交互/主题注册/alpha 段用例并修正存量断言,
  新增 light/dark Golden 基线,ColorPicker 测试纳入 CI 门禁
@liweijie0812 liweijie0812 changed the title feat: add color picker feat(color-picker): new component Aug 28, 2026
liweijie0812 and others added 5 commits August 28, 2026 11:56
Resolve conflict in .cnb/.reusable-stages.yml: adopt develop's
.component-regression-tests mechanism and register color_picker into
run_component_regression.dart / check_component_coverage.dart.
- didUpdateWidget 外部受控 value 变化重新解析
- clearable + 空 swatchColors 的底部清除分支
- HSL/HSV/CMYK 格式分段展示
- 不可解析 swatch 颜色降级为透明
- 无 onPaletteBarChange 时色板拖拽安全
- TColorPickerThemeData copyWith/lerp 契约

修复组件回归覆盖率低于 95% 阈值。
新增 color_picker 演示页视觉回归测试并注册到视觉回归套件,
补齐 run_visual_regression_test.dart 中组件套件与视觉套件的同步校验。
PR #106 引入的 color_picker 弹窗示例使用了重构前 TPopupOptions.bottom
已删除的 titleWidget/cancelBuilder/confirmBuilder/closeOnOverlayClick 参数,
导致 flutter analyze 与 apk 构建失败。适配重构后的 API:

- 不传 headerBuilder 即无标题栏与按钮
- 点击遮罩关闭是 TPopupOverlayConfig 默认行为,无需显式配置
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants