From 52434a06cf993e9af898f3828824930ae453f0f6 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 26 Oct 2026 00:19:22 -0700
Subject: [PATCH 1/7] docs: enhance input prefix placeholder demo with improved
 text and description

---
 docs/demos/sender/input-prefix-placeholder.vue           | 9 ++++++++-
 .../src/sender/components/editor-content/index.vue       | 1 +
 2 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/docs/demos/sender/input-prefix-placeholder.vue b/docs/demos/sender/input-prefix-placeholder.vue
index e605773bf7..b39bebd815 100644
--- a/docs/demos/sender/input-prefix-placeholder.vue
+++ b/docs/demos/sender/input-prefix-placeholder.vue
@@ -4,13 +4,14 @@ import { TrSender } from '@opentiny/tiny-robot'
 
 const showInputPrefix = shallowRef(true)
 const longPlaceholder =
-  '这是一段用于观察多行模式换行效果的超长占位文本，输入区域宽度不足时会自动折行，同时可以切换首行前置插槽观察缩进变化。'.repeat(
+  '这是一段用于观察多行模式换行效果的超长占位文本123123，thisisaintelligentaiframework.  输入区域宽度不足时会自动折行，同时可以切换首行前置插槽观察缩进变化。'.repeat(
     2,
   )
 </script>
 
 <template>
   <div class="demo-container">
+    <p class="demo-description">观察多行 placeholder 中中英文、数字混排时的自动换行；切换前置插槽可查看首行缩进。</p>
     <button class="toggle-button" type="button" @click="showInputPrefix = !showInputPrefix">
       {{ showInputPrefix ? '移除首行前置插槽' : '添加首行前置插槽' }}
     </button>
@@ -28,6 +29,12 @@ const longPlaceholder =
   padding: 20px;
 }
 
+.demo-description {
+  margin: 0 0 12px;
+  color: #666;
+  font-size: 14px;
+}
+
 .toggle-button {
   margin-bottom: 12px;
   padding: 5px 12px;
diff --git a/packages/components/src/sender/components/editor-content/index.vue b/packages/components/src/sender/components/editor-content/index.vue
index a7446126b1..21e27db7e5 100644
--- a/packages/components/src/sender/components/editor-content/index.vue
+++ b/packages/components/src/sender/components/editor-content/index.vue
@@ -135,6 +135,7 @@ watch([editor, mode], () => nextTick(syncPlaceholder), { immediate: true })
   pointer-events: none;
   white-space: pre-wrap;
   overflow-wrap: anywhere;
+  word-break: break-all;
 }
 
 .tr-sender-editor-content {

From b46577ba363a02ef405b51d4d79c3273e8bbafb3 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 26 Oct 2026 02:04:05 -0700
Subject: [PATCH 2/7] fix(sender): add check for composing state in submit
 shortcut logic

---
 .../components/src/sender/composables/useKeyboardShortcuts.ts    | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/src/sender/composables/useKeyboardShortcuts.ts b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
index ce5ed7888d..f26684df95 100644
--- a/packages/components/src/sender/composables/useKeyboardShortcuts.ts
+++ b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
@@ -29,6 +29,7 @@ export function useKeyboardShortcuts(params: UseKeyboardShortcutsParams): UseKey
    * - 当 submitType 为 'shiftEnter' 时：按 Shift+Enter 提交，单独按 Enter 换行
    */
   const checkSubmitShortcut = (event: KeyboardEvent): boolean => {
+    if (event.isComposing || event.keyCode === 229) return false
     if (!isKey(event, 'ENTER')) return false
 
     switch (submitType.value) {

From b04c4e71a46e56014529878b3afbf24715270eb1 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Mon, 26 Oct 2026 06:12:35 -0700
Subject: [PATCH 3/7] fix(sender): enhance layout and slot handling for single
 and multi-line modes

---
 .../components/layouts/MultiLineLayout.vue    |  5 +-
 .../components/layouts/SingleLineLayout.vue   |  1 +
 .../src/sender/composables/useModeSwitch.ts   | 38 ++++-----
 .../src/sender/composables/useSenderCore.ts   |  4 +-
 packages/components/src/sender/index.vue      |  5 ++
 packages/test/src/sender/helpers/index.ts     |  4 +
 packages/test/src/sender/index.vue            | 84 ++++++++++++-------
 packages/test/src/sender/selectors.ts         |  3 +
 packages/test/src/sender/specs/basic.spec.ts  | 18 ++++
 9 files changed, 104 insertions(+), 58 deletions(-)

diff --git a/packages/components/src/sender/components/layouts/MultiLineLayout.vue b/packages/components/src/sender/components/layouts/MultiLineLayout.vue
index dccd3907a5..91b50026fc 100644
--- a/packages/components/src/sender/components/layouts/MultiLineLayout.vue
+++ b/packages/components/src/sender/components/layouts/MultiLineLayout.vue
@@ -39,8 +39,9 @@ const slotScope = useSlotScope()
       <template #footer>
         <slot name="footer" v-bind="slotScope" />
       </template>
-      <template #footer-right>
-        <slot name="footer-right" v-bind="slotScope" />
+      <template #footer-right="slotProps">
+        <slot name="actions-inline" v-bind="slotProps" />
+        <slot name="footer-right" v-bind="slotProps" />
       </template>
     </Footer>
   </div>
diff --git a/packages/components/src/sender/components/layouts/SingleLineLayout.vue b/packages/components/src/sender/components/layouts/SingleLineLayout.vue
index aee4c19b17..2f96d23f41 100644
--- a/packages/components/src/sender/components/layouts/SingleLineLayout.vue
+++ b/packages/components/src/sender/components/layouts/SingleLineLayout.vue
@@ -65,6 +65,7 @@ const slotScope = useSlotScope()
   .tr-sender-container {
     display: flex;
     align-items: center;
+    min-width: 0;
   }
 
   .tr-sender-main {
diff --git a/packages/components/src/sender/composables/useModeSwitch.ts b/packages/components/src/sender/composables/useModeSwitch.ts
index 7053f55bf3..d877ca8d1e 100644
--- a/packages/components/src/sender/composables/useModeSwitch.ts
+++ b/packages/components/src/sender/composables/useModeSwitch.ts
@@ -4,7 +4,7 @@
  */
 
 import { ref, watch, nextTick, computed, type Ref } from 'vue'
-import { useResizeObserver, useTimeoutFn } from '@vueuse/core'
+import { useResizeObserver } from '@vueuse/core'
 import type { Editor } from '@tiptap/vue-3'
 import type { SenderProps, UseModeSwitchReturn, InputMode } from '../index.type'
 
@@ -14,16 +14,9 @@ export function useModeSwitch(
   editorRef: Ref<HTMLElement | null>,
 ): UseModeSwitchReturn {
   const currentMode = ref<InputMode>(props.mode || 'single')
-  const isAutoSwitching = ref(false)
   const initialMode = ref<InputMode>(props.mode || 'single')
-
-  const { start: startAutoSwitchingTimeout, stop: stopAutoSwitchingTimeout } = useTimeoutFn(
-    () => {
-      isAutoSwitching.value = false
-    },
-    300,
-    { immediate: false },
-  )
+  const isAutoSwitching = ref(false)
+  let overflowFrame = 0
 
   // 获取容器元素
   const containerRef = computed(() => {
@@ -36,7 +29,6 @@ export function useModeSwitch(
    */
   const checkOverflow = () => {
     if (initialMode.value !== 'single') return
-    if (isAutoSwitching.value) return
     if (!editor.value || !editorRef.value) return
 
     const editorElement = editorRef.value.querySelector('.ProseMirror') as HTMLElement
@@ -45,9 +37,10 @@ export function useModeSwitch(
     const text = editor.value.getText()
 
     if (currentMode.value === 'single') {
-      // 单行模式：检查是否溢出
-      // scrollWidth > clientWidth 表示内容超出可见区域
-      const isOverflowing = editorElement.scrollWidth > editorElement.clientWidth
+      // 测量实际段落，避免父级 overflow:hidden 和省略号影响 scrollWidth。
+      const contentElement = editorElement.querySelector('p') as HTMLElement | null
+      const contentWidth = contentElement?.scrollWidth ?? editorElement.scrollWidth
+      const isOverflowing = contentWidth > editorElement.clientWidth + 1
 
       if (isOverflowing) {
         setMode('multiple')
@@ -74,19 +67,22 @@ export function useModeSwitch(
       if (editor.value) {
         editor.value.commands.focus('end')
       }
-
-      stopAutoSwitchingTimeout()
-      startAutoSwitchingTimeout()
+      isAutoSwitching.value = false
+      scheduleOverflowCheck()
     })
   }
 
+  const scheduleOverflowCheck = () => {
+    cancelAnimationFrame(overflowFrame)
+    overflowFrame = requestAnimationFrame(() => checkOverflow())
+  }
+
   useResizeObserver(containerRef, () => {
-    // 使用 requestAnimationFrame 避免频繁触发
-    requestAnimationFrame(() => {
-      checkOverflow()
-    })
+    scheduleOverflowCheck()
   })
 
+  watch(editor, scheduleOverflowCheck, { flush: 'post' })
+
   watch(
     () => props.mode,
     (newMode) => {
diff --git a/packages/components/src/sender/composables/useSenderCore.ts b/packages/components/src/sender/composables/useSenderCore.ts
index 6827c3708f..7b7eefd575 100644
--- a/packages/components/src/sender/composables/useSenderCore.ts
+++ b/packages/components/src/sender/composables/useSenderCore.ts
@@ -238,9 +238,7 @@ export function useSenderCore(props: SenderPropsWithDefaults, emit: SenderEmits)
   watch(
     () => editor.value?.state.doc.content,
     () => {
-      setTimeout(() => {
-        checkOverflow()
-      }, 0)
+      requestAnimationFrame(() => checkOverflow())
     },
     { deep: true },
   )
diff --git a/packages/components/src/sender/index.vue b/packages/components/src/sender/index.vue
index a18f4bc85d..d982aa1758 100644
--- a/packages/components/src/sender/index.vue
+++ b/packages/components/src/sender/index.vue
@@ -70,6 +70,9 @@ defineExpose(expose)
       <template v-if="$slots.footer" #footer>
         <slot name="footer" />
       </template>
+      <template v-if="$slots['actions-inline']" #actions-inline="slotProps">
+        <slot name="actions-inline" v-bind="slotProps" />
+      </template>
       <template v-if="$slots['footer-right']" #footer-right>
         <slot name="footer-right" />
       </template>
@@ -81,6 +84,8 @@ defineExpose(expose)
 .tr-sender {
   display: flex;
   flex-direction: column;
+  width: 100%;
+  min-width: 0;
   background-color: var(--tr-sender-bg-color);
   border-radius: var(--tr-sender-border-radius);
   box-shadow: var(--tr-sender-box-shadow);
diff --git a/packages/test/src/sender/helpers/index.ts b/packages/test/src/sender/helpers/index.ts
index 1afa74231e..c4b9b8bf3a 100644
--- a/packages/test/src/sender/helpers/index.ts
+++ b/packages/test/src/sender/helpers/index.ts
@@ -69,6 +69,10 @@ export function createSenderTestHelper(page: Page) {
       await page.locator(selectors.toggleExternalContentBtn).click()
     },
 
+    async toggleConstrainedWidth() {
+      await page.locator(selectors.toggleConstrainedWidthBtn).click()
+    },
+
     async toggleAttachmentsSource() {
       await page.locator(selectors.toggleAttachmentsSourceBtn).click()
     },
diff --git a/packages/test/src/sender/index.vue b/packages/test/src/sender/index.vue
index 0901611dca..1b98ff1799 100644
--- a/packages/test/src/sender/index.vue
+++ b/packages/test/src/sender/index.vue
@@ -27,6 +27,7 @@ const result = ref('')
 const submitDetail = ref('')
 
 const isMultipleMode = ref(false)
+const constrainedWidth = ref(false)
 const clearable = ref(false)
 const loading = ref(false)
 const disabled = ref(false)
@@ -323,6 +324,10 @@ onBeforeUnmount(() => {
             <label>hasExternalContent:</label>
             <tiny-switch data-testid="toggle-external-content-btn" v-model="hasExternalContent"></tiny-switch>
           </div>
+          <div class="control-item">
+            <label>constrainedWidth:</label>
+            <tiny-switch data-testid="toggle-constrained-width-btn" v-model="constrainedWidth"></tiny-switch>
+          </div>
           <div class="control-item">
             <label>attachmentsSource:</label>
             <tiny-switch data-testid="toggle-attachments-source-btn" v-model="attachmentsSourceMounted"></tiny-switch>
@@ -405,38 +410,48 @@ onBeforeUnmount(() => {
       </p>
     </div>
 
-    <Sender
-      :key="componentKey"
-      ref="senderRef"
-      v-model="content"
-      data-testid="test-sender"
-      :mode="mode"
-      :size="size"
-      :clearable="clearable"
-      :loading="loading"
-      :disabled="disabled"
-      :extensions="extensions"
-      :max-length="maxLength"
-      :show-word-limit="showWordLimit"
-      :placeholder="placeholder"
-      :submit-type="submitType"
-      :has-external-content="hasExternalContent"
-      @submit="handleSubmit"
-      @cancel="handleCancel"
-      @clear="handleClear"
-    >
-      <template v-if="attachmentsSourceMounted" #header>
-        <TrAttachments v-model:items="senderAttachmentItems" variant="card" />
-      </template>
-
-      <template #input-prefix>
-        <button data-testid="input-prefix-btn" type="button" @click="handleInputPrefixAction">需求</button>
-      </template>
-
-      <template #footer>
-        <button data-testid="custom-footer-btn" @click="handleCustomAction">自定义按钮</button>
-      </template>
-    </Sender>
+    <div :class="{ 'sender-width-constraint': constrainedWidth }">
+      <Sender
+        :key="componentKey"
+        ref="senderRef"
+        v-model="content"
+        data-testid="test-sender"
+        :mode="mode"
+        :size="size"
+        :clearable="clearable"
+        :loading="loading"
+        :disabled="disabled"
+        :extensions="extensions"
+        :max-length="maxLength"
+        :show-word-limit="showWordLimit"
+        :placeholder="placeholder"
+        :submit-type="submitType"
+        :has-external-content="hasExternalContent"
+        @submit="handleSubmit"
+        @cancel="handleCancel"
+        @clear="handleClear"
+      >
+        <template v-if="attachmentsSourceMounted" #header>
+          <TrAttachments v-model:items="senderAttachmentItems" variant="card" />
+        </template>
+
+        <template #input-prefix>
+          <button data-testid="input-prefix-btn" type="button" @click="handleInputPrefixAction">需求</button>
+        </template>
+
+        <template #footer>
+          <button data-testid="custom-footer-btn" @click="handleCustomAction">自定义按钮</button>
+        </template>
+
+        <template #actions-inline>
+          <button data-testid="actions-inline-btn" type="button">单行操作</button>
+        </template>
+
+        <template #footer-right>
+          <button data-testid="footer-right-btn" type="button">多行操作</button>
+        </template>
+      </Sender>
+    </div>
 
     <div id="template-select-teleport-target" data-testid="template-select-teleport-target"></div>
   </div>
@@ -490,4 +505,9 @@ onBeforeUnmount(() => {
 #template-select-teleport-target {
   position: relative;
 }
+
+.sender-width-constraint {
+  width: 320px;
+  max-width: 100%;
+}
 </style>
diff --git a/packages/test/src/sender/selectors.ts b/packages/test/src/sender/selectors.ts
index b7ebc5adbe..435830d399 100644
--- a/packages/test/src/sender/selectors.ts
+++ b/packages/test/src/sender/selectors.ts
@@ -10,6 +10,7 @@ export const SENDER_SELECTORS = {
   toggleWordLimitBtn: '[data-testid="toggle-word-limit-btn"]',
   toggleSizeBtn: '[data-testid="toggle-size-btn"]',
   toggleExternalContentBtn: '[data-testid="toggle-external-content-btn"]',
+  toggleConstrainedWidthBtn: '[data-testid="toggle-constrained-width-btn"]',
   toggleAttachmentsSourceBtn: '[data-testid="toggle-attachments-source-btn"]',
   clearAttachmentsSourceItemsBtn: '[data-testid="clear-attachments-source-items-btn"]',
   submitTypeSelect: '[data-testid="submit-type-select"]',
@@ -40,6 +41,8 @@ export const SENDER_SELECTORS = {
 
   footer: '.tr-sender-footer',
   customFooterBtn: '[data-testid="custom-footer-btn"]',
+  actionsInlineBtn: '[data-testid="actions-inline-btn"]',
+  footerRightBtn: '[data-testid="footer-right-btn"]',
   inputPrefix: '.tr-sender-input-prefix',
   inputPrefixBtn: '[data-testid="input-prefix-btn"]',
 
diff --git a/packages/test/src/sender/specs/basic.spec.ts b/packages/test/src/sender/specs/basic.spec.ts
index 50edb904e1..b1ef32ff4f 100644
--- a/packages/test/src/sender/specs/basic.spec.ts
+++ b/packages/test/src/sender/specs/basic.spec.ts
@@ -381,6 +381,24 @@ test.describe('Sender 组件测试', () => {
     await expect(helper.getSender()).toHaveClass(/tr-sender--multiple/)
   })
 
+  test('Slots: 单行操作切换多行后应显示在 footer-right', async () => {
+    await expect(page.locator(helper.selectors.actionsInlineBtn)).toBeVisible()
+    await expect(page.locator(`${helper.selectors.footer} ${helper.selectors.actionsInlineBtn}`)).toHaveCount(0)
+
+    await helper.toggleMode()
+
+    await expect(page.locator(`${helper.selectors.footer} ${helper.selectors.actionsInlineBtn}`)).toBeVisible()
+    await expect(page.locator(`${helper.selectors.footer} ${helper.selectors.footerRightBtn}`)).toBeVisible()
+    await expect(page.locator('.tr-sender-actions-inline')).toHaveCount(0)
+  })
+
+  test('交互: 受限父容器下中文内容溢出应自动切换到多行模式', async () => {
+    await helper.toggleConstrainedWidth()
+    await helper.typeContent('这是一段足够长的中文内容，用于验证单行输入超出父容器宽度后能够自动切换到多行模式。')
+
+    await expect(helper.getSender()).toHaveClass(/tr-sender--multiple/)
+  })
+
   test('边界: 快速连续输入和删除应该正常工作', async () => {
     await helper.typeContent('快速输入测试')
     await helper.expectEditorContent('快速输入测试')

From 0dd6589901fd8da18d4bf2b617397000b8b04338 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 27 Oct 2026 03:23:22 -0700
Subject: [PATCH 4/7] fix(sender): improve handling of composition events and
 keyboard shortcuts

---
 .../src/sender/composables/useEditor.ts       | 51 +++++++++++++++++++
 .../composables/useKeyboardShortcuts.ts       |  1 +
 .../src/sender/composables/useSenderCore.ts   |  5 ++
 .../extensions/template/block/extension.ts    | 19 ++++++-
 .../extensions/template/block/plugins.ts      |  5 ++
 .../extensions/template/select/plugins.ts     | 19 ++++++-
 6 files changed, 97 insertions(+), 3 deletions(-)

diff --git a/packages/components/src/sender/composables/useEditor.ts b/packages/components/src/sender/composables/useEditor.ts
index 50b3922ca3..e90bbcfdf7 100644
--- a/packages/components/src/sender/composables/useEditor.ts
+++ b/packages/components/src/sender/composables/useEditor.ts
@@ -11,6 +11,7 @@ import History from '@tiptap/extension-history'
 import Placeholder from '@tiptap/extension-placeholder'
 import CharacterCount from '@tiptap/extension-character-count'
 import type { AnyExtension } from '@tiptap/core'
+import type { EditorProps } from '@tiptap/pm/view'
 import type { SenderEmits, UseEditorReturn } from '../index.type'
 import type { SenderPropsWithDefaults } from '../index.vue'
 import { countGraphemes } from '../utils/countGraphemes'
@@ -27,6 +28,8 @@ import { countGraphemes } from '../utils/countGraphemes'
  */
 export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): UseEditorReturn {
   const editorRef = ref<HTMLElement | null>(null)
+  const isComposing = ref(false)
+  const hasPendingModelValue = ref(false)
 
   // 将 placeholder 转换为响应式引用
   const placeholderRef = toRef(props, 'placeholder')
@@ -67,6 +70,27 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
         class: 'tr-sender-editor',
         enterkeyhint: props.enterkeyhint,
       },
+      handleDOMEvents: {
+        compositionstart: () => {
+          isComposing.value = true
+          return false
+        },
+        compositionend: () => {
+          isComposing.value = false
+          if (hasPendingModelValue.value) {
+            nextTick(() => {
+              hasPendingModelValue.value = false
+              const currentEditor = editor.value
+              const externalValue = props.modelValue ?? ''
+              if (currentEditor && externalValue !== currentEditor.getText()) {
+                currentEditor.commands.setContent(externalValue, { emitUpdate: false })
+              }
+            })
+          }
+          return false
+        },
+        keydown: (_view, event) => event.isComposing || event.keyCode === 229,
+      },
       // 处理粘贴事件 - 只粘贴纯文本
       handlePaste(view, event) {
         const text = event.clipboardData?.getData('text/plain')
@@ -101,10 +125,37 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
     },
   })
 
+  watch(
+    editor,
+    (editorInstance, _previousEditor, onCleanup) => {
+      if (!editorInstance) return
+
+      const view = editorInstance.view
+      const originalSomeProp = view.someProp.bind(view)
+      // 组合期间的合成 Backspace 仍会进入快捷键链，空事务会破坏输入法维护的文本范围。
+      view.someProp = (<PropName extends keyof EditorProps, Result>(
+        propName: PropName,
+        callback?: (value: NonNullable<EditorProps[PropName]>) => Result,
+      ) => {
+        if (propName === 'handleKeyDown' && callback && view.composing) return undefined
+        return callback ? originalSomeProp(propName, callback) : originalSomeProp(propName)
+      }) as typeof view.someProp
+      onCleanup(() => {
+        view.someProp = originalSomeProp
+      })
+    },
+    { immediate: true },
+  )
+
   // 监听外部 modelValue 变化
   watch(
     () => props.modelValue,
     (newValue) => {
+      if (isComposing.value || editor.value?.view.composing) {
+        hasPendingModelValue.value = true
+        return
+      }
+
       if (editor.value && newValue !== editor.value.getText()) {
         editor.value.commands.setContent(newValue ?? '', { emitUpdate: false })
       }
diff --git a/packages/components/src/sender/composables/useKeyboardShortcuts.ts b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
index f26684df95..bae9fc9e2d 100644
--- a/packages/components/src/sender/composables/useKeyboardShortcuts.ts
+++ b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
@@ -59,6 +59,7 @@ export function useKeyboardShortcuts(params: UseKeyboardShortcutsParams): UseKey
    * - submitType 为 'shiftEnter' 时：Enter（不带修饰键）
    */
   const checkNewlineShortcut = (event: KeyboardEvent): boolean => {
+    if (event.isComposing || event.keyCode === 229) return false
     if (!isKey(event, 'ENTER')) return false
 
     switch (submitType.value) {
diff --git a/packages/components/src/sender/composables/useSenderCore.ts b/packages/components/src/sender/composables/useSenderCore.ts
index 7b7eefd575..1b8847e520 100644
--- a/packages/components/src/sender/composables/useSenderCore.ts
+++ b/packages/components/src/sender/composables/useSenderCore.ts
@@ -180,6 +180,11 @@ export function useSenderCore(props: SenderPropsWithDefaults, emit: SenderEmits)
           editorProps: {
             ...editorInstance.options.editorProps,
             handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
+              // 组合输入期间交给 ProseMirror/输入法处理，避免误触发提交或换行
+              if (view.composing || event.isComposing || event.keyCode === 229) {
+                return false
+              }
+
               // 0. 检查插件状态 - 如果建议面板激活或下拉菜单打开，不拦截键盘事件
               const mentionState = MentionPluginKey.getState(view.state)
               const suggestionState = SuggestionPluginKey.getState(view.state)
diff --git a/packages/components/src/sender/extensions/template/block/extension.ts b/packages/components/src/sender/extensions/template/block/extension.ts
index 01aa4232df..1789395e34 100644
--- a/packages/components/src/sender/extensions/template/block/extension.ts
+++ b/packages/components/src/sender/extensions/template/block/extension.ts
@@ -95,7 +95,24 @@ export const TemplateBlock = Node.create<TemplateOptions>({
   // 使用 Vue 组件渲染
   addNodeView() {
     // @ts-expect-error - Vue SFC type compatibility
-    return VueNodeViewRenderer(TemplateBlockView)
+    const renderNodeView = VueNodeViewRenderer(TemplateBlockView)
+    return (props) => {
+      const nodeView = renderNodeView(props)
+      const ignoreMutation = nodeView.ignoreMutation?.bind(nodeView)
+      nodeView.ignoreMutation = (mutation) => {
+        // 删空组合文本可能移除内容容器，必须让 ProseMirror 重新解析并重建。
+        if (
+          mutation.type === 'childList' &&
+          Array.from(mutation.removedNodes).some(
+            (node) => node instanceof HTMLElement && node.hasAttribute('data-node-view-content'),
+          )
+        ) {
+          return false
+        }
+        return ignoreMutation?.(mutation) ?? false
+      }
+      return nodeView
+    }
   },
 
   // 添加插件
diff --git a/packages/components/src/sender/extensions/template/block/plugins.ts b/packages/components/src/sender/extensions/template/block/plugins.ts
index c43c8a7a45..8bbfed9aec 100644
--- a/packages/components/src/sender/extensions/template/block/plugins.ts
+++ b/packages/components/src/sender/extensions/template/block/plugins.ts
@@ -101,6 +101,9 @@ export function ensureZeroWidthChars() {
   return new Plugin({
     key: new PluginKey(PLUGIN_KEY_NAMES.TEMPLATE_BLOCK_ZERO_WIDTH),
     appendTransaction(transactions: readonly Transaction[], _oldState: EditorState, newState: EditorState) {
+      // 组合期间修正文档会打断输入法维护的文本范围。
+      if (transactions.some((tr) => tr.getMeta('composition') !== undefined)) return null
+
       // 只在内容发生变化时修正
       const docChanged = transactions.some((tr) => tr.docChanged)
       if (!docChanged) return null
@@ -122,6 +125,8 @@ export function keyboardNavigationPlugin() {
         const { selection } = state
         const { $from } = selection
 
+        if (view.composing || event.isComposing) return false
+
         // 处理左箭头
         if (isKey(event, 'ARROW_LEFT')) {
           if ($from.nodeBefore && $from.nodeBefore.isText && $from.nodeBefore.text) {
diff --git a/packages/components/src/sender/extensions/template/select/plugins.ts b/packages/components/src/sender/extensions/template/select/plugins.ts
index d32f7c3830..036e8575f8 100644
--- a/packages/components/src/sender/extensions/template/select/plugins.ts
+++ b/packages/components/src/sender/extensions/template/select/plugins.ts
@@ -82,6 +82,9 @@ export function selectZeroWidthPlugin() {
     key: new PluginKey(PLUGIN_KEY_NAMES.TEMPLATE_SELECT_ZERO_WIDTH),
 
     appendTransaction(transactions: readonly Transaction[], _oldState: EditorState, newState: EditorState) {
+      // 组合期间修正文档会打断输入法维护的文本范围。
+      if (transactions.some((tr) => tr.getMeta('composition') !== undefined)) return null
+
       // 只在内容发生变化时修正
       const docChanged = transactions.some((tr) => tr.docChanged)
       if (!docChanged) return null
@@ -121,6 +124,8 @@ export function selectKeyboardPlugin() {
 
     props: {
       handleKeyDown(view: EditorView, event: KeyboardEvent) {
+        if (view.composing || event.isComposing) return false
+
         const { state, dispatch } = view
         const { selection } = state
         const { $from } = selection
@@ -183,7 +188,12 @@ export function selectKeyboardPlugin() {
 
           // 场景4：光标在段落末尾（afterNode 为 null），前面是普通文本
           // 这种情况通常发生在删除了段落末尾的 templateSelect 之后
-          if (!afterNode && beforeNode?.isText && beforeNode.text !== ZERO_WIDTH_CHAR) {
+          if (
+            $from.parent.type.name === NODE_TYPE_NAMES.PARAGRAPH &&
+            !afterNode &&
+            beforeNode?.isText &&
+            beforeNode.text !== ZERO_WIDTH_CHAR
+          ) {
             dispatch(state.tr.delete($from.pos - 1, $from.pos))
             event.preventDefault()
             return true
@@ -238,7 +248,12 @@ export function selectKeyboardPlugin() {
 
           // 场景4：光标在段落开头（beforeNode 为 null），后面是普通文本
           // 这种情况通常发生在删除了段落开头的 templateSelect 之后
-          if (!beforeNode && afterNode?.isText && afterNode.text !== ZERO_WIDTH_CHAR) {
+          if (
+            $from.parent.type.name === NODE_TYPE_NAMES.PARAGRAPH &&
+            !beforeNode &&
+            afterNode?.isText &&
+            afterNode.text !== ZERO_WIDTH_CHAR
+          ) {
             dispatch(state.tr.delete($from.pos, $from.pos + 1))
             event.preventDefault()
             return true

From 1715abea77468318e8a5f1df4bf3a5765e08b350 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 27 Oct 2026 03:43:50 -0700
Subject: [PATCH 5/7] fix(sender): implement IME handling to improve keyboard
 event management

---
 .../src/sender/composables/useEditor.ts       | 26 +---------
 .../composables/useKeyboardShortcuts.ts       |  5 +-
 .../src/sender/composables/useSenderCore.ts   |  3 +-
 .../components/src/sender/extensions/ime.ts   | 49 +++++++++++++++++++
 .../extensions/template/block/plugins.ts      |  5 +-
 .../extensions/template/select/plugins.ts     |  5 +-
 .../template/select/template-select-view.vue  |  2 +
 7 files changed, 64 insertions(+), 31 deletions(-)
 create mode 100644 packages/components/src/sender/extensions/ime.ts

diff --git a/packages/components/src/sender/composables/useEditor.ts b/packages/components/src/sender/composables/useEditor.ts
index e90bbcfdf7..1727c3c37e 100644
--- a/packages/components/src/sender/composables/useEditor.ts
+++ b/packages/components/src/sender/composables/useEditor.ts
@@ -11,10 +11,10 @@ import History from '@tiptap/extension-history'
 import Placeholder from '@tiptap/extension-placeholder'
 import CharacterCount from '@tiptap/extension-character-count'
 import type { AnyExtension } from '@tiptap/core'
-import type { EditorProps } from '@tiptap/pm/view'
 import type { SenderEmits, UseEditorReturn } from '../index.type'
 import type { SenderPropsWithDefaults } from '../index.vue'
 import { countGraphemes } from '../utils/countGraphemes'
+import { ImeGuard } from '../extensions/ime'
 
 /**
  * 编辑器 Hook
@@ -45,6 +45,7 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
       Paragraph,
       Text,
       History, // 提供 undo/redo 功能
+      ImeGuard,
       Placeholder.configure({
         placeholder: () => placeholderRef.value || '请输入内容...',
       }),
@@ -89,7 +90,6 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
           }
           return false
         },
-        keydown: (_view, event) => event.isComposing || event.keyCode === 229,
       },
       // 处理粘贴事件 - 只粘贴纯文本
       handlePaste(view, event) {
@@ -125,28 +125,6 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
     },
   })
 
-  watch(
-    editor,
-    (editorInstance, _previousEditor, onCleanup) => {
-      if (!editorInstance) return
-
-      const view = editorInstance.view
-      const originalSomeProp = view.someProp.bind(view)
-      // 组合期间的合成 Backspace 仍会进入快捷键链，空事务会破坏输入法维护的文本范围。
-      view.someProp = (<PropName extends keyof EditorProps, Result>(
-        propName: PropName,
-        callback?: (value: NonNullable<EditorProps[PropName]>) => Result,
-      ) => {
-        if (propName === 'handleKeyDown' && callback && view.composing) return undefined
-        return callback ? originalSomeProp(propName, callback) : originalSomeProp(propName)
-      }) as typeof view.someProp
-      onCleanup(() => {
-        view.someProp = originalSomeProp
-      })
-    },
-    { immediate: true },
-  )
-
   // 监听外部 modelValue 变化
   watch(
     () => props.modelValue,
diff --git a/packages/components/src/sender/composables/useKeyboardShortcuts.ts b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
index bae9fc9e2d..7679374af8 100644
--- a/packages/components/src/sender/composables/useKeyboardShortcuts.ts
+++ b/packages/components/src/sender/composables/useKeyboardShortcuts.ts
@@ -7,6 +7,7 @@
  */
 
 import { isKey } from '../extensions/utils'
+import { isImeKeyEvent } from '../extensions/ime'
 import type { UseKeyboardShortcutsParams, UseKeyboardShortcutsReturn } from '../index.type'
 
 /**
@@ -29,7 +30,7 @@ export function useKeyboardShortcuts(params: UseKeyboardShortcutsParams): UseKey
    * - 当 submitType 为 'shiftEnter' 时：按 Shift+Enter 提交，单独按 Enter 换行
    */
   const checkSubmitShortcut = (event: KeyboardEvent): boolean => {
-    if (event.isComposing || event.keyCode === 229) return false
+    if (isImeKeyEvent(event)) return false
     if (!isKey(event, 'ENTER')) return false
 
     switch (submitType.value) {
@@ -59,7 +60,7 @@ export function useKeyboardShortcuts(params: UseKeyboardShortcutsParams): UseKey
    * - submitType 为 'shiftEnter' 时：Enter（不带修饰键）
    */
   const checkNewlineShortcut = (event: KeyboardEvent): boolean => {
-    if (event.isComposing || event.keyCode === 229) return false
+    if (isImeKeyEvent(event)) return false
     if (!isKey(event, 'ENTER')) return false
 
     switch (submitType.value) {
diff --git a/packages/components/src/sender/composables/useSenderCore.ts b/packages/components/src/sender/composables/useSenderCore.ts
index 1b8847e520..73fdfd322e 100644
--- a/packages/components/src/sender/composables/useSenderCore.ts
+++ b/packages/components/src/sender/composables/useSenderCore.ts
@@ -22,6 +22,7 @@ import {
   getTextWithMentions,
 } from '../extensions'
 import { EXTENSION_NAMES } from '../extensions/constants'
+import { isImeKeyEvent } from '../extensions/ime'
 import { SENDER_CONTEXT_KEY, type SenderContext } from '../types/context'
 import { setupSenderContentRegistration } from '../../shared/composables'
 import { useEditor } from './useEditor'
@@ -181,7 +182,7 @@ export function useSenderCore(props: SenderPropsWithDefaults, emit: SenderEmits)
             ...editorInstance.options.editorProps,
             handleKeyDown: (view: EditorView, event: KeyboardEvent) => {
               // 组合输入期间交给 ProseMirror/输入法处理，避免误触发提交或换行
-              if (view.composing || event.isComposing || event.keyCode === 229) {
+              if (isImeKeyEvent(event, view)) {
                 return false
               }
 
diff --git a/packages/components/src/sender/extensions/ime.ts b/packages/components/src/sender/extensions/ime.ts
new file mode 100644
index 0000000000..632e444f02
--- /dev/null
+++ b/packages/components/src/sender/extensions/ime.ts
@@ -0,0 +1,49 @@
+import { Extension } from '@tiptap/core'
+import { Plugin, PluginKey } from '@tiptap/pm/state'
+import type { Transaction } from '@tiptap/pm/state'
+import type { EditorProps, EditorView } from '@tiptap/pm/view'
+
+export function isImeKeyEvent(event: KeyboardEvent, view?: EditorView): boolean {
+  return Boolean(view?.composing || event.isComposing || event.keyCode === 229)
+}
+
+export function hasCompositionTransaction(transactions: readonly Transaction[]): boolean {
+  return transactions.some((tr) => tr.getMeta('composition') !== undefined)
+}
+
+export const ImeGuard = Extension.create({
+  name: 'senderImeGuard',
+  priority: 1000,
+
+  addProseMirrorPlugins() {
+    return [
+      new Plugin({
+        key: new PluginKey('senderImeGuard'),
+        props: {
+          handleDOMEvents: {
+            // 只跳过编辑器快捷键，保留输入法的原生按键行为。
+            keydown: (view, event) => isImeKeyEvent(event, view),
+          },
+        },
+        view(view) {
+          const originalSomeProp = view.someProp
+          const someProp = originalSomeProp.bind(view)
+          // 组合期间的合成 Backspace 仍会进入快捷键链，空事务会破坏输入法维护的文本范围。
+          view.someProp = (<PropName extends keyof EditorProps, Result>(
+            propName: PropName,
+            callback?: (value: NonNullable<EditorProps[PropName]>) => Result,
+          ) => {
+            if (propName === 'handleKeyDown' && callback && view.composing) return undefined
+            return callback ? someProp(propName, callback) : someProp(propName)
+          }) as typeof view.someProp
+
+          return {
+            destroy() {
+              view.someProp = originalSomeProp
+            },
+          }
+        },
+      }),
+    ]
+  },
+})
diff --git a/packages/components/src/sender/extensions/template/block/plugins.ts b/packages/components/src/sender/extensions/template/block/plugins.ts
index 8bbfed9aec..2e8b9397f3 100644
--- a/packages/components/src/sender/extensions/template/block/plugins.ts
+++ b/packages/components/src/sender/extensions/template/block/plugins.ts
@@ -10,6 +10,7 @@ import type { Node as PMNode } from '@tiptap/pm/model'
 import { ZERO_WIDTH_CHAR } from '../utils'
 import { NODE_TYPE_NAMES, PLUGIN_KEY_NAMES } from '../../constants'
 import { isKey, isAnyKey } from '../../utils'
+import { hasCompositionTransaction, isImeKeyEvent } from '../../ime'
 
 /**
  * 处理零宽字符逻辑
@@ -102,7 +103,7 @@ export function ensureZeroWidthChars() {
     key: new PluginKey(PLUGIN_KEY_NAMES.TEMPLATE_BLOCK_ZERO_WIDTH),
     appendTransaction(transactions: readonly Transaction[], _oldState: EditorState, newState: EditorState) {
       // 组合期间修正文档会打断输入法维护的文本范围。
-      if (transactions.some((tr) => tr.getMeta('composition') !== undefined)) return null
+      if (hasCompositionTransaction(transactions)) return null
 
       // 只在内容发生变化时修正
       const docChanged = transactions.some((tr) => tr.docChanged)
@@ -125,7 +126,7 @@ export function keyboardNavigationPlugin() {
         const { selection } = state
         const { $from } = selection
 
-        if (view.composing || event.isComposing) return false
+        if (isImeKeyEvent(event, view)) return false
 
         // 处理左箭头
         if (isKey(event, 'ARROW_LEFT')) {
diff --git a/packages/components/src/sender/extensions/template/select/plugins.ts b/packages/components/src/sender/extensions/template/select/plugins.ts
index 036e8575f8..01a6e793d0 100644
--- a/packages/components/src/sender/extensions/template/select/plugins.ts
+++ b/packages/components/src/sender/extensions/template/select/plugins.ts
@@ -9,6 +9,7 @@ import type { Node as PMNode } from '@tiptap/pm/model'
 import { ZERO_WIDTH_CHAR } from '../utils'
 import { NODE_TYPE_NAMES, PLUGIN_KEY_NAMES } from '../../constants'
 import { isAnyKey, isKey } from '../../utils'
+import { hasCompositionTransaction, isImeKeyEvent } from '../../ime'
 
 /**
  * Template Select 下拉菜单状态
@@ -83,7 +84,7 @@ export function selectZeroWidthPlugin() {
 
     appendTransaction(transactions: readonly Transaction[], _oldState: EditorState, newState: EditorState) {
       // 组合期间修正文档会打断输入法维护的文本范围。
-      if (transactions.some((tr) => tr.getMeta('composition') !== undefined)) return null
+      if (hasCompositionTransaction(transactions)) return null
 
       // 只在内容发生变化时修正
       const docChanged = transactions.some((tr) => tr.docChanged)
@@ -124,7 +125,7 @@ export function selectKeyboardPlugin() {
 
     props: {
       handleKeyDown(view: EditorView, event: KeyboardEvent) {
-        if (view.composing || event.isComposing) return false
+        if (isImeKeyEvent(event, view)) return false
 
         const { state, dispatch } = view
         const { selection } = state
diff --git a/packages/components/src/sender/extensions/template/select/template-select-view.vue b/packages/components/src/sender/extensions/template/select/template-select-view.vue
index 1d8744d0a0..b9dc86f5a9 100644
--- a/packages/components/src/sender/extensions/template/select/template-select-view.vue
+++ b/packages/components/src/sender/extensions/template/select/template-select-view.vue
@@ -8,6 +8,7 @@ import { TemplateSelectDropdownPluginKey } from './plugins'
 import type { SelectOption, TemplateOptions } from '../types'
 import { closeAllDropdowns, setupClickOutside } from './dropdown-manager'
 import { useTeleportTarget } from '../../../../shared/composables'
+import { isImeKeyEvent } from '../../ime'
 
 interface NodeAttrs {
   id: string
@@ -161,6 +162,7 @@ const updatePosition = () => {
 
 const handleKeyDown = (event: KeyboardEvent) => {
   if (!showDropdown.value) return
+  if (isImeKeyEvent(event, props.editor.view)) return
 
   switch (event.key) {
     case 'ArrowUp':

From 907cf508477ea8c0b296dc34a952de20dcb0692d Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 27 Oct 2026 04:35:24 -0700
Subject: [PATCH 6/7] fix(sender): enhance actions-inline slot to support
 scoped props and improve placeholder handling

---
 docs/src/components/sender.md                 |   4 +-
 .../src/sender/composables/useModeSwitch.ts   |  27 +++--
 .../src/sender/composables/useSenderCore.ts   |   8 +-
 packages/components/src/sender/index.vue      |   4 +-
 packages/test/src/sender/index.vue            |  13 ++-
 packages/test/src/sender/specs/basic.spec.ts  | 102 +++++++++++++++++-
 6 files changed, 136 insertions(+), 22 deletions(-)

diff --git a/docs/src/components/sender.md b/docs/src/components/sender.md
index e0a36487e9..d3c1827513 100644
--- a/docs/src/components/sender.md
+++ b/docs/src/components/sender.md
@@ -250,7 +250,7 @@ Sender 提供了多个插槽位置，方便扩展功能：
 - **`footer-right`** - 底部右侧区域，可添加操作按钮
 
 :::info 当前插槽作用域
-当前版本只有 `content` 插槽提供 `editor`。`actions-inline`、`footer` 和 `footer-right` 只负责放置内容，不提供作用域参数；需要操作输入内容时，请通过 Sender 实例公开的方法接入。
+`content` 插槽提供 `editor`。`actions-inline` 在单行和多行模式下均提供 `SenderSlotScope`，包含 `editor`、`focus`、`blur`、`insert`、`append`、`replace`、`disabled`、`loading` 和 `hasContent`；其中 `insert(text)` 在当前光标位置插入文本并补一个空格，然后聚焦编辑器。`footer` 和 `footer-right` 不提供作用域参数，需要操作输入内容时，请通过 Sender 实例公开的方法接入。
 :::
 
 <demo vue="../../demos/sender/custom-slots.vue" title="自定义插槽" description="在插槽区域添加自定义按钮，如深度思考、网络搜索等功能。" />
@@ -492,7 +492,7 @@ Sender Actions 的基础图标按钮，也可以独立用于自定义操作区
 | `prefix`         | 在编辑器左侧添加内容                 | —                     |
 | input-prefix | 多行模式首行前置插槽 | - |
 | `content`        | 完全替换默认编辑器内容               | `{ editor: unknown }` |
-| `actions-inline` | 在单行模式的默认操作按钮前添加内容   | —                     |
+| `actions-inline` | 在默认操作按钮前添加内容，多行模式下移至底部右侧 | `SenderSlotScope`      |
 | `footer`         | 在多行模式底部左侧添加内容           | —                     |
 | `footer-right`   | 在多行模式底部默认操作按钮前添加内容 | —                     |
 
diff --git a/packages/components/src/sender/composables/useModeSwitch.ts b/packages/components/src/sender/composables/useModeSwitch.ts
index d877ca8d1e..7f15e62223 100644
--- a/packages/components/src/sender/composables/useModeSwitch.ts
+++ b/packages/components/src/sender/composables/useModeSwitch.ts
@@ -3,8 +3,8 @@
  * 支持单行/多行模式的自动和手动切换
  */
 
-import { ref, watch, nextTick, computed, type Ref } from 'vue'
-import { useResizeObserver } from '@vueuse/core'
+import { ref, watch, nextTick, computed, onScopeDispose, type Ref } from 'vue'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import type { Editor } from '@tiptap/vue-3'
 import type { SenderProps, UseModeSwitchReturn, InputMode } from '../index.type'
 
@@ -17,6 +17,7 @@ export function useModeSwitch(
   const initialMode = ref<InputMode>(props.mode || 'single')
   const isAutoSwitching = ref(false)
   let overflowFrame = 0
+  let disposed = false
 
   // 获取容器元素
   const containerRef = computed(() => {
@@ -30,13 +31,15 @@ export function useModeSwitch(
   const checkOverflow = () => {
     if (initialMode.value !== 'single') return
     if (!editor.value || !editorRef.value) return
+    // 组合期间重建布局会使浏览器丢失输入法维护的文本范围。
+    if (editor.value.view.composing) return
 
     const editorElement = editorRef.value.querySelector('.ProseMirror') as HTMLElement
     if (!editorElement) return
 
-    const text = editor.value.getText()
-
     if (currentMode.value === 'single') {
+      // 空段落的 scrollWidth 包含占位文本，不能据此切换布局。
+      if (editor.value.isEmpty) return
       // 测量实际段落，避免父级 overflow:hidden 和省略号影响 scrollWidth。
       const contentElement = editorElement.querySelector('p') as HTMLElement | null
       const contentWidth = contentElement?.scrollWidth ?? editorElement.scrollWidth
@@ -47,7 +50,7 @@ export function useModeSwitch(
       }
     } else {
       // 多行模式：清空文本后切换回单行
-      if (!text.length) {
+      if (editor.value.isEmpty) {
         setMode('single')
       }
     }
@@ -64,7 +67,8 @@ export function useModeSwitch(
     currentMode.value = mode
 
     nextTick(() => {
-      if (editor.value) {
+      if (disposed) return
+      if (editor.value && !editor.value.isDestroyed) {
         editor.value.commands.focus('end')
       }
       isAutoSwitching.value = false
@@ -73,10 +77,19 @@ export function useModeSwitch(
   }
 
   const scheduleOverflowCheck = () => {
+    if (disposed) return
     cancelAnimationFrame(overflowFrame)
     overflowFrame = requestAnimationFrame(() => checkOverflow())
   }
 
+  // 即使确认或取消组合输入没有改变文档，也要在原生事件和 DOM 更新后重新测量。
+  useEventListener(() => editor.value?.view.dom, 'compositionend', scheduleOverflowCheck)
+
+  onScopeDispose(() => {
+    disposed = true
+    cancelAnimationFrame(overflowFrame)
+  })
+
   useResizeObserver(containerRef, () => {
     scheduleOverflowCheck()
   })
@@ -97,6 +110,6 @@ export function useModeSwitch(
     currentMode,
     isAutoSwitching,
     setMode,
-    checkOverflow,
+    checkOverflow: scheduleOverflowCheck,
   }
 }
diff --git a/packages/components/src/sender/composables/useSenderCore.ts b/packages/components/src/sender/composables/useSenderCore.ts
index 73fdfd322e..3b9f7b8865 100644
--- a/packages/components/src/sender/composables/useSenderCore.ts
+++ b/packages/components/src/sender/composables/useSenderCore.ts
@@ -241,13 +241,7 @@ export function useSenderCore(props: SenderPropsWithDefaults, emit: SenderEmits)
   useAutoSize(currentMode, editorRef, props.autoSize)
 
   // 监听编辑器内容变化，检查是否需要切换模式
-  watch(
-    () => editor.value?.state.doc.content,
-    () => {
-      requestAnimationFrame(() => checkOverflow())
-    },
-    { deep: true },
-  )
+  watch(() => editor.value?.state.doc.content, checkOverflow, { deep: true })
 
   // ========================================
   // 8. 定义其他方法
diff --git a/packages/components/src/sender/index.vue b/packages/components/src/sender/index.vue
index d982aa1758..bbb9219f35 100644
--- a/packages/components/src/sender/index.vue
+++ b/packages/components/src/sender/index.vue
@@ -48,8 +48,8 @@ defineExpose(expose)
       <template v-if="$slots.content" #content="slotProps">
         <slot name="content" v-bind="slotProps" />
       </template>
-      <template v-if="$slots['actions-inline']" #actions-inline>
-        <slot name="actions-inline" />
+      <template v-if="$slots['actions-inline']" #actions-inline="slotProps">
+        <slot name="actions-inline" v-bind="slotProps" />
       </template>
     </SingleLineLayout>
 
diff --git a/packages/test/src/sender/index.vue b/packages/test/src/sender/index.vue
index 1b98ff1799..15cd1fc544 100644
--- a/packages/test/src/sender/index.vue
+++ b/packages/test/src/sender/index.vue
@@ -443,8 +443,17 @@ onBeforeUnmount(() => {
           <button data-testid="custom-footer-btn" @click="handleCustomAction">自定义按钮</button>
         </template>
 
-        <template #actions-inline>
-          <button data-testid="actions-inline-btn" type="button">单行操作</button>
+        <template #actions-inline="{ insert, disabled, loading, hasContent }">
+          <button
+            data-testid="actions-inline-btn"
+            type="button"
+            :disabled="disabled || loading"
+            :data-has-content="hasContent"
+            @mousedown.prevent
+            @click="insert('插入')"
+          >
+            单行操作
+          </button>
         </template>
 
         <template #footer-right>
diff --git a/packages/test/src/sender/specs/basic.spec.ts b/packages/test/src/sender/specs/basic.spec.ts
index b1ef32ff4f..024faa0746 100644
--- a/packages/test/src/sender/specs/basic.spec.ts
+++ b/packages/test/src/sender/specs/basic.spec.ts
@@ -147,8 +147,9 @@ test.describe('Sender 组件测试', () => {
     await helper.toggleMode()
     await helper.expectMode('multiple')
 
-    const placeholderText =
-      '请输入内容，支持较长的多行占位提示文本，用于验证占位层能够随着编辑器宽度自动换行并正确参与布局。'.repeat(2)
+    const placeholderText = '请输入内容 MixedPlaceholderWithoutSpaces0123456789，支持换行\n第二行占位提示文本。'.repeat(
+      4,
+    )
     await helper.setPlaceholder(placeholderText)
 
     const placeholder = page.locator('.tr-sender-placeholder')
@@ -399,6 +400,103 @@ test.describe('Sender 组件测试', () => {
     await expect(helper.getSender()).toHaveClass(/tr-sender--multiple/)
   })
 
+  test('交互: 长占位文本不应触发空输入框切换布局', async () => {
+    await helper.toggleConstrainedWidth()
+    await helper.setPlaceholder('很长的占位提示 MixedPlaceholderWithoutSpaces0123456789'.repeat(8))
+
+    const remainedSingle = await helper.getSender().evaluate(async (element) => {
+      let stable = true
+      const observer = new MutationObserver(() => {
+        stable &&= element.classList.contains('tr-sender--single')
+      })
+      observer.observe(element, { attributes: true, attributeFilter: ['class'] })
+      for (let frame = 0; frame < 10; frame += 1) {
+        await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+        stable &&= element.classList.contains('tr-sender--single')
+      }
+      observer.disconnect()
+      return stable
+    })
+    expect(remainedSingle).toBe(true)
+
+    await helper.typeContent('足够长的实际输入内容'.repeat(8))
+    await expect(helper.getSender()).toHaveClass(/tr-sender--multiple/)
+    await helper.clearContent()
+    await expect(helper.getSender()).toHaveClass(/tr-sender--single/)
+    await helper.expectEditorEmpty()
+  })
+
+  for (const [scenario, committedText, expectedMode] of [
+    ['短候选', '你好', 'single'],
+    ['长候选', '中文'.repeat(30), 'multiple'],
+    ['原样拼音', 'nihao'.repeat(12), 'multiple'],
+    ['取消', '', 'single'],
+  ] as const) {
+    test(`交互: 组合输入跨越溢出阈值后${scenario}`, async () => {
+      await helper.toggleConstrainedWidth()
+      await helper.getEditor().focus()
+      const cdp = await page.context().newCDPSession(page)
+      const preedit = 'nihao'.repeat(12)
+
+      try {
+        for (const text of [preedit, preedit + 'a', preedit.slice(0, -1), preedit]) {
+          await cdp.send('Input.imeSetComposition', { text, selectionStart: text.length, selectionEnd: text.length })
+          // 等待布局检测执行，才能捕获组合期间错误的重建。
+          await page.evaluate(async () => {
+            for (let frame = 0; frame < 3; frame += 1) {
+              await new Promise<void>((resolve) => requestAnimationFrame(() => resolve()))
+            }
+          })
+          await expect(helper.getSender()).toHaveClass(/tr-sender--single/)
+          await expect(helper.getEditor()).toHaveText(text)
+        }
+
+        if (committedText) {
+          await cdp.send('Input.insertText', { text: committedText })
+        } else {
+          await cdp.send('Input.imeSetComposition', { text: '', selectionStart: 0, selectionEnd: 0 })
+        }
+        await expect(helper.getEditor()).toHaveText(committedText)
+        await expect(helper.getSender()).toHaveClass(new RegExp(`tr-sender--${expectedMode}`))
+        await helper.getContent()
+        await helper.expectResultExact(`当前内容: ${committedText}`.trim())
+      } finally {
+        await cdp.detach()
+      }
+    })
+  }
+
+  test('Slots: 操作插槽应在两种模式和自动迁移后保持作用域能力', async () => {
+    const button = page.locator(helper.selectors.actionsInlineBtn)
+    for (const mode of ['single', 'multiple']) {
+      if (mode === 'multiple') await helper.toggleMode()
+      await helper.clearContent()
+      await expect(button).toHaveAttribute('data-has-content', 'false')
+      await helper.typeContent('ab')
+      await page.keyboard.press('ArrowLeft')
+      await button.click()
+      await expect(helper.getEditor()).toHaveText('a插入 b')
+      await expect(helper.getEditor()).toBeFocused()
+      await expect(button).toHaveAttribute('data-has-content', 'true')
+      await helper.toggleDisabled()
+      await expect(button).toBeDisabled()
+      await helper.toggleDisabled()
+      await helper.toggleLoading()
+      await expect(button).toBeDisabled()
+      await helper.toggleLoading()
+    }
+
+    await helper.toggleMode()
+    await helper.clearContent()
+    await helper.toggleConstrainedWidth()
+    await helper.typeContent('实际输入内容'.repeat(12))
+    await expect(page.locator(`${helper.selectors.footer} ${helper.selectors.actionsInlineBtn}`)).toBeVisible()
+    await helper.clearContent()
+    await expect(helper.getSender()).toHaveClass(/tr-sender--single/)
+    await button.click()
+    await expect(helper.getEditor()).toHaveText('插入 ')
+  })
+
   test('边界: 快速连续输入和删除应该正常工作', async () => {
     await helper.typeContent('快速输入测试')
     await helper.expectEditorContent('快速输入测试')

From 0d956a845a62b4a80ba27163385a44d052f3e606 Mon Sep 17 00:00:00 2001
From: SonyLeo <746591437@qq.com>
Date: Tue, 27 Oct 2026 20:53:30 -0700
Subject: [PATCH 7/7] fix(sender): improve model synchronization and enhance
 clear content functionality

---
 .../src/sender/composables/useEditor.ts       |  20 ++-
 packages/components/src/sender/index.type.ts  |   5 +-
 .../sender/SenderModelSync.fixture.vue        |  13 ++
 .../component/sender/SenderModelSync.spec.ts  | 115 ++++++++++++++++++
 packages/test/src/sender/helpers/index.ts     |   2 +-
 5 files changed, 147 insertions(+), 8 deletions(-)
 create mode 100644 packages/test/component/sender/SenderModelSync.fixture.vue
 create mode 100644 packages/test/component/sender/SenderModelSync.spec.ts

diff --git a/packages/components/src/sender/composables/useEditor.ts b/packages/components/src/sender/composables/useEditor.ts
index 1727c3c37e..676f351db7 100644
--- a/packages/components/src/sender/composables/useEditor.ts
+++ b/packages/components/src/sender/composables/useEditor.ts
@@ -30,6 +30,7 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
   const editorRef = ref<HTMLElement | null>(null)
   const isComposing = ref(false)
   const hasPendingModelValue = ref(false)
+  let pendingModelTimer: ReturnType<typeof setTimeout> | undefined
 
   // 将 placeholder 转换为响应式引用
   const placeholderRef = toRef(props, 'placeholder')
@@ -73,20 +74,28 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
       },
       handleDOMEvents: {
         compositionstart: () => {
+          clearTimeout(pendingModelTimer)
+          pendingModelTimer = undefined
           isComposing.value = true
           return false
         },
         compositionend: () => {
           isComposing.value = false
           if (hasPendingModelValue.value) {
-            nextTick(() => {
-              hasPendingModelValue.value = false
+            clearTimeout(pendingModelTimer)
+            // 等待 ProseMirror 同步最终输入及父组件回传模型。
+            pendingModelTimer = setTimeout(() => {
+              pendingModelTimer = undefined
               const currentEditor = editor.value
+              if (!currentEditor || currentEditor.isDestroyed) return
+              if (isComposing.value || currentEditor.view.composing) return
+
+              hasPendingModelValue.value = false
               const externalValue = props.modelValue ?? ''
-              if (currentEditor && externalValue !== currentEditor.getText()) {
+              if (externalValue !== currentEditor.getText()) {
                 currentEditor.commands.setContent(externalValue, { emitUpdate: false })
               }
-            })
+            }, 0)
           }
           return false
         },
@@ -129,7 +138,7 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
   watch(
     () => props.modelValue,
     (newValue) => {
-      if (isComposing.value || editor.value?.view.composing) {
+      if (isComposing.value || editor.value?.view.composing || pendingModelTimer !== undefined) {
         hasPendingModelValue.value = true
         return
       }
@@ -169,6 +178,7 @@ export function useEditor(props: SenderPropsWithDefaults, emit: SenderEmits): Us
 
   // 清理
   onBeforeUnmount(() => {
+    clearTimeout(pendingModelTimer)
     editor.value?.destroy()
   })
 
diff --git a/packages/components/src/sender/index.type.ts b/packages/components/src/sender/index.type.ts
index 1559401c20..d0927ebfc5 100644
--- a/packages/components/src/sender/index.type.ts
+++ b/packages/components/src/sender/index.type.ts
@@ -365,11 +365,12 @@ export interface SenderSlots {
   content?: (props: { editor: unknown }) => unknown
 
   /**
-   * 单行模式内联操作按钮插槽
+   * 操作按钮插槽：单行模式位于默认操作按钮前，多行模式位于底部右侧。
+   * 两种模式均提供 SenderSlotScope；示例中的 mode 可为 'single' 或 'multiple'。
    *
    * @example
    * ```vue
-   * <sender>
+   * <sender :mode="mode">
    *   <template #actions-inline="{ insert, focus, disabled }">
    *     <voice-input @result="insert" :disabled="disabled" />
    *     <file-upload @select="handleFiles" />
diff --git a/packages/test/component/sender/SenderModelSync.fixture.vue b/packages/test/component/sender/SenderModelSync.fixture.vue
new file mode 100644
index 0000000000..b35998554e
--- /dev/null
+++ b/packages/test/component/sender/SenderModelSync.fixture.vue
@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { TrSender as Sender } from '@opentiny/tiny-robot'
+
+const content = ref('nihao')
+</script>
+
+<template>
+  <div>
+    <Sender v-model="content" />
+    <input v-model="content" data-testid="model" />
+  </div>
+</template>
diff --git a/packages/test/component/sender/SenderModelSync.spec.ts b/packages/test/component/sender/SenderModelSync.spec.ts
new file mode 100644
index 0000000000..c571615dc8
--- /dev/null
+++ b/packages/test/component/sender/SenderModelSync.spec.ts
@@ -0,0 +1,115 @@
+import { expect, test } from '@playwright/experimental-ct-vue'
+import type { Locator } from '@playwright/test'
+import SenderModelSyncFixture from './SenderModelSync.fixture.vue'
+
+async function setModel(component: Locator, value: string) {
+  await component.getByTestId('model').evaluate((element, text) => {
+    const input = element as HTMLInputElement
+    input.value = text
+    input.dispatchEvent(new Event('input', { bubbles: true }))
+  }, value)
+}
+
+async function endComposition(editor: Locator, text?: string) {
+  await editor.evaluate((element, value) => {
+    if (value !== undefined) {
+      element.querySelector('p')!.firstChild!.nodeValue = value
+      const range = document.createRange()
+      range.selectNodeContents(element)
+      range.collapse(false)
+      const selection = window.getSelection()!
+      selection.removeAllRanges()
+      selection.addRange(range)
+    }
+    element.dispatchEvent(new CompositionEvent('compositionend', { bubbles: true, data: value ?? '' }))
+    if (value !== undefined) {
+      element.dispatchEvent(new InputEvent('input', { bubbles: true, inputType: 'insertText', data: value }))
+    }
+  }, text)
+}
+
+test.describe('Sender model synchronization after composition', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.clock.install({ time: new Date('2026-01-01T00:00:00Z') })
+    await page.clock.pauseAt(new Date('2026-01-01T00:01:00Z'))
+  })
+
+  test('preserves the final DOM input instead of restoring the stale model', async ({ mount, page }) => {
+    const component = await mount(SenderModelSyncFixture)
+    const editor = component.locator('.tiptap')
+
+    await editor.focus()
+    await editor.dispatchEvent('compositionstart')
+    await setModel(component, 'niha')
+    await endComposition(editor, '你好')
+    await page.clock.runFor(30)
+
+    await expect(editor).toHaveText('你好')
+    await expect(component.getByTestId('model')).toHaveValue('你好')
+  })
+
+  test('preserves external updates when composition produces no new input', async ({ mount, page }) => {
+    const component = await mount(SenderModelSyncFixture)
+    const editor = component.locator('.tiptap')
+
+    await editor.dispatchEvent('compositionstart')
+    await setModel(component, 'external')
+    await endComposition(editor)
+    await page.clock.runFor(30)
+
+    await expect(editor).toHaveText('external')
+  })
+
+  test('defers model changes during the pending synchronization and uses the latest value', async ({ mount, page }) => {
+    const component = await mount(SenderModelSyncFixture)
+    const editor = component.locator('.tiptap')
+
+    await editor.dispatchEvent('compositionstart')
+    await setModel(component, 'first')
+    await endComposition(editor)
+    await setModel(component, 'latest')
+    await expect(editor).toHaveText('nihao')
+    await page.clock.runFor(30)
+
+    await expect(editor).toHaveText('latest')
+  })
+
+  test('cancels the previous synchronization when a new composition starts', async ({ mount, page }) => {
+    const component = await mount(SenderModelSyncFixture)
+    const editor = component.locator('.tiptap')
+
+    await editor.dispatchEvent('compositionstart')
+    await setModel(component, 'external')
+    await endComposition(editor)
+    await editor.dispatchEvent('compositionstart')
+    await page.clock.runFor(30)
+    await expect(editor).toHaveText('nihao')
+    await endComposition(editor)
+    await page.clock.runFor(30)
+
+    await expect(editor).toHaveText('external')
+  })
+
+  test('cancels pending synchronization on unmount', async ({ mount, page }) => {
+    const errors: string[] = []
+    page.on('pageerror', (error) => errors.push(error.message))
+    const component = await mount(SenderModelSyncFixture)
+    const editor = component.locator('.tiptap')
+
+    await editor.dispatchEvent('compositionstart')
+    await setModel(component, 'external')
+    await endComposition(editor)
+    await component.unmount()
+    await page.clock.runFor(30)
+
+    expect(errors).toEqual([])
+  })
+
+  test('applies ordinary external model updates without waiting for a timer', async ({ mount }) => {
+    const component = await mount(SenderModelSyncFixture)
+
+    await setModel(component, 'external')
+
+    await expect(component.locator('.tiptap')).toHaveText('external')
+  })
+})
diff --git a/packages/test/src/sender/helpers/index.ts b/packages/test/src/sender/helpers/index.ts
index c4b9b8bf3a..c4265e3b1c 100644
--- a/packages/test/src/sender/helpers/index.ts
+++ b/packages/test/src/sender/helpers/index.ts
@@ -26,7 +26,7 @@ export function createSenderTestHelper(page: Page) {
 
     async clearContent() {
       await this.getEditor().click()
-      await page.keyboard.press('Control+A')
+      await page.keyboard.press('ControlOrMeta+A')
       await page.keyboard.press('Delete')
       await page.waitForTimeout(50)
     },