From 0c9e5739837cccf66bd7d5f3d1b1f894cb538fcb Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Tue, 14 Oct 2025 22:19:14 +0800
Subject: [PATCH 01/20] feat(Select): optimize custom node rendering

---
 packages/components/_util/parseTNode.ts       |  18 ++-
 .../components/select-input/useSingle.tsx     |  96 +++++++++++-----
 .../select/_example/custom-options.tsx        | 104 ++++++++++--------
 packages/components/select/base/Option.tsx    |  15 ++-
 .../components/select/base/OptionGroup.tsx    |   1 -
 packages/components/select/base/Select.tsx    |  14 ++-
 6 files changed, 163 insertions(+), 85 deletions(-)

diff --git a/packages/components/_util/parseTNode.ts b/packages/components/_util/parseTNode.ts
index e8d828b4f6..9ac89356a8 100644
--- a/packages/components/_util/parseTNode.ts
+++ b/packages/components/_util/parseTNode.ts
@@ -1,7 +1,7 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React, { type ReactElement, type ReactNode } from 'react';
 import { isFunction } from 'lodash-es';
 import log from '@tdesign/common-js/log/index';
-import { TNode } from '../common';
+import type { TNode } from '../common';
 
 // 解析 TNode 数据结构
 export default function parseTNode(
@@ -37,3 +37,17 @@ export function parseContentTNode<T>(tnode: TNode<T>, props: T) {
     return null;
   }
 }
+
+export function extractTextFromTNode(node: TNode): string {
+  if (typeof node === 'string' || typeof node === 'number' || typeof node === 'boolean') return String(node);
+  if (React.isValidElement(node)) {
+    const { children } = node.props || {};
+    if (children) return extractTextFromTNode(children);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractTextFromTNode).join('');
+  }
+
+  // todo：兼容 ((props: T) => ReactNode) 函数类型
+  return '';
+}
diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 9e92324767..573a46f72b 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -1,7 +1,7 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
-import { isObject, pick } from 'lodash-es';
+import { pick } from 'lodash-es';
 
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
@@ -33,24 +33,16 @@ const COMMON_PROPERTIES = [
   'prefixIcon',
 ];
 
-const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
-  label: 'label',
-  value: 'value',
-};
-
-function getInputValue(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
-  const iKeys = keys || DEFAULT_KEYS;
-  return isObject(value) ? value[iKeys.label] : value;
-}
-
 export default function useSingle(props: TdSelectInputProps) {
-  const { value, keys, loading } = props;
+  const { value, loading } = props;
   const { classPrefix } = useConfig();
 
+  const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
+
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
 
-  const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
+  const [labelWidth, setLabelWidth] = useState(0);
 
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
@@ -69,13 +61,21 @@ export default function useSingle(props: TdSelectInputProps) {
     }
   };
 
+  useEffect(() => {
+    const labelEl = inputRef.current?.currentElement.querySelector(`.${classPrefix}-input__prefix`);
+    if (labelEl) {
+      const prefixWidth = labelEl.getBoundingClientRect().width;
+      setLabelWidth(prefixWidth);
+    }
+  }, [props.label, classPrefix]);
+
   const renderSelectSingle = (
     popupVisible: boolean,
     onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void,
   ) => {
-    // 单选，值的呈现方式
-    const singleValueDisplay: any = !props.multiple ? props.valueDisplay : null;
-    const displayedValue = popupVisible && props.allowInput ? inputValue : getInputValue(value, keys);
+    const singleValueDisplay = !props.multiple ? props.valueDisplay : null;
+
+    const showPseudoPlaceholder = inputValue?.length < 1 && React.isValidElement(singleValueDisplay);
 
     const handleBlur = (value, ctx) => {
       if (blurTimeoutRef.current) {
@@ -104,22 +104,62 @@ export default function useSingle(props: TdSelectInputProps) {
       // !popupVisible && setInputValue(getInputValue(value, keys), { ...context, trigger: 'input' });
     };
 
+    const displayedValue = () => {
+      if (popupVisible && inputValue) {
+        return inputValue;
+      }
+      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
+        return '';
+      }
+      if (!popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
+        return String(singleValueDisplay);
+      }
+      return inputValue;
+    };
+
+    const displayedPlaceholder = () => {
+      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
+        return String(singleValueDisplay);
+      }
+      if (showPseudoPlaceholder) return '';
+      return props.placeholder;
+    };
+
+    const pseudoPlaceholder = showPseudoPlaceholder ? (
+      <div
+        style={{
+          position: 'absolute',
+          left: `${labelWidth + 16}px`,
+          top: '50%',
+          transform: 'translateY(-50%)',
+          pointerEvents: 'none',
+          textAlign: 'inherit',
+          zIndex: 3,
+          // 输入状态，降低透明度，仿造 placeholder 效果
+          opacity: popupVisible && props.allowInput ? 0.5 : undefined,
+        }}
+      >
+        {singleValueDisplay}
+      </div>
+    ) : null;
+
     return (
       <Input
         ref={inputRef}
+        // 当 label 为 自定义节点时，input 为空，确保此时 clear icon 可见
+        showClearIconOnEmpty={props.clearable && !!singleValueDisplay}
         {...commonInputProps}
+        suffix={
+          <>
+            {pseudoPlaceholder}
+            {commonInputProps.suffix}
+          </>
+        }
         autoWidth={props.autoWidth}
         allowInput={props.allowInput}
-        placeholder={singleValueDisplay ? '' : props.placeholder}
-        value={singleValueDisplay ? ' ' : displayedValue}
-        label={
-          (props.label || singleValueDisplay) && (
-            <>
-              {props.label}
-              {singleValueDisplay as React.ReactNode}
-            </>
-          )
-        }
+        label={props.label}
+        value={displayedValue()}
+        placeholder={displayedPlaceholder()}
         onChange={onInnerInputChange}
         onClear={onInnerClear}
         // [Important Info]: SelectInput.blur is not equal to Input, example: click popup panel
@@ -130,7 +170,7 @@ export default function useSingle(props: TdSelectInputProps) {
         // onBlur need to triggered by input when popup panel is null or when popupVisible is forced to false
         onBlur={handleBlur}
         {...props.inputProps}
-        inputClass={classNames(props.inputProps?.className, {
+        inputClass={classNames(props.inputProps?.inputClass, {
           [`${classPrefix}-input--focused`]: popupVisible,
           [`${classPrefix}-is-focused`]: popupVisible,
         })}
diff --git a/packages/components/select/_example/custom-options.tsx b/packages/components/select/_example/custom-options.tsx
index fd36ce046f..4a17df8594 100644
--- a/packages/components/select/_example/custom-options.tsx
+++ b/packages/components/select/_example/custom-options.tsx
@@ -1,55 +1,73 @@
 import React, { useState } from 'react';
-
-import { Select } from 'tdesign-react';
+import { Select, Space } from 'tdesign-react';
 
 const { Option } = Select;
 
-const options = [
-  { label: '用户一', value: '1', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户二', value: '2', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户三', value: '3', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户四', value: '4', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户五', value: '5', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户六', value: '6', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户七', value: '7', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户八', value: '8', description: '这是一段用户描述信息，可自定义内容' },
-  { label: '用户九', value: '9', description: '这是一段用户描述信息，可自定义内容' },
-];
-
-const avatarUrl = 'https://tdesign.gtimg.com/site/avatar.jpg';
-
-export default function CustomOptions() {
+const generateCustomContent = (index: number) => (
+  <div style={{ display: 'flex', padding: '8px 0' }}>
+    <img
+      src="https://tdesign.gtimg.com/site/avatar.jpg"
+      style={{
+        maxWidth: '40px',
+        borderRadius: '50%',
+      }}
+    />
+    <div style={{ marginLeft: '16px' }}>
+      <div>用户{index}</div>
+      <div
+        style={{
+          fontSize: '13px',
+          color: 'var(--td-gray-color-9)',
+        }}
+      >
+        这是一段用户描述信息，可自定义内容
+      </div>
+    </div>
+  </div>
+);
+
+const createOption = (index: number) => {
+  const label = `用户${index}`;
+  return {
+    label,
+    value: index.toString(),
+    description: '这是一段用户描述信息，可自定义内容',
+  };
+};
+
+const options1 = Array.from({ length: 5 }, (_, index) => ({
+  ...createOption(index + 1),
+}));
+
+const options2 = Array.from({ length: 5 }, (_, index) => ({
+  ...createOption(index + 1),
+  content: generateCustomContent(index + 1),
+}));
+
+function CustomOptions() {
   const [value, setValue] = useState('1');
   const onChange = (value: string) => {
     setValue(value);
   };
 
   return (
-    <Select value={value} onChange={onChange} style={{ width: '300px' }} clearable>
-      {options.map((option, idx) => (
-        <Option style={{ height: '60px' }} key={idx} value={option.value} label={option.label}>
-          <div style={{ display: 'flex' }}>
-            <img
-              src={avatarUrl}
-              style={{
-                maxWidth: '40px',
-                borderRadius: '50%',
-              }}
-            />
-            <div style={{ marginLeft: '16px' }}>
-              <div>{option.label}</div>
-              <div
-                style={{
-                  fontSize: '13px',
-                  color: 'var(--td-gray-color-9)',
-                }}
-              >
-                {option.description}
-              </div>
-            </div>
-          </div>
-        </Option>
-      ))}
-    </Select>
+    <Space size="150px">
+      <Space direction="vertical">
+        <strong>法一：使用插槽</strong>
+        <Select value={value} onChange={onChange} clearable>
+          {options1.map((option, idx) => (
+            <Option style={{ height: '60px' }} key={idx} value={option.value} label={option.label}>
+              {generateCustomContent(idx + 1)}
+            </Option>
+          ))}
+        </Select>
+      </Space>
+      <Space direction="vertical">
+        <strong>法二：使用 `content` 属性</strong>
+        <Select options={options2} value={value} onChange={onChange} clearable style={{ width: 200 }} />
+      </Space>
+    </Space>
   );
 }
+
+export default CustomOptions;
diff --git a/packages/components/select/base/Option.tsx b/packages/components/select/base/Option.tsx
index 637e88b047..bc1fc06868 100644
--- a/packages/components/select/base/Option.tsx
+++ b/packages/components/select/base/Option.tsx
@@ -1,6 +1,6 @@
-import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { get, isNumber, isString } from 'lodash-es';
+import React, { useEffect, useMemo } from 'react';
 
 import useConfig from '../../hooks/useConfig';
 import useDomRefCallback from '../../hooks/useDomRefCallback';
@@ -63,6 +63,9 @@ const Option: React.FC<SelectOptionProps> = (props) => {
   const label = propLabel || value;
   const disabled = propDisabled || (multiple && Array.isArray(selectedValue) && max && selectedValue.length >= max);
 
+  const displayedContent = children || content || label;
+  const isCustomElement = React.isValidElement(displayedContent);
+
   const titleContent = useMemo(() => {
     // 外部设置 props，说明希望受控
     const controlledTitle = Reflect.has(props, 'title');
@@ -121,7 +124,6 @@ const Option: React.FC<SelectOptionProps> = (props) => {
   };
 
   const renderItem = () => {
-    const displayContent = children || content || label;
     if (multiple) {
       return (
         <label
@@ -143,11 +145,11 @@ const Option: React.FC<SelectOptionProps> = (props) => {
             }}
           />
           <span className={classNames(`${classPrefix}-checkbox__input`)}></span>
-          <span className={classNames(`${classPrefix}-checkbox__label`)}>{displayContent}</span>
+          <span className={classNames(`${classPrefix}-checkbox__label`)}>{displayedContent}</span>
         </label>
       );
     }
-    return <span title={titleContent}>{displayContent}</span>;
+    return <span title={titleContent}>{displayedContent}</span>;
   };
 
   return (
@@ -161,7 +163,10 @@ const Option: React.FC<SelectOptionProps> = (props) => {
       key={value}
       onClick={handleSelect}
       ref={setRefCurrent}
-      style={style}
+      style={{
+        ...(isCustomElement ? { height: 'auto' } : {}),
+        ...style,
+      }}
     >
       {renderItem()}
     </li>
diff --git a/packages/components/select/base/OptionGroup.tsx b/packages/components/select/base/OptionGroup.tsx
index 832efaa8f7..9981336cca 100644
--- a/packages/components/select/base/OptionGroup.tsx
+++ b/packages/components/select/base/OptionGroup.tsx
@@ -35,7 +35,6 @@ const OptionGroup: React.FC<SelectGOptionGroupProps> = (props) => {
       {children}
     </li>
   );
-  return;
 };
 
 export default OptionGroup;
diff --git a/packages/components/select/base/Select.tsx b/packages/components/select/base/Select.tsx
index d7686296e8..0736203e22 100644
--- a/packages/components/select/base/Select.tsx
+++ b/packages/components/select/base/Select.tsx
@@ -16,7 +16,7 @@ import composeRefs from '../../_util/composeRefs';
 import forwardRefWithStatics from '../../_util/forwardRefWithStatics';
 import { getOffsetTopToContainer } from '../../_util/helper';
 import noop from '../../_util/noop';
-import { parseContentTNode } from '../../_util/parseTNode';
+import { extractTextFromTNode, parseContentTNode } from '../../_util/parseTNode';
 import FakeArrow from '../../common/FakeArrow';
 import useConfig from '../../hooks/useConfig';
 import useControlled from '../../hooks/useControlled';
@@ -287,7 +287,8 @@ const Select = forwardRefWithStatics(
           return filter(value, option);
         }
         const upperValue = value.toUpperCase();
-        return (option?.label || '').toUpperCase().includes(upperValue);
+        const searchableText = extractTextFromTNode(option.label);
+        return searchableText.toUpperCase().includes(upperValue);
       };
 
       tmpPropOptions?.forEach((option) => {
@@ -397,10 +398,11 @@ const Select = forwardRefWithStatics(
     const renderValueDisplay = useMemo(() => {
       if (!valueDisplay) {
         if (!multiple) {
-          if (typeof selectedLabel !== 'string') {
-            return selectedLabel;
-          }
-          return '';
+          // if (typeof selectedLabel !== 'string') {
+          //   return selectedLabel;
+          // }
+          // return '';
+          return selectedLabel;
         }
         return ({ value: val }) =>
           val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((v: string, key: number) => {

From a95f2db23ff1c9d8ae5233b2c236c070e18c599f Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Wed, 15 Oct 2025 14:45:36 +0800
Subject: [PATCH 02/20] refactor: optimize value display logic

---
 .../components/select-input/useSingle.tsx     | 53 ++++++++------
 packages/components/select/base/Select.tsx    | 18 ++---
 .../components/tree-select/TreeSelect.tsx     | 71 ++++++-------------
 3 files changed, 61 insertions(+), 81 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 573a46f72b..3efdb4ac31 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 
 import classNames from 'classnames';
-import { pick } from 'lodash-es';
+import { isObject, pick } from 'lodash-es';
 
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
@@ -33,16 +33,30 @@ const COMMON_PROPERTIES = [
   'prefixIcon',
 ];
 
+const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
+  label: 'label',
+  value: 'value',
+};
+
+function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
+  const iKeys = keys || DEFAULT_KEYS;
+  return isObject(value) ? value[iKeys.label] : value;
+}
+
 export default function useSingle(props: TdSelectInputProps) {
   const { value, loading } = props;
-  const { classPrefix } = useConfig();
 
+  const optionLabel = getOptionLabel(value, props.keys);
+  const singleValueDisplay = props.valueDisplay ?? optionLabel;
+  const showLabelNode = React.isValidElement(singleValueDisplay);
+
+  const { classPrefix } = useConfig();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
 
-  const [labelWidth, setLabelWidth] = useState(0);
+  const [labelWidth, setLabelWidth] = useState<number>(0);
 
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
@@ -73,10 +87,6 @@ export default function useSingle(props: TdSelectInputProps) {
     popupVisible: boolean,
     onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void,
   ) => {
-    const singleValueDisplay = !props.multiple ? props.valueDisplay : null;
-
-    const showPseudoPlaceholder = inputValue?.length < 1 && React.isValidElement(singleValueDisplay);
-
     const handleBlur = (value, ctx) => {
       if (blurTimeoutRef.current) {
         clearTimeout(blurTimeoutRef.current);
@@ -108,24 +118,24 @@ export default function useSingle(props: TdSelectInputProps) {
       if (popupVisible && inputValue) {
         return inputValue;
       }
-      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
+      if (props.allowInput && popupVisible && !showLabelNode) {
         return '';
       }
-      if (!popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
-        return String(singleValueDisplay);
+      if (!showLabelNode) {
+        return singleValueDisplay;
       }
       return inputValue;
     };
 
     const displayedPlaceholder = () => {
-      if (popupVisible && singleValueDisplay && !React.isValidElement(singleValueDisplay)) {
-        return String(singleValueDisplay);
+      if (popupVisible && !showLabelNode) {
+        return singleValueDisplay;
       }
-      if (showPseudoPlaceholder) return '';
+      if (showLabelNode) return '';
       return props.placeholder;
     };
 
-    const pseudoPlaceholder = showPseudoPlaceholder ? (
+    const labelNode = showLabelNode ? (
       <div
         style={{
           position: 'absolute',
@@ -133,7 +143,7 @@ export default function useSingle(props: TdSelectInputProps) {
           top: '50%',
           transform: 'translateY(-50%)',
           pointerEvents: 'none',
-          textAlign: 'inherit',
+          textAlign: 'initial',
           zIndex: 3,
           // 输入状态，降低透明度，仿造 placeholder 效果
           opacity: popupVisible && props.allowInput ? 0.5 : undefined,
@@ -147,13 +157,16 @@ export default function useSingle(props: TdSelectInputProps) {
       <Input
         ref={inputRef}
         // 当 label 为 自定义节点时，input 为空，确保此时 clear icon 可见
-        showClearIconOnEmpty={props.clearable && !!singleValueDisplay}
+        showClearIconOnEmpty={props.clearable && showLabelNode}
         {...commonInputProps}
         suffix={
-          <>
-            {pseudoPlaceholder}
-            {commonInputProps.suffix}
-          </>
+          labelNode ||
+          (commonInputProps.suffix && (
+            <>
+              {labelNode}
+              {commonInputProps.suffix}
+            </>
+          ))
         }
         autoWidth={props.autoWidth}
         allowInput={props.allowInput}
diff --git a/packages/components/select/base/Select.tsx b/packages/components/select/base/Select.tsx
index 0736203e22..465be7446e 100644
--- a/packages/components/select/base/Select.tsx
+++ b/packages/components/select/base/Select.tsx
@@ -1,14 +1,12 @@
 import React, {
   Children,
-  KeyboardEvent,
-  WheelEvent,
   cloneElement,
   isValidElement,
   useCallback,
   useEffect,
   useMemo,
   useRef,
-  useState,
+  useState
 } from 'react';
 import classNames from 'classnames';
 import { debounce, get, isFunction } from 'lodash-es';
@@ -324,7 +322,7 @@ const Select = forwardRefWithStatics(
         return;
       }
       if (isFunction(onSearch)) {
-        onSearch(value, { e: context.e as KeyboardEvent<HTMLDivElement> });
+        onSearch(value, { e: context.e as React.KeyboardEvent<HTMLDivElement> });
         return;
       }
     };
@@ -397,13 +395,7 @@ const Select = forwardRefWithStatics(
 
     const renderValueDisplay = useMemo(() => {
       if (!valueDisplay) {
-        if (!multiple) {
-          // if (typeof selectedLabel !== 'string') {
-          //   return selectedLabel;
-          // }
-          // return '';
-          return selectedLabel;
-        }
+        if (!multiple) return selectedLabel;
         return ({ value: val }) =>
           val.slice(0, minCollapsedNum ? minCollapsedNum : val.length).map((v: string, key: number) => {
             const filterOption: SelectOption & { disabled?: boolean } = options?.find((option) => option.label === v);
@@ -498,11 +490,11 @@ const Select = forwardRefWithStatics(
 
     const { onMouseEnter, onMouseLeave } = props;
 
-    const handleEnter = (_, context: { inputValue: string; e: KeyboardEvent<HTMLDivElement> }) => {
+    const handleEnter = (_, context: { inputValue: string; e: React.KeyboardEvent<HTMLDivElement> }) => {
       onEnter?.({ ...context, value });
     };
 
-    const handleScroll = ({ e }: { e: WheelEvent<HTMLDivElement> }) => {
+    const handleScroll = ({ e }: { e: React.WheelEvent<HTMLDivElement> }) => {
       toggleIsScrolling(true);
 
       onScroll?.({ e });
diff --git a/packages/components/tree-select/TreeSelect.tsx b/packages/components/tree-select/TreeSelect.tsx
index 539764850a..0e73b45956 100644
--- a/packages/components/tree-select/TreeSelect.tsx
+++ b/packages/components/tree-select/TreeSelect.tsx
@@ -1,25 +1,26 @@
-import React, { useCallback, useMemo, useRef, forwardRef, ElementRef, useImperativeHandle } from 'react';
-import { isFunction } from 'lodash-es';
+import React, { ElementRef, forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
 import classNames from 'classnames';
-import type { TdTreeSelectProps, TreeSelectValue } from './type';
-import type { StyledProps, TreeOptionData } from '../common';
+import { isFunction } from 'lodash-es';
+import noop from '../_util/noop';
+import parseTNode from '../_util/parseTNode';
 import useConfig from '../hooks/useConfig';
 import useControlled from '../hooks/useControlled';
-import Tree from '../tree';
-import type { TreeInstanceFunctions, TreeProps } from '../tree';
-import SelectInput, { SelectInputProps } from '../select-input/SelectInput';
+import useDefaultProps from '../hooks/useDefaultProps';
 import { usePersistFn } from '../hooks/usePersistFn';
 import useSwitch from '../hooks/useSwitch';
-import noop from '../_util/noop';
+import SelectInput, { type SelectInputProps } from '../select-input/SelectInput';
+import Tree from '../tree';
+import { treeSelectDefaultProps } from './defaultProps';
+import { useTreeSelectLocale } from './hooks/useTreeSelectLocale';
+import { useTreeSelectPassThroughProps } from './hooks/useTreeSelectPassthroughProps';
 import { useTreeSelectUtils } from './hooks/useTreeSelectUtils';
 import { SelectArrow } from './SelectArrow';
-import { useTreeSelectPassThroughProps } from './hooks/useTreeSelectPassthroughProps';
-import { useTreeSelectLocale } from './hooks/useTreeSelectLocale';
-import { treeSelectDefaultProps } from './defaultProps';
-import parseTNode from '../_util/parseTNode';
-import useDefaultProps from '../hooks/useDefaultProps';
-import { PopupRef } from '../popup';
-import { InputRef } from '../input';
+
+import type { StyledProps, TreeOptionData } from '../common';
+import type { InputRef } from '../input';
+import type { PopupRef } from '../popup';
+import type { TreeInstanceFunctions, TreeProps } from '../tree';
+import type { TdTreeSelectProps, TreeSelectValue } from './type';
 
 export interface TreeSelectProps<DataOption extends TreeOptionData = TreeOptionData>
   extends TdTreeSelectProps<DataOption>,
@@ -75,6 +76,8 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     onEnter,
   } = props;
 
+  const showLoading = !disabled && loading;
+
   const selectInputProps = useTreeSelectPassThroughProps(props);
   const [value, onChange] = useControlled(props, 'value', props.onChange);
   const [popupVisible, setPopupVisible] = useControlled(props, 'popupVisible', props.onPopupVisibleChange);
@@ -143,11 +146,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [normalizeValue, value, data]);
 
-  const internalInputValue = useMemo(() => {
-    if (multiple) return normalizedValue;
-    // 可筛选、单选、弹框时内容为过滤值
-    return filterable && popupVisible ? filterInput : normalizedValue[0] || '';
-  }, [multiple, normalizedValue, filterable, popupVisible, filterInput]);
+  const internalValue = useMemo(() => (multiple ? normalizedValue : normalizedValue[0]), [multiple, normalizedValue]);
 
   // @ts-ignore TODO: remove it
   const normalizedValueDisplay: SelectInputProps['valueDisplay'] = useMemo(() => {
@@ -164,30 +163,6 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
     return normalizedValue.length ? displayNode : '';
   }, [valueDisplay, multiple, normalizedValue]);
 
-  const internalInputValueDisplay: SelectInputProps['valueDisplay'] = useMemo(() => {
-    // 只有单选且下拉展开时需要隐藏 valueDisplay
-    if (filterable && !multiple && popupVisible) {
-      return undefined;
-    }
-    return normalizedValueDisplay;
-  }, [filterable, popupVisible, multiple, normalizedValueDisplay]);
-
-  const inputPlaceholder = useMemo(() => {
-    // 可筛选、单选、弹框且有值时提示当前值
-    if (filterable && !multiple && popupVisible && normalizedValue.length) {
-      // 设置了 valueDisplay 时，优先展示 valueDisplay
-      const valueDisplayPlaceholder = normalizedValueDisplay;
-      if (typeof valueDisplayPlaceholder === 'string') {
-        return valueDisplayPlaceholder;
-      }
-
-      return typeof normalizedValue[0].label === 'string' ? normalizedValue[0].label : String(normalizedValue[0].value);
-    }
-    return placeholder;
-  }, [filterable, multiple, popupVisible, normalizedValue, placeholder, normalizedValueDisplay]);
-
-  const showLoading = !disabled && loading;
-
   /* ---------------------------------handler---------------------------------------- */
 
   const handleFilter = useCallback<TreeProps['filter']>(
@@ -243,7 +218,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       const { index, e, trigger } = ctx;
       const node = getNodeItem(normalizedValue[index].value);
       onChange(
-        normalizedValue.filter((value, i) => i !== index).map(({ value, label }) => formatValue(value, label)),
+        normalizedValue.filter((_, i) => i !== index).map(({ value, label }) => formatValue(value, label)),
         { node, data: node?.data, trigger, e },
       );
       onRemove?.({
@@ -328,13 +303,13 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       {...selectInputProps}
       ref={selectInputRef}
       className={classNames(`${classPrefix}-tree-select`, className)}
-      value={internalInputValue}
+      value={internalValue}
       inputValue={filterInput}
       panel={renderTree()}
       allowInput={filterable}
       inputProps={{ ...inputProps, size }}
       tagInputProps={{ size, excessTagsDisplayType: 'break-line', inputProps, tagProps: props.tagProps }}
-      placeholder={inputPlaceholder}
+      placeholder={placeholder}
       popupVisible={popupVisible && !disabled}
       onInputChange={handleFilterChange}
       onPopupVisibleChange={onInnerPopupVisibleChange}
@@ -353,7 +328,7 @@ const TreeSelect = forwardRef<TreeSelectRefType, TreeSelectProps>((originalProps
       }
       collapsedItems={collapsedItems}
       label={parseTNode(label || prefixIcon)}
-      valueDisplay={internalInputValueDisplay}
+      valueDisplay={normalizedValueDisplay}
     />
   );
 });

From 8ec8e7df5c3ca327973b3f9dfc959d63d1edab71 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Wed, 15 Oct 2025 15:08:04 +0800
Subject: [PATCH 03/20] fix(useSingle): update placeholder logic

---
 .../components/select-input/useSingle.tsx     |   2 +-
 test/snap/__snapshots__/csr.test.jsx.snap     | 309 +++++++++++-------
 test/snap/__snapshots__/ssr.test.jsx.snap     |  14 +-
 3 files changed, 206 insertions(+), 119 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 3efdb4ac31..4c3555ec39 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -128,7 +128,7 @@ export default function useSingle(props: TdSelectInputProps) {
     };
 
     const displayedPlaceholder = () => {
-      if (popupVisible && !showLabelNode) {
+      if (popupVisible && singleValueDisplay && !showLabelNode) {
         return singleValueDisplay;
       }
       if (showLabelNode) return '';
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index d73f4a466d..9be76a51b5 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -22948,7 +22948,7 @@ exports[`csr snapshot test > csr test packages/components/cascader/_example/valu
         <div
           class="t-input__wrap"
           spellcheck="false"
-          value=" "
+          value=""
         >
           <div
             class="t-input t-align-left t-input--prefix t-input--suffix"
@@ -22961,28 +22961,36 @@ exports[`csr snapshot test > csr test packages/components/cascader/_example/valu
               >
                 单选：
               </div>
-              <div>
-                <img
-                  src="https://tdesign.gtimg.com/site/avatar.jpg"
-                  style="width: 16px; height: 16px; margin-top: 2px; vertical-align: -4px; margin-right: 4px;"
-                />
-                <span>
-                  子选项二
-                </span>
-                <span>
-                  (
-                  2.2
-                  )
-                </span>
-              </div>
             </div>
             <input
               class="t-input__inner"
               placeholder=""
               readonly=""
               type="text"
-              value=" "
+              value=""
             />
+            <div
+              class="t-input__suffix"
+            >
+              <div
+                style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; z-index: 3;"
+              >
+                <div>
+                  <img
+                    src="https://tdesign.gtimg.com/site/avatar.jpg"
+                    style="width: 16px; height: 16px; margin-top: 2px; vertical-align: -4px; margin-right: 4px;"
+                  />
+                  <span>
+                    子选项二
+                  </span>
+                  <span>
+                    (
+                    2.2
+                    )
+                  </span>
+                </div>
+              </div>
+            </div>
             <span
               class="t-input__suffix t-input__suffix-icon"
             >
@@ -33494,7 +33502,6 @@ exports[`csr snapshot test > csr test packages/components/config-provider/_examp
         <div
           class="t-input__wrap"
           spellcheck="false"
-          value=""
         >
           <div
             class="t-input t-align-left t-input--suffix"
@@ -86793,46 +86800,135 @@ exports[`csr snapshot test > csr test packages/components/select/_example/creata
 exports[`csr snapshot test > csr test packages/components/select/_example/custom-options.tsx 1`] = `
 <div>
   <div
-    class="t-select__wrap"
-    style="width: 300px;"
+    class="t-space t-space-horizontal"
+    style="gap: 150px;"
   >
     <div
-      class="t-select t-select-input"
+      class="t-space-item"
     >
       <div
-        class="t-input__wrap"
-        spellcheck="false"
-        value="用户一"
+        class="t-space t-space-vertical"
+        style="gap: 16px;"
       >
         <div
-          class="t-input t-align-left t-input--suffix"
+          class="t-space-item"
         >
-          <input
-            class="t-input__inner"
-            placeholder="请选择"
-            readonly=""
-            type="text"
-            value="用户一"
-          />
-          <span
-            class="t-input__suffix t-input__suffix-icon"
+          <strong>
+            法一：使用插槽
+          </strong>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-select__wrap"
           >
-            <svg
-              class="t-fake-arrow t-select__right-icon"
-              fill="none"
-              height="16"
-              viewBox="0 0 16 16"
-              width="16"
-              xmlns="http://www.w3.org/2000/svg"
+            <div
+              class="t-select t-select-input"
             >
-              <path
-                d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
-                stroke="black"
-                stroke-opacity="0.9"
-                stroke-width="1.3"
-              />
-            </svg>
-          </span>
+              <div
+                class="t-input__wrap"
+                spellcheck="false"
+                value="用户1"
+              >
+                <div
+                  class="t-input t-align-left t-input--suffix"
+                >
+                  <input
+                    class="t-input__inner"
+                    placeholder="请选择"
+                    readonly=""
+                    type="text"
+                    value="用户1"
+                  />
+                  <span
+                    class="t-input__suffix t-input__suffix-icon"
+                  >
+                    <svg
+                      class="t-fake-arrow t-select__right-icon"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-space-item"
+    >
+      <div
+        class="t-space t-space-vertical"
+        style="gap: 16px;"
+      >
+        <div
+          class="t-space-item"
+        >
+          <strong>
+            法二：使用 \`content\` 属性
+          </strong>
+        </div>
+        <div
+          class="t-space-item"
+        >
+          <div
+            class="t-select__wrap"
+            style="width: 200px;"
+          >
+            <div
+              class="t-select t-select-input"
+            >
+              <div
+                class="t-input__wrap"
+                spellcheck="false"
+                value="用户1"
+              >
+                <div
+                  class="t-input t-align-left t-input--suffix"
+                >
+                  <input
+                    class="t-input__inner"
+                    placeholder="请选择"
+                    readonly=""
+                    type="text"
+                    value="用户1"
+                  />
+                  <span
+                    class="t-input__suffix t-input__suffix-icon"
+                  >
+                    <svg
+                      class="t-fake-arrow t-select__right-icon"
+                      fill="none"
+                      height="16"
+                      viewBox="0 0 16 16"
+                      width="16"
+                      xmlns="http://www.w3.org/2000/svg"
+                    >
+                      <path
+                        d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921"
+                        stroke="black"
+                        stroke-opacity="0.9"
+                        stroke-width="1.3"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -86859,22 +86955,17 @@ exports[`csr snapshot test > csr test packages/components/select/_example/custom
           <div
             class="t-input__wrap"
             spellcheck="false"
-            value=" "
+            value="选中选项一"
           >
             <div
-              class="t-input t-align-left t-input--prefix t-input--suffix"
+              class="t-input t-align-left t-input--suffix"
             >
-              <div
-                class="t-input__prefix"
-              >
-                选中选项一
-              </div>
               <input
                 class="t-input__inner"
-                placeholder=""
+                placeholder="请选择"
                 readonly=""
                 type="text"
-                value=" "
+                value="选中选项一"
               />
               <span
                 class="t-input__suffix t-input__suffix-icon"
@@ -89725,51 +89816,54 @@ exports[`csr snapshot test > csr test packages/components/select-input/_example/
       <div
         class="t-input__wrap"
         spellcheck="false"
-        value=" "
       >
         <div
-          class="t-input t-align-left t-input--prefix"
+          class="t-input t-align-left t-input--suffix"
         >
-          <div
-            class="t-input__prefix"
-          >
-            <span
-              class="displaySpan"
-            >
-              <svg
-                class="t-icon t-icon-control-platform tdesign-demo-select-input__img"
-                fill="none"
-                height="1em"
-                style="fill: none;"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <g
-                  id="control-platform"
-                >
-                  <path
-                    d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
-                    fill="transparent"
-                    id="fill1"
-                  />
-                  <path
-                    d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z"
-                    id="stroke1"
-                    stroke="currentColor"
-                    stroke-width="2"
-                  />
-                </g>
-              </svg>
-              tdesign-vue
-            </span>
-          </div>
           <input
             class="t-input__inner"
             placeholder=""
             readonly=""
             type="text"
-            value=" "
+            value=""
           />
+          <div
+            class="t-input__suffix"
+          >
+            <div
+              style="position: absolute; left: 16px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; z-index: 3;"
+            >
+              <span
+                class="displaySpan"
+              >
+                <svg
+                  class="t-icon t-icon-control-platform tdesign-demo-select-input__img"
+                  fill="none"
+                  height="1em"
+                  style="fill: none;"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <g
+                    id="control-platform"
+                  >
+                    <path
+                      d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
+                      fill="transparent"
+                      id="fill1"
+                    />
+                    <path
+                      d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z"
+                      id="stroke1"
+                      stroke="currentColor"
+                      stroke-width="2"
+                    />
+                  </g>
+                </svg>
+                tdesign-vue
+              </span>
+            </div>
+          </div>
         </div>
       </div>
     </div>
@@ -145052,7 +145146,6 @@ exports[`csr snapshot test > csr test packages/components/tree-select/_example/f
         <div
           class="t-input__wrap"
           spellcheck="false"
-          value=""
         >
           <div
             class="t-input t-align-left t-input--suffix"
@@ -145454,7 +145547,6 @@ exports[`csr snapshot test > csr test packages/components/tree-select/_example/p
     <div
       class="t-input__wrap"
       spellcheck="false"
-      value=""
     >
       <div
         class="t-input t-align-left t-input--prefix t-input--suffix"
@@ -145596,22 +145688,17 @@ exports[`csr snapshot test > csr test packages/components/tree-select/_example/v
         <div
           class="t-input__wrap"
           spellcheck="false"
-          value=" "
+          value="广州市(guangzhou)"
         >
           <div
-            class="t-input t-align-left t-input--prefix t-input--suffix"
+            class="t-input t-align-left t-input--suffix"
           >
-            <div
-              class="t-input__prefix"
-            >
-              广州市(guangzhou)
-            </div>
             <input
               class="t-input__inner"
-              placeholder=""
+              placeholder="请选择"
               readonly=""
               type="text"
-              value=" "
+              value="广州市(guangzhou)"
             />
             <span
               class="t-input__suffix t-input__suffix-icon"
@@ -149520,7 +149607,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
@@ -149584,7 +149671,7 @@ exports[`ssr snapshot test > ssr test packages/components/config-provider/_examp
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/input.tsx 1`] = `"<div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="Always show clear icon when input has value" type="text" class="t-input__inner" value=""/></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/pagination.tsx 1`] = `"<div class="t-pagination"><div class="t-pagination__total">Total 36 items</div><div class="t-pagination__select"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap t-input--auto-width" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="please select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">please select</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left" style="fill:none"><g id="chevron-left"><path id="stroke1" stroke="currentColor" d="M14.5 17.5L9 12L14.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><ul class="t-pagination__pager"><li class="t-pagination__number t-is-current">1</li><li class="t-pagination__number">2</li><li class="t-pagination__number">3</li><li class="t-pagination__number">4</li></ul><div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-pagination__jump"><input class="t-input__inner" type="text" style="width:10px" value="1"/><span> / <!-- -->4<!-- --> 页 </span><button> 跳转 </button></div></div>"`;
 
@@ -150124,7 +150211,7 @@ exports[`ssr snapshot test > ssr test packages/components/select/_example/collap
 
 exports[`ssr snapshot test > ssr test packages/components/select/_example/creatable.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-horizontal t-space--break-line"><div class="t-space-item"><div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-options.tsx 1`] = `"<div class="t-select__wrap" style="width:300px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-options.tsx 1`] = `"<div style="gap:150px" class="t-space t-space-horizontal"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><strong>法一：使用插槽</strong></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><strong>法二：使用 \`content\` 属性</strong></div><div class="t-space-item"><div class="t-select__wrap" style="width:200px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-selected.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-select__wrap" style="width:300px;margin-right:20px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:300px;margin-right:20px"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
 
@@ -150176,7 +150263,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
@@ -150538,7 +150625,7 @@ exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/b
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/collapsed.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->1</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="更多...">更多...</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/filterable.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-radio-group t-size-m t-radio-group--filled"><label tabindex="0" class="t-radio-button t-is-checked" checked=""><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;default&#x27;" checked="" value="default"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">默认</span></label><label tabindex="0" class="t-radio-button"><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;function&#x27;" value="function"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">自定义方法</span></label><div class="t-radio-group__bg-block"></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/filterable.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-radio-group t-size-m t-radio-group--filled"><label tabindex="0" class="t-radio-button t-is-checked" checked=""><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;default&#x27;" checked="" value="default"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">默认</span></label><label tabindex="0" class="t-radio-button"><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;function&#x27;" value="function"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">自定义方法</span></label><div class="t-radio-group__bg-block"></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/lazy.tsx 1`] = `"<div style="width:300px"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
 
@@ -150548,11 +150635,11 @@ exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/p
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefix.tsx 1`] = `"<div class="t-tree-select t-select-input" style="width:300px"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefixsuffix.tsx 1`] = `"<div class="t-tree-select t-select-input t-select-input--empty" style="width:300px"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-caret-down-small" style="fill:none"><path id="caret-down-small" fill="currentColor" d="M12.0001 15L17.5 9.5H6.5L12.0001 15Z"></path></svg></span></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefixsuffix.tsx 1`] = `"<div class="t-tree-select t-select-input t-select-input--empty" style="width:300px"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-caret-down-small" style="fill:none"><path id="caret-down-small" fill="currentColor" d="M12.0001 15L17.5 9.5H6.5L12.0001 15Z"></path></svg></span></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/props.tsx 1`] = `"<div class="t-tree-select t-select-input" style="width:300px"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix">广州市(guangzhou)</div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="广州市(guangzhou)" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="广州市(guangzhou)"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuetype.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="深圳市">深圳市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index be8eaee006..c451bd7b91 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -210,7 +210,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
@@ -274,7 +274,7 @@ exports[`ssr snapshot test > ssr test packages/components/config-provider/_examp
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/input.tsx 1`] = `"<div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="Always show clear icon when input has value" type="text" class="t-input__inner" value=""/></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/pagination.tsx 1`] = `"<div class="t-pagination"><div class="t-pagination__total">Total 36 items</div><div class="t-pagination__select"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap t-input--auto-width" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="please select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">please select</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left" style="fill:none"><g id="chevron-left"><path id="stroke1" stroke="currentColor" d="M14.5 17.5L9 12L14.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><ul class="t-pagination__pager"><li class="t-pagination__number t-is-current">1</li><li class="t-pagination__number">2</li><li class="t-pagination__number">3</li><li class="t-pagination__number">4</li></ul><div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-pagination__jump"><input class="t-input__inner" type="text" style="width:10px" value="1"/><span> / <!-- -->4<!-- --> 页 </span><button> 跳转 </button></div></div>"`;
 
@@ -814,7 +814,7 @@ exports[`ssr snapshot test > ssr test packages/components/select/_example/collap
 
 exports[`ssr snapshot test > ssr test packages/components/select/_example/creatable.tsx 1`] = `"<div style="width:100%;gap:16px" class="t-space t-space-horizontal t-space--break-line"><div class="t-space-item"><div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:40%"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-options.tsx 1`] = `"<div class="t-select__wrap" style="width:300px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-options.tsx 1`] = `"<div style="gap:150px" class="t-space t-space-horizontal"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><strong>法一：使用插槽</strong></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><strong>法二：使用 \`content\` 属性</strong></div><div class="t-space-item"><div class="t-select__wrap" style="width:200px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select/_example/custom-selected.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-horizontal"><div class="t-space-item"><div class="t-select__wrap" style="width:300px;margin-right:20px"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-select__wrap" style="width:300px;margin-right:20px"><div class="t-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div>"`;
 
@@ -866,7 +866,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:16px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
@@ -1228,7 +1228,7 @@ exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/b
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/collapsed.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->1</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="更多...">更多...</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/filterable.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-radio-group t-size-m t-radio-group--filled"><label tabindex="0" class="t-radio-button t-is-checked" checked=""><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;default&#x27;" checked="" value="default"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">默认</span></label><label tabindex="0" class="t-radio-button"><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;function&#x27;" value="function"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">自定义方法</span></label><div class="t-radio-group__bg-block"></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/filterable.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-radio-group t-size-m t-radio-group--filled"><label tabindex="0" class="t-radio-button t-is-checked" checked=""><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;default&#x27;" checked="" value="default"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">默认</span></label><label tabindex="0" class="t-radio-button"><input type="radio" class="t-radio-button__former" tabindex="-1" data-value="&#x27;function&#x27;" value="function"/><span class="t-radio-button__input"></span><span class="t-radio-button__label">自定义方法</span></label><div class="t-radio-group__bg-block"></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/lazy.tsx 1`] = `"<div style="width:300px"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div>"`;
 
@@ -1238,11 +1238,11 @@ exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/p
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefix.tsx 1`] = `"<div class="t-tree-select t-select-input" style="width:300px"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefixsuffix.tsx 1`] = `"<div class="t-tree-select t-select-input t-select-input--empty" style="width:300px"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-caret-down-small" style="fill:none"><path id="caret-down-small" fill="currentColor" d="M12.0001 15L17.5 9.5H6.5L12.0001 15Z"></path></svg></span></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/prefixsuffix.tsx 1`] = `"<div class="t-tree-select t-select-input t-select-input--empty" style="width:300px"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user" style="fill:none"><g id="user"><g id="fill1"><path fill="transparent" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z"></path><path fill="transparent" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z"></path></g><g id="stroke1"><path stroke="currentColor" d="M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z" stroke-linecap="square" stroke-width="2"></path><path stroke="currentColor" d="M20 21V19C20 16.7909 18.2091 15 16 15H8C5.79086 15 4 16.7909 4 19V21H20Z" stroke-linecap="square" stroke-width="2"></path></g></g></svg></div><input placeholder="请输入" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-caret-down-small" style="fill:none"><path id="caret-down-small" fill="currentColor" d="M12.0001 15L17.5 9.5H6.5L12.0001 15Z"></path></svg></span></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/props.tsx 1`] = `"<div class="t-tree-select t-select-input" style="width:300px"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value=" " spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix">广州市(guangzhou)</div><input placeholder="" type="text" class="t-input__inner" readonly="" value=" "/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuedisplay.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="广州市(guangzhou)" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="广州市(guangzhou)"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span>广州市<!-- -->(<!-- -->guangzhou<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>深圳市<!-- -->(<!-- -->shenzhen<!-- -->)</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/tree-select/_example/valuetype.tsx 1`] = `"<div style="width:300px;gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-tree-select t-select-input"><div class="t-input__wrap" value="深圳市" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value="深圳市"/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="广州市">广州市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="深圳市">深圳市</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 

From 259ed005424214d98f1aa23c94612fb8b394d844 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Wed, 15 Oct 2025 15:53:45 +0800
Subject: [PATCH 04/20] chore(Option): update deps import orders

---
 packages/components/select/base/Option.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/select/base/Option.tsx b/packages/components/select/base/Option.tsx
index bc1fc06868..0192e3af7f 100644
--- a/packages/components/select/base/Option.tsx
+++ b/packages/components/select/base/Option.tsx
@@ -1,6 +1,6 @@
+import React, { useEffect, useMemo } from 'react';
 import classNames from 'classnames';
 import { get, isNumber, isString } from 'lodash-es';
-import React, { useEffect, useMemo } from 'react';
 
 import useConfig from '../../hooks/useConfig';
 import useDomRefCallback from '../../hooks/useDomRefCallback';

From ba428856fee6f4a9dcf19bb56e281974feba4cbf Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 16 Oct 2025 15:17:43 +0800
Subject: [PATCH 05/20] fix(useSingle): improve label handling and typing state
 management

---
 .../components/select-input/useSingle.tsx     | 34 +++++++++++++------
 1 file changed, 24 insertions(+), 10 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 4c3555ec39..39523068e7 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useMemo, useRef, useState } from 'react';
 
 import classNames from 'classnames';
 import { isObject, pick } from 'lodash-es';
@@ -45,10 +45,10 @@ function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputP
 
 export default function useSingle(props: TdSelectInputProps) {
   const { value, loading } = props;
-
-  const optionLabel = getOptionLabel(value, props.keys);
-  const singleValueDisplay = props.valueDisplay ?? optionLabel;
-  const showLabelNode = React.isValidElement(singleValueDisplay);
+  const commonInputProps: SelectInputCommonProperties = {
+    ...pick(props, COMMON_PROPERTIES),
+    suffixIcon: loading ? <Loading loading size="small" /> : props.suffixIcon,
+  };
 
   const { classPrefix } = useConfig();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
@@ -56,12 +56,18 @@ export default function useSingle(props: TdSelectInputProps) {
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
 
+  const [isTyping, setIsTyping] = useState<boolean>(false);
   const [labelWidth, setLabelWidth] = useState<number>(0);
 
-  const commonInputProps: SelectInputCommonProperties = {
-    ...pick(props, COMMON_PROPERTIES),
-    suffixIcon: loading ? <Loading loading size="small" /> : props.suffixIcon,
-  };
+  const singleValueDisplay = useMemo(
+    () => props.valueDisplay ?? getOptionLabel(value, props.keys),
+    [value, props.valueDisplay, props.keys],
+  );
+
+  const showLabelNode = useMemo(
+    () => !isTyping && !inputValue && React.isValidElement(singleValueDisplay),
+    [isTyping, inputValue, singleValueDisplay],
+  );
 
   const onInnerClear = (context: { e: React.MouseEvent<SVGSVGElement> }) => {
     context?.e?.stopPropagation();
@@ -156,7 +162,7 @@ export default function useSingle(props: TdSelectInputProps) {
     return (
       <Input
         ref={inputRef}
-        // 当 label 为 自定义节点时，input 为空，确保此时 clear icon 可见
+        // 当 valueDisplay 为 自定义节点时，选中内容时 input 依旧为空，确保此时 clear icon 可见
         showClearIconOnEmpty={props.clearable && showLabelNode}
         {...commonInputProps}
         suffix={
@@ -183,6 +189,14 @@ export default function useSingle(props: TdSelectInputProps) {
         // onBlur need to triggered by input when popup panel is null or when popupVisible is forced to false
         onBlur={handleBlur}
         {...props.inputProps}
+        onCompositionstart={(v, ctx) => {
+          setIsTyping(true);
+          props.inputProps?.onCompositionstart?.(v, ctx);
+        }}
+        onCompositionend={(v, ctx) => {
+          setIsTyping(false);
+          props.inputProps?.onCompositionend?.(v, ctx);
+        }}
         inputClass={classNames(props.inputProps?.inputClass, {
           [`${classPrefix}-input--focused`]: popupVisible,
           [`${classPrefix}-is-focused`]: popupVisible,

From 5766fcedcaf86d049d62839e517be80e8733c484 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 16 Oct 2025 15:54:29 +0800
Subject: [PATCH 06/20] chore(useSingle): rename variables for clarity

---
 packages/components/select-input/useSingle.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 39523068e7..4d5f12b606 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -64,7 +64,7 @@ export default function useSingle(props: TdSelectInputProps) {
     [value, props.valueDisplay, props.keys],
   );
 
-  const showLabelNode = useMemo(
+  const showCustomElement = useMemo(
     () => !isTyping && !inputValue && React.isValidElement(singleValueDisplay),
     [isTyping, inputValue, singleValueDisplay],
   );
@@ -124,24 +124,24 @@ export default function useSingle(props: TdSelectInputProps) {
       if (popupVisible && inputValue) {
         return inputValue;
       }
-      if (props.allowInput && popupVisible && !showLabelNode) {
+      if (props.allowInput && popupVisible && !showCustomElement) {
         return '';
       }
-      if (!showLabelNode) {
+      if (!showCustomElement) {
         return singleValueDisplay;
       }
       return inputValue;
     };
 
     const displayedPlaceholder = () => {
-      if (popupVisible && singleValueDisplay && !showLabelNode) {
+      if (popupVisible && singleValueDisplay && !showCustomElement) {
         return singleValueDisplay;
       }
-      if (showLabelNode) return '';
+      if (showCustomElement) return '';
       return props.placeholder;
     };
 
-    const labelNode = showLabelNode ? (
+    const labelNode = showCustomElement ? (
       <div
         style={{
           position: 'absolute',
@@ -162,8 +162,8 @@ export default function useSingle(props: TdSelectInputProps) {
     return (
       <Input
         ref={inputRef}
-        // 当 valueDisplay 为 自定义节点时，选中内容时 input 依旧为空，确保此时 clear icon 可见
-        showClearIconOnEmpty={props.clearable && showLabelNode}
+        // 当 valueDisplay 为 自定义元素时，选中内容时 input 依旧为空，确保此时 clear icon 可见
+        showClearIconOnEmpty={props.clearable && showCustomElement}
         {...commonInputProps}
         suffix={
           labelNode ||

From 105862d9c8b8bf684f784eb095483bec4b3ff469 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 23 Oct 2025 20:42:33 +0800
Subject: [PATCH 07/20] fix(Cascader): improve title handling

---
 .../components/cascader/components/Item.tsx   | 24 +++++++++++--------
 1 file changed, 14 insertions(+), 10 deletions(-)

diff --git a/packages/components/cascader/components/Item.tsx b/packages/components/cascader/components/Item.tsx
index d5f0553a75..4fa41e0fbd 100644
--- a/packages/components/cascader/components/Item.tsx
+++ b/packages/components/cascader/components/Item.tsx
@@ -1,19 +1,18 @@
 import React, { forwardRef, useMemo } from 'react';
-import classNames from 'classnames';
 import { ChevronRightIcon as TdChevronRightIcon } from 'tdesign-icons-react';
-
+import classNames from 'classnames';
 import { isFunction } from 'lodash-es';
-import TLoading from '../../loading';
-import Checkbox from '../../checkbox';
 
+import Checkbox from '../../checkbox';
+import TLoading from '../../loading';
+import useCommonClassName from '../../hooks/useCommonClassName';
 import useConfig from '../../hooks/useConfig';
-import useGlobalIcon from '../../hooks/useGlobalIcon';
 import useDomRefCallback from '../../hooks/useDomRefCallback';
-import useCommonClassName from '../../hooks/useCommonClassName';
-
-import { getFullPathLabel } from '../core/helper';
+import useGlobalIcon from '../../hooks/useGlobalIcon';
 import { getCascaderItemClass, getCascaderItemIconClass } from '../core/className';
-import { CascaderContextType, TreeNodeValue, TreeNode } from '../interface';
+import { getFullPathLabel } from '../core/helper';
+
+import type { CascaderContextType, TreeNode, TreeNodeValue } from '../interface';
 
 const Item = forwardRef(
   (
@@ -90,9 +89,14 @@ const Item = forwardRef(
     const RenderLabelContent = (node: TreeNode, cascaderContext: CascaderContextType) => {
       const label = RenderLabelInner(node, cascaderContext);
 
+      const getTitle = () => {
+        const title = cascaderContext.inputVal ? getFullPathLabel(node) : node.label;
+        return typeof title !== 'object' ? title : undefined;
+      };
+
       const labelCont = (
         <span
-          title={cascaderContext.inputVal ? getFullPathLabel(node) : node.label}
+          title={getTitle()}
           className={classNames(`${COMPONENT_NAME}-label`, `${COMPONENT_NAME}-label--ellipsis`)}
           role="label"
         >

From 58394d5358762d1b12b6670f3a20691af9968b71 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 27 Nov 2025 22:06:09 +0800
Subject: [PATCH 08/20] fix: `autoWidth`

---
 .../components/select-input/useSingle.tsx     | 26 +++++++++++++++++--
 1 file changed, 24 insertions(+), 2 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 4d5f12b606..d0e487cde7 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -9,6 +9,7 @@ import Input, { type InputRef, type TdInputProps } from '../input';
 import Loading from '../loading';
 
 import type { SelectInputCommonProperties } from './interface';
+import type { SelectInputProps } from './SelectInput';
 import type { TdSelectInputProps } from './type';
 
 export interface RenderSelectSingleInputParams {
@@ -43,7 +44,7 @@ function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputP
   return isObject(value) ? value[iKeys.label] : value;
 }
 
-export default function useSingle(props: TdSelectInputProps) {
+export default function useSingle(props: SelectInputProps) {
   const { value, loading } = props;
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
@@ -55,9 +56,11 @@ export default function useSingle(props: TdSelectInputProps) {
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
+  const customElementRef = useRef<HTMLDivElement>(null);
 
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [labelWidth, setLabelWidth] = useState<number>(0);
+  const [customElementWidth, setCustomElementWidth] = useState<number>(0);
 
   const singleValueDisplay = useMemo(
     () => props.valueDisplay ?? getOptionLabel(value, props.keys),
@@ -89,6 +92,13 @@ export default function useSingle(props: TdSelectInputProps) {
     }
   }, [props.label, classPrefix]);
 
+  useEffect(() => {
+    if (showCustomElement && customElementRef.current) {
+      const { width } = customElementRef.current.getBoundingClientRect();
+      setCustomElementWidth(width);
+    }
+  }, [showCustomElement, singleValueDisplay]);
+
   const renderSelectSingle = (
     popupVisible: boolean,
     onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void,
@@ -143,9 +153,10 @@ export default function useSingle(props: TdSelectInputProps) {
 
     const labelNode = showCustomElement ? (
       <div
+        ref={customElementRef}
         style={{
           position: 'absolute',
-          left: `${labelWidth + 16}px`,
+          left: `${labelWidth + 8}px`,
           top: '50%',
           transform: 'translateY(-50%)',
           pointerEvents: 'none',
@@ -159,6 +170,13 @@ export default function useSingle(props: TdSelectInputProps) {
       </div>
     ) : null;
 
+    const hasCustomWidth = props.style?.width || props.inputProps?.style?.width || props.inputProps?.style?.minWidth;
+    // customElement 定位为 absolute，无法撑开 input 宽度
+    const inputWidth =
+      !hasCustomWidth && showCustomElement && customElementWidth > 0
+        ? `${customElementWidth + labelWidth + 48}px`
+        : undefined;
+
     return (
       <Input
         ref={inputRef}
@@ -175,6 +193,10 @@ export default function useSingle(props: TdSelectInputProps) {
           ))
         }
         autoWidth={props.autoWidth}
+        style={{
+          ...(props.inputProps?.style || {}),
+          minWidth: inputWidth,
+        }}
         allowInput={props.allowInput}
         label={props.label}
         value={displayedValue()}

From 5e3edce5cf8cf3db8e57162f34b78ef7dc37aa1c Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Fri, 19 Dec 2025 10:24:35 +0800
Subject: [PATCH 09/20] chore: update snapshots

---
 packages/common                           | 2 +-
 test/snap/__snapshots__/csr.test.jsx.snap | 6 +-----
 test/snap/__snapshots__/ssr.test.jsx.snap | 6 +-----
 3 files changed, 3 insertions(+), 11 deletions(-)

diff --git a/packages/common b/packages/common
index 7155e11c03..054ebf90bb 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 7155e11c0395c67bbef5f1687c8447f6265386a1
+Subproject commit 054ebf90bbed57efb922ff007471ba18cb53a2e8
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 9674065abd..329b5960b4 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -150765,11 +150765,7 @@ exports[`ssr snapshot test > ssr test packages/components/config-provider/_examp
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/input.tsx 1`] = `"<div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="Always show clear icon when input has value" type="text" class="t-input__inner" value=""/></div></div>"`;
 
-<<<<<<< HEAD
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
-=======
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
->>>>>>> origin
+exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/pagination.tsx 1`] = `"<div class="t-pagination"><div class="t-pagination__total">Total 36 items</div><div class="t-pagination__select"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap t-input--auto-width" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="please select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">please select</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left" style="fill:none"><g id="chevron-left"><path id="stroke1" stroke="currentColor" d="M14.5 17.5L9 12L14.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><ul class="t-pagination__pager"><li class="t-pagination__number t-is-current">1</li><li class="t-pagination__number">2</li><li class="t-pagination__number">3</li><li class="t-pagination__number">4</li></ul><div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-pagination__jump"><input class="t-input__inner" type="text" style="width:10px" value="1"/><span> / <!-- -->4<!-- --> 页 </span><button> 跳转 </button></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index afc6905f75..bde8cbcf7b 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -274,11 +274,7 @@ exports[`ssr snapshot test > ssr test packages/components/config-provider/_examp
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/input.tsx 1`] = `"<div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="Always show clear icon when input has value" type="text" class="t-input__inner" value=""/></div></div>"`;
 
-<<<<<<< HEAD
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
-=======
-exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
->>>>>>> origin
+exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/others.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><form class="t-form"><div class="t-form__item t-form-item__username"><div class="t-form__label t-form__label--right" style="width:100px"><label>User Name</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left"><input placeholder="There is no required mark on the left of this input in Form" type="text" class="t-input__inner" value=""/></div></div></div></div></div><div class="t-form__item t-form-item__password"><div class="t-form__label t-form__label--required t-form__label--right" style="width:100px"><label>Password</label></div><div class="t-form__controls" style="margin-left:100px"><div class="t-form__controls-content"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="There is required mark on the left of this input in Form" type="password" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-browse-off t-input__suffix-clear" style="fill:none"><g id="browse-off"><path id="stroke1" stroke="currentColor" d="M13.1758 8.17578C14.4396 8.56376 15.4368 9.56096 15.8247 10.8247M21.2858 15.2856C22.0085 14.2983 22.5776 13.1913 22.9578 12C21.4771 7.36017 17.131 4 12.0001 4C11.3698 4 10.7513 4.05072 10.1484 4.1483M5.80747 5.80786C3.57225 7.23888 1.86478 9.42193 1.04199 12.0001C2.52275 16.6399 6.86881 20.0001 11.9997 20.0001C14.2796 20.0001 16.4045 19.3367 18.1919 18.1923L5.80747 5.80786ZM8 12.0003C8 10.8957 8.44771 9.89573 9.17157 9.17188L14.8284 14.8287C14.1046 15.5526 13.1046 16.0003 12 16.0003C9.79086 16.0003 8 14.2094 8 12.0003Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M20.9996 21L3 3" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div></form></div><div class="t-space-item"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in Select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s t-select__right-icon t-select__active-icon"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select cascader data" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-tree-select t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="see loading text in TreeSelect" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><div class="t-loading t-loading--center t-size-s"><svg class="t-loading__gradient t-icon-loading" viewBox="0 0 12 12" version="1.1" width="1em" height="1em" xmlns="http://www.w3.org/2000/svg"><foreignObject x="0" y="0" width="12" height="12"><div class="t-loading__gradient-conic"></div></foreignObject></svg></div></span></div></div></div></div><div class="t-space-item"><div class="t-time-picker"><div class="t-time-picker__group t-select-input t-select-input--empty"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="select time" type="text" class="t-input__inner" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-time" style="fill:none"><g id="time"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M12 6.5L12 12L15 15" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div><div class="t-space-item"><div class="t-tag t-tag--primary t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--success t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--warning t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tag t-tag--danger t-tag--dark"><span title="Feature Tag">Feature Tag</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle t-tag__icon-close" style="fill:none"><g id="close-circle"><path id="fill1" fill="transparent" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z"></path><path id="stroke1" stroke="currentColor" d="M2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" stroke-linecap="square" stroke-width="2"></path><path id="stroke2" stroke="currentColor" d="M15.1813 8.81836L11.9997 12M11.9997 12L8.81738 15.1823M11.9997 12L15.1813 15.1816M11.9997 12L8.81738 8.81768" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><div class="t-space-item"><div class="t-tree t-tree--transition">Tree Empty Data</div></div><div class="t-space-item"><div class="t-steps t-steps--default-anchor t-steps--vertical t-steps--positive t-steps--line-separator"><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">First Step</div><div class="t-steps-item__description">You need to click the blue button</div></div></div></div><div class="t-steps-item t-steps-item--finish"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-finish"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-check" style="fill:none"><g id="check"><path id="stroke1" stroke="currentColor" d="M19.5708 7.37842L10.3785 16.5708L5.42871 11.6211" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Second Step</div><div class="t-steps-item__description">Fill your base information into the form</div></div></div></div><div class="t-steps-item t-steps-item--error"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-error"><span class="t-steps-item__icon--number"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-error" style="fill:none"><g id="error"><path id="stroke1" stroke="currentColor" d="M12 3L12 15.5M12 20H12.0039V20.0039H12V20Z" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Error Step</div><div class="t-steps-item__description">Something Wrong! Custom Error Icon!</div></div></div></div><div class="t-steps-item t-steps-item--wait"><div class="t-steps-item__inner t-steps-item--clickable"><div class="t-steps-item__icon t-steps-item-default"><span class="t-steps-item__icon--number">4</span></div><div class="t-steps-item__content"><div class="t-steps-item__title">Last Step</div><div class="t-steps-item__description">You haven&#x27;t finish this step.</div></div></div></div></div></div><div class="t-space-item"><div class="t-image__wrapper t-image__wrapper--shape-square" style="width:300px"><img src="1.jpg" class="t-image t-image--fit-scale-down t-image--position-center"/><div class="t-image__loading"><div style="gap:8px" class="t-space t-space-align-center t-space-vertical"><div class="t-space-item"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-image" style="fill:none;font-size:24px"><g id="image"><path id="fill1" fill="transparent" d="M3 21H20L9 10L3 16V21Z"></path><circle id="fill2" cx="15.75" cy="8.25" r="2" fill="transparent"></circle><path id="stroke1" stroke="currentColor" d="M3 16V3H21V21H20M3 16V21H20M3 16L9 10L20 21" stroke-width="2"></path><circle id="stroke2" cx="15.75" cy="8.25" r="2" stroke="currentColor" stroke-width="2"></circle></g></svg></div><div class="t-space-item">图片加载中</div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/config-provider/_example/pagination.tsx 1`] = `"<div class="t-pagination"><div class="t-pagination__total">Total 36 items</div><div class="t-pagination__select"><div class="t-select__wrap"><div class="t-select t-select-input t-select-input--empty"><div class="t-input__wrap t-input--auto-width" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="please select" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">please select</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-select__right-icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div><div class="t-pagination__btn t-pagination__btn-prev t-is-disabled"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-left" style="fill:none"><g id="chevron-left"><path id="stroke1" stroke="currentColor" d="M14.5 17.5L9 12L14.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><ul class="t-pagination__pager"><li class="t-pagination__number t-is-current">1</li><li class="t-pagination__number">2</li><li class="t-pagination__number">3</li><li class="t-pagination__number">4</li></ul><div class="t-pagination__btn t-pagination__btn-next"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right" style="fill:none"><g id="chevron-right"><path id="stroke1" stroke="currentColor" d="M9.5 17.5L15 12L9.5 6.5" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-pagination__jump"><input class="t-input__inner" type="text" style="width:10px" value="1"/><span> / <!-- -->4<!-- --> 页 </span><button> 跳转 </button></div></div>"`;
 

From 817211bdb163aa02e696fe52f62dcb5bcf94b934 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Tue, 12 May 2026 17:51:30 +0800
Subject: [PATCH 10/20] fix: calc width

---
 .../components/select-input/useSingle.tsx     | 54 ++++++++++++++++---
 1 file changed, 48 insertions(+), 6 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index d0e487cde7..05fad7d08a 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -56,11 +56,12 @@ export default function useSingle(props: SelectInputProps) {
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
-  const customElementRef = useRef<HTMLDivElement>(null);
+  const customElementRef = useRef<HTMLSpanElement>(null);
 
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [labelWidth, setLabelWidth] = useState<number>(0);
   const [customElementWidth, setCustomElementWidth] = useState<number>(0);
+  const [suffixSpace, setSuffixSpace] = useState<number>(0);
 
   const singleValueDisplay = useMemo(
     () => props.valueDisplay ?? getOptionLabel(value, props.keys),
@@ -99,6 +100,45 @@ export default function useSingle(props: SelectInputProps) {
     }
   }, [showCustomElement, singleValueDisplay]);
 
+  useEffect(() => {
+    const inputEl = inputRef.current?.inputElement;
+    if (!inputEl || !props.autoWidth) return;
+    if (showCustomElement && customElementWidth > 0) {
+      inputEl.style.minWidth = `${customElementWidth}px`;
+    } else {
+      inputEl.style.minWidth = '';
+    }
+  }, [props.autoWidth, showCustomElement, customElementWidth]);
+
+  useEffect(() => {
+    // 自定义 valueDisplay 时，labelNode 使用绝对定位
+    // 避免内容延伸盖到右侧的 suffixIcon 区域，需要测量 input 右侧到 wrapper 右侧的距离作为 right 留白
+    if (!showCustomElement) {
+      setSuffixSpace(0);
+      return;
+    }
+    const wrapperEl = inputRef.current?.currentElement;
+    const inputEl = inputRef.current?.inputElement;
+    if (!wrapperEl || !inputEl) return undefined;
+
+    const measure = () => {
+      const wrapperRect = wrapperEl.getBoundingClientRect();
+      const inputRect = inputEl.getBoundingClientRect();
+      // wrapper 右内边距 + suffix 区域 + suffixIcon 区域
+      const space = Math.max(wrapperRect.right - inputRect.right, 0);
+      setSuffixSpace(space);
+    };
+
+    measure();
+
+    wrapperEl.addEventListener('mouseenter', measure);
+    wrapperEl.addEventListener('mouseleave', measure);
+    return () => {
+      wrapperEl.removeEventListener('mouseenter', measure);
+      wrapperEl.removeEventListener('mouseleave', measure);
+    };
+  }, [showCustomElement, singleValueDisplay, props.clearable, props.suffixIcon, props.suffix]);
+
   const renderSelectSingle = (
     popupVisible: boolean,
     onInnerBlur?: (context: { e: React.FocusEvent<HTMLInputElement> }) => void,
@@ -130,7 +170,7 @@ export default function useSingle(props: SelectInputProps) {
       // !popupVisible && setInputValue(getInputValue(value, keys), { ...context, trigger: 'input' });
     };
 
-    const displayedValue = () => {
+    const displayedValue = (): string => {
       if (popupVisible && inputValue) {
         return inputValue;
       }
@@ -143,7 +183,7 @@ export default function useSingle(props: SelectInputProps) {
       return inputValue;
     };
 
-    const displayedPlaceholder = () => {
+    const displayedPlaceholder = (): string => {
       if (popupVisible && singleValueDisplay && !showCustomElement) {
         return singleValueDisplay;
       }
@@ -153,20 +193,22 @@ export default function useSingle(props: SelectInputProps) {
 
     const labelNode = showCustomElement ? (
       <div
-        ref={customElementRef}
         style={{
           position: 'absolute',
           left: `${labelWidth + 8}px`,
+          right: `${suffixSpace}px`,
           top: '50%',
           transform: 'translateY(-50%)',
           pointerEvents: 'none',
           textAlign: 'initial',
-          zIndex: 3,
+          overflow: 'hidden',
           // 输入状态，降低透明度，仿造 placeholder 效果
           opacity: popupVisible && props.allowInput ? 0.5 : undefined,
         }}
       >
-        {singleValueDisplay}
+        <span ref={customElementRef} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+          {singleValueDisplay}
+        </span>
       </div>
     ) : null;
 

From 7abbf3ab6e470550dd7ae936f1dd2f5dd815a7ed Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Tue, 12 May 2026 18:19:07 +0800
Subject: [PATCH 11/20] chore: update snap

---
 test/snap/__snapshots__/csr.test.jsx.snap | 92 ++++++++++++-----------
 test/snap/__snapshots__/ssr.test.jsx.snap |  4 +-
 2 files changed, 52 insertions(+), 44 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index e2ed571c35..f7166d95e5 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -22917,22 +22917,26 @@ exports[`csr snapshot test > csr test packages/components/cascader/_example/valu
               class="t-input__suffix"
             >
               <div
-                style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; z-index: 3;"
+                style="position: absolute; left: 8px; right: 0px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; overflow: hidden;"
               >
-                <div>
-                  <img
-                    src="https://tdesign.gtimg.com/site/avatar.jpg"
-                    style="width: 16px; height: 16px; margin-top: 2px; vertical-align: -4px; margin-right: 4px;"
-                  />
-                  <span>
-                    子选项二
-                  </span>
-                  <span>
-                    (
-                    2.2
-                    )
-                  </span>
-                </div>
+                <span
+                  style="display: inline-block; white-space: nowrap;"
+                >
+                  <div>
+                    <img
+                      src="https://tdesign.gtimg.com/site/avatar.jpg"
+                      style="width: 16px; height: 16px; margin-top: 2px; vertical-align: -4px; margin-right: 4px;"
+                    />
+                    <span>
+                      子选项二
+                    </span>
+                    <span>
+                      (
+                      2.2
+                      )
+                    </span>
+                  </div>
+                </span>
               </div>
             </div>
             <span
@@ -92237,36 +92241,40 @@ exports[`csr snapshot test > csr test packages/components/select-input/_example/
             class="t-input__suffix"
           >
             <div
-              style="position: absolute; left: 8px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; z-index: 3;"
+              style="position: absolute; left: 8px; right: 0px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; overflow: hidden;"
             >
               <span
-                class="displaySpan"
+                style="display: inline-block; white-space: nowrap;"
               >
-                <svg
-                  class="t-icon t-icon-control-platform tdesign-demo-select-input__img"
-                  fill="none"
-                  height="1em"
-                  style="fill: none;"
-                  viewBox="0 0 24 24"
-                  width="1em"
+                <span
+                  class="displaySpan"
                 >
-                  <g
-                    id="control-platform"
+                  <svg
+                    class="t-icon t-icon-control-platform tdesign-demo-select-input__img"
+                    fill="none"
+                    height="1em"
+                    style="fill: none;"
+                    viewBox="0 0 24 24"
+                    width="1em"
                   >
-                    <path
-                      d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
-                      fill="transparent"
-                      id="fill1"
-                    />
-                    <path
-                      d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z"
-                      id="stroke1"
-                      stroke="currentColor"
-                      stroke-width="2"
-                    />
-                  </g>
-                </svg>
-                tdesign-vue
+                    <g
+                      id="control-platform"
+                    >
+                      <path
+                        d="M12 2L21 7V17L12 22L3 17V7L12 2Z"
+                        fill="transparent"
+                        id="fill1"
+                      />
+                      <path
+                        d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z"
+                        id="stroke1"
+                        stroke="currentColor"
+                        stroke-width="2"
+                      />
+                    </g>
+                  </svg>
+                  tdesign-vue
+                </span>
               </span>
             </div>
           </div>
@@ -153002,7 +153010,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="onlyLeaf">onlyLeaf</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="parentFirst">parentFirst</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="all">all</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div>"`;
 
@@ -153662,7 +153670,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 5c4fe66c2a..e1e50d529a 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -210,7 +210,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="onlyLeaf">onlyLeaf</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="parentFirst">parentFirst</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="all">all</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div>"`;
 
@@ -870,7 +870,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;z-index:3"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 

From a3a6c5550e495d0744317eb75e166bf705c7231b Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Mon, 1 Jun 2026 17:22:20 +0800
Subject: [PATCH 12/20] refactor: use `min-height` instead of `height` for
 custom element

---
 packages/common                            | 2 +-
 packages/components/select/base/Option.tsx | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/common b/packages/common
index 1c930580be..7249f43c1c 160000
--- a/packages/common
+++ b/packages/common
@@ -1 +1 @@
-Subproject commit 1c930580be92a98e431ec3ef76af0b7d98c529d6
+Subproject commit 7249f43c1c2c17f2e6dc715566c668491a8224c7
diff --git a/packages/components/select/base/Option.tsx b/packages/components/select/base/Option.tsx
index 8c0c355e2b..cca5c263cf 100644
--- a/packages/components/select/base/Option.tsx
+++ b/packages/components/select/base/Option.tsx
@@ -71,7 +71,6 @@ const Option: React.FC<SelectOptionProps> = (props) => {
   const [allSelectableChecked, setAllSelectableChecked] = useState(initCheckedStatus);
 
   const displayedContent = children || content || label;
-  const isCustomElement = React.isValidElement(displayedContent);
 
   const titleContent = useMemo(() => {
     // 外部设置 props，说明希望受控
@@ -173,10 +172,7 @@ const Option: React.FC<SelectOptionProps> = (props) => {
       key={value}
       onClick={handleSelect}
       ref={setRefCurrent}
-      style={{
-        ...(isCustomElement ? { height: 'auto' } : {}),
-        ...style,
-      }}
+      style={style}
     >
       {renderItem()}
     </li>

From 2b9024e9040fe25bc33cbcb4cb7b6c7367ff06a4 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Tue, 16 Jun 2026 16:41:09 +0800
Subject: [PATCH 13/20] fix: avoid `Cannot read properties of null`

---
 packages/components/input/Input.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/components/input/Input.tsx b/packages/components/input/Input.tsx
index e2c77d0f4d..da931b8c54 100644
--- a/packages/components/input/Input.tsx
+++ b/packages/components/input/Input.tsx
@@ -166,7 +166,7 @@ const Input = forwardRefWithStatics(
       ) : null;
 
     const updateInputWidth = () => {
-      if (!autoWidth || !inputRef.current) return;
+      if (!autoWidth || !inputRef.current || !inputPreRef.current) return;
       const { offsetWidth } = inputPreRef.current;
       const { width } = inputPreRef.current.getBoundingClientRect();
       // 异步渲染场景下 getBoundingClientRect 宽度为 0，需要使用 offsetWidth

From 7e9bc7551ab0e98e42aab5f4174858c6610f5cd0 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 25 Jun 2026 15:31:16 +0800
Subject: [PATCH 14/20] fix: auto width

---
 packages/components/select-input/useSingle.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 017e3cd0a2..fc9ca04571 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -45,7 +45,7 @@ function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputP
 }
 
 export default function useSingle(props: SelectInputProps) {
-  const { value, loading } = props;
+  const { value, loading, autoWidth } = props;
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
     suffixIcon: loading ? <Loading loading size="small" /> : props.suffixIcon,
@@ -102,13 +102,13 @@ export default function useSingle(props: SelectInputProps) {
 
   useEffect(() => {
     const inputEl = inputRef.current?.inputElement;
-    if (!inputEl || !props.autoWidth) return;
+    if (!inputEl || !autoWidth) return;
     if (showCustomElement && customElementWidth > 0) {
       inputEl.style.minWidth = `${customElementWidth}px`;
     } else {
       inputEl.style.minWidth = '';
     }
-  }, [props.autoWidth, showCustomElement, customElementWidth]);
+  }, [autoWidth, showCustomElement, customElementWidth]);
 
   useEffect(() => {
     // 自定义 valueDisplay 时，labelNode 使用绝对定位
@@ -206,7 +206,10 @@ export default function useSingle(props: SelectInputProps) {
           opacity: popupVisible && props.allowInput ? 0.5 : undefined,
         }}
       >
-        <span ref={customElementRef} style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
+        <span
+          ref={customElementRef}
+          style={{ display: 'inline-block', verticalAlign: 'top', ...(autoWidth && { whiteSpace: 'nowrap' }) }}
+        >
           {singleValueDisplay}
         </span>
       </div>
@@ -235,7 +238,7 @@ export default function useSingle(props: SelectInputProps) {
             </>
           ))
         }
-        autoWidth={props.autoWidth}
+        autoWidth={autoWidth}
         style={{
           ...(props.inputProps?.style || {}),
           minWidth: inputWidth,

From 77f56055ed055dabff881a2850bd06e86059b15f Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 25 Jun 2026 15:46:28 +0800
Subject: [PATCH 15/20] fix: revert lint

---
 .eslintignore                            |  1 +
 package.json                             |  2 +-
 packages/components/input-number/type.ts | 72 ++++++------------------
 packages/components/tag-input/type.ts    | 62 +++++---------------
 4 files changed, 34 insertions(+), 103 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index f5a9cb43b9..5550551bd0 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -15,3 +15,4 @@ static/
 packages/common
 packages/ai-core
 site/engineering/static
+packages/components/**/type.ts 
\ No newline at end of file
diff --git a/package.json b/package.json
index 41d335b72d..8f0d5921ec 100644
--- a/package.json
+++ b/package.json
@@ -48,7 +48,7 @@
     }
   },
   "lint-staged": {
-    "packages/**/*.{ts,tsx}": [
+    "packages/**/!(type).{ts,tsx}": [
       "prettier --write",
       "pnpm run lint:fix"
     ]
diff --git a/packages/components/input-number/type.ts b/packages/components/input-number/type.ts
index a0e407ba49..12cc949929 100644
--- a/packages/components/input-number/type.ts
+++ b/packages/components/input-number/type.ts
@@ -4,21 +4,15 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from "../input";
-import type { TNode } from "../common";
-import type {
-  MouseEvent,
-  KeyboardEvent,
-  FocusEvent,
-  FormEvent,
-  CompositionEvent,
-} from "react";
+import { InputProps } from '../input';
+import type { TNode } from '../common';
+import type { MouseEvent, KeyboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdInputNumberProps<T = InputNumberValue> {
   /**
    * 文本内容位置，居左/居中/居右
    */
-  align?: "left" | "center" | "right";
+  align?: 'left' | 'center' | 'right';
   /**
    * 是否允许输入超过 `max` `min` 范围外的数字。为保障用户体验，仅在失去焦点时进行数字范围矫正。默认允许超出，数字超出范围时，输入框变红提醒
    * @default true
@@ -45,10 +39,7 @@ export interface TdInputNumberProps<T = InputNumberValue> {
   /**
    * 格式化输入框展示值。第二个事件参数 `context.fixedNumber` 表示处理过小数位数 `decimalPlaces` 的数字
    */
-  format?: (
-    value: InputNumberValue,
-    context?: { fixedNumber?: InputNumberValue }
-  ) => InputNumberValue;
+  format?: (value: InputNumberValue, context?: { fixedNumber?: InputNumberValue }) => InputNumberValue;
   /**
    * 透传 Input 输入框组件全部属性
    */
@@ -89,12 +80,12 @@ export interface TdInputNumberProps<T = InputNumberValue> {
    * 组件尺寸
    * @default medium
    */
-  size?: "small" | "medium" | "large";
+  size?: 'small' | 'medium' | 'large';
   /**
    * 文本框状态
    * @default default
    */
-  status?: "default" | "success" | "warning" | "error";
+  status?: 'default' | 'success' | 'warning' | 'error';
   /**
    * 数值改变步数，可以是小数。如果是大数，请保证数据类型为字符串
    * @default 1
@@ -108,7 +99,7 @@ export interface TdInputNumberProps<T = InputNumberValue> {
    * 按钮布局
    * @default row
    */
-  theme?: "column" | "row" | "normal";
+  theme?: 'column' | 'row' | 'normal';
   /**
    * 输入框下方提示文本，会根据不同的 `status` 呈现不同的样式
    */
@@ -124,10 +115,7 @@ export interface TdInputNumberProps<T = InputNumberValue> {
   /**
    * 失去焦点时触发
    */
-  onBlur?: (
-    value: InputNumberValue,
-    context: { e: FocusEvent<HTMLDivElement> }
-  ) => void;
+  onBlur?: (value: InputNumberValue, context: { e: FocusEvent<HTMLDivElement> }) => void;
   /**
    * 值变化时触发，`type` 表示触发本次变化的来源
    */
@@ -135,49 +123,30 @@ export interface TdInputNumberProps<T = InputNumberValue> {
   /**
    * 回车键按下时触发
    */
-  onEnter?: (
-    value: InputNumberValue,
-    context: { e: KeyboardEvent<HTMLDivElement> }
-  ) => void;
+  onEnter?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
   /**
    * 获取焦点时触发
    */
-  onFocus?: (
-    value: InputNumberValue,
-    context: { e: FocusEvent<HTMLDivElement> }
-  ) => void;
+  onFocus?: (value: InputNumberValue, context: { e: FocusEvent<HTMLDivElement> }) => void;
   /**
    * 键盘按下时触发
    */
-  onKeydown?: (
-    value: InputNumberValue,
-    context: { e: KeyboardEvent<HTMLDivElement> }
-  ) => void;
+  onKeydown?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
   /**
    * 按下字符键时触发（keydown -> keypress -> keyup）
    */
-  onKeypress?: (
-    value: InputNumberValue,
-    context: { e: KeyboardEvent<HTMLDivElement> }
-  ) => void;
+  onKeypress?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
   /**
    * 释放键盘时触发
    */
-  onKeyup?: (
-    value: InputNumberValue,
-    context: { e: KeyboardEvent<HTMLDivElement> }
-  ) => void;
+  onKeyup?: (value: InputNumberValue, context: { e: KeyboardEvent<HTMLDivElement> }) => void;
   /**
    * 最大值或最小值校验结束后触发，`exceed-maximum` 表示超出最大值，`below-minimum` 表示小于最小值
    */
-  onValidate?: (context: {
-    error?: "exceed-maximum" | "below-minimum";
-  }) => void;
+  onValidate?: (context: { error?: 'exceed-maximum' | 'below-minimum' }) => void;
 }
 
-export type InputNumberDecimalPlaces =
-  | number
-  | { enableRound: boolean; places: number };
+export type InputNumberDecimalPlaces = number | { enableRound: boolean; places: number };
 
 export type InputNumberValue = number | string;
 
@@ -191,11 +160,4 @@ export interface ChangeContext {
     | CompositionEvent<HTMLDivElement>;
 }
 
-export type ChangeSource =
-  | "add"
-  | "reduce"
-  | "input"
-  | "blur"
-  | "enter"
-  | "clear"
-  | "props";
+export type ChangeSource = 'add' | 'reduce' | 'input' | 'blur' | 'enter' | 'clear' | 'props';
\ No newline at end of file
diff --git a/packages/components/tag-input/type.ts b/packages/components/tag-input/type.ts
index 5ace2ddc73..61361492cc 100644
--- a/packages/components/tag-input/type.ts
+++ b/packages/components/tag-input/type.ts
@@ -4,17 +4,10 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { InputProps } from "../input";
-import { TagProps } from "../tag";
-import type { TNode, TElement, SizeEnum } from "../common";
-import type {
-  MouseEvent,
-  KeyboardEvent,
-  ClipboardEvent,
-  FocusEvent,
-  FormEvent,
-  CompositionEvent,
-} from "react";
+import { InputProps } from '../input';
+import { TagProps } from '../tag';
+import type { TNode, TElement, SizeEnum } from '../common';
+import type { MouseEvent, KeyboardEvent, ClipboardEvent, FocusEvent, FormEvent, CompositionEvent } from 'react';
 
 export interface TdTagInputProps {
   /**
@@ -54,7 +47,7 @@ export interface TdTagInputProps {
    * 标签超出时的呈现方式，有两种：横向滚动显示 和 换行显示
    * @default break-line
    */
-  excessTagsDisplayType?: "scroll" | "break-line";
+  excessTagsDisplayType?: 'scroll' | 'break-line';
   /**
    * 标签最大换行数
    * @default 1
@@ -114,7 +107,7 @@ export interface TdTagInputProps {
   /**
    * 输入框状态
    */
-  status?: "default" | "success" | "warning" | "error";
+  status?: 'default' | 'success' | 'warning' | 'error';
   /**
    * 后置图标前的后置内容
    */
@@ -130,11 +123,7 @@ export interface TdTagInputProps {
   /**
    * 自定义单个标签的整体节点
    */
-  tagDisplay?: TNode<{
-    value: string | number;
-    index: number;
-    onClose: (context?: { e?: MouseEvent }) => void;
-  }>;
+  tagDisplay?: TNode<{ value: string | number; index: number; onClose: (context?: { e?: MouseEvent }) => void }>;
   /**
    * 透传 Tag 组件全部属性
    */
@@ -156,19 +145,11 @@ export interface TdTagInputProps {
   /**
    * 自定义值呈现的全部内容，参数为所有标签的值
    */
-  valueDisplay?:
-    | string
-    | TNode<{
-        value: TagInputValue;
-        onClose: (index: number, item?: any) => void;
-      }>;
+  valueDisplay?: string | TNode<{ value: TagInputValue; onClose: (index: number, item?: any) => void }>;
   /**
    * 失去焦点时触发
    */
-  onBlur?: (
-    value: TagInputValue,
-    context: { inputValue: string; e: FocusEvent<HTMLInputElement> }
-  ) => void;
+  onBlur?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent<HTMLInputElement> }) => void;
   /**
    * 值变化时触发，参数 `context.trigger` 表示数据变化的触发来源；`context.index` 指当前变化项的下标；`context.item` 指当前变化项；`context.e` 表示事件参数
    */
@@ -188,17 +169,11 @@ export interface TdTagInputProps {
   /**
    * 按键按下 Enter 时触发
    */
-  onEnter?: (
-    value: TagInputValue,
-    context: { e: KeyboardEvent<HTMLDivElement>; inputValue: string }
-  ) => void;
+  onEnter?: (value: TagInputValue, context: { e: KeyboardEvent<HTMLDivElement>; inputValue: string }) => void;
   /**
    * 聚焦时触发
    */
-  onFocus?: (
-    value: TagInputValue,
-    context: { inputValue: string; e: FocusEvent<HTMLInputElement> }
-  ) => void;
+  onFocus?: (value: TagInputValue, context: { inputValue: string; e: FocusEvent<HTMLInputElement> }) => void;
   /**
    * 输入框值发生变化时触发，`context.trigger` 表示触发输入框值变化的来源：文本输入触发、清除按钮触发、回车键触发等
    */
@@ -214,10 +189,7 @@ export interface TdTagInputProps {
   /**
    * 粘贴事件，`pasteValue` 表示粘贴板的内容
    */
-  onPaste?: (context: {
-    e: ClipboardEvent<HTMLDivElement>;
-    pasteValue: string;
-  }) => void;
+  onPaste?: (context: { e: ClipboardEvent<HTMLDivElement>; pasteValue: string }) => void;
   /**
    * 移除单个标签时触发
    */
@@ -233,11 +205,7 @@ export interface TagInputChangeContext {
   e?: MouseEvent<SVGSVGElement> | KeyboardEvent<HTMLInputElement>;
 }
 
-export type TagInputTriggerSource =
-  | "enter"
-  | "tag-remove"
-  | "backspace"
-  | "clear";
+export type TagInputTriggerSource = 'enter' | 'tag-remove' | 'backspace' | 'clear';
 
 export interface TagInputDragSortContext {
   newTags: TagInputValue;
@@ -253,7 +221,7 @@ export interface InputValueChangeContext {
     | MouseEvent<HTMLElement | SVGElement>
     | CompositionEvent<HTMLDivElement>
     | KeyboardEvent<HTMLInputElement>;
-  trigger: "input" | "clear" | "enter" | "blur";
+  trigger: 'input' | 'clear' | 'enter' | 'blur';
 }
 
 export interface TagInputRemoveContext {
@@ -264,4 +232,4 @@ export interface TagInputRemoveContext {
   trigger: TagInputRemoveTrigger;
 }
 
-export type TagInputRemoveTrigger = "tag-remove" | "backspace";
+export type TagInputRemoveTrigger = 'tag-remove' | 'backspace';
\ No newline at end of file

From c7a6af5066fc2e43360ca1978dabc89eefda5ed7 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Thu, 25 Jun 2026 16:46:55 +0800
Subject: [PATCH 16/20] fix: min-width

---
 packages/components/select-input/useSingle.tsx | 14 +++++++++-----
 test/snap/__snapshots__/csr.test.jsx.snap      |  8 ++++----
 test/snap/__snapshots__/ssr.test.jsx.snap      |  4 ++--
 3 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index cb421dcd80..db170bcadb 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -94,10 +94,14 @@ export default function useSingle(props: SelectInputProps) {
   }, [props.label, classPrefix]);
 
   useEffect(() => {
-    if (showCustomElement && customElementRef.current) {
-      const { width } = customElementRef.current.getBoundingClientRect();
-      setCustomElementWidth(width);
-    }
+    if (!showCustomElement || !customElementRef.current) return;
+    const el = customElementRef.current;
+    // 测量真实内容宽度时，临时强制 nowrap，避免被父级 absolute 容器（受 suffixSpace 影响）压缩换行导致测量值偏小
+    const prevWhiteSpace = el.style.whiteSpace;
+    el.style.whiteSpace = 'nowrap';
+    const { width } = el.getBoundingClientRect();
+    el.style.whiteSpace = prevWhiteSpace;
+    setCustomElementWidth((prev) => (Math.abs(prev - width) < 0.5 ? prev : width));
   }, [showCustomElement, singleValueDisplay]);
 
   useEffect(() => {
@@ -126,7 +130,7 @@ export default function useSingle(props: SelectInputProps) {
       const inputRect = inputEl.getBoundingClientRect();
       // wrapper 右内边距 + suffix 区域 + suffixIcon 区域
       const space = Math.max(wrapperRect.right - inputRect.right, 0);
-      setSuffixSpace(space);
+      setSuffixSpace((prev) => (Math.abs(prev - space) < 0.5 ? prev : space));
     };
 
     measure();
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index a0fda9214c..aca828845d 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -22976,7 +22976,7 @@ exports[`csr snapshot test > csr test packages/components/cascader/_example/valu
                 style="position: absolute; left: 8px; right: 0px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; overflow: hidden;"
               >
                 <span
-                  style="display: inline-block; white-space: nowrap;"
+                  style="display: inline-block; vertical-align: top;"
                 >
                   <div>
                     <img
@@ -92472,7 +92472,7 @@ exports[`csr snapshot test > csr test packages/components/select-input/_example/
               style="position: absolute; left: 8px; right: 0px; top: 50%; transform: translateY(-50%); pointer-events: none; text-align: initial; overflow: hidden;"
             >
               <span
-                style="display: inline-block; white-space: nowrap;"
+                style="display: inline-block; vertical-align: top;"
               >
                 <span
                   class="displaySpan"
@@ -153753,7 +153753,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;vertical-align:top"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="onlyLeaf">onlyLeaf</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="parentFirst">parentFirst</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="all">all</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div>"`;
 
@@ -154413,7 +154413,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;vertical-align:top"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 1360725cdc..239a6289ec 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -210,7 +210,7 @@ exports[`ssr snapshot test > ssr test packages/components/cascader/_example/size
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/trigger.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-display.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--empty"><div class="t-input__wrap" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">单选：</div></div><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;vertical-align:top"><div><img style="width:16px;height:16px;margin-top:2px;vertical-align:-4px;margin-right:4px"/><span></span><span>(<!-- -->2.2<!-- -->)</span></div></span></div></div><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty" style="width:500px"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag-input__prefix">多选：</div></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/cascader/_example/value-mode.tsx 1`] = `"<div style="gap:16px" class="t-space t-space-vertical"><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="onlyLeaf">onlyLeaf</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="parentFirst">parentFirst</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div><div class="t-space-item"><div style="gap:16px" class="t-space t-space-align-center t-space-horizontal"><div class="t-space-item"><div style="width:100px"><div class="t-tag t-tag--default t-tag--dark"><span title="all">all</span></div></div></div><div class="t-space-item"><div class="t-cascader t-select-input t-select-input--multiple t-select-input--empty"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-is-empty" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"></div><input placeholder="请选择" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre">请选择</span><span class="t-input__suffix t-input__suffix-icon"><svg class="t-fake-arrow t-cascader__icon" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.75 5.7998L7.99274 10.0425L12.2361 5.79921" stroke="black" stroke-opacity="0.9" stroke-width="1.3"></path></svg></span></div></div></div></div></div></div></div>"`;
 
@@ -870,7 +870,7 @@ exports[`ssr snapshot test > ssr test packages/components/select-input/_example/
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/collapsed-items.tsx 1`] = `"<div style="gap:16px" class="t-space tdesign-demo__select-input-collapsed-items t-space-vertical"><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>+<!-- -->5</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div><div class="t-space-item"><br/></div><div class="t-space-item"> </div><div class="t-space-item"><br/></div><div class="t-space-item"><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input__with-suffix-icon t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix t-input--suffix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span>More(+<!-- -->4<!-- -->)</span></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span><span class="t-input__suffix t-input__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-down" style="fill:none"><g id="chevron-down"><path id="stroke1" stroke="currentColor" d="M17.5 9.5L12 15L6.5 9.5" stroke-linecap="square" stroke-width="2"></path></g></svg></span></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;white-space:nowrap"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test packages/components/select-input/_example/custom-tag.tsx 1`] = `"<div class="tdesign-demo-select-input-custom-tag"><div class="t-select-input"><div class="t-input__wrap" spellcheck="false"><div class="t-input t-align-left t-input--suffix"><input placeholder="" type="text" class="t-input__inner" readonly="" autoComplete="off" value=""/><div class="t-input__suffix"><div style="position:absolute;left:8px;right:0px;top:50%;transform:translateY(-50%);pointer-events:none;text-align:initial;overflow:hidden"><span style="display:inline-block;vertical-align:top"><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform tdesign-demo-select-input__img" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg>tdesign-vue</span></span></div></div></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-react</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-is-readonly t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark" style="margin-right:4px"><span><span class="displaySpan"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-control-platform" style="fill:none"><g id="control-platform"><path id="fill1" fill="transparent" d="M12 2L21 7V17L12 22L3 17V7L12 2Z"></path><path id="stroke1" stroke="currentColor" d="M12 12L20.5 7.5M12 12V21.5M12 12L3.5 7.5M12 2L21 7V17L12 22L3 17V7L12 2Z" stroke-width="2"></path></g></svg> <!-- -->tdesign-vue<!-- -->tdesign-react<!-- -->tdesign-mobile-vue</span></span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner t-input--soft-hidden" readonly="" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test packages/components/select-input/_example/excess-tags-display-type.tsx 1`] = `"<div class="tdesign-demo__select-input-excess-tags-display-type" style="width:width: 100%"><p>第一种呈现方式：超出时滚动显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div><br/><br/><br/><p>第二种呈现方式：超出时换行显示</p><br/><div class="t-select-input t-select-input--multiple"><div class="t-input__wrap t-tag-input t-tag-input--break-line t-tag-input--with-tag" value="" spellcheck="false"><div class="t-input t-align-left t-input--prefix"><div class="t-input__prefix"><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-vue">tdesign-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-react">tdesign-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-miniprogram">tdesign-miniprogram</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-angular">tdesign-angular</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-vue">tdesign-mobile-vue</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div><div class="t-tag t-tag--default t-tag--dark"><span title="tdesign-mobile-react">tdesign-mobile-react</span><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close t-tag__icon-close" style="fill:none"><g id="close"><path id="stroke1" stroke="currentColor" d="M16.9503 7.05029L12.0005 12M12.0005 12L7.05078 16.9498M12.0005 12L16.9503 16.9498M12.0005 12L7.05078 7.05029" stroke-linecap="square" stroke-width="2"></path></g></svg></div></div><input placeholder="" type="text" class="t-input__inner" autoComplete="off" value=""/><span class="t-input__input-pre"></span></div></div></div></div>"`;
 

From 4c002881ae63e5165a8e4c00885c0234c51cf706 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Fri, 26 Jun 2026 13:00:35 +0800
Subject: [PATCH 17/20] fix: calc width

---
 .../components/select-input/useSingle.tsx     | 45 ++++++++++++++-----
 1 file changed, 33 insertions(+), 12 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index db170bcadb..26c9e58d7c 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -96,7 +96,7 @@ export default function useSingle(props: SelectInputProps) {
   useEffect(() => {
     if (!showCustomElement || !customElementRef.current) return;
     const el = customElementRef.current;
-    // 测量真实内容宽度时，临时强制 nowrap，避免被父级 absolute 容器（受 suffixSpace 影响）压缩换行导致测量值偏小
+    // 测量真实内容宽度时，临时强制 nowrap，避免被父级容器（受 suffixSpace 影响）压缩换行导致测量值偏小
     const prevWhiteSpace = el.style.whiteSpace;
     el.style.whiteSpace = 'nowrap';
     const { width } = el.getBoundingClientRect();
@@ -104,7 +104,10 @@ export default function useSingle(props: SelectInputProps) {
     setCustomElementWidth((prev) => (Math.abs(prev - width) < 0.5 ? prev : width));
   }, [showCustomElement, singleValueDisplay]);
 
+  // 当存在自定义 valueDisplay 时，labelNode 使用 absolute 定位
+  // 需要给 input 设置 minWidth 来撑开宽度
   useEffect(() => {
+    // autoWidth 时确保完全显示内容
     const inputEl = inputRef.current?.inputElement;
     if (!inputEl || !autoWidth) return;
     if (showCustomElement && customElementWidth > 0) {
@@ -114,6 +117,34 @@ export default function useSingle(props: SelectInputProps) {
     }
   }, [autoWidth, showCustomElement, customElementWidth]);
 
+  useEffect(() => {
+    // 非 autoWidth 时避免覆盖用户在外层设置的宽度约束（width / maxWidth）
+    // 测量祖先实际可用宽度作为上限
+    const wrapperEl = inputRef.current?.currentElement;
+    if (!wrapperEl || autoWidth) return;
+    const hasUserDefinedWidth =
+      props.style?.width || props.inputProps?.style?.width || props.inputProps?.style?.minWidth;
+    if (hasUserDefinedWidth || !showCustomElement || customElementWidth <= 0) {
+      wrapperEl.style.minWidth = '';
+      return;
+    }
+    const width = customElementWidth + labelWidth + 48;
+    // 先重置自身 minWidth，避免影响父级宽度测量
+    wrapperEl.style.minWidth = '';
+    const parentEl = wrapperEl.parentElement;
+    const parentWidth = parentEl ? parentEl.getBoundingClientRect().width : 0;
+    const finalWidth = parentWidth > 0 ? Math.min(width, parentWidth) : width;
+    wrapperEl.style.minWidth = `${finalWidth}px`;
+  }, [
+    autoWidth,
+    showCustomElement,
+    customElementWidth,
+    labelWidth,
+    props.style?.width,
+    props.inputProps?.style?.width,
+    props.inputProps?.style?.minWidth,
+  ]);
+
   useEffect(() => {
     // 自定义 valueDisplay 时，labelNode 使用绝对定位
     // 避免内容延伸盖到右侧的 suffixIcon 区域，需要测量 input 右侧到 wrapper 右侧的距离作为 right 留白
@@ -223,13 +254,6 @@ export default function useSingle(props: SelectInputProps) {
       </div>
     ) : null;
 
-    const hasCustomWidth = props.style?.width || props.inputProps?.style?.width || props.inputProps?.style?.minWidth;
-    // customElement 定位为 absolute，无法撑开 input 宽度
-    const inputWidth =
-      !hasCustomWidth && showCustomElement && customElementWidth > 0
-        ? `${customElementWidth + labelWidth + 48}px`
-        : undefined;
-
     return (
       <Input
         ref={inputRef}
@@ -247,10 +271,7 @@ export default function useSingle(props: SelectInputProps) {
           ))
         }
         autoWidth={autoWidth}
-        style={{
-          ...(props.inputProps?.style || {}),
-          minWidth: inputWidth,
-        }}
+        style={props.inputProps?.style}
         allowInput={props.allowInput}
         label={props.label}
         value={displayedValue()}

From cdb87dd21ae383d8ea4faf18e11885828375d050 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Fri, 26 Jun 2026 13:05:03 +0800
Subject: [PATCH 18/20] chore: remove comments

---
 packages/components/select-input/useSingle.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 26c9e58d7c..24606ed5af 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -146,7 +146,6 @@ export default function useSingle(props: SelectInputProps) {
   ]);
 
   useEffect(() => {
-    // 自定义 valueDisplay 时，labelNode 使用绝对定位
     // 避免内容延伸盖到右侧的 suffixIcon 区域，需要测量 input 右侧到 wrapper 右侧的距离作为 right 留白
     if (!showCustomElement) {
       setSuffixSpace(0);

From 8fb5fbc7ad4cda842c473b3b8a13b724ed70e114 Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Fri, 26 Jun 2026 14:54:00 +0800
Subject: [PATCH 19/20] chore: optimize code

---
 .../components/select-input/useSingle.tsx     | 79 ++++++++++---------
 1 file changed, 43 insertions(+), 36 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 24606ed5af..1c0f3ce758 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -45,28 +45,37 @@ function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputP
 }
 
 export default function useSingle(props: SelectInputProps) {
-  const { value, loading, autoWidth } = props;
+  const { value, autoWidth, inputProps, label, allowInput, clearable, keys, valueDisplay, suffixIcon } = props;
   const commonInputProps: SelectInputCommonProperties = {
     ...pick(props, COMMON_PROPERTIES),
-    suffixIcon: loading ? <Loading loading size="small" /> : props.suffixIcon,
+    suffixIcon: props.loading ? <Loading loading size="small" /> : suffixIcon,
   };
 
+  const styleProps = props.style || {};
+  const inputStyleProps = inputProps?.style || {};
+  const hasWidthProps = Boolean(
+    styleProps.width ||
+    styleProps.minWidth ||
+    styleProps.maxWidth ||
+    inputStyleProps.width ||
+    inputStyleProps.minWidth ||
+    inputStyleProps.maxWidth,
+  );
+
   const { classPrefix } = useConfig();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
   const customElementRef = useRef<HTMLSpanElement>(null);
+  const minWidthSetRef = useRef(false); // 标记 minWidth 是否由当前 hook 设置，避免误清用户外部设置的数值
 
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [labelWidth, setLabelWidth] = useState<number>(0);
   const [customElementWidth, setCustomElementWidth] = useState<number>(0);
   const [suffixSpace, setSuffixSpace] = useState<number>(0);
 
-  const singleValueDisplay = useMemo(
-    () => props.valueDisplay ?? getOptionLabel(value, props.keys),
-    [value, props.valueDisplay, props.keys],
-  );
+  const singleValueDisplay = useMemo(() => valueDisplay ?? getOptionLabel(value, keys), [value, valueDisplay, keys]);
 
   const showCustomElement = useMemo(
     () => !isTyping && !inputValue && React.isValidElement(singleValueDisplay),
@@ -80,7 +89,7 @@ export default function useSingle(props: SelectInputProps) {
   };
 
   const onInnerInputChange: TdInputProps['onChange'] = (value, context) => {
-    if (props.allowInput) {
+    if (allowInput) {
       setInputValue(value, { ...context, trigger: 'input' });
     }
   };
@@ -91,7 +100,7 @@ export default function useSingle(props: SelectInputProps) {
       const prefixWidth = labelEl.getBoundingClientRect().width;
       setLabelWidth(prefixWidth);
     }
-  }, [props.label, classPrefix]);
+  }, [label, classPrefix]);
 
   useEffect(() => {
     if (!showCustomElement || !customElementRef.current) return;
@@ -118,32 +127,30 @@ export default function useSingle(props: SelectInputProps) {
   }, [autoWidth, showCustomElement, customElementWidth]);
 
   useEffect(() => {
-    // 非 autoWidth 时避免覆盖用户在外层设置的宽度约束（width / maxWidth）
+    // 非 autoWidth 时避免覆盖用户在外层设置的宽度约束（width / minWidth / maxWidth）
     // 测量祖先实际可用宽度作为上限
-    const wrapperEl = inputRef.current?.currentElement;
+    const wrapperEl = inputRef.current?.currentElement as HTMLElement | undefined;
     if (!wrapperEl || autoWidth) return;
-    const hasUserDefinedWidth =
-      props.style?.width || props.inputProps?.style?.width || props.inputProps?.style?.minWidth;
-    if (hasUserDefinedWidth || !showCustomElement || customElementWidth <= 0) {
-      wrapperEl.style.minWidth = '';
+    const clearMinWidth = () => {
+      // 仅当 minWidth 是由当前 hook 设置时才清除，避免误清用户外部设置的冲突
+      if (minWidthSetRef.current) {
+        wrapperEl.style.minWidth = '';
+        minWidthSetRef.current = false;
+      }
+    };
+    if (hasWidthProps || !showCustomElement || customElementWidth <= 0) {
+      clearMinWidth();
       return;
     }
     const width = customElementWidth + labelWidth + 48;
-    // 先重置自身 minWidth，避免影响父级宽度测量
-    wrapperEl.style.minWidth = '';
+    // 先临时重置设置的 minWidth，避免影响宽度测量
+    clearMinWidth();
     const parentEl = wrapperEl.parentElement;
     const parentWidth = parentEl ? parentEl.getBoundingClientRect().width : 0;
     const finalWidth = parentWidth > 0 ? Math.min(width, parentWidth) : width;
     wrapperEl.style.minWidth = `${finalWidth}px`;
-  }, [
-    autoWidth,
-    showCustomElement,
-    customElementWidth,
-    labelWidth,
-    props.style?.width,
-    props.inputProps?.style?.width,
-    props.inputProps?.style?.minWidth,
-  ]);
+    minWidthSetRef.current = true;
+  }, [autoWidth, showCustomElement, customElementWidth, labelWidth, hasWidthProps]);
 
   useEffect(() => {
     // 避免内容延伸盖到右侧的 suffixIcon 区域，需要测量 input 右侧到 wrapper 右侧的距离作为 right 留白
@@ -171,7 +178,7 @@ export default function useSingle(props: SelectInputProps) {
       wrapperEl.removeEventListener('mouseenter', measure);
       wrapperEl.removeEventListener('mouseleave', measure);
     };
-  }, [showCustomElement, singleValueDisplay, props.clearable, props.suffixIcon, props.suffix]);
+  }, [showCustomElement, singleValueDisplay, clearable, suffixIcon, props.suffix]);
 
   const renderSelectSingle = (
     popupVisible: boolean,
@@ -208,7 +215,7 @@ export default function useSingle(props: SelectInputProps) {
       if (popupVisible && inputValue) {
         return inputValue;
       }
-      if (props.allowInput && popupVisible && !showCustomElement) {
+      if (allowInput && popupVisible && !showCustomElement) {
         return '';
       }
       if (!showCustomElement) {
@@ -237,7 +244,7 @@ export default function useSingle(props: SelectInputProps) {
           textAlign: 'initial',
           overflow: 'hidden',
           // 输入状态，降低透明度，仿造 placeholder 效果
-          opacity: popupVisible && props.allowInput ? 0.5 : undefined,
+          opacity: popupVisible && allowInput ? 0.5 : undefined,
         }}
       >
         <span
@@ -257,7 +264,7 @@ export default function useSingle(props: SelectInputProps) {
       <Input
         ref={inputRef}
         // 当 valueDisplay 为 自定义元素时，选中内容时 input 依旧为空，确保此时 clear icon 可见
-        showClearIconOnEmpty={props.clearable && showCustomElement}
+        showClearIconOnEmpty={clearable && showCustomElement}
         {...commonInputProps}
         autocomplete="off"
         suffix={
@@ -270,9 +277,9 @@ export default function useSingle(props: SelectInputProps) {
           ))
         }
         autoWidth={autoWidth}
-        style={props.inputProps?.style}
-        allowInput={props.allowInput}
-        label={props.label}
+        style={inputProps?.style}
+        allowInput={allowInput}
+        label={label}
         value={displayedValue()}
         placeholder={displayedPlaceholder()}
         onChange={onInnerInputChange}
@@ -284,16 +291,16 @@ export default function useSingle(props: SelectInputProps) {
         }}
         // onBlur need to triggered by input when popup panel is null or when popupVisible is forced to false
         onBlur={handleBlur}
-        {...props.inputProps}
+        {...inputProps}
         onCompositionstart={(v, ctx) => {
           setIsTyping(true);
-          props.inputProps?.onCompositionstart?.(v, ctx);
+          inputProps?.onCompositionstart?.(v, ctx);
         }}
         onCompositionend={(v, ctx) => {
           setIsTyping(false);
-          props.inputProps?.onCompositionend?.(v, ctx);
+          inputProps?.onCompositionend?.(v, ctx);
         }}
-        inputClass={classNames(props.inputProps?.inputClass, {
+        inputClass={classNames(inputProps?.inputClass, {
           [`${classPrefix}-input--focused`]: popupVisible,
           [`${classPrefix}-is-focused`]: popupVisible,
         })}

From 66f3a46e69544f6428dabc1e2fe12274fba0083e Mon Sep 17 00:00:00 2001
From: Rylan <rylanbot@qq.com>
Date: Fri, 26 Jun 2026 15:48:34 +0800
Subject: [PATCH 20/20] fix: simplify logic

---
 .../components/select-input/useSingle.tsx     | 68 +++----------------
 1 file changed, 11 insertions(+), 57 deletions(-)

diff --git a/packages/components/select-input/useSingle.tsx b/packages/components/select-input/useSingle.tsx
index 1c0f3ce758..d5a09adbbd 100644
--- a/packages/components/select-input/useSingle.tsx
+++ b/packages/components/select-input/useSingle.tsx
@@ -39,10 +39,10 @@ const DEFAULT_KEYS: TdSelectInputProps['keys'] = {
   value: 'value',
 };
 
-function getOptionLabel(value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) {
+const getOptionLabel = (value: TdSelectInputProps['value'], keys: TdSelectInputProps['keys']) => {
   const iKeys = keys || DEFAULT_KEYS;
   return isObject(value) ? value[iKeys.label] : value;
-}
+};
 
 export default function useSingle(props: SelectInputProps) {
   const { value, autoWidth, inputProps, label, allowInput, clearable, keys, valueDisplay, suffixIcon } = props;
@@ -51,28 +51,15 @@ export default function useSingle(props: SelectInputProps) {
     suffixIcon: props.loading ? <Loading loading size="small" /> : suffixIcon,
   };
 
-  const styleProps = props.style || {};
-  const inputStyleProps = inputProps?.style || {};
-  const hasWidthProps = Boolean(
-    styleProps.width ||
-    styleProps.minWidth ||
-    styleProps.maxWidth ||
-    inputStyleProps.width ||
-    inputStyleProps.minWidth ||
-    inputStyleProps.maxWidth,
-  );
-
   const { classPrefix } = useConfig();
   const [inputValue, setInputValue] = useControlled(props, 'inputValue', props.onInputChange);
 
   const inputRef = useRef<InputRef>(null);
   const blurTimeoutRef = useRef(null);
   const customElementRef = useRef<HTMLSpanElement>(null);
-  const minWidthSetRef = useRef(false); // 标记 minWidth 是否由当前 hook 设置，避免误清用户外部设置的数值
 
   const [isTyping, setIsTyping] = useState<boolean>(false);
   const [labelWidth, setLabelWidth] = useState<number>(0);
-  const [customElementWidth, setCustomElementWidth] = useState<number>(0);
   const [suffixSpace, setSuffixSpace] = useState<number>(0);
 
   const singleValueDisplay = useMemo(() => valueDisplay ?? getOptionLabel(value, keys), [value, valueDisplay, keys]);
@@ -103,54 +90,21 @@ export default function useSingle(props: SelectInputProps) {
   }, [label, classPrefix]);
 
   useEffect(() => {
-    if (!showCustomElement || !customElementRef.current) return;
+    const inputEl = inputRef.current?.inputElement;
+    if (!inputEl) return;
+    // autoWidth 且存在自定义元素时需要撑开宽度
+    if (!autoWidth || !showCustomElement || !customElementRef.current) {
+      inputEl.style.minWidth = '';
+      return;
+    }
     const el = customElementRef.current;
     // 测量真实内容宽度时，临时强制 nowrap，避免被父级容器（受 suffixSpace 影响）压缩换行导致测量值偏小
     const prevWhiteSpace = el.style.whiteSpace;
     el.style.whiteSpace = 'nowrap';
     const { width } = el.getBoundingClientRect();
     el.style.whiteSpace = prevWhiteSpace;
-    setCustomElementWidth((prev) => (Math.abs(prev - width) < 0.5 ? prev : width));
-  }, [showCustomElement, singleValueDisplay]);
-
-  // 当存在自定义 valueDisplay 时，labelNode 使用 absolute 定位
-  // 需要给 input 设置 minWidth 来撑开宽度
-  useEffect(() => {
-    // autoWidth 时确保完全显示内容
-    const inputEl = inputRef.current?.inputElement;
-    if (!inputEl || !autoWidth) return;
-    if (showCustomElement && customElementWidth > 0) {
-      inputEl.style.minWidth = `${customElementWidth}px`;
-    } else {
-      inputEl.style.minWidth = '';
-    }
-  }, [autoWidth, showCustomElement, customElementWidth]);
-
-  useEffect(() => {
-    // 非 autoWidth 时避免覆盖用户在外层设置的宽度约束（width / minWidth / maxWidth）
-    // 测量祖先实际可用宽度作为上限
-    const wrapperEl = inputRef.current?.currentElement as HTMLElement | undefined;
-    if (!wrapperEl || autoWidth) return;
-    const clearMinWidth = () => {
-      // 仅当 minWidth 是由当前 hook 设置时才清除，避免误清用户外部设置的冲突
-      if (minWidthSetRef.current) {
-        wrapperEl.style.minWidth = '';
-        minWidthSetRef.current = false;
-      }
-    };
-    if (hasWidthProps || !showCustomElement || customElementWidth <= 0) {
-      clearMinWidth();
-      return;
-    }
-    const width = customElementWidth + labelWidth + 48;
-    // 先临时重置设置的 minWidth，避免影响宽度测量
-    clearMinWidth();
-    const parentEl = wrapperEl.parentElement;
-    const parentWidth = parentEl ? parentEl.getBoundingClientRect().width : 0;
-    const finalWidth = parentWidth > 0 ? Math.min(width, parentWidth) : width;
-    wrapperEl.style.minWidth = `${finalWidth}px`;
-    minWidthSetRef.current = true;
-  }, [autoWidth, showCustomElement, customElementWidth, labelWidth, hasWidthProps]);
+    inputEl.style.minWidth = width > 0 ? `${width}px` : '';
+  }, [autoWidth, showCustomElement, singleValueDisplay]);
 
   useEffect(() => {
     // 避免内容延伸盖到右侧的 suffixIcon 区域，需要测量 input 右侧到 wrapper 右侧的距离作为 right 留白