fix(color-select-panel): 修复直接输入颜色值时滑块和显示器不同步的问题(#4280)

[Georgyhongbo]

PR Checklist

• The commit message follows our Commit Message Guidelines
• Tests for the changes have been added (for bug fixes / features)
• Docs have been added / updated (for bug fixes / features)

PR Type

• Bugfix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)

What is the current behavior?

在颜色选择面板中，拖动滑块可以同步更新文本框的颜色值（slider → text），但直接在文本框输入 hex 颜色值时，滑块和颜色显示器不会同步更新（text → slider）。用户必须通过外部传入 modelValue 才能触发更新。

Issue Number: N/A

What is the new behavior?

在 hex 输入框上添加 @blur 事件处理，当用户输入完颜色值后点击别处或按 Enter 键，自动将输入同步到颜色对象，反向驱动滑块和颜色显示器更新。同时添加 @keyup.enter 让用户按 Enter 即可触发同步，无需多按一次鼠标。

技术细节：

• onInputBlur 函数位于 initApi 中，仅在输入非空且非渐变色模式下执行 color.fromString(input)
• 纯增量改动，不修改任何已有逻辑

Does this PR introduce a breaking change?

• Yes
• No

Other information

改动仅 3 个文件，均为 color-select-panel 模块内部改动，不影响其他组件。

Summary by CodeRabbit

• Bug Fixes
  • Improved color input handling when editing HEX/CSS values.
  • Color selections now update correctly after leaving the input field or pressing Enter.
  • Related sliders and color displays stay synchronized with the entered value.
  • Linear-gradient editing behavior remains unchanged.

[coderabbitai]

Walkthrough

The color select panel now parses text input into its internal color state on blur, exposes onInputBlur through the renderless API, and wires blur and Enter-key behavior to the desktop color input.

Changes

Color input blur synchronization

Layer / File(s)	Summary
Renderless blur API packages/renderless/src/color-select-panel/index.ts, packages/renderless/src/color-select-panel/vue.ts	Adds guarded onInputBlur parsing for non-gradient input and exposes the handler through the renderless API.
Vue input event wiring packages/vue/src/color-select-panel/src/pc.vue	Calls onInputBlur on blur and blurs the input when Enter is pressed.

Estimated code review effort: 2 (Simple) | ~10 minutes

Suggested reviewers: shenjunjian

Poem

I’m a bunny with colors to spin,
Blur the text and the hues settle in.
Press Enter with cheer,
The color state draws near,
And gradients politely sit still.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	Title clearly matches the main change: syncing the color panel UI after direct color input.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}