diff --git a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
index 26e206614..667c00d6f 100644
--- a/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
+++ b/src/swipe-cell/__test__/__snapshots__/demo.test.jsx.snap
@@ -2,125 +2,128 @@
 
 exports[`SwipeCell > SwipeCell bindVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    通过expanded实现父子组件联动
+  </p>
+  
   <div
-    class="tdesign-mobile-demo-block"
+    class="t-cell t-cell--middle t-cell--bordered"
   >
-    <!--v-if-->
-    <p
-      class="tdesign-mobile-demo-block__summary"
+    <div
+      class="t-cell__left-icon"
     >
-      通过expanded实现父子组件联动
-    </p>
-    
+      <!--v-if-->
+      <!--v-if-->
+    </div>
     <div
-      class="t-cell t-cell--middle t-cell--bordered"
+      class="t-cell__title"
     >
-      <div
-        class="t-cell__left-icon"
-      >
-        <!--v-if-->
-        <!--v-if-->
-      </div>
-      <div
-        class="t-cell__title"
+      开关
+      <!--v-if-->
+      <!--v-if-->
+    </div>
+    <div
+      class="t-cell__note"
+    >
+      
+      <span
+        class="t-switch t-is-checked"
       >
-        开关
         <!--v-if-->
-        <!--v-if-->
-      </div>
+        <span
+          class="t-switch__node"
+          style=""
+        />
+      </span>
+      
+    </div>
+    <!--v-if-->
+  </div>
+  <div
+    class="t-swipe-cell"
+  >
+    <div
+      class="t-swipe-cell__wrapper"
+      style="transform: translate3d(0px,0,0);"
+    >
       <div
-        class="t-cell__note"
+        class="t-swipe-cell__left"
+        style="width: auto;"
       >
+        <!---->
         
-        <span
-          class="t-switch t-is-checked"
-        >
-          <!--v-if-->
-          <span
-            class="t-switch__node"
-            style=""
-          />
-        </span>
         
       </div>
-      <!--v-if-->
-    </div>
-    <div
-      class="t-swipe-cell"
-    >
       <div
-        class="t-swipe-cell__wrapper"
-        style="transform: translate3d(0px,0,0);"
+        class="t-swipe-cell__content"
       >
+        
         <div
-          class="t-swipe-cell__left"
-          style="width: auto;"
-        >
-          <!---->
-          
-          
-        </div>
-        <div
-          class="t-swipe-cell__content"
+          class="t-cell t-cell--middle t-cell--bordered"
         >
-          
           <div
-            class="t-cell t-cell--middle t-cell--bordered"
+            class="t-cell__left-icon"
           >
-            <div
-              class="t-cell__left-icon"
-            >
-              <!--v-if-->
-              <!--v-if-->
-            </div>
-            <div
-              class="t-cell__title"
-            >
-              父子组件联动
-              <!--v-if-->
-              <!--v-if-->
-            </div>
             <!--v-if-->
             <!--v-if-->
           </div>
-          
+          <div
+            class="t-cell__title"
+          >
+            父子组件联动
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          <!--v-if-->
+          <!--v-if-->
         </div>
-        <div
-          class="t-swipe-cell__right"
-          style="width: auto;"
+        
+      </div>
+      <div
+        class="t-swipe-cell__right"
+        style="width: auto;"
+      >
+        
+        <button
+          aria-disabled="false"
+          class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
+          role="button"
         >
-          
-          <button
-            aria-disabled="false"
-            class="t-button t-size-m t-button--base t-button--danger t-button--shape-square"
-            role="button"
+          <!---->
+          <span
+            class="t-button__text"
           >
-            <!---->
-            <span
-              class="t-button__text"
-            >
-              
-              删除
-              
-            </span>
-          </button>
-          
-          
-          
-        </div>
+            
+            删除
+            
+          </span>
+        </button>
+        
+        
+        
       </div>
     </div>
-    
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    左右两侧都有菜单
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -217,13 +220,21 @@ exports[`SwipeCell > SwipeCell btnsVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell contentVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    通过直接传入内容或者使用 slot#content 来渲染
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -279,13 +290,21 @@ exports[`SwipeCell > SwipeCell contentVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell disabledVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    是否启用滑动功能
+  </p>
+  
   <div
     class="t-cell t-cell--middle t-cell--bordered"
   >
@@ -400,13 +419,21 @@ exports[`SwipeCell > SwipeCell disabledVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  class="tdesign-mobile-demo-block"
 >
+  <!--v-if-->
+  <p
+    class="tdesign-mobile-demo-block__summary"
+  >
+    点击事件
+  </p>
+  
   <div
     class="t-swipe-cell"
   >
@@ -507,13 +534,15 @@ exports[`SwipeCell > SwipeCell eventVue demo works fine 1`] = `
       </div>
     </div>
   </div>
+  
 </div>
 `;
 
 exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  data-v-app=""
 >
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -683,6 +712,7 @@ exports[`SwipeCell > SwipeCell leftCardVue demo works fine 1`] = `
     </div>
     
   </div>
+  
 </div>
 `;
 
@@ -912,8 +942,9 @@ exports[`SwipeCell > SwipeCell leftMoreMenuVue demo works fine 1`] = `
 
 exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
 <div
-  class="tdesign-mobile-demo"
+  data-v-app=""
 >
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1073,6 +1104,7 @@ exports[`SwipeCell > SwipeCell leftOneMenuVue demo works fine 1`] = `
     </div>
     
   </div>
+  
 </div>
 `;
 
@@ -1290,6 +1322,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
   >
     用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。
   </p>
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1449,6 +1482,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1640,6 +1675,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -1855,6 +1892,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2024,6 +2063,8 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2183,6 +2224,7 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  
   <div
     class="tdesign-mobile-demo-block"
   >
@@ -2293,6 +2335,419 @@ exports[`SwipeCell > SwipeCell mobileVue demo works fine 1`] = `
     </div>
     
   </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      通过直接传入内容或者使用 slot#content 来渲染
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          <!---->
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            style="padding: 10px;"
+          >
+            直接写组件
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <div>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+              role="button"
+              style="height: 100%;"
+              type="submit"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                收藏
+                
+              </span>
+            </button>
+          </div>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      是否启用滑动功能
+    </p>
+    
+    <div
+      class="t-cell t-cell--middle t-cell--bordered"
+    >
+      <div
+        class="t-cell__left-icon"
+      >
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__title"
+      >
+        开关
+        <!--v-if-->
+        <!--v-if-->
+      </div>
+      <div
+        class="t-cell__note"
+      >
+        
+        <span
+          class="t-switch"
+        >
+          <!--v-if-->
+          <span
+            class="t-switch__node"
+            style=""
+          />
+        </span>
+        
+      </div>
+      <!--v-if-->
+    </div>
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          <!---->
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              可以滑动
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--base t-button--primary t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              收藏
+              
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="t-button t-size-s t-button--base t-button--danger t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              删除
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      左右两侧都有菜单
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              选择
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              左右都有菜单
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          <div>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--theme t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                收藏
+                
+              </span>
+            </button>
+            <button
+              aria-disabled="false"
+              class="t-button t-size-m t-button--base t-button--danger t-button--shape-rectangle"
+              role="button"
+            >
+              <!---->
+              <span
+                class="t-button__text"
+              >
+                
+                删除
+                
+              </span>
+            </button>
+          </div>
+          
+          
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
+  <div
+    class="tdesign-mobile-demo-block"
+  >
+    <!--v-if-->
+    <p
+      class="tdesign-mobile-demo-block__summary"
+    >
+      点击事件
+    </p>
+    
+    <div
+      class="t-swipe-cell"
+    >
+      <div
+        class="t-swipe-cell__wrapper"
+        style="transform: translate3d(0px,0,0);"
+      >
+        <div
+          class="t-swipe-cell__left"
+          style="width: auto;"
+        >
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            role="button"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              选择
+              
+            </span>
+          </button>
+          
+          
+          
+        </div>
+        <div
+          class="t-swipe-cell__content"
+        >
+          
+          <div
+            class="t-cell t-cell--middle t-cell--bordered"
+          >
+            <div
+              class="t-cell__left-icon"
+            >
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__title"
+            >
+              左右都有内容
+              <!--v-if-->
+              <!--v-if-->
+            </div>
+            <div
+              class="t-cell__note"
+            >
+              辅助信息
+            </div>
+            <!--v-if-->
+          </div>
+          
+        </div>
+        <div
+          class="t-swipe-cell__right"
+          style="width: auto;"
+        >
+          
+          
+          
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              删除
+              
+            </span>
+          </button>
+          <button
+            aria-disabled="false"
+            class="t-button t-size-m t-button--base t-button--default t-button--shape-rectangle"
+            role="button"
+            style="height: 100%;"
+          >
+            <!---->
+            <span
+              class="t-button__text"
+            >
+              
+              收藏
+              
+            </span>
+          </button>
+          
+        </div>
+      </div>
+    </div>
+    
+  </div>
 </div>
 `;
 
diff --git a/src/swipe-cell/demos/bind.vue b/src/swipe-cell/demos/bind.vue
index 20fcf18b7..9a32205bf 100644
--- a/src/swipe-cell/demos/bind.vue
+++ b/src/swipe-cell/demos/bind.vue
@@ -1,46 +1,34 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="通过expanded实现父子组件联动">
-      <t-cell title="开关">
-        <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
-      </t-cell>
-      <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
-        <t-cell title="父子组件联动" />
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+  <tdesign-demo-block summary="通过expanded实现父子组件联动">
+    <t-cell title="开关">
+      <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
+    </t-cell>
+    <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
+      <t-cell title="父子组件联动" />
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 
 interface InitData {
   expanded: 'left' | 'right' | undefined;
 }
-export default defineComponent({
-  setup() {
-    const initData: InitData = reactive({
-      expanded: 'right',
-    });
-    const handleClick = () => {
-      Toast('click');
-    };
-    const handleChange = (value: InitData['expanded']) => {
-      initData.expanded = value;
-    };
-    const handleChangeSwitch = (value: boolean) => {
-      initData.expanded = value ? 'right' : undefined;
-    };
-    return {
-      initData,
-      handleClick,
-      handleChange,
-      handleChangeSwitch,
-    };
-  },
+const initData: InitData = reactive({
+  expanded: 'right',
 });
+const handleClick = () => {
+  Toast('click');
+};
+const handleChange = (value: InitData['expanded']) => {
+  initData.expanded = value;
+};
+const handleChangeSwitch = (value: boolean) => {
+  initData.expanded = value ? 'right' : undefined;
+};
 </script>
diff --git a/src/swipe-cell/demos/btns.vue b/src/swipe-cell/demos/btns.vue
index 10b9fbaf0..a09412c3e 100644
--- a/src/swipe-cell/demos/btns.vue
+++ b/src/swipe-cell/demos/btns.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="左右两侧都有菜单">
     <t-swipe-cell>
       <t-cell title="左右都有菜单"></t-cell>
       <template #left>
@@ -12,31 +12,22 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive, ref } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const initData = reactive({
-      showDialog: false,
-      disabled: false,
-    });
-    const handleClick = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const handleClickLeft = () => {
-      Toast('click');
-    };
-    return {
-      initData,
-      handleClick,
-      handleClickLeft,
-    };
-  },
+const initData = reactive({
+  showDialog: false,
+  disabled: false,
 });
+const handleClick = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const handleClickLeft = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/content.vue b/src/swipe-cell/demos/content.vue
index 6900672b7..33a5027ad 100644
--- a/src/swipe-cell/demos/content.vue
+++ b/src/swipe-cell/demos/content.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="通过直接传入内容或者使用 slot#content 来渲染">
     <t-swipe-cell>
       <template #content>
         <div style="padding: 10px">使用slot#content</div>
@@ -11,15 +11,7 @@
         </div>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  setup() {
-    return {};
-  },
-});
-</script>
+<script setup lang="ts"></script>
diff --git a/src/swipe-cell/demos/disabled.vue b/src/swipe-cell/demos/disabled.vue
index 5c553ec71..277a51fcc 100644
--- a/src/swipe-cell/demos/disabled.vue
+++ b/src/swipe-cell/demos/disabled.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="是否启用滑动功能">
     <t-cell title="开关">
       <t-switch v-model="initData.disabled" @change="(value) => handleChange(value)"> </t-switch>
     </t-cell>
@@ -10,24 +10,16 @@
         <t-button theme="danger" style="height: 100%" size="small">删除</t-button>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 
-export default defineComponent({
-  setup() {
-    const initData = reactive({
-      disabled: false,
-    });
-    const handleChange = (value: boolean) => {
-      initData.disabled = value;
-    };
-    return {
-      initData,
-      handleChange,
-    };
-  },
+const initData = reactive({
+  disabled: false,
 });
+const handleChange = (value: boolean) => {
+  initData.disabled = value;
+};
 </script>
diff --git a/src/swipe-cell/demos/event.vue b/src/swipe-cell/demos/event.vue
index 9d5f6a72a..99d34ade3 100644
--- a/src/swipe-cell/demos/event.vue
+++ b/src/swipe-cell/demos/event.vue
@@ -1,44 +1,35 @@
 <template>
-  <div class="tdesign-mobile-demo">
+  <tdesign-demo-block summary="点击事件">
     <t-swipe-cell :right="initData.btns" @click="handleClick">
       <t-cell title="左右都有内容" note="辅助信息"></t-cell>
       <template #left>
         <t-button @click="handleClickLeft">选择</t-button>
       </template>
     </t-swipe-cell>
-  </div>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const handleDelete = () => {
-      Toast.success('删除成功');
-    };
-    const initData = reactive({
-      btns: [
-        // 通过按钮对象传入onClick事件，按钮的onClick事件优先级大于swipe-cell组件上绑定的onClick事件
-        { text: '删除', theme: 'danger', onClick: handleDelete },
-        { text: '收藏', theme: 'default' },
-      ],
-    });
-    // 绑定在swipe-cell组件上面的onClick事件
-    const handleClick = (value: { action: SwipeActionItem; source: String }) => {
-      // 根据返回的action对象判断点击的按钮
-      Toast(JSON.stringify(value));
-    };
-    const handleClickLeft = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-      handleClickLeft,
-      initData,
-    };
-  },
+const handleDelete = () => {
+  Toast.success('删除成功');
+};
+const initData = reactive({
+  btns: [
+    // 通过按钮对象传入onClick事件，按钮的onClick事件优先级大于swipe-cell组件上绑定的onClick事件
+    { text: '删除', theme: 'danger', onClick: handleDelete },
+    { text: '收藏', theme: 'default' },
+  ],
 });
+// 绑定在swipe-cell组件上面的onClick事件
+const handleClick = (value: { action: SwipeActionItem; source: String }) => {
+  // 根据返回的action对象判断点击的按钮
+  Toast(JSON.stringify(value));
+};
+const handleClickLeft = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-card.vue b/src/swipe-cell/demos/left-card.vue
index 20feb10ba..f4d6d5b16 100644
--- a/src/swipe-cell/demos/left-card.vue
+++ b/src/swipe-cell/demos/left-card.vue
@@ -1,50 +1,40 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="左滑大列表">
-      <t-swipe-cell>
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+  <tdesign-demo-block summary="左滑大列表">
+    <t-swipe-cell>
+      <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
+        <template #leftIcon>
+          <img
+            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
+            style="width: 50px; height: 50px; margin-right: 8px; float: left"
+          />
         </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
+  <tdesign-demo-block style="margin-top: 10px">
+    <t-swipe-cell expanded="right">
+      <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
+        <template #leftIcon>
+          <img
+            src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
+            style="width: 50px; height: 50px; margin-right: 8px; float: left"
+          />
         </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+      </t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-more-menu.vue b/src/swipe-cell/demos/left-more-menu.vue
index 31241d5c3..d7a4d57eb 100644
--- a/src/swipe-cell/demos/left-more-menu.vue
+++ b/src/swipe-cell/demos/left-more-menu.vue
@@ -21,19 +21,10 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
-import { SwipeActionItem } from '../type';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-one-menu.vue b/src/swipe-cell/demos/left-one-menu.vue
index 36c3a720c..719682652 100644
--- a/src/swipe-cell/demos/left-one-menu.vue
+++ b/src/swipe-cell/demos/left-one-menu.vue
@@ -1,36 +1,26 @@
 <template>
-  <div class="tdesign-mobile-demo">
-    <tdesign-demo-block summary="左滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-  </div>
+  <tdesign-demo-block summary="左滑单操作">
+    <t-swipe-cell>
+      <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
+  <tdesign-demo-block style="margin-top: 10px">
+    <t-swipe-cell expanded="right">
+      <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
+      <template #right>
+        <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
+      </template>
+    </t-swipe-cell>
+  </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>
diff --git a/src/swipe-cell/demos/left-two-menu.vue b/src/swipe-cell/demos/left-two-menu.vue
index 74ab9c4c4..3e420ef7d 100644
--- a/src/swipe-cell/demos/left-two-menu.vue
+++ b/src/swipe-cell/demos/left-two-menu.vue
@@ -11,32 +11,29 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
+<script setup lang="ts">
+import { reactive } from 'vue';
 import Toast from '../../toast/index';
 import { SwipeActionItem } from '../type';
 
 interface InitData {
   btns: {}[];
 }
-export default defineComponent({
-  setup() {
-    const handleEdit = () => {
-      Toast.success(`编辑成功`);
-    };
-    const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const initData: InitData = reactive({
-      btns: [
-        { text: '编辑', className: 't-button--primary', onClick: handleEdit },
-        { text: '删除', className: 't-button--danger' },
-      ],
-    });
-    return {
-      initData,
-      handleClickBtns,
-    };
-  },
+const handleEdit = () => {
+  Toast.success(`编辑成功`);
+};
+
+const handleDelete = () => {
+  Toast.success(`删除成功`);
+};
+
+const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
+  Toast(JSON.stringify(value));
+};
+const initData: InitData = reactive({
+  btns: [
+    { text: '编辑', className: 't-button--primary', onClick: handleEdit },
+    { text: '删除', className: 't-button--danger', onClick: handleDelete },
+  ],
 });
 </script>
diff --git a/src/swipe-cell/demos/mobile.vue b/src/swipe-cell/demos/mobile.vue
index ec2f975b0..21aac4707 100644
--- a/src/swipe-cell/demos/mobile.vue
+++ b/src/swipe-cell/demos/mobile.vue
@@ -2,154 +2,28 @@
   <div class="tdesign-mobile-demo">
     <h1 class="title">SwipeCell 滑动单元格</h1>
     <p class="summary">用来承载列表中的更多操作，通过左右滑动来展示，按钮的宽度固定高度根据列表高度而变化。</p>
-    <tdesign-demo-block summary="左滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑单操作" note="辅助信息"></t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑双操作">
-      <t-swipe-cell :right="initData.btns" @click="(value) => handleClickBtns(value)">
-        <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell :right="initData.btns" expanded="right" @click="(value) => handleClickBtns(value)">
-        <t-cell title="列表-左滑双操作" note="双操作"></t-cell>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑多操作">
-      <t-swipe-cell>
-        <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-        <template #right>
-          <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-          <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="列表-左滑多操作" note="多操作"></t-cell>
-        <template #right>
-          <t-button theme="primary" shape="square" @click="handleClick">收藏</t-button>
-          <t-button theme="warning" shape="square" @click="handleClick">编辑</t-button>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="左滑大列表">
-      <t-swipe-cell>
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="right">
-        <t-cell title="左滑大列表" description="一段很长很长的内容文字一段很长很长的内容文字一段很长很长的内容文字">
-          <template #leftIcon>
-            <img
-              src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png"
-              style="width: 50px; height: 50px; margin-right: 8px; float: left"
-            />
-          </template>
-        </t-cell>
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="右滑单操作">
-      <t-swipe-cell>
-        <t-cell title="列表-右滑单操作" note="辅助信息"></t-cell>
-        <template #left>
-          <t-button theme="primary" shape="square" @click="handleClick">选择</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block style="margin-top: 10px">
-      <t-swipe-cell expanded="left">
-        <t-cell title="列表-右滑单操作" note="辅助信息"></t-cell>
-        <template #left>
-          <t-button theme="primary" shape="square" @click="handleClick">选择</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
-    <tdesign-demo-block summary="通过expanded实现父子组件联动">
-      <t-cell title="开关">
-        <t-switch :value="initData.expanded === 'right'" @change="(value) => handleChangeSwitch(value)" />
-      </t-cell>
-      <t-swipe-cell :expanded="initData.expanded" @change="(value) => handleChange(value)">
-        <t-cell title="父子组件联动" />
-        <template #right>
-          <t-button theme="danger" shape="square" @click="handleClick">删除</t-button>
-        </template>
-      </t-swipe-cell>
-    </tdesign-demo-block>
+    <left-one-menu />
+    <left-two-menu />
+    <left-more-menu />
+    <left-card />
+    <right-menu />
+    <bind />
+    <content />
+    <disabled />
+    <btns />
+    <event />
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, reactive } from 'vue';
-import Toast from '../../toast/index';
-import { SwipeActionItem } from '../type';
-
-interface InitData {
-  disabled: boolean;
-  btns: {}[];
-  expanded: 'left' | 'right' | undefined;
-}
-export default defineComponent({
-  setup() {
-    const handleEdit = () => {
-      Toast.success(`编辑成功`);
-    };
-    const initData: InitData = reactive({
-      disabled: false,
-      btns: [
-        { text: '编辑', className: 't-button--primary', onClick: handleEdit },
-        { text: '删除', className: 't-button--danger' },
-      ],
-      expanded: 'right',
-    });
-    const handleClickBtns = (value: { action: SwipeActionItem; source: String }) => {
-      Toast(JSON.stringify(value));
-    };
-    const handleClick = () => {
-      Toast('click');
-    };
-    const handleChange = (value: InitData['expanded']) => {
-      initData.expanded = value;
-    };
-    const handleChangeSwitch = (value: boolean) => {
-      initData.expanded = value ? 'right' : undefined;
-    };
-    return {
-      initData,
-      handleClick,
-      handleClickBtns,
-      handleChange,
-      handleChangeSwitch,
-    };
-  },
-});
+<script setup lang="ts">
+import bind from './bind.vue';
+import btns from './btns.vue';
+import content from './content.vue';
+import disabled from './disabled.vue';
+import event from './event.vue';
+import leftCard from './left-card.vue';
+import leftMoreMenu from './left-more-menu.vue';
+import leftOneMenu from './left-one-menu.vue';
+import leftTwoMenu from './left-two-menu.vue';
+import rightMenu from './right-menu.vue';
 </script>
diff --git a/src/swipe-cell/demos/right-menu.vue b/src/swipe-cell/demos/right-menu.vue
index f05bb6ac2..f68a82097 100644
--- a/src/swipe-cell/demos/right-menu.vue
+++ b/src/swipe-cell/demos/right-menu.vue
@@ -17,18 +17,10 @@
   </tdesign-demo-block>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import Toast from '../../toast/index';
 
-export default defineComponent({
-  setup() {
-    const handleClick = () => {
-      Toast('click');
-    };
-    return {
-      handleClick,
-    };
-  },
-});
+const handleClick = () => {
+  Toast('click');
+};
 </script>