Skip to content

[0928] 用 QML 重构调色板 - #4408

Merged
da-liii merged 13 commits into
mainfrom
pigmagicfly/0928/qml-color-picker
Sep 1, 2026
Merged

[0928] 用 QML 重构调色板#4408
da-liii merged 13 commits into
mainfrom
pigmagicfly/0928/qml-color-picker

Conversation

@PinkMagicFly

@PinkMagicFly PinkMagicFly commented Aug 21, 2026

Copy link
Copy Markdown
Contributor

任务

0928:用 QML 重构调色板,功能不能缺失,样式参考现有 QML 弹窗体系并更具现代感。

What

将 Qt 原生 QColorDialog 实现的调色板替换为项目统一 QML 弹窗体系下的 ColorPicker.qml,保持 widget-color-picker / interactive-color / interactive-background 调用链不变。

Why

  • 旧实现直接调用 QColorDialog::getColor,风格与 Mogan 正在迁移的 QML 模态对话框体系不一致;
  • QML 版本复用 DialogShell / DialogButtons / Theme 等原子组件,统一暗色/亮色、DPI 缩放、圆角与按钮交互。

How

  1. 新增 src/Plugins/Qt/qml/ColorPicker.qml:HSV 取色面板 + 色相条、HSV/RGB/HEX 数值输入、基础色块、实时预览、OK/Cancel;
  2. 新增 src/Plugins/Qt/ColorPickerBridge.*:屏幕取色(抓屏快照 + 全屏十字光标 overlay 点选,Esc 取消;macOS 需屏幕录制权限,未授权返回空串,与 Qt 自带行为一致);
  3. QTMQmlDialog.cpp/hpp 新增阻塞式 glue 入口 cpp_color_picker_dialog(title, proposals, pickPattern),走 run_qml_dialog exec 引擎,OK 返回 (tuple "#rrggbb")、Cancel 返回空 tuple;
  4. qt_color_picker_widget.cpp/hppshowDialog() 改调 cpp_color_picker_dialog(),解包 sel[0] 回调 scheme;
  5. 自定义颜色 16 格增删:按序填空位、满格拒绝并显示提示行;OK 时经 preference color picker custom colors 跨会话持久化,Cancel 不保存;
  6. 文案走 qt_translate 注入,zh_CN 字典按字母序新增 6 条;
  7. ai-docs/qml/qml-dialog.html 新增 ColorPicker 设计稿面板;qml_load_test.cpp 新增 test_color_picker_loads

功能对照(旧 QColorDialog → 新 QML)

  • Basic colors 色块 ✅(预设 20 色)
  • HSV / RGB / HTML(HEX) 数值输入 ✅
  • Custom colors + Add to Custom Colors ✅(16 格,跨会话持久化;新增删除功能与满员提示)
  • Pick Screen Color ✅(ColorPickerBridge 抓屏取色)

验证

  • xmake b stem 构建通过 ✅
  • xmake b qml_load_test && xmake r qml_load_test:15 passed, 0 failed ✅
  • gf fmt --check:OK ✅
  • 测试钩子:MOGAN_TEST_COLOR_PICKER=<hex>|cancel,返回形状与真实路径一致
  • 手动 GUI 验证(由用户完成)✅:确认按钮应用颜色、弹窗尺寸、右栏 HSV/RGB/HEX 输入完整显示、自定义颜色添加/删除/满员提示均通过

测试入口

  • 菜单 Format → Color → Palette、Document → Color / Background color 等入口打开调色板
  • MOGAN_TEST_COLOR_PICKER=ff0000 / cancel 可绕过弹窗做契约测试

追加修复(屏幕取色)

  • Linux (X11 + NVIDIA) 点击 Pick screen color 段错误(栈顶 QRhi::endOffscreenFrame):原实现在 QML 事件处理器内对取色 overlay 跑嵌套 exec(),嵌套事件循环期间宿主弹窗的 QQuickWidget 被迫重绘导致 QRhi 崩溃。改为异步:overlay 用 open() 非嵌套模态,结果经 screenColorPicked(QString) 信号回流(QML 侧 Connections 接收);取色期间隐藏宿主弹窗,结束后恢复。

  • Wayland 黑屏:Wayland 不允许应用任意抓屏(grabWindow 返回空图/全黑快照),全屏 overlay 显示全黑。新增 canPickScreen 只读属性,Wayland 下隐藏「Pick screen color」按钮;不支持平台调用直接回空串兜底。

  • 新增 tests/Plugins/Qt/color_picker_bridge_test.cpp(5 passed:平台门控、点击回传合法 #rrggbb、Esc 取消回空串、宿主隐藏/恢复);qml_load_test 15 passed;xmake b stem 通过。

  • macOS 点击拾取屏幕颜色毫无反应(人工验证反馈):macOS 10.15+ 抓屏需「屏幕录制」权限,未授权时 grabWindow 静默返回空图(无任何系统提示),QML 收到空串又无反馈,表现为点击毫无反应。现先 CGPreflightScreenCaptureAccess 预检,未授权即 CGRequestScreenCaptureAccess 调起系统授权引导(同 WPS 取色行为),并经新信号 screenPickUnavailable 在弹窗内显示提示(macOS 文案含「请在系统设置中允许后重启应用」,zh_CN 字典已补);同时移除 QDialog::open()+WA_DeleteOnClose 的 Qt 未定义行为组合(改 show()+finished→deleteLater)。三端复查:Linux/X11 路径不变(xcb 几何断言保留)、Wayland 仍隐藏按钮、Windows 无需权限直接可用。新增测试钩子 MOGAN_TEST_PICK_FAKE_SNAPSHOT=#rrggbb 合成纯色快照,macOS CI/本地无权限环境也可真实覆盖 overlay 点击/Esc 路径(本机 macOS 15.6 实测通过)。授权对象:xmake run 启动给终端(iTerm2)授权;.app 启动给 MoganSTEM.app 授权(adhoc 签名,重编译后需在系统设置重新勾选)。

  • 自定义颜色格子 2 行与按钮对齐、格子同尺寸基础颜色(人工验证反馈):标签独占一行(同基础颜色),16 格 2 行 × 8 列、格子边长直接取 basicGrid.cellW(与基础颜色格子完全同尺寸),右侧「添加/删除」两按钮各占半高居中、分别对齐上下两行格子的行中心;按钮文案由「添加到自定义颜色/删除自定义颜色」缩短为「添加颜色/删除颜色」(zh_CN 字典同步增删条目,段落标题提供语境)。「拾取屏幕颜色」按钮从底部移到右栏颜色预览的下一行(Wayland 下仍隐藏),不可用提示行随之上移;主编辑区高 280→292,弹窗高 720→750(QML 与 C++ 同步)。

  • 验证(rebase 到最新 main 后复跑):qml_load_test 17/17、color_picker_bridge_test 5/5、gf fmt 无变更;GUI 手动验证由用户按 macOS 授权流程(授权后需重启应用)进行。

  • 底部布局(人工验证反馈):弹窗高度改为随正文自适应(Version 弹窗同 autofit_height 机制,常态约 649,消除底部留白);OK/Cancel 由居中改右对齐;「取色不可用」「自定义颜色已满」提示挪至底部与按钮同行左侧(单行省略,不占额外行高,避免超出打开时锁定的高度)。

  • 整体收紧(人工验证反馈,两轮迭代):弹窗 560→430 宽,基础/自定义颜色格子 47.5→34.5 联动缩小(自定义格子边长始终取 basicGrid.cellW);MiniButton 原子新增 small 档(Theme.smallBtnH 32 / fontSmall 12,介于 mini 28 与 DialogButtons 主按钮 40 之间,mini/normal 档不动),「拾取屏幕颜色」「添加颜色」「删除颜色」三按钮统一该档;「基本颜色」「自定义颜色」段标题放大到正文字号;修复无彩色(白/黑/灰)hsvHue 为 -1 时 H 输入框显示 -359、色相旋钮跑到面板外的问题(safeHue 按 0 处理)。

  • 验证(推送前复跑):qml_load_test 17/17、color_picker_bridge_test 5/5、gf fmt 无变更。

@PinkMagicFly PinkMagicFly reopened this Aug 24, 2026
@PinkMagicFly
PinkMagicFly force-pushed the pigmagicfly/0928/qml-color-picker branch from 4df5e0d to be18afa Compare August 27, 2026 08:10
@PinkMagicFly PinkMagicFly reopened this Aug 31, 2026
@PinkMagicFly
PinkMagicFly force-pushed the pigmagicfly/0928/qml-color-picker branch from be18afa to 362e323 Compare August 31, 2026 09:52

@da-liii da-liii left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@da-liii
da-liii merged commit 66ee9d8 into main Sep 1, 2026
6 checks passed
@da-liii
da-liii deleted the pigmagicfly/0928/qml-color-picker branch September 1, 2026 10:27
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