From 655d1a224b916979c0abbed80cc202651a82c09a Mon Sep 17 00:00:00 2001
From: Malusnow <1721487579@qq.com>
Date: Wed, 1 Jul 2026 14:54:59 +0800
Subject: [PATCH] feat(color-picker): support input-less trigger

Add the isInput prop to control whether the color value input is displayed.The prop defaults to true
to preserve the existing behavior.
---
 .../components/color-picker/ColorPicker.tsx   |  3 +-
 .../color-picker/components/trigger.tsx       | 17 +++++--
 .../components/color-picker/defaultProps.ts   |  1 +
 packages/components/color-picker/type.ts      | 48 +++++++++++++------
 4 files changed, 50 insertions(+), 19 deletions(-)

diff --git a/packages/components/color-picker/ColorPicker.tsx b/packages/components/color-picker/ColorPicker.tsx
index 0a53b8c500..e80be17a47 100644
--- a/packages/components/color-picker/ColorPicker.tsx
+++ b/packages/components/color-picker/ColorPicker.tsx
@@ -13,7 +13,7 @@ import type { ColorPickerProps, TdColorContext } from './interface';
 
 const ColorPicker: React.FC<ColorPickerProps> = (props) => {
   const baseClassName = useClassName();
-  const { popupProps, clearable, disabled, borderless, inputProps, onChange, onClear, colorModes, ...rest } =
+  const { popupProps, clearable, disabled, borderless, inputProps, isInput, onChange, onClear, colorModes, ...rest } =
     useDefaultProps<ColorPickerProps>(props, colorPickerDefaultProps);
   const { overlayClassName, overlayInnerStyle = {}, ...restPopupProps } = popupProps || {};
 
@@ -55,6 +55,7 @@ const ColorPicker: React.FC<ColorPickerProps> = (props) => {
           disabled={disabled}
           borderless={borderless}
           inputProps={inputProps}
+          isInput={isInput}
           value={innerValue}
           onChange={setInnerValue}
           onClear={onClear}
diff --git a/packages/components/color-picker/components/trigger.tsx b/packages/components/color-picker/components/trigger.tsx
index d508f7dab4..d5c9a5cdfb 100644
--- a/packages/components/color-picker/components/trigger.tsx
+++ b/packages/components/color-picker/components/trigger.tsx
@@ -11,7 +11,7 @@ import type { TdColorContext } from '../interface';
 
 export interface ColorTriggerProps extends Pick<
   TdColorPickerProps,
-  'disabled' | 'inputProps' | 'borderless' | 'clearable' | 'onClear'
+  'disabled' | 'inputProps' | 'isInput' | 'borderless' | 'clearable' | 'onClear'
 > {
   value?: string;
   onChange?: (v?: string, context?: TdColorContext) => {};
@@ -19,7 +19,14 @@ export interface ColorTriggerProps extends Pick<
 
 const ColorPickerTrigger = (props: ColorTriggerProps) => {
   const baseClassName = useClassName();
-  const { disabled = false, borderless = false, inputProps = { autoWidth: true }, clearable, onClear } = props;
+  const {
+    disabled = false,
+    borderless = false,
+    inputProps = { autoWidth: true },
+    isInput = true,
+    clearable,
+    onClear,
+  } = props;
 
   const handleChange = (input: string) => {
     if (input !== props.value) {
@@ -31,7 +38,11 @@ const ColorPickerTrigger = (props: ColorTriggerProps) => {
   };
 
   return (
-    <div className={`${baseClassName}__trigger--default`}>
+    <div
+      className={classNames(`${baseClassName}__trigger--default`, {
+        [`${baseClassName}__trigger--default--no-input`]: !isInput,
+      })}
+    >
       <Input
         borderless={borderless}
         clearable={clearable}
diff --git a/packages/components/color-picker/defaultProps.ts b/packages/components/color-picker/defaultProps.ts
index 2af42a0929..a1fd364cef 100644
--- a/packages/components/color-picker/defaultProps.ts
+++ b/packages/components/color-picker/defaultProps.ts
@@ -12,6 +12,7 @@ export const colorPickerDefaultProps: TdColorPickerProps = {
   enableAlpha: false,
   enableMultipleGradient: true,
   format: 'RGB',
+  isInput: true,
   defaultRecentColors: [],
   showPrimaryColorPreview: true,
   swatchColors: undefined,
diff --git a/packages/components/color-picker/type.ts b/packages/components/color-picker/type.ts
index 61ef14f1d3..6230f6f8b4 100644
--- a/packages/components/color-picker/type.ts
+++ b/packages/components/color-picker/type.ts
@@ -4,10 +4,10 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from '../input';
-import { PopupProps } from '../popup';
-import { SelectInputProps } from '../select-input';
-import { MouseEvent } from 'react';
+import { InputProps } from "../input";
+import { PopupProps } from "../popup";
+import { SelectInputProps } from "../select-input";
+import { MouseEvent } from "react";
 
 export interface TdColorPickerProps {
   /**
@@ -24,7 +24,7 @@ export interface TdColorPickerProps {
    * 颜色模式选择。同时支持单色和渐变两种模式，可仅使用单色或者渐变其中一种模式，也可以同时使用。`monochrome` 表示单色，`linear-gradient` 表示渐变色
    * @default ["monochrome", "linear-gradient"]
    */
-  colorModes?: Array<'monochrome' | 'linear-gradient'>;
+  colorModes?: Array<"monochrome" | "linear-gradient">;
   /**
    * 是否禁用组件
    */
@@ -43,11 +43,26 @@ export interface TdColorPickerProps {
    * 格式化色值。`enableAlpha` 为真时，`HEX8/RGBA/HSLA/HSVA` 有效
    * @default RGB
    */
-  format?: 'HEX' | 'HEX8' | 'RGB' | 'RGBA' | 'HSL' | 'HSLA' | 'HSV' | 'HSVA' | 'CMYK' | 'CSS';
+  format?:
+    | "HEX"
+    | "HEX8"
+    | "RGB"
+    | "RGBA"
+    | "HSL"
+    | "HSLA"
+    | "HSV"
+    | "HSVA"
+    | "CMYK"
+    | "CSS";
   /**
    * 透传 Input 输入框组件全部属性
    */
   inputProps?: InputProps;
+  /**
+   * 是否显示颜色值输入框
+   * @default true
+   */
+  isInput?: boolean;
   /**
    * 透传 Popup 组件全部属性，如 `placement` `overlayStyle` `overlayClassName` `trigger`等
    */
@@ -88,7 +103,10 @@ export interface TdColorPickerProps {
   /**
    * 选中的色值发生变化时触发，第一个参数 `value` 表示新色值，`context.color` 表示当前调色板控制器的色值，`context.trigger` 表示触发颜色变化的来源
    */
-  onChange?: (value: string, context: { color: ColorObject; trigger: ColorPickerChangeTrigger }) => void;
+  onChange?: (
+    value: string,
+    context: { color: ColorObject; trigger: ColorPickerChangeTrigger }
+  ) => void;
   /**
    * 清空按钮点击时触发
    */
@@ -104,14 +122,14 @@ export interface TdColorPickerProps {
 }
 
 export type ColorPickerChangeTrigger =
-  | 'palette-saturation-brightness'
-  | 'palette-saturation'
-  | 'palette-brightness'
-  | 'palette-hue-bar'
-  | 'palette-alpha-bar'
-  | 'input'
-  | 'preset'
-  | 'recent';
+  | "palette-saturation-brightness"
+  | "palette-saturation"
+  | "palette-brightness"
+  | "palette-hue-bar"
+  | "palette-alpha-bar"
+  | "input"
+  | "preset"
+  | "recent";
 
 export interface ColorObject {
   alpha: number;