From e65034e50e97201a428323a75372428ddab95d36 Mon Sep 17 00:00:00 2001
From: lijh <274153705@qq.com>
Date: Mon, 20 Oct 2025 10:41:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(typography):=20=E6=B7=BB=E5=8A=A0=20onSave?=
 =?UTF-8?q?=20=E5=9B=9E=E8=B0=83=E6=94=AF=E6=8C=81=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=97=B6=E8=A7=A6=E5=8F=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在 Base.tsx 中新增 onSave 属性用于编辑完成后回调- 更新中英文档，添加 onSave 属性说明与示例
- 修改交互示例，展示 onSave 回调使用方式
- 当内容变更且退出编辑状态时触发 onSave 回调- 优化 editable 配置对象，支持传递 onSave 方法
---
 components/typography/Base.tsx             | 6 ++++++
 components/typography/demo/interactive.vue | 6 ++++--
 components/typography/index.en-US.md       | 2 ++
 components/typography/index.zh-CN.md       | 2 ++
 4 files changed, 14 insertions(+), 2 deletions(-)

diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index 03665a6f1d..b37b6d9508 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -49,6 +49,7 @@ export interface EditConfig {
   tooltip?: boolean;
   onStart?: () => void;
   onChange?: (value: string) => void;
+  onSave?: (value: string) => void;
   onCancel?: () => void;
   onEnd?: () => void;
   maxlength?: number;
@@ -219,6 +220,11 @@ const Base = defineComponent({
     }
 
     function onEditChange(value: string) {
+      const { onSave } = editable.value;
+      if (value !== props.content) {
+        emit('save', value);
+        onSave?.(value);
+      }
       onContentChange(value);
       triggerEdit(false);
     }
diff --git a/components/typography/demo/interactive.vue b/components/typography/demo/interactive.vue
index 50c8f84f35..1b5c735d5a 100644
--- a/components/typography/demo/interactive.vue
+++ b/components/typography/demo/interactive.vue
@@ -15,7 +15,7 @@ title:
 Provide additional interactive capacity of editable and copyable.
 </docs>
 <template>
-  <a-typography-paragraph v-model:content="editableStr" editable />
+  <a-typography-paragraph v-model:content="editableStr" :editable="{ onSave: saveText }" />
   <a-typography-paragraph v-model:content="customIconStr" editable>
     <template #editableIcon><HighlightOutlined /></template>
     <template #editableTooltip>click to edit text</template>
@@ -85,7 +85,9 @@ watch(editableStr, () => {
   console.log('editableStr', editableStr.value);
 });
 const chooseTrigger = ref<('icon' | 'text')[]>(['icon']);
-
+const saveText = (value: string) => {
+  console.log('saveText', value);
+};
 const radioToState = (input: string): ('icon' | 'text')[] => {
   switch (input) {
     case 'text':
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index 956983669d..4b857b94be 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -103,6 +103,7 @@ Basic text writing, including headings, body text, lists, and more.
     autoSize: boolean | { minRows: number, maxRows: number },
     onStart: function,
     onChange: function(string),
+    onSave: function(string),
     onCancel: function,
     onEnd: function,
     triggerType: ('icon' | 'text')[],
@@ -118,6 +119,7 @@ Basic text writing, including headings, body text, lists, and more.
 | triggerType | Edit mode trigger - icon, text or both (not specifying icon as trigger hides it) | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | onCancel | Called when type ESC to exit editable state | function | - |  |
 | onChange | Called when input at textarea | function(event) | - |  |
+| onSave | Called when exit editable state，Contains text fields that are converted back to text | function(event) | - |  |
 | onEnd | Called when type ENTER to exit editable state | function | - |  |
 | onStart | Called when enter editable state | function | - |  |
 
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index fae1af19a9..c39d18fbe6 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -104,6 +104,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
     autoSize: boolean | { minRows: number, maxRows: number },
     onStart: function,
     onChange: function(string),
+    onSave: function(string),
     onCancel: function,
     onEnd: function,
     triggerType: ('icon' | 'text')[],
@@ -119,6 +120,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | triggerType | 编辑模式触发器类型，图标、文本或者两者都设置（不设置图标作为触发器时它会隐藏） | Array&lt;`icon`\|`text`> | \[`icon`] |  |
 | onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
 | onChange | 文本域编辑时触发 | function(event) | - |  |
+| onSave | 文本域编辑结束时触发，包含文本域变回文字 | function(event) | - |  |
 | onEnd | 按 ENTER 结束编辑状态时触发 | function | - |  |
 | onStart | 进入编辑中状态时触发 | function | - |  |