fix(layout): 🐛 修复选择了图片不显示在输入框中的bug

src/components/rightBox/chatBox/ChatFooter.vue

@@ -95,7 +95,7 @@ import { useCommon } from '@/hooks/useCommon.ts'
 import { WebviewWindow } from '@tauri-apps/api/webviewWindow'
 import { emit } from '@tauri-apps/api/event'
 
-const { open, onChange } = useFileDialog()
+const { open, onChange, reset } = useFileDialog()
 const MsgInputRef = ref()
 const msgInputDom = ref()
 const emojiShow = ref()
@@ -111,7 +111,7 @@ const emojiHandle = (item: string) => {
   const { range } = getEditorRange()!
   range?.collapse(false)
   // 插入表情
-  insertNode(MsgEnum.TEXT, item)
+  insertNode(MsgEnum.TEXT, item, MsgInputRef.value.messageInputDom)
   triggerInputEvent(msgInputDom.value)
 }
 
@@ -145,6 +145,7 @@ onChange((files) => {
       FileOrVideoPaste(file, MsgEnum.FILE, MsgInputRef.value.messageInputDom)
     }
   }
+  reset()
 })
 
 onMounted(() => {

src/hooks/useCommon.ts

@@ -87,7 +87,7 @@ export const useCommon = () => {
    * @param { MsgEnum } type 插入的类型
    * @param dom dom节点
    */
-  const insertNode = (type: MsgEnum, dom: any) => {
+  const insertNode = (type: MsgEnum, dom: any, target: HTMLElement) => {
     const { selection, range } = getEditorRange()!
     // 删除选中的内容
     range?.deleteContents()
@@ -258,7 +258,7 @@ export const useCommon = () => {
       range?.insertNode(spaceNode)
       range?.collapse(false)
     } else {
-      range?.insertNode(dom)
+      target.appendChild(dom)
     }
     // 将光标移到选中范围的最后面
     selection?.collapseToEnd()
@@ -279,7 +279,7 @@ export const useCommon = () => {
       img.style.maxWidth = '140px'
       img.style.marginRight = '6px'
       // 插入图片
-      insertNode(MsgEnum.IMAGE, img)
+      insertNode(MsgEnum.IMAGE, img, dom)
       triggerInputEvent(dom)
     }
     nextTick(() => {}).then(() => {
@@ -298,7 +298,7 @@ export const useCommon = () => {
     // 使用函数
     createFileOrVideoDom(file).then((imgTag) => {
       // 将生成的img标签插入到页面中
-      insertNode(type, imgTag)
+      insertNode(type, imgTag, dom)
       triggerInputEvent(dom)
     })
     nextTick(() => {}).then(() => {
@@ -340,7 +340,7 @@ export const useCommon = () => {
     } else {
       // 如果没有文件，而是文本，处理纯文本粘贴
       const plainText = e.clipboardData.getData('text/plain')
-      insertNode(MsgEnum.TEXT, plainText)
+      insertNode(MsgEnum.TEXT, plainText, dom)
       triggerInputEvent(dom)
     }
   }

src/hooks/useMsgInput.ts

@@ -58,7 +58,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
           if (clipboardItem.types.includes('text/plain')) {
             // 如果是文本，使用 readText() 读取文本内容
             navigator.clipboard.readText().then((text) => {
-              insertNode(MsgEnum.TEXT, text)
+              insertNode(MsgEnum.TEXT, text, {} as HTMLElement)
               triggerInputEvent(messageInputDom.value)
             })
           } else if (clipboardItem.types.find((type) => type.startsWith('image/'))) {
@@ -122,7 +122,11 @@ export const useMsgInput = (messageInputDom: Ref) => {
       if (messageInputDom.value) {
         nextTick().then(() => {
           messageInputDom.value.focus()
-          insertNode(MsgEnum.REPLY, { accountName: accountName, content: event.message.body.content })
+          insertNode(
+            MsgEnum.REPLY,
+            { accountName: accountName, content: event.message.body.content },
+            {} as HTMLElement
+          )
           triggerInputEvent(messageInputDom.value)
         })
       }
@@ -277,7 +281,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
     if (!isWindows && chat.value.sendKey === 'Enter' && e.metaKey && e.key === 'Enter') {
       // 就进行换行操作
       e.preventDefault()
-      insertNode(MsgEnum.TEXT, '\n')
+      insertNode(MsgEnum.TEXT, '\n', {} as HTMLElement)
       triggerInputEvent(messageInputDom.value)
     }
     if (msgInput.value === '' || msgInput.value.trim() === '' || ait.value) {
@@ -313,7 +317,7 @@ export const useMsgInput = (messageInputDom: Ref) => {
     range?.setStart(textNode, <number>expRes?.index)
     /** 设置范围的结束位置为光标的位置 */
     range?.setEnd(textNode, endOffset!)
-    insertNode(MsgEnum.AIT, item.name)
+    insertNode(MsgEnum.AIT, item.name, {} as HTMLElement)
     triggerInputEvent(messageInputDom.value)
     ait.value = false
   }