Skip to content

[ColorPicker] TDesign-React站点面板颜色选择器切换渐变模式后角度输入框样式溢出 #4323

Closed

Description

@AriaLEntropy

tdesign-common 版本

1.0.0

重现链接

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

重现步骤

在 tdesign-react@1.18.0 官网 ColorPicker 示例中复现;对应 common 子模块版本为 @tdesign/common@1.0.0。

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

期望结果

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

实际结果

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

Image

框架版本

React(^18.2.0)

浏览器版本

Chrome(149.0.7827.197)

系统版本

macOS(15.7.1)

Node版本

v25.9.0

补充说明

该问题是在 tdesign-react@1.18.0 官网 ColorPicker “面板颜色选择器”示例中发现的。切换到“渐变”模式后,右侧渐变角度输入框会横向溢出 ColorPickerPanel 面板。

初步排查后,问题可能位于 tdesign-common 的公共样式:

style/web/components/color-picker/_index.less

渐变模式下 .t-color-picker__gradient 使用 flex 布局,左侧 slider 与右侧角度输入框并排展示。由于面板宽度固定,而右侧角度输入框为固定宽度,左侧 flex 项可能没有正确收缩,导致整体宽度超出面板。

可能的修复方向是调整 common 样式中的 flex 收缩约束,例如为渐变容器/slider 补充宽度或 min-width 约束。预计不需要新增依赖,也不需要修改组件 API。

如果维护者认为方向可行,我愿意尝试认领并提交 PR。也想确认 common PR 合入后,是否需要我再到 tdesign-react 提 PR 更新 packages/common 子模块指向。

Activity

  1. github-actions commented on Jul 2, 2026

    @github-actions
    Contributor

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

  2. github-actions commented on Jul 8, 2026

    @github-actions
    Contributor

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

  3. RylanBot commented on Aug 14, 2026

    @RylanBot
    Collaborator

    1.18.2 已修复

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    to be publishedfixed, not be published🐞 bugSomething isn't working

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions