From f17ab7bfcb796302eb9640412d5d53f97a2bda4c Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Fri, 13 Sep 2024 16:32:24 +0800
Subject: [PATCH 1/6] feat(tree-select): add tree-select component

feat #395
---
 src/tree-select/defaultProps.ts      |  12 ++
 src/tree-select/style/css.js         |   1 +
 src/tree-select/style/index.js       |   1 +
 src/tree-select/tree-select.en-US.md |  19 +++
 src/tree-select/tree-select.md       |  19 +++
 src/tree-select/tree-select.tsx      | 192 +++++++++++++++++++++++++++
 src/tree-select/type.ts              |  50 +++++++
 7 files changed, 294 insertions(+)
 create mode 100644 src/tree-select/defaultProps.ts
 create mode 100644 src/tree-select/style/css.js
 create mode 100644 src/tree-select/style/index.js
 create mode 100644 src/tree-select/tree-select.en-US.md
 create mode 100644 src/tree-select/tree-select.md
 create mode 100644 src/tree-select/tree-select.tsx
 create mode 100644 src/tree-select/type.ts

diff --git a/src/tree-select/defaultProps.ts b/src/tree-select/defaultProps.ts
new file mode 100644
index 00000000..7900daa0
--- /dev/null
+++ b/src/tree-select/defaultProps.ts
@@ -0,0 +1,12 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdTreeSelectProps } from './type';
+
+export const treeSelectDefaultProps: TdTreeSelectProps = {
+  filterable: false,
+  height: 336,
+  multiple: false,
+  options: [],
+};
diff --git a/src/tree-select/style/css.js b/src/tree-select/style/css.js
new file mode 100644
index 00000000..6a9a4b13
--- /dev/null
+++ b/src/tree-select/style/css.js
@@ -0,0 +1 @@
+import './index.css';
diff --git a/src/tree-select/style/index.js b/src/tree-select/style/index.js
new file mode 100644
index 00000000..d6cbf010
--- /dev/null
+++ b/src/tree-select/style/index.js
@@ -0,0 +1 @@
+import '../../_common/style/mobile/components/tree-select/_index.less';
diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md
new file mode 100644
index 00000000..07b699f8
--- /dev/null
+++ b/src/tree-select/tree-select.en-US.md
@@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+
+### TreeSelect Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+filterable | Boolean | false | \- | N
+height | String / Number | 336 | \- | N
+keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+multiple | Boolean | false | \- | N
+options | Array | [] | Typescript：`Array<DataOption>` | N
+value | String / Number / Array | - | Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts) | N
+defaultValue | String / Number / Array | - | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts) | N
+onChange | Function |  | Typescript：`(value: TreeSelectValue, level: TreeLevel)  => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/> | N
diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md
new file mode 100644
index 00000000..7b05d151
--- /dev/null
+++ b/src/tree-select/tree-select.md
@@ -0,0 +1,19 @@
+:: BASE_DOC ::
+
+## API
+
+
+### TreeSelect Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+filterable | Boolean | false | 是否可搜索 | N
+height | String / Number | 336 | 高度，默认单位为 px | N
+keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+multiple | Boolean | false | 是否允许多选 | N
+options | Array | [] | 选项。TS 类型：`Array<DataOption>` | N
+value | String / Number / Array | - | 选中值。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts) | N
+defaultValue | String / Number / Array | - | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts) | N
+onChange | Function |  | TS 类型：`(value: TreeSelectValue, level: TreeLevel)  => void`<br/>点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/> | N
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
new file mode 100644
index 00000000..8f07b1e3
--- /dev/null
+++ b/src/tree-select/tree-select.tsx
@@ -0,0 +1,192 @@
+import React, { FC, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import useDefault from '../_util/useDefault';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { TdTreeSelectProps, TreeSelectValue } from './type';
+import { treeSelectDefaultProps } from './defaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import { convertUnit } from '../_util/convertUnit';
+import { TreeOptionData } from '../common';
+import { SideBar, SideBarItem } from '../side-bar';
+import parseTNode from '../_util/parseTNode';
+import { Checkbox } from '../checkbox';
+import { Radio, RadioGroup } from '../radio';
+import { NativeProps } from '../_util/withNativeProps';
+
+export interface TreeSelectProps extends TdTreeSelectProps, NativeProps {}
+
+const TreeSelect: FC<TreeSelectProps> = (props) => {
+  const treeSelectClass = usePrefixClass('tree-select');
+  const { value, onChange, height, options, keys, multiple } = useDefaultProps(props, treeSelectDefaultProps);
+  const [innerValue, setInnerValue] = useDefault<TreeSelectValue, any>(value, null, onChange);
+  const [leafLevel, setLeafLevel] = useState(0);
+  const [treeOptions, setTreeOptions] = useState<TreeOptionData[][]>([]);
+  // const rootStyle = useMemo(() => [`height: ${convertUnit(height)}`, style].join(';'), [height, style]);
+
+  const buildTreeOptions = () => {
+    const { options, multiple, keys } = props;
+
+    let level = -1;
+    const tmpTreeOptions: TreeOptionData[][] = [];
+    let node: TreeOptionData = { children: options };
+    if (options.length === 0 || (Array.isArray(value) && value.length === 0)) return;
+    while (node && node.children) {
+      level += 1;
+      const list = (node.children as TreeOptionData[]).map((item: TreeOptionData) => ({
+        label: item[keys?.label || 'label'],
+        value: item[keys?.value || 'value'],
+        disabled: item[keys?.disabled || 'disabled'],
+        children: item.children,
+      }));
+      const thisValue = innerValue?.[level];
+
+      tmpTreeOptions.push([...list]);
+      if (thisValue == null) {
+        const [firstChild] = list;
+        node = firstChild;
+      } else {
+        const child = list.find((child) => child.value === thisValue);
+        node = child ?? list[0];
+      }
+    }
+    setLeafLevel(Math.max(0, level));
+    setTreeOptions(tmpTreeOptions);
+
+    if (multiple) {
+      const finalValue = innerValue;
+      if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
+        throw TypeError('应传入数组类型的 value');
+      }
+    }
+  };
+
+  const getTreeClass = (level: number, total: number) => {
+    if (level === 0) return 'right';
+    if (level === 1 && level !== total - 1) return 'middle';
+    return 'left';
+  };
+
+  const onRootChange = (level: number) => {
+    setInnerValue(innerValue, level);
+  };
+
+  const handleTreeClick = (itemValue: TreeSelectValue, level: number, isDisabled: boolean) => {
+    if (isDisabled) return;
+    // innerValue.value[level] = itemValue;
+    setInnerValue(innerValue, level);
+  };
+
+  useEffect(() => {
+    buildTreeOptions();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [innerValue, options, keys, multiple]);
+
+  const renderSideBar = (treeOption: TreeOptionData[]) => (
+    <SideBar className={`${treeSelectClass}-colum`} onChange={() => onRootChange(0)}>
+      {treeOption.map((item, index) => (
+        <SideBarItem
+          key={index}
+          label={item.label.toString()}
+          value={item.value}
+          disabled={item.disabled}
+        ></SideBarItem>
+      ))}
+    </SideBar>
+  );
+
+  const renderMiddleLevel = (treeOption: TreeOptionData[], level: number) =>
+    treeOption.map((item) => (
+      <div
+        key={item.value}
+        className={classNames({
+          [`${treeSelectClass}__item`]: true,
+          [`${treeSelectClass}__item--active`]: item.value === innerValue[level],
+          [`${treeSelectClass}__item--disabled`]: item.disabled,
+        })}
+        onClick={() => handleTreeClick(item.value, level, item.disabled)}
+      >
+        {parseTNode(item.label)}
+      </div>
+    ));
+
+  const renderLeafLevel = (treeOption: TreeOptionData[], level: number) => {
+    if (multiple) {
+      return (
+        <Checkbox.Group
+          v-model={innerValue[level]}
+          className={`${treeSelectClass}__checkbox`}
+          onChange={() => onRootChange(level)}
+        >
+          {treeOption.map((item) => (
+            <Checkbox
+              key={item.value}
+              class={`${treeSelectClass}__checkbox-item`}
+              value={item.value}
+              maxLabelRow={1}
+              icon="line"
+              borderless
+              placement="right"
+              disabled={item.disabled}
+            >
+              {item.label}
+            </Checkbox>
+          ))}
+        </Checkbox.Group>
+      );
+    }
+    return (
+      <RadioGroup className={`${treeSelectClass}__radio`} onChange={() => onRootChange(level)}>
+        {treeOption.map((item) => (
+          <Radio
+            key={item.value}
+            className={`${treeSelectClass}__radio-item`}
+            value={item.value}
+            icon="line"
+            maxLabelRow={1}
+            borderless
+            placement="right"
+            disabled={item.disabled}
+          >
+            {item.label}
+          </Radio>
+        ))}
+      </RadioGroup>
+    );
+  };
+
+  return (
+    <div
+      className={treeSelectClass}
+      style={{
+        height: convertUnit(height),
+      }}
+    >
+      {treeOptions.map((item, level) => {
+        let levelContent;
+        if (level === 0) {
+          levelContent = renderSideBar(item);
+        } else if (level === leafLevel) {
+          levelContent = renderLeafLevel(item, level);
+        } else {
+          levelContent = renderMiddleLevel(item, level);
+        }
+
+        return (
+          <div
+            key={level}
+            className={classNames(
+              `${treeSelectClass}__column`,
+              `${treeSelectClass}__column--${getTreeClass(leafLevel - level, treeOptions.length)}`,
+            )}
+          >
+            {levelContent}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+TreeSelect.displayName = 'TreeSelect';
+
+export default TreeSelect;
diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts
new file mode 100644
index 00000000..ae085bff
--- /dev/null
+++ b/src/tree-select/type.ts
@@ -0,0 +1,50 @@
+/* eslint-disable */
+
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TreeOptionData, TreeKeysType } from '../common';
+
+export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
+  /**
+   * 是否可搜索
+   * @default false
+   */
+  filterable?: boolean;
+  /**
+   * 高度，默认单位为 px
+   * @default 336
+   */
+  height?: string | number;
+  /**
+   * 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`
+   */
+  keys?: TreeKeysType;
+  /**
+   * 是否允许多选
+   * @default false
+   */
+  multiple?: boolean;
+  /**
+   * 选项
+   * @default []
+   */
+  options?: Array<DataOption>;
+  /**
+   * 选中值
+   */
+  value?: TreeSelectValue;
+  /**
+   * 选中值，非受控属性
+   */
+  defaultValue?: TreeSelectValue;
+  /**
+   * 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进
+   */
+  onChange?: (value: TreeSelectValue, level: TreeLevel) => void;
+}
+
+export type TreeSelectValue = string | number | Array<TreeSelectValue>;
+
+export type TreeLevel = 0 | 1 | 2;

From 4c9d3be77ea7e3198f169fbc51f1ee1f8c1097d2 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Sat, 14 Sep 2024 14:17:15 +0800
Subject: [PATCH 2/6] =?UTF-8?q?feat(tree-select):=20=E6=B7=BB=E5=8A=A0?=
 =?UTF-8?q?=E6=96=87=E6=A1=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 site/mobile/mobile.config.js         |  5 ++
 site/web/site.config.js              |  6 ++
 src/index.ts                         |  2 +-
 src/tree-select/index.ts             | 10 ++++
 src/tree-select/tree-select.en-US.md |  1 -
 src/tree-select/tree-select.md       |  1 -
 src/tree-select/tree-select.tsx      | 82 ++++++++++++++++------------
 7 files changed, 70 insertions(+), 37 deletions(-)
 create mode 100644 src/tree-select/index.ts

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index 167d0fb3..bd485409 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -262,5 +262,10 @@ export default {
       name: 'table',
       component: () => import('tdesign-mobile-react/table/_example/index.tsx'),
     },
+    {
+      title: 'TreeSelect 树形选择',
+      name: 'tree-select',
+      component: () => import('tdesign-mobile-react/tree-select/_example/index.tsx'),
+    },
   ],
 };
diff --git a/site/web/site.config.js b/site/web/site.config.js
index 6138e9cc..c422fd3c 100644
--- a/site/web/site.config.js
+++ b/site/web/site.config.js
@@ -220,6 +220,12 @@ export default {
           path: '/mobile-react/components/upload',
           component: () => import('tdesign-mobile-react/upload/upload.md'),
         },
+        {
+          title: 'TreeSelect 树形选择',
+          name: 'tree-select',
+          path: '/mobile-react/components/tree-select',
+          component: () => import('tdesign-mobile-react/tree-select/tree-select.md'),
+        },
       ],
     },
     {
diff --git a/src/index.ts b/src/index.ts
index 91b4e09e..3411eb95 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -65,7 +65,7 @@ export * from './drawer';
  * 二期组件
  */
 export * from './collapse';
-
+export * from './tree-select';
 export * from './notice-bar';
 
 /**
diff --git a/src/tree-select/index.ts b/src/tree-select/index.ts
new file mode 100644
index 00000000..b355da1c
--- /dev/null
+++ b/src/tree-select/index.ts
@@ -0,0 +1,10 @@
+import _TreeSelect from './tree-select';
+import { TdTreeSelectProps } from './type';
+
+import './style';
+
+export * from './type';
+export type TreeSelectProps = TdTreeSelectProps;
+const TreeSelect = _TreeSelect;
+// export const TreeSelect: WithInstallType<typeof _TreeSelect> = withInstall(_TreeSelect);
+export default TreeSelect;
diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md
index 07b699f8..7340ddee 100644
--- a/src/tree-select/tree-select.en-US.md
+++ b/src/tree-select/tree-select.en-US.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### TreeSelect Props
 
 name | type | default | description | required
diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md
index 7b05d151..c57b16e9 100644
--- a/src/tree-select/tree-select.md
+++ b/src/tree-select/tree-select.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### TreeSelect Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
index 8f07b1e3..ccbe74be 100644
--- a/src/tree-select/tree-select.tsx
+++ b/src/tree-select/tree-select.tsx
@@ -2,7 +2,7 @@ import React, { FC, useEffect, useState } from 'react';
 import classNames from 'classnames';
 import useDefault from '../_util/useDefault';
 import useDefaultProps from '../hooks/useDefaultProps';
-import { TdTreeSelectProps, TreeSelectValue } from './type';
+import { TdTreeSelectProps, TreeLevel, TreeSelectValue } from './type';
 import { treeSelectDefaultProps } from './defaultProps';
 import { usePrefixClass } from '../hooks/useClass';
 import { convertUnit } from '../_util/convertUnit';
@@ -17,15 +17,15 @@ export interface TreeSelectProps extends TdTreeSelectProps, NativeProps {}
 
 const TreeSelect: FC<TreeSelectProps> = (props) => {
   const treeSelectClass = usePrefixClass('tree-select');
-  const { value, onChange, height, options, keys, multiple } = useDefaultProps(props, treeSelectDefaultProps);
-  const [innerValue, setInnerValue] = useDefault<TreeSelectValue, any>(value, null, onChange);
+  const { value, onChange, height, options, keys, multiple, defaultValue } = useDefaultProps(
+    props,
+    treeSelectDefaultProps,
+  );
+  const [innerValue, setInnerValue] = useDefault(value, defaultValue, onChange);
   const [leafLevel, setLeafLevel] = useState(0);
   const [treeOptions, setTreeOptions] = useState<TreeOptionData[][]>([]);
-  // const rootStyle = useMemo(() => [`height: ${convertUnit(height)}`, style].join(';'), [height, style]);
 
   const buildTreeOptions = () => {
-    const { options, multiple, keys } = props;
-
     let level = -1;
     const tmpTreeOptions: TreeOptionData[][] = [];
     let node: TreeOptionData = { children: options };
@@ -39,7 +39,6 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
         children: item.children,
       }));
       const thisValue = innerValue?.[level];
-
       tmpTreeOptions.push([...list]);
       if (thisValue == null) {
         const [firstChild] = list;
@@ -51,7 +50,6 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     }
     setLeafLevel(Math.max(0, level));
     setTreeOptions(tmpTreeOptions);
-
     if (multiple) {
       const finalValue = innerValue;
       if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
@@ -66,23 +64,33 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     return 'left';
   };
 
-  const onRootChange = (level: number) => {
-    setInnerValue(innerValue, level);
+  const onRootChange = (level: TreeLevel, itemValue: any) => {
+    const newVal = Array.isArray(innerValue) ? [...innerValue] : innerValue;
+    newVal[level] = itemValue;
+    setInnerValue(newVal, level);
   };
 
-  const handleTreeClick = (itemValue: TreeSelectValue, level: number, isDisabled: boolean) => {
+  const handleTreeClick = (itemValue: TreeSelectValue, level: TreeLevel, isDisabled: boolean) => {
     if (isDisabled) return;
-    // innerValue.value[level] = itemValue;
-    setInnerValue(innerValue, level);
+
+    const newVal = Array.isArray(innerValue) ? [...innerValue] : innerValue;
+    newVal[level] = itemValue;
+    setInnerValue(newVal, level);
   };
 
   useEffect(() => {
     buildTreeOptions();
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [innerValue, options, keys, multiple]);
+  }, [innerValue, options, keys, multiple, value]);
 
   const renderSideBar = (treeOption: TreeOptionData[]) => (
-    <SideBar className={`${treeSelectClass}-colum`} onChange={() => onRootChange(0)}>
+    <SideBar
+      defaultValue={innerValue[0]}
+      className={`${treeSelectClass}-colum`}
+      onClick={(val) => {
+        onRootChange(0, val);
+      }}
+    >
       {treeOption.map((item, index) => (
         <SideBarItem
           key={index}
@@ -103,7 +111,7 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
           [`${treeSelectClass}__item--active`]: item.value === innerValue[level],
           [`${treeSelectClass}__item--disabled`]: item.disabled,
         })}
-        onClick={() => handleTreeClick(item.value, level, item.disabled)}
+        onClick={() => handleTreeClick(item.value, level as TreeLevel, item.disabled)}
       >
         {parseTNode(item.label)}
       </div>
@@ -113,9 +121,9 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     if (multiple) {
       return (
         <Checkbox.Group
-          v-model={innerValue[level]}
+          value={innerValue[level]}
           className={`${treeSelectClass}__checkbox`}
-          onChange={() => onRootChange(level)}
+          onChange={(val) => onRootChange(level as TreeLevel, val)}
         >
           {treeOption.map((item) => (
             <Checkbox
@@ -135,22 +143,28 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
       );
     }
     return (
-      <RadioGroup className={`${treeSelectClass}__radio`} onChange={() => onRootChange(level)}>
-        {treeOption.map((item) => (
-          <Radio
-            key={item.value}
-            className={`${treeSelectClass}__radio-item`}
-            value={item.value}
-            icon="line"
-            maxLabelRow={1}
-            borderless
-            placement="right"
-            disabled={item.disabled}
-          >
-            {item.label}
-          </Radio>
-        ))}
-      </RadioGroup>
+      <>
+        <RadioGroup
+          value={innerValue[level]}
+          className={`${treeSelectClass}__radio`}
+          onChange={(val) => onRootChange(level as TreeLevel, val)}
+        >
+          {treeOption.map((item) => (
+            <Radio
+              key={item.value}
+              className={`${treeSelectClass}__radio-item`}
+              value={item.value}
+              icon="line"
+              maxLabelRow={1}
+              borderless
+              placement="right"
+              disabled={item.disabled}
+            >
+              {item.label}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </>
     );
   };
 

From f6ac2895f8a56d4a32de1654c92706a956b7c3f1 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Sat, 14 Sep 2024 14:44:30 +0800
Subject: [PATCH 3/6] feat(tree-select): add example

feat #395
---
 src/tree-select/_example/base.tsx     |  39 +++++++
 src/tree-select/_example/index.tsx    |  24 +++++
 src/tree-select/_example/multiple.tsx |  40 ++++++++
 src/tree-select/_example/normal.tsx   | 142 ++++++++++++++++++++++++++
 src/tree-select/index.ts              |   4 +-
 src/tree-select/tree-select.tsx       |   2 +-
 6 files changed, 247 insertions(+), 4 deletions(-)
 create mode 100644 src/tree-select/_example/base.tsx
 create mode 100644 src/tree-select/_example/index.tsx
 create mode 100644 src/tree-select/_example/multiple.tsx
 create mode 100644 src/tree-select/_example/normal.tsx

diff --git a/src/tree-select/_example/base.tsx b/src/tree-select/_example/base.tsx
new file mode 100644
index 00000000..e172af3e
--- /dev/null
+++ b/src/tree-select/_example/base.tsx
@@ -0,0 +1,39 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const chineseNumber = '一二三四五六七八九十'.split('');
+
+  const generateTree = (deep = 0, count = 10, prefix = ''): TdTreeSelectProps['options'] => {
+    const ans: TdTreeSelectProps['options'] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      const value = prefix ? `${prefix}-${i}` : `${i}`;
+      const rect = {
+        label: `选项${chineseNumber[i]}`,
+        value,
+      };
+
+      if (deep > 0) {
+        // @ts-ignore
+        rect.children = generateTree(deep - 1, 10, value);
+      }
+      ans.push(rect);
+    }
+
+    return ans;
+  };
+  const options = generateTree(1);
+  const [value, setValue] = useState<TreeSelectValue>(['1', '1-0']);
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}
diff --git a/src/tree-select/_example/index.tsx b/src/tree-select/_example/index.tsx
new file mode 100644
index 00000000..9d96e8f3
--- /dev/null
+++ b/src/tree-select/_example/index.tsx
@@ -0,0 +1,24 @@
+import React from 'react';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+
+import BaseDemo from './base';
+import MultipleDemo from './multiple';
+import NormalDemo from './normal';
+
+export default function BadgeDemo() {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="TreeSelect 树形选择器" summary="用于多层级数据的逐级选择。" />
+      <TDemoBlock title="01 组件类型" summary="基础树形选择">
+        <BaseDemo />
+      </TDemoBlock>
+      <TDemoBlock summary="多选树形选择">
+        <MultipleDemo />
+      </TDemoBlock>
+      <TDemoBlock title="02 组件状态" summary="三级树形选择">
+        <NormalDemo />
+      </TDemoBlock>
+    </div>
+  );
+}
diff --git a/src/tree-select/_example/multiple.tsx b/src/tree-select/_example/multiple.tsx
new file mode 100644
index 00000000..1757e2cf
--- /dev/null
+++ b/src/tree-select/_example/multiple.tsx
@@ -0,0 +1,40 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const chineseNumber = '一二三四五六七八九十'.split('');
+
+  const generateTree = (deep = 0, count = 10, prefix = ''): TdTreeSelectProps['options'] => {
+    const ans: TdTreeSelectProps['options'] = [];
+
+    for (let i = 0; i < count; i += 1) {
+      const value = prefix ? `${prefix}-${i}` : `${i}`;
+      const rect = {
+        label: `选项${chineseNumber[i]}`,
+        value,
+      };
+
+      if (deep > 0) {
+        // @ts-ignore
+        rect.children = generateTree(deep - 1, 10, value);
+      }
+      ans.push(rect);
+    }
+
+    return ans;
+  };
+  const options = generateTree(1);
+  const [value, setValue] = useState<TreeSelectValue>(['0', ['0-0', '0-1']]);
+
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} multiple options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}
diff --git a/src/tree-select/_example/normal.tsx b/src/tree-select/_example/normal.tsx
new file mode 100644
index 00000000..7b43353e
--- /dev/null
+++ b/src/tree-select/_example/normal.tsx
@@ -0,0 +1,142 @@
+import React, { useState } from 'react';
+import { TreeSelect } from 'tdesign-mobile-react';
+import { TdTreeSelectProps, TreeSelectValue } from '../type';
+
+export default function BaseBadge() {
+  const areaList = {
+    provinces: {
+      110000: '北京市',
+      440000: '广东省',
+    },
+    cities: {
+      110100: '北京市',
+      440100: '广州市',
+      440200: '韶关市',
+      440300: '深圳市',
+      440400: '珠海市',
+      440500: '汕头市',
+      440600: '佛山市',
+    },
+    counties: {
+      110101: '东城区',
+      110102: '西城区',
+      110105: '朝阳区',
+      110106: '丰台区',
+      110107: '石景山区',
+      110108: '海淀区',
+      110109: '门头沟区',
+      110111: '房山区',
+      110112: '通州区',
+      110113: '顺义区',
+      110114: '昌平区',
+      110115: '大兴区',
+      110116: '怀柔区',
+      110117: '平谷区',
+      110118: '密云区',
+      110119: '延庆区',
+      440103: '荔湾区',
+      440104: '越秀区',
+      440105: '海珠区',
+      440106: '天河区',
+      440111: '白云区',
+      440112: '黄埔区',
+      440113: '番禺区',
+      440114: '花都区',
+      440115: '南沙区',
+      440117: '从化区',
+      440118: '增城区',
+      440203: '武江区',
+      440204: '浈江区',
+      440205: '曲江区',
+      440222: '始兴县',
+      440224: '仁化县',
+      440229: '翁源县',
+      440232: '乳源瑶族自治县',
+      440233: '新丰县',
+      440281: '乐昌市',
+      440282: '南雄市',
+      440303: '罗湖区',
+      440304: '福田区',
+      440305: '南山区',
+      440306: '宝安区',
+      440307: '龙岗区',
+      440308: '盐田区',
+      440309: '龙华区',
+      440310: '坪山区',
+      440311: '光明区',
+      440402: '香洲区',
+      440403: '斗门区',
+      440404: '金湾区',
+      440507: '龙湖区',
+      440511: '金平区',
+      440512: '濠江区',
+      440513: '潮阳区',
+      440514: '潮南区',
+      440515: '澄海区',
+      440523: '南澳县',
+      440604: '禅城区',
+      440605: '南海区',
+      440606: '顺德区',
+      440607: '三水区',
+      440608: '高明区',
+    },
+  };
+
+  const generateTree = () => {
+    const { provinces, cities, counties } = areaList;
+    const options: TdTreeSelectProps['options'] = [];
+    const eachObj = (obj: Record<string, string>, cb: (item: string) => void) => Object.keys(obj).forEach(cb);
+    // @ts-ignore
+    const match = (v1, v2, base) => parseInt(v1 / base, 10) === parseInt(v2 / base, 10);
+
+    eachObj(provinces, (prov) => {
+      const cityList: TdTreeSelectProps['options'] = [];
+
+      eachObj(cities, (city) => {
+        const countyList: TdTreeSelectProps['options'] = [];
+
+        if (match(city, prov, 10000)) {
+          eachObj(counties, (county) => {
+            if (match(county, city, 100)) {
+              countyList.push({
+                label: counties[county],
+                value: county,
+                disabled: ['110102', '440104'].includes(county),
+              });
+            }
+          });
+          cityList.push({
+            label: cities[city],
+            value: city,
+            children: countyList,
+            disabled: ['110100', '440200'].includes(city),
+          });
+        }
+      });
+
+      const item = {
+        label: provinces[prov],
+        value: prov,
+        children: cityList,
+      };
+
+      options.push(item);
+    });
+
+    return options;
+  };
+
+  const options = generateTree();
+  const [value, setValue] = useState<TreeSelectValue>(['110000', '110100', '110101']);
+
+  const onChange: TdTreeSelectProps['onChange'] = (itemValue, level) => {
+    console.log(itemValue, level);
+    setValue(itemValue);
+  };
+
+  return (
+    <>
+      <TreeSelect value={value} options={options} onChange={onChange}></TreeSelect>
+    </>
+  );
+}
diff --git a/src/tree-select/index.ts b/src/tree-select/index.ts
index b355da1c..3880645d 100644
--- a/src/tree-select/index.ts
+++ b/src/tree-select/index.ts
@@ -5,6 +5,4 @@ import './style';
 
 export * from './type';
 export type TreeSelectProps = TdTreeSelectProps;
-const TreeSelect = _TreeSelect;
-// export const TreeSelect: WithInstallType<typeof _TreeSelect> = withInstall(_TreeSelect);
-export default TreeSelect;
+export const TreeSelect = _TreeSelect;
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
index ccbe74be..76c5faa8 100644
--- a/src/tree-select/tree-select.tsx
+++ b/src/tree-select/tree-select.tsx
@@ -52,7 +52,7 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     setTreeOptions(tmpTreeOptions);
     if (multiple) {
       const finalValue = innerValue;
-      if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
+      if (finalValue[level] != null && !Array.isArray(finalValue[level])) {
         throw TypeError('应传入数组类型的 value');
       }
     }

From b77c4bd5855036472cd7a52b982c33062ee3536b Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Wed, 18 Sep 2024 17:23:17 +0800
Subject: [PATCH 4/6] docs(tree-select): update api docs

---
 src/tree-select/defaultProps.ts      | 7 +------
 src/tree-select/tree-select.en-US.md | 1 -
 src/tree-select/tree-select.md       | 1 -
 src/tree-select/tree-select.tsx      | 7 +++----
 src/tree-select/type.ts              | 5 -----
 5 files changed, 4 insertions(+), 17 deletions(-)

diff --git a/src/tree-select/defaultProps.ts b/src/tree-select/defaultProps.ts
index 7900daa0..89436caf 100644
--- a/src/tree-select/defaultProps.ts
+++ b/src/tree-select/defaultProps.ts
@@ -4,9 +4,4 @@
 
 import { TdTreeSelectProps } from './type';
 
-export const treeSelectDefaultProps: TdTreeSelectProps = {
-  filterable: false,
-  height: 336,
-  multiple: false,
-  options: [],
-};
+export const treeSelectDefaultProps: TdTreeSelectProps = { height: 336, multiple: false, options: [] };
diff --git a/src/tree-select/tree-select.en-US.md b/src/tree-select/tree-select.en-US.md
index 7340ddee..519ba710 100644
--- a/src/tree-select/tree-select.en-US.md
+++ b/src/tree-select/tree-select.en-US.md
@@ -8,7 +8,6 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 className | String | - | className of component | N
 style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-filterable | Boolean | false | \- | N
 height | String / Number | 336 | \- | N
 keys | Object | - | alias filed name in data。Typescript：`TreeKeysType`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 multiple | Boolean | false | \- | N
diff --git a/src/tree-select/tree-select.md b/src/tree-select/tree-select.md
index c57b16e9..0b7edfa2 100644
--- a/src/tree-select/tree-select.md
+++ b/src/tree-select/tree-select.md
@@ -8,7 +8,6 @@
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-filterable | Boolean | false | 是否可搜索 | N
 height | String / Number | 336 | 高度，默认单位为 px | N
 keys | Object | - | 用来定义 `value / label / disabled / children` 在 `data` 数据中对应的字段别名，示例：`{ value: 'key', label: 'name', children: 'list' }`。TS 类型：`TreeKeysType`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 multiple | Boolean | false | 是否允许多选 | N
diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
index 76c5faa8..f5da72e5 100644
--- a/src/tree-select/tree-select.tsx
+++ b/src/tree-select/tree-select.tsx
@@ -128,16 +128,15 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
           {treeOption.map((item) => (
             <Checkbox
               key={item.value}
-              class={`${treeSelectClass}__checkbox-item`}
+              className={`${treeSelectClass}__checkbox-item`}
               value={item.value}
               maxLabelRow={1}
               icon="line"
               borderless
               placement="right"
               disabled={item.disabled}
-            >
-              {item.label}
-            </Checkbox>
+              label={item.label}
+            />
           ))}
         </Checkbox.Group>
       );
diff --git a/src/tree-select/type.ts b/src/tree-select/type.ts
index ae085bff..0a556da7 100644
--- a/src/tree-select/type.ts
+++ b/src/tree-select/type.ts
@@ -7,11 +7,6 @@
 import { TreeOptionData, TreeKeysType } from '../common';
 
 export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
-  /**
-   * 是否可搜索
-   * @default false
-   */
-  filterable?: boolean;
   /**
    * 高度，默认单位为 px
    * @default 336

From 340e61651f6f5764fcb5f6bbe39960055ace1147 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Wed, 18 Sep 2024 17:27:09 +0800
Subject: [PATCH 5/6] test(tree-select): update snap

---
 test/snap/__snapshots__/csr.test.jsx.snap | 9175 +++++++++++++--------
 test/snap/__snapshots__/ssr.test.jsx.snap |   24 +-
 2 files changed, 5924 insertions(+), 3275 deletions(-)

diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index e84cba47..b1765166 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -25316,38 +25316,118 @@ exports[`csr snapshot test > csr test src/overlay/_example/index.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/popover/_example/base.tsx 1`] = `
+exports[`csr snapshot test > csr test src/popup/_example/base.tsx 1`] = `
 <div>
   <div
-    class="demo-content"
+    style="padding: 0px 16px;"
   >
-    <a
-      class="t-link t-link--medium t-link--default"
-      href="/mobile-react/overview"
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      style="margin: 16px 0px;"
+      type="button"
     >
       <span
-        class="t-link__content"
+        class="t-button__content"
       >
-        跳转链接
+         
+        顶部弹出
       </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default t-link--hover"
+    </button>
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      style="margin: 16px 0px;"
+      type="button"
     >
       <span
-        class="t-link__content"
+        class="t-button__content"
       >
-        跳转链接
+         
+        左侧弹出
       </span>
-    </a>
+    </button>
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        中间弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        底部弹出
+      </span>
+    </button>
+    <button
+      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+      style="margin: 16px 0px;"
+      type="button"
+    >
+      <span
+        class="t-button__content"
+      >
+         
+        右侧弹出
+      </span>
+    </button>
+    <div
+      class="t-popup t-popup--top"
+      style="display: none; animation-fill-mode: forwards; padding: 100px;"
+    />
   </div>
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/popover/_example/index.tsx 1`] = `
+exports[`csr snapshot test > csr test src/popup/_example/custom-close.tsx 1`] = `
 <div>
+  <button
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    type="button"
+  >
+    <span
+      class="t-button__content"
+    >
+       
+      居中弹出层-带自定义关闭按钮
+    </span>
+  </button>
   <div
-    class="tdesign-mobile-demo"
+    class="t-popup t-popup--center"
+    style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
+  >
+    <svg
+      class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
+      color="#fff"
+      fill="none"
+      height="1em"
+      style="font-size: 32px;"
+      viewBox="0 0 24 24"
+      width="1em"
+    >
+      <path
+        d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+        fill="currentColor"
+      />
+    </svg>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/popup/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-popup-demo"
   >
     <div
       class="tdesign-mobile-demo-header"
@@ -25355,12 +25435,12 @@ exports[`csr snapshot test > csr test src/popover/_example/index.tsx 1`] = `
       <h1
         class="tdesign-mobile-demo-header__title"
       >
-        Link 链接
+        Popup 弹窗层
       </h1>
       <p
         class="tdesign-mobile-demo-header__summary"
       >
-        当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。
+        由其他控件触发，屏幕滑出或弹出一块自定义内容区域
       </p>
     </div>
     <div
@@ -25377,573 +25457,521 @@ exports[`csr snapshot test > csr test src/popover/_example/index.tsx 1`] = `
         <p
           class="tdesign-mobile-demo-block__summary"
         >
-          基础文字链接
+          基础弹出层
         </p>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot"
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <div
-          class="demo-content"
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
         >
-          <a
-            class="t-link t-link--medium t-link--default"
-            href="/mobile-react/overview"
+          <span
+            class="t-button__content"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default t-link--hover"
+             
+            顶部弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--top"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
+        >
+          <span
+            class="t-button__content"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-          </a>
-        </div>
-      </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+             
+            左侧弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--left"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
         >
-          下划线文字链接
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
+          <span
+            class="t-button__content"
+          >
+             
+            中间弹出
+          </span>
+        </button>
         <div
-          class="demo-content"
+          class="t-popup t-popup--center"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
         >
-          <a
-            class="t-link t-link--medium t-link--primary t-link--underline"
+          <span
+            class="t-button__content"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
+             
+            底部弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
+        >
+          <span
+            class="t-button__content"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-          </a>
-        </div>
+             
+            右侧弹出
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--right"
+          style="display: none; animation-fill-mode: forwards; padding: 100px;"
+        />
       </div>
     </div>
     <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+      class="tdesign-mobile-demo-block"
     >
       <div
         class="tdesign-mobile-demo-block__header"
       >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件示例
+        </h2>
         <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+          class="tdesign-mobile-demo-block__summary"
         >
-          前置图标文字链接
+          应用示例
         </p>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot"
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <div
-          class="demo-content"
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
         >
-          <a
-            class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"
+          <span
+            class="t-button__content"
           >
-            <span
-              class="t-link__prefix-icon"
-            >
-              <svg
-                class="t-icon t-icon-link"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
+             
+            底部弹出层-带标题及操作
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--bottom"
+          style="display: none; animation-fill-mode: forwards; height: 258px;"
+        >
+          <div
+            class="tdesign-mobile-popup-demo__with-title header"
           >
-            <span
-              class="t-link__prefix-icon"
+            <div
+              class="btn btn--cancel"
             >
-              <svg
-                class="t-icon t-icon-link"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-            <span
-              class="t-link__content"
+              取消
+            </div>
+            <div
+              class="title"
             >
-              跳转链接
-            </span>
-          </a>
+              标题文字
+            </div>
+            <div
+              class="btn btn--confirm"
+            >
+              确定
+            </div>
+          </div>
+        </div>
+        <button
+          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+          type="button"
+        >
+          <span
+            class="t-button__content"
+          >
+             
+            居中弹出层-带自定义关闭按钮
+          </span>
+        </button>
+        <div
+          class="t-popup t-popup--center"
+          style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
+        >
+          <svg
+            class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
+            color="#fff"
+            fill="none"
+            height="1em"
+            style="font-size: 32px;"
+            viewBox="0 0 24 24"
+            width="1em"
+          >
+            <path
+              d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+              fill="currentColor"
+            />
+          </svg>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/popup/_example/with-title.tsx 1`] = `
+<div>
+  <button
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    type="button"
+  >
+    <span
+      class="t-button__content"
+    >
+       
+      底部弹出层-带标题及操作
+    </span>
+  </button>
+  <div
+    class="t-popup t-popup--bottom"
+    style="display: none; animation-fill-mode: forwards; height: 258px;"
+  >
     <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+      class="tdesign-mobile-popup-demo__with-title header"
     >
       <div
-        class="tdesign-mobile-demo-block__header"
+        class="btn btn--cancel"
       >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          后置图标文字链接
-        </p>
+        取消
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot"
+        class="title"
+      >
+        标题文字
+      </div>
+      <div
+        class="btn btn--confirm"
+      >
+        确定
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/progress/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="example-progress"
+  >
+    <div
+      class="example-progress__item"
+    >
+      <div
+        class="t-progress"
       >
         <div
-          class="demo-content"
+          class="t-progress--thin t-progress--status-default"
         >
-          <a
-            class="t-link t-link--medium t-link--primary t-link--underline"
+          <div
+            class="t-progress__bar"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
+            <div
+              class="t-progress__inner"
+              style="width: 80%;"
+            />
+          </div>
+          <div
+            class="t-progress__info"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
+            80%
+          </div>
         </div>
       </div>
     </div>
     <div
-      class="tdesign-mobile-demo-block"
+      class="example-progress__item"
     >
       <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          02 组件状态
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          不同主题
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
+        class="t-progress"
       >
         <div
-          class="demo-content"
+          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
         >
-          <a
-            class="t-link t-link--medium t-link--primary"
+          <div
+            class="t-progress__inner"
+            style="width: 80%;"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
+            <div
+              class="t-progress__info"
             >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default"
-          >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--danger"
-          >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
+              80%
+            </div>
+          </div>
         </div>
+      </div>
+    </div>
+    <div
+      class="example-progress__item"
+    >
+      <div>
         <div
-          class="demo-content"
+          class="t-progress--circle t-progress--status-default"
+          style="width: 112px; height: 112px; font-size: 17.5px;"
         >
-          <a
-            class="t-link t-link--medium t-link--success"
+          <div
+            class="t-progress__info"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--warning"
+            30%
+          </div>
+          <svg
+            height="112"
+            viewBox="0 0 118 118"
+            width="112"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
+            <circle
+              class="t-progress__circle-outer"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke="var(--td-bg-color-component)"
+              stroke-width="6"
+            />
+            <circle
+              class="t-progress__circle-inner"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke-dasharray="105.55751316061705  246.30086404143975"
+              stroke-width="6"
+              style="stroke-linecap: round;"
+              transform="matrix(0,-1,1,0,0,118)"
+            />
+          </svg>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = `
+<div>
+  <div
+    class="example-progress"
+  >
     <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+      class="example-progress__item"
     >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      <div>
+        <div
+          class="t-progress--circle t-progress--status-default"
+          style="width: 112px; height: 112px; font-size: 17.5px;"
         >
-          禁用状态
-        </p>
+          <div
+            class="t-progress__info"
+          >
+            80%
+          </div>
+          <svg
+            height="112"
+            viewBox="0 0 118 118"
+            width="112"
+          >
+            <circle
+              class="t-progress__circle-outer"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke="var(--td-bg-color-component)"
+              stroke-width="6"
+            />
+            <circle
+              class="t-progress__circle-inner"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke-dasharray="281.48670176164546  70.37167544041135"
+              stroke-width="6"
+              style="stroke-linecap: round;"
+              transform="matrix(0,-1,1,0,0,118)"
+            />
+          </svg>
+        </div>
       </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
+    </div>
+    <div
+      class="example-progress__item"
+    >
+      <div>
         <div
-          class="demo-content"
+          class="t-progress--circle t-progress--status-warning"
+          style="width: 112px; height: 112px; font-size: 17.5px;"
         >
-          <a
-            class="t-link t-link--medium t-link--primary t-link--disabled"
-          >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--default t-link--disabled"
+          <div
+            class="t-progress__info"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
+            <svg
+              class="t-icon t-icon-error t-progress__icon"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
             >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--danger t-link--disabled"
+              <path
+                d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <svg
+            height="112"
+            viewBox="0 0 118 118"
+            width="112"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
+            <circle
+              class="t-progress__circle-outer"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke="var(--td-bg-color-component)"
+              stroke-width="6"
+            />
+            <circle
+              class="t-progress__circle-inner"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke-dasharray="281.48670176164546  70.37167544041135"
+              stroke-width="6"
+              style="stroke-linecap: round;"
+              transform="matrix(0,-1,1,0,0,118)"
+            />
+          </svg>
         </div>
+      </div>
+    </div>
+    <div
+      class="example-progress__item"
+    >
+      <div>
         <div
-          class="demo-content"
+          class="t-progress--circle t-progress--status-error"
+          style="width: 112px; height: 112px; font-size: 17.5px;"
         >
-          <a
-            class="t-link t-link--medium t-link--success t-link--disabled"
+          <div
+            class="t-progress__info"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
+            <svg
+              class="t-icon t-icon-close t-progress__icon"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
             >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--warning t-link--disabled"
+              <path
+                d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <svg
+            height="112"
+            viewBox="0 0 118 118"
+            width="112"
           >
-            <span
-              class="t-link__content"
-            >
-              跳转链接
-            </span>
-            <span
-              class="t-link__suffix-icon"
-            >
-              <svg
-                class="t-icon t-icon-jump"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-                  fill="currentColor"
-                />
-              </svg>
-            </span>
-          </a>
+            <circle
+              class="t-progress__circle-outer"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke="var(--td-bg-color-component)"
+              stroke-width="6"
+            />
+            <circle
+              class="t-progress__circle-inner"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke-dasharray="281.48670176164546  70.37167544041135"
+              stroke-width="6"
+              style="stroke-linecap: round;"
+              transform="matrix(0,-1,1,0,0,118)"
+            />
+          </svg>
         </div>
       </div>
     </div>
     <div
-      class="tdesign-mobile-demo-block"
+      class="example-progress__item"
     >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          03 组件样式
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          链接尺寸
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
+      <div>
         <div
-          class="demo-content"
+          class="t-progress--circle t-progress--status-success"
+          style="width: 112px; height: 112px; font-size: 17.5px;"
         >
-          <a
-            class="t-link t-link--small t-link--primary"
-          >
-            <span
-              class="t-link__content"
-            >
-              S跳转链接
-            </span>
-          </a>
-          <a
-            class="t-link t-link--medium t-link--primary"
+          <div
+            class="t-progress__info"
           >
-            <span
-              class="t-link__content"
+            <svg
+              class="t-icon t-icon-check t-progress__icon"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
             >
-              M跳转链接
-            </span>
-          </a>
-          <a
-            class="t-link t-link--large t-link--primary"
+              <path
+                d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <svg
+            height="112"
+            viewBox="0 0 118 118"
+            width="112"
           >
-            <span
-              class="t-link__content"
-            >
-              L跳转链接
-            </span>
-          </a>
+            <circle
+              class="t-progress__circle-outer"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke="var(--td-bg-color-component)"
+              stroke-width="6"
+            />
+            <circle
+              class="t-progress__circle-inner"
+              cx="59"
+              cy="59"
+              fill="none"
+              r="56"
+              stroke-dasharray="281.48670176164546  70.37167544041135"
+              stroke-width="6"
+              style="stroke-linecap: round;"
+              transform="matrix(0,-1,1,0,0,118)"
+            />
+          </svg>
         </div>
       </div>
     </div>
@@ -25951,848 +25979,842 @@ exports[`csr snapshot test > csr test src/popover/_example/index.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/popover/_example/linkSize.tsx 1`] = `
+exports[`csr snapshot test > csr test src/progress/_example/custom.tsx 1`] = `
 <div>
   <div
-    class="demo-content"
+    class="example-progress"
   >
-    <a
-      class="t-link t-link--small t-link--primary"
-    >
-      <span
-        class="t-link__content"
-      >
-        S跳转链接
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--primary"
-    >
-      <span
-        class="t-link__content"
-      >
-        M跳转链接
-      </span>
-    </a>
-    <a
-      class="t-link t-link--large t-link--primary"
-    >
-      <span
-        class="t-link__content"
-      >
-        L跳转链接
-      </span>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popover/_example/prefix.tsx 1`] = `
-<div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"
+    <div
+      class="example-progress__item"
     >
-      <span
-        class="t-link__prefix-icon"
+      <div
+        class="t-progress"
       >
-        <svg
-          class="t-icon t-icon-link"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-progress--thin t-progress--status-default"
         >
-          <path
-            d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
+          <div
+            class="t-progress__bar"
+            style="background-color: rgb(234, 201, 255);"
+          >
+            <div
+              class="t-progress__inner"
+              style="width: 88%; background: rgb(205, 4, 255);"
+            />
+          </div>
+          <div
+            class="t-progress__info"
+          >
+            88%
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="example-progress__item"
     >
-      <span
-        class="t-link__prefix-icon"
+      <div
+        class="t-progress radius--round"
       >
-        <svg
-          class="t-icon t-icon-link"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="t-progress--thin t-progress--status-default"
         >
-          <path
-            d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-    </a>
+          <div
+            class="t-progress__bar"
+          >
+            <div
+              class="t-progress__inner"
+              style="width: 88%;"
+            />
+          </div>
+          <div
+            class="t-progress__info"
+          >
+            88%
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/popover/_example/status.tsx 1`] = `
+exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
 <div>
   <div
-    class="demo-content"
+    class="tdesign-mobile-demo"
   >
-    <a
-      class="t-link t-link--medium t-link--primary t-link--disabled"
+    <div
+      class="tdesign-mobile-demo-header"
     >
-      <span
-        class="t-link__content"
+      <h1
+        class="tdesign-mobile-demo-header__title"
       >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+        Progress 进度条
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default t-link--disabled"
+        展示操作的当前进度
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
     >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+      <div
+        class="tdesign-mobile-demo-block__header"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <h2
+          class="tdesign-mobile-demo-block__title"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--danger t-link--disabled"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
-      >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+          01 类型
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--success t-link--disabled"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+          基础进度条
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="example-progress"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--warning t-link--disabled"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
-      >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popover/_example/suffix.tsx 1`] = `
-<div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--primary t-link--underline"
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-default"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 80%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  80%
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 80%;"
+                >
+                  <div
+                    class="t-progress__info"
+                  >
+                    80%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div>
+              <div
+                class="t-progress--circle t-progress--status-default"
+                style="width: 112px; height: 112px; font-size: 17.5px;"
+              >
+                <div
+                  class="t-progress__info"
+                >
+                  30%
+                </div>
+                <svg
+                  height="112"
+                  viewBox="0 0 118 118"
+                  width="112"
+                >
+                  <circle
+                    class="t-progress__circle-outer"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke="var(--td-bg-color-component)"
+                    stroke-width="6"
+                  />
+                  <circle
+                    class="t-progress__circle-inner"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke-dasharray="105.55751316061705  246.30086404143975"
+                    stroke-width="6"
+                    style="stroke-linecap: round;"
+                    transform="matrix(0,-1,1,0,0,118)"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
     >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+      <div
+        class="tdesign-mobile-demo-block__header"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+          过渡样式
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="example-progress"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popover/_example/theme.tsx 1`] = `
-<div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--primary"
+          <div
+            class="t-progress"
+          >
+            <div
+              class="t-progress--thin t-progress--status-default"
+            >
+              <div
+                class="t-progress__bar"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 88%;"
+                />
+              </div>
+              <div
+                class="t-progress__info"
+              >
+                88%
+              </div>
+            </div>
+          </div>
+          <div
+            class="button-group"
+          >
+            <button
+              class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
+              type="button"
+            >
+              <span
+                class="t-button__content"
+              >
+                 
+                减少
+              </span>
+            </button>
+            <div
+              class="space"
+            />
+            <button
+              class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
+              type="button"
+            >
+              <span
+                class="t-button__content"
+              >
+                 
+                增加
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
     >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+      <div
+        class="tdesign-mobile-demo-block__header"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+          自定义颜色/圆角
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="example-progress"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--danger"
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-default"
+              >
+                <div
+                  class="t-progress__bar"
+                  style="background-color: rgb(234, 201, 255);"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 88%; background: rgb(205, 4, 255);"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  88%
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress radius--round"
+            >
+              <div
+                class="t-progress--thin t-progress--status-default"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 88%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  88%
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
     >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+      <div
+        class="tdesign-mobile-demo-block__header"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <h2
+          class="tdesign-mobile-demo-block__title"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--success"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
-      >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+          02 组件状态
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--warning"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-      <span
-        class="t-link__suffix-icon"
+          线性进度条
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <svg
-          class="t-icon t-icon-jump"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
+        <div
+          class="example-progress"
         >
-          <path
-            d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"
-            fill="currentColor"
-          />
-        </svg>
-      </span>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popover/_example/underline.tsx 1`] = `
-<div>
-  <div
-    class="demo-content"
-  >
-    <a
-      class="t-link t-link--medium t-link--primary t-link--underline"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-    </a>
-    <a
-      class="t-link t-link--medium t-link--default t-link--underline t-link--hover"
-    >
-      <span
-        class="t-link__content"
-      >
-        跳转链接
-      </span>
-    </a>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popup/_example/base.tsx 1`] = `
-<div>
-  <div
-    style="padding: 0px 16px;"
-  >
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      style="margin: 16px 0px;"
-      type="button"
-    >
-      <span
-        class="t-button__content"
-      >
-         
-        顶部弹出
-      </span>
-    </button>
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      style="margin: 16px 0px;"
-      type="button"
-    >
-      <span
-        class="t-button__content"
-      >
-         
-        左侧弹出
-      </span>
-    </button>
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      style="margin: 16px 0px;"
-      type="button"
-    >
-      <span
-        class="t-button__content"
-      >
-         
-        中间弹出
-      </span>
-    </button>
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      style="margin: 16px 0px;"
-      type="button"
-    >
-      <span
-        class="t-button__content"
-      >
-         
-        底部弹出
-      </span>
-    </button>
-    <button
-      class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-      style="margin: 16px 0px;"
-      type="button"
-    >
-      <span
-        class="t-button__content"
-      >
-         
-        右侧弹出
-      </span>
-    </button>
-    <div
-      class="t-popup t-popup--top"
-      style="display: none; animation-fill-mode: forwards; padding: 100px;"
-    />
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popup/_example/custom-close.tsx 1`] = `
-<div>
-  <button
-    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    type="button"
-  >
-    <span
-      class="t-button__content"
-    >
-       
-      居中弹出层-带自定义关闭按钮
-    </span>
-  </button>
-  <div
-    class="t-popup t-popup--center"
-    style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
-  >
-    <svg
-      class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
-      color="#fff"
-      fill="none"
-      height="1em"
-      style="font-size: 32px;"
-      viewBox="0 0 24 24"
-      width="1em"
-    >
-      <path
-        d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
-        fill="currentColor"
-      />
-    </svg>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popup/_example/index.tsx 1`] = `
-<div>
-  <div
-    class="tdesign-mobile-popup-demo"
-  >
-    <div
-      class="tdesign-mobile-demo-header"
-    >
-      <h1
-        class="tdesign-mobile-demo-header__title"
-      >
-        Popup 弹窗层
-      </h1>
-      <p
-        class="tdesign-mobile-demo-header__summary"
-      >
-        由其他控件触发，屏幕滑出或弹出一块自定义内容区域
-      </p>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-default"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 80%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  80%
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-warning"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 88%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-error-circle-filled t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-error"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 88%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-close-circle-filled t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress--thin t-progress--status-success"
+              >
+                <div
+                  class="t-progress__bar"
+                >
+                  <div
+                    class="t-progress__inner"
+                    style="width: 88%;"
+                  />
+                </div>
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-check-circle-filled t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
     <div
-      class="tdesign-mobile-demo-block"
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
     >
       <div
         class="tdesign-mobile-demo-block__header"
       >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          01 组件类型
-        </h2>
         <p
-          class="tdesign-mobile-demo-block__summary"
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
         >
-          基础弹出层
+          百分比内显进度条
         </p>
       </div>
       <div
         class="tdesign-mobile-demo-block__slot with-padding"
       >
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            顶部弹出
-          </span>
-        </button>
         <div
-          class="t-popup t-popup--top"
-          style="display: none; animation-fill-mode: forwards; padding: 100px;"
-        />
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
+          class="example-progress"
         >
-          <span
-            class="t-button__content"
+          <div
+            class="example-progress__item"
           >
-             
-            左侧弹出
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--left"
-          style="display: none; animation-fill-mode: forwards; padding: 100px;"
-        />
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            中间弹出
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--center"
-          style="display: none; animation-fill-mode: forwards; padding: 100px;"
-        />
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            底部弹出
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--bottom"
-          style="display: none; animation-fill-mode: forwards; padding: 100px;"
-        />
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            右侧弹出
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--right"
-          style="display: none; animation-fill-mode: forwards; padding: 100px;"
-        />
-      </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          01 组件示例
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          应用示例
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot with-padding"
-      >
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            底部弹出层-带标题及操作
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--bottom"
-          style="display: none; animation-fill-mode: forwards; height: 258px;"
-        >
+            <div
+              class="t-progress"
+            >
+              <div
+                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 80%;"
+                >
+                  <div
+                    class="t-progress__info"
+                  >
+                    80%
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
           <div
-            class="tdesign-mobile-popup-demo__with-title header"
+            class="example-progress__item"
           >
             <div
-              class="btn btn--cancel"
+              class="t-progress"
             >
-              取消
+              <div
+                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 88%;"
+                >
+                  <div
+                    class="t-progress__info"
+                  >
+                    88%
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
             <div
-              class="title"
+              class="t-progress"
             >
-              标题文字
+              <div
+                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 88%;"
+                >
+                  <div
+                    class="t-progress__info"
+                  >
+                    88%
+                  </div>
+                </div>
+              </div>
             </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
             <div
-              class="btn btn--confirm"
+              class="t-progress"
             >
-              确定
+              <div
+                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
+              >
+                <div
+                  class="t-progress__inner"
+                  style="width: 88%;"
+                >
+                  <div
+                    class="t-progress__info"
+                  >
+                    88%
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>
-        <button
-          class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-          type="button"
-        >
-          <span
-            class="t-button__content"
-          >
-             
-            居中弹出层-带自定义关闭按钮
-          </span>
-        </button>
-        <div
-          class="t-popup t-popup--center"
-          style="display: none; animation-fill-mode: forwards; width: 240px; height: 240px;"
-        >
-          <svg
-            class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn"
-            color="#fff"
-            fill="none"
-            height="1em"
-            style="font-size: 32px;"
-            viewBox="0 0 24 24"
-            width="1em"
-          >
-            <path
-              d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/popup/_example/with-title.tsx 1`] = `
-<div>
-  <button
-    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    type="button"
-  >
-    <span
-      class="t-button__content"
-    >
-       
-      底部弹出层-带标题及操作
-    </span>
-  </button>
-  <div
-    class="t-popup t-popup--bottom"
-    style="display: none; animation-fill-mode: forwards; height: 258px;"
-  >
     <div
-      class="tdesign-mobile-popup-demo__with-title header"
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
     >
       <div
-        class="btn btn--cancel"
-      >
-        取消
-      </div>
-      <div
-        class="title"
-      >
-        标题文字
-      </div>
-      <div
-        class="btn btn--confirm"
+        class="tdesign-mobile-demo-block__header"
       >
-        确定
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          环形进度条
+        </p>
       </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/progress/_example/base.tsx 1`] = `
-<div>
-  <div
-    class="example-progress"
-  >
-    <div
-      class="example-progress__item"
-    >
       <div
-        class="t-progress"
+        class="tdesign-mobile-demo-block__slot with-padding"
       >
         <div
-          class="t-progress--thin t-progress--status-default"
+          class="example-progress"
         >
           <div
-            class="t-progress__bar"
+            class="example-progress__item"
           >
-            <div
-              class="t-progress__inner"
-              style="width: 80%;"
-            />
+            <div>
+              <div
+                class="t-progress--circle t-progress--status-default"
+                style="width: 112px; height: 112px; font-size: 17.5px;"
+              >
+                <div
+                  class="t-progress__info"
+                >
+                  80%
+                </div>
+                <svg
+                  height="112"
+                  viewBox="0 0 118 118"
+                  width="112"
+                >
+                  <circle
+                    class="t-progress__circle-outer"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke="var(--td-bg-color-component)"
+                    stroke-width="6"
+                  />
+                  <circle
+                    class="t-progress__circle-inner"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke-dasharray="281.48670176164546  70.37167544041135"
+                    stroke-width="6"
+                    style="stroke-linecap: round;"
+                    transform="matrix(0,-1,1,0,0,118)"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
           <div
-            class="t-progress__info"
+            class="example-progress__item"
           >
-            80%
+            <div>
+              <div
+                class="t-progress--circle t-progress--status-warning"
+                style="width: 112px; height: 112px; font-size: 17.5px;"
+              >
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-error t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <svg
+                  height="112"
+                  viewBox="0 0 118 118"
+                  width="112"
+                >
+                  <circle
+                    class="t-progress__circle-outer"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke="var(--td-bg-color-component)"
+                    stroke-width="6"
+                  />
+                  <circle
+                    class="t-progress__circle-inner"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke-dasharray="281.48670176164546  70.37167544041135"
+                    stroke-width="6"
+                    style="stroke-linecap: round;"
+                    transform="matrix(0,-1,1,0,0,118)"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div>
+              <div
+                class="t-progress--circle t-progress--status-error"
+                style="width: 112px; height: 112px; font-size: 17.5px;"
+              >
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-close t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <svg
+                  height="112"
+                  viewBox="0 0 118 118"
+                  width="112"
+                >
+                  <circle
+                    class="t-progress__circle-outer"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke="var(--td-bg-color-component)"
+                    stroke-width="6"
+                  />
+                  <circle
+                    class="t-progress__circle-inner"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke-dasharray="281.48670176164546  70.37167544041135"
+                    stroke-width="6"
+                    style="stroke-linecap: round;"
+                    transform="matrix(0,-1,1,0,0,118)"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="example-progress__item"
+          >
+            <div>
+              <div
+                class="t-progress--circle t-progress--status-success"
+                style="width: 112px; height: 112px; font-size: 17.5px;"
+              >
+                <div
+                  class="t-progress__info"
+                >
+                  <svg
+                    class="t-icon t-icon-check t-progress__icon"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <svg
+                  height="112"
+                  viewBox="0 0 118 118"
+                  width="112"
+                >
+                  <circle
+                    class="t-progress__circle-outer"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke="var(--td-bg-color-component)"
+                    stroke-width="6"
+                  />
+                  <circle
+                    class="t-progress__circle-inner"
+                    cx="59"
+                    cy="59"
+                    fill="none"
+                    r="56"
+                    stroke-dasharray="281.48670176164546  70.37167544041135"
+                    stroke-width="6"
+                    style="stroke-linecap: round;"
+                    transform="matrix(0,-1,1,0,0,118)"
+                  />
+                </svg>
+              </div>
+            </div>
           </div>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/progress/_example/line.tsx 1`] = `
+<div>
+  <div
+    class="example-progress"
+  >
     <div
       class="example-progress__item"
     >
@@ -26800,17 +26822,20 @@ exports[`csr snapshot test > csr test src/progress/_example/base.tsx 1`] = `
         class="t-progress"
       >
         <div
-          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
+          class="t-progress--thin t-progress--status-default"
         >
           <div
-            class="t-progress__inner"
-            style="width: 80%;"
+            class="t-progress__bar"
           >
             <div
-              class="t-progress__info"
-            >
-              80%
-            </div>
+              class="t-progress__inner"
+              style="width: 80%;"
+            />
+          </div>
+          <div
+            class="t-progress__info"
+          >
+            80%
           </div>
         </div>
       </div>
@@ -26818,252 +26843,108 @@ exports[`csr snapshot test > csr test src/progress/_example/base.tsx 1`] = `
     <div
       class="example-progress__item"
     >
-      <div>
+      <div
+        class="t-progress"
+      >
         <div
-          class="t-progress--circle t-progress--status-default"
-          style="width: 112px; height: 112px; font-size: 17.5px;"
+          class="t-progress--thin t-progress--status-warning"
         >
           <div
-            class="t-progress__info"
+            class="t-progress__bar"
           >
-            30%
+            <div
+              class="t-progress__inner"
+              style="width: 88%;"
+            />
           </div>
-          <svg
-            height="112"
-            viewBox="0 0 118 118"
-            width="112"
+          <div
+            class="t-progress__info"
           >
-            <circle
-              class="t-progress__circle-outer"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke="var(--td-bg-color-component)"
-              stroke-width="6"
-            />
-            <circle
-              class="t-progress__circle-inner"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke-dasharray="105.55751316061705  246.30086404143975"
-              stroke-width="6"
-              style="stroke-linecap: round;"
-              transform="matrix(0,-1,1,0,0,118)"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = `
-<div>
-  <div
-    class="example-progress"
-  >
-    <div
-      class="example-progress__item"
-    >
-      <div>
-        <div
-          class="t-progress--circle t-progress--status-default"
-          style="width: 112px; height: 112px; font-size: 17.5px;"
-        >
-          <div
-            class="t-progress__info"
-          >
-            80%
-          </div>
-          <svg
-            height="112"
-            viewBox="0 0 118 118"
-            width="112"
-          >
-            <circle
-              class="t-progress__circle-outer"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke="var(--td-bg-color-component)"
-              stroke-width="6"
-            />
-            <circle
-              class="t-progress__circle-inner"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke-dasharray="281.48670176164546  70.37167544041135"
-              stroke-width="6"
-              style="stroke-linecap: round;"
-              transform="matrix(0,-1,1,0,0,118)"
-            />
-          </svg>
-        </div>
-      </div>
-    </div>
-    <div
-      class="example-progress__item"
-    >
-      <div>
-        <div
-          class="t-progress--circle t-progress--status-warning"
-          style="width: 112px; height: 112px; font-size: 17.5px;"
-        >
-          <div
-            class="t-progress__info"
-          >
-            <svg
-              class="t-icon t-icon-error t-progress__icon"
+            <svg
+              class="t-icon t-icon-error-circle-filled t-progress__icon"
               fill="none"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
             >
               <path
-                d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"
+                d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"
                 fill="currentColor"
               />
             </svg>
           </div>
-          <svg
-            height="112"
-            viewBox="0 0 118 118"
-            width="112"
-          >
-            <circle
-              class="t-progress__circle-outer"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke="var(--td-bg-color-component)"
-              stroke-width="6"
-            />
-            <circle
-              class="t-progress__circle-inner"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke-dasharray="281.48670176164546  70.37167544041135"
-              stroke-width="6"
-              style="stroke-linecap: round;"
-              transform="matrix(0,-1,1,0,0,118)"
-            />
-          </svg>
         </div>
       </div>
     </div>
     <div
       class="example-progress__item"
     >
-      <div>
+      <div
+        class="t-progress"
+      >
         <div
-          class="t-progress--circle t-progress--status-error"
-          style="width: 112px; height: 112px; font-size: 17.5px;"
+          class="t-progress--thin t-progress--status-error"
         >
+          <div
+            class="t-progress__bar"
+          >
+            <div
+              class="t-progress__inner"
+              style="width: 88%;"
+            />
+          </div>
           <div
             class="t-progress__info"
           >
             <svg
-              class="t-icon t-icon-close t-progress__icon"
+              class="t-icon t-icon-close-circle-filled t-progress__icon"
               fill="none"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
             >
               <path
-                d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z"
                 fill="currentColor"
               />
             </svg>
           </div>
-          <svg
-            height="112"
-            viewBox="0 0 118 118"
-            width="112"
-          >
-            <circle
-              class="t-progress__circle-outer"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke="var(--td-bg-color-component)"
-              stroke-width="6"
-            />
-            <circle
-              class="t-progress__circle-inner"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke-dasharray="281.48670176164546  70.37167544041135"
-              stroke-width="6"
-              style="stroke-linecap: round;"
-              transform="matrix(0,-1,1,0,0,118)"
-            />
-          </svg>
         </div>
       </div>
     </div>
     <div
       class="example-progress__item"
     >
-      <div>
+      <div
+        class="t-progress"
+      >
         <div
-          class="t-progress--circle t-progress--status-success"
-          style="width: 112px; height: 112px; font-size: 17.5px;"
+          class="t-progress--thin t-progress--status-success"
         >
+          <div
+            class="t-progress__bar"
+          >
+            <div
+              class="t-progress__inner"
+              style="width: 88%;"
+            />
+          </div>
           <div
             class="t-progress__info"
           >
             <svg
-              class="t-icon t-icon-check t-progress__icon"
+              class="t-icon t-icon-check-circle-filled t-progress__icon"
               fill="none"
               height="1em"
               viewBox="0 0 24 24"
               width="1em"
             >
               <path
-                d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
                 fill="currentColor"
               />
             </svg>
           </div>
-          <svg
-            height="112"
-            viewBox="0 0 118 118"
-            width="112"
-          >
-            <circle
-              class="t-progress__circle-outer"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke="var(--td-bg-color-component)"
-              stroke-width="6"
-            />
-            <circle
-              class="t-progress__circle-inner"
-              cx="59"
-              cy="59"
-              fill="none"
-              r="56"
-              stroke-dasharray="281.48670176164546  70.37167544041135"
-              stroke-width="6"
-              style="stroke-linecap: round;"
-              transform="matrix(0,-1,1,0,0,118)"
-            />
-          </svg>
         </div>
       </div>
     </div>
@@ -27071,7 +26952,7 @@ exports[`csr snapshot test > csr test src/progress/_example/circle.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/progress/_example/custom.tsx 1`] = `
+exports[`csr snapshot test > csr test src/progress/_example/plump.tsx 1`] = `
 <div>
   <div
     class="example-progress"
@@ -27083,21 +26964,17 @@ exports[`csr snapshot test > csr test src/progress/_example/custom.tsx 1`] = `
         class="t-progress"
       >
         <div
-          class="t-progress--thin t-progress--status-default"
+          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
         >
           <div
-            class="t-progress__bar"
-            style="background-color: rgb(234, 201, 255);"
+            class="t-progress__inner"
+            style="width: 80%;"
           >
             <div
-              class="t-progress__inner"
-              style="width: 88%; background: rgb(205, 4, 255);"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            88%
+              class="t-progress__info"
+            >
+              80%
+            </div>
           </div>
         </div>
       </div>
@@ -27106,308 +26983,207 @@ exports[`csr snapshot test > csr test src/progress/_example/custom.tsx 1`] = `
       class="example-progress__item"
     >
       <div
-        class="t-progress radius--round"
+        class="t-progress"
       >
         <div
-          class="t-progress--thin t-progress--status-default"
+          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
         >
           <div
-            class="t-progress__bar"
+            class="t-progress__inner"
+            style="width: 88%;"
           >
             <div
-              class="t-progress__inner"
-              style="width: 88%;"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            88%
+              class="t-progress__info"
+            >
+              88%
+            </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
-<div>
-  <div
-    class="tdesign-mobile-demo"
-  >
     <div
-      class="tdesign-mobile-demo-header"
+      class="example-progress__item"
     >
-      <h1
-        class="tdesign-mobile-demo-header__title"
-      >
-        Progress 进度条
-      </h1>
-      <p
-        class="tdesign-mobile-demo-header__summary"
-      >
-        展示操作的当前进度
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          01 类型
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          基础进度条
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+      <div
+        class="t-progress"
       >
         <div
-          class="example-progress"
+          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
         >
           <div
-            class="example-progress__item"
-          >
-            <div
-              class="t-progress"
-            >
-              <div
-                class="t-progress--thin t-progress--status-default"
-              >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 80%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  80%
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
+            class="t-progress__inner"
+            style="width: 88%;"
           >
             <div
-              class="t-progress"
+              class="t-progress__info"
             >
-              <div
-                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
-              >
-                <div
-                  class="t-progress__inner"
-                  style="width: 80%;"
-                >
-                  <div
-                    class="t-progress__info"
-                  >
-                    80%
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
-          >
-            <div>
-              <div
-                class="t-progress--circle t-progress--status-default"
-                style="width: 112px; height: 112px; font-size: 17.5px;"
-              >
-                <div
-                  class="t-progress__info"
-                >
-                  30%
-                </div>
-                <svg
-                  height="112"
-                  viewBox="0 0 118 118"
-                  width="112"
-                >
-                  <circle
-                    class="t-progress__circle-outer"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke="var(--td-bg-color-component)"
-                    stroke-width="6"
-                  />
-                  <circle
-                    class="t-progress__circle-inner"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke-dasharray="105.55751316061705  246.30086404143975"
-                    stroke-width="6"
-                    style="stroke-linecap: round;"
-                    transform="matrix(0,-1,1,0,0,118)"
-                  />
-                </svg>
-              </div>
+              88%
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+      class="example-progress__item"
     >
       <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          过渡样式
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+        class="t-progress"
       >
         <div
-          class="example-progress"
+          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
         >
           <div
-            class="t-progress"
+            class="t-progress__inner"
+            style="width: 88%;"
           >
             <div
-              class="t-progress--thin t-progress--status-default"
+              class="t-progress__info"
             >
-              <div
-                class="t-progress__bar"
-              >
-                <div
-                  class="t-progress__inner"
-                  style="width: 88%;"
-                />
-              </div>
-              <div
-                class="t-progress__info"
-              >
-                88%
-              </div>
+              88%
             </div>
           </div>
-          <div
-            class="button-group"
-          >
-            <button
-              class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
-              type="button"
-            >
-              <span
-                class="t-button__content"
-              >
-                 
-                减少
-              </span>
-            </button>
-            <div
-              class="space"
-            />
-            <button
-              class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
-              type="button"
-            >
-              <span
-                class="t-button__content"
-              >
-                 
-                增加
-              </span>
-            </button>
-          </div>
         </div>
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/progress/_example/transition.tsx 1`] = `
+<div>
+  <div
+    class="example-progress"
+  >
     <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+      class="t-progress"
     >
       <div
-        class="tdesign-mobile-demo-block__header"
+        class="t-progress--thin t-progress--status-default"
       >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        <div
+          class="t-progress__bar"
         >
-          自定义颜色/圆角
-        </p>
+          <div
+            class="t-progress__inner"
+            style="width: 88%;"
+          />
+        </div>
+        <div
+          class="t-progress__info"
+        >
+          88%
+        </div>
       </div>
+    </div>
+    <div
+      class="button-group"
+    >
+      <button
+        class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
+        type="button"
+      >
+        <span
+          class="t-button__content"
+        >
+           
+          减少
+        </span>
+      </button>
       <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+        class="space"
+      />
+      <button
+        class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
+        type="button"
+      >
+        <span
+          class="t-button__content"
+        >
+           
+          增加
+        </span>
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/result/_example/custom.tsx 1`] = `
+<div>
+  <div
+    class="t-result t-result--theme-default"
+  >
+    <div
+      class="t-result__thumb"
+    >
+      <div
+        class="t-image t-image--square extra-class-image"
       >
         <div
-          class="example-progress"
+          class="t-image__mask"
         >
           <div
-            class="example-progress__item"
+            class="t-loading t-loading--center"
+            style="font-size: 20px;"
           >
             <div
-              class="t-progress"
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
             >
               <div
-                class="t-progress--thin t-progress--status-default"
-              >
-                <div
-                  class="t-progress__bar"
-                  style="background-color: rgb(234, 201, 255);"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 88%; background: rgb(205, 4, 255);"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  88%
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
-          >
-            <div
-              class="t-progress radius--round"
-            >
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
               <div
-                class="t-progress--thin t-progress--status-default"
-              >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 88%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  88%
-                </div>
-              </div>
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
             </div>
           </div>
         </div>
+        <img
+          class="t-image__img t-image--fit-fill t-image--position-center"
+          src="https://tdesign.gtimg.com/mobile/demos/result1.png"
+        />
       </div>
     </div>
+    <div
+      class="t-result__title"
+    >
+      自定义结果
+    </div>
+    <div
+      class="t-result__description"
+    >
+      描述文字
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Result 结果
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        结果反馈
+      </p>
+    </div>
     <div
       class="tdesign-mobile-demo-block"
     >
@@ -27417,151 +27193,136 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
         <h2
           class="tdesign-mobile-demo-block__title"
         >
-          02 组件状态
+          01类型
         </h2>
         <p
           class="tdesign-mobile-demo-block__summary"
         >
-          线性进度条
+          不同结果反馈
         </p>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+        class="tdesign-mobile-demo-block__slot"
       >
-        <div
-          class="example-progress"
-        >
+        <div>
           <div
-            class="example-progress__item"
+            class="t-result t-result--theme-success space"
           >
             <div
-              class="t-progress"
+              class="t-result__thumb"
             >
-              <div
-                class="t-progress--thin t-progress--status-default"
+              <svg
+                class="t-icon t-icon-check-circle t-result__icon"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
               >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 80%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  80%
-                </div>
-              </div>
+                <path
+                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-result__title"
+            >
+              成功状态
+            </div>
+            <div
+              class="t-result__description"
+            >
+              描述文字
             </div>
           </div>
           <div
-            class="example-progress__item"
+            class="t-result t-result--theme-error space"
           >
             <div
-              class="t-progress"
+              class="t-result__thumb"
             >
-              <div
-                class="t-progress--thin t-progress--status-warning"
+              <svg
+                class="t-icon t-icon-close-circle t-result__icon"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
               >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 88%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-error-circle-filled t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-              </div>
+                <path
+                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-result__title"
+            >
+              失败状态
+            </div>
+            <div
+              class="t-result__description"
+            >
+              描述文字
             </div>
           </div>
           <div
-            class="example-progress__item"
+            class="t-result t-result--theme-warning space"
           >
             <div
-              class="t-progress"
+              class="t-result__thumb"
             >
-              <div
-                class="t-progress--thin t-progress--status-error"
+              <svg
+                class="t-icon t-icon-info-circle t-result__icon"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
               >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 88%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-close-circle-filled t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-              </div>
+                <path
+                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-result__title"
+            >
+              警示状态
+            </div>
+            <div
+              class="t-result__description"
+            >
+              描述文字
             </div>
           </div>
           <div
-            class="example-progress__item"
+            class="t-result t-result--theme-default space"
           >
             <div
-              class="t-progress"
+              class="t-result__thumb"
             >
-              <div
-                class="t-progress--thin t-progress--status-success"
+              <svg
+                class="t-icon t-icon-info-circle t-result__icon"
+                fill="none"
+                height="1em"
+                viewBox="0 0 24 24"
+                width="1em"
               >
-                <div
-                  class="t-progress__bar"
-                >
-                  <div
-                    class="t-progress__inner"
-                    style="width: 88%;"
-                  />
-                </div>
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-check-circle-filled t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-              </div>
+                <path
+                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
+                  fill="currentColor"
+                />
+              </svg>
+            </div>
+            <div
+              class="t-result__title"
+            >
+              默认状态
+            </div>
+            <div
+              class="t-result__description"
+            >
+              描述文字
             </div>
           </div>
         </div>
@@ -27573,105 +27334,66 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
       <div
         class="tdesign-mobile-demo-block__header"
       >
+        
         <p
           class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
         >
-          百分比内显进度条
+          自定义结果
         </p>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+        class="tdesign-mobile-demo-block__slot"
       >
         <div
-          class="example-progress"
+          class="t-result t-result--theme-default"
         >
           <div
-            class="example-progress__item"
-          >
-            <div
-              class="t-progress"
-            >
-              <div
-                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
-              >
-                <div
-                  class="t-progress__inner"
-                  style="width: 80%;"
-                >
-                  <div
-                    class="t-progress__info"
-                  >
-                    80%
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
+            class="t-result__thumb"
           >
             <div
-              class="t-progress"
+              class="t-image t-image--square extra-class-image"
             >
               <div
-                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
+                class="t-image__mask"
               >
                 <div
-                  class="t-progress__inner"
-                  style="width: 88%;"
+                  class="t-loading t-loading--center"
+                  style="font-size: 20px;"
                 >
                   <div
-                    class="t-progress__info"
+                    class="t-loading__dots"
+                    style="animation-duration: 800ms; width: 20px; height: 20px;"
                   >
-                    88%
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                    />
+                    <div
+                      class="t-loading__dot"
+                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                    />
                   </div>
                 </div>
               </div>
+              <img
+                class="t-image__img t-image--fit-fill t-image--position-center"
+                src="https://tdesign.gtimg.com/mobile/demos/result1.png"
+              />
             </div>
           </div>
           <div
-            class="example-progress__item"
+            class="t-result__title"
           >
-            <div
-              class="t-progress"
-            >
-              <div
-                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
-              >
-                <div
-                  class="t-progress__inner"
-                  style="width: 88%;"
-                >
-                  <div
-                    class="t-progress__info"
-                  >
-                    88%
-                  </div>
-                </div>
-              </div>
-            </div>
+            自定义结果
           </div>
           <div
-            class="example-progress__item"
+            class="t-result__description"
           >
-            <div
-              class="t-progress"
-            >
-              <div
-                class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
-              >
-                <div
-                  class="t-progress__inner"
-                  style="width: 88%;"
-                >
-                  <div
-                    class="t-progress__info"
-                  >
-                    88%
-                  </div>
-                </div>
-              </div>
-            </div>
+            描述文字
           </div>
         </div>
       </div>
@@ -27682,219 +27404,30 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
       <div
         class="tdesign-mobile-demo-block__header"
       >
+        
         <p
           class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
         >
-          环形进度条
+          页面位置展示
         </p>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot with-padding"
+        class="tdesign-mobile-demo-block__slot"
       >
         <div
-          class="example-progress"
+          class="padding"
         >
-          <div
-            class="example-progress__item"
-          >
-            <div>
-              <div
-                class="t-progress--circle t-progress--status-default"
-                style="width: 112px; height: 112px; font-size: 17.5px;"
-              >
-                <div
-                  class="t-progress__info"
-                >
-                  80%
-                </div>
-                <svg
-                  height="112"
-                  viewBox="0 0 118 118"
-                  width="112"
-                >
-                  <circle
-                    class="t-progress__circle-outer"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke="var(--td-bg-color-component)"
-                    stroke-width="6"
-                  />
-                  <circle
-                    class="t-progress__circle-inner"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke-dasharray="281.48670176164546  70.37167544041135"
-                    stroke-width="6"
-                    style="stroke-linecap: round;"
-                    transform="matrix(0,-1,1,0,0,118)"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
-          >
-            <div>
-              <div
-                class="t-progress--circle t-progress--status-warning"
-                style="width: 112px; height: 112px; font-size: 17.5px;"
-              >
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-error t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M13 2v14.5h-2V2h2zm-2 17h2v2h-2v-2z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <svg
-                  height="112"
-                  viewBox="0 0 118 118"
-                  width="112"
-                >
-                  <circle
-                    class="t-progress__circle-outer"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke="var(--td-bg-color-component)"
-                    stroke-width="6"
-                  />
-                  <circle
-                    class="t-progress__circle-inner"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke-dasharray="281.48670176164546  70.37167544041135"
-                    stroke-width="6"
-                    style="stroke-linecap: round;"
-                    transform="matrix(0,-1,1,0,0,118)"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
+          <button
+            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+            type="button"
           >
-            <div>
-              <div
-                class="t-progress--circle t-progress--status-error"
-                style="width: 112px; height: 112px; font-size: 17.5px;"
-              >
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-close t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M7.05 5.64L12 10.59l4.95-4.95 1.41 1.41L13.41 12l4.95 4.95-1.41 1.41L12 13.41l-4.95 4.95-1.41-1.41L10.59 12 5.64 7.05l1.41-1.41z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <svg
-                  height="112"
-                  viewBox="0 0 118 118"
-                  width="112"
-                >
-                  <circle
-                    class="t-progress__circle-outer"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke="var(--td-bg-color-component)"
-                    stroke-width="6"
-                  />
-                  <circle
-                    class="t-progress__circle-inner"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke-dasharray="281.48670176164546  70.37167544041135"
-                    stroke-width="6"
-                    style="stroke-linecap: round;"
-                    transform="matrix(0,-1,1,0,0,118)"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
-          <div
-            class="example-progress__item"
-          >
-            <div>
-              <div
-                class="t-progress--circle t-progress--status-success"
-                style="width: 112px; height: 112px; font-size: 17.5px;"
-              >
-                <div
-                  class="t-progress__info"
-                >
-                  <svg
-                    class="t-icon t-icon-check t-progress__icon"
-                    fill="none"
-                    height="1em"
-                    viewBox="0 0 24 24"
-                    width="1em"
-                  >
-                    <path
-                      d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
-                      fill="currentColor"
-                    />
-                  </svg>
-                </div>
-                <svg
-                  height="112"
-                  viewBox="0 0 118 118"
-                  width="112"
-                >
-                  <circle
-                    class="t-progress__circle-outer"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke="var(--td-bg-color-component)"
-                    stroke-width="6"
-                  />
-                  <circle
-                    class="t-progress__circle-inner"
-                    cx="59"
-                    cy="59"
-                    fill="none"
-                    r="56"
-                    stroke-dasharray="281.48670176164546  70.37167544041135"
-                    stroke-width="6"
-                    style="stroke-linecap: round;"
-                    transform="matrix(0,-1,1,0,0,118)"
-                  />
-                </svg>
-              </div>
-            </div>
-          </div>
+            <span
+              class="t-button__content"
+            >
+               
+              页面位置展示
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -27902,380 +27435,378 @@ exports[`csr snapshot test > csr test src/progress/_example/index.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/progress/_example/line.tsx 1`] = `
+exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = `
 <div>
-  <div
-    class="example-progress"
-  >
+  <div>
     <div
-      class="example-progress__item"
+      class="t-result t-result--theme-success space"
     >
       <div
-        class="t-progress"
+        class="t-result__thumb"
       >
-        <div
-          class="t-progress--thin t-progress--status-default"
+        <svg
+          class="t-icon t-icon-check-circle t-result__icon"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__bar"
-          >
-            <div
-              class="t-progress__inner"
-              style="width: 80%;"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            80%
-          </div>
-        </div>
+          <path
+            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-result__title"
+      >
+        成功状态
+      </div>
+      <div
+        class="t-result__description"
+      >
+        描述文字
       </div>
     </div>
     <div
-      class="example-progress__item"
+      class="t-result t-result--theme-error space"
     >
       <div
-        class="t-progress"
+        class="t-result__thumb"
       >
-        <div
-          class="t-progress--thin t-progress--status-warning"
+        <svg
+          class="t-icon t-icon-close-circle t-result__icon"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__bar"
-          >
-            <div
-              class="t-progress__inner"
-              style="width: 88%;"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            <svg
-              class="t-icon t-icon-error-circle-filled t-progress__icon"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M12 1a11 11 0 110 22 11 11 0 010-22zm-1 13h2V6.5h-2V14zm2 1.5h-2v2h2v-2z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
+          <path
+            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-result__title"
+      >
+        失败状态
+      </div>
+      <div
+        class="t-result__description"
+      >
+        描述文字
       </div>
     </div>
     <div
-      class="example-progress__item"
+      class="t-result t-result--theme-warning space"
     >
       <div
-        class="t-progress"
+        class="t-result__thumb"
       >
-        <div
-          class="t-progress--thin t-progress--status-error"
+        <svg
+          class="t-icon t-icon-info-circle t-result__icon"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__bar"
-          >
-            <div
-              class="t-progress__inner"
-              style="width: 88%;"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            <svg
-              class="t-icon t-icon-close-circle-filled t-progress__icon"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M12 23a11 11 0 100-22 11 11 0 000 22zM8.82 7.4L12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18 10.6 12 7.4 8.82 8.82 7.4z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
+          <path
+            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-result__title"
+      >
+        警示状态
+      </div>
+      <div
+        class="t-result__description"
+      >
+        描述文字
       </div>
     </div>
     <div
-      class="example-progress__item"
+      class="t-result t-result--theme-default space"
     >
       <div
-        class="t-progress"
+        class="t-result__thumb"
       >
-        <div
-          class="t-progress--thin t-progress--status-success"
+        <svg
+          class="t-icon t-icon-info-circle t-result__icon"
+          fill="none"
+          height="1em"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__bar"
-          >
-            <div
-              class="t-progress__inner"
-              style="width: 88%;"
-            />
-          </div>
-          <div
-            class="t-progress__info"
-          >
-            <svg
-              class="t-icon t-icon-check-circle-filled t-progress__icon"
-              fill="none"
-              height="1em"
-              viewBox="0 0 24 24"
-              width="1em"
-            >
-              <path
-                d="M12 23a11 11 0 100-22 11 11 0 000 22zM7.5 10.59l3 3 6-6L17.91 9l-7.41 7.41L6.09 12l1.41-1.41z"
-                fill="currentColor"
-              />
-            </svg>
-          </div>
-        </div>
+          <path
+            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
+            fill="currentColor"
+          />
+        </svg>
+      </div>
+      <div
+        class="t-result__title"
+      >
+        默认状态
+      </div>
+      <div
+        class="t-result__description"
+      >
+        描述文字
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/progress/_example/plump.tsx 1`] = `
+exports[`csr snapshot test > csr test src/search/_example/action.tsx 1`] = `
 <div>
   <div
-    class="example-progress"
+    class="search-example"
   >
     <div
-      class="example-progress__item"
+      class="t-search"
     >
       <div
-        class="t-progress"
+        class="t-search__input-box t-search__input-box--square t-is-focused"
       >
-        <div
-          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-default"
+        <svg
+          class="t-icon t-icon-search"
+          fill="none"
+          height="1em"
+          style="font-size: 24px;"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__inner"
-            style="width: 80%;"
-          >
-            <div
-              class="t-progress__info"
-            >
-              80%
-            </div>
-          </div>
-        </div>
+          <path
+            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          class="t-input__keyword t-search--center"
+          placeholder="搜索预设文案"
+          type="search"
+          value=""
+        />
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/search/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="search-example"
+  >
     <div
-      class="example-progress__item"
+      class="t-search"
     >
       <div
-        class="t-progress"
+        class="t-search__input-box t-search__input-box--square"
       >
-        <div
-          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-warning"
+        <svg
+          class="t-icon t-icon-search"
+          fill="none"
+          height="1em"
+          style="font-size: 24px;"
+          viewBox="0 0 24 24"
+          width="1em"
         >
-          <div
-            class="t-progress__inner"
-            style="width: 88%;"
-          >
-            <div
-              class="t-progress__info"
-            >
-              88%
-            </div>
-          </div>
-        </div>
+          <path
+            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+            fill="currentColor"
+          />
+        </svg>
+        <input
+          class="t-input__keyword"
+          placeholder="请输入关键字"
+          type="search"
+          value=""
+        />
       </div>
     </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/search/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
     <div
-      class="example-progress__item"
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Search 搜索框
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        用于用户输入搜索信息，并进行页面内容搜索。
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
     >
       <div
-        class="t-progress"
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          基础搜索框
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
       >
         <div
-          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-error"
+          class="search-example"
         >
           <div
-            class="t-progress__inner"
-            style="width: 88%;"
+            class="t-search"
           >
             <div
-              class="t-progress__info"
+              class="t-search__input-box t-search__input-box--square"
             >
-              88%
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                placeholder="请输入关键字"
+                type="search"
+                value=""
+              />
             </div>
           </div>
         </div>
       </div>
     </div>
     <div
-      class="example-progress__item"
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
     >
       <div
-        class="t-progress"
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          输入值后显示取消按钮
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
       >
         <div
-          class="t-progress__bar t-progress--plump t-progress--over-ten t-progress--status-success"
+          class="search-example"
         >
           <div
-            class="t-progress__inner"
-            style="width: 88%;"
+            class="t-search"
           >
             <div
-              class="t-progress__info"
+              class="t-search__input-box t-search__input-box--square t-is-focused"
             >
-              88%
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword t-search--center"
+                placeholder="搜索预设文案"
+                type="search"
+                value=""
+              />
             </div>
           </div>
         </div>
       </div>
     </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/progress/_example/transition.tsx 1`] = `
-<div>
-  <div
-    class="example-progress"
-  >
     <div
-      class="t-progress"
+      class="tdesign-mobile-demo-block"
     >
       <div
-        class="t-progress--thin t-progress--status-default"
+        class="tdesign-mobile-demo-block__header"
       >
-        <div
-          class="t-progress__bar"
+        <h2
+          class="tdesign-mobile-demo-block__title"
         >
-          <div
-            class="t-progress__inner"
-            style="width: 88%;"
-          />
-        </div>
-        <div
-          class="t-progress__info"
+          02 组件样式
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
         >
-          88%
-        </div>
+          搜索框形状
+        </p>
       </div>
-    </div>
-    <div
-      class="button-group"
-    >
-      <button
-        class="t-button t-button--size-small t-button--outline t-button--primary t-button--rectangle"
-        type="button"
-      >
-        <span
-          class="t-button__content"
-        >
-           
-          减少
-        </span>
-      </button>
-      <div
-        class="space"
-      />
-      <button
-        class="t-button t-button--size-small t-button--base t-button--primary t-button--rectangle"
-        type="button"
-      >
-        <span
-          class="t-button__content"
-        >
-           
-          增加
-        </span>
-      </button>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/result/_example/custom.tsx 1`] = `
-<div>
-  <div
-    class="t-result t-result--theme-default"
-  >
-    <div
-      class="t-result__thumb"
-    >
       <div
-        class="t-image t-image--square extra-class-image"
+        class="tdesign-mobile-demo-block__slot"
       >
         <div
-          class="t-image__mask"
+          class="search-example"
         >
           <div
-            class="t-loading t-loading--center"
-            style="font-size: 20px;"
+            class="t-search"
           >
             <div
-              class="t-loading__dots"
-              style="animation-duration: 800ms; width: 20px; height: 20px;"
+              class="t-search__input-box t-search__input-box--round"
             >
-              <div
-                class="t-loading__dot"
-                style="animation-duration: 0.8s; animation-delay: 0s;"
-              />
-              <div
-                class="t-loading__dot"
-                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-              />
-              <div
-                class="t-loading__dot"
-                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              <svg
+                class="t-icon t-icon-search"
+                fill="none"
+                height="1em"
+                style="font-size: 24px;"
+                viewBox="0 0 24 24"
+                width="1em"
+              >
+                <path
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
+                  fill="currentColor"
+                />
+              </svg>
+              <input
+                class="t-input__keyword"
+                placeholder="请输入关键字"
+                type="search"
+                value=""
               />
             </div>
           </div>
         </div>
-        <img
-          class="t-image__img t-image--fit-fill t-image--position-center"
-          src="https://tdesign.gtimg.com/mobile/demos/result1.png"
-        />
       </div>
     </div>
-    <div
-      class="t-result__title"
-    >
-      自定义结果
-    </div>
-    <div
-      class="t-result__description"
-    >
-      描述文字
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = `
-<div>
-  <div
-    class="tdesign-mobile-demo"
-  >
-    <div
-      class="tdesign-mobile-demo-header"
-    >
-      <h1
-        class="tdesign-mobile-demo-header__title"
-      >
-        Result 结果
-      </h1>
-      <p
-        class="tdesign-mobile-demo-header__summary"
-      >
-        结果反馈
-      </p>
-    </div>
     <div
       class="tdesign-mobile-demo-block"
     >
@@ -28285,376 +27816,55 @@ exports[`csr snapshot test > csr test src/result/_example/index.tsx 1`] = `
         <h2
           class="tdesign-mobile-demo-block__title"
         >
-          01类型
+          03 组件状态
         </h2>
         <p
           class="tdesign-mobile-demo-block__summary"
         >
-          不同结果反馈
+          默认状态其他对齐方式
         </p>
       </div>
       <div
         class="tdesign-mobile-demo-block__slot"
       >
-        <div>
-          <div
-            class="t-result t-result--theme-success space"
-          >
-            <div
-              class="t-result__thumb"
-            >
-              <svg
-                class="t-icon t-icon-check-circle t-result__icon"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            <div
-              class="t-result__title"
-            >
-              成功状态
-            </div>
-            <div
-              class="t-result__description"
-            >
-              描述文字
-            </div>
-          </div>
-          <div
-            class="t-result t-result--theme-error space"
-          >
-            <div
-              class="t-result__thumb"
-            >
-              <svg
-                class="t-icon t-icon-close-circle t-result__icon"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            <div
-              class="t-result__title"
-            >
-              失败状态
-            </div>
-            <div
-              class="t-result__description"
-            >
-              描述文字
-            </div>
-          </div>
-          <div
-            class="t-result t-result--theme-warning space"
-          >
-            <div
-              class="t-result__thumb"
-            >
-              <svg
-                class="t-icon t-icon-info-circle t-result__icon"
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            <div
-              class="t-result__title"
-            >
-              警示状态
-            </div>
-            <div
-              class="t-result__description"
-            >
-              描述文字
-            </div>
-          </div>
+        <div
+          class="search-example"
+        >
           <div
-            class="t-result t-result--theme-default space"
+            class="t-search"
           >
             <div
-              class="t-result__thumb"
+              class="t-search__input-box t-search__input-box--square"
             >
               <svg
-                class="t-icon t-icon-info-circle t-result__icon"
+                class="t-icon t-icon-search"
                 fill="none"
                 height="1em"
+                style="font-size: 24px;"
                 viewBox="0 0 24 24"
                 width="1em"
               >
                 <path
-                  d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
+                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
                   fill="currentColor"
                 />
               </svg>
-            </div>
-            <div
-              class="t-result__title"
-            >
-              默认状态
-            </div>
-            <div
-              class="t-result__description"
-            >
-              描述文字
+              <input
+                class="t-input__keyword"
+                placeholder="搜索预设文案"
+                type="search"
+                value=""
+              />
             </div>
           </div>
         </div>
       </div>
     </div>
-    <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          自定义结果
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
-        <div
-          class="t-result t-result--theme-default"
-        >
-          <div
-            class="t-result__thumb"
-          >
-            <div
-              class="t-image t-image--square extra-class-image"
-            >
-              <div
-                class="t-image__mask"
-              >
-                <div
-                  class="t-loading t-loading--center"
-                  style="font-size: 20px;"
-                >
-                  <div
-                    class="t-loading__dots"
-                    style="animation-duration: 800ms; width: 20px; height: 20px;"
-                  >
-                    <div
-                      class="t-loading__dot"
-                      style="animation-duration: 0.8s; animation-delay: 0s;"
-                    />
-                    <div
-                      class="t-loading__dot"
-                      style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
-                    />
-                    <div
-                      class="t-loading__dot"
-                      style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
-                    />
-                  </div>
-                </div>
-              </div>
-              <img
-                class="t-image__img t-image--fit-fill t-image--position-center"
-                src="https://tdesign.gtimg.com/mobile/demos/result1.png"
-              />
-            </div>
-          </div>
-          <div
-            class="t-result__title"
-          >
-            自定义结果
-          </div>
-          <div
-            class="t-result__description"
-          >
-            描述文字
-          </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          页面位置展示
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
-        <div
-          class="padding"
-        >
-          <button
-            class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-            type="button"
-          >
-            <span
-              class="t-button__content"
-            >
-               
-              页面位置展示
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/result/_example/theme.tsx 1`] = `
-<div>
-  <div>
-    <div
-      class="t-result t-result--theme-success space"
-    >
-      <div
-        class="t-result__thumb"
-      >
-        <svg
-          class="t-icon t-icon-check-circle t-result__icon"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12.5 4.41L6.09 12l1.41-1.41 3 3 6-6L17.91 9l-7.41 7.41z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-result__title"
-      >
-        成功状态
-      </div>
-      <div
-        class="t-result__description"
-      >
-        描述文字
-      </div>
-    </div>
-    <div
-      class="t-result t-result--theme-error space"
-    >
-      <div
-        class="t-result__thumb"
-      >
-        <svg
-          class="t-icon t-icon-close-circle t-result__icon"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-result__title"
-      >
-        失败状态
-      </div>
-      <div
-        class="t-result__description"
-      >
-        描述文字
-      </div>
-    </div>
-    <div
-      class="t-result t-result--theme-warning space"
-    >
-      <div
-        class="t-result__thumb"
-      >
-        <svg
-          class="t-icon t-icon-info-circle t-result__icon"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-result__title"
-      >
-        警示状态
-      </div>
-      <div
-        class="t-result__description"
-      >
-        描述文字
-      </div>
-    </div>
-    <div
-      class="t-result t-result--theme-default space"
-    >
-      <div
-        class="t-result__thumb"
-      >
-        <svg
-          class="t-icon t-icon-info-circle t-result__icon"
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zm-12 5.5V10h2v7.5h-2zm2-9h-2v-2h2v2z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      <div
-        class="t-result__title"
-      >
-        默认状态
-      </div>
-      <div
-        class="t-result__description"
-      >
-        描述文字
-      </div>
-    </div>
   </div>
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/search/_example/action.tsx 1`] = `
+exports[`csr snapshot test > csr test src/search/_example/other.tsx 1`] = `
 <div>
   <div
     class="search-example"
@@ -28663,7 +27873,7 @@ exports[`csr snapshot test > csr test src/search/_example/action.tsx 1`] = `
       class="t-search"
     >
       <div
-        class="t-search__input-box t-search__input-box--square t-is-focused"
+        class="t-search__input-box t-search__input-box--square"
       >
         <svg
           class="t-icon t-icon-search"
@@ -28679,7 +27889,7 @@ exports[`csr snapshot test > csr test src/search/_example/action.tsx 1`] = `
           />
         </svg>
         <input
-          class="t-input__keyword t-search--center"
+          class="t-input__keyword"
           placeholder="搜索预设文案"
           type="search"
           value=""
@@ -28690,7 +27900,7 @@ exports[`csr snapshot test > csr test src/search/_example/action.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/search/_example/base.tsx 1`] = `
+exports[`csr snapshot test > csr test src/search/_example/shape.tsx 1`] = `
 <div>
   <div
     class="search-example"
@@ -28699,7 +27909,7 @@ exports[`csr snapshot test > csr test src/search/_example/base.tsx 1`] = `
       class="t-search"
     >
       <div
-        class="t-search__input-box t-search__input-box--square"
+        class="t-search__input-box t-search__input-box--round"
       >
         <svg
           class="t-icon t-icon-search"
@@ -28726,454 +27936,152 @@ exports[`csr snapshot test > csr test src/search/_example/base.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/search/_example/index.tsx 1`] = `
+exports[`csr snapshot test > csr test src/side-bar/_example/base.tsx 1`] = `
 <div>
   <div
-    class="tdesign-mobile-demo"
+    class="side-bar-wrapper section-base"
   >
     <div
-      class="tdesign-mobile-demo-header"
+      class="t-side-bar"
     >
-      <h1
-        class="tdesign-mobile-demo-header__title"
-      >
-        Search 搜索框
-      </h1>
-      <p
-        class="tdesign-mobile-demo-header__summary"
+      <div
+        class="t-side-bar-item"
       >
-        用于用户输入搜索信息，并进行页面内容搜索。
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          01 组件类型
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          基础搜索框
-        </p>
+        <div>
+          选项一
+        </div>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot"
+        class="t-side-bar-item t-side-bar-item--active"
       >
+        <div>
+          <div
+            class="t-side-bar-item__line"
+          />
+          <div
+            class="t-side-bar-item__prefix"
+          />
+          <div
+            class="t-side-bar-item__suffix"
+          />
+        </div>
         <div
-          class="search-example"
+          class="t-badge"
         >
           <div
-            class="t-search"
+            class="t-badge__content"
           >
-            <div
-              class="t-search__input-box t-search__input-box--square"
+            <span
+              class="t-badge__content-text"
             >
-              <svg
-                class="t-icon t-icon-search"
-                fill="none"
-                height="1em"
-                style="font-size: 24px;"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                  fill="currentColor"
-                />
-              </svg>
-              <input
-                class="t-input__keyword"
-                placeholder="请输入关键字"
-                type="search"
-                value=""
-              />
-            </div>
+              选项二
+            </span>
           </div>
+          <div
+            class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+          />
         </div>
       </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
-    >
       <div
-        class="tdesign-mobile-demo-block__header"
+        class="t-side-bar-item"
       >
-        <p
-          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-        >
-          输入值后显示取消按钮
-        </p>
+        <div>
+          选项三
+        </div>
       </div>
       <div
-        class="tdesign-mobile-demo-block__slot"
+        class="t-side-bar-item"
       >
         <div
-          class="search-example"
+          class="t-badge"
         >
           <div
-            class="t-search"
+            class="t-badge__content"
           >
-            <div
-              class="t-search__input-box t-search__input-box--square t-is-focused"
+            <span
+              class="t-badge__content-text"
             >
-              <svg
-                class="t-icon t-icon-search"
-                fill="none"
-                height="1em"
-                style="font-size: 24px;"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                  fill="currentColor"
-                />
-              </svg>
-              <input
-                class="t-input__keyword t-search--center"
-                placeholder="搜索预设文案"
-                type="search"
-                value=""
-              />
-            </div>
+              选项四
+            </span>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+          >
+            6
           </div>
         </div>
       </div>
+      <div
+        class="t-side-bar-item"
+      >
+        <div>
+          选项五
+        </div>
+      </div>
+      <div
+        class="t-side-bar__padding"
+      />
     </div>
     <div
-      class="tdesign-mobile-demo-block"
+      class="content"
     >
       <div
-        class="tdesign-mobile-demo-block__header"
+        class="section"
       >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          02 组件样式
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
+        <div
+          class="title"
         >
-          搜索框形状
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
+          标题一
+        </div>
         <div
-          class="search-example"
+          class="t-grid"
+          style="grid-template-columns: repeat(3, 1fr);"
         >
           <div
-            class="t-search"
+            class="t-grid-item t-grid-item--vertical"
+            style="text-align: center; flex-basis: 33.333333333333336%;"
           >
             <div
-              class="t-search__input-box t-search__input-box--round"
+              class="t-grid-item__image t-grid-item__image--large"
             >
-              <svg
-                class="t-icon t-icon-search"
-                fill="none"
-                height="1em"
-                style="font-size: 24px;"
-                viewBox="0 0 24 24"
-                width="1em"
+              <div
+                class="t-image t-image--round"
+              />
+            </div>
+            <div
+              class="t-grid-item__content t-grid-item__content--vertical"
+            >
+              <div
+                class="t-grid-item__title t-grid-item__title--large"
               >
-                <path
-                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                  fill="currentColor"
-                />
-              </svg>
-              <input
-                class="t-input__keyword"
-                placeholder="请输入关键字"
-                type="search"
-                value=""
+                标题文字
+              </div>
+              <div
+                class="t-grid-item__description t-grid-item__description--vertical"
               />
             </div>
           </div>
-        </div>
-      </div>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block"
-    >
-      <div
-        class="tdesign-mobile-demo-block__header"
-      >
-        <h2
-          class="tdesign-mobile-demo-block__title"
-        >
-          03 组件状态
-        </h2>
-        <p
-          class="tdesign-mobile-demo-block__summary"
-        >
-          默认状态其他对齐方式
-        </p>
-      </div>
-      <div
-        class="tdesign-mobile-demo-block__slot"
-      >
-        <div
-          class="search-example"
-        >
           <div
-            class="t-search"
+            class="t-grid-item t-grid-item--vertical"
+            style="text-align: center; flex-basis: 33.333333333333336%;"
           >
             <div
-              class="t-search__input-box t-search__input-box--square"
+              class="t-grid-item__image t-grid-item__image--large"
             >
-              <svg
-                class="t-icon t-icon-search"
-                fill="none"
-                height="1em"
-                style="font-size: 24px;"
-                viewBox="0 0 24 24"
-                width="1em"
+              <div
+                class="t-image t-image--round"
+              />
+            </div>
+            <div
+              class="t-grid-item__content t-grid-item__content--vertical"
+            >
+              <div
+                class="t-grid-item__title t-grid-item__title--large"
               >
-                <path
-                  d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-                  fill="currentColor"
-                />
-              </svg>
-              <input
-                class="t-input__keyword"
-                placeholder="搜索预设文案"
-                type="search"
-                value=""
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/search/_example/other.tsx 1`] = `
-<div>
-  <div
-    class="search-example"
-  >
-    <div
-      class="t-search"
-    >
-      <div
-        class="t-search__input-box t-search__input-box--square"
-      >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
-          />
-        </svg>
-        <input
-          class="t-input__keyword"
-          placeholder="搜索预设文案"
-          type="search"
-          value=""
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/search/_example/shape.tsx 1`] = `
-<div>
-  <div
-    class="search-example"
-  >
-    <div
-      class="t-search"
-    >
-      <div
-        class="t-search__input-box t-search__input-box--round"
-      >
-        <svg
-          class="t-icon t-icon-search"
-          fill="none"
-          height="1em"
-          style="font-size: 24px;"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M15.1 5.9a6.5 6.5 0 10-9.2 9.2 6.5 6.5 0 009.2-9.2zM4.49 4.5a8.5 8.5 0 0112.69 11.27l5.34 5.35-1.41 1.41-5.35-5.34A8.5 8.5 0 014.5 4.49z"
-            fill="currentColor"
-          />
-        </svg>
-        <input
-          class="t-input__keyword"
-          placeholder="请输入关键字"
-          type="search"
-          value=""
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`csr snapshot test > csr test src/side-bar/_example/base.tsx 1`] = `
-<div>
-  <div
-    class="side-bar-wrapper section-base"
-  >
-    <div
-      class="t-side-bar"
-    >
-      <div
-        class="t-side-bar-item"
-      >
-        <div>
-          选项一
-        </div>
-      </div>
-      <div
-        class="t-side-bar-item t-side-bar-item--active"
-      >
-        <div>
-          <div
-            class="t-side-bar-item__line"
-          />
-          <div
-            class="t-side-bar-item__prefix"
-          />
-          <div
-            class="t-side-bar-item__suffix"
-          />
-        </div>
-        <div
-          class="t-badge"
-        >
-          <div
-            class="t-badge__content"
-          >
-            <span
-              class="t-badge__content-text"
-            >
-              选项二
-            </span>
-          </div>
-          <div
-            class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
-          />
-        </div>
-      </div>
-      <div
-        class="t-side-bar-item"
-      >
-        <div>
-          选项三
-        </div>
-      </div>
-      <div
-        class="t-side-bar-item"
-      >
-        <div
-          class="t-badge"
-        >
-          <div
-            class="t-badge__content"
-          >
-            <span
-              class="t-badge__content-text"
-            >
-              选项四
-            </span>
-          </div>
-          <div
-            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
-          >
-            6
-          </div>
-        </div>
-      </div>
-      <div
-        class="t-side-bar-item"
-      >
-        <div>
-          选项五
-        </div>
-      </div>
-      <div
-        class="t-side-bar__padding"
-      />
-    </div>
-    <div
-      class="content"
-    >
-      <div
-        class="section"
-      >
-        <div
-          class="title"
-        >
-          标题一
-        </div>
-        <div
-          class="t-grid"
-          style="grid-template-columns: repeat(3, 1fr);"
-        >
-          <div
-            class="t-grid-item t-grid-item--vertical"
-            style="text-align: center; flex-basis: 33.333333333333336%;"
-          >
-            <div
-              class="t-grid-item__image t-grid-item__image--large"
-            >
-              <div
-                class="t-image t-image--round"
-              />
-            </div>
-            <div
-              class="t-grid-item__content t-grid-item__content--vertical"
-            >
-              <div
-                class="t-grid-item__title t-grid-item__title--large"
-              >
-                标题文字
-              </div>
-              <div
-                class="t-grid-item__description t-grid-item__description--vertical"
-              />
-            </div>
-          </div>
-          <div
-            class="t-grid-item t-grid-item--vertical"
-            style="text-align: center; flex-basis: 33.333333333333336%;"
-          >
-            <div
-              class="t-grid-item__image t-grid-item__image--large"
-            >
-              <div
-                class="t-image t-image--round"
-              />
-            </div>
-            <div
-              class="t-grid-item__content t-grid-item__content--vertical"
-            >
-              <div
-                class="t-grid-item__title t-grid-item__title--large"
-              >
-                标题文字
-              </div>
-              <div
-                class="t-grid-item__description t-grid-item__description--vertical"
+                标题文字
+              </div>
+              <div
+                class="t-grid-item__description t-grid-item__description--vertical"
               />
             </div>
           </div>
@@ -44850,158 +43758,3915 @@ exports[`csr snapshot test > csr test src/tag/_example/theme.tsx 1`] = `
 </div>
 `;
 
-exports[`csr snapshot test > csr test src/tag/_example/type.tsx 1`] = `
-<div>
-  <div
-    class="summary"
-  >
-    基础标签
-  </div>
-  <div
-    class="tag-demo"
-  >
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-  </div>
-  <div
-    class="summary"
-  >
-    圆弧标签
-  </div>
-  <div
-    class="tag-demo"
-  >
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-  </div>
-  <div
-    class="summary"
-  >
-    带图标的标签
-  </div>
-  <div
-    class="tag-demo"
-  >
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__icon"
-      >
-        <svg
-          class="t-icon t-icon-discount"
-        >
-          <use
-            xlink:href="#t-icon-discount"
-          />
-        </svg>
-      </span>
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
-      role="button"
-    >
-      <span
-        class="t-tag__icon"
-      >
-        <svg
-          class="t-icon t-icon-discount"
-        >
-          <use
-            xlink:href="#t-icon-discount"
-          />
-        </svg>
-      </span>
-      <span
-        class="t-tag__text"
-      >
-        标签文字
-      </span>
-    </span>
-  </div>
-  <div
-    class="summary"
-  >
-    超长文本省略标签
-  </div>
-  <div
-    class="tag-demo"
-  >
-    <span
-      aria-disabled="false"
-      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
-      role="button"
-      style="max-width: 130px;"
-    >
-      <span
-        class="t-tag__text"
-      >
-        听说超长可以省略听说超长
-      </span>
-    </span>
-  </div>
-</div>
-`;
-
+exports[`csr snapshot test > csr test src/tag/_example/type.tsx 1`] = `
+<div>
+  <div
+    class="summary"
+  >
+    基础标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    圆弧标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    带图标的标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__icon"
+      >
+        <svg
+          class="t-icon t-icon-discount"
+        >
+          <use
+            xlink:href="#t-icon-discount"
+          />
+        </svg>
+      </span>
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium"
+      role="button"
+    >
+      <span
+        class="t-tag__icon"
+      >
+        <svg
+          class="t-icon t-icon-discount"
+        >
+          <use
+            xlink:href="#t-icon-discount"
+          />
+        </svg>
+      </span>
+      <span
+        class="t-tag__text"
+      >
+        标签文字
+      </span>
+    </span>
+  </div>
+  <div
+    class="summary"
+  >
+    超长文本省略标签
+  </div>
+  <div
+    class="tag-demo"
+  >
+    <span
+      aria-disabled="false"
+      class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium"
+      role="button"
+      style="max-width: 130px;"
+    >
+      <span
+        class="t-tag__text"
+      >
+        听说超长可以省略听说超长
+      </span>
+    </span>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tree-select/_example/base.tsx 1`] = `
+<div>
+  <div
+    class="t-tree-select"
+    style="height: 336px;"
+  >
+    <div
+      class="t-tree-select__column t-tree-select__column--left"
+    >
+      <div
+        class="t-side-bar"
+      >
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项一
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item t-side-bar-item--active"
+        >
+          <div>
+            <div
+              class="t-side-bar-item__line"
+            />
+            <div
+              class="t-side-bar-item__prefix"
+            />
+            <div
+              class="t-side-bar-item__suffix"
+            />
+          </div>
+          <div>
+            选项二
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项三
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项四
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项五
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项六
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项七
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项八
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项九
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项十
+          </div>
+        </div>
+        <div
+          class="t-side-bar__padding"
+        />
+      </div>
+    </div>
+    <div
+      class="t-tree-select__column t-tree-select__column--right"
+    >
+      <div
+        class="t-radio-group"
+      >
+        <div
+          class="t-cell-group"
+        >
+          <div
+            class="tcell-group__container"
+          >
+            <div
+              class="t-radio t-is-checked"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-0"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--checked"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项一
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-1"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项二
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-2"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项三
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-3"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项四
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-4"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项五
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-5"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项六
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-6"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项七
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-7"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项八
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-8"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项九
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="1-9"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    选项十
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tree-select/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        TreeSelect 树形选择器
+      </h1>
+      <p
+        class="tdesign-mobile-demo-header__summary"
+      >
+        用于多层级数据的逐级选择。
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          01 组件类型
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          基础树形选择
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="t-tree-select"
+          style="height: 336px;"
+        >
+          <div
+            class="t-tree-select__column t-tree-select__column--left"
+          >
+            <div
+              class="t-side-bar"
+            >
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项一
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item t-side-bar-item--active"
+              >
+                <div>
+                  <div
+                    class="t-side-bar-item__line"
+                  />
+                  <div
+                    class="t-side-bar-item__prefix"
+                  />
+                  <div
+                    class="t-side-bar-item__suffix"
+                  />
+                </div>
+                <div>
+                  选项二
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项三
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项四
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项五
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项六
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项七
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项八
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项九
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项十
+                </div>
+              </div>
+              <div
+                class="t-side-bar__padding"
+              />
+            </div>
+          </div>
+          <div
+            class="t-tree-select__column t-tree-select__column--right"
+          >
+            <div
+              class="t-radio-group"
+            >
+              <div
+                class="t-cell-group"
+              >
+                <div
+                  class="tcell-group__container"
+                >
+                  <div
+                    class="t-radio t-is-checked"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          checked=""
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-0"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--checked"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项一
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-1"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项二
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-2"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项三
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-3"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项四
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-4"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项五
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-5"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项六
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-6"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项七
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-7"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项八
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-8"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项九
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="1-9"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          选项十
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <p
+          class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+        >
+          多选树形选择
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="t-tree-select"
+          style="height: 336px;"
+        >
+          <div
+            class="t-tree-select__column t-tree-select__column--left"
+          >
+            <div
+              class="t-side-bar"
+            >
+              <div
+                class="t-side-bar-item t-side-bar-item--active"
+              >
+                <div>
+                  <div
+                    class="t-side-bar-item__line"
+                  />
+                  <div
+                    class="t-side-bar-item__prefix"
+                  />
+                  <div
+                    class="t-side-bar-item__suffix"
+                  />
+                </div>
+                <div>
+                  选项一
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项二
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项三
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项四
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项五
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项六
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项七
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项八
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项九
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  选项十
+                </div>
+              </div>
+              <div
+                class="t-side-bar__padding"
+              />
+            </div>
+          </div>
+          <div
+            class="t-tree-select__column t-tree-select__column--right"
+          >
+            <div
+              class="t-checkbox-group t-tree-select__checkbox"
+            >
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+                >
+                  <svg
+                    class="t-icon t-icon-check t-checkbox__icon-wrapper"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title t-checkbox__title--checked"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项一
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+                >
+                  <svg
+                    class="t-icon t-icon-check t-checkbox__icon-wrapper"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title t-checkbox__title--checked"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项二
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项三
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项四
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项五
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项六
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项七
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项八
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项九
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+              <div
+                class="t-checkbox t-checkbox--right t-checkbox--block"
+              >
+                <div
+                  class="t-checkbox__icon t-checkbox__icon--right"
+                >
+                  <div
+                    class="placeholder"
+                  />
+                </div>
+                <div
+                  class="t-checkbox__content"
+                >
+                  <div
+                    class="t-checkbox__title"
+                    style="-webkit-line-clamp: 1;"
+                  >
+                    选项十
+                  </div>
+                  <div
+                    class="t-checkbox__description"
+                    style="-webkit-line-clamp: 5;"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block"
+    >
+      <div
+        class="tdesign-mobile-demo-block__header"
+      >
+        <h2
+          class="tdesign-mobile-demo-block__title"
+        >
+          02 组件状态
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          三级树形选择
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="t-tree-select"
+          style="height: 336px;"
+        >
+          <div
+            class="t-tree-select__column t-tree-select__column--left"
+          >
+            <div
+              class="t-side-bar"
+            >
+              <div
+                class="t-side-bar-item t-side-bar-item--active"
+              >
+                <div>
+                  <div
+                    class="t-side-bar-item__line"
+                  />
+                  <div
+                    class="t-side-bar-item__prefix"
+                  />
+                  <div
+                    class="t-side-bar-item__suffix"
+                  />
+                </div>
+                <div>
+                  北京市
+                </div>
+              </div>
+              <div
+                class="t-side-bar-item"
+              >
+                <div>
+                  广东省
+                </div>
+              </div>
+              <div
+                class="t-side-bar__padding"
+              />
+            </div>
+          </div>
+          <div
+            class="t-tree-select__column t-tree-select__column--middle"
+          >
+            <div
+              class="t-tree-select__item t-tree-select__item--active t-tree-select__item--disabled"
+            >
+              北京市
+            </div>
+          </div>
+          <div
+            class="t-tree-select__column t-tree-select__column--right"
+          >
+            <div
+              class="t-radio-group"
+            >
+              <div
+                class="t-cell-group"
+              >
+                <div
+                  class="tcell-group__container"
+                >
+                  <div
+                    class="t-radio t-is-checked"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          checked=""
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110101"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--checked"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          东城区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio t-is-disabled"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          disabled=""
+                          readonly=""
+                          type="radio"
+                          value="110102"
+                        />
+                        <div
+                          class="t-radio__icon t-radio__icon--disabled"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          西城区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110105"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          朝阳区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110106"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          丰台区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110107"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          石景山区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110108"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          海淀区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110109"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          门头沟区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110111"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          房山区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110112"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          通州区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110113"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          顺义区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110114"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          昌平区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110115"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          大兴区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110116"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          怀柔区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110117"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          平谷区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110118"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          密云区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                  <div
+                    class="t-radio"
+                  >
+                    <span
+                      class="t-radio__content-wrap"
+                    >
+                      <span
+                        class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                      >
+                        <input
+                          class="t-radio__original-left"
+                          readonly=""
+                          type="radio"
+                          value="110119"
+                        />
+                        <div
+                          class="t-radio__icon"
+                        >
+                          <svg
+                            class="t-icon t-icon-check"
+                            fill="none"
+                            height="1em"
+                            style="font-size: 16px;"
+                            viewBox="0 0 24 24"
+                            width="1em"
+                          >
+                            <path
+                              d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                              fill="currentColor"
+                            />
+                          </svg>
+                        </div>
+                      </span>
+                      <span
+                        class="t-radio__label-wrap"
+                      >
+                        <div
+                          class="t-radio__content-inner"
+                          style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                        >
+                          延庆区
+                        </div>
+                      </span>
+                    </span>
+                    <div
+                      class="t-radio__border t-radio__border--left"
+                    />
+                    <div />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tree-select/_example/multiple.tsx 1`] = `
+<div>
+  <div
+    class="t-tree-select"
+    style="height: 336px;"
+  >
+    <div
+      class="t-tree-select__column t-tree-select__column--left"
+    >
+      <div
+        class="t-side-bar"
+      >
+        <div
+          class="t-side-bar-item t-side-bar-item--active"
+        >
+          <div>
+            <div
+              class="t-side-bar-item__line"
+            />
+            <div
+              class="t-side-bar-item__prefix"
+            />
+            <div
+              class="t-side-bar-item__suffix"
+            />
+          </div>
+          <div>
+            选项一
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项二
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项三
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项四
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项五
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项六
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项七
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项八
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项九
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            选项十
+          </div>
+        </div>
+        <div
+          class="t-side-bar__padding"
+        />
+      </div>
+    </div>
+    <div
+      class="t-tree-select__column t-tree-select__column--right"
+    >
+      <div
+        class="t-checkbox-group t-tree-select__checkbox"
+      >
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+          >
+            <svg
+              class="t-icon t-icon-check t-checkbox__icon-wrapper"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title t-checkbox__title--checked"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项一
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--checked t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right t-checkbox__icon--checked"
+          >
+            <svg
+              class="t-icon t-icon-check t-checkbox__icon-wrapper"
+              fill="none"
+              height="1em"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                fill="currentColor"
+              />
+            </svg>
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title t-checkbox__title--checked"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项二
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项三
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项四
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项五
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项六
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项七
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项八
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项九
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+        <div
+          class="t-checkbox t-checkbox--right t-checkbox--block"
+        >
+          <div
+            class="t-checkbox__icon t-checkbox__icon--right"
+          >
+            <div
+              class="placeholder"
+            />
+          </div>
+          <div
+            class="t-checkbox__content"
+          >
+            <div
+              class="t-checkbox__title"
+              style="-webkit-line-clamp: 1;"
+            >
+              选项十
+            </div>
+            <div
+              class="t-checkbox__description"
+              style="-webkit-line-clamp: 5;"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/tree-select/_example/normal.tsx 1`] = `
+<div>
+  <div
+    class="t-tree-select"
+    style="height: 336px;"
+  >
+    <div
+      class="t-tree-select__column t-tree-select__column--left"
+    >
+      <div
+        class="t-side-bar"
+      >
+        <div
+          class="t-side-bar-item t-side-bar-item--active"
+        >
+          <div>
+            <div
+              class="t-side-bar-item__line"
+            />
+            <div
+              class="t-side-bar-item__prefix"
+            />
+            <div
+              class="t-side-bar-item__suffix"
+            />
+          </div>
+          <div>
+            北京市
+          </div>
+        </div>
+        <div
+          class="t-side-bar-item"
+        >
+          <div>
+            广东省
+          </div>
+        </div>
+        <div
+          class="t-side-bar__padding"
+        />
+      </div>
+    </div>
+    <div
+      class="t-tree-select__column t-tree-select__column--middle"
+    >
+      <div
+        class="t-tree-select__item t-tree-select__item--active t-tree-select__item--disabled"
+      >
+        北京市
+      </div>
+    </div>
+    <div
+      class="t-tree-select__column t-tree-select__column--right"
+    >
+      <div
+        class="t-radio-group"
+      >
+        <div
+          class="t-cell-group"
+        >
+          <div
+            class="tcell-group__container"
+          >
+            <div
+              class="t-radio t-is-checked"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    checked=""
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110101"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--checked"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    东城区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio t-is-disabled"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    disabled=""
+                    readonly=""
+                    type="radio"
+                    value="110102"
+                  />
+                  <div
+                    class="t-radio__icon t-radio__icon--disabled"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    西城区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110105"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    朝阳区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110106"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    丰台区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110107"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    石景山区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110108"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    海淀区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110109"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    门头沟区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110111"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    房山区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110112"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    通州区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110113"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    顺义区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110114"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    昌平区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110115"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    大兴区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110116"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    怀柔区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110117"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    平谷区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110118"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    密云区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+            <div
+              class="t-radio"
+            >
+              <span
+                class="t-radio__content-wrap"
+              >
+                <span
+                  class="t-radio__icon-wrap t-radio__icon-left-wrap"
+                >
+                  <input
+                    class="t-radio__original-left"
+                    readonly=""
+                    type="radio"
+                    value="110119"
+                  />
+                  <div
+                    class="t-radio__icon"
+                  >
+                    <svg
+                      class="t-icon t-icon-check"
+                      fill="none"
+                      height="1em"
+                      style="font-size: 16px;"
+                      viewBox="0 0 24 24"
+                      width="1em"
+                    >
+                      <path
+                        d="M20.99 7.38l-10.61 10.6L4 11.63l1.42-1.41 4.95 4.95 9.2-9.2 1.4 1.42z"
+                        fill="currentColor"
+                      />
+                    </svg>
+                  </div>
+                </span>
+                <span
+                  class="t-radio__label-wrap"
+                >
+                  <div
+                    class="t-radio__content-inner"
+                    style="display: -webkit-box; overflow: hidden; -webkit-line-clamp: 5;"
+                  >
+                    延庆区
+                  </div>
+                </span>
+              </span>
+              <div
+                class="t-radio__border t-radio__border--left"
+              />
+              <div />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`ssr snapshot test > ssr test src/back-top/_example/base.tsx 1`] = `"<div class="button-group"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->半圆形返回顶部</span></button></div>"`;
 
 exports[`ssr snapshot test > ssr test src/back-top/_example/index.tsx 1`] = `"<div class="tdesign-mobile-react-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">BackTop 返回顶部</h1><p class="tdesign-mobile-demo-header__summary">当页面过长往下滑动是会出现返回顶部的便捷操作，帮助用户快速回到页面顶部</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">形状</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="button-group"><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->圆形返回顶部</span></button><button type="button" class="t-button t-button--size-medium t-button--outline t-button--primary t-button--rectangle button"><span class="t-button__content"> <!-- -->半圆形返回顶部</span></button></div></div></div><div class="group"><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div><div class="item"><div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:165.5px;height:165.5px;border-radius:12px"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none"></div></div><div class="t-skeleton__row"><div class="t-skeleton__col t-skeleton--type-text t-skeleton--animation-none" style="width:100px"></div></div></div></div></div></div>"`;
@@ -45236,22 +47901,6 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Overlay 遮罩层</h1><p class="tdesign-mobile-demo-header__summary">通过遮罩层，可以强调部分内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件</h2><p class="tdesign-mobile-demo-block__summary">基础遮罩层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->基础用法</span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/popover/_example/base.tsx 1`] = `"<div class="demo-content"><a href="/mobile-react/overview" class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Link 链接</h1><p class="tdesign-mobile-demo-header__summary">当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a href="/mobile-react/overview" class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--hover"><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">下划线文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">前置图标文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">后置图标文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">不同主题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">禁用状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">链接尺寸</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--small t-link--primary"><span class="t-link__content">S跳转链接</span></a><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">M跳转链接</span></a><a class="t-link t-link--large t-link--primary"><span class="t-link__content">L跳转链接</span></a></div></div></div></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/linkSize.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--small t-link--primary"><span class="t-link__content">S跳转链接</span></a><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">M跳转链接</span></a><a class="t-link t-link--large t-link--primary"><span class="t-link__content">L跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/prefix.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/status.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/suffix.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/theme.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/underline.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
-
 exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"<div style="padding:0 16px"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->顶部弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->左侧弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->中间弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->底部弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `"<button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div>"`;
@@ -45373,3 +48022,11 @@ exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"<div cla
 exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `"<div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"<div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/base.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">TreeSelect 树形选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">多选树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">三级树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/multiple.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/normal.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index 8ed9b0f6..0aa0b895 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -234,22 +234,6 @@ exports[`ssr snapshot test > ssr test src/overlay/_example/base.tsx 1`] = `"<div
 
 exports[`ssr snapshot test > ssr test src/overlay/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Overlay 遮罩层</h1><p class="tdesign-mobile-demo-header__summary">通过遮罩层，可以强调部分内容</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件</h2><p class="tdesign-mobile-demo-block__summary">基础遮罩层</p></div><div class="tdesign-mobile-demo-block__slot with-padding"><div><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->基础用法</span></button></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/popover/_example/base.tsx 1`] = `"<div class="demo-content"><a href="/mobile-react/overview" class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Link 链接</h1><p class="tdesign-mobile-demo-header__summary">当功能使用图标即可表意清楚时，可使用纯图标悬浮按钮，例如：添加、发布。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a href="/mobile-react/overview" class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--hover"><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">下划线文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">前置图标文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">后置图标文字链接</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">不同主题</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">禁用状态</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">链接尺寸</p></div><div class="tdesign-mobile-demo-block__slot"><div class="demo-content"><a class="t-link t-link--small t-link--primary"><span class="t-link__content">S跳转链接</span></a><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">M跳转链接</span></a><a class="t-link t-link--large t-link--primary"><span class="t-link__content">L跳转链接</span></a></div></div></div></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/linkSize.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--small t-link--primary"><span class="t-link__content">S跳转链接</span></a><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">M跳转链接</span></a><a class="t-link t-link--large t-link--primary"><span class="t-link__content">L跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/prefix.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__prefix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-link"><path fill="currentColor" d="M13.3 3.96a4.77 4.77 0 116.74 6.75l-3.03 3.03-1.41-1.42 3.03-3.03a2.77 2.77 0 10-3.92-3.92L11.68 8.4 10.26 7l3.03-3.03zM15.4 10L10 15.41 8.58 14 14 8.59 15.4 10zm-7 1.68L5.36 14.7a2.77 2.77 0 103.92 3.92l3.03-3.03L13.74 17l-3.03 3.03a4.77 4.77 0 11-6.75-6.75l3.03-3.03 1.41 1.42z"></path></svg></span><span class="t-link__content">跳转链接</span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/status.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning t-link--disabled"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/suffix.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/theme.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--default"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--danger"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div><div class="demo-content"><a class="t-link t-link--medium t-link--success"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a><a class="t-link t-link--medium t-link--warning"><span class="t-link__content">跳转链接</span><span class="t-link__suffix-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-jump"><path fill="currentColor" d="M3 21V3h7.1v2H5v14h14v-5.1h2V21H3zm7.59-9l7-7H13V3h8v8h-2V6.41l-7 7L10.59 12z"></path></svg></span></a></div>"`;
-
-exports[`ssr snapshot test > ssr test src/popover/_example/underline.tsx 1`] = `"<div class="demo-content"><a class="t-link t-link--medium t-link--primary t-link--underline"><span class="t-link__content">跳转链接</span></a><a class="t-link t-link--medium t-link--default t-link--underline t-link--hover"><span class="t-link__content">跳转链接</span></a></div>"`;
-
 exports[`ssr snapshot test > ssr test src/popup/_example/base.tsx 1`] = `"<div style="padding:0 16px"><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->顶部弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->左侧弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->中间弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->底部弹出</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block" style="margin:16px 0"><span class="t-button__content"> <!-- -->右侧弹出</span></button><div class="t-popup t-popup--top" style="display:none;animation-fill-mode:forwards;padding:100px"></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/popup/_example/custom-close.tsx 1`] = `"<button type="button" class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"><span class="t-button__content"> <!-- -->居中弹出层-带自定义关闭按钮</span></button><div class="t-popup t-popup--center" style="display:none;animation-fill-mode:forwards;width:240px;height:240px"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-close-circle design-mobile-popup-demo__custom-close close-btn" style="font-size:32px" color="#fff"><path fill="currentColor" d="M12 21a9 9 0 100-18 9 9 0 000 18zm11-9a11 11 0 11-22 0 11 11 0 0122 0zM7.4 15.18L10.6 12 7.4 8.82 8.82 7.4 12 10.6l3.18-3.19 1.42 1.42L13.4 12l3.19 3.18-1.42 1.42L12 13.4 8.82 16.6 7.4 15.18z"></path></svg></div>"`;
@@ -371,3 +355,11 @@ exports[`ssr snapshot test > ssr test src/tag/_example/size.tsx 1`] = `"<div cla
 exports[`ssr snapshot test > ssr test src/tag/_example/theme.tsx 1`] = `"<div class="summary">展示型标签</div><div class="tag-demo"><div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--dark t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div><div class="tag-block"><span class="t-tag t-tag--default t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">默认</span></span><span class="t-tag t-tag--primary t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">主要</span></span><span class="t-tag t-tag--warning t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">警告</span></span><span class="t-tag t-tag--danger t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">危险</span></span><span class="t-tag t-tag--success t-tag--square t-tag--light-outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">成功</span></span></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/tag/_example/type.tsx 1`] = `"<div class="summary">基础标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">圆弧标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--round t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--round t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--mark t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__text">标签文字</span></span></div><div class="summary">带图标的标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span><span class="t-tag t-tag--default t-tag--square t-tag--outline t-tag--medium" aria-disabled="false" role="button"><span class="t-tag__icon"><svg class="t-icon t-icon-discount"><use xlink:href="#t-icon-discount"></use></svg></span><span class="t-tag__text">标签文字</span></span></div><div class="summary">超长文本省略标签</div><div class="tag-demo"><span class="t-tag t-tag--default t-tag--square t-tag--light t-tag--medium" style="max-width:130px" aria-disabled="false" role="button"><span class="t-tag__text">听说超长可以省略听说超长</span></span></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/base.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">TreeSelect 树形选择器</h1><p class="tdesign-mobile-demo-header__summary">用于多层级数据的逐级选择。</p></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">01 组件类型</h2><p class="tdesign-mobile-demo-block__summary">基础树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div><div class="tdesign-mobile-demo-block tdesign-mobile-demo-block_subtitle"><div class="tdesign-mobile-demo-block__header"><p class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle">多选树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div><div class="tdesign-mobile-demo-block"><div class="tdesign-mobile-demo-block__header"><h2 class="tdesign-mobile-demo-block__title">02 组件状态</h2><p class="tdesign-mobile-demo-block__summary">三级树形选择</p></div><div class="tdesign-mobile-demo-block__slot"><div class="t-tree-select" style="height:336px"></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/multiple.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;
+
+exports[`ssr snapshot test > ssr test src/tree-select/_example/normal.tsx 1`] = `"<div class="t-tree-select" style="height:336px"></div>"`;

From 06446bf323181b7b1b8b4ae8906625b1a179a147 Mon Sep 17 00:00:00 2001
From: epoll-j <epoll@foxmail.com>
Date: Wed, 18 Sep 2024 18:59:13 +0800
Subject: [PATCH 6/6] =?UTF-8?q?perf(tree-select):=20=E7=A7=BB=E9=99=A4?=
 =?UTF-8?q?=E5=A4=9A=E4=BD=99=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/tree-select/tree-select.tsx | 8 +-------
 1 file changed, 1 insertion(+), 7 deletions(-)

diff --git a/src/tree-select/tree-select.tsx b/src/tree-select/tree-select.tsx
index f5da72e5..d239f299 100644
--- a/src/tree-select/tree-select.tsx
+++ b/src/tree-select/tree-select.tsx
@@ -128,7 +128,6 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
           {treeOption.map((item) => (
             <Checkbox
               key={item.value}
-              className={`${treeSelectClass}__checkbox-item`}
               value={item.value}
               maxLabelRow={1}
               icon="line"
@@ -143,15 +142,10 @@ const TreeSelect: FC<TreeSelectProps> = (props) => {
     }
     return (
       <>
-        <RadioGroup
-          value={innerValue[level]}
-          className={`${treeSelectClass}__radio`}
-          onChange={(val) => onRootChange(level as TreeLevel, val)}
-        >
+        <RadioGroup value={innerValue[level]} onChange={(val) => onRootChange(level as TreeLevel, val)}>
           {treeOption.map((item) => (
             <Radio
               key={item.value}
-              className={`${treeSelectClass}__radio-item`}
               value={item.value}
               icon="line"
               maxLabelRow={1}