fix(ui): 修复中文输入法回车误发送消息问题

添加 IME composition 状态检测,在输入法组合期间阻止回车发送消息
This commit is contained in:
2025-12-18 00:54:38 +08:00
parent a6e7573504
commit 93fe7ebcf8
+14 -1
View File
@@ -69,6 +69,7 @@ export function ChatInput({
const [selectedCommandIndex, setSelectedCommandIndex] = useState(0); const [selectedCommandIndex, setSelectedCommandIndex] = useState(0);
const [showSystemCommandMenu, setShowSystemCommandMenu] = useState(false); const [showSystemCommandMenu, setShowSystemCommandMenu] = useState(false);
const [selectedSystemCommandIndex, setSelectedSystemCommandIndex] = useState(0); const [selectedSystemCommandIndex, setSelectedSystemCommandIndex] = useState(0);
const [isComposing, setIsComposing] = useState(false); // IME 输入法组合状态
const textareaRef = useRef<HTMLTextAreaElement>(null); const textareaRef = useRef<HTMLTextAreaElement>(null);
// 命令系统 // 命令系统
@@ -327,12 +328,22 @@ export function ChatInput({
} }
// Enter 发送,Shift+Enter 换行 // Enter 发送,Shift+Enter 换行
if (e.key === 'Enter' && !e.shiftKey) { // 注意:IME 组合期间不发送(中文输入法按回车确认拼音)
if (e.key === 'Enter' && !e.shiftKey && !isComposing) {
e.preventDefault(); e.preventDefault();
handleSubmit(); handleSubmit();
} }
}; };
// IME 输入法组合事件处理
const handleCompositionStart = () => {
setIsComposing(true);
};
const handleCompositionEnd = () => {
setIsComposing(false);
};
return ( return (
<div <div
className={clsx( className={clsx(
@@ -464,6 +475,8 @@ export function ChatInput({
value={input} value={input}
onChange={handleInputChange} onChange={handleInputChange}
onKeyDown={handleKeyDown} onKeyDown={handleKeyDown}
onCompositionStart={handleCompositionStart}
onCompositionEnd={handleCompositionEnd}
placeholder={ placeholder={
responsive responsive
? 'Ask anything...' ? 'Ask anything...'