From c7846367017237350575932eb3f05c0e7c80c1f3 Mon Sep 17 00:00:00 2001
From: slatejack <slatexu@gmail.com>
Date: Fri, 18 Oct 2024 15:57:39 +0800
Subject: [PATCH 1/3] feat(avatar): update avatar style to v2, alignment vue
 mobile

feat #536
---
 src/avatar/Avatar.tsx             | 144 ++++++++++++++----------------
 src/avatar/AvatarGroup.tsx        |  95 +++++++++-----------
 src/avatar/AvatarGroupContext.tsx |   9 +-
 src/avatar/avatar-group.en-US.md  |  17 ++++
 src/avatar/avatar-group.md        |  17 ++++
 src/avatar/avatar.en-US.md        |  34 +++++++
 src/avatar/avatar.md              |  24 +++--
 src/avatar/defaultProps.ts        |   9 ++
 src/avatar/hooks/useSizeHooks.ts  |  21 -----
 src/avatar/style/index.js         |   2 +-
 src/avatar/type.ts                |  37 +++++---
 11 files changed, 235 insertions(+), 174 deletions(-)
 create mode 100644 src/avatar/avatar-group.en-US.md
 create mode 100644 src/avatar/avatar-group.md
 create mode 100644 src/avatar/avatar.en-US.md
 create mode 100644 src/avatar/defaultProps.ts
 delete mode 100644 src/avatar/hooks/useSizeHooks.ts

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index 1760bde0..b7eb2831 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -1,89 +1,83 @@
-import React, { useContext, useMemo, Ref, useState } from 'react';
+import type { FC } from 'react';
+import React, { useContext } from 'react';
 import cls from 'classnames';
-import type { TdAvatarProps } from './type';
-import Badge from '../badge/index';
-import { StyledProps } from '../common';
-import { ConfigContext } from '../config-provider';
-import useSizeHook from './hooks/useSizeHooks';
-import AvatarGroup from './AvatarGroup';
-import forwardRefWithStatics from '../_util/forwardRefWithStatics';
+import Image from 'tdesign-mobile-react/image';
+import Badge from 'tdesign-mobile-react/badge';
 import { AvatarGroupContext } from './AvatarGroupContext';
+import { isValidSize } from '../_common/js/avatar/utils';
+import parseTNode from '../_util/parseTNode';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import { avatarDefaultProps } from './defaultProps';
+import type { TdAvatarProps } from './type';
+import type { StyledProps } from '../common';
 
-export interface AvatarProps extends TdAvatarProps, StyledProps {
-  children?: React.ReactNode;
-}
+export interface AvatarProps extends TdAvatarProps, StyledProps {}
 
-const Avatar = forwardRefWithStatics(
-  (props: AvatarProps, ref: Ref<HTMLDivElement>) => {
-    const {
-      size = '',
-      shape = 'circle',
-      icon,
-      children,
-      hideOnLoadFailed = false,
-      image = '',
-      badgeProps,
-      alt = '',
-      onError,
-      className,
-      ...restProps
-    } = props;
-    const { size: avatarGroupSize } = useContext(AvatarGroupContext) || {};
-    const sizeCls = useSizeHook(size || avatarGroupSize);
-    const [sizeValue] = useState(size || avatarGroupSize);
-    const { classPrefix } = useContext(ConfigContext);
-    const baseAvatarCls = `${classPrefix}-avatar`;
+const Avatar: FC<AvatarProps> = (props) => {
+  const {
+    size = '',
+    shape = 'circle',
+    icon,
+    children,
+    hideOnLoadFailed = false,
+    image = '',
+    badgeProps,
+    alt = '',
+    imageProps,
+    onError,
+  } = useDefaultProps(props, avatarDefaultProps);
+  const avatarGroupProps = useContext(AvatarGroupContext) || {};
+  const rootClassName = usePrefixClass('avatar');
 
-    const isIconOnly = icon && !children;
+  const { size: avatarGroupSize, shape: avatarGroupShape } = avatarGroupProps;
+  const hasAvatarGroupProps = Object.keys(avatarGroupProps).length > 0;
+  const shapeValue = shape || avatarGroupShape || 'circle';
+  const sizeValue = size || avatarGroupSize;
+  const isCustomSize = !isValidSize(sizeValue);
 
-    const avatarCls = cls(
-      baseAvatarCls,
-      {
-        [sizeCls]: true,
-        [`${baseAvatarCls}--${shape}`]: shape,
-      },
-      className,
-    );
+  const avatarClasses = cls(
+    rootClassName,
+    `${rootClassName}-${isCustomSize ? 'medium' : sizeValue}`,
+    `${rootClassName}-${shapeValue}`,
+    {
+      [`${rootClassName}--border ${rootClassName}--border-${isCustomSize ? 'medium' : sizeValue}`]: hasAvatarGroupProps,
+    },
+  );
 
-    // size 没有命中原有 size 规则且 size 仍有值， 推断为 size 值
-    const customSize = useMemo(() => {
-      if (sizeCls === '' && sizeValue) {
-        return {
-          width: sizeValue,
-          height: sizeValue,
-        };
+  const customSize = isCustomSize
+    ? {
+        height: sizeValue,
+        width: sizeValue,
+        'font-size': `${(Number.parseInt(sizeValue, 10) / 8) * 3 + 2}px`,
       }
-      return {};
-    }, [sizeCls, sizeValue]);
+    : {};
 
-    const iconCls = `${baseAvatarCls}__icon`;
-    const badgeCls = `${baseAvatarCls}__badge`;
-    const innerCls = `${baseAvatarCls}__inner`;
+  const handleImgLoaderError = (context: any) => {
+    onError?.(context);
+  };
 
-    const renderIcon = <div className={iconCls}>{icon}</div>;
-    const renderImage = <img style={customSize} alt={alt} src={image} onError={onError}></img>;
-    const renderContent = <>{children}</>;
-    const renderBadge = <Badge {...badgeProps}></Badge>;
+  const renderAvatar = () => {
+    if (image && !hideOnLoadFailed) {
+      return <Image src={image} alt={alt} {...imageProps} onError={handleImgLoaderError} />;
+    }
+    if (icon) {
+      return <div className={`${rootClassName}__icon`}>{icon}</div>;
+    }
+    return parseTNode(children);
+  };
 
-    const isShowImage = image && !hideOnLoadFailed;
-    const isShowBadge = !!badgeProps;
-
-    return (
-      <div ref={ref} className={avatarCls} style={customSize} {...restProps}>
-        <div className={innerCls}>
-          {isShowImage && renderImage}
-          {!isShowImage && isIconOnly && renderIcon}
-          {!isShowImage && !isIconOnly && renderContent}
-        </div>
-        {isShowBadge && <div className={badgeCls}>{renderBadge}</div>}
+  return (
+    <div className={`${rootClassName}__wrapper`}>
+      <div className={`${rootClassName}__badge`}>
+        <Badge {...badgeProps}>
+          <div className={avatarClasses} style={customSize}>
+            {renderAvatar()}
+          </div>
+        </Badge>
       </div>
-    );
-  },
-  {
-    Group: AvatarGroup,
-  },
-);
-
-Avatar.displayName = 'Avatar';
+    </div>
+  );
+};
 
 export default Avatar;
diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
index 396dda47..d934bfcd 100644
--- a/src/avatar/AvatarGroup.tsx
+++ b/src/avatar/AvatarGroup.tsx
@@ -1,10 +1,15 @@
-import React, { forwardRef, Ref, useContext, useEffect, useMemo, useState } from 'react';
+import type { MouseEvent } from 'react';
+import React from 'react';
 import cls from 'classnames';
-import { ShapeEnum, TdAvatarGroupProps } from './type';
-import { StyledProps } from '../common';
-import { ConfigContext } from '../config-provider';
 import Avatar from './Avatar';
 import { AvatarGroupContextProvider } from './AvatarGroupContext';
+import parseTNode from '../_util/parseTNode';
+import { isValidSize } from '../_common/js/avatar/utils';
+import useDefaultProps from '../hooks/useDefaultProps';
+import { usePrefixClass } from '../hooks/useClass';
+import { avatarGroupDefaultProps } from './defaultProps';
+import type { TdAvatarGroupProps } from './type';
+import type { StyledProps } from '../common';
 
 export interface AvatarGroupProps extends TdAvatarGroupProps, StyledProps {
   children?: React.ReactNode;
@@ -14,67 +19,51 @@ function getValidChildren(children: React.ReactNode) {
   return React.Children.toArray(children).filter((child) => React.isValidElement(child)) as React.ReactElement[];
 }
 
-const AvatarGroup = forwardRef((props: AvatarGroupProps, ref: Ref<HTMLDivElement>) => {
-  const { cascading, children, max, collapseAvatar, size, className, ...restProps } = props;
-  const { classPrefix } = useContext(ConfigContext);
-  const [isShowEllipsisContent, setIsShowEllipsisContent] = useState(false);
-  const [lastOneShape, setLastOneShape] = useState<ShapeEnum>('circle');
-
-  const baseAvatarGroupCls = `${classPrefix}-avatar-group`;
-
-  const avatarGroupCls = cls(
-    baseAvatarGroupCls,
-    {
-      [`${classPrefix}-avatar--offset-right`]: cascading === 'right-up',
-      [`${classPrefix}-avatar--offset-left`]: cascading === 'left-up',
-    },
-    className,
+const AvatarGroup = (props: AvatarGroupProps) => {
+  const { cascading, children, size, shape, max, collapseAvatar, onCollapsedItemClick } = useDefaultProps(
+    props,
+    avatarGroupDefaultProps,
   );
+  const rootClassName = usePrefixClass('avatar-group');
 
-  const validChildren = getValidChildren(children);
-  const childrenCount = validChildren.length;
-  const childrenWithinMax = max ? validChildren.slice(0, max) : validChildren;
+  const direction = cascading ? cascading.split('-')[0] : 'right';
+  const isCustomSize = !isValidSize(size);
 
-  const renderCollapseAvatar = useMemo(() => {
-    const popupNum = `+${childrenCount - max}`;
-    return collapseAvatar || popupNum;
-  }, [collapseAvatar, max, childrenCount]);
-
-  const ellipsisSize = useMemo(
-    () => childrenWithinMax[childrenWithinMax.length - 1]?.props.size || props.size,
-    [childrenWithinMax, props.size],
+  const avatarGroupClasses = cls(
+    rootClassName,
+    `${rootClassName}-offset-${direction}`,
+    `${rootClassName}-offset-${direction}-${isCustomSize ? 'medium' : size}`,
   );
 
-  useEffect(() => {
-    if (max && childrenCount > max) {
-      setIsShowEllipsisContent(true);
-    } else {
-      setIsShowEllipsisContent(false);
-    }
-  }, [max, childrenCount]);
+  const handleCollapsedItemClick = (e: MouseEvent<HTMLSpanElement>) => {
+    onCollapsedItemClick?.({ e });
+  };
 
-  useEffect(() => {
-    if (
-      childrenWithinMax.length > 0 &&
-      childrenWithinMax?.[childrenWithinMax.length - 1]?.props?.shape !== lastOneShape
-    ) {
-      setLastOneShape(childrenWithinMax[childrenWithinMax.length - 1].props.shape);
+  const renderAvatar = () => {
+    const validChildren = getValidChildren(children);
+    if (validChildren.length <= max) {
+      return validChildren;
     }
-  }, [childrenWithinMax, lastOneShape]);
+    const showAvatarList = validChildren.slice(0, max);
+    const renderCollapseAvatar = () => parseTNode(collapseAvatar);
+    showAvatarList.push(
+      <div className={`${rootClassName}__collapse--default`} onClick={handleCollapsedItemClick}>
+        <Avatar size={showAvatarList[0].props.size || size} shape={shape}>
+          {renderCollapseAvatar() || `+${validChildren.length - max}`}
+        </Avatar>
+      </div>,
+    );
+    return showAvatarList;
+  };
 
   return (
-    <div className={avatarGroupCls} ref={ref} {...restProps}>
-      <AvatarGroupContextProvider size={size}>
-        {childrenWithinMax}
-        {isShowEllipsisContent ? (
-          <Avatar shape={lastOneShape} size={ellipsisSize}>
-            {renderCollapseAvatar}
-          </Avatar>
-        ) : null}
+    <div className={avatarGroupClasses}>
+      <AvatarGroupContextProvider size={size} shape={shape}>
+        {renderAvatar()}
       </AvatarGroupContextProvider>
     </div>
   );
-});
+};
 
 AvatarGroup.displayName = 'AvatarGroup';
 
diff --git a/src/avatar/AvatarGroupContext.tsx b/src/avatar/AvatarGroupContext.tsx
index 076a94da..e1d00f6b 100644
--- a/src/avatar/AvatarGroupContext.tsx
+++ b/src/avatar/AvatarGroupContext.tsx
@@ -3,12 +3,13 @@ import type { AvatarGroupProps } from './AvatarGroup';
 
 export const AvatarGroupContext = React.createContext(null);
 
-export function AvatarGroupContextProvider(props: Pick<AvatarGroupProps, 'size' | 'children'>) {
-  const memoSize = useMemo(
+export function AvatarGroupContextProvider(props: Pick<AvatarGroupProps, 'size' | 'children' | 'shape'>) {
+  const memoInfo = useMemo(
     () => ({
       size: props.size,
+      shape: props.shape,
     }),
-    [props.size],
+    [props.size, props.shape],
   );
-  return <AvatarGroupContext.Provider value={memoSize}>{props.children}</AvatarGroupContext.Provider>;
+  return <AvatarGroupContext.Provider value={memoInfo}>{props.children}</AvatarGroupContext.Provider>;
 }
diff --git a/src/avatar/avatar-group.en-US.md b/src/avatar/avatar-group.en-US.md
new file mode 100644
index 00000000..9cfde397
--- /dev/null
+++ b/src/avatar/avatar-group.en-US.md
@@ -0,0 +1,17 @@
+:: BASE_DOC ::
+
+## API
+
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+cascading | String | 'right-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+max | Number | - | \- | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | size | N
+onCollapsedItemClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
diff --git a/src/avatar/avatar-group.md b/src/avatar/avatar-group.md
new file mode 100644
index 00000000..2ead60d7
--- /dev/null
+++ b/src/avatar/avatar-group.md
@@ -0,0 +1,17 @@
+:: BASE_DOC ::
+
+## API
+
+
+### AvatarGroup Props
+
+名称 | 类型 | 默认值 | 描述 | 必传
+-- | -- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+max | Number | - | 能够同时显示的最多头像数量 | N
+shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+onCollapsedItemClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击头像折叠元素触发 | N
diff --git a/src/avatar/avatar.en-US.md b/src/avatar/avatar.en-US.md
new file mode 100644
index 00000000..3b388d26
--- /dev/null
+++ b/src/avatar/avatar.en-US.md
@@ -0,0 +1,34 @@
+:: BASE_DOC ::
+
+## API
+
+### Avatar Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+alt | String | - | show it when url is not valid | N
+badgeProps | Object | - | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+children | TNode | - | children, same as `content`。Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+hideOnLoadFailed | Boolean | false | hide image when loading image failed | N
+icon | TElement | - | use icon to fill。Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+image | String | - | images url | N
+imageProps | Object | - | Typescript：`ImageProps`，[Image API Documents](./image?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | size | N
+onError | Function |  | Typescript：`(context: { e: Event }) => void`<br/>trigger on image load failed | N
+
+
+### AvatarGroup Props
+
+name | type | default | description | required
+-- | -- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+cascading | String | 'right-up' | multiple images cascading。options: left-up/right-up。Typescript：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+max | Number | - | \- | N
+shape | String | - | shape。options: circle/round。Typescript：`ShapeEnum`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | size | N
+onCollapsedItemClick | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
diff --git a/src/avatar/avatar.md b/src/avatar/avatar.md
index 517f7484..f9eb5a7e 100644
--- a/src/avatar/avatar.md
+++ b/src/avatar/avatar.md
@@ -1,28 +1,34 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Avatar Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
 alt | String | - | 头像替换文本，仅当图片加载失败时有效 | N
-badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`TdBadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+badgeProps | Object | - | 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+children | TNode | - | 子元素内容，同 content。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 hideOnLoadFailed | Boolean | false | 加载失败时隐藏图片 | N
 icon | TElement | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 image | String | - | 图片地址 | N
-shape | String | circle | 形状。可选项：circle/round。TS 类型：`ShapeEnum ` `type ShapeEnum = 'circle' | 'round'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
-size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large | N
-onError | Function |  | TS 类型：`() => void`<br/>图片加载失败时触发 | N
+imageProps | Object | - | 透传至 Image 组件。TS 类型：`ImageProps`，[Image API Documents](./image?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+shape | String | - | 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定 | N
+onError | Function |  | TS 类型：`(context: { e: Event }) => void`<br/>图片加载失败时触发 | N
+
 
 ### AvatarGroup Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 className | String | - | 类名 | N
 style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' | 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
-collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string | TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+cascading | String | 'right-up' | 图片之间的层叠关系，可选值：左侧图片在上和右侧图片在上。可选项：left-up/right-up。TS 类型：`CascadingValue` `type CascadingValue = 'left-up' \| 'right-up'`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/avatar/type.ts) | N
+collapseAvatar | TNode | - | 头像数量超出时，会出现一个头像折叠元素。该元素内容可自定义。默认为 `+N`。示例：`+5`，`...`, `更多`。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 max | Number | - | 能够同时显示的最多头像数量 | N
-size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+shape | String | - | 形状。优先级低于 Avatar.shape。可选项：circle/round。TS 类型：`ShapeEnum`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
+size | String | - | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+onCollapsedItemClick | Function |  | TS 类型：`(context: { e: MouseEvent }) => void`<br/>点击头像折叠元素触发 | N
diff --git a/src/avatar/defaultProps.ts b/src/avatar/defaultProps.ts
new file mode 100644
index 00000000..895eeb21
--- /dev/null
+++ b/src/avatar/defaultProps.ts
@@ -0,0 +1,9 @@
+/**
+ * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
+ * */
+
+import { TdAvatarProps, TdAvatarGroupProps } from './type';
+
+export const avatarDefaultProps: TdAvatarProps = { hideOnLoadFailed: false };
+
+export const avatarGroupDefaultProps: TdAvatarGroupProps = { cascading: 'right-up' };
diff --git a/src/avatar/hooks/useSizeHooks.ts b/src/avatar/hooks/useSizeHooks.ts
deleted file mode 100644
index 2b7f3e45..00000000
--- a/src/avatar/hooks/useSizeHooks.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { useContext, useMemo } from 'react';
-import { ConfigContext } from '../../config-provider';
-
-export const SIZE_CLASSNAMES = {
-  small: `-size-s`,
-  medium: `-size-m`,
-  large: `-size-l`,
-  default: '',
-  xs: `-size-xs`,
-  xl: `-size-xl`,
-  block: `-size-full-width`,
-};
-
-export type sizeType = 'small' | 'medium' | 'large' | 'xs' | 'xl' | 'block' | 'default';
-
-function useSizeHook(size: sizeType) {
-  const { classPrefix } = useContext(ConfigContext);
-  return useMemo(() => (SIZE_CLASSNAMES[size] ? `${classPrefix}${SIZE_CLASSNAMES[size]}` : ''), [size, classPrefix]);
-}
-
-export default useSizeHook;
diff --git a/src/avatar/style/index.js b/src/avatar/style/index.js
index d6491de5..fc4ae653 100644
--- a/src/avatar/style/index.js
+++ b/src/avatar/style/index.js
@@ -1 +1 @@
-import '../../_common/style/mobile/components/avatar/_index.less';
+import '../../_common/style/mobile/components/avatar/v2/_index.less';
diff --git a/src/avatar/type.ts b/src/avatar/type.ts
index 70661f28..2dd79047 100644
--- a/src/avatar/type.ts
+++ b/src/avatar/type.ts
@@ -4,8 +4,10 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TdBadgeProps } from '../badge';
-import { TNode, TElement } from '../common';
+import { BadgeProps } from '../badge';
+import { ImageProps } from '../image';
+import { TNode, TElement, ShapeEnum } from '../common';
+import { MouseEvent } from 'react';
 
 export interface TdAvatarProps {
   /**
@@ -16,7 +18,11 @@ export interface TdAvatarProps {
   /**
    * 头像右上角提示信息，继承 Badge 组件的全部特性。如：小红点，或者数字
    */
-  badgeProps?: TdBadgeProps;
+  badgeProps?: BadgeProps;
+  /**
+   * 子元素内容，同 content
+   */
+  children?: TNode;
   /**
    * 加载失败时隐藏图片
    * @default false
@@ -32,19 +38,22 @@ export interface TdAvatarProps {
    */
   image?: string;
   /**
-   * 形状
-   * @default circle
+   * 透传至 Image 组件
    */
-  shape?: ShapeEnum ;
+  imageProps?: ImageProps;
   /**
-   * 尺寸，示例值：small/medium/large/24px/38px 等，默认为 large
+   * 形状。优先级高于 AvatarGroup.shape 。Avatar 单独存在时，默认值为 circle。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.shape 决定
+   */
+  shape?: ShapeEnum;
+  /**
+   * 尺寸，示例值：small/medium/large/24px/38px 等。优先级高于 AvatarGroup.size 。Avatar 单独存在时，默认值为 medium。如果父组件 AvatarGroup 存在，默认值便由 AvatarGroup.size 决定
    * @default ''
    */
   size?: string;
   /**
    * 图片加载失败时触发
    */
-  onError?: () => void;
+  onError?: (context: { e: Event }) => void;
 }
 
 export interface TdAvatarGroupProps {
@@ -61,13 +70,19 @@ export interface TdAvatarGroupProps {
    * 能够同时显示的最多头像数量
    */
   max?: number;
+  /**
+   * 形状。优先级低于 Avatar.shape
+   */
+  shape?: ShapeEnum;
   /**
    * 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size
-   * @default medium
+   * @default ''
    */
   size?: string;
+  /**
+   * 点击头像折叠元素触发
+   */
+  onCollapsedItemClick?: (context: { e: MouseEvent<HTMLSpanElement> }) => void;
 }
 
-export type ShapeEnum = 'circle' | 'round';
-
 export type CascadingValue = 'left-up' | 'right-up';

From 74999a9cc16ed903f9e4f5598afd87b8113124ab Mon Sep 17 00:00:00 2001
From: slatejack <slatexu@gmail.com>
Date: Fri, 18 Oct 2024 17:29:11 +0800
Subject: [PATCH 2/3] fix(avatar): fix avatar container style

---
 src/avatar/Avatar.tsx | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
index b7eb2831..4ff967d0 100644
--- a/src/avatar/Avatar.tsx
+++ b/src/avatar/Avatar.tsx
@@ -16,6 +16,7 @@ export interface AvatarProps extends TdAvatarProps, StyledProps {}
 
 const Avatar: FC<AvatarProps> = (props) => {
   const {
+    className,
     size = '',
     shape = 'circle',
     icon,
@@ -38,12 +39,13 @@ const Avatar: FC<AvatarProps> = (props) => {
 
   const avatarClasses = cls(
     rootClassName,
-    `${rootClassName}-${isCustomSize ? 'medium' : sizeValue}`,
-    `${rootClassName}-${shapeValue}`,
+    `${rootClassName}--${isCustomSize ? 'medium' : sizeValue}`,
+    `${rootClassName}--${shapeValue}`,
     {
       [`${rootClassName}--border ${rootClassName}--border-${isCustomSize ? 'medium' : sizeValue}`]: hasAvatarGroupProps,
     },
   );
+  const containerClassName = cls(`${rootClassName}__wrapper`, className);
 
   const customSize = isCustomSize
     ? {
@@ -68,7 +70,7 @@ const Avatar: FC<AvatarProps> = (props) => {
   };
 
   return (
-    <div className={`${rootClassName}__wrapper`}>
+    <div className={containerClassName}>
       <div className={`${rootClassName}__badge`}>
         <Badge {...badgeProps}>
           <div className={avatarClasses} style={customSize}>

From 80dfbe0c25a79796667dadf5f3d5d9288d39d0a4 Mon Sep 17 00:00:00 2001
From: slatejack <slatexu@gmail.com>
Date: Fri, 18 Oct 2024 17:43:04 +0800
Subject: [PATCH 3/3] feat(avatar): update avatar demo to style v2, alignment
 vue mobile

---
 site/mobile/mobile.config.js              |    2 +-
 src/avatar/AvatarGroup.tsx                |    6 +-
 src/avatar/_example/action.jsx            |   54 -
 src/avatar/_example/action.tsx            |   27 +
 src/avatar/_example/adjust.jsx            |   14 -
 src/avatar/_example/badgeAvatar.tsx       |   22 +
 src/avatar/_example/characterAvatar.tsx   |   15 +
 src/avatar/_example/exhibition.jsx        |   43 -
 src/avatar/_example/exhibition.tsx        |   26 +
 src/avatar/_example/iconAvatar.tsx        |   12 +
 src/avatar/_example/imageAvatar.tsx       |   11 +
 src/avatar/_example/index.jsx             |   30 -
 src/avatar/_example/index.tsx             |   40 +
 src/avatar/_example/shape.jsx             |   19 -
 src/avatar/_example/size.jsx              |   72 -
 src/avatar/_example/size.tsx              |   49 +
 src/avatar/_example/style/index.less      |   34 +-
 src/avatar/_example/type.jsx              |   19 -
 test/snap/__snapshots__/csr.test.jsx.snap | 3206 ++++++++++++++++++++-
 test/snap/__snapshots__/ssr.test.jsx.snap |   24 +-
 20 files changed, 3357 insertions(+), 368 deletions(-)
 delete mode 100644 src/avatar/_example/action.jsx
 create mode 100644 src/avatar/_example/action.tsx
 delete mode 100644 src/avatar/_example/adjust.jsx
 create mode 100644 src/avatar/_example/badgeAvatar.tsx
 create mode 100644 src/avatar/_example/characterAvatar.tsx
 delete mode 100644 src/avatar/_example/exhibition.jsx
 create mode 100644 src/avatar/_example/exhibition.tsx
 create mode 100644 src/avatar/_example/iconAvatar.tsx
 create mode 100644 src/avatar/_example/imageAvatar.tsx
 delete mode 100644 src/avatar/_example/index.jsx
 create mode 100644 src/avatar/_example/index.tsx
 delete mode 100644 src/avatar/_example/shape.jsx
 delete mode 100644 src/avatar/_example/size.jsx
 create mode 100644 src/avatar/_example/size.tsx
 delete mode 100644 src/avatar/_example/type.jsx

diff --git a/site/mobile/mobile.config.js b/site/mobile/mobile.config.js
index e40f14b5..a1afe2c0 100644
--- a/site/mobile/mobile.config.js
+++ b/site/mobile/mobile.config.js
@@ -215,7 +215,7 @@ export default {
     {
       title: 'Avatar 头像',
       name: 'avatar',
-      component: () => import('tdesign-mobile-react/avatar/_example/index.jsx'),
+      component: () => import('tdesign-mobile-react/avatar/_example/index.tsx'),
     },
     {
       title: 'Indexes 索引',
diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
index d934bfcd..6cdf05d0 100644
--- a/src/avatar/AvatarGroup.tsx
+++ b/src/avatar/AvatarGroup.tsx
@@ -47,7 +47,11 @@ const AvatarGroup = (props: AvatarGroupProps) => {
     const showAvatarList = validChildren.slice(0, max);
     const renderCollapseAvatar = () => parseTNode(collapseAvatar);
     showAvatarList.push(
-      <div className={`${rootClassName}__collapse--default`} onClick={handleCollapsedItemClick}>
+      <div
+        key="avatar-group-extension"
+        className={`${rootClassName}__collapse--default`}
+        onClick={handleCollapsedItemClick}
+      >
         <Avatar size={showAvatarList[0].props.size || size} shape={shape}>
           {renderCollapseAvatar() || `+${validChildren.length - max}`}
         </Avatar>
diff --git a/src/avatar/_example/action.jsx b/src/avatar/_example/action.jsx
deleted file mode 100644
index 43a0bcff..00000000
--- a/src/avatar/_example/action.jsx
+++ /dev/null
@@ -1,54 +0,0 @@
-import React from 'react';
-import { Avatar } from 'tdesign-mobile-react';
-import { UserAddIcon } from 'tdesign-icons-react';
-
-const imageList = [
-  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-];
-
-export default function AvatarTypeDemo() {
-  return (
-    <>
-      <div className="avatar-group-demo">
-        <Avatar.Group
-          cascading="left-up"
-          max={5}
-          size="small"
-          collapseAvatar={<UserAddIcon style={{ fontSize: '16px' }} />}
-        >
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-      <div className="avatar-group-demo">
-        <Avatar.Group
-          cascading="left-up"
-          max={5}
-          size="40px"
-          collapseAvatar={<UserAddIcon style={{ fontSize: '20px' }} />}
-        >
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-      <div className="avatar-group-demo">
-        <Avatar.Group cascading="left-up" max={5} collapseAvatar={<UserAddIcon style={{ fontSize: '24px' }} />}>
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-    </>
-  );
-}
diff --git a/src/avatar/_example/action.tsx b/src/avatar/_example/action.tsx
new file mode 100644
index 00000000..bf9e3e9b
--- /dev/null
+++ b/src/avatar/_example/action.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import { Avatar, AvatarGroup } from 'tdesign-mobile-react';
+import { UserAddIcon } from 'tdesign-icons-react';
+
+export default function ActionAvatar() {
+  const imageList = [
+    'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+  ];
+  return (
+    <div className="avatar-group-demo">
+      <AvatarGroup max={5} collapseAvatar={<UserAddIcon style={{ fontSize: '24px' }} />}>
+        {imageList.map((url, index) => (
+          <Avatar key={`action-${index}`} shape="circle" image={url} />
+        ))}
+      </AvatarGroup>
+    </div>
+  );
+}
diff --git a/src/avatar/_example/adjust.jsx b/src/avatar/_example/adjust.jsx
deleted file mode 100644
index 7b82feac..00000000
--- a/src/avatar/_example/adjust.jsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import React from 'react';
-import { Avatar } from 'tdesign-mobile-react';
-
-export default function AvatarAdjustDemo() {
-  return (
-    <div className="tdesign-demo-block">
-      <div className="tdesign-demo-avatar">
-        <Avatar>陈</Avatar>
-        <Avatar>陈晚</Avatar>
-        <Avatar>陈晚晚</Avatar>
-      </div>
-    </div>
-  );
-}
diff --git a/src/avatar/_example/badgeAvatar.tsx b/src/avatar/_example/badgeAvatar.tsx
new file mode 100644
index 00000000..e67a3cd3
--- /dev/null
+++ b/src/avatar/_example/badgeAvatar.tsx
@@ -0,0 +1,22 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function BadgeAvatar() {
+  return (
+    <div className="avatar-demo">
+      <Avatar
+        className="avatar-example"
+        image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+        badgeProps={{
+          dot: true,
+          offset: [4, 4],
+        }}
+      />
+      <Avatar className="avatar-example external-class-content" badgeProps={{ count: 8, offset: [6, 6] }}>
+        A
+      </Avatar>
+      <Avatar className="avatar-example" icon={<UserIcon />} badgeProps={{ count: 12, offset: [6, 6] }} />
+    </div>
+  );
+}
diff --git a/src/avatar/_example/characterAvatar.tsx b/src/avatar/_example/characterAvatar.tsx
new file mode 100644
index 00000000..92ab753a
--- /dev/null
+++ b/src/avatar/_example/characterAvatar.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+
+export default function CharacterAvatar() {
+  return (
+    <div className="avatar-demo">
+      <Avatar className="avatar-example external-class-content" aria-label="字符头像">
+        A
+      </Avatar>
+      <Avatar className="avatar-example external-class-content" shape="round">
+        A
+      </Avatar>
+    </div>
+  );
+}
diff --git a/src/avatar/_example/exhibition.jsx b/src/avatar/_example/exhibition.jsx
deleted file mode 100644
index fd748a5a..00000000
--- a/src/avatar/_example/exhibition.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import React from 'react';
-import { Avatar } from 'tdesign-mobile-react';
-
-const imageList = [
-  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_1.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_2.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_3.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_4.png',
-  'https://tdesign.gtimg.com/mobile/demos/avatar_5.png',
-];
-
-export default function AvatarTypeDemo() {
-  return (
-    <>
-      <div className="avatar-group-demo">
-        <Avatar.Group cascading="right-up" max={5} size="small">
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-      <div className="avatar-group-demo">
-        <Avatar.Group cascading="right-up" max={5} size="medium">
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-      <div className="avatar-group-demo">
-        <Avatar.Group cascading="right-up" max={5} size="large">
-          {imageList.map((url, idx) => (
-            <Avatar key={idx} shape="circle" image={url} />
-          ))}
-        </Avatar.Group>
-      </div>
-    </>
-  );
-}
diff --git a/src/avatar/_example/exhibition.tsx b/src/avatar/_example/exhibition.tsx
new file mode 100644
index 00000000..630a5c68
--- /dev/null
+++ b/src/avatar/_example/exhibition.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Avatar, AvatarGroup } from 'tdesign-mobile-react';
+
+export default function ExhibitionAvatar() {
+  const imageList = [
+    'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar1.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar2.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar3.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar4.png',
+    'https://tdesign.gtimg.com/mobile/demos/avatar5.png',
+  ];
+  return (
+    <div className="avatar-group-demo">
+      <AvatarGroup cascading="left-up" max={5}>
+        {imageList.map((url, index) => (
+          <Avatar key={`exhibition-${index}`} shape="circle" image={url} />
+        ))}
+      </AvatarGroup>
+    </div>
+  );
+}
diff --git a/src/avatar/_example/iconAvatar.tsx b/src/avatar/_example/iconAvatar.tsx
new file mode 100644
index 00000000..5bdd2c79
--- /dev/null
+++ b/src/avatar/_example/iconAvatar.tsx
@@ -0,0 +1,12 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function IconAvatar() {
+  return (
+    <div className="avatar-demo">
+      <Avatar className="avatar-example" icon={<UserIcon />} />
+      <Avatar className="avatar-example" shape="round" icon={<UserIcon />} />
+    </div>
+  );
+}
diff --git a/src/avatar/_example/imageAvatar.tsx b/src/avatar/_example/imageAvatar.tsx
new file mode 100644
index 00000000..c6fa699d
--- /dev/null
+++ b/src/avatar/_example/imageAvatar.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+
+export default function ImageAvatar() {
+  return (
+    <div className="avatar-demo">
+      <Avatar className="avatar-example" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" />
+      <Avatar className="avatar-example" image="https://tdesign.gtimg.com/mobile/demos/avatar1.png" shape="round" />
+    </div>
+  );
+}
diff --git a/src/avatar/_example/index.jsx b/src/avatar/_example/index.jsx
deleted file mode 100644
index e65b2cb1..00000000
--- a/src/avatar/_example/index.jsx
+++ /dev/null
@@ -1,30 +0,0 @@
-import React from 'react';
-import TDemoHeader from '../../../site/mobile/components/DemoHeader';
-import TDemoBlock from '../../../site/mobile/components/DemoBlock';
-import ShapeDemo from './shape';
-import ExhibitionDemo from './exhibition';
-import ActionDemo from './action';
-import SizeDemo from './size';
-import './style/index.less';
-
-export default function () {
-  return (
-    <div className="tdesign-mobile-demo">
-      <TDemoHeader title="Avatar 头像" summary="用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。" />
-      <TDemoBlock title="01 头像类型" summary="头像样式可为默认头像、微信头像圆形、方形、自定义文字">
-        <div className="avatar-demo">
-          <ShapeDemo />
-        </div>
-      </TDemoBlock>
-      <TDemoBlock title="02 特殊类型" summary="纯展示 从上往下">
-        <ExhibitionDemo />
-      </TDemoBlock>
-      <TDemoBlock summary="带操作 从下往上">
-        <ActionDemo />
-      </TDemoBlock>
-      <TDemoBlock title="03 规格" summary="头像大小尺寸">
-        <SizeDemo />
-      </TDemoBlock>
-    </div>
-  );
-}
diff --git a/src/avatar/_example/index.tsx b/src/avatar/_example/index.tsx
new file mode 100644
index 00000000..fc7525c4
--- /dev/null
+++ b/src/avatar/_example/index.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import TDemoHeader from '../../../site/mobile/components/DemoHeader';
+import TDemoBlock from '../../../site/mobile/components/DemoBlock';
+import ImageAvatar from './imageAvatar';
+import CharacterAvatar from './characterAvatar';
+import IconAvatar from './iconAvatar';
+import BadgeAvatar from './badgeAvatar';
+import ExhibitionAvatar from './exhibition';
+import ActionAvatar from './action';
+import SizeAvatar from './size';
+import './style/index.less';
+
+export default function () {
+  return (
+    <div className="tdesign-mobile-demo">
+      <TDemoHeader title="Avatar 头像" summary="用于展示用户头像信息，除了纯展示也可点击进入个人详情等操作。" />
+      <TDemoBlock title="01 头像类型" summary="图片头像">
+        <ImageAvatar />
+      </TDemoBlock>
+      <TDemoBlock summary="字符头像">
+        <CharacterAvatar />
+      </TDemoBlock>
+      <TDemoBlock summary="图标头像">
+        <IconAvatar />
+      </TDemoBlock>
+      <TDemoBlock summary="徽标头像">
+        <BadgeAvatar />
+      </TDemoBlock>
+      <TDemoBlock title="02 特殊类型" summary="纯展示的头像组">
+        <ExhibitionAvatar />
+      </TDemoBlock>
+      <TDemoBlock summary="带操作的头像组">
+        <ActionAvatar />
+      </TDemoBlock>
+      <TDemoBlock title="03 组件尺寸" summary="组件尺寸">
+        <SizeAvatar />
+      </TDemoBlock>
+    </div>
+  );
+}
diff --git a/src/avatar/_example/shape.jsx b/src/avatar/_example/shape.jsx
deleted file mode 100644
index 3d68cd81..00000000
--- a/src/avatar/_example/shape.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { UserIcon } from 'tdesign-icons-react';
-import { Avatar } from 'tdesign-mobile-react';
-
-const demoPicture = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png';
-
-export default function AvatarTypeDemo() {
-  return (
-    <>
-      <Avatar icon={<UserIcon />} />
-
-      <Avatar alt="示例图片" hideOnLoadFailed={false} image={demoPicture}></Avatar>
-
-      <Avatar icon={<img src={demoPicture} alt="示例图片" />} />
-      <Avatar image={demoPicture} shape="round" />
-      <Avatar className="custom">A</Avatar>
-    </>
-  );
-}
diff --git a/src/avatar/_example/size.jsx b/src/avatar/_example/size.jsx
deleted file mode 100644
index 692c58f3..00000000
--- a/src/avatar/_example/size.jsx
+++ /dev/null
@@ -1,72 +0,0 @@
-import React from 'react';
-import { Avatar } from 'tdesign-mobile-react';
-import { UserIcon } from 'tdesign-icons-react';
-
-export default function AvatarSizeDemo() {
-  return (
-    <>
-      <div className="avatar-demo">
-        <Avatar shape="circle" size="large" icon={<UserIcon />}></Avatar>
-        <Avatar shape="circle" size="medium" icon={<UserIcon />}></Avatar>
-        <Avatar shape="circle" size="small" icon={<UserIcon />}></Avatar>
-      </div>
-      <div className="avatar-demo">
-        <Avatar
-          shape="circle"
-          size="large"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ count: 10 }}
-        ></Avatar>
-        <Avatar
-          shape="circle"
-          size="medium"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ count: 10 }}
-        ></Avatar>
-        <Avatar
-          shape="circle"
-          size="small"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ dot: true }}
-        ></Avatar>
-      </div>
-      <div className="avatar-demo">
-        <Avatar
-          shape="round"
-          size="large"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ count: 10 }}
-        ></Avatar>
-        <Avatar
-          shape="round"
-          size="medium"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ count: 10 }}
-        ></Avatar>
-        <Avatar
-          shape="round"
-          size="small"
-          image="https://tdesign.gtimg.com/mobile/demos/avatar_1.png"
-          alt="示例图片"
-          badgeProps={{ dot: true }}
-        ></Avatar>
-      </div>
-      <div className="avatar-demo">
-        <Avatar shape="circle" size="large" className="custom">
-          A
-        </Avatar>
-        <Avatar shape="circle" size="medium" className="custom">
-          A
-        </Avatar>
-        <Avatar shape="circle" size="small" className="custom">
-          A
-        </Avatar>
-      </div>
-    </>
-  );
-}
diff --git a/src/avatar/_example/size.tsx b/src/avatar/_example/size.tsx
new file mode 100644
index 00000000..e362e589
--- /dev/null
+++ b/src/avatar/_example/size.tsx
@@ -0,0 +1,49 @@
+import React from 'react';
+import { Avatar } from 'tdesign-mobile-react';
+import { UserIcon } from 'tdesign-icons-react';
+
+export default function SizeAvatar() {
+  return (
+    <div className="tdesign-demo-avatar">
+      <div className="avatar-demo">
+        <Avatar
+          className="avatar-example--large"
+          shape="circle"
+          size="large"
+          image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+          alt="实例图片"
+        />
+        <Avatar className="avatar-example--large external-class-content" shape="circle" size="large">
+          A
+        </Avatar>
+        <Avatar className="avatar-example--large" shape="circle" size="large" icon={<UserIcon />} />
+      </div>
+      <div className="avatar-demo">
+        <Avatar
+          className="avatar-example--medium"
+          shape="circle"
+          size="medium"
+          image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+          alt="实例图片"
+        />
+        <Avatar className="avatar-example--medium external-class-content" shape="circle" size="medium">
+          A
+        </Avatar>
+        <Avatar className="avatar-example--medium" shape="circle" size="medium" icon={<UserIcon />} />
+      </div>
+      <div className="avatar-demo">
+        <Avatar
+          className="avatar-example--small"
+          shape="circle"
+          size="small"
+          image="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+          alt="实例图片"
+        />
+        <Avatar className="avatar-example--small external-class-content" shape="circle" size="small">
+          A
+        </Avatar>
+        <Avatar className="avatar-example--small" shape="circle" size="small" icon={<UserIcon />} />
+      </div>
+    </div>
+  );
+}
diff --git a/src/avatar/_example/style/index.less b/src/avatar/_example/style/index.less
index 079b02e9..4bc31277 100644
--- a/src/avatar/_example/style/index.less
+++ b/src/avatar/_example/style/index.less
@@ -1,17 +1,45 @@
 .avatar-demo {
   margin-left: 16px;
   margin-bottom: 16px;
-  .t-avatar {
-    margin-right: 20px;
-  }
+  
+
   .custom {
     .t-avatar__inner {
       background-color: #0052d9;
       color: #fff;
     }
   }
+
+  .avatar-example:not(:last-child) {
+    margin-right: 32px;
+  }
+
+  .avatar-example--small:not(:last-child) {
+    margin-right: 56px;
+  }
+
+  .avatar-example--medium:not(:last-child) {
+    margin-right: 48px;
+  }
+
+  .avatar-example--large:not(:last-child) {
+    margin-right: 32px;
+  }
+
+  .external-class-content {
+    .t-avatar {
+      color: #fff;
+      background-color: #0052d9;
+      font-weight: 400;
+    }
+  }
 }
+
 .avatar-group-demo {
   margin-left: 16px;
   margin-bottom: 16px;
 }
+
+.tdesign-mobile-demo {
+  background-color: var(--bg-color-demo, #fff);
+}
diff --git a/src/avatar/_example/type.jsx b/src/avatar/_example/type.jsx
deleted file mode 100644
index 3d68cd81..00000000
--- a/src/avatar/_example/type.jsx
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { UserIcon } from 'tdesign-icons-react';
-import { Avatar } from 'tdesign-mobile-react';
-
-const demoPicture = 'https://tdesign.gtimg.com/mobile/demos/avatar_1.png';
-
-export default function AvatarTypeDemo() {
-  return (
-    <>
-      <Avatar icon={<UserIcon />} />
-
-      <Avatar alt="示例图片" hideOnLoadFailed={false} image={demoPicture}></Avatar>
-
-      <Avatar icon={<img src={demoPicture} alt="示例图片" />} />
-      <Avatar image={demoPicture} shape="round" />
-      <Avatar className="custom">A</Avatar>
-    </>
-  );
-}
diff --git a/test/snap/__snapshots__/csr.test.jsx.snap b/test/snap/__snapshots__/csr.test.jsx.snap
index 625b72d4..7d0fe02d 100644
--- a/test/snap/__snapshots__/csr.test.jsx.snap
+++ b/test/snap/__snapshots__/csr.test.jsx.snap
@@ -1,5 +1,2893 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`csr snapshot test > csr test src/avatar/_example/action.tsx 1`] = `
+<div>
+  <div
+    class="avatar-group-demo"
+  >
+    <div
+      class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"
+    >
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar5.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar-group__collapse--default"
+      >
+        <div
+          class="t-avatar__wrapper"
+        >
+          <div
+            class="t-avatar__badge"
+          >
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__content"
+              >
+                <div
+                  class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                >
+                  <svg
+                    class="t-icon t-icon-user-add"
+                    fill="none"
+                    height="1em"
+                    style="font-size: 24px;"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/badgeAvatar.tsx 1`] = `
+<div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              <div
+                class="t-image t-image--square"
+              >
+                <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
+                  alt=""
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+            style="right: 4px; top: 4px;"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-avatar__wrapper avatar-example external-class-content"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              A
+            </div>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+            style="right: 6px; top: 6px;"
+          >
+            8
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+            style="right: 6px; top: 6px;"
+          >
+            12
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/characterAvatar.tsx 1`] = `
+<div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar__wrapper avatar-example external-class-content"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              A
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-avatar__wrapper avatar-example external-class-content"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--round"
+            >
+              A
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/exhibition.tsx 1`] = `
+<div>
+  <div
+    class="avatar-group-demo"
+  >
+    <div
+      class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"
+    >
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt=""
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar5.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar-group__collapse--default"
+      >
+        <div
+          class="t-avatar__wrapper"
+        >
+          <div
+            class="t-avatar__badge"
+          >
+            <div
+              class="t-badge"
+            >
+              <div
+                class="t-badge__content"
+              >
+                <div
+                  class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                >
+                  +5
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/iconAvatar.tsx 1`] = `
+<div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--round"
+            >
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/imageAvatar.tsx 1`] = `
+<div>
+  <div
+    class="avatar-demo"
+  >
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              <div
+                class="t-image t-image--square"
+              >
+                <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
+                  alt=""
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="t-avatar__wrapper avatar-example"
+    >
+      <div
+        class="t-avatar__badge"
+      >
+        <div
+          class="t-badge"
+        >
+          <div
+            class="t-badge__content"
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--round"
+            >
+              <div
+                class="t-image t-image--square"
+              >
+                <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
+                  alt=""
+                  class="t-image__img t-image--fit-fill t-image--position-center"
+                  src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/index.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-mobile-demo"
+  >
+    <div
+      class="tdesign-mobile-demo-header"
+    >
+      <h1
+        class="tdesign-mobile-demo-header__title"
+      >
+        Avatar 头像
+      </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="avatar-demo"
+        >
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    <div
+                      class="t-image t-image--square"
+                    >
+                      <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
+                        alt=""
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--round"
+                  >
+                    <div
+                      class="t-image t-image--square"
+                    >
+                      <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
+                        alt=""
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                      />
+                    </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="avatar-demo"
+        >
+          <div
+            class="t-avatar__wrapper avatar-example external-class-content"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    A
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-avatar__wrapper avatar-example external-class-content"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--round"
+                  >
+                    A
+                  </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="avatar-demo"
+        >
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    <div
+                      class="t-avatar__icon"
+                    >
+                      <svg
+                        class="t-icon t-icon-user"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--round"
+                  >
+                    <div
+                      class="t-avatar__icon"
+                    >
+                      <svg
+                        class="t-icon t-icon-user"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </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="avatar-demo"
+        >
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    <div
+                      class="t-image t-image--square"
+                    >
+                      <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
+                        alt=""
+                        class="t-image__img t-image--fit-fill t-image--position-center"
+                        src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                      />
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count"
+                  style="right: 4px; top: 4px;"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-avatar__wrapper avatar-example external-class-content"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    A
+                  </div>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                  style="right: 6px; top: 6px;"
+                >
+                  8
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="t-avatar__wrapper avatar-example"
+          >
+            <div
+              class="t-avatar__badge"
+            >
+              <div
+                class="t-badge"
+              >
+                <div
+                  class="t-badge__content"
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    <div
+                      class="t-avatar__icon"
+                    >
+                      <svg
+                        class="t-icon t-icon-user"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
+                <div
+                  class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
+                  style="right: 6px; top: 6px;"
+                >
+                  12
+                </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="avatar-group-demo"
+        >
+          <div
+            class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"
+          >
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar5.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar-group__collapse--default"
+            >
+              <div
+                class="t-avatar__wrapper"
+              >
+                <div
+                  class="t-avatar__badge"
+                >
+                  <div
+                    class="t-badge"
+                  >
+                    <div
+                      class="t-badge__content"
+                    >
+                      <div
+                        class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                      >
+                        +5
+                      </div>
+                    </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="avatar-group-demo"
+        >
+          <div
+            class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"
+          >
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar2.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar3.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar4.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar5.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar-group__collapse--default"
+            >
+              <div
+                class="t-avatar__wrapper"
+              >
+                <div
+                  class="t-avatar__badge"
+                >
+                  <div
+                    class="t-badge"
+                  >
+                    <div
+                      class="t-badge__content"
+                    >
+                      <div
+                        class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium"
+                      >
+                        <svg
+                          class="t-icon t-icon-user-add"
+                          fill="none"
+                          height="1em"
+                          style="font-size: 24px;"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </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"
+        >
+          03 组件尺寸
+        </h2>
+        <p
+          class="tdesign-mobile-demo-block__summary"
+        >
+          组件尺寸
+        </p>
+      </div>
+      <div
+        class="tdesign-mobile-demo-block__slot"
+      >
+        <div
+          class="tdesign-demo-avatar"
+        >
+          <div
+            class="avatar-demo"
+          >
+            <div
+              class="t-avatar__wrapper avatar-example--large"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--large t-avatar--circle"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt="实例图片"
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--large external-class-content"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--large t-avatar--circle"
+                    >
+                      A
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--large"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--large t-avatar--circle"
+                    >
+                      <div
+                        class="t-avatar__icon"
+                      >
+                        <svg
+                          class="t-icon t-icon-user"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="avatar-demo"
+          >
+            <div
+              class="t-avatar__wrapper avatar-example--medium"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt="实例图片"
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--medium external-class-content"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle"
+                    >
+                      A
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--medium"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle"
+                    >
+                      <div
+                        class="t-avatar__icon"
+                      >
+                        <svg
+                          class="t-icon t-icon-user"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            class="avatar-demo"
+          >
+            <div
+              class="t-avatar__wrapper avatar-example--small"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--small t-avatar--circle"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt="实例图片"
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--small external-class-content"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--small t-avatar--circle"
+                    >
+                      A
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div
+              class="t-avatar__wrapper avatar-example--small"
+            >
+              <div
+                class="t-avatar__badge"
+              >
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--small t-avatar--circle"
+                    >
+                      <div
+                        class="t-avatar__icon"
+                      >
+                        <svg
+                          class="t-icon t-icon-user"
+                          fill="none"
+                          height="1em"
+                          viewBox="0 0 24 24"
+                          width="1em"
+                        >
+                          <path
+                            d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                            fill="currentColor"
+                          />
+                        </svg>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`csr snapshot test > csr test src/avatar/_example/size.tsx 1`] = `
+<div>
+  <div
+    class="tdesign-demo-avatar"
+  >
+    <div
+      class="avatar-demo"
+    >
+      <div
+        class="t-avatar__wrapper avatar-example--large"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--large t-avatar--circle"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt="实例图片"
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--large external-class-content"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--large t-avatar--circle"
+              >
+                A
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--large"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--large t-avatar--circle"
+              >
+                <div
+                  class="t-avatar__icon"
+                >
+                  <svg
+                    class="t-icon t-icon-user"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="avatar-demo"
+    >
+      <div
+        class="t-avatar__wrapper avatar-example--medium"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt="实例图片"
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--medium external-class-content"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle"
+              >
+                A
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--medium"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--medium t-avatar--circle"
+              >
+                <div
+                  class="t-avatar__icon"
+                >
+                  <svg
+                    class="t-icon t-icon-user"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="avatar-demo"
+    >
+      <div
+        class="t-avatar__wrapper avatar-example--small"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--small t-avatar--circle"
+              >
+                <div
+                  class="t-image t-image--square"
+                >
+                  <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
+                    alt="实例图片"
+                    class="t-image__img t-image--fit-fill t-image--position-center"
+                    src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--small external-class-content"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--small t-avatar--circle"
+              >
+                A
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="t-avatar__wrapper avatar-example--small"
+      >
+        <div
+          class="t-avatar__badge"
+        >
+          <div
+            class="t-badge"
+          >
+            <div
+              class="t-badge__content"
+            >
+              <div
+                class="t-avatar t-avatar--small t-avatar--circle"
+              >
+                <div
+                  class="t-avatar__icon"
+                >
+                  <svg
+                    class="t-icon t-icon-user"
+                    fill="none"
+                    height="1em"
+                    viewBox="0 0 24 24"
+                    width="1em"
+                  >
+                    <path
+                      d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                      fill="currentColor"
+                    />
+                  </svg>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`csr snapshot test > csr test src/back-top/_example/base.tsx 1`] = `
 <div>
   <div
@@ -884,29 +3772,8 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
           class="block"
         >
           <div
-            class="t-avatar t-size-l t-avatar--circle"
+            class="t-avatar__wrapper"
           >
-            <div
-              class="t-avatar__inner"
-            >
-              
-              <div
-                class="t-avatar__icon"
-              >
-                <svg
-                  class="t-icon t-icon-user"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-            </div>
             <div
               class="t-avatar__badge"
             >
@@ -915,7 +3782,28 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
               >
                 <div
                   class="t-badge__content"
-                />
+                >
+                  <div
+                    class="t-avatar t-avatar--large t-avatar--circle"
+                  >
+                    <div
+                      class="t-avatar__icon"
+                    >
+                      <svg
+                        class="t-icon t-icon-user"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
                 <div
                   class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
                   style="right: 7px; top: 7px;"
@@ -935,29 +3823,8 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
           class="block"
         >
           <div
-            class="t-avatar t-avatar--circle"
+            class="t-avatar__wrapper"
           >
-            <div
-              class="t-avatar__inner"
-            >
-              
-              <div
-                class="t-avatar__icon"
-              >
-                <svg
-                  class="t-icon t-icon-user"
-                  fill="none"
-                  height="1em"
-                  viewBox="0 0 24 24"
-                  width="1em"
-                >
-                  <path
-                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
-                    fill="currentColor"
-                  />
-                </svg>
-              </div>
-            </div>
             <div
               class="t-avatar__badge"
             >
@@ -966,7 +3833,28 @@ exports[`csr snapshot test > csr test src/badge/_example/index.tsx 1`] = `
               >
                 <div
                   class="t-badge__content"
-                />
+                >
+                  <div
+                    class="t-avatar t-avatar--medium t-avatar--circle"
+                  >
+                    <div
+                      class="t-avatar__icon"
+                    >
+                      <svg
+                        class="t-icon t-icon-user"
+                        fill="none"
+                        height="1em"
+                        viewBox="0 0 24 24"
+                        width="1em"
+                      >
+                        <path
+                          d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                          fill="currentColor"
+                        />
+                      </svg>
+                    </div>
+                  </div>
+                </div>
                 <div
                   class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
                   style="right: 5px; top: 5px;"
@@ -994,29 +3882,8 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
     class="block"
   >
     <div
-      class="t-avatar t-size-l t-avatar--circle"
+      class="t-avatar__wrapper"
     >
-      <div
-        class="t-avatar__inner"
-      >
-        
-        <div
-          class="t-avatar__icon"
-        >
-          <svg
-            class="t-icon t-icon-user"
-            fill="none"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-          >
-            <path
-              d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-      </div>
       <div
         class="t-avatar__badge"
       >
@@ -1025,7 +3892,28 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
         >
           <div
             class="t-badge__content"
-          />
+          >
+            <div
+              class="t-avatar t-avatar--large t-avatar--circle"
+            >
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
           <div
             class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count"
             style="right: 7px; top: 7px;"
@@ -1045,29 +3933,8 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
     class="block"
   >
     <div
-      class="t-avatar t-avatar--circle"
+      class="t-avatar__wrapper"
     >
-      <div
-        class="t-avatar__inner"
-      >
-        
-        <div
-          class="t-avatar__icon"
-        >
-          <svg
-            class="t-icon t-icon-user"
-            fill="none"
-            height="1em"
-            viewBox="0 0 24 24"
-            width="1em"
-          >
-            <path
-              d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
-              fill="currentColor"
-            />
-          </svg>
-        </div>
-      </div>
       <div
         class="t-avatar__badge"
       >
@@ -1076,7 +3943,28 @@ exports[`csr snapshot test > csr test src/badge/_example/size.tsx 1`] = `
         >
           <div
             class="t-badge__content"
-          />
+          >
+            <div
+              class="t-avatar t-avatar--medium t-avatar--circle"
+            >
+              <div
+                class="t-avatar__icon"
+              >
+                <svg
+                  class="t-icon t-icon-user"
+                  fill="none"
+                  height="1em"
+                  viewBox="0 0 24 24"
+                  width="1em"
+                >
+                  <path
+                    d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"
+                    fill="currentColor"
+                  />
+                </svg>
+              </div>
+            </div>
+          </div>
           <div
             class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count"
             style="right: 5px; top: 5px;"
@@ -3353,15 +6241,58 @@ exports[`csr snapshot test > csr test src/cell/_example/base.tsx 1`] = `
                   class="t-cell__left-icon"
                 >
                   <div
-                    class="t-avatar t-avatar--circle"
+                    class="t-avatar__wrapper"
                   >
                     <div
-                      class="t-avatar__inner"
+                      class="t-avatar__badge"
                     >
-                      <img
-                        alt=""
-                        src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
-                      />
+                      <div
+                        class="t-badge"
+                      >
+                        <div
+                          class="t-badge__content"
+                        >
+                          <div
+                            class="t-avatar t-avatar--medium t-avatar--circle"
+                          >
+                            <div
+                              class="t-image t-image--square"
+                            >
+                              <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
+                                alt=""
+                                class="t-image__img t-image--fit-fill t-image--position-center"
+                                src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                              />
+                            </div>
+                          </div>
+                        </div>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -4070,15 +7001,58 @@ exports[`csr snapshot test > csr test src/cell/_example/multiple.tsx 1`] = `
             class="t-cell__left-icon"
           >
             <div
-              class="t-avatar t-avatar--circle"
+              class="t-avatar__wrapper"
             >
               <div
-                class="t-avatar__inner"
+                class="t-avatar__badge"
               >
-                <img
-                  alt=""
-                  src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
-                />
+                <div
+                  class="t-badge"
+                >
+                  <div
+                    class="t-badge__content"
+                  >
+                    <div
+                      class="t-avatar t-avatar--medium t-avatar--circle"
+                    >
+                      <div
+                        class="t-image t-image--square"
+                      >
+                        <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
+                          alt=""
+                          class="t-image__img t-image--fit-fill t-image--position-center"
+                          src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
               </div>
             </div>
           </div>
@@ -56103,15 +59077,31 @@ exports[`csr snapshot test > csr test src/toast/_example/theme.tsx 1`] = `
 </div>
 `;
 
+exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"<div class="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user-add" style="font-size:24px"><path fill="currentColor" d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"></path></svg></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/badgeAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:4px;top:4px"></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">8</div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">12</div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/characterAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx">A</div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/exhibition.tsx 1`] = `"<div class="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx">+5</div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/iconAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/imageAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Avatar 头像</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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></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="avatar-demo"><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx">A</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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:4px;top:4px"></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">8</div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">12</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="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx">+5</div></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="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user-add" style="font-size:24px"><path fill="currentColor" d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"></path></svg></div></div></div></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">03 组件尺寸</h2><p class="tdesign-mobile-demo-block__summary">组件尺寸</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-avatar"><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `"<div class="tdesign-demo-avatar"><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></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>"`;
 
 exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"<div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</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">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</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">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"<div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div>"`;
 
@@ -56137,11 +59127,11 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"<div>
 
 exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"<div class="section-theme"><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><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"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</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="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></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><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</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">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</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="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></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><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</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">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;
 
diff --git a/test/snap/__snapshots__/ssr.test.jsx.snap b/test/snap/__snapshots__/ssr.test.jsx.snap
index bec660d5..d7d03875 100644
--- a/test/snap/__snapshots__/ssr.test.jsx.snap
+++ b/test/snap/__snapshots__/ssr.test.jsx.snap
@@ -1,14 +1,30 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`ssr snapshot test > ssr test src/avatar/_example/action.tsx 1`] = `"<div class="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user-add" style="font-size:24px"><path fill="currentColor" d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"></path></svg></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/badgeAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:4px;top:4px"></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">8</div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">12</div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/characterAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx">A</div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/exhibition.tsx 1`] = `"<div class="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx">+5</div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/iconAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/imageAvatar.tsx 1`] = `"<div class="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Avatar 头像</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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></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="avatar-demo"><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx">A</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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--round" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></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="avatar-demo"><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:4px;top:4px"></div></div></div></div><div class="t-avatar__wrapper avatar-example external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx">A</div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">8</div></div></div></div><div class="t-avatar__wrapper avatar-example"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:6px;top:6px">12</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="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-left t-avatar-group-offset-left-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx">+5</div></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="avatar-group-demo"><div class="t-avatar-group t-avatar-group-offset-right t-avatar-group-offset-right-medium"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar2.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar3.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar4.png" alt=""/></div></div></div></div></div></div><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar5.png" alt=""/></div></div></div></div></div></div><div class="t-avatar-group__collapse--default"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle t-avatar--border t-avatar--border-medium" style="font-size:NaNpx"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user-add" style="font-size:24px"><path fill="currentColor" d="M11.5 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM19 13v4h4v2h-4v4h-2v-4h-4v-2h4v-4h2zM8 16a4 4 0 00-4 4h8.05v2H2v-2a6 6 0 016-6h4v2H8z"></path></svg></div></div></div></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">03 组件尺寸</h2><p class="tdesign-mobile-demo-block__summary">组件尺寸</p></div><div class="tdesign-mobile-demo-block__slot"><div class="tdesign-demo-avatar"><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div></div></div></div></div>"`;
+
+exports[`ssr snapshot test > ssr test src/avatar/_example/size.tsx 1`] = `"<div class="tdesign-demo-avatar"><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--large"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--medium"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div></div></div></div></div><div class="avatar-demo"><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt="实例图片"/></div></div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small external-class-content"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle">A</div></div></div></div></div><div class="t-avatar__wrapper avatar-example--small"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--small t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></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>"`;
 
 exports[`ssr snapshot test > ssr test src/badge/_example/base.tsx 1`] = `"<div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</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">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/badge/_example/index.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Badge 徽标</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">红点徽标</div><div class="badge-demo"><div class="badge-item 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="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:-1px"></div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--dot t-badge--medium t-badge--circle t-has-count" style="right:1px;top:1px"></div></div></div><div class="summary">数字徽标</div><div class="badge-demo"><div class="badge-item 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" style="right:-8px;top:0px">8</div></div><div class="badge-item t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div><div class="badge-item t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-medium t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->按钮</span></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:2px;top:2px">8</div></div></div><div class="summary">自定义徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:0px;top:2px">NEW</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></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</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">03 组件尺寸</h2></div><div class="tdesign-mobile-demo-block__slot"><div class="summary">Large</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar t-size-l t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/badge/_example/size.tsx 1`] = `"<div class="summary">Large</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--large t-avatar--circle"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--large t-badge--circle t-badge--count t-has-count" style="right:7px;top:7px">8</div></div></div></div></div><div class="summary">Middle</div><div class="block"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-avatar__icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-user"><path fill="currentColor" d="M12 4a3.5 3.5 0 100 7 3.5 3.5 0 000-7zM6.5 7.5a5.5 5.5 0 1111 0 5.5 5.5 0 01-11 0zM3 19a5 5 0 015-5h8a5 5 0 015 5v3H3v-3zm5-3a3 3 0 00-3 3v1h14v-1a3 3 0 00-3-3H8z"></path></svg></div></div></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:5px;top:5px">8</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/badge/_example/theme.tsx 1`] = `"<div class="summary">圆形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">方形徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-notification" style="font-size:24"><path fill="currentColor" d="M4 8a8 8 0 1116 0v4.7l2 3V20h-5.61a4.5 4.5 0 01-8.78 0H2v-4.3l2-3V8zm5.7 12a2.5 2.5 0 004.6 0H9.7zM12 2a6 6 0 00-6 6v5.3l-2 3V18h16v-1.7l-2-3V8a6 6 0 00-6-6z"></path></svg></div><div class="t-badge--basic t-badge--medium t-badge--square t-badge--count t-has-count" style="right:-2px;top:-2px">2</div></div></div><div class="summary">气泡徽标</div><div class="badge-demo"><div class="t-badge"><div class="t-badge__content"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--square"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-shop"><path fill="currentColor" d="M7.5 5.5a4.5 4.5 0 019 0V7H21v16H3V7h4.5V5.5zm0 3.5H5v12h14V9h-2.5v3h-2V9h-5v3h-2V9zm7-2V5.5a2.5 2.5 0 00-5 0V7h5z"></path></svg></button></div><div class="t-badge--basic t-badge--medium t-badge--bubble t-badge--count t-has-count">领积分</div></div></div><div class="summary" style="margin-bottom:16px">角标</div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge t-badge__ribbon-outer"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--ribbon t-badge--count t-has-count" style="right:0px;top:0px">New</div></div></div></div>"`;
 
@@ -34,11 +50,11 @@ exports[`ssr snapshot test > ssr test src/button/_example/test.tsx 1`] = `"<div>
 
 exports[`ssr snapshot test > ssr test src/button/_example/theme.tsx 1`] = `"<div class="section-theme"><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--primary t-button--rectangle"><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"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--danger t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div><div class="row"><button type="button" class="t-button t-button--size-large t-button--base t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->填充按钮</span></button><button type="button" class="t-button t-button--size-large t-button--outline t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->描边按钮</span></button><button type="button" class="t-button t-button--size-large t-button--dashed t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->虚框按钮</span></button><button type="button" class="t-button t-button--size-large t-button--text t-button--light t-button--rectangle"><span class="t-button__content"> <!-- -->文字按钮</span></button></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</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="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></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><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</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">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/base.tsx 1`] = `"<div class="tdesign-mobile-demo"><div class="tdesign-mobile-demo-header"><h1 class="tdesign-mobile-demo-header__title">Cell 单元格</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="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></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><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</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">03 组件样式</h2><p class="tdesign-mobile-demo-block__summary">卡片单元格</p></div><div class="tdesign-mobile-demo-block__slot"><div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/group.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--card"><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-service"><path fill="currentColor" d="M2 11a10 10 0 1120 0v5.15C22 17.8 20.58 19 19 19h-3v-8h4a8 8 0 10-16 0h4v8H6.06A2 2 0 008 20.5h1.56c.32-.45.85-.75 1.44-.75h2a1.75 1.75 0 110 3.5h-2c-.6 0-1.12-.3-1.44-.75H8a4 4 0 01-3.99-3.66A2.85 2.85 0 012 16.15V11zm4 6v-4H4v3.15c0 .4.37.85 1 .85h1zm14-4h-2v4h1c.63 0 1-.45 1-.85V13z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-internet"><path fill="currentColor" d="M3.05 11a9 9 0 016.28-7.6 16.9 16.9 0 00-2.3 7.6H3.05zM11 1.05a11 11 0 000 21.9l.01.01.43.03a12.48 12.48 0 001.14 0l.43-.03a11 11 0 000-21.91v-.01L12.57 1a11.16 11.16 0 00-1.14 0l-.43.03zM12 3c1.7 2.26 2.77 5 2.97 8H9.03c.2-3 1.27-5.74 2.97-8zM7.03 13a16.9 16.9 0 002.3 7.6A9 9 0 013.05 13h3.98zM12 21c-1.7-2.26-2.77-5-2.97-8h5.94c-.2 3-1.27 5.74-2.97 8zm2.67-.4a16.9 16.9 0 002.3-7.6h3.98a9 9 0 01-6.28 7.6zm2.3-9.6a16.9 16.9 0 00-2.3-7.6 9 9 0 016.28 7.6h-3.98z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div>"`;
 
-exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar t-avatar--circle"><div class="t-avatar__inner"><img alt="" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png"/></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
+exports[`ssr snapshot test > ssr test src/cell/_example/multiple.tsx 1`] = `"<div><div class="t-cell-group t-cell-group--default"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span><div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note"><div class="t-switch t-switch--medium t-switch--checked"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--checked t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium t-switch__label--checked"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">多行高度不定，长文本自动换行，该选项的描述是一段很长的内容<div class="t-cell__description">一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容</div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><div class="t-avatar__wrapper"><div class="t-avatar__badge"><div class="t-badge"><div class="t-badge__content"><div class="t-avatar t-avatar--medium t-avatar--circle" style="font-size:NaNpx"><div class="t-image t-image--square"><div class="t-image__mask"><div class="t-loading t-loading--center" style="color:inherit;font-size:20px"><div class="t-loading__dots" style="animation-play-state:;animation-direction:;animation-duration:800ms;width:20px;height:20px"><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.26666666666666666s"></div><div class="t-loading__dot" style="animation-duration:0.8s;animation-delay:0.5333333333333333s"></div></div></div></div><img class="t-image__img t-image--fit-fill t-image--position-center" src="https://tdesign.gtimg.com/mobile/demos/avatar1.png" alt=""/></div></div></div></div></div></div></div></div><div class="t-cell__title">多行带头像<div class="t-cell__description">一段很长很长的内容文字</div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><img src="https://tdesign.gtimg.com/mobile/demos/example4.png" class="t-cell__left-image"/></div><div class="t-cell__title">多行带图片<div class="t-cell__description">一段很长很长的内容文字</div></div></div></div></div>"`;
 
 exports[`ssr snapshot test > ssr test src/cell/_example/single.tsx 1`] = `"<div class="tdesign-grid-base"><div><div class="t-cell-group t-cell-group--default t-cell-group--bordered"><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题<span class="t-cell--required"> *</span></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-badge"><div class="t-badge__content"></div><div class="t-badge--basic t-badge--medium t-badge--circle t-badge--count t-has-count">16</div></div></div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note"><div class="t-switch t-switch--medium"><div class="t-switch__dot t-switch__dot--medium t-switch__dot--plain"><div class="t-switch__label t-switch__label--medium"></div></div></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"></div><div class="t-cell__title">单行标题</div><div class="t-cell__note">辅助信息</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div><div class="t-cell t-cell--middle"><div class="t-cell__left"><div class="t-cell__left-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-lock-on"><path fill="currentColor" d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"></path></svg></div></div><div class="t-cell__title">单行标题</div><div class="t-cell__right"><div class="t-cell__right-icon"><svg fill="none" viewBox="0 0 24 24" width="1em" height="1em" class="t-icon t-icon-chevron-right"><path fill="currentColor" d="M8.09 17.5l5.5-5.5-5.5-5.5L9.5 5.09 16.41 12 9.5 18.91 8.09 17.5z"></path></svg></div></div></div></div></div></div>"`;