diff --git a/.github/workflows/push.yml b/.github/workflows/push.yml
deleted file mode 100644
index 22f16b3c6..000000000
--- a/.github/workflows/push.yml
+++ /dev/null
@@ -1,7 +0,0 @@
-name: MAIN_PUSH
-
-on: push
-
-jobs:
-  call-test-build:
-    uses: Tencent/tdesign/.github/workflows/test-build.yml@main
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 30074778b..88a634fcb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -5,6 +5,25 @@ toc: false
 spline: explain
 ---
 
+## 🌈 1.8.0 `2025-01-22` 
+### 🚀 Features
+- `Input`: 新增 `cursorColor` 属性 @SkylerXie ([#1703](https://github.com/Tencent/tdesign-mobile-vue/pull/1703))
+- `Icon`:  更新图标库版本至 `0.3.4`，新增 `logo-alipay`、`logo-behance-filled` 等图标，修改 `logo-wecom` 图标，移除不合理的 `logo-wecom-filled` 图标 @anlyyao ([#1715](https://github.com/Tencent/tdesign-mobile-vue/pull/1715))
+- `ActionSheet`: 新增 `showOverlay` 和 `popupProps` 属性 @hensonjunyuan ([#1704](https://github.com/Tencent/tdesign-mobile-vue/pull/1704))
+- `Tabs`: 新增 `split` 和 `middle` 属性，并支持自动定位到激活项位置 @Faxxicy ([#1663](https://github.com/Tencent/tdesign-mobile-vue/pull/1663))  @novlan1 ([#1727](https://github.com/Tencent/tdesign-mobile-vue/pull/1727))
+- `TabPanel`: 新增 `icon` 属性 @novlan1 ([#1727](https://github.com/Tencent/tdesign-mobile-vue/pull/1727))
+- `Grid`: 新增 `hover` 属性 @novlan1 ([#1725](https://github.com/Tencent/tdesign-mobile-vue/pull/1725))
+- `GridItem`:  新增 `icon` 属性 @novlan1 ([#1725](https://github.com/Tencent/tdesign-mobile-vue/pull/1725))
+- `Search`: 新增  `clearTrigger` 属性 @novlan1 ([#1726](https://github.com/Tencent/tdesign-mobile-vue/pull/1726))
+### 🐞 Bug Fixes
+- `Tabs`: 当子项类型为 `fragment` 时，标签无法正确渲染 @betavs ([#1690](https://github.com/Tencent/tdesign-mobile-vue/pull/1690))
+- `Radio`: 当`value=0` 时无法被选中的问题 @RSS1102 ([#1709](https://github.com/Tencent/tdesign-mobile-vue/pull/1709))
+- `Checkbox`: 修复 `CheckGroup` 使用 `options` 属性时 `disabled` 无效的问题 @anlyyao ([#1713](https://github.com/Tencent/tdesign-mobile-vue/pull/1713))
+- `TabBar`: 修复子项数量大于 3 时子项宽度未保持一致 @anlyyao ([#1714](https://github.com/Tencent/tdesign-mobile-vue/pull/1714))
+- `Dialog`: 修复圆角样式错误，并新增 `--td-dialog-border-radius` @anlyyao ([#1733](https://github.com/Tencent/tdesign-mobile-vue/pull/1733))
+- `Popup`: 修复圆角错误，并新增 `--td-popup-close-btn-color` @anlyyao ([#1734](https://github.com/Tencent/tdesign-mobile-vue/pull/1734))
+- `Cell`: 修复部分样式错误，并更新 `align` 属性描述 @liweijie0812 ([#1731](https://github.com/Tencent/tdesign-mobile-vue/pull/1731))
+
 ## 🌈 1.7.0 `2024-12-19` 
 ### 🚀 Features
 - `IDE`: 增加 `Volar`、`WebStorm` 提示文件 @liweijie0812 ([#1682](https://github.com/Tencent/tdesign-mobile-vue/pull/1682))
diff --git a/package.json b/package.json
index 9054bb89a..a75b08846 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "tdesign-mobile-vue",
   "purename": "tdesign",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "tdesign-mobile-vue",
   "author": "TDesign Group",
   "homepage": "https://tdesign.tencent.com/mobile-vue/",
@@ -92,7 +92,7 @@
     "@vueuse/core": "10.7.0",
     "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
-    "tdesign-icons-vue-next": "^0.3.3",
+    "tdesign-icons-vue-next": "^0.3.4",
     "validator": "^13.5.1"
   },
   "peerDependencies": {
@@ -173,9 +173,9 @@
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-vue": "^6.0.0",
     "rollup-pluginutils": "^2.8.2",
-    "tdesign-icons-view": "^0.3.2",
-    "tdesign-publish-cli": "^0.0.10",
-    "tdesign-site-components": "^0.15.2",
+    "tdesign-icons-view": "^0.3.4",
+    "tdesign-publish-cli": "^0.0.12",
+    "tdesign-site-components": "^0.15.6",
     "tslib": "^2.3.1",
     "typescript": "~4.7.2",
     "vite": "^2.9.14",
diff --git a/scripts/test/snap-setup.js b/scripts/test/snap-setup.js
index 07cc86f02..d24530fdc 100644
--- a/scripts/test/snap-setup.js
+++ b/scripts/test/snap-setup.js
@@ -1,6 +1,6 @@
 import { config } from '@vue/test-utils';
 import { createApp } from 'vue';
-import { renderToString } from '@vue/server-renderer';
+import { renderToString } from 'vue/server-renderer';
 import TDesign from '@/index';
 import DemoBlock from '../../site/mobile/components/demo-block.vue';
 
diff --git a/site/web/stackblitz/content.ts b/site/web/stackblitz/content.ts
index 4e5a6b33c..76d2b6f3c 100644
--- a/site/web/stackblitz/content.ts
+++ b/site/web/stackblitz/content.ts
@@ -50,9 +50,10 @@ export const stackblitzRc = `
 export const viteConfigContent = `
   import { defineConfig } from 'vite';
   import vue from '@vitejs/plugin-vue';
+  import vueJsx from '@vitejs/plugin-vue-jsx';
 
   export default defineConfig({
-    plugins: [vue()],
+    plugins: [vue(), vueJsx()],
   });
 `;
 
@@ -75,7 +76,8 @@ export const packageJSONContent = JSON.stringify(
       vite: orgPkg.devDependencies.vite,
       '@vue/compiler-sfc': orgPkg.devDependencies['@vue/compiler-sfc'],
       '@vitejs/plugin-vue': orgPkg.devDependencies['@vitejs/plugin-vue'],
-      'less': orgPkg.devDependencies['less']
+      '@vitejs/plugin-vue-jsx': orgPkg.devDependencies['@vitejs/plugin-vue-jsx'],
+      less: orgPkg.devDependencies['less'],
     },
   },
   null,
diff --git a/src/_common b/src/_common
index 53786c587..ef7c8d3c5 160000
--- a/src/_common
+++ b/src/_common
@@ -1 +1 @@
-Subproject commit 53786c58752401e648cc45918f2a4dbb9e8cecfa
+Subproject commit ef7c8d3c5978476b26affe54abcb6fe5f5ad9e8b
diff --git a/src/action-sheet/action-sheet-grid.tsx b/src/action-sheet/action-sheet-grid.tsx
index ae2cece59..0b51fd9b5 100644
--- a/src/action-sheet/action-sheet-grid.tsx
+++ b/src/action-sheet/action-sheet-grid.tsx
@@ -5,7 +5,6 @@ import { ActionSheetItem } from './type';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TGrid, TGridItem, TSwiper, TSwiperItem },
   props: {
     items: {
       type: Array<ActionSheetItem>,
@@ -51,7 +50,7 @@ export default defineComponent({
       const swiper = () => {
         const swiperItems = actionItems.value.map((items, i) => {
           const gridItems = items.map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -63,14 +62,14 @@ export default defineComponent({
             />
           ));
           return (
-            <t-swiper-item key={i}>
-              <t-grid column={gridColumn.value}>{gridItems}</t-grid>
-            </t-swiper-item>
+            <TSwiperItem key={i}>
+              <TGrid column={gridColumn.value}>{gridItems}</TGrid>
+            </TSwiperItem>
           );
         });
         if (actionItems.value.length > 1) {
           return (
-            <t-swiper
+            <TSwiper
               autoplay={false}
               pagination-position="bottom"
               navigation={{ type: 'dots', showControls: false }}
@@ -79,7 +78,7 @@ export default defineComponent({
               height={192}
             >
               {swiperItems}
-            </t-swiper>
+            </TSwiper>
           );
         }
         return null;
@@ -87,7 +86,7 @@ export default defineComponent({
       const grid = () => {
         if (actionItems.value.length === 1) {
           const items = actionItems.value[0].map((item, index) => (
-            <t-grid-item
+            <TGridItem
               key={index}
               text={item.label}
               image={item.icon}
@@ -96,7 +95,7 @@ export default defineComponent({
             />
           ));
 
-          return <t-grid column={gridColumn.value}>{items}</t-grid>;
+          return <TGrid column={gridColumn.value}>{items}</TGrid>;
         }
         return null;
       };
diff --git a/src/action-sheet/action-sheet-list.tsx b/src/action-sheet/action-sheet-list.tsx
index 74d814dd7..6ed9b507f 100644
--- a/src/action-sheet/action-sheet-list.tsx
+++ b/src/action-sheet/action-sheet-list.tsx
@@ -6,7 +6,6 @@ import { useTNodeDefault } from '../hooks/tnode';
 import { usePrefixClass } from '../hooks/useClass';
 
 export default defineComponent({
-  components: { TButton, TBadge },
   props: {
     items: {
       type: Array as PropType<ActionSheetItem[]>,
@@ -39,7 +38,7 @@ export default defineComponent({
             const content = () => {
               if (item.badge.dot || item.badge.count) {
                 return (
-                  <t-badge
+                  <TBadge
                     count={item.badge.count}
                     max-count={item.badge.maxCount || 99}
                     dot={item.badge.dot}
@@ -48,7 +47,7 @@ export default defineComponent({
                     offset={item.badge.offset || [-16, 20]}
                   >
                     <span class={`${actionSheetClass.value}__list-item-text`}> {item.label}</span>
-                  </t-badge>
+                  </TBadge>
                 );
               }
               return renderTNodeJSX('badge', {
@@ -60,7 +59,7 @@ export default defineComponent({
           return <span class={`${actionSheetClass.value}__list-item-text`}>{item.label}</span>;
         };
         const buttonList = items.value.map((item, index) => (
-          <t-button
+          <TButton
             key={index}
             variant={'text'}
             block
@@ -71,7 +70,7 @@ export default defineComponent({
             onClick={() => handleSelected(index)}
           >
             {renderBadgeNode(item)}
-          </t-button>
+          </TButton>
         ));
         return buttonList;
       };
diff --git a/src/action-sheet/action-sheet.en-US.md b/src/action-sheet/action-sheet.en-US.md
index 2120dcd18..e3840e26c 100644
--- a/src/action-sheet/action-sheet.en-US.md
+++ b/src/action-sheet/action-sheet.en-US.md
@@ -6,13 +6,15 @@
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：center/left | N
+align | String | center | options: center/left | N
 cancelText | String | - | \- | N
 count | Number | 8 | \- | N
 description | String | - | \- | N
-items | Array | - | required。Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | Typescript：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | Typescript：`PopupProps`，[Popup API Documents](./popup?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | \- | N
-theme | String | list | options：list/grid | N
+showOverlay | Boolean | true | \- | N
+theme | String | list | options: list/grid | N
 visible | Boolean | false | required。`v-model` and `v-model:visible` is supported | Y
 defaultVisible | Boolean | false | required。uncontrolled property | Y
 onCancel | Function |  | Typescript：`(context: { e: MouseEvent }) => void`<br/> | N
@@ -27,8 +29,8 @@ cancel | `(context: { e: MouseEvent })` | \-
 close | `(trigger: ActionSheetTriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -43,4 +45,4 @@ Name | Default Value | Description
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -
\ No newline at end of file
diff --git a/src/action-sheet/action-sheet.md b/src/action-sheet/action-sheet.md
index 5886652e1..d58e3ca3c 100644
--- a/src/action-sheet/action-sheet.md
+++ b/src/action-sheet/action-sheet.md
@@ -1,16 +1,19 @@
 :: BASE_DOC ::
 
 ## API
+
 ### ActionSheet Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 水平对齐方式。可选项：center/left | N
 cancelText | String | - | 设置取消按钮的文本 | N
 count | Number | 8 | 设置每页展示菜单的数量，仅当 type=grid 时有效 | N
 description | String | - | 动作面板描述文字 | N
-items | Array | - | 必需。菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem {label: string; color?: string; disabled?: boolean }`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | Y
+items | Array | - | 菜单项。TS 类型：`Array<string \| ActionSheetItem>` `interface ActionSheetItem { label: string; color?: string; disabled?: boolean; icon?: TNode; badge?: BadgeProps }`，[Badge API Documents](./badge?tab=api)。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
+popupProps | Object | {} | 透传 Popup 组件全部属性。TS 类型：`PopupProps`，[Popup API Documents](./popup?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts) | N
 showCancel | Boolean | true | 是否显示取消按钮 | N
+showOverlay | Boolean | true | 是否显示遮罩层 | N
 theme | String | list | 展示类型，列表和表格形式展示。可选项：list/grid | N
 visible | Boolean | false | 必需。显示与隐藏。支持语法糖 `v-model` 或 `v-model:visible` | Y
 defaultVisible | Boolean | false | 必需。显示与隐藏。非受控属性 | Y
@@ -26,8 +29,8 @@ cancel | `(context: { e: MouseEvent })` | 点击取消按钮时触发
 close | `(trigger: ActionSheetTriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/action-sheet/type.ts)。<br/>`type ActionSheetTriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -42,4 +45,4 @@ selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单
 --td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
 --td-action-sheet-list-item-height | 56px | - 
 --td-action-sheet-text-align | center | - 
---td-action-sheet-text-weight | 400 | - 
+--td-action-sheet-text-weight | 400 | -
\ No newline at end of file
diff --git a/src/action-sheet/action-sheet.tsx b/src/action-sheet/action-sheet.tsx
index c243347fe..8891c1832 100644
--- a/src/action-sheet/action-sheet.tsx
+++ b/src/action-sheet/action-sheet.tsx
@@ -1,24 +1,18 @@
-import { watch, defineComponent, computed } from 'vue';
-import { useDefault } from '../shared';
-import ActionSheetList from './action-sheet-list';
-import ActionSheetGrid from './action-sheet-grid';
-import TPopup from '../popup';
+import { computed, defineComponent, watch } from 'vue';
+import TActionSheetGrid from './action-sheet-grid';
+import TActionSheetList from './action-sheet-list';
 import TButton from '../button';
+import TPopup from '../popup';
 import config from '../config';
-import { TdActionSheetProps, ActionSheetItem } from './type';
+import { useConfig, usePrefixClass } from '../hooks/useClass';
+import { useDefault } from '../shared';
 import props from './props';
-import { usePrefixClass, useConfig } from '../hooks/useClass';
+import { ActionSheetItem, TdActionSheetProps } from './type';
 
 const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-action-sheet`,
-  components: {
-    TPopup,
-    TButton,
-    ActionSheetList,
-    ActionSheetGrid,
-  },
   props,
   emits: ['selected', 'update:modelValue', 'cancel', 'close', 'update:visible'],
   setup(props, context) {
@@ -26,7 +20,7 @@ export default defineComponent({
     const { globalConfig } = useConfig('actionSheet');
 
     const actionItems = computed(() => {
-      return props.items.map((item: String | ActionSheetItem) => {
+      return props.items.map((item: string | ActionSheetItem) => {
         if (typeof item === 'string') {
           return {
             label: item,
@@ -89,12 +83,12 @@ export default defineComponent({
         };
         const list = () => {
           if (props.theme === 'list') {
-            return <action-sheet-list align={props.align} items={actionItems.value} onSelected={handleSelected} />;
+            return <TActionSheetList align={props.align} items={actionItems.value} onSelected={handleSelected} />;
           }
         };
         const grid = () => {
           if (props.theme === 'grid') {
-            return <action-sheet-grid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
+            return <TActionSheetGrid items={actionItems.value} count={props.count} onSelected={handleSelected} />;
           }
         };
         const cancel = () => {
@@ -102,9 +96,9 @@ export default defineComponent({
             return (
               <div class={`${actionSheetClass.value}__footer`}>
                 <div class={`${actionSheetClass.value}__gap-${props.theme}`}></div>
-                <t-button class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
+                <TButton class={`${actionSheetClass.value}__cancel`} variant="text" block onClick={handleCancel}>
                   {props.cancelText || globalConfig.value.cancel}
-                </t-button>
+                </TButton>
               </div>
             );
           }
@@ -119,15 +113,17 @@ export default defineComponent({
         );
       };
       return (
-        <t-popup
+        <TPopup
+          {...(props.popupProps as TdActionSheetProps['popupProps'])}
           visible={currentVisible.value}
           placement="bottom"
           destroy-on-close={true}
           class={actionSheetClass.value}
           onClose={handleClose}
+          showOverlay={props.showOverlay}
         >
           {root()}
-        </t-popup>
+        </TPopup>
       );
     };
   },
diff --git a/src/action-sheet/props.ts b/src/action-sheet/props.ts
index f9054fe49..e5c43c5b0 100644
--- a/src/action-sheet/props.ts
+++ b/src/action-sheet/props.ts
@@ -35,14 +35,22 @@ export default {
   /** 菜单项 */
   items: {
     type: Array as PropType<TdActionSheetProps['items']>,
-    default: [],
-    required: true,
+  },
+  /** 透传 Popup 组件全部属性 */
+  popupProps: {
+    type: Object as PropType<TdActionSheetProps['popupProps']>,
+    default: () => ({}),
   },
   /** 是否显示取消按钮 */
   showCancel: {
     type: Boolean,
     default: true,
   },
+  /** 是否显示遮罩层 */
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
   /** 展示类型，列表和表格形式展示 */
   theme: {
     type: String as PropType<TdActionSheetProps['theme']>,
diff --git a/src/action-sheet/type.ts b/src/action-sheet/type.ts
index 40600e119..822849002 100644
--- a/src/action-sheet/type.ts
+++ b/src/action-sheet/type.ts
@@ -3,8 +3,11 @@
 /**
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
+
+import { BadgeProps } from '../badge';
+import { PopupProps } from '../popup';
 import { TNode } from '../common';
-import { TdBadgeProps } from '../badge/type';
+
 export interface TdActionSheetProps {
   /**
    * 水平对齐方式
@@ -30,11 +33,21 @@ export interface TdActionSheetProps {
    * 菜单项
    */
   items?: Array<string | ActionSheetItem>;
+  /**
+   * 透传 Popup 组件全部属性
+   * @default {}
+   */
+  popupProps?: PopupProps;
   /**
    * 是否显示取消按钮
    * @default true
    */
   showCancel?: boolean;
+  /**
+   * 是否显示遮罩层
+   * @default true
+   */
+  showOverlay?: boolean;
   /**
    * 展示类型，列表和表格形式展示
    * @default list
@@ -74,7 +87,7 @@ export interface ActionSheetItem {
   color?: string;
   disabled?: boolean;
   icon?: TNode;
-  badge?: TdBadgeProps;
+  badge?: BadgeProps;
 }
 
 export type ActionSheetTriggerSource = 'overlay' | 'command' | 'select';
diff --git a/src/badge/__test__/__snapshots__/demo.test.jsx.snap b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
index d1168644c..6f06e5235 100644
--- a/src/badge/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/badge/__test__/__snapshots__/demo.test.jsx.snap
@@ -623,7 +623,7 @@ exports[`Badge > Badge mobileVue demo works fine 1`] = `
           角标
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1037,7 +1037,7 @@ exports[`Badge > Badge themeVue demo works fine 1`] = `
     角标
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
diff --git a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
index d35f248bf..2e84e2e74 100644
--- a/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/calendar/__test__/__snapshots__/demo.test.jsx.snap
@@ -2566,7 +2566,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -2587,7 +2587,7 @@ exports[`Calendar > Calendar baseVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -5179,7 +5179,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -5200,7 +5200,7 @@ exports[`Calendar > Calendar customButtonVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -5697,7 +5697,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -5718,7 +5718,7 @@ exports[`Calendar > Calendar customRangeVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -6792,7 +6792,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -6813,7 +6813,7 @@ exports[`Calendar > Calendar customTextVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -9436,7 +9436,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -9457,7 +9457,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -12043,7 +12043,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -12064,7 +12064,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -14650,7 +14650,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             <!--teleport end-->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -14671,7 +14671,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -15763,7 +15763,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -15784,7 +15784,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -18370,7 +18370,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -18391,7 +18391,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -18881,7 +18881,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -18902,7 +18902,7 @@ exports[`Calendar > Calendar mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -24034,7 +24034,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -24055,7 +24055,7 @@ exports[`Calendar > Calendar multipleVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -26644,7 +26644,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -26665,7 +26665,7 @@ exports[`Calendar > Calendar rangeVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
diff --git a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
index a6598b87b..75009a551 100644
--- a/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cascader/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -31,7 +31,7 @@ exports[`Cascader > Cascader baseVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -221,7 +221,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-e4157e3c=""
   >
     <div
@@ -247,7 +247,7 @@ exports[`Cascader > Cascader checkStrictlyVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -432,7 +432,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -457,7 +457,7 @@ exports[`Cascader > Cascader keysVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -647,7 +647,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -672,7 +672,7 @@ exports[`Cascader > Cascader lazyVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -863,7 +863,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -888,7 +888,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1091,7 +1091,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1116,7 +1116,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1294,7 +1294,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1319,7 +1319,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1522,7 +1522,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1547,7 +1547,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1750,7 +1750,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1775,7 +1775,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1982,7 +1982,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -2007,7 +2007,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -2180,7 +2180,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-e4157e3c=""
       >
         <div
@@ -2206,7 +2206,7 @@ exports[`Cascader > Cascader mobileVue demo works fine 1`] = `
           请选择地址
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -2394,7 +2394,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -2419,7 +2419,7 @@ exports[`Cascader > Cascader themeTabVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -2580,7 +2580,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -2605,7 +2605,7 @@ exports[`Cascader > Cascader withTitleVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -2799,7 +2799,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -2824,7 +2824,7 @@ exports[`Cascader > Cascader withValueVue demo works fine 1`] = `
       请选择地址
     </div>
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
diff --git a/src/cascader/__test__/index.test.jsx b/src/cascader/__test__/index.test.jsx
index dd4c6587b..6dec17bce 100644
--- a/src/cascader/__test__/index.test.jsx
+++ b/src/cascader/__test__/index.test.jsx
@@ -7,6 +7,9 @@ import Radio from '../../radio/index';
 import { Tabs as TTabs, TabPanel as TTabPanel } from '../../tabs';
 import prefixConfig from '../../config';
 
+// scrollTo isn't implemented in JSDOM，see: https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {};
+
 const { prefix } = prefixConfig;
 
 config.global.stubs = {
diff --git a/src/cell/__test__/__snapshots__/demo.test.jsx.snap b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
index be172143f..d7432c751 100644
--- a/src/cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -8,7 +8,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
   >
     
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -17,14 +17,14 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
           class="t-cell__left-icon"
         >
           <svg
-            class="t-icon t-icon-lock-on"
+            class="t-icon t-icon-app"
             fill="none"
             height="1em"
             viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+              d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
               fill="currentColor"
             />
           </svg>
@@ -44,7 +44,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -65,7 +65,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -101,7 +101,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -122,7 +122,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -158,7 +158,7 @@ exports[`Cell > Cell groupVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -231,7 +231,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -252,7 +252,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -273,7 +273,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -298,7 +298,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -319,7 +319,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -359,7 +359,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               
             </div>
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -380,7 +380,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -421,7 +421,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             <!---->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -446,7 +446,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               辅助信息
             </div>
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -467,7 +467,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -476,14 +476,14 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 class="t-cell__left-icon"
               >
                 <svg
-                  class="t-icon t-icon-lock-on"
+                  class="t-icon t-icon-app"
                   fill="none"
                   height="1em"
                   viewBox="0 0 24 24"
                   width="1em"
                 >
                   <path
-                    d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+                    d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
                     fill="currentColor"
                   />
                 </svg>
@@ -503,7 +503,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -556,7 +556,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -581,7 +581,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -602,7 +602,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -631,7 +631,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -652,7 +652,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -696,7 +696,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               
             </div>
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -717,7 +717,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -762,7 +762,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             <!---->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -791,7 +791,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               辅助信息
             </div>
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -812,7 +812,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -822,14 +822,14 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               >
                 
                 <svg
-                  class="t-icon t-icon-lock-on"
+                  class="t-icon t-icon-app"
                   fill="none"
                   height="1em"
                   viewBox="0 0 24 24"
                   width="1em"
                 >
                   <path
-                    d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+                    d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
                     fill="currentColor"
                   />
                 </svg>
@@ -854,7 +854,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -875,7 +875,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -902,7 +902,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             <!---->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -929,7 +929,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             <!---->
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1014,7 +1014,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               <div
                 class="t-cell__title-text"
               >
-                多行带头像
+                单行标题
                 <!---->
               </div>
               <div
@@ -1025,7 +1025,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -1046,7 +1046,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1063,7 +1063,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
               <div
                 class="t-cell__title-text"
               >
-                多行带图片
+                单行标题
                 <!---->
               </div>
               <div
@@ -1112,7 +1112,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
         >
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1121,14 +1121,14 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
                 class="t-cell__left-icon"
               >
                 <svg
-                  class="t-icon t-icon-lock-on"
+                  class="t-icon t-icon-app"
                   fill="none"
                   height="1em"
                   viewBox="0 0 24 24"
                   width="1em"
                 >
                   <path
-                    d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+                    d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
                     fill="currentColor"
                   />
                 </svg>
@@ -1148,7 +1148,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -1169,7 +1169,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1205,7 +1205,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -1226,7 +1226,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
           </div>
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1262,7 +1262,7 @@ exports[`Cell > Cell mobileVue demo works fine 1`] = `
             </div>
             <!---->
             <div
-              class="t-cell__right"
+              class="t-cell__right t-cell__right--middle"
             >
               <div
                 class="t-cell__right-icon"
@@ -1299,7 +1299,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
   >
     
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1324,7 +1324,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1345,7 +1345,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1374,7 +1374,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1395,7 +1395,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1439,7 +1439,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
         
       </div>
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1460,7 +1460,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1505,7 +1505,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       <!---->
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1534,7 +1534,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
         辅助信息
       </div>
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1555,7 +1555,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1565,14 +1565,14 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
         >
           
           <svg
-            class="t-icon t-icon-lock-on"
+            class="t-icon t-icon-app"
             fill="none"
             height="1em"
             viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+              d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
               fill="currentColor"
             />
           </svg>
@@ -1597,7 +1597,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1618,7 +1618,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1645,7 +1645,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       <!---->
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1672,7 +1672,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       <!---->
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1757,7 +1757,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
         <div
           class="t-cell__title-text"
         >
-          多行带头像
+          单行标题
           <!---->
         </div>
         <div
@@ -1768,7 +1768,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1789,7 +1789,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1806,7 +1806,7 @@ exports[`Cell > Cell multipleVue demo works fine 1`] = `
         <div
           class="t-cell__title-text"
         >
-          多行带图片
+          单行标题
           <!---->
         </div>
         <div
@@ -1831,7 +1831,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
   >
     
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1852,7 +1852,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1873,7 +1873,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1898,7 +1898,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1919,7 +1919,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -1959,7 +1959,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
         
       </div>
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -1980,7 +1980,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -2021,7 +2021,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       <!---->
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -2046,7 +2046,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
         辅助信息
       </div>
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
@@ -2067,7 +2067,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
     </div>
     <div
-      class="t-cell t-cell--middle"
+      class="t-cell"
     >
       <div
         class="t-cell__left"
@@ -2076,14 +2076,14 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
           class="t-cell__left-icon"
         >
           <svg
-            class="t-icon t-icon-lock-on"
+            class="t-icon t-icon-app"
             fill="none"
             height="1em"
             viewBox="0 0 24 24"
             width="1em"
           >
             <path
-              d="M12 3a4 4 0 014 4v3H8V7a4 4 0 014-4zm6 7V7A6 6 0 006 7v3H3.5v12h17V10H18zM5.5 12h13v8h-13v-8zM9 15h6v2H9v-2z"
+              d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
               fill="currentColor"
             />
           </svg>
@@ -2103,7 +2103,7 @@ exports[`Cell > Cell singleVue demo works fine 1`] = `
       </div>
       <!---->
       <div
-        class="t-cell__right"
+        class="t-cell__right t-cell__right--middle"
       >
         <div
           class="t-cell__right-icon"
diff --git a/src/cell/__test__/index.test.jsx b/src/cell/__test__/index.test.jsx
index cbad39fa9..3074509cc 100644
--- a/src/cell/__test__/index.test.jsx
+++ b/src/cell/__test__/index.test.jsx
@@ -58,8 +58,9 @@ describe('Cell.vue', async () => {
 
   it('align render', async () => {
     alignList.forEach((a) => {
-      const wrapper = mount(() => <Cell title="单行标题" align={a}></Cell>);
-      expect(wrapper.classes()).toContain(`t-cell--${a}`);
+      const wrapper = mount(() => <Cell title="单行标题" align={a} arrow></Cell>);
+      const rightAlign = wrapper.find(`.t-cell__right--${a}`);
+      expect(rightAlign.exists()).toBeTruthy();
     });
   });
 
diff --git a/src/cell/cell.md b/src/cell/cell.md
index b690a4a9e..bc6e1d575 100644
--- a/src/cell/cell.md
+++ b/src/cell/cell.md
@@ -6,7 +6,7 @@
 
 名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
-align | String | middle | 内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
+align | String | middle | 右侧内容的对齐方式，默认居中对齐。可选项：top/middle/bottom | N
 arrow | Boolean | false | 是否显示右侧箭头 | N
 bordered | Boolean | true | 是否显示下边框 | N
 description | String / Slot / Function | - | 下方内容描述。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/cell/cell.tsx b/src/cell/cell.tsx
index d088e5fa3..a199e5a96 100644
--- a/src/cell/cell.tsx
+++ b/src/cell/cell.tsx
@@ -14,14 +14,13 @@ export default defineComponent({
   directives: { Hover },
   props,
   setup(props) {
-    const readerTNodeJSX = useTNodeJSX();
-    const readerTNodeContent = useContent();
+    const renderTNodeJSX = useTNodeJSX();
+    const renderTNodeContent = useContent();
     const disabled = useFormDisabled();
     const cellClass = usePrefixClass('cell');
 
     const cellClasses = computed(() => [
       `${cellClass.value}`,
-      `${cellClass.value}--${props.align}`,
       {
         [`${cellClass.value}--borderless`]: !props.bordered,
       },
@@ -35,30 +34,30 @@ export default defineComponent({
       }
     };
 
-    const readerImage = () => {
+    const renderImage = () => {
       if (typeof props.image === 'string') {
         return <img src={props.image} class={`${cellClass.value}__left-image`} />;
       }
-      const image = readerTNodeJSX('image');
+      const image = renderTNodeJSX('image');
 
       return image;
     };
 
-    const readerLeft = () => {
-      const leftIcon = readerTNodeJSX('leftIcon');
+    const renderLeft = () => {
+      const leftIcon = renderTNodeJSX('leftIcon');
       return (
         <div class={`${cellClass.value}__left`}>
           {leftIcon && <div class={`${cellClass.value}__left-icon`}>{leftIcon}</div>}
-          {readerImage()}
+          {renderImage()}
         </div>
       );
     };
-    const readerTitle = () => {
-      const title = readerTNodeJSX('title');
+    const renderTitle = () => {
+      const title = renderTNodeJSX('title');
       if (!title) {
         return null;
       }
-      const description = readerTNodeJSX('description');
+      const description = renderTNodeJSX('description');
       return (
         <div class={`${cellClass.value}__title`}>
           <div class={`${cellClass.value}__title-text`}>
@@ -69,30 +68,30 @@ export default defineComponent({
         </div>
       );
     };
-    const readerRight = () => {
-      const rightIcon = props.arrow ? <ChevronRightIcon /> : readerTNodeJSX('rightIcon');
+    const renderRight = () => {
+      const rightIcon = props.arrow ? <ChevronRightIcon /> : renderTNodeJSX('rightIcon');
       if (!rightIcon) {
         return null;
       }
       return (
-        <div class={`${cellClass.value}__right`}>
+        <div class={[`${cellClass.value}__right`, `${cellClass.value}__right--${props.align}`]}>
           <div class={`${cellClass.value}__right-icon`}>{rightIcon}</div>
         </div>
       );
     };
 
     return () => {
-      const note = readerTNodeContent('default', 'note');
+      const note = renderTNodeContent('default', 'note');
       return (
         <div
           v-hover={{ className: `${cellClass.value}--hover`, disabledHover: hoverDisabled.value }}
           class={cellClasses.value}
           onClick={handleClick}
         >
-          {readerLeft()}
-          {readerTitle()}
+          {renderLeft()}
+          {renderTitle()}
           {note && <div class={`${cellClass.value}__note`}>{note}</div>}
-          {readerRight()}
+          {renderRight()}
         </div>
       );
     };
diff --git a/src/cell/demos/group.vue b/src/cell/demos/group.vue
index 482bb1245..184495de8 100644
--- a/src/cell/demos/group.vue
+++ b/src/cell/demos/group.vue
@@ -1,6 +1,6 @@
 <template>
   <t-cell-group theme="card">
-    <t-cell :left-icon="lock" title="单行标题" arrow />
+    <t-cell :left-icon="app" title="单行标题" arrow />
     <t-cell :left-icon="service" title="单行标题" arrow />
     <t-cell :left-icon="internet" title="单行标题" arrow />
   </t-cell-group>
@@ -8,9 +8,9 @@
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { LockOnIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-vue-next';
+import { AppIcon, ServiceIcon, InternetIcon } from 'tdesign-icons-vue-next';
 
-const lock = () => h(LockOnIcon);
+const app = () => h(AppIcon);
 const service = () => h(ServiceIcon);
 const internet = () => h(InternetIcon);
 </script>
diff --git a/src/cell/demos/multiple.vue b/src/cell/demos/multiple.vue
index 7c8e4c40a..e371d10ce 100644
--- a/src/cell/demos/multiple.vue
+++ b/src/cell/demos/multiple.vue
@@ -15,7 +15,7 @@
     <t-cell title="单行标题" description="一段很长很长的内容文字" note="辅助信息" arrow />
     <t-cell title="单行标题" description="一段很长很长的内容文字" arrow>
       <template #leftIcon>
-        <LockOnIcon />
+        <AppIcon />
       </template>
     </t-cell>
     <t-cell title="单行标题" description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容" />
@@ -23,18 +23,18 @@
       title="多行高度不定，长文本自动换行，该选项的描述是一段很长的内容"
       description="一段很长很长的内容文字，长文本自动换行，该选项的描述是一段很长的内容"
     />
-    <t-cell title="多行带头像" description="一段很长很长的内容文字" :right-icon="chevronRightIcon">
+    <t-cell title="单行标题" description="一段很长很长的内容文字" :right-icon="chevronRightIcon">
       <template #leftIcon>
         <t-avatar shape="circle" :image="avatarUrl" />
       </template>
     </t-cell>
-    <t-cell title="多行带图片" description="一段很长很长的内容文字" :image="imgUrl" />
+    <t-cell title="单行标题" description="一段很长很长的内容文字" :image="imgUrl" />
   </t-cell-group>
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { ChevronRightIcon, LockOnIcon } from 'tdesign-icons-vue-next';
+import { ChevronRightIcon, AppIcon } from 'tdesign-icons-vue-next';
 
 const chevronRightIcon = () => h(ChevronRightIcon);
 const avatarUrl = 'https://tdesign.gtimg.com/mobile/demos/avatar1.png';
diff --git a/src/cell/demos/single.vue b/src/cell/demos/single.vue
index 658d05b45..efac87f72 100644
--- a/src/cell/demos/single.vue
+++ b/src/cell/demos/single.vue
@@ -13,14 +13,14 @@
       </template>
     </t-cell>
     <t-cell title="单行标题" note="辅助信息" arrow hover />
-    <t-cell title="单行标题" :left-icon="lockIcon" arrow hover />
+    <t-cell title="单行标题" :left-icon="appIcon" arrow hover />
   </t-cell-group>
 </template>
 
 <script lang="ts" setup>
 import { h } from 'vue';
-import { LockOnIcon } from 'tdesign-icons-vue-next';
+import { AppIcon } from 'tdesign-icons-vue-next';
 import { Switch as TSwitch, Badge as TBadge } from 'tdesign-mobile-vue';
 
-const lockIcon = () => h(LockOnIcon);
+const appIcon = () => h(AppIcon);
 </script>
diff --git a/src/cell/props.ts b/src/cell/props.ts
index d023a2290..2ce2c3c17 100644
--- a/src/cell/props.ts
+++ b/src/cell/props.ts
@@ -8,7 +8,7 @@ import { TdCellProps } from './type';
 import { PropType } from 'vue';
 
 export default {
-  /** 内容的对齐方式，默认居中对齐 */
+  /** 右侧内容的对齐方式，默认居中对齐 */
   align: {
     type: String as PropType<TdCellProps['align']>,
     default: 'middle' as TdCellProps['align'],
diff --git a/src/cell/type.ts b/src/cell/type.ts
index 334a60464..beda427cd 100644
--- a/src/cell/type.ts
+++ b/src/cell/type.ts
@@ -8,7 +8,7 @@ import { TNode } from '../common';
 
 export interface TdCellProps {
   /**
-   * 内容的对齐方式，默认居中对齐
+   * 右侧内容的对齐方式，默认居中对齐
    * @default middle
    */
   align?: 'top' | 'middle' | 'bottom';
diff --git a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
index 793ca3ec4..800d19b01 100644
--- a/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/checkbox/__test__/__snapshots__/demo.test.jsx.snap
@@ -37,7 +37,7 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
           <div
             class="t-checkbox__description"
           >
-            
+            <!---->
           </div>
         </div>
         <div
@@ -74,7 +74,7 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
           <div
             class="t-checkbox__description"
           >
-            
+            <!---->
           </div>
         </div>
         <div
@@ -111,7 +111,7 @@ exports[`Checkbox > Checkbox allVue demo works fine 1`] = `
           <div
             class="t-checkbox__description"
           >
-            
+            <!---->
           </div>
         </div>
         <div
@@ -197,7 +197,7 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
         <div
           class="t-checkbox__description"
         >
-          
+          <!---->
         </div>
       </div>
       <div
@@ -234,7 +234,7 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
         <div
           class="t-checkbox__description"
         >
-          
+          <!---->
         </div>
       </div>
       <div
@@ -265,7 +265,7 @@ exports[`Checkbox > Checkbox baseVue demo works fine 1`] = `
         <div
           class="t-checkbox__description"
         >
-          
+          <!---->
         </div>
       </div>
       <div
@@ -616,7 +616,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__description"
                 >
-                  
+                  <!---->
                 </div>
               </div>
               <div
@@ -653,7 +653,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__description"
                 >
-                  
+                  <!---->
                 </div>
               </div>
               <div
@@ -684,7 +684,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                 <div
                   class="t-checkbox__description"
                 >
-                  
+                  <!---->
                 </div>
               </div>
               <div
@@ -917,7 +917,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <div
                     class="t-checkbox__description"
                   >
-                    
+                    <!---->
                   </div>
                 </div>
                 <div
@@ -954,7 +954,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <div
                     class="t-checkbox__description"
                   >
-                    
+                    <!---->
                   </div>
                 </div>
                 <div
@@ -991,7 +991,7 @@ exports[`Checkbox > Checkbox mobileVue demo works fine 1`] = `
                   <div
                     class="t-checkbox__description"
                   >
-                    
+                    <!---->
                   </div>
                 </div>
                 <div
diff --git a/src/checkbox/checkbox-group.tsx b/src/checkbox/checkbox-group.tsx
index c67c2129c..cc8eadcdf 100644
--- a/src/checkbox/checkbox-group.tsx
+++ b/src/checkbox/checkbox-group.tsx
@@ -99,6 +99,7 @@ export default defineComponent({
       innerValue,
       checkAllStatus,
       checkedSet,
+      maxExceeded,
       onCheckedChange,
     });
     return () => {
@@ -106,24 +107,7 @@ export default defineComponent({
         return (
           <span>
             {optionList.value.map((item, idx) => (
-              <checkbox
-                key={idx}
-                name={item.name || ''}
-                label={item.label || item.text || ''}
-                value={item.value}
-                check-all={item.checkAll}
-                block={item.block || true}
-                checked={item.checked || false}
-                content={item.content || ''}
-                content-disabled={item.contentDisabled || false}
-                icon={item.icon || 'circle'}
-                indeterminate={item.indeterminate || false}
-                disabled={item.disabled}
-                max-content-row={item.maxContentRow || 5}
-                max-label-row={item.maxLabelRow || 3}
-                readonly={item.readonly || false}
-                placement={item.placement || 'left'}
-              />
+              <Checkbox {...item} key={`${item.value || ''}${idx}`} label={item.label || item.text || ''} />
             ))}
           </span>
         );
diff --git a/src/checkbox/checkbox.tsx b/src/checkbox/checkbox.tsx
index ef240835a..d7f94ab56 100644
--- a/src/checkbox/checkbox.tsx
+++ b/src/checkbox/checkbox.tsx
@@ -78,9 +78,9 @@ export default defineComponent({
     });
 
     const isDisabled = computed(() => {
-      if (checkboxGroup?.max.value)
-        return checkboxGroup.max.value <= checkboxGroup.innerValue.value.length && !isChecked.value;
-
+      if (!props.checkAll && !isChecked.value && checkboxGroup?.maxExceeded.value) {
+        return true;
+      }
       return disabled.value;
     });
 
diff --git a/src/checkbox/hooks/getOptions.ts b/src/checkbox/hooks/getOptions.ts
index 93964e43e..fe9364df9 100644
--- a/src/checkbox/hooks/getOptions.ts
+++ b/src/checkbox/hooks/getOptions.ts
@@ -29,7 +29,6 @@ export const getOptions = (props: any, slots: Slots) => {
           r = { label: String(item), value: item };
         } else {
           r = { ...item };
-          r.disabled = r.disabled === undefined ? props.disabled : r.disabled;
         }
         return r;
       });
diff --git a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
index 21215929d..5708fa889 100644
--- a/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/collapse/__test__/__snapshots__/demo.test.jsx.snap
@@ -13,7 +13,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
       >
         <div
           class="t-cell__left"
@@ -42,7 +42,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
           
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -97,7 +97,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -126,7 +126,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
           
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -181,7 +181,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -210,7 +210,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
           
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -265,7 +265,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -294,7 +294,7 @@ exports[`Collapse > Collapse accordionVue demo works fine 1`] = `
           
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -359,7 +359,7 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
       >
         <div
           class="t-cell__left"
@@ -388,7 +388,7 @@ exports[`Collapse > Collapse actionVue demo works fine 1`] = `
           
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -452,7 +452,7 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -475,7 +475,7 @@ exports[`Collapse > Collapse baseVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -540,7 +540,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
       >
         <div
           class="t-cell__left"
@@ -563,7 +563,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -618,7 +618,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -641,7 +641,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -696,7 +696,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -719,7 +719,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -774,7 +774,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
       >
         <div
           class="t-cell__left"
@@ -797,7 +797,7 @@ exports[`Collapse > Collapse cardVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -896,7 +896,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -919,7 +919,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1000,7 +1000,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--top"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--top"
             >
               <div
                 class="t-cell__left"
@@ -1023,7 +1023,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1100,7 +1100,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
             >
               <div
                 class="t-cell__left"
@@ -1129,7 +1129,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
                 
               </div>
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1211,7 +1211,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
             >
               <div
                 class="t-cell__left"
@@ -1240,7 +1240,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
                 
               </div>
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1295,7 +1295,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1324,7 +1324,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
                 
               </div>
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1379,7 +1379,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1408,7 +1408,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
                 
               </div>
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1463,7 +1463,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1492,7 +1492,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
                 
               </div>
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1579,7 +1579,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom t-collapse-panel__header--expanded"
             >
               <div
                 class="t-cell__left"
@@ -1602,7 +1602,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1657,7 +1657,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1680,7 +1680,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1735,7 +1735,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1758,7 +1758,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1813,7 +1813,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
             class="t-collapse-panel__title"
           >
             <div
-              class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--bottom"
+              class="t-cell t-collapse-panel__header t-collapse-panel__header--bottom"
             >
               <div
                 class="t-cell__left"
@@ -1836,7 +1836,7 @@ exports[`Collapse > Collapse mobileVue demo works fine 1`] = `
               </div>
               <!---->
               <div
-                class="t-cell__right"
+                class="t-cell__right t-cell__right--middle"
               >
                 <div
                   class="t-cell__right-icon"
@@ -1905,7 +1905,7 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
       class="t-collapse-panel__title"
     >
       <div
-        class="t-cell t-cell--middle t-collapse-panel__header t-collapse-panel__header--top"
+        class="t-cell t-collapse-panel__header t-collapse-panel__header--top"
       >
         <div
           class="t-cell__left"
@@ -1928,7 +1928,7 @@ exports[`Collapse > Collapse placementVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
diff --git a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
index be07a4cd4..b4066a1bd 100644
--- a/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/config-provider/__test__/__snapshots__/demo.test.jsx.snap
@@ -3128,7 +3128,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         <!--teleport end-->
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-0f72cd9e=""
       >
         <div
@@ -3150,7 +3150,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -3171,7 +3171,7 @@ exports[`ConfigProvider > ConfigProvider mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-0f72cd9e=""
       >
         <div
@@ -6398,7 +6398,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     <!--teleport end-->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-0f72cd9e=""
   >
     <div
@@ -6420,7 +6420,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -6441,7 +6441,7 @@ exports[`ConfigProvider > ConfigProvider otherEnVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-0f72cd9e=""
   >
     <div
diff --git a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
index 1f730be3b..c614778a5 100644
--- a/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/date-time-picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`DateTimePicker > DateTimePicker baseVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -578,7 +578,7 @@ exports[`DateTimePicker > DateTimePicker customRangeVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -1045,7 +1045,7 @@ exports[`DateTimePicker > DateTimePicker fullVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -2689,7 +2689,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -3254,7 +3254,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -3591,7 +3591,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -4309,7 +4309,7 @@ exports[`DateTimePicker > DateTimePicker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -4779,7 +4779,7 @@ exports[`DateTimePicker > DateTimePicker timeVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -5480,7 +5480,7 @@ exports[`DateTimePicker > DateTimePicker yearMonthVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
diff --git a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
index 0bc3439a1..f6bfc4f30 100644
--- a/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/dialog/__test__/__snapshots__/demo.test.jsx.snap
@@ -29,7 +29,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -122,7 +122,7 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -184,6 +184,91 @@ exports[`Dialog > Dialog confirmVue demo works fine 1`] = `
     
   </div>
   <!--teleport end-->
+  <div
+    class="btn-gap"
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      确认类-纯标题
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确定
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
   
 </div>
 `;
@@ -217,7 +302,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -297,7 +382,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -373,7 +458,7 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -398,7 +483,11 @@ exports[`Dialog > Dialog feedbackVue demo works fine 1`] = `
             class="t-dialog__body-text"
           >
             
-            这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.
+            <div
+              class="content-container"
+            >
+              这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
+            </div>
             
           </div>
         </div>
@@ -449,7 +538,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      图片置顶
+      图片置顶-带标题描述
       
     </span>
     <!---->
@@ -462,7 +551,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -589,7 +678,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      图片居中
+      图片置顶-无标题
       
     </span>
     <!---->
@@ -602,7 +691,7 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -610,29 +699,9 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
-      <div
-        class="t-dialog__content"
-      >
-        <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
-        >
-          <div
-            class="t-dialog__body-text"
-          >
-            告知当前状态、信息和解决方法
-          </div>
-        </div>
-      </div>
       
       <div
-        class="t-image t-image--square image"
+        class="t-image t-image--square"
         data-v-ddf95d52=""
       >
         <div
@@ -676,6 +745,22 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
         </picture>
       </div>
       
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <!---->
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            告知当前状态、信息和解决方法
+          </div>
+        </div>
+      </div>
+      <!---->
       <div
         class="t-dialog__footer"
       >
@@ -713,19 +798,14 @@ exports[`Dialog > Dialog imageDialogVue demo works fine 1`] = `
     
   </div>
   <!--teleport end-->
-  
-</div>
-`;
-
-exports[`Dialog > Dialog inputVue demo works fine 1`] = `
-<div
-  data-v-app=""
->
-  
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
     role="button"
     type="button"
   >
@@ -734,7 +814,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      输入类-无描述
+      图片置顶-纯标题
       
     </span>
     <!---->
@@ -747,7 +827,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -755,71 +835,71 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
+      
       <div
-        class="t-dialog__content"
+        class="t-image t-image--square"
+        data-v-ddf95d52=""
       >
         <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
+          class="t-image__mask"
         >
           <div
-            class="t-dialog__body-text"
+            class="t-loading"
+            style="font-size: 20px;"
           >
-            
             <div
-              class="t-input t-input--layout-horizontal t-input--border"
-              data-v-4a76bf3d=""
+              class="t-loading__dots"
+              style="animation-duration: 800ms; width: 20px; height: 20px;"
             >
+              
               <div
-                class="t-input__wrap--prefix"
-              >
-                <!---->
-                <div
-                  class="t-input__label"
-                >
-                  <!---->
-                </div>
-              </div>
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0s;"
+              />
               <div
-                class="t-input__wrap"
-              >
-                <div
-                  class="t-input__content t-input--default"
-                >
-                  <input
-                    autocomplete="Off"
-                    class="t-input__control t-input--default"
-                    name=""
-                    placeholder="请输入文字"
-                    spellcheck="false"
-                    style="--td-input-cursor-color: #0052d9;"
-                    type="text"
-                  />
-                  <!---->
-                  <!---->
-                  <!---->
-                </div>
-                <!---->
-              </div>
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+              />
+              <div
+                class="t-loading__dot"
+                style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+              />
+              
             </div>
-            
+            <!---->
+            <!---->
           </div>
         </div>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
       </div>
+      
       <!---->
       <div
-        class="t-dialog__footer t-dialog__footer--full"
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
       >
         <!---->
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
           role="button"
           type="button"
         >
@@ -833,7 +913,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
         </button>
         <button
           aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
           role="button"
           type="button"
         >
@@ -852,12 +932,12 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
   <!--teleport end-->
   <div
     class="btn-gap"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
   />
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-    data-v-4a76bf3d=""
+    data-v-ddf95d52=""
     role="button"
     type="button"
   >
@@ -866,7 +946,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-      输入类-带描述
+      图片置顶-纯图片
       
     </span>
     <!---->
@@ -879,7 +959,7 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -887,146 +967,1126 @@ exports[`Dialog > Dialog inputVue demo works fine 1`] = `
     <div
       class="t-dialog "
     >
-      <!---->
-      <!---->
+      
       <div
-        class="t-dialog__content"
+        class="t-image t-image--square"
+        data-v-ddf95d52=""
       >
         <div
-          class="t-dialog__header"
-        >
-          对话框标题
-        </div>
-        <div
-          class="t-dialog__body"
+          class="t-image__mask"
         >
           <div
-            class="t-dialog__body-text"
+            class="t-loading"
+            style="font-size: 20px;"
           >
-            
-            <p
-              data-v-4a76bf3d=""
-            >
+            <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>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <!---->
+        <!---->
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-ddf95d52=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      图片居中-带标题描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            告知当前状态、信息和解决方法
+          </div>
+        </div>
+      </div>
+      
+      <div
+        class="t-image t-image--square image"
+        data-v-ddf95d52=""
+      >
+        <div
+          class="t-image__mask"
+        >
+          <div
+            class="t-loading"
+            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>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-ddf95d52=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-ddf95d52=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      图片居中-纯标题
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <!---->
+      </div>
+      
+      <div
+        class="t-image t-image--square image"
+        data-v-ddf95d52=""
+      >
+        <div
+          class="t-image__mask"
+        >
+          <div
+            class="t-loading"
+            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>
+        <picture>
+          <!---->
+          <img
+            alt=""
+            class="t-image__img"
+            src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+            style="object-fit: contain; object-position: center;"
+          />
+        </picture>
+      </div>
+      
+      <div
+        class="t-dialog__footer"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`Dialog > Dialog inputVue demo works fine 1`] = `
+<div
+  data-v-app=""
+>
+  
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-4a76bf3d=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      输入类-无描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            
+            <div
+              class="t-input t-input--layout-horizontal t-input--border"
+              data-v-4a76bf3d=""
+            >
+              <div
+                class="t-input__wrap--prefix"
+              >
+                <!---->
+                <div
+                  class="t-input__label"
+                >
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="t-input__wrap"
+              >
+                <div
+                  class="t-input__content t-input--default"
+                >
+                  <input
+                    autocomplete="Off"
+                    class="t-input__control t-input--default"
+                    name=""
+                    placeholder="请输入文字"
+                    spellcheck="false"
+                    style="--td-input-cursor-color: #0052d9;"
+                    type="text"
+                  />
+                  <!---->
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer t-dialog__footer--full"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  <div
+    class="btn-gap"
+    data-v-4a76bf3d=""
+  />
+  <button
+    aria-disabled="false"
+    class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+    data-v-4a76bf3d=""
+    role="button"
+    type="button"
+  >
+    <!---->
+    <span
+      class="t-button__content"
+    >
+      
+      输入类-带描述
+      
+    </span>
+    <!---->
+  </button>
+  <!--teleport start-->
+  <div
+    class="t-overlay"
+    style="z-index: 1000; transition-duration: 300ms; display: none;"
+  >
+    <!---->
+  </div>
+  <div
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+    style="display: none;"
+  >
+    <!---->
+    
+    <div
+      class="t-dialog "
+    >
+      <!---->
+      <!---->
+      <div
+        class="t-dialog__content"
+      >
+        <div
+          class="t-dialog__header"
+        >
+          对话框标题
+        </div>
+        <div
+          class="t-dialog__body"
+        >
+          <div
+            class="t-dialog__body-text"
+          >
+            
+            <p
+              data-v-4a76bf3d=""
+            >
               告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
             </p>
             <div
-              class="t-input t-input--layout-horizontal t-input--border"
-              data-v-4a76bf3d=""
+              class="t-input t-input--layout-horizontal t-input--border"
+              data-v-4a76bf3d=""
+            >
+              <div
+                class="t-input__wrap--prefix"
+              >
+                <!---->
+                <div
+                  class="t-input__label"
+                >
+                  <!---->
+                </div>
+              </div>
+              <div
+                class="t-input__wrap"
+              >
+                <div
+                  class="t-input__content t-input--default"
+                >
+                  <input
+                    autocomplete="Off"
+                    class="t-input__control t-input--default"
+                    name=""
+                    placeholder="请输入文字"
+                    spellcheck="false"
+                    style="--td-input-cursor-color: #0052d9;"
+                    type="text"
+                  />
+                  <!---->
+                  <!---->
+                  <!---->
+                </div>
+                <!---->
+              </div>
+            </div>
+            
+          </div>
+        </div>
+      </div>
+      <!---->
+      <div
+        class="t-dialog__footer t-dialog__footer--full"
+      >
+        <!---->
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            取消
+          </span>
+          <!---->
+        </button>
+        <button
+          aria-disabled="false"
+          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+          role="button"
+          type="button"
+        >
+          <!---->
+          <span
+            class="t-button__content"
+          >
+            确认
+          </span>
+          <!---->
+        </button>
+      </div>
+    </div>
+    
+  </div>
+  <!--teleport end-->
+  
+</div>
+`;
+
+exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
+<div
+  class="tdesign-mobile-demo"
+>
+  <h1
+    class="title"
+  >
+    Dialog 对话框
+  </h1>
+  <p
+    class="summary"
+  >
+    用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
+  </p>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <h2
+        class="tdesign-mobile-demo-block__title"
+      >
+        01 组件类型
+      </h2>
+      <p
+        class="tdesign-mobile-demo-block__summary"
+      >
+        反馈类对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-基础 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-无标题 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <!---->
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+           反馈类-内容超长 
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
             >
               <div
-                class="t-input__wrap--prefix"
+                class="t-dialog__body-text"
               >
-                <!---->
+                
                 <div
-                  class="t-input__label"
+                  class="content-container"
                 >
-                  <!---->
+                  这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案
                 </div>
+                
               </div>
+            </div>
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                知道了
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
+      </div>
+      <!--teleport end-->
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        确认类对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+          确认类-带标题
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
+      </div>
+      <div
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
+      >
+        <!---->
+        
+        <div
+          class="t-dialog "
+        >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
               <div
-                class="t-input__wrap"
+                class="t-dialog__body-text"
               >
-                <div
-                  class="t-input__content t-input--default"
-                >
-                  <input
-                    autocomplete="Off"
-                    class="t-input__control t-input--default"
-                    name=""
-                    placeholder="请输入文字"
-                    spellcheck="false"
-                    style="--td-input-cursor-color: #0052d9;"
-                    type="text"
-                  />
-                  <!---->
-                  <!---->
-                  <!---->
-                </div>
-                <!---->
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
               </div>
             </div>
-            
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
+              </span>
+              <!---->
+            </button>
           </div>
         </div>
+        
+      </div>
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
+      <button
+        aria-disabled="false"
+        class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        role="button"
+        type="button"
+      >
+        <!---->
+        <span
+          class="t-button__content"
+        >
+          
+          确认类-无标题
+          
+        </span>
+        <!---->
+      </button>
+      <!--teleport start-->
+      <div
+        class="t-overlay"
+        style="z-index: 1000; transition-duration: 300ms; display: none;"
+      >
+        <!---->
       </div>
-      <!---->
       <div
-        class="t-dialog__footer t-dialog__footer--full"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
+        style="display: none;"
       >
         <!---->
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
-          role="button"
-          type="button"
+        
+        <div
+          class="t-dialog "
         >
           <!---->
-          <span
-            class="t-button__content"
-          >
-            取消
-          </span>
-          <!---->
-        </button>
-        <button
-          aria-disabled="false"
-          class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
-          role="button"
-          type="button"
-        >
           <!---->
-          <span
-            class="t-button__content"
+          <div
+            class="t-dialog__content"
           >
-            确认
-          </span>
+            <!---->
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+              </div>
+            </div>
+          </div>
           <!---->
-        </button>
+          <div
+            class="t-dialog__footer"
+          >
+            <!---->
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                警示操作
+              </span>
+              <!---->
+            </button>
+          </div>
+        </div>
+        
       </div>
-    </div>
-    
-  </div>
-  <!--teleport end-->
-  
-</div>
-`;
-
-exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
-<div
-  class="tdesign-mobile-demo"
->
-  <h1
-    class="title"
-  >
-    Dialog 对话框
-  </h1>
-  <p
-    class="summary"
-  >
-    用于显示重要提示或请求用户进行重要操作，一种打断当前操作的模态视图。
-  </p>
-  <div
-    class="tdesign-mobile-demo-block"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <h2
-        class="tdesign-mobile-demo-block__title"
-      >
-        01 组件类型
-      </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        反馈类对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <!--teleport end-->
+      <div
+        class="btn-gap"
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1038,7 +2098,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-基础 
+          确认类-纯标题
           
         </span>
         <!---->
@@ -1051,7 +2111,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1069,25 +2129,16 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             >
               对话框标题
             </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息等内容。描述文案尽可能控制在三行内
-              </div>
-            </div>
+            <!---->
           </div>
           <!---->
           <div
             class="t-dialog__footer"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1095,7 +2146,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确定
               </span>
               <!---->
             </button>
@@ -1104,12 +2169,32 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      <div
-        class="btn-gap"
-      />
+      
+      
+    </div>
+  </div>
+  <div
+    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
+  >
+    <div
+      class="tdesign-mobile-demo-block__header"
+    >
+      <!--v-if-->
+      <p
+        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
+      >
+        输入对话框
+      </p>
+    </div>
+    <div
+      class="tdesign-mobile-demo-block__slot with-padding"
+    >
+      
+      
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-4a76bf3d=""
         role="button"
         type="button"
       >
@@ -1118,7 +2203,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-无标题 
+          输入类-无描述
           
         </span>
         <!---->
@@ -1131,7 +2216,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1144,26 +2229,66 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           <div
             class="t-dialog__content"
           >
-            <!---->
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
             <div
               class="t-dialog__body"
             >
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                
+                <div
+                  class="t-input t-input--layout-horizontal t-input--border"
+                  data-v-4a76bf3d=""
+                >
+                  <div
+                    class="t-input__wrap--prefix"
+                  >
+                    <!---->
+                    <div
+                      class="t-input__label"
+                    >
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input__content t-input--default"
+                    >
+                      <input
+                        autocomplete="Off"
+                        class="t-input__control t-input--default"
+                        name=""
+                        placeholder="请输入文字"
+                        spellcheck="false"
+                        style="--td-input-cursor-color: #0052d9;"
+                        type="text"
+                      />
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                    <!---->
+                  </div>
+                </div>
+                
               </div>
             </div>
           </div>
           <!---->
           <div
-            class="t-dialog__footer"
+            class="t-dialog__footer t-dialog__footer--full"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
               role="button"
               type="button"
             >
@@ -1171,7 +2296,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
               </span>
               <!---->
             </button>
@@ -1182,10 +2321,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
+        data-v-4a76bf3d=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-4a76bf3d=""
         role="button"
         type="button"
       >
@@ -1194,7 +2335,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           反馈类-内容超长 
+          输入类-带描述
           
         </span>
         <!---->
@@ -1207,7 +2348,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1232,20 +2373,59 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
                 class="t-dialog__body-text"
               >
                 
-                这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.
+                <p
+                  data-v-4a76bf3d=""
+                >
+                  告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
+                </p>
+                <div
+                  class="t-input t-input--layout-horizontal t-input--border"
+                  data-v-4a76bf3d=""
+                >
+                  <div
+                    class="t-input__wrap--prefix"
+                  >
+                    <!---->
+                    <div
+                      class="t-input__label"
+                    >
+                      <!---->
+                    </div>
+                  </div>
+                  <div
+                    class="t-input__wrap"
+                  >
+                    <div
+                      class="t-input__content t-input--default"
+                    >
+                      <input
+                        autocomplete="Off"
+                        class="t-input__control t-input--default"
+                        name=""
+                        placeholder="请输入文字"
+                        spellcheck="false"
+                        style="--td-input-cursor-color: #0052d9;"
+                        type="text"
+                      />
+                      <!---->
+                      <!---->
+                      <!---->
+                    </div>
+                    <!---->
+                  </div>
+                </div>
                 
               </div>
             </div>
           </div>
           <!---->
           <div
-            class="t-dialog__footer"
+            class="t-dialog__footer t-dialog__footer--full"
           >
-            <!---->
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
               role="button"
               type="button"
             >
@@ -1253,7 +2433,21 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                知道了
+                取消
+              </span>
+              <!---->
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              role="button"
+              type="button"
+            >
+              <!---->
+              <span
+                class="t-button__content"
+              >
+                确认
               </span>
               <!---->
             </button>
@@ -1276,7 +2470,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
       >
-        确认类对话框
+        带图片的对话框
       </p>
     </div>
     <div
@@ -1287,6 +2481,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1295,7 +2490,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          确认类-带标题
+          图片置顶-带标题描述
           
         </span>
         <!---->
@@ -1308,7 +2503,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1316,7 +2511,52 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
+          
+          <div
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading"
+                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>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
+          </div>
+          
           <!---->
           <div
             class="t-dialog__content"
@@ -1332,7 +2572,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                告知当前状态、信息和解决方法
               </div>
             </div>
           </div>
@@ -1376,10 +2616,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
+        data-v-ddf95d52=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1388,7 +2630,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          确认类-无标题
+          图片置顶-无标题
           
         </span>
         <!---->
@@ -1401,7 +2643,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1409,7 +2651,52 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
+          
+          <div
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
+          >
+            <div
+              class="t-image__mask"
+            >
+              <div
+                class="t-loading"
+                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>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
+          </div>
+          
           <!---->
           <div
             class="t-dialog__content"
@@ -1421,7 +2708,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <div
                 class="t-dialog__body-text"
               >
-                告知当前状态、信息和解决方法，等内容。描述文案尽可能控制在三行内
+                告知当前状态、信息和解决方法
               </div>
             </div>
           </div>
@@ -1446,7 +2733,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-medium t-button--base t-button--danger t-button--rectangle t-dialog__button t-dialog__button--horizontal"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1454,7 +2741,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
               <span
                 class="t-button__content"
               >
-                警示操作
+                确认
               </span>
               <!---->
             </button>
@@ -1463,32 +2750,14 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        输入对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <div
+        class="btn-gap"
+        data-v-ddf95d52=""
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1497,7 +2766,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          输入类-无描述
+          图片置顶-纯标题
           
         </span>
         <!---->
@@ -1510,7 +2779,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1518,71 +2787,71 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
-          <!---->
+          
           <div
-            class="t-dialog__content"
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
           >
             <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
+              class="t-image__mask"
             >
               <div
-                class="t-dialog__body-text"
+                class="t-loading"
+                style="font-size: 20px;"
               >
-                
                 <div
-                  class="t-input t-input--layout-horizontal t-input--border"
-                  data-v-4a76bf3d=""
-                >
-                  <div
-                    class="t-input__wrap--prefix"
-                  >
-                    <!---->
-                    <div
-                      class="t-input__label"
-                    >
-                      <!---->
-                    </div>
-                  </div>
-                  <div
-                    class="t-input__wrap"
-                  >
-                    <div
-                      class="t-input__content t-input--default"
-                    >
-                      <input
-                        autocomplete="Off"
-                        class="t-input__control t-input--default"
-                        name=""
-                        placeholder="请输入文字"
-                        spellcheck="false"
-                        style="--td-input-cursor-color: #0052d9;"
-                        type="text"
-                      />
-                      <!---->
-                      <!---->
-                      <!---->
-                    </div>
-                    <!---->
-                  </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>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
           </div>
+          
           <!---->
           <div
-            class="t-dialog__footer t-dialog__footer--full"
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <!---->
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
           >
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1596,7 +2865,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1615,12 +2884,12 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <!--teleport end-->
       <div
         class="btn-gap"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
       />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
-        data-v-4a76bf3d=""
+        data-v-ddf95d52=""
         role="button"
         type="button"
       >
@@ -1629,7 +2898,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          输入类-带描述
+          图片置顶-纯图片
           
         </span>
         <!---->
@@ -1642,7 +2911,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1650,76 +2919,67 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
-          <!---->
-          <!---->
+          
           <div
-            class="t-dialog__content"
+            class="t-image t-image--square"
+            data-v-ddf95d52=""
           >
             <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
+              class="t-image__mask"
             >
               <div
-                class="t-dialog__body-text"
+                class="t-loading"
+                style="font-size: 20px;"
               >
-                
-                <p
-                  data-v-4a76bf3d=""
-                >
-                  告知当前状态、信息和解决方法等，描述文案尽可能控制在三行内
-                </p>
                 <div
-                  class="t-input t-input--layout-horizontal t-input--border"
-                  data-v-4a76bf3d=""
+                  class="t-loading__dots"
+                  style="animation-duration: 800ms; width: 20px; height: 20px;"
                 >
+                  
                   <div
-                    class="t-input__wrap--prefix"
-                  >
-                    <!---->
-                    <div
-                      class="t-input__label"
-                    >
-                      <!---->
-                    </div>
-                  </div>
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0s;"
+                  />
                   <div
-                    class="t-input__wrap"
-                  >
-                    <div
-                      class="t-input__content t-input--default"
-                    >
-                      <input
-                        autocomplete="Off"
-                        class="t-input__control t-input--default"
-                        name=""
-                        placeholder="请输入文字"
-                        spellcheck="false"
-                        style="--td-input-cursor-color: #0052d9;"
-                        type="text"
-                      />
-                      <!---->
-                      <!---->
-                      <!---->
-                    </div>
-                    <!---->
-                  </div>
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.26666666666666666s;"
+                  />
+                  <div
+                    class="t-loading__dot"
+                    style="animation-duration: 0.8s; animation-delay: 0.5333333333333333s;"
+                  />
+                  
                 </div>
-                
+                <!---->
+                <!---->
               </div>
             </div>
+            <picture>
+              <!---->
+              <img
+                alt=""
+                class="t-image__img"
+                src="https://tdesign.gtimg.com/mobile/demos/dialog1.png"
+                style="object-fit: contain; object-position: center;"
+              />
+            </picture>
           </div>
+          
           <!---->
           <div
-            class="t-dialog__footer t-dialog__footer--full"
+            class="t-dialog__content"
+          >
+            <!---->
+            <!---->
+          </div>
+          <!---->
+          <div
+            class="t-dialog__footer"
           >
             <!---->
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--default t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--light t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1733,7 +2993,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </button>
             <button
               aria-disabled="false"
-              class="t-button t-button--size-large t-button--text t-button--primary t-button--rectangle t-dialog__button t-dialog__button--text"
+              class="t-button t-button--size-medium t-button--base t-button--primary t-button--rectangle t-dialog__button t-dialog__button--horizontal"
               role="button"
               type="button"
             >
@@ -1750,28 +3010,10 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         
       </div>
       <!--teleport end-->
-      
-      
-    </div>
-  </div>
-  <div
-    class="tdesign-mobile-demo-block tdesign-mobile-demo-block_notitle"
-  >
-    <div
-      class="tdesign-mobile-demo-block__header"
-    >
-      <!--v-if-->
-      <p
-        class="tdesign-mobile-demo-block__summary tdesign-mobile-demo-block_subtitle"
-      >
-        带图片的对话框
-      </p>
-    </div>
-    <div
-      class="tdesign-mobile-demo-block__slot with-padding"
-    >
-      
-      
+      <div
+        class="btn-gap"
+        data-v-ddf95d52=""
+      />
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -1784,7 +3026,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          图片置顶
+          图片居中-带标题描述
           
         </span>
         <!---->
@@ -1797,7 +3039,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1805,9 +3047,29 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <div
           class="t-dialog "
         >
+          <!---->
+          <!---->
+          <div
+            class="t-dialog__content"
+          >
+            <div
+              class="t-dialog__header"
+            >
+              对话框标题
+            </div>
+            <div
+              class="t-dialog__body"
+            >
+              <div
+                class="t-dialog__body-text"
+              >
+                告知当前状态、信息和解决方法
+              </div>
+            </div>
+          </div>
           
           <div
-            class="t-image t-image--square"
+            class="t-image t-image--square image"
             data-v-ddf95d52=""
           >
             <div
@@ -1851,26 +3113,6 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             </picture>
           </div>
           
-          <!---->
-          <div
-            class="t-dialog__content"
-          >
-            <div
-              class="t-dialog__header"
-            >
-              对话框标题
-            </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息和解决方法
-              </div>
-            </div>
-          </div>
-          <!---->
           <div
             class="t-dialog__footer"
           >
@@ -1924,7 +3166,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-          图片居中
+          图片居中-纯标题
           
         </span>
         <!---->
@@ -1937,7 +3179,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -1955,15 +3197,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
             >
               对话框标题
             </div>
-            <div
-              class="t-dialog__body"
-            >
-              <div
-                class="t-dialog__body-text"
-              >
-                告知当前状态、信息和解决方法
-              </div>
-            </div>
+            <!---->
           </div>
           
           <div
@@ -2061,19 +3295,20 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <h2
         class="tdesign-mobile-demo-block__title"
       >
-        02 组件状态
+        02 组件类型
       </h2>
-      <p
-        class="tdesign-mobile-demo-block__summary"
-      >
-        其它形态对话框
-      </p>
+      <!--v-if-->
     </div>
     <div
       class="tdesign-mobile-demo-block__slot with-padding"
     >
       
       
+      <div
+        class="demo-desc"
+      >
+        文字按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2098,7 +3333,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2167,6 +3402,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        水平基础按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2191,7 +3431,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2260,6 +3500,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        垂直基础按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2284,7 +3529,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2353,6 +3598,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        多按钮
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2364,7 +3614,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           垂直多按钮 
+           多按钮 
           
         </span>
         <!---->
@@ -2377,7 +3627,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2463,6 +3713,11 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <div
         class="btn-gap"
       />
+      <div
+        class="demo-desc"
+      >
+        带关闭按钮的对话框
+      </div>
       <button
         aria-disabled="false"
         class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2474,7 +3729,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
           class="t-button__content"
         >
           
-           带关闭按钮 
+           带关闭按钮的对话框 
           
         </span>
         <!---->
@@ -2487,7 +3742,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
         <!---->
       </div>
       <div
-        class="t-popup t-popup--center"
+        class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
         style="display: none;"
       >
         <!---->
@@ -2586,7 +3841,7 @@ exports[`Dialog > Dialog mobileVue demo works fine 1`] = `
       <p
         class="tdesign-mobile-demo-block__summary"
       >
-        命令行调用
+        命令调用
       </p>
     </div>
     <div
@@ -2618,6 +3873,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   data-v-app=""
 >
   
+  <div
+    class="demo-desc"
+  >
+    文字按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2642,7 +3902,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2711,6 +3971,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    水平基础按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2735,7 +4000,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2804,6 +4069,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    垂直基础按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2828,7 +4098,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -2897,6 +4167,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    多按钮
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -2908,7 +4183,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-       垂直多按钮 
+       多按钮 
       
     </span>
     <!---->
@@ -2921,7 +4196,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
@@ -3007,6 +4282,11 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
   <div
     class="btn-gap"
   />
+  <div
+    class="demo-desc"
+  >
+    带关闭按钮的对话框
+  </div>
   <button
     aria-disabled="false"
     class="t-button t-button--size-large t-button--outline t-button--primary t-button--rectangle t-button--block"
@@ -3018,7 +4298,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
       class="t-button__content"
     >
       
-       带关闭按钮 
+       带关闭按钮的对话框 
       
     </span>
     <!---->
@@ -3031,7 +4311,7 @@ exports[`Dialog > Dialog multiStateVue demo works fine 1`] = `
     <!---->
   </div>
   <div
-    class="t-popup t-popup--center"
+    class="t-dialog__wrapper t-popup t-dialog__wrapper t-popup--center"
     style="display: none;"
   >
     <!---->
diff --git a/src/dialog/demos/confirm.vue b/src/dialog/demos/confirm.vue
index c62f250b7..593081982 100644
--- a/src/dialog/demos/confirm.vue
+++ b/src/dialog/demos/confirm.vue
@@ -26,12 +26,29 @@
     @close="onClose"
   >
   </t-dialog>
+
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true">确认类-纯标题</t-button>
+
+  <t-dialog
+    v-model:visible="isShowDialog7"
+    close-on-overlay-click
+    title="对话框标题"
+    cancel-btn="取消"
+    :confirm-btn="{ content: '确定', variant: 'base', theme: 'light' }"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+    @close="onClose"
+  >
+  </t-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
 
 const isShowDialog5 = ref(false);
 const isShowDialog6 = ref(false);
+const isShowDialog7 = ref(false);
 
 const onConfirm = () => {
   console.log('dialog:confirm');
diff --git a/src/dialog/demos/feedback.vue b/src/dialog/demos/feedback.vue
index 3819b69d1..efa931127 100644
--- a/src/dialog/demos/feedback.vue
+++ b/src/dialog/demos/feedback.vue
@@ -30,7 +30,9 @@
     @confirm="onConfirm"
     @overlay-click="onClickOverlay"
   >
-    {{ content }}
+    <div class="content-container">
+      {{ content }}
+    </div>
   </t-dialog>
 </template>
 
@@ -41,7 +43,7 @@ const isShowDialog1 = ref(false);
 const isShowDialog2 = ref(false);
 const isShowDialog3 = ref(false);
 const content =
-  '这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案.';
+  '这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案，这里是辅助内容文案';
 
 const onConfirm = (e: string) => {
   console.log('dialog:confirm', e);
@@ -51,3 +53,20 @@ const onClickOverlay = () => {
   console.log('dialog:clickOverlay');
 };
 </script>
+
+<style lang="less">
+.content-container {
+  height: 264px;
+  overflow-y: auto;
+  font-size: 16px;
+  color: var(--td-font-gray-2);
+  line-height: 24px;
+  white-space: pre-line;
+
+  &::-webkit-scrollbar {
+    display: none;
+    width: 0;
+    height: 0;
+  }
+}
+</style>
diff --git a/src/dialog/demos/image-dialog.vue b/src/dialog/demos/image-dialog.vue
index 6bd116cd7..d1f500ece 100644
--- a/src/dialog/demos/image-dialog.vue
+++ b/src/dialog/demos/image-dialog.vue
@@ -1,5 +1,7 @@
 <template>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true">图片置顶</t-button>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true"
+    >图片置顶-带标题描述</t-button
+  >
   <t-dialog
     v-model:visible="isShowDialog5"
     title="对话框标题"
@@ -14,10 +16,63 @@
     </template>
   </t-dialog>
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true">图片居中</t-button>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog6 = true"
+    >图片置顶-无标题</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog6"
+    content="告知当前状态、信息和解决方法"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"
+    >图片置顶-纯标题</t-button
+  >
   <t-dialog
     v-model:visible="isShowDialog7"
     title="对话框标题"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true"
+    >图片置顶-纯图片</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog8"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #top>
+      <t-image fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog9 = true"
+    >图片居中-带标题描述</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog9"
+    title="对话框标题"
     content="告知当前状态、信息和解决方法"
     cancel-btn="取消"
     confirm-btn="确认"
@@ -28,12 +83,33 @@
       <t-image class="image" fit="contain" :src="imageSrc"></t-image>
     </template>
   </t-dialog>
+  <div class="btn-gap"></div>
+
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog10 = true"
+    >图片居中-纯标题</t-button
+  >
+  <t-dialog
+    v-model:visible="isShowDialog10"
+    title="对话框标题"
+    cancel-btn="取消"
+    confirm-btn="确认"
+    @confirm="onConfirm"
+    @cancel="onCancel"
+  >
+    <template #middle>
+      <t-image class="image" fit="contain" :src="imageSrc"></t-image>
+    </template>
+  </t-dialog>
 </template>
 <script lang="ts" setup>
 import { ref } from 'vue';
 
 const isShowDialog5 = ref(false);
+const isShowDialog6 = ref(false);
 const isShowDialog7 = ref(false);
+const isShowDialog8 = ref(false);
+const isShowDialog9 = ref(false);
+const isShowDialog10 = ref(false);
 
 const imageSrc = ref('https://tdesign.gtimg.com/mobile/demos/dialog1.png');
 
diff --git a/src/dialog/demos/mobile.vue b/src/dialog/demos/mobile.vue
index 09245af99..5e2cc629f 100644
--- a/src/dialog/demos/mobile.vue
+++ b/src/dialog/demos/mobile.vue
@@ -14,10 +14,10 @@
     <tdesign-demo-block summary="带图片的对话框" :padding="true">
       <imgVue />
     </tdesign-demo-block>
-    <tdesign-demo-block title="02 组件状态" summary="其它形态对话框" :padding="true">
+    <tdesign-demo-block title="02 组件类型" :padding="true">
       <multiState />
     </tdesign-demo-block>
-    <tdesign-demo-block title="03 组件用法" summary="命令行调用" :padding="true">
+    <tdesign-demo-block title="03 组件用法" summary="命令调用" :padding="true">
       <pluginDemo />
     </tdesign-demo-block>
   </div>
diff --git a/src/dialog/demos/multi-state.vue b/src/dialog/demos/multi-state.vue
index 13d48ab7c..f10e2caf0 100644
--- a/src/dialog/demos/multi-state.vue
+++ b/src/dialog/demos/multi-state.vue
@@ -1,4 +1,5 @@
 <template>
+  <div class="demo-desc">文字按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog4 = true"> 文字按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog4"
@@ -12,6 +13,7 @@
   </t-dialog>
   <div class="btn-gap"></div>
 
+  <div class="demo-desc">水平基础按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog5 = true"> 水平基础按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog5"
@@ -24,6 +26,8 @@
   >
   </t-dialog>
   <div class="btn-gap"></div>
+
+  <div class="demo-desc">垂直基础按钮</div>
   <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog6 = true"> 垂直基础按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog6"
@@ -38,7 +42,9 @@
   </t-dialog>
 
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"> 垂直多按钮 </t-button>
+
+  <div class="demo-desc">多按钮</div>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog7 = true"> 多按钮 </t-button>
   <t-dialog
     v-model:visible="isShowDialog7"
     title="对话框标题"
@@ -53,7 +59,11 @@
   </t-dialog>
 
   <div class="btn-gap"></div>
-  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true"> 带关闭按钮 </t-button>
+
+  <div class="demo-desc">带关闭按钮的对话框</div>
+  <t-button block variant="outline" theme="primary" size="large" @click="isShowDialog8 = true">
+    带关闭按钮的对话框
+  </t-button>
   <t-dialog
     v-model:visible="isShowDialog8"
     title="对话框标题"
@@ -106,3 +116,11 @@ const onClose = () => {
   console.log('dialog: close');
 };
 </script>
+
+<style lang="less">
+.demo-desc {
+  font-size: 14px;
+  color: rgba(0, 0, 0, 0.6);
+  margin-bottom: 16px;
+}
+</style>
diff --git a/src/dialog/dialog.en-US.md b/src/dialog/dialog.en-US.md
index 095c9a37b..b15f7852c 100644
--- a/src/dialog/dialog.en-US.md
+++ b/src/dialog/dialog.en-US.md
@@ -85,14 +85,14 @@ options | Object | - | Typescript：`Omit<DialogOptions, 'cancelBtn'>`
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
---td-border-radius | @radius-extra-large | - 
 --td-dialog-body-max-height | 456px | - 
---td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
 --td-dialog-close-font-size | 22px | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 16px | - 
 --td-dialog-content-line-height | 24px | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 18px | - 
 --td-dialog-title-line-height | 26px | - 
---td-dialog-width | 311px | -
\ No newline at end of file
+--td-dialog-width | 311px | - 
diff --git a/src/dialog/dialog.md b/src/dialog/dialog.md
index 6ceb63a1e..53b78974c 100644
--- a/src/dialog/dialog.md
+++ b/src/dialog/dialog.md
@@ -85,14 +85,14 @@ options | Object | - | TS 类型：`Omit<DialogOptions, 'cancelBtn'>`
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
---td-border-radius | @radius-extra-large | - 
 --td-dialog-body-max-height | 456px | - 
---td-dialog-close-color | @font-gray-3 | - 
+--td-dialog-border-radius | @radius-extra-large | - 
+--td-dialog-close-color | @text-color-placeholder | - 
 --td-dialog-close-font-size | 22px | - 
---td-dialog-content-color | @font-gray-2 | - 
+--td-dialog-content-color | @text-color-secondary | - 
 --td-dialog-content-font-size | 16px | - 
 --td-dialog-content-line-height | 24px | - 
---td-dialog-title-color | @font-gray-1 | - 
+--td-dialog-title-color | @text-color-primary | - 
 --td-dialog-title-font-size | 18px | - 
 --td-dialog-title-line-height | 26px | - 
---td-dialog-width | 311px | -
\ No newline at end of file
+--td-dialog-width | 311px | - 
diff --git a/src/dialog/dialog.tsx b/src/dialog/dialog.tsx
index f10fd0843..0b3938798 100644
--- a/src/dialog/dialog.tsx
+++ b/src/dialog/dialog.tsx
@@ -154,6 +154,7 @@ export default defineComponent({
       };
       return (
         <TPopup
+          class={`${dialogClass.value}__wrapper`}
           visible={props.visible}
           placement="center"
           show-overlay={props.showOverlay}
diff --git a/src/form/__test__/__snapshots__/demo.test.jsx.snap b/src/form/__test__/__snapshots__/demo.test.jsx.snap
index 2760f696a..30f3ff5cd 100644
--- a/src/form/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/form/__test__/__snapshots__/demo.test.jsx.snap
@@ -1723,7 +1723,7 @@ exports[`Form > Form mobileVue demo works fine 1`] = `
           </button>
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-4e944783=""
         >
           <div
diff --git a/src/grid/__test__/__snapshots__/demo.test.jsx.snap b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
index b918ffb43..2bfbd37f2 100644
--- a/src/grid/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/grid/__test__/__snapshots__/demo.test.jsx.snap
@@ -2578,26 +2578,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-star"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-star"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2622,26 +2615,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-download"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-download"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -2666,26 +2652,19 @@ exports[`Grid > Grid iconVue demo works fine 1`] = `
     <div
       class="t-grid-item__image t-grid-item__image--middle"
     >
-      
-      <div
-        class="icon-wrapper"
-        data-v-1b745b58=""
-      >
-        <svg
-          class="t-icon t-icon-edit-1"
-          data-v-1b745b58=""
-          fill="none"
-          height="1em"
-          viewBox="0 0 24 24"
-          width="1em"
-        >
-          <path
-            d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-            fill="currentColor"
-          />
-        </svg>
-      </div>
-      
+      <svg
+        class="t-icon t-icon-edit-1"
+        fill="none"
+        height="1em"
+        style="font-size: 24px;"
+        viewBox="0 0 24 24"
+        width="1em"
+      >
+        <path
+          d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+          fill="currentColor"
+        />
+      </svg>
     </div>
     <div
       class="t-grid-item__content t-grid-item__content--vertical"
@@ -5650,26 +5629,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-star"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-star"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M12 .63l2.9 8.35 8.84.18-7.04 5.34 2.56 8.46L12 17.91l-7.26 5.05L7.3 14.5.26 9.16l8.84-.18L12 .63zm0 6.1l-1.47 4.22-4.48.1 3.57 2.7-1.3 4.29L12 15.48l3.68 2.56-1.3-4.3 3.57-2.7-4.48-.09L12 6.72z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5694,26 +5666,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-download"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-download"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M13 3v9.59l3.5-3.5 1.41 1.41L12 16.41 6.09 10.5 7.5 9.09l3.5 3.5V3h2zM4.5 14v5h15v-5h2v7h-19v-7h2z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
@@ -5738,26 +5703,19 @@ exports[`Grid > Grid mobileVue demo works fine 1`] = `
           <div
             class="t-grid-item__image t-grid-item__image--middle"
           >
-            
-            <div
-              class="icon-wrapper"
-              data-v-1b745b58=""
-            >
-              <svg
-                class="t-icon t-icon-edit-1"
-                data-v-1b745b58=""
-                fill="none"
-                height="1em"
-                viewBox="0 0 24 24"
-                width="1em"
-              >
-                <path
-                  d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
-                  fill="currentColor"
-                />
-              </svg>
-            </div>
-            
+            <svg
+              class="t-icon t-icon-edit-1"
+              fill="none"
+              height="1em"
+              style="font-size: 24px;"
+              viewBox="0 0 24 24"
+              width="1em"
+            >
+              <path
+                d="M16.83 1.42l5.75 5.75L7.75 22H2v-5.75L16.83 1.42zm0 8.68l2.92-2.93-2.92-2.93-2.93 2.93 2.93 2.93zm-4.34-1.51L4 17.07V20h2.93l8.48-8.49L12.5 8.6z"
+                fill="currentColor"
+              />
+            </svg>
           </div>
           <div
             class="t-grid-item__content t-grid-item__content--vertical"
diff --git a/src/grid/demos/base.vue b/src/grid/demos/base.vue
index 10588dcb2..241d6ac5d 100644
--- a/src/grid/demos/base.vue
+++ b/src/grid/demos/base.vue
@@ -14,7 +14,7 @@
     <t-grid-item text="最多五个字" :image="imgUrl" />
   </t-grid>
 
-  <t-grid :column="3" class="grid-demo">
+  <t-grid :column="3" class="grid-demo" hover>
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="标题文字" :image="imgUrl" />
     <t-grid-item text="最多六个文字" :image="imgUrl" />
diff --git a/src/grid/demos/icon.vue b/src/grid/demos/icon.vue
index 5d3ca87c4..4c79da61a 100644
--- a/src/grid/demos/icon.vue
+++ b/src/grid/demos/icon.vue
@@ -7,34 +7,21 @@
         </div>
       </template>
     </t-grid-item>
-    <t-grid-item text="收藏">
-      <template #image>
-        <div class="icon-wrapper">
-          <StarIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="保存">
-      <template #image>
-        <div class="icon-wrapper">
-          <DownloadIcon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
-    <t-grid-item text="编辑">
-      <template #image>
-        <div class="icon-wrapper">
-          <Edit1Icon size="24" />
-        </div>
-      </template>
-    </t-grid-item>
+    <t-grid-item text="收藏" :icon="starIcon" />
+    <t-grid-item text="保存" :icon="downloadIcon" />
+    <t-grid-item text="编辑" :icon="edit1Icon" />
   </t-grid>
 </template>
 
 <script lang="ts" setup>
+import { h } from 'vue';
 import { ShareIcon, StarIcon, DownloadIcon, Edit1Icon } from 'tdesign-icons-vue-next';
 
 const imgUrl = 'https://tdesign.gtimg.com/mobile/demos/example1.png';
+
+const starIcon = () => h(StarIcon, { size: '24px' });
+const downloadIcon = () => h(DownloadIcon, { size: '24px' });
+const edit1Icon = () => h(Edit1Icon, { size: '24px' });
 </script>
 <style scoped lang="less">
 .icon-wrapper {
diff --git a/src/grid/grid-item-props.ts b/src/grid/grid-item-props.ts
index 0b61e4409..820d3e25a 100644
--- a/src/grid/grid-item-props.ts
+++ b/src/grid/grid-item-props.ts
@@ -16,6 +16,10 @@ export default {
   description: {
     type: [String, Function] as PropType<TdGridItemProps['description']>,
   },
+  /** 图标名称。 */
+  icon: {
+    type: Function as PropType<TdGridItemProps['icon']>,
+  },
   /** 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件 */
   image: {
     type: [String, Object, Function] as PropType<TdGridItemProps['image']>,
diff --git a/src/grid/grid-item.tsx b/src/grid/grid-item.tsx
index 3c6f5f8e8..895023b24 100644
--- a/src/grid/grid-item.tsx
+++ b/src/grid/grid-item.tsx
@@ -2,6 +2,7 @@ import { defineComponent, computed, inject } from 'vue';
 import isObject from 'lodash/isObject';
 import isString from 'lodash/isString';
 import isFunction from 'lodash/isFunction';
+import { Hover } from '../shared';
 import config from '../config';
 import props from './grid-item-props';
 import { useTNodeJSX } from '../hooks/tnode';
@@ -13,13 +14,14 @@ const { prefix } = config;
 
 export default defineComponent({
   name: `${prefix}-grid-item`,
+  directives: { Hover },
   components: { TImage, TBadge },
   props,
   setup(props, context) {
     const gridItemClass = usePrefixClass('grid-item');
 
     const renderTNodeJSX = useTNodeJSX();
-    const { column, border, align, gutter } = inject<any>('grid');
+    const { column, border, align, gutter, hover } = inject<any>('grid');
 
     const rootStyle = computed(() => {
       const percent = column.value > 0 ? `${100 / +column.value}%` : 0;
@@ -55,11 +57,22 @@ export default defineComponent({
     ]);
 
     return () => {
-      const renderImage = () =>
-        realImage.value ? <t-image shape="round" {...realImage.value} /> : renderTNodeJSX('image');
+      const renderImage = () => {
+        if (realImage.value) {
+          return <t-image shape="round" {...realImage.value} />;
+        }
+        if (props.icon) {
+          return renderTNodeJSX('icon');
+        }
+        return renderTNodeJSX('image');
+      };
 
       return (
-        <div class={gridItemClasses.value} style={rootStyle.value}>
+        <div
+          class={gridItemClasses.value}
+          style={rootStyle.value}
+          v-hover={{ className: `${gridItemClass.value}--hover`, disabledHover: !hover.value }}
+        >
           <div class={`${gridItemClass.value}__image ${gridItemClass.value}__image--${size.value}`}>
             {props.badge ? <t-badge {...(props.badge as Object)}>{renderImage()}</t-badge> : renderImage()}
           </div>
diff --git a/src/grid/grid.en-US.md b/src/grid/grid.en-US.md
index 6db0d20bb..5311cbd6c 100644
--- a/src/grid/grid.en-US.md
+++ b/src/grid/grid.en-US.md
@@ -1,15 +1,18 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Grid Props
 
 name | type | default | description | required
 -- | -- | -- | -- | --
-align | String | center | options：left/center | N
+align | String | center | options: left/center | N
 border | Boolean | false | \- | N
 column | Number | 4 | \- | N
 gutter | Number | - | \- | N
-theme | String | default | options：default/card | N
+hover | Boolean | false | \- | N
+theme | String | default | options: default/card | N
+
 
 ### GridItem Props
 
@@ -17,12 +20,13 @@ name | type | default | description | required
 -- | -- | -- | -- | --
 badge | Object | null | Typescript：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
 description | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Object / Slot / Function | - | Typescript：`string \| object \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
-layout | String | vertical | options：vertical/horizontal | N
+layout | String | vertical | options: vertical/horizontal | N
 text | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 
-
 ### CSS Variables
+
 The component provides the following CSS variables, which can be used to customize styles.
 Name | Default Value | Description 
 -- | -- | --
@@ -47,4 +51,4 @@ Name | Default Value | Description
 --td-grid-item-text-font-size | 14px | - 
 --td-grid-item-text-line-height | 22px | - 
 --td-grid-item-text-padding-top | 8px | - 
---td-grid-item-vertical-padding | 16px 0 12px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | -
\ No newline at end of file
diff --git a/src/grid/grid.md b/src/grid/grid.md
index 933106a9f..73a5c7ca3 100644
--- a/src/grid/grid.md
+++ b/src/grid/grid.md
@@ -1,28 +1,32 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Grid Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 align | String | center | 内容对齐方式。可选项：left/center | N
 border | Boolean | false | 是否显示边框 | N
 column | Number | 4 | 每一行的列数量；为 0 时等于固定大小 | N
 gutter | Number | - | 间隔大小 | N
+hover | Boolean | false | 是否开启点击反馈 | N
 theme | String | default | 宫格的风格。可选项：default/card | N
 
+
 ### GridItem Props
 
-名称 | 类型 | 默认值 | 说明 | 必传
+名称 | 类型 | 默认值 | 描述 | 必传
 -- | -- | -- | -- | --
 badge | Object | null | 透传至 Badge 属性。TS 类型：`BadgeProps`，[Badge API Documents](./badge?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/grid/type.ts) | N
 description | String / Slot / Function | - | 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
+icon | Slot / Function | - | 图标名称。。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 image | String / Object / Slot / Function | - | 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件。TS 类型：`string \| object \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 layout | String | vertical | 内容布局方式。可选项：vertical/horizontal | N
 text | String / Slot / Function | - | 文本，可以通过 Props 传入文本，也可以自定义标题节点。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 
-
 ### CSS Variables
+
 组件提供了下列 CSS 变量，可用于自定义样式。
 名称 | 默认值 | 描述 
 -- | -- | --
@@ -47,4 +51,4 @@ text | String / Slot / Function | - | 文本，可以通过 Props 传入文本
 --td-grid-item-text-font-size | 14px | - 
 --td-grid-item-text-line-height | 22px | - 
 --td-grid-item-text-padding-top | 8px | - 
---td-grid-item-vertical-padding | 16px 0 12px | - 
+--td-grid-item-vertical-padding | 16px 0 12px | -
\ No newline at end of file
diff --git a/src/grid/grid.tsx b/src/grid/grid.tsx
index 4753ec30e..9456b53ed 100644
--- a/src/grid/grid.tsx
+++ b/src/grid/grid.tsx
@@ -11,7 +11,7 @@ export default defineComponent({
   props,
   setup(props, { slots }) {
     const gridClass = usePrefixClass('grid');
-    const { column, gutter, border, align } = toRefs(props);
+    const { column, gutter, border, align, hover } = toRefs(props);
     const rootStyle = computed(() => {
       if (column.value === 0) return [];
       const ans = [
@@ -28,6 +28,7 @@ export default defineComponent({
       border,
       align,
       gutter,
+      hover,
     });
 
     const classes = computed(() => [
diff --git a/src/grid/props.ts b/src/grid/props.ts
index 0d3d740ee..7d24d7eda 100644
--- a/src/grid/props.ts
+++ b/src/grid/props.ts
@@ -28,6 +28,8 @@ export default {
   gutter: {
     type: Number,
   },
+  /** 是否开启点击反馈 */
+  hover: Boolean,
   /** 宫格的风格 */
   theme: {
     type: String as PropType<TdGridProps['theme']>,
diff --git a/src/grid/type.ts b/src/grid/type.ts
index 4158aa4a6..e6e7c4242 100644
--- a/src/grid/type.ts
+++ b/src/grid/type.ts
@@ -27,6 +27,11 @@ export interface TdGridProps {
    * 间隔大小
    */
   gutter?: number;
+  /**
+   * 是否开启点击反馈
+   * @default false
+   */
+  hover?: boolean;
   /**
    * 宫格的风格
    * @default default
@@ -44,6 +49,10 @@ export interface TdGridItemProps {
    * 文本以外的更多描述，辅助信息。可以通过 Props 传入文本，也可以自定义标题节点
    */
   description?: string | TNode;
+  /**
+   * 图标名称。
+   */
+  icon?: TNode;
   /**
    * 图片，可以是图片地址，也可以自定义图片节点，如果传入对象则透传至 image 组件
    */
diff --git a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
index 5fba23f63..3d598190d 100644
--- a/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/indexes/__test__/__snapshots__/demo.test.jsx.snap
@@ -106,7 +106,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -129,7 +129,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -152,7 +152,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -175,7 +175,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -198,7 +198,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -221,7 +221,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -244,7 +244,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -267,7 +267,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -290,7 +290,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -345,7 +345,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -368,7 +368,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -391,7 +391,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -414,7 +414,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -437,7 +437,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -460,7 +460,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -483,7 +483,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -506,7 +506,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -529,7 +529,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -552,7 +552,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -575,7 +575,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -598,7 +598,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -621,7 +621,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -644,7 +644,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -699,7 +699,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -722,7 +722,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -745,7 +745,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -768,7 +768,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -791,7 +791,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -814,7 +814,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -837,7 +837,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -860,7 +860,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -883,7 +883,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -906,7 +906,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -929,7 +929,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -952,7 +952,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -975,7 +975,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -998,7 +998,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1021,7 +1021,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1044,7 +1044,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1067,7 +1067,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1090,7 +1090,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1113,7 +1113,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1168,7 +1168,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1191,7 +1191,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1214,7 +1214,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1237,7 +1237,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1260,7 +1260,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1283,7 +1283,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1306,7 +1306,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1329,7 +1329,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1352,7 +1352,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1375,7 +1375,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1398,7 +1398,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1421,7 +1421,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1444,7 +1444,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1499,7 +1499,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1522,7 +1522,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1545,7 +1545,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1600,7 +1600,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1623,7 +1623,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1646,7 +1646,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1669,7 +1669,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1692,7 +1692,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1715,7 +1715,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1738,7 +1738,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1793,7 +1793,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1816,7 +1816,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1839,7 +1839,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1862,7 +1862,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1885,7 +1885,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1908,7 +1908,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1931,7 +1931,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1954,7 +1954,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -1977,7 +1977,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2000,7 +2000,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2055,7 +2055,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2078,7 +2078,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2101,7 +2101,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2124,7 +2124,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2147,7 +2147,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2170,7 +2170,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2193,7 +2193,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2216,7 +2216,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2239,7 +2239,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2262,7 +2262,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2285,7 +2285,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2340,7 +2340,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2363,7 +2363,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2386,7 +2386,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2409,7 +2409,7 @@ exports[`Indexes > Indexes baseVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2540,7 +2540,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2563,7 +2563,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2586,7 +2586,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2609,7 +2609,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2632,7 +2632,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2693,7 +2693,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2716,7 +2716,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2739,7 +2739,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2762,7 +2762,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2785,7 +2785,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2846,7 +2846,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2869,7 +2869,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2892,7 +2892,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2915,7 +2915,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2938,7 +2938,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -2999,7 +2999,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3022,7 +3022,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3045,7 +3045,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3068,7 +3068,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3091,7 +3091,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3152,7 +3152,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3175,7 +3175,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3198,7 +3198,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3221,7 +3221,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3244,7 +3244,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3305,7 +3305,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3328,7 +3328,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3351,7 +3351,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3374,7 +3374,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3397,7 +3397,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3458,7 +3458,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
         
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3481,7 +3481,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3504,7 +3504,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3527,7 +3527,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -3550,7 +3550,7 @@ exports[`Indexes > Indexes customVue demo works fine 1`] = `
           <!---->
         </div>
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
diff --git a/src/list/__test__/__snapshots__/index.test.jsx.snap b/src/list/__test__/__snapshots__/index.test.jsx.snap
index 51fecea58..061b6d997 100644
--- a/src/list/__test__/__snapshots__/index.test.jsx.snap
+++ b/src/list/__test__/__snapshots__/index.test.jsx.snap
@@ -7,7 +7,7 @@ exports[`list > event > : load-more 1`] = `
   <!---->
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -30,7 +30,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -53,7 +53,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -76,7 +76,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -99,7 +99,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -122,7 +122,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -145,7 +145,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -168,7 +168,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -191,7 +191,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -214,7 +214,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -237,7 +237,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -260,7 +260,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -283,7 +283,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -306,7 +306,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -329,7 +329,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -352,7 +352,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -375,7 +375,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -398,7 +398,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -421,7 +421,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -444,7 +444,7 @@ exports[`list > event > : load-more 1`] = `
     <!---->
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
diff --git a/src/picker/__test__/__snapshots__/demo.test.jsx.snap b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
index 85e9af68d..af6d19994 100644
--- a/src/picker/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/picker/__test__/__snapshots__/demo.test.jsx.snap
@@ -6,7 +6,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -27,7 +27,7 @@ exports[`Picker > Picker areaVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -159,7 +159,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-049f57a8=""
   >
     <div
@@ -181,7 +181,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -202,7 +202,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-049f57a8=""
   >
     <div
@@ -224,7 +224,7 @@ exports[`Picker > Picker baseVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -553,7 +553,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
     >
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -578,7 +578,7 @@ exports[`Picker > Picker cascadeVue demo works fine 1`] = `
           战士,狂铁
         </div>
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -730,7 +730,7 @@ exports[`Picker > Picker customHeightVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -751,7 +751,7 @@ exports[`Picker > Picker customHeightVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -813,7 +813,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-049f57a8=""
       >
         <div
@@ -835,7 +835,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -856,7 +856,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-049f57a8=""
       >
         <div
@@ -878,7 +878,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1193,7 +1193,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1214,7 +1214,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1360,7 +1360,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
       <!-- &lt;CasCadeDemo /&gt; -->
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-7ee35211=""
       >
         <div
@@ -1382,7 +1382,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1403,7 +1403,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-7ee35211=""
       >
         <div
@@ -1425,7 +1425,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1543,7 +1543,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -1564,7 +1564,7 @@ exports[`Picker > Picker mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -1598,7 +1598,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-7ee35211=""
   >
     <div
@@ -1620,7 +1620,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1641,7 +1641,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-7ee35211=""
   >
     <div
@@ -1663,7 +1663,7 @@ exports[`Picker > Picker titleVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
diff --git a/src/popup/popup.en-US.md b/src/popup/popup.en-US.md
index bd1431921..61d37f9c6 100644
--- a/src/popup/popup.en-US.md
+++ b/src/popup/popup.en-US.md
@@ -40,4 +40,5 @@ The component provides the following CSS variables, which can be used to customi
 Name | Default Value | Description 
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
---td-popup-border-radius | @radius-default | -
\ No newline at end of file
+--td-popup-border-radius | @radius-extra-large | - 
+--td-popup-close-btn-color | @text-color-primary | - 
diff --git a/src/popup/popup.md b/src/popup/popup.md
index 80a48108a..2a122274c 100644
--- a/src/popup/popup.md
+++ b/src/popup/popup.md
@@ -40,4 +40,5 @@ visible-change | `(visible: boolean, trigger: PopupSource) ` | 当浮层隐藏
 名称 | 默认值 | 描述 
 -- | -- | --
 --td-popup-bg-color | @bg-color-container | - 
---td-popup-border-radius | @radius-default | -
\ No newline at end of file
+--td-popup-border-radius | @radius-extra-large | - 
+--td-popup-close-btn-color | @text-color-primary | - 
diff --git a/src/popup/popup.tsx b/src/popup/popup.tsx
index 078144afc..1dfd0eb3e 100644
--- a/src/popup/popup.tsx
+++ b/src/popup/popup.tsx
@@ -5,7 +5,7 @@ import popupProps from './props';
 import TOverlay from '../overlay';
 import config from '../config';
 import { TdPopupProps } from './type';
-import { useDefault, TNode, isBrowser } from '../shared';
+import { useDefault, TNode } from '../shared';
 import { usePrefixClass } from '../hooks/useClass';
 import { useLockScroll } from '../hooks/useLockScroll';
 import { useContent, useTNodeJSX } from '../hooks/tnode';
diff --git a/src/radio/__test__/__snapshots__/demo.test.jsx.snap b/src/radio/__test__/__snapshots__/demo.test.jsx.snap
index 81b103c06..a41a9d269 100644
--- a/src/radio/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/radio/__test__/__snapshots__/demo.test.jsx.snap
@@ -309,7 +309,7 @@ exports[`Radio > Radio customVue demo works fine 1`] = `
           value="0"
         />
         <div
-          class="t-radio__icon t-radio__icon--left"
+          class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
         >
           <!---->
           <!---->
@@ -454,7 +454,7 @@ exports[`Radio > Radio customVue demo works fine 1`] = `
           value="0"
         />
         <div
-          class="t-radio__icon t-radio__icon--left"
+          class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
         >
           <!---->
           <!---->
@@ -1558,7 +1558,7 @@ exports[`Radio > Radio mobileVue demo works fine 1`] = `
               value="0"
             />
             <div
-              class="t-radio__icon t-radio__icon--left"
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
             >
               <!---->
               <!---->
@@ -1703,7 +1703,7 @@ exports[`Radio > Radio mobileVue demo works fine 1`] = `
               value="0"
             />
             <div
-              class="t-radio__icon t-radio__icon--left"
+              class="t-radio__icon t-radio__icon--left t-radio__icon--checked"
             >
               <!---->
               <!---->
diff --git a/src/radio/radio.tsx b/src/radio/radio.tsx
index 9f239c116..9b8a4eb71 100644
--- a/src/radio/radio.tsx
+++ b/src/radio/radio.tsx
@@ -29,7 +29,7 @@ export default defineComponent({
     const groupDisabled = computed(() => rootGroupProps?.disabled);
     const isDisabled = useFormDisabled(groupDisabled);
 
-    const radioChecked = computed(() => innerChecked.value || (props.value && props.value === rootGroupValue?.value));
+    const radioChecked = computed(() => (rootGroupValue ? props.value === rootGroupValue?.value : innerChecked.value));
 
     const finalBorderless = computed(() => {
       if (props.borderless == null && 'borderless' in rootGroupProps) return rootGroupProps.borderless;
diff --git a/src/search/props.ts b/src/search/props.ts
index d9dba579b..f901b303b 100644
--- a/src/search/props.ts
+++ b/src/search/props.ts
@@ -19,6 +19,15 @@ export default {
   },
   /** 是否居中 */
   center: Boolean,
+  /** 清空图标触发方式，仅在输入框有值时有效 */
+  clearTrigger: {
+    type: String as PropType<TdSearchProps['clearTrigger']>,
+    default: 'always' as TdSearchProps['clearTrigger'],
+    validator(val: TdSearchProps['clearTrigger']): boolean {
+      if (!val) return true;
+      return ['always', 'focus'].includes(val);
+    },
+  },
   /** 是否可清空 */
   clearable: {
     type: Boolean,
diff --git a/src/search/search.en-US.md b/src/search/search.en-US.md
index b6ca7daf3..a23874713 100644
--- a/src/search/search.en-US.md
+++ b/src/search/search.en-US.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 name | type | default | description | required
@@ -8,6 +9,7 @@ name | type | default | description | required
 action | String / Slot / Function | '' | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 autocompleteOptions | Array | - | autocomplete words list。Typescript：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N
 center | Boolean | false | \- | N
+clearTrigger | String | always | show clear icon, clicked to clear input value。options: always / focus | N
 clearable | Boolean | true | \- | N
 disabled | Boolean | - | \- | N
 focus | Boolean | false | \- | N
diff --git a/src/search/search.md b/src/search/search.md
index 19b706666..eec3fb995 100644
--- a/src/search/search.md
+++ b/src/search/search.md
@@ -1,6 +1,7 @@
 :: BASE_DOC ::
 
 ## API
+
 ### Search Props
 
 名称 | 类型 | 默认值 | 描述 | 必传
@@ -8,6 +9,7 @@
 action | String / Slot / Function | '' | 自定义右侧操作按钮文字，如：“取消”。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 autocompleteOptions | Array | - | 【讨论中】联想词列表，如果不存在或长度为 0 则不显示联想框。可以使用函数 `label` 自定义联想词为任意内容；也可使用插槽 `option` 定义联想词内容，插槽参数为 `{ option: AutocompleteOption; index: number }`。如果 `group` 值为 `true` 则表示当前项为分组标题。TS 类型：`Array<AutocompleteOption>` `type AutocompleteOption = string \| { label: string \| TNode; group?: boolean }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/search/type.ts) | N
 center | Boolean | false | 是否居中 | N
+clearTrigger | String | always | 清空图标触发方式，仅在输入框有值时有效。可选项：always / focus | N
 clearable | Boolean | true | 是否可清空 | N
 disabled | Boolean | - | 禁用状态 | N
 focus | Boolean | false | 是否聚焦 | N
diff --git a/src/search/search.tsx b/src/search/search.tsx
index 8f6044dce..897608f73 100644
--- a/src/search/search.tsx
+++ b/src/search/search.tsx
@@ -118,7 +118,11 @@ export default defineComponent({
         return renderTNodeJSX('leftIcon');
       };
       const readerClear = () => {
-        if (props.clearable && searchValue.value) {
+        if (
+          props.clearable &&
+          searchValue.value &&
+          (props.clearTrigger === 'always' || (props.clearTrigger === 'focus' && focused.value))
+        ) {
           return (
             <div class={`${searchClass.value}__clear`} onClick={handleClear}>
               <TIconClear size="24" />
diff --git a/src/search/type.ts b/src/search/type.ts
index 08334196c..851a54011 100644
--- a/src/search/type.ts
+++ b/src/search/type.ts
@@ -21,6 +21,11 @@ export interface TdSearchProps {
    * @default false
    */
   center?: boolean;
+  /**
+   * 清空图标触发方式，仅在输入框有值时有效
+   * @default always
+   */
+  clearTrigger?: 'always' | 'focus';
   /**
    * 是否可清空
    * @default true
diff --git a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
index 0cf824974..a10eae3f8 100644
--- a/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/side-bar/__test__/__snapshots__/demo.test.jsx.snap
@@ -6446,7 +6446,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6519,7 +6519,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6592,7 +6592,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6665,7 +6665,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6738,7 +6738,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6811,7 +6811,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6884,7 +6884,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -6957,7 +6957,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7030,7 +7030,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7103,7 +7103,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7176,7 +7176,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7249,7 +7249,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7335,7 +7335,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7408,7 +7408,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7481,7 +7481,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7554,7 +7554,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7627,7 +7627,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7700,7 +7700,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7773,7 +7773,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7846,7 +7846,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -7919,7 +7919,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8005,7 +8005,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8078,7 +8078,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8151,7 +8151,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8224,7 +8224,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8297,7 +8297,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8370,7 +8370,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8443,7 +8443,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8516,7 +8516,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8589,7 +8589,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8675,7 +8675,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8748,7 +8748,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8821,7 +8821,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8894,7 +8894,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -8967,7 +8967,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -9040,7 +9040,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -9126,7 +9126,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -9199,7 +9199,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
@@ -9272,7 +9272,7 @@ exports[`SideBar > SideBar switchVue demo works fine 1`] = `
         data-v-17774648=""
       >
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-17774648=""
         >
           <div
diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index 0e75983c9..8faa9ddc9 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -47,7 +47,7 @@ exports[`SwipeCell > SwipeCell doubleVue demo works fine 1`] = `
         </div>
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
@@ -162,7 +162,7 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
         </div>
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
           data-v-7d57325a=""
         >
           <div
@@ -269,7 +269,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -393,7 +393,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -507,7 +507,7 @@ exports[`SwipeCell > SwipeCell iconVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -657,7 +657,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -741,7 +741,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -829,7 +829,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -930,7 +930,7 @@ exports[`SwipeCell > SwipeCell leftVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1073,7 +1073,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1157,7 +1157,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1245,7 +1245,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1346,7 +1346,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1473,7 +1473,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1565,7 +1565,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1663,7 +1663,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1787,7 +1787,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -1901,7 +1901,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
           >
             <div
               class="t-cell__left"
@@ -2054,7 +2054,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
           </div>
           
           <div
-            class="t-cell t-cell--middle"
+            class="t-cell"
             data-v-7d57325a=""
           >
             <div
@@ -2164,7 +2164,7 @@ exports[`SwipeCell > SwipeCell rightVue demo works fine 1`] = `
         </div>
         
         <div
-          class="t-cell t-cell--middle"
+          class="t-cell"
         >
           <div
             class="t-cell__left"
diff --git a/src/switch/__test__/__snapshots__/demo.test.jsx.snap b/src/switch/__test__/__snapshots__/demo.test.jsx.snap
index 3990b9b3a..404834fec 100644
--- a/src/switch/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/switch/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Switch > Switch baseVue demo works fine 1`] = `
 <div
-  class="t-cell t-cell--middle"
+  class="t-cell"
 >
   <div
     class="t-cell__left"
@@ -23,7 +23,7 @@ exports[`Switch > Switch baseVue demo works fine 1`] = `
   </div>
   <!---->
   <div
-    class="t-cell__right"
+    class="t-cell__right t-cell__right--middle"
   >
     <div
       class="t-cell__right-icon"
@@ -50,7 +50,7 @@ exports[`Switch > Switch baseVue demo works fine 1`] = `
 
 exports[`Switch > Switch colorVue demo works fine 1`] = `
 <div
-  class="t-cell t-cell--middle"
+  class="t-cell"
 >
   <div
     class="t-cell__left"
@@ -71,7 +71,7 @@ exports[`Switch > Switch colorVue demo works fine 1`] = `
   </div>
   <!---->
   <div
-    class="t-cell__right"
+    class="t-cell__right t-cell__right--middle"
   >
     <div
       class="t-cell__right-icon"
@@ -102,7 +102,7 @@ exports[`Switch > Switch labelVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -123,7 +123,7 @@ exports[`Switch > Switch labelVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -151,7 +151,7 @@ exports[`Switch > Switch labelVue demo works fine 1`] = `
     style="height: 16px;"
   />
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -172,7 +172,7 @@ exports[`Switch > Switch labelVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -247,7 +247,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -268,7 +268,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -313,7 +313,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -334,7 +334,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -362,7 +362,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         style="height: 16px;"
       />
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -383,7 +383,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -440,7 +440,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
     >
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -461,7 +461,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -510,7 +510,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -531,7 +531,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -581,7 +581,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -602,7 +602,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -657,7 +657,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         禁用状态
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -678,7 +678,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -702,7 +702,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
       >
         <div
           class="t-cell__left"
@@ -723,7 +723,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -773,7 +773,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
       
       
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-8f16ed1c=""
       >
         <div
@@ -795,7 +795,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -820,7 +820,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-8f16ed1c=""
       >
         <div
@@ -842,7 +842,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -867,7 +867,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
       </div>
       <div
-        class="t-cell t-cell--middle"
+        class="t-cell"
         data-v-8f16ed1c=""
       >
         <div
@@ -889,7 +889,7 @@ exports[`Switch > Switch mobileVue demo works fine 1`] = `
         </div>
         <!---->
         <div
-          class="t-cell__right"
+          class="t-cell__right t-cell__right--middle"
         >
           <div
             class="t-cell__right-icon"
@@ -926,7 +926,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-8f16ed1c=""
   >
     <div
@@ -948,7 +948,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -973,7 +973,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-8f16ed1c=""
   >
     <div
@@ -995,7 +995,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1020,7 +1020,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
     data-v-8f16ed1c=""
   >
     <div
@@ -1042,7 +1042,7 @@ exports[`Switch > Switch sizeVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1076,7 +1076,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
 >
   
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -1097,7 +1097,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1147,7 +1147,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -1168,7 +1168,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1223,7 +1223,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     禁用状态
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -1244,7 +1244,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
@@ -1268,7 +1268,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
   </div>
   <div
-    class="t-cell t-cell--middle"
+    class="t-cell"
   >
     <div
       class="t-cell__left"
@@ -1289,7 +1289,7 @@ exports[`Switch > Switch statusVue demo works fine 1`] = `
     </div>
     <!---->
     <div
-      class="t-cell__right"
+      class="t-cell__right t-cell__right--middle"
     >
       <div
         class="t-cell__right-icon"
diff --git a/src/tab-bar/tab-bar-item.tsx b/src/tab-bar/tab-bar-item.tsx
index 1f2e3cdff..c61fa6042 100644
--- a/src/tab-bar/tab-bar-item.tsx
+++ b/src/tab-bar/tab-bar-item.tsx
@@ -75,8 +75,9 @@ export default defineComponent({
 
     const crowded = ref(false);
     watch(itemCount, () => {
+      crowded.value = itemCount.value > 3;
+
       if (isChecked.value) {
-        crowded.value = itemCount.value > 3;
         isSpread.value = true;
       }
     });
diff --git a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
index ff62ff258..a8af16dbb 100644
--- a/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/tabs/__test__/__snapshots__/demo.test.jsx.snap
@@ -22,7 +22,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -42,6 +42,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -71,6 +72,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -100,6 +102,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -120,6 +123,7 @@ exports[`Tabs > Tabs badgeVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -160,7 +164,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -180,6 +184,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -204,6 +209,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -228,6 +234,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         上限六个文字
                       </div>
                     </div>
@@ -248,6 +255,7 @@ exports[`Tabs > Tabs contentVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -296,7 +304,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -316,6 +324,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         <div
                           data-v-7ca59de4=""
                         >
@@ -344,6 +353,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -364,6 +374,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -395,7 +406,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -415,6 +426,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -439,6 +451,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -463,6 +476,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -483,6 +497,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -515,7 +530,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -535,6 +550,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -559,6 +575,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -583,6 +600,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -607,6 +625,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -627,6 +646,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -662,7 +682,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -682,6 +702,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -706,6 +727,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -730,6 +752,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -754,6 +777,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -778,6 +802,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -798,6 +823,7 @@ exports[`Tabs > Tabs evenlyVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -842,7 +868,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -862,20 +888,20 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
-                        <div
-                          class="label-content"
-                          data-v-fb5b87c0=""
+                        <svg
+                          class="t-icon t-icon-app t-size-l"
+                          fill="none"
+                          height="1em"
+                          style="margin-right: 3px;"
+                          viewBox="0 0 24 24"
+                          width="1em"
                         >
-                          <i
-                            class="t-icon t-icon-app t-size-l"
-                            data-v-fb5b87c0=""
+                          <path
+                            d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
+                            fill="currentColor"
                           />
-                          <span
-                            data-v-fb5b87c0=""
-                          >
-                            选项
-                          </span>
-                        </div>
+                        </svg>
+                        选项
                       </div>
                     </div>
                     
@@ -899,20 +925,20 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
-                        <div
-                          class="label-content"
-                          data-v-fb5b87c0=""
+                        <svg
+                          class="t-icon t-icon-app t-size-l"
+                          fill="none"
+                          height="1em"
+                          style="margin-right: 3px;"
+                          viewBox="0 0 24 24"
+                          width="1em"
                         >
-                          <i
-                            class="t-icon t-icon-app t-size-l"
-                            data-v-fb5b87c0=""
+                          <path
+                            d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
+                            fill="currentColor"
                           />
-                          <span
-                            data-v-fb5b87c0=""
-                          >
-                            选项
-                          </span>
-                        </div>
+                        </svg>
+                        选项
                       </div>
                     </div>
                     
@@ -936,6 +962,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         <div
                           class="label-content"
                           data-v-fb5b87c0=""
@@ -969,6 +996,7 @@ exports[`Tabs > Tabs iconVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -1009,7 +1037,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1029,6 +1057,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1053,6 +1082,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1077,6 +1107,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1101,6 +1132,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1125,6 +1157,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1149,6 +1182,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1173,6 +1207,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1197,6 +1232,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1221,6 +1257,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -1241,6 +1278,7 @@ exports[`Tabs > Tabs isometricVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -1306,7 +1344,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1326,6 +1364,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               <div
                                 data-v-7ca59de4=""
                               >
@@ -1354,6 +1393,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1374,6 +1414,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -1405,7 +1446,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1425,6 +1466,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1449,6 +1491,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1473,6 +1516,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1493,6 +1537,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -1525,7 +1570,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1545,6 +1590,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1569,6 +1615,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1593,6 +1640,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1617,6 +1665,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1637,6 +1686,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -1672,7 +1722,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1692,6 +1742,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1716,6 +1767,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1740,6 +1792,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1764,6 +1817,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1788,6 +1842,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1808,6 +1863,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -1869,7 +1925,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -1889,6 +1945,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1913,6 +1970,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1937,6 +1995,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1961,6 +2020,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -1985,6 +2045,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2009,6 +2070,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2033,6 +2095,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2057,6 +2120,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2081,6 +2145,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2101,6 +2166,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2149,7 +2215,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2169,20 +2235,20 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
-                              <div
-                                class="label-content"
-                                data-v-fb5b87c0=""
+                              <svg
+                                class="t-icon t-icon-app t-size-l"
+                                fill="none"
+                                height="1em"
+                                style="margin-right: 3px;"
+                                viewBox="0 0 24 24"
+                                width="1em"
                               >
-                                <i
-                                  class="t-icon t-icon-app t-size-l"
-                                  data-v-fb5b87c0=""
+                                <path
+                                  d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
+                                  fill="currentColor"
                                 />
-                                <span
-                                  data-v-fb5b87c0=""
-                                >
-                                  选项
-                                </span>
-                              </div>
+                              </svg>
+                              选项
                             </div>
                           </div>
                           
@@ -2206,20 +2272,20 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
-                              <div
-                                class="label-content"
-                                data-v-fb5b87c0=""
+                              <svg
+                                class="t-icon t-icon-app t-size-l"
+                                fill="none"
+                                height="1em"
+                                style="margin-right: 3px;"
+                                viewBox="0 0 24 24"
+                                width="1em"
                               >
-                                <i
-                                  class="t-icon t-icon-app t-size-l"
-                                  data-v-fb5b87c0=""
+                                <path
+                                  d="M17.5 3.5a3 3 0 100 6 3 3 0 000-6zm-5 3a5 5 0 1110 0 5 5 0 01-10 0zM2 2h9v9H2V2zm2 2v5h5V4H4zm-2 9h9v9H2v-9zm2 2v5h5v-5H4zm9-2h9v9h-9v-9zm7 2h-5v5h5v-5z"
+                                  fill="currentColor"
                                 />
-                                <span
-                                  data-v-fb5b87c0=""
-                                >
-                                  选项
-                                </span>
-                              </div>
+                              </svg>
+                              选项
                             </div>
                           </div>
                           
@@ -2243,6 +2309,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               <div
                                 class="label-content"
                                 data-v-fb5b87c0=""
@@ -2276,6 +2343,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2333,7 +2401,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2353,6 +2421,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2382,6 +2451,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2411,6 +2481,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2431,6 +2502,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2488,7 +2560,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2508,6 +2580,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2532,6 +2605,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2556,6 +2630,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               上限六个文字
                             </div>
                           </div>
@@ -2576,6 +2651,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2645,7 +2721,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2665,6 +2741,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选中
                             </div>
                           </div>
@@ -2689,6 +2766,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               默认
                             </div>
                           </div>
@@ -2713,6 +2791,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               禁用
                             </div>
                           </div>
@@ -2733,6 +2812,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2794,7 +2874,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2814,6 +2894,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               小尺寸
                             </div>
                           </div>
@@ -2838,6 +2919,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2862,6 +2944,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2886,6 +2969,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -2906,6 +2990,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -2941,7 +3026,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+                  class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -2961,6 +3046,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               大尺寸
                             </div>
                           </div>
@@ -2985,6 +3071,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3009,6 +3096,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3033,6 +3121,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--line"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3053,6 +3142,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -3113,7 +3203,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--tag"
+                  class="t-tabs__scroll t-tabs__scroll--tag t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--tag"
@@ -3133,6 +3223,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--tag t-tabs__item-inner--active"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3157,6 +3248,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--tag"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3181,6 +3273,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--tag"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3205,6 +3298,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--tag"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3223,6 +3317,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -3258,7 +3353,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                 class="t-tabs__nav"
               >
                 <div
-                  class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--card"
+                  class="t-tabs__scroll t-tabs__scroll--card t-tabs__scroll--split"
                 >
                   <div
                     class="t-tabs__wrapper t-tabs__wrapper--card"
@@ -3278,6 +3373,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--card"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3302,6 +3398,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--card"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3328,6 +3425,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--card"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3352,6 +3450,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
                             class="t-tabs__item-inner t-tabs__item-inner--card"
                           >
                             <div>
+                              <!---->
                               选项
                             </div>
                           </div>
@@ -3370,6 +3469,7 @@ exports[`Tabs > Tabs mobileVue demo works fine 1`] = `
               
             </div>
           </div>
+          <!---->
           <div
             class="t-tabs__content"
           >
@@ -3417,7 +3517,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -3437,6 +3537,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         小尺寸
                       </div>
                     </div>
@@ -3461,6 +3562,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3485,6 +3587,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3509,6 +3612,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3529,6 +3633,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -3564,7 +3669,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -3584,6 +3689,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         大尺寸
                       </div>
                     </div>
@@ -3608,6 +3714,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3632,6 +3739,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3656,6 +3764,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3676,6 +3785,7 @@ exports[`Tabs > Tabs sizeVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -3719,7 +3829,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--line"
+            class="t-tabs__scroll t-tabs__scroll--line t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--line"
@@ -3739,6 +3849,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         选中
                       </div>
                     </div>
@@ -3763,6 +3874,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         默认
                       </div>
                     </div>
@@ -3787,6 +3899,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--line"
                     >
                       <div>
+                        <!---->
                         禁用
                       </div>
                     </div>
@@ -3807,6 +3920,7 @@ exports[`Tabs > Tabs statusVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -3847,7 +3961,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--tag"
+            class="t-tabs__scroll t-tabs__scroll--tag t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--tag"
@@ -3867,6 +3981,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--tag t-tabs__item-inner--active"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3891,6 +4006,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--tag"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3915,6 +4031,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--tag"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3939,6 +4056,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--tag"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -3957,6 +4075,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
@@ -3992,7 +4111,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
           class="t-tabs__nav"
         >
           <div
-            class="t-tabs__scroll t-tabs__scroll--top t-tabs__scroll--card"
+            class="t-tabs__scroll t-tabs__scroll--card t-tabs__scroll--split"
           >
             <div
               class="t-tabs__wrapper t-tabs__wrapper--card"
@@ -4012,6 +4131,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--card"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -4036,6 +4156,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--card"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -4062,6 +4183,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--card"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -4086,6 +4208,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
                       class="t-tabs__item-inner t-tabs__item-inner--card"
                     >
                       <div>
+                        <!---->
                         选项
                       </div>
                     </div>
@@ -4104,6 +4227,7 @@ exports[`Tabs > Tabs themeVue demo works fine 1`] = `
         
       </div>
     </div>
+    <!---->
     <div
       class="t-tabs__content"
     >
diff --git a/src/tabs/__test__/demo.test.jsx b/src/tabs/__test__/demo.test.jsx
index dc01f9130..73f996aef 100644
--- a/src/tabs/__test__/demo.test.jsx
+++ b/src/tabs/__test__/demo.test.jsx
@@ -13,6 +13,9 @@ import sizeVue from '@/tabs/demos/size.vue';
 import statusVue from '@/tabs/demos/status.vue';
 import themeVue from '@/tabs/demos/theme.vue';
 
+// scrollTo isn't implemented in JSDOM，see: https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {};
+
 const mapper = {
   badgeVue,
   contentVue,
diff --git a/src/tabs/__test__/index.test.jsx b/src/tabs/__test__/index.test.jsx
index dab40aa6d..17a3b5180 100644
--- a/src/tabs/__test__/index.test.jsx
+++ b/src/tabs/__test__/index.test.jsx
@@ -7,6 +7,9 @@ import { sleep } from '../../shared/util';
 import Sticky from '../../sticky/index';
 import { trigger } from '../../image-viewer/__test__/touch';
 
+// scrollTo isn't implemented in JSDOM，see: https://github.com/vuejs/vue-test-utils/issues/319
+Element.prototype.scrollTo = () => {};
+
 const prefix = 't';
 const name = `${prefix}-tabs`;
 const list = [
@@ -60,12 +63,14 @@ describe('Tabs', () => {
       let theme = '';
       const wrapper = mount(Tabs, {
         props: {
-          theme: theme,
+          theme,
         },
       });
       const navWrap = wrapper.find(`.${name}__wrapper`);
       const $tabNavItems = navWrap.findAllComponents(TTabNav);
 
+      const $tabs = wrapper.findComponent(Tabs);
+
       theme = 'line';
       await wrapper.setProps({
         theme,
@@ -160,7 +165,7 @@ describe('Tabs', () => {
       };
       const wrapper = mount(Tabs, {
         props: {
-          size: size,
+          size,
         },
       });
       const $tabs = wrapper.findComponent(Tabs);
diff --git a/src/tabs/demos/icon.vue b/src/tabs/demos/icon.vue
index 3f7f30877..132c8e7c7 100644
--- a/src/tabs/demos/icon.vue
+++ b/src/tabs/demos/icon.vue
@@ -1,22 +1,9 @@
 <template>
   <div class="demo-tab-bar">
     <t-tabs default-value="first">
-      <t-tab-panel value="first">
-        <template #label>
-          <div class="label-content">
-            <icon-font name="app" size="large" />
-            <span>选项</span>
-          </div>
-        </template>
-      </t-tab-panel>
-      <t-tab-panel value="second">
-        <template #label>
-          <div class="label-content">
-            <icon-font name="app" size="large" />
-            <span>选项</span>
-          </div>
-        </template>
-      </t-tab-panel>
+      <t-tab-panel value="first" label="选项" :icon="appIcon" />
+      <t-tab-panel value="second" label="选项" :icon="appIcon" />
+
       <t-tab-panel value="third">
         <template #label>
           <div class="label-content">
@@ -30,7 +17,10 @@
 </template>
 
 <script lang="ts" setup>
-import { IconFont } from 'tdesign-icons-vue-next';
+import { h } from 'vue';
+import { IconFont, AppIcon } from 'tdesign-icons-vue-next';
+
+const appIcon = () => h(AppIcon, { size: 'large', style: { marginRight: '3px' } });
 </script>
 
 <style lang="less" scoped>
diff --git a/src/tabs/props.ts b/src/tabs/props.ts
index 25b111684..eeefa4aba 100644
--- a/src/tabs/props.ts
+++ b/src/tabs/props.ts
@@ -25,6 +25,10 @@ export default {
   list: {
     type: Array as PropType<TdTabsProps['list']>,
   },
+  /** 中间内容，介于头部和内容之间 */
+  middle: {
+    type: Function as PropType<TdTabsProps['middle']>,
+  },
   /** 是否展示底部激活线条 */
   showBottomLine: {
     type: Boolean,
@@ -44,6 +48,11 @@ export default {
     type: Boolean,
     default: true,
   },
+  /** 是否展示分割线 */
+  split: {
+    type: Boolean,
+    default: true,
+  },
   /** 是否开启粘性布局 */
   sticky: Boolean,
   /** 透传至 Sticky 组件 */
diff --git a/src/tabs/style/index.js b/src/tabs/style/index.js
index 711f44b44..2c0e69bc2 100644
--- a/src/tabs/style/index.js
+++ b/src/tabs/style/index.js
@@ -1,2 +1 @@
-// import '../../_common/style/mobile/components/tabs/_index.less';
 import '../../_common/style/mobile/components/tabs/v2/_index.less';
diff --git a/src/tabs/tab-nav-item.tsx b/src/tabs/tab-nav-item.tsx
index 861fd3352..22b9c2083 100644
--- a/src/tabs/tab-nav-item.tsx
+++ b/src/tabs/tab-nav-item.tsx
@@ -1,7 +1,7 @@
 import { defineComponent } from 'vue';
 import config from '../config';
 import TabPanelProps from './tab-panel-props';
-import { useContent } from '../hooks/tnode';
+import { useContent, useTNodeJSX } from '../hooks/tnode';
 
 const { prefix } = config;
 
@@ -9,10 +9,17 @@ export default defineComponent({
   name: `${prefix}-tab-nav`,
   props: {
     label: TabPanelProps.label,
+    icon: TabPanelProps.icon,
   },
   setup(props) {
+    const renderTNodeJSX = useTNodeJSX();
     const renderTNodeContent = useContent();
 
-    return () => <div>{renderTNodeContent('default', 'label')}</div>;
+    return () => (
+      <div>
+        {renderTNodeJSX('icon')}
+        {renderTNodeContent('default', 'label')}
+      </div>
+    );
   },
 });
diff --git a/src/tabs/tab-panel-props.ts b/src/tabs/tab-panel-props.ts
index ac590cb74..b2fa692e5 100644
--- a/src/tabs/tab-panel-props.ts
+++ b/src/tabs/tab-panel-props.ts
@@ -19,6 +19,10 @@ export default {
   },
   /** 是否禁用当前选项卡 */
   disabled: Boolean,
+  /** 图标 */
+  icon: {
+    type: Function as PropType<TdTabPanelProps['icon']>,
+  },
   /** 选项卡名称，可自定义选项卡导航内容 */
   label: {
     type: [String, Function] as PropType<TdTabPanelProps['label']>,
diff --git a/src/tabs/tabs.en-US.md b/src/tabs/tabs.en-US.md
index 6e3cf1992..036747d52 100644
--- a/src/tabs/tabs.en-US.md
+++ b/src/tabs/tabs.en-US.md
@@ -9,9 +9,11 @@ name | type | default | description | required
 animation | Object | - | Typescript：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 bottomLineMode | String | fixed | options: fixed/auto/full | N
 list | Array | - | Typescript：`Array<TdTabPanelProps>` | N
+middle | Slot / Function | - | Typescript：`TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 showBottomLine | Boolean | true | \- | N
 size | String | medium | options: medium/large | N
 spaceEvenly | Boolean | true | \- | N
+split | Boolean | true | \- | N
 sticky | Boolean | false | \- | N
 stickyProps | Object | - | Typescript：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | \- | N
@@ -38,6 +40,7 @@ name | type | default | description | required
 badgeProps | Object | - | \- | N
 destroyOnHide | Boolean | true | \- | N
 disabled | Boolean | false | \- | N
+icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | false | Enable tab lazy loading | N
 panel | String / Slot / Function | - | Typescript：`string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/tabs/tabs.md b/src/tabs/tabs.md
index 3d3518284..8063ee250 100644
--- a/src/tabs/tabs.md
+++ b/src/tabs/tabs.md
@@ -9,9 +9,11 @@
 animation | Object | - | 动画效果设置。其中 duration 表示动画时长。TS 类型：`TabAnimation` `type TabAnimation = { duration: number } & Record<string, any>`。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 bottomLineMode | String | fixed | 激活下划线的模式。可选项：fixed/auto/full | N
 list | Array | - | 选项卡列表。TS 类型：`Array<TdTabPanelProps>` | N
+middle | Slot / Function | - | 中间内容，介于头部和内容之间。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 showBottomLine | Boolean | true | 是否展示底部激活线条 | N
 size | String | medium | 组件尺寸。可选项：medium/large | N
 spaceEvenly | Boolean | true | 选项卡头部空间是否均分 | N
+split | Boolean | true | 是否展示分割线 | N
 sticky | Boolean | false | 是否开启粘性布局 | N
 stickyProps | Object | - | 透传至 Sticky 组件。TS 类型：`StickyProps`，[Sticky API Documents](./sticky?tab=api)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/tabs/type.ts) | N
 swipeable | Boolean | true | 是否可以滑动切换 | N
@@ -38,6 +40,7 @@ scroll | `(scrollTop: number, isFixed: boolean)` | 页面滚动时触发
 badgeProps | Object | - | 透传至 Badge 组件 | N
 destroyOnHide | Boolean | true | 选项卡内容隐藏时是否销毁 | N
 disabled | Boolean | false | 是否禁用当前选项卡 | N
+icon | Slot / Function | - | 图标。TS 类型：`TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 label | String / Slot / Function | - | 选项卡名称，可自定义选项卡导航内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
 lazy | Boolean | false | 是否启用选项卡懒加载 | N
 panel | String / Slot / Function | - | 用于自定义选项卡面板内容。TS 类型：`string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-vue/blob/develop/src/common.ts) | N
diff --git a/src/tabs/tabs.tsx b/src/tabs/tabs.tsx
index 5fdae8e57..84566ee6d 100644
--- a/src/tabs/tabs.tsx
+++ b/src/tabs/tabs.tsx
@@ -68,18 +68,20 @@ export default defineComponent({
       }
       let children: RendererNode[] = renderTNodeJSX('default');
       const res: RendererNode[] = [];
-      const label: RendererNode[] = [];
-      children?.forEach((child) => {
-        if (child.type === Fragment) {
-          res.push(...child.children);
-        } else {
-          res.push(child);
-        }
-        if (child.children?.label) {
-          label.push(child.children.label()[0] || null);
-        }
-      });
-
+      const label: Record<number, RendererNode> = {};
+      const handler = (children: RendererNode[]) => {
+        children?.forEach((child, index) => {
+          if (child.type === Fragment) {
+            handler(child.children);
+          } else {
+            res.push(child);
+          }
+          if (child.children?.label) {
+            label[index] = child.children.label()[0] || null;
+          }
+        });
+      };
+      handler(children);
       children = res.filter((child: RendererNode) => child.type.name === `${prefix}-tab-panel`);
       return children.map((item: RendererNode, index: number) => ({
         ...item.props,
@@ -124,13 +126,9 @@ export default defineComponent({
         if (!tab) return;
         const tabLeft = tab?.offsetLeft;
         const tabWidth = tab?.offsetWidth;
-        const navScrollScrollLeft = navScroll.value.scrollLeft;
         const navScrollWidth = navScroll.value.offsetWidth;
-        if (tabLeft + tabWidth - navScrollScrollLeft > navScrollWidth) {
-          navScroll.value.scrollTo({ left: tabLeft + tabWidth - navScrollWidth, behavior: 'smooth' });
-        } else if (tabLeft < navScrollScrollLeft) {
-          navScroll.value.scrollTo({ left: tabLeft, behavior: 'smooth' });
-        }
+        const scrollDistance = tabLeft - navScrollWidth / 2 + tabWidth / 2;
+        navScroll.value.scrollTo({ left: scrollDistance, behavior: 'smooth' });
       }
     };
 
@@ -241,7 +239,7 @@ export default defineComponent({
                     props.theme === 'tag' && item.value === currentValue.value,
                 }}
               >
-                <TTabNavItem label={item.label} />
+                <TTabNavItem label={item.label} icon={item.icon} />
               </div>
             </TBadge>
             {props.theme === 'card' && index === currentIndex.value - 1 && (
@@ -261,7 +259,13 @@ export default defineComponent({
             <div class={navClasses.value}>
               <div
                 ref={navScroll}
-                class={`${tabsClass.value}__scroll ${tabsClass.value}__scroll--top ${tabsClass.value}__scroll--${props.theme}`}
+                class={[
+                  `${tabsClass.value}__scroll`,
+                  `${tabsClass.value}__scroll--${props.theme}`,
+                  {
+                    [`${tabsClass.value}__scroll--split`]: props.split,
+                  },
+                ]}
               >
                 <div ref={navWrap} class={`${tabsClass.value}__wrapper ${tabsClass.value}__wrapper--${props.theme}`}>
                   {readerNav()}
@@ -276,6 +280,7 @@ export default defineComponent({
               </div>
             </div>
           </TSticky>
+          {renderTNodeJSX('middle')}
           <div
             class={`${tabsClass.value}__content`}
             onTouchstart={handleTouchstart}
diff --git a/src/tabs/type.ts b/src/tabs/type.ts
index 3c85625b7..bc250f3b6 100644
--- a/src/tabs/type.ts
+++ b/src/tabs/type.ts
@@ -21,6 +21,10 @@ export interface TdTabsProps {
    * 选项卡列表
    */
   list?: Array<TdTabPanelProps>;
+  /**
+   * 中间内容，介于头部和内容之间
+   */
+  middle?: TNode;
   /**
    * 是否展示底部激活线条
    * @default true
@@ -36,6 +40,11 @@ export interface TdTabsProps {
    * @default true
    */
   spaceEvenly?: boolean;
+  /**
+   * 是否展示分割线
+   * @default true
+   */
+  split?: boolean;
   /**
    * 是否开启粘性布局
    * @default false
@@ -96,6 +105,10 @@ export interface TdTabPanelProps {
    * @default false
    */
   disabled?: boolean;
+  /**
+   * 图标
+   */
+  icon?: TNode;
   /**
    * 选项卡名称，可自定义选项卡导航内容
    */