From 62094578fb05b611fe71fd8009098341883684b8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 3 Jun 2025 23:09:54 +0800
Subject: [PATCH 1/4] feat(swipe-cell): support  onDragstart and onDragend api

---
 src/swipe-cell/SwipeCell.tsx       | 12 ++++++++++++
 src/swipe-cell/swipe-cell.en-US.md |  5 +++--
 src/swipe-cell/swipe-cell.md       |  6 ++++--
 src/swipe-cell/type.ts             | 29 +++++++++++++----------------
 4 files changed, 32 insertions(+), 20 deletions(-)

diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx
index c84c40b56..3d28518ac 100644
--- a/src/swipe-cell/SwipeCell.tsx
+++ b/src/swipe-cell/SwipeCell.tsx
@@ -106,6 +106,9 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
     (state) => {
       ctx.dragging = true;
       const [offsetX] = state.offset;
+      if (state.first) {
+        props.onDragstart?.();
+      }
       if (state.last) {
         let position = offsetX + state.velocity[0] * state.direction[0] * 50;
         if (offsetX > 0) {
@@ -130,6 +133,7 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
         } else {
           close();
         }
+        props.onDragend?.();
         window.setTimeout(() => {
           ctx.dragging = false;
         });
@@ -147,6 +151,14 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
       preventScroll: true,
       pointer: { touch: true },
       enabled: !disabled,
+      onDragStart: () => {
+        console.log('拖拽开始');
+        // props.onDragstart?.();
+      },
+      onDragEnd: () => {
+        console.log('拖拽结束');
+        // props.onDragend?.();
+      },
     },
   );
 
diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md
index 11115cd6f..b27422b6b 100644
--- a/src/swipe-cell/swipe-cell.en-US.md
+++ b/src/swipe-cell/swipe-cell.en-US.md
@@ -2,7 +2,6 @@
 
 ## API
 
-
 ### SwipeCell Props
 
 name | type | default | description | required
@@ -13,6 +12,8 @@ content | TNode | - | Typescript：`string \| TNode`。[see more ts definition](
 disabled | Boolean | - | \- | N
 left | TNode | - | Typescript：`Array<SwipeActionItem> \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 opened | Boolean / Array | false | Typescript：`boolean \| Array<boolean>` | N
-right | TNode | - | Typescript：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N
+right | TNode | - | Typescript：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N
 onChange | Function |  | Typescript：`(value: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
+onDragend | Function |  | Typescript：`() => void`<br/> | N
+onDragstart | Function |  | Typescript：`() => void`<br/> | N
diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md
index da71882c7..8da2ba1aa 100644
--- a/src/swipe-cell/swipe-cell.md
+++ b/src/swipe-cell/swipe-cell.md
@@ -12,6 +12,8 @@ content | TNode | - | 操作项以外的内容。TS 类型：`string \| TNode`
 disabled | Boolean | - | 是否禁用滑动 | N
 left | TNode | - | 左侧滑动操作项。所有行为同 `right`。TS 类型：`Array<SwipeActionItem> \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts) | N
 opened | Boolean / Array | false | 操作项是否呈现为打开态，值为数组时表示分别控制左右滑动的展开和收起状态。TS 类型：`boolean \| Array<boolean>` | N
-right | TNode | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: string; sure?: string \| TNode; onClick?: () => void; [key: string]: any }`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N
-onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。 | N
+right | TNode | - | 右侧滑动操作项。有两种定义方式，一种是使用数组，二种是使用插槽。`right.text` 表示操作文本，`right.className` 表示操作项类名，`right.style` 表示操作项样式，`right.onClick` 表示点击操作项后执行的回调函数。示例：`[{ text: '删除', style: 'background-color: red', onClick: () => {} }]`。TS 类型：`Array<SwipeActionItem> \| TNode` `interface SwipeActionItem {text: string; className?: string; style?: Styles; sure?: Sure; onClick?: () => void; [key: string]: any }` `type Sure = string \| TNode`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts) | N
+onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态 | N
 onClick | Function |  | TS 类型：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
+onDragend | Function |  | TS 类型：`() => void`<br/>滑动结束事件 | N
+onDragstart | Function |  | TS 类型：`() => void`<br/>滑动开始事件 | N
diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts
index 4d6b14d90..002ef0d77 100644
--- a/src/swipe-cell/type.ts
+++ b/src/swipe-cell/type.ts
@@ -4,7 +4,7 @@
  * 该文件为脚本自动生成文件，请勿随意修改。如需修改请联系 PMC
  * */
 
-import { TNode } from '../common';
+import { TNode, Styles } from '../common';
 
 export interface TdSwipeCellProps {
   /**
@@ -29,35 +29,32 @@ export interface TdSwipeCellProps {
    */
   right?: Array<SwipeActionItem> | TNode;
   /**
-   * 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态。
+   * 菜单展开或者收回后将菜单的状态传递给父组件，值为数组时表示分别控制左右滑动的展开和收起状态
    */
   onChange?: (value: string) => void;
   /**
    * 操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）
    */
   onClick?: (action: SwipeActionItem, source: SwipeSource) => void;
+  /**
+   * 滑动结束事件
+   */
+  onDragend?: () => void;
+  /**
+   * 滑动开始事件
+   */
+  onDragstart?: () => void;
 }
 
 export interface SwipeActionItem {
   text: string;
   className?: string;
-  style?: string;
+  style?: Styles;
   sure?: Sure;
   onClick?: () => void;
   [key: string]: any;
 }
 
-export type SwipeSource = 'left' | 'right';
-
-export interface SwipeCellInstanceFunctions {
-  /**
-   * 显示二次确认内容的函数。<br/>【关于参数】`sure` 表示二次确认的具体内容，同content
-   */
-  showSure?: (sure: Sure, onClick?: SwipeActionItem['onClick']) => void;
-  /**
-   * 关闭
-   */
-  close?: () => void;
-}
-
 export type Sure = string | TNode;
+
+export type SwipeSource = 'left' | 'right';

From 0500a1dc772b957b92b76c477872352ad4f598f2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 3 Jun 2025 23:19:57 +0800
Subject: [PATCH 2/4] docs: sync api

---
 src/swipe-cell/swipe-cell.en-US.md | 8 ++++++++
 src/swipe-cell/swipe-cell.md       | 8 ++++++++
 src/swipe-cell/type.ts             | 8 ++++++++
 3 files changed, 24 insertions(+)

diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md
index b27422b6b..19e1b6036 100644
--- a/src/swipe-cell/swipe-cell.en-US.md
+++ b/src/swipe-cell/swipe-cell.en-US.md
@@ -17,3 +17,11 @@ onChange | Function |  | Typescript：`(value: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
 onDragend | Function |  | Typescript：`() => void`<br/> | N
 onDragstart | Function |  | Typescript：`() => void`<br/> | N
+
+### SwipeCellInstanceFunctions 组件实例方法
+
+name | params | return | description
+-- | -- | -- | --
+className | String | - | className of component | N
+style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
+showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | Typescript：`string \| TNode；如果设置了 `onClick`，则点击二次确认内容时，会执行此onClick方法。<br />[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md
index 8da2ba1aa..2968deeb5 100644
--- a/src/swipe-cell/swipe-cell.md
+++ b/src/swipe-cell/swipe-cell.md
@@ -17,3 +17,11 @@ onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开
 onClick | Function |  | TS 类型：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
 onDragend | Function |  | TS 类型：`() => void`<br/>滑动结束事件 | N
 onDragstart | Function |  | TS 类型：`() => void`<br/>滑动开始事件 | N
+
+### SwipeCellInstanceFunctions 组件实例方法
+
+名称 | 参数 | 返回值 | 描述
+-- | -- | -- | --
+className | String | - | 类名 | N
+style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
+showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | 显示二次确认内容的函数。<br/>【关于参数】`sure` 表示二次确认的具体内容，同content。TS 类型：`string \| TNode；如果设置了 `onClick`，则点击二次确认内容时，会执行此onClick方法。<br />[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts
index 002ef0d77..d2425e461 100644
--- a/src/swipe-cell/type.ts
+++ b/src/swipe-cell/type.ts
@@ -46,6 +46,14 @@ export interface TdSwipeCellProps {
   onDragstart?: () => void;
 }
 
+/** 组件实例方法 */
+export interface SwipeCellInstanceFunctions {
+  /**
+   * 显示二次确认内容的函数。<br/>【关于参数】`sure` 表示二次确认的具体内容，同content
+   */
+  showSure?: (sure: string | TNode, onClick?: SwipeActionItem['onClick']) => void;
+}
+
 export interface SwipeActionItem {
   text: string;
   className?: string;

From 84ea56f5a698f86dddebdaa71202c4146d655172 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Tue, 3 Jun 2025 23:23:24 +0800
Subject: [PATCH 3/4] chore: remove invalid code

---
 src/swipe-cell/SwipeCell.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/swipe-cell/SwipeCell.tsx b/src/swipe-cell/SwipeCell.tsx
index 3d28518ac..9ce0e76fa 100644
--- a/src/swipe-cell/SwipeCell.tsx
+++ b/src/swipe-cell/SwipeCell.tsx
@@ -151,14 +151,6 @@ const SwipeCell = forwardRef<SwipeCellRef, SwipeCellProps>((originProps, ref) =>
       preventScroll: true,
       pointer: { touch: true },
       enabled: !disabled,
-      onDragStart: () => {
-        console.log('拖拽开始');
-        // props.onDragstart?.();
-      },
-      onDragEnd: () => {
-        console.log('拖拽结束');
-        // props.onDragend?.();
-      },
     },
   );
 

From 20036d845596abb1e95ac34abdb11544c6da00c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=8E=E4=BC=9F=E6=9D=B0?= <674416404@qq.com>
Date: Thu, 12 Jun 2025 00:06:51 +0800
Subject: [PATCH 4/4] chore: remove SwipeCellInstanceFunctions

---
 src/swipe-cell/swipe-cell.en-US.md | 8 --------
 src/swipe-cell/swipe-cell.md       | 8 --------
 src/swipe-cell/type.ts             | 8 --------
 3 files changed, 24 deletions(-)

diff --git a/src/swipe-cell/swipe-cell.en-US.md b/src/swipe-cell/swipe-cell.en-US.md
index 19e1b6036..b27422b6b 100644
--- a/src/swipe-cell/swipe-cell.en-US.md
+++ b/src/swipe-cell/swipe-cell.en-US.md
@@ -17,11 +17,3 @@ onChange | Function |  | Typescript：`(value: string) => void`<br/> | N
 onClick | Function |  | Typescript：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
 onDragend | Function |  | Typescript：`() => void`<br/> | N
 onDragstart | Function |  | Typescript：`() => void`<br/> | N
-
-### SwipeCellInstanceFunctions 组件实例方法
-
-name | params | return | description
--- | -- | -- | --
-className | String | - | className of component | N
-style | Object | - | CSS(Cascading Style Sheets)，Typescript：`React.CSSProperties` | N
-showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | Typescript：`string \| TNode；如果设置了 `onClick`，则点击二次确认内容时，会执行此onClick方法。<br />[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`。[see more ts definition](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
diff --git a/src/swipe-cell/swipe-cell.md b/src/swipe-cell/swipe-cell.md
index 2968deeb5..8da2ba1aa 100644
--- a/src/swipe-cell/swipe-cell.md
+++ b/src/swipe-cell/swipe-cell.md
@@ -17,11 +17,3 @@ onChange | Function |  | TS 类型：`(value: string) => void`<br/>菜单展开
 onClick | Function |  | TS 类型：`(action: SwipeActionItem, source: SwipeSource) => void`<br/>操作项点击时触发（插槽写法组件不触发，业务侧自定义内容和事件）。[详细类型定义](https://github.com/Tencent/tdesign-mobile-react/tree/develop/src/swipe-cell/type.ts)。<br/>`type SwipeSource = 'left' \| 'right'`<br/> | N
 onDragend | Function |  | TS 类型：`() => void`<br/>滑动结束事件 | N
 onDragstart | Function |  | TS 类型：`() => void`<br/>滑动开始事件 | N
-
-### SwipeCellInstanceFunctions 组件实例方法
-
-名称 | 参数 | 返回值 | 描述
--- | -- | -- | --
-className | String | - | 类名 | N
-style | Object | - | 样式，TS 类型：`React.CSSProperties` | N
-showSure | `(sure: string \| TNode, onClick?: SwipeActionItem['onClick'])` | `void` | 显示二次确认内容的函数。<br/>【关于参数】`sure` 表示二次确认的具体内容，同content。TS 类型：`string \| TNode；如果设置了 `onClick`，则点击二次确认内容时，会执行此onClick方法。<br />[详细类型定义](https://github.com/Tencent/tdesign-mobile-vue/tree/develop/src/swipe-cell/type.ts)。<br/>`。[通用类型定义](https://github.com/Tencent/tdesign-mobile-react/blob/develop/src/common.ts)
diff --git a/src/swipe-cell/type.ts b/src/swipe-cell/type.ts
index d2425e461..002ef0d77 100644
--- a/src/swipe-cell/type.ts
+++ b/src/swipe-cell/type.ts
@@ -46,14 +46,6 @@ export interface TdSwipeCellProps {
   onDragstart?: () => void;
 }
 
-/** 组件实例方法 */
-export interface SwipeCellInstanceFunctions {
-  /**
-   * 显示二次确认内容的函数。<br/>【关于参数】`sure` 表示二次确认的具体内容，同content
-   */
-  showSure?: (sure: string | TNode, onClick?: SwipeActionItem['onClick']) => void;
-}
-
 export interface SwipeActionItem {
   text: string;
   className?: string;