Skip to content

[ColorPicker] 面板颜色选择器切换渐变模式后角度输入框样式溢出 #4318

Closed

Description

@AriaLEntropy

tdesign-react 版本

1.18.0

重现链接

https://tdesign.tencent.com/react/components/color-picker

重现步骤

  1. 打开 TDesign React 官网 ColorPicker 颜色选择器文档页
  2. 找到“面板颜色选择器”示例
  3. 点击颜色选择器面板顶部的“渐变”Tab
  4. 观察渐变控制条右侧的角度输入框
Image

期望结果

渐变模式下,角度输入框应在 ColorPickerPanel 面板内部正常展示,不应超出面板边界;渐变控制条和角度输入框应保持正常布局。

实际结果

切换到渐变模式后,右侧角度输入框向外溢出 ColorPickerPanel 面板,视觉上超出组件边界。

框架版本

React(^18.2.0)

浏览器版本

Chrome(149.0.7827.197)

系统版本

macOS(15.7.1)

Node版本

v25.9.0

补充说明

从仓库实现看,问题可能出在 ColorPicker 渐变模式的 flex 布局样式中:

  • 渐变模式由 packages/components/color-picker/components/panel/linear-gradient.tsx 渲染
  • 相关样式位于 packages/common/style/web/components/color-picker/_index.less
  • 外层 .t-color-picker__gradient 使用 flex 布局,右侧 .t-color-picker__gradient-degree 为固定宽度输入框;在面板固定宽度场景下,左侧 slider 和右侧角度输入框组合后发生横向溢出
  • 该问题应该可以通过样式层面修复,例如约束 gradient 容器宽度、允许 slider flex 项收缩(min-width: 0)等方式解决,不需要新增依赖

我初步看了一下仓库结构,问题可能出在 common 子仓库的 ColorPicker 样式中:
style/web/components/color-picker/_index.less

想确认一下维护方式:

  1. 这个问题是否应该先在 tdesign-react 仓库记录,然后在 tdesign-common 提 PR 修复?
  2. tdesign-common PR 是否可以直接关联当前 tdesign-react issue?
  3. 如果 common PR 合入后,是否需要我再提交一个 tdesign-react PR 来更新 packages/common 子模块指向,还是由维护者通过 CI 触发更新?

如果方向确认,我可以尝试认领并提交修复 PR。

Activity

  1. github-actions commented on Jul 1, 2026

    @github-actions
    Contributor

    👋 @AriaLEntropy,感谢给 TDesign 提出了 issue。
    请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。

  2. RylanBot commented on Jul 1, 2026

    @RylanBot
    Collaborator

    直接在 common 仓提就行,一般发新版本前会手动触发 CI 同步

  3. AriaLEntropy commented on Jul 2, 2026

    @AriaLEntropy
    Author

    好的,谢谢~

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

Labels

🐞 bugSomething isn't working

Type

No type

Projects

No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions