hookehuyr

fix(MessageDetail): 修复消息列表滚动和输入框间距问题

调整滚动逻辑确保消息列表能正确滚动到底部
添加输入框光标间距避免键盘遮挡
关闭对话框时重置相关状态
1 +{"projectName":"trae_jgdl_l75p"}
...\ No newline at end of file ...\ No newline at end of file
...@@ -69,6 +69,7 @@ ...@@ -69,6 +69,7 @@
69 placeholder="请输入回复内容..." 69 placeholder="请输入回复内容..."
70 :rows="2" 70 :rows="2"
71 :max-length="500" 71 :max-length="500"
72 + :cursorSpacing="100"
72 class="message-input" 73 class="message-input"
73 @focus="handleInputFocus" 74 @focus="handleInputFocus"
74 /> 75 />
...@@ -249,10 +250,13 @@ const sendMessage = async () => { ...@@ -249,10 +250,13 @@ const sendMessage = async () => {
249 */ 250 */
250 const scrollToBottom = () => { 251 const scrollToBottom = () => {
251 if (messages.value.length > 0) { 252 if (messages.value.length > 0) {
252 - // 使用 setTimeout 确保 DOM 更新完成后再滚动 253 + // 先重置 scrollIntoView,然后设置新值确保滚动触发
253 - setTimeout(() => { 254 + scrollIntoView.value = ''
254 - scrollIntoView.value = `msg-${messages.value.length - 1}` 255 + nextTick(() => {
255 - }, 100) 256 + setTimeout(() => {
257 + scrollIntoView.value = `msg-${messages.value.length - 1}`
258 + }, 100)
259 + })
256 } 260 }
257 } 261 }
258 262
...@@ -271,6 +275,10 @@ const handleInputFocus = () => { ...@@ -271,6 +275,10 @@ const handleInputFocus = () => {
271 const handleClose = () => { 275 const handleClose = () => {
272 visible.value = false 276 visible.value = false
273 inputMessage.value = '' 277 inputMessage.value = ''
278 + // 重置滚动相关状态
279 + scrollTop.value = 0
280 + scrollIntoView.value = ''
281 + messages.value = []
274 emit('close') 282 emit('close')
275 } 283 }
276 284
......