feat(editor): 重构引用功能并优化图片上传处理

- 移除旧的Quote节点扩展，改为使用quoteData状态管理引用消息
- 添加图片上传状态跟踪和加载指示器
- 优化提及列表的交互和关闭行为
- 支持粘贴图片自动上传功能
- 完善编辑器草稿保存机制，包含引用数据

src/components/editor/TiptapEditor.vue

@@ -12,7 +12,7 @@ import { Plugin, PluginKey } from '@tiptap/pm/state'
 // 引入Vue核心功能
 import { reactive, watch, ref, markRaw, computed, onMounted, onUnmounted, shallowRef } from 'vue'
 // 引入Naive UI的弹出框组件
-import { NPopover } from 'naive-ui'
+import { NPopover, NIcon } from 'naive-ui'
 // 引入图标组件
 import {
   Voice as IconVoice,    // 语音图标
@@ -22,7 +22,8 @@ import {
   Pic,                   // 图片图标
   FolderUpload,          // 文件上传图标
   Ranking,               // 排名图标（用于投票）
-  History                // 历史记录图标
+  History,               // 历史记录图标
+  Close                  // 关闭图标
 } from '@icon-park/vue-next'
 
 // 引入状态管理
@@ -70,6 +71,7 @@ const isShowEditorVote = ref(false)
 const isShowEditorCode = ref(false)
 // 控制是否显示录音界面
 const isShowEditorRecorder = ref(false)
+const uploadingImages = ref(new Map())
 // 图片文件上传DOM引用
 const fileImageRef = ref()
 // 文件上传DOM引用
@@ -78,6 +80,8 @@ const uploadFileRef = ref()
 const emoticonRef = ref()
 // 表情面板显示状态
 const showEmoticon = ref(false)
+// 引用消息数据
+const quoteData = ref(null)
 
 // 自定义Emoji扩展
 const Emoji = Node.create({
@@ -120,76 +124,7 @@ const Emoji = Node.create({
   },
 })
 
-// 自定义Quote扩展
-const Quote = Node.create({
-  name: 'quote',
-  group: 'block',
-  atom: true,
-  draggable: true,
 
-  addAttributes() {
-    return {
-      id: { default: null },
-      title: { default: null },
-      describe: { default: null },
-      image: { default: '' }
-    }
-  },
-
-  parseHTML() {
-    return [{ tag: 'div.quote-card' }]
-  },
-
-  renderHTML({ HTMLAttributes }) {
-    const { id, title, describe, image } = HTMLAttributes
-
-    const titleEl = ['span', { class: 'quote-card-title' }, title || '']
-    let contentChildren = [titleEl]
-
-    if (image && image.length > 0) {
-      contentChildren.push(['img', { src: image, style: 'width:30px;height:30px;margin-right:10px;' }])
-    } else if (describe) {
-      contentChildren.push(['span', { class: 'quote-card-meta' }, describe])
-    }
-
-    const cardContent = ['span', { class: 'quote-card-content' }, ...contentChildren]
-
-    return [
-      'div',
-      {
-        class: 'quote-card',
-        'data-id': id,
-        'data-title': title,
-        'data-describe': describe,
-        'data-image': image || '',
-        contenteditable: 'false'
-      },
-      cardContent
-    ]
-  },
-
-  addKeyboardShortcuts() {
-    return {
-      Backspace: () => {
-        const { selection } = this.editor.state
-        const { $from, empty } = selection
-
-        if (!empty) {
-          return false
-        }
-
-        if ($from.parent.isTextblock && $from.parentOffset === 0) {
-          const nodeBefore = $from.nodeBefore
-          if (nodeBefore && nodeBefore.type.name === this.name) {
-            return this.editor.commands.deleteNode(this.name)
-          }
-        }
-
-        return false
-      }
-    }
-  }
-})
 
 // 创建自定义键盘处理插件，处理Enter键发送消息
 const EnterKeyPlugin = new Plugin({
@@ -222,7 +157,43 @@ const CustomKeyboard = Extension.create({
 const editor = useEditor({
   extensions: [
     StarterKit,
-    Image.configure({
+    Image.extend({
+      addNodeView() {
+        return ({ node, getPos, editor }) => {
+          const container = document.createElement('span')
+          container.style.position = 'relative'
+          container.style.display = 'inline-block'
+
+          const img = document.createElement('img')
+          img.setAttribute('src', node.attrs.src)
+          img.style.maxWidth = '100px'
+          img.style.borderRadius = '3px'
+          img.style.backgroundColor = '#48484d'
+          img.style.margin = '0px 2px'
+
+          container.appendChild(img)
+
+          if (uploadingImages.value.has(node.attrs.src)) {
+            container.classList.add('image-upload-loading')
+          }
+
+          const stopWatch = watch(uploadingImages, () => {
+            if (uploadingImages.value.has(node.attrs.src)) {
+              container.classList.add('image-upload-loading')
+            } else {
+              container.classList.remove('image-upload-loading')
+            }
+          }, { deep: true })
+
+          return {
+            dom: container,
+            destroy() {
+              stopWatch()
+            }
+          }
+        }
+      }
+    }).configure({
       inline: true,
       allowBase64: true,
     }),
@@ -234,6 +205,10 @@ const editor = useEditor({
         class: 'mention',
       },
       suggestion: {
+        allowedPrefixes: null,
+        hideOnClickOutside: true,
+        hideOnKeyDown: true,
+        emptyQueryClass: 'is-empty-query',
         items: ({ query }) => {
           if (!props.members.length) {
             return []
@@ -245,13 +220,21 @@ const editor = useEditor({
             list.unshift({ id: 0, nickname: '所有人', avatar: defAvatar, value: '所有人' })
           }
           
-          return list.filter(
+          const filteredItems = list.filter(
             (item) => item.nickname.toLowerCase().includes(query.toLowerCase())
           )
+          
+          // 如果没有匹配项，返回空数组以关闭弹窗
+          if (filteredItems.length === 0) {
+            return []
+          }
+          
+          return filteredItems
         },
         render: () => {
           let component
           let popup
+          let handleClickOutside
           
           return {
             onStart: (props) => {
@@ -260,6 +243,18 @@ const editor = useEditor({
               popup.classList.add('ql-mention-list-container', 'me-scrollbar', 'me-scrollbar-thumb')
               document.body.appendChild(popup)
               
+              // 添加全局点击事件监听器，点击弹窗外部时关闭弹窗
+              handleClickOutside = (event) => {
+                if (popup && !popup.contains(event.target)) {
+                  popup.remove()
+                  document.removeEventListener('click', handleClickOutside)
+                }
+              }
+              // 使用setTimeout确保事件不会立即触发
+              setTimeout(() => {
+                document.addEventListener('click', handleClickOutside)
+              }, 100)
+              
               // 渲染提及列表
               props.items.forEach((item, index) => {
                 const mentionItem = document.createElement('div')
@@ -297,18 +292,28 @@ const editor = useEditor({
             
             onKeyDown: (props) => {
               // 处理键盘事件
+              // Escape键关闭弹窗
               if (props.event.key === 'Escape') {
                 popup.remove()
                 return true
               }
               
+              // 空格键、回车键或其他非导航键也关闭弹窗
+              const navigationKeys = ['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight', 'Tab']
+              if (!navigationKeys.includes(props.event.key) && props.items.length === 0) {
+                popup.remove()
+                return false
+              }
+              
               return false
             },
             
             onExit: () => {
-              // 清理
+              // 清理弹窗和事件监听器
               if (popup) {
                 popup.remove()
+                // 移除所有可能的点击事件监听器
+                document.removeEventListener('click', handleClickOutside)
               }
             },
           }
@@ -317,7 +322,6 @@ const editor = useEditor({
     }),
     Link,
     Emoji,
-    Quote,
     CustomKeyboard,
   ],
   content: '',
@@ -327,6 +331,57 @@ const editor = useEditor({
   onUpdate: () => {
     onEditorChange()
   },
+  editorProps: {
+    handlePaste: (view, event) => {
+      const items = (event.clipboardData || event.originalEvent.clipboardData).items
+      for (const item of items) {
+        if (item.type.indexOf('image') === 0) {
+          event.preventDefault()
+          const file = item.getAsFile()
+          if (!file) continue
+
+          const tempUrl = URL.createObjectURL(file)
+          const { state, dispatch } = view
+          const { tr } = state
+          const node = state.schema.nodes.image.create({ src: tempUrl })
+          dispatch(tr.replaceSelectionWith(node))
+
+          const form = new FormData()
+          form.append('file', file)
+          form.append('source', 'fonchain-chat')
+
+          uploadingImages.value.set(tempUrl, true)
+
+          uploadImg(form)
+            .then(({ code, data, message }) => {
+              if (code === 0 && data.ori_url) {
+                const pos = findImagePos(tempUrl)
+                if (pos !== -1) {
+                  const { tr } = view.state
+                  view.dispatch(
+                    tr.setNodeMarkup(pos, null, { src: data.ori_url })
+                  )
+                }
+              } else {
+                window['$message'].error(message || '图片上传失败')
+                removeImage(tempUrl)
+              }
+            })
+            .catch(() => {
+              window['$message'].error('图片上传失败')
+              removeImage(tempUrl)
+            })
+            .finally(() => {
+              uploadingImages.value.delete(tempUrl)
+              URL.revokeObjectURL(tempUrl)
+            })
+
+          return true
+        }
+      }
+      return false
+    }
+  }
 })
 
 /**
@@ -334,6 +389,28 @@ const editor = useEditor({
  * @param file 文件对象
  * @returns Promise，成功时返回图片URL
  */
+function findImagePos(url) {
+  if (!editor.value) return -1
+  let pos = -1
+  editor.value.state.doc.descendants((node, p) => {
+    if (node.type.name === 'image' && node.attrs.src === url) {
+      pos = p
+      return false
+    }
+    return true
+  })
+  return pos
+}
+
+function removeImage(url) {
+  if (!editor.value) return
+  const pos = findImagePos(url)
+  if (pos !== -1) {
+    const { tr } = editor.value.state
+    editor.value.view.dispatch(tr.delete(pos, pos + 1))
+  }
+}
+
 function onUploadImage(file) {
   return new Promise((resolve) => {
     let image = new Image()
@@ -461,7 +538,6 @@ function tiptapToMessage() {
 
   const json = editor.value.getJSON()
   const messages = []
-  let quoteId = null
   let currentTextBuffer = ''
   let currentMentions = []
   let currentMentionUids = new Set()
@@ -474,10 +550,6 @@ function tiptapToMessage() {
         mentions: [...currentMentions],
         mentionUids: Array.from(currentMentionUids)
       }
-      if (quoteId) {
-        data.quoteId = quoteId
-        quoteId = null
-      }
       messages.push({ type: 'text', data })
     }
     currentTextBuffer = ''
@@ -507,22 +579,12 @@ function tiptapToMessage() {
           ...getImageInfo(node.attrs.src),
           url: node.attrs.src
         }
-        if (quoteId) {
-          data.quoteId = quoteId
-          quoteId = null
-        }
         messages.push({ type: 'image', data })
       }
     })
   }
 
   if (json.content) {
-    const quoteIndex = json.content.findIndex(node => node.type === 'quote')
-    if (quoteIndex > -1) {
-      quoteId = json.content[quoteIndex].attrs.id
-      json.content.splice(quoteIndex, 1)
-    }
-
     json.content.forEach(node => {
       if (node.type === 'paragraph') {
         if (node.content) {
@@ -535,10 +597,6 @@ function tiptapToMessage() {
           ...getImageInfo(node.attrs.src),
           url: node.attrs.src
         }
-        if (quoteId) {
-          data.quoteId = quoteId
-          quoteId = null
-        }
         messages.push({ type: 'image', data })
       }
     })
@@ -585,11 +643,14 @@ function isEditorEmpty() {
  * 根据编辑器内容类型发送不同类型的消息
  */
 function onSendMessage() {
-  if (!editor.value || isEditorEmpty()) return
+  if (uploadingImages.value.size > 0) {
+    return window['$message'].info('正在上传图片，请稍后再发')
+  }
+  if (!editor.value || (isEditorEmpty() && !quoteData.value)) return
 
   const messages = tiptapToMessage()
 
-  if (messages.length === 0) {
+  if (messages.length === 0 && !quoteData.value) {
     return
   }
 
@@ -601,6 +662,13 @@ function onSendMessage() {
         canClear = false
         return
       }
+      
+      // 添加引用消息参数
+      if (quoteData.value) {
+        msg.data.quoteId = quoteData.value.id
+        msg.data.quote = { ...quoteData.value }
+      }
+      
       emit('editor-event', emitCall('text_event', msg.data))
     } else if (msg.type === 'image') {
        const data = {
@@ -609,12 +677,33 @@ function onSendMessage() {
         size: 10000,
         url: msg.data.url,
       }
+      
+      // 添加引用消息参数
+      if (quoteData.value) {
+        data.quoteId = quoteData.value.id
+        data.quote = { ...quoteData.value }
+      }
+      
       emit('editor-event', emitCall('image_event', data))
     }
   })
 
+  // 如果只有引用消息但没有内容，也发送一条空文本消息带引用
+  if (messages.length === 0 && quoteData.value) {
+    const emptyData = {
+      items: [{ type: 1, content: '' }],
+      mentions: [],
+      mentionUids: [],
+      quoteId: quoteData.value.id,
+      quote: { ...quoteData.value }
+    }
+    emit('editor-event', emitCall('text_event', emptyData))
+  }
+
   if (canClear) {
     editor.value?.commands.clearContent(true)
+    // 清空引用数据
+    quoteData.value = null
   }
 }
 
@@ -627,11 +716,12 @@ function onEditorChange() {
   
   const text = tiptapToString()
   
-  if (!isEditorEmpty()) {
+  if (!isEditorEmpty() || quoteData.value) {
     // 保存草稿到store
     editorDraftStore.items[indexName.value || ''] = JSON.stringify({
       text: text,
-      content: editor.value.getJSON()
+      content: editor.value.getJSON(),
+      quoteData: quoteData.value
     })
   } else {
     // 编辑器为空时删除对应草稿
@@ -649,6 +739,10 @@ function onEditorChange() {
 function loadEditorDraftText() {
   if (!editor.value) return
 
+  // 保存当前引用数据
+  const currentQuoteData = quoteData.value
+  quoteData.value = null
+
   // 从缓存中加载编辑器草稿
   let draft = editorDraftStore.items[indexName.value || '']
   if (draft) {
@@ -658,10 +752,20 @@ function loadEditorDraftText() {
     } else if (parsed.text) {
       editor.value.commands.setContent(parsed.text)
     }
+    
+    // 如果草稿中有引用数据，恢复它
+    if (parsed.quoteData) {
+      quoteData.value = parsed.quoteData
+    }
   } else {
     editor.value.commands.clearContent(true)  // 没有草稿则清空编辑器
   }
 
+  // 如果有当前引用数据，优先使用它
+  if (currentQuoteData) {
+    quoteData.value = currentQuoteData
+  }
+
   // 设置光标位置到末尾
   editor.value.commands.focus('end')
 }
@@ -690,26 +794,8 @@ function onSubscribeMention(data) {
 function onSubscribeQuote(data) {
   if (!editor.value) return
   
-  // 检查是否已有引用内容
+  // 保存引用数据
-  const json = editor.value.getJSON()
+  quoteData.value = data
-  if (json.content?.some(node => node.type === 'quote')) {
-    return // 已有引用则不再添加
-  }
-
-  // 在编辑器开头插入引用
-  editor.value
-    .chain()
-    .focus()
-    .insertContentAt(0, [
-      {
-        type: 'quote',
-        attrs: data
-      },
-      {
-        type: 'paragraph'
-      }
-    ])
-    .run()
 }
 
 /**
@@ -770,6 +856,8 @@ useEventBus([
   <!-- 编辑器容器 -->
   <section class="el-container editor">
     <section class="el-container is-vertical">
+    
+      
       <!-- 工具栏区域 -->
       <header class="el-header toolbar bdr-t">
         <div class="tools">
@@ -807,7 +895,21 @@ useEventBus([
           </div>
         </div>
       </header>
-
+  <!-- 引用消息块 -->
+      <div v-if="quoteData" class="quote-card-wrapper">
+        <div class="quote-card-content">
+          <div class="quote-card-title">
+            <span>{{ quoteData.title || ' ' }}</span>
+            <n-icon size="18" class="quote-card-remove" :component="Close" @click="quoteData = null" />
+          </div>
+          <div v-if="quoteData.image" class="quote-card-image">
+            <img :src="quoteData.image" alt="引用图片" />
+          </div>
+          <div v-if="quoteData.describe" class="quote-card-meta">
+            {{ quoteData.describe }}
+          </div>
+        </div>
+      </div>
       <!-- 编辑器主体区域 -->
       <main class="el-main height100">
         <editor-content :editor="editor" class="tiptap-editor" />
@@ -838,11 +940,65 @@ useEventBus([
 </template>
 
 <style lang="less" scoped>
+/* 编辑器容器样式 */
 .editor {
   --tip-bg-color: rgb(241 241 241 / 90%);  /* 提示背景颜色 */
-
   height: 100%;
   
+  /* 引用消息块样式 */
+  .quote-card-wrapper {
+    padding: 10px;
+    background-color: #fff;
+  }
+  
+  .quote-card-content {
+    display: flex;
+    background-color: #f6f6f6;
+    flex-direction: column;
+    padding: 8px;
+    border-radius: 4px;
+    cursor: pointer;
+    user-select: none;
+
+    .quote-card-title {
+      height: 22px;
+      line-height: 22px;
+      font-size: 12px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .quote-card-remove {
+        cursor: pointer;
+        &:hover {
+          color: #333;
+        }
+      }
+    }
+
+    .quote-card-image {
+      margin-top: 4px;
+      img {
+        max-width: 100px;
+        max-height: 60px;
+        border-radius: 4px;
+      }
+    }
+
+    .quote-card-meta {
+      margin-top: 4px;
+      font-size: 12px;
+      line-height: 20px;
+      color: #999;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+
   .toolbar {
     height: 38px;
     display: flex;
@@ -892,6 +1048,28 @@ useEventBus([
 html[theme-mode='dark'] {
   .editor {
     --tip-bg-color: #48484d;
+    
+    .quote-card-wrapper {
+      background-color: #1e1e1e;
+    }
+    
+    .quote-card-content {
+      background-color: #2c2c2c;
+      
+      .quote-card-title {
+        color: #e0e0e0;
+        
+        .quote-card-remove {
+          &:hover {
+            color: #fff;
+          }
+        }
+      }
+      
+      .quote-card-meta {
+        color: #999;
+      }
+    }
   }
 }
 </style>
@@ -904,6 +1082,25 @@ html[theme-mode='dark'] {
   padding: 8px;
   outline: none;
 
+  .image-upload-loading {
+    position: relative;
+    display: inline-block;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(0, 0, 0, 0.5) url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><circle cx="50" cy="50" r="32" stroke-width="8" stroke="%23fff" stroke-dasharray="50.26548245743669 50.26548245743669" fill="none" stroke-linecap="round"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"/></svg>');
+      background-size: 30px 30px;
+      background-position: center center;
+      background-repeat: no-repeat;
+      border-radius: 5px;
+    }
+  }
+  
   /* 滚动条样式 */
   &::-webkit-scrollbar {
     width: 3px;
@@ -959,45 +1156,10 @@ html[theme-mode='dark'] {
   }
   
   /* 引用卡片样式 */
-  .quote-card-wrapper {
+  .quote-card {
     margin-bottom: 8px;
   }
 
-  .quote-card-content {
-    display: flex;
-    background-color: #f6f6f6;
-    flex-direction: column;
-    padding: 8px;
-    margin-bottom: 5px;
-    cursor: pointer;
-    user-select: none;
-
-    .quote-card-title {
-      height: 22px;
-      line-height: 22px;
-      font-size: 12px;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: flex;
-      justify-content: space-between;
-
-      .quote-card-remove {
-        margin-right: 15px;
-        font-size: 18px;
-      }
-    }
-
-    .quote-card-meta {
-      margin-top: 4px;
-      font-size: 12px;
-      line-height: 20px;
-      color: #999;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-    }
-  }
 }
 
 /* 提及列表样式 */