Skip to content

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

Open
PinkMagicFly wants to merge 9 commits into
mainfrom
pigmagicfly/0928/qml-color-picker
Open

[0928] 用 QML 重构调色板#4408
PinkMagicFly wants to merge 9 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 通过。

@PinkMagicFly
PinkMagicFly force-pushed the pigmagicfly/0928/qml-color-picker branch from 4df5e0d to be18afa Compare August 27, 2026 08:10
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.

1 participant