From c89056d7f1f881a3ca610b53a13495d9ea182896 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Thu, 5 Jun 2025 16:21:39 +0800
Subject: [PATCH 1/9] edit

---
 src/components/editor/CustomEditor.vue        | 1670 +++++++++++++++++
 src/views/message/inner/panel/PanelFooter.vue |    4 +-
 vite.config.ts                                |    6 +-
 3 files changed, 1676 insertions(+), 4 deletions(-)
 create mode 100644 src/components/editor/CustomEditor.vue

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
new file mode 100644
index 0000000..27ddf87
--- /dev/null
+++ b/src/components/editor/CustomEditor.vue
@@ -0,0 +1,1670 @@
+<script setup>
+import { ref, reactive, computed, onMounted, onBeforeUnmount, nextTick, markRaw, watch } from 'vue'
+import { NPopover, NIcon } from 'naive-ui'
+import {
+  SmilingFace,
+  Pic,
+  FolderUpload
+} from '@icon-park/vue-next'
+import { bus } from '@/utils/event-bus'
+import { EditorConst } from '@/constant/event-bus'
+import { emitCall } from '@/utils/common'
+import { deltaToMessage, deltaToString, isEmptyDelta } from './util'
+import { useDialogueStore, useEditorDraftStore } from '@/store'
+import { uploadImg } from '@/api/upload'
+import { defAvatar } from '@/constant/default'
+import { getImageInfo } from '@/utils/functions'
+import MeEditorEmoticon from './MeEditorEmoticon.vue'
+
+const props = defineProps({
+  vote: {
+    type: Boolean,
+    default: false
+  },
+  members: {
+    type: Array,
+    default: () => []
+  }
+})
+
+const emit = defineEmits(['editor-event'])
+
+// 响应式数据
+const editorRef = ref(null)
+const content = ref('')
+const isFocused = ref(false)
+const showMention = ref(false)
+const mentionQuery = ref('')
+const mentionPosition = ref({ top: 0, left: 0 })
+const selectedMentionIndex = ref(0)
+const quoteData = ref(null)
+const editingMessage = ref(null)
+const isShowEmoticon = ref(false)
+
+const fileImageRef = ref(null)
+const uploadFileRef = ref(null)
+const emoticonRef = ref(null)
+
+// 获取状态管理
+const dialogueStore = useDialogueStore()
+const editorDraftStore = useEditorDraftStore()
+
+// 当前会话索引
+const indexName = computed(() => dialogueStore.index_name)
+
+// 工具栏配置
+const navs = reactive([
+  {
+    title: '图片',
+    icon: markRaw(Pic),
+    show: true,
+    click: () => {
+      fileImageRef.value.click()
+    }
+  },
+  {
+    title: '文件',
+    icon: markRaw(FolderUpload),
+    show: true,
+    click: () => {
+      uploadFileRef.value.click()
+    }
+  }
+])
+
+const mentionList = ref([])
+const currentMentionQuery = ref('')
+
+// 编辑器内容
+const editorContent = ref('')
+const editorHtml = ref('')
+
+// 工具栏配置
+const toolbarConfig = computed(() => {
+  const config = [
+    { type: 'emoticon', icon: 'icon-biaoqing', title: '表情' },
+    { type: 'image', icon: 'icon-image', title: '图片' },
+    { type: 'file', icon: 'icon-folder-plus', title: '文件' }
+  ]
+  
+  return config
+})
+
+// 处理输入事件
+const handleInput = (event) => {
+  const target = event.target
+  
+  // 获取编辑器内容，但不包括引用元素的内容
+  const editorClone = target.cloneNode(true)
+  const quoteElements = editorClone.querySelectorAll('.editor-quote')
+  quoteElements.forEach(quote => quote.remove())
+  
+  // 处理表情图片，将其 alt 属性（表情文本）添加到文本内容中
+  const emojiImages = editorClone.querySelectorAll('img.editor-emoji')
+  let textContent = editorClone.textContent || ''
+  
+  // 将表情图片的 alt 属性添加到文本内容中
+  emojiImages.forEach(emoji => {
+    const altText = emoji.getAttribute('alt')
+    if (altText) {
+      textContent += altText
+    }
+  })
+  
+  // 更新编辑器内容（包含表情文本）
+  editorContent.value = textContent
+  editorHtml.value = target.innerHTML || ''
+  
+  // 检查@mention
+  checkMention(target)
+  
+  // 保存草稿
+  saveDraft()
+  
+  // 发送输入事件
+  emit('editor-event', {
+    event: 'input_event',
+    data: editorContent.value
+  })
+}
+
+// 检查@mention
+const checkMention = (target) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const textBeforeCursor = range.startContainer.textContent?.substring(0, range.startOffset) || ''
+  const mentionMatch = textBeforeCursor.match(/@([^@\s]*)$/)
+  
+  if (mentionMatch) {
+    currentMentionQuery.value = mentionMatch[1]
+    showMentionList()
+    updateMentionPosition(range)
+  } else {
+    hideMentionList()
+  }
+}
+
+// 显示mention列表
+const showMentionList = () => {
+  const query = currentMentionQuery.value.toLowerCase()
+  mentionList.value = props.members.filter(member => 
+    member.nickname.toLowerCase().includes(query)
+  ).slice(0, 10)
+  
+  showMention.value = mentionList.value.length > 0
+  selectedMentionIndex.value = 0
+}
+
+// 隐藏mention列表
+const hideMentionList = () => {
+  showMention.value = false
+  mentionList.value = []
+  currentMentionQuery.value = ''
+}
+
+// 更新mention位置
+const updateMentionPosition = (range) => {
+  const rect = range.getBoundingClientRect()
+  const editorRect = editorRef.value.getBoundingClientRect()
+  
+  mentionPosition.value = {
+    top: rect.bottom - editorRect.top + 5,
+    left: rect.left - editorRect.left
+  }
+}
+
+// 插入mention
+const insertMention = (member) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const textNode = range.startContainer
+  const offset = range.startOffset
+  
+  // 找到@符号的位置
+  const textContent = textNode.textContent || ''
+  const atIndex = textContent.lastIndexOf('@', offset - 1)
+  
+  // 创建mention元素
+  const mentionSpan = document.createElement('span')
+  mentionSpan.className = 'mention'
+  mentionSpan.setAttribute('data-user-id', member.id || member.user_id)
+  mentionSpan.textContent = `@${member.value || member.nickname}`
+  mentionSpan.contentEditable = 'false'
+  
+  if (atIndex !== -1) {
+    // 如果找到@符号，替换文本
+    const beforeText = textContent.substring(0, atIndex)
+    const afterText = textContent.substring(offset)
+    
+    // 创建新的文本节点
+    const beforeNode = document.createTextNode(beforeText)
+    const afterNode = document.createTextNode(' ' + afterText)
+    
+    // 替换内容
+    const parent = textNode.parentNode
+    parent.insertBefore(beforeNode, textNode)
+    parent.insertBefore(mentionSpan, textNode)
+    parent.insertBefore(afterNode, textNode)
+    parent.removeChild(textNode)
+  } else {
+    // 如果没有找到@符号，直接在光标位置插入
+    range.deleteContents()
+    
+    // 插入@提及元素
+    range.insertNode(mentionSpan)
+    
+    // 在@提及元素后添加空格
+    const spaceNode = document.createTextNode(' ')
+    range.setStartAfter(mentionSpan)
+    range.insertNode(spaceNode)
+    
+    // 将光标移动到空格后
+    range.setStartAfter(spaceNode)
+    range.collapse(true)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+  
+  // 触发输入事件以更新编辑器内容
+  handleInput({ target: editorRef.value })
+  
+  // 隐藏mention列表
+  hideMentionList()
+}
+
+// 处理粘贴事件
+const handlePaste = (event) => {
+  event.preventDefault()
+  
+  // 获取粘贴的纯文本内容
+  const text = event.clipboardData?.getData('text/plain') || ''
+  
+  if (text) {
+    // 插入纯文本，移除所有样式
+    const selection = window.getSelection()
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0)
+      range.deleteContents()
+      range.insertNode(document.createTextNode(text))
+      range.collapse(false)
+      selection.removeAllRanges()
+      selection.addRange(range)
+      
+      // 触发输入事件
+      handleInput({ target: editorRef.value })
+    }
+  }
+}
+
+// 处理键盘事件
+const handleKeydown = (event) => {
+  // 处理@提及列表的键盘导航
+  if (showMention.value) {
+    switch (event.key) {
+      case 'ArrowUp':
+        event.preventDefault()
+        selectedMentionIndex.value = Math.max(0, selectedMentionIndex.value - 1)
+        break
+      case 'ArrowDown':
+        event.preventDefault()
+        selectedMentionIndex.value = Math.min(mentionList.value.length - 1, selectedMentionIndex.value + 1)
+        break
+      case 'Enter':
+      case 'Tab':
+        event.preventDefault()
+        if (mentionList.value[selectedMentionIndex.value]) {
+          insertMention(mentionList.value[selectedMentionIndex.value])
+        }
+        break
+      case 'Escape':
+        hideMentionList()
+        break
+    }
+    return
+  }
+  console.log('键盘事件:', event.key, 'Ctrl:', event.ctrlKey, 'Meta:', event.metaKey);
+  
+  // 处理Enter键发送消息（只有在没有按Ctrl/Cmd时才发送）
+  if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
+    console.log('Enter发送消息');
+    event.preventDefault()
+    console.log('editorContent.value', editorContent.value)
+    console.log('editorHtml.value', editorHtml.value)
+    // 确保编辑器内容不为空（文本、图片、文件或表情）
+    if (editorContent.value.trim() || 
+        editorHtml.value.includes('<img') || 
+        editorHtml.value.includes('editor-file') || 
+        editorHtml.value.includes('editor-emoji')) {
+      sendMessage()
+    }
+  }
+  
+  // Ctrl+Enter换行由WangEditor的onKeyDown处理，这里不需要额外处理
+}
+
+// 发送消息
+const sendMessage = () => {
+  console.log('发送消息');
+  // 检查编辑器是否有内容：文本、图片、文件或表情
+  if (!editorContent.value.trim() && 
+      !editorHtml.value.includes('<img') && 
+      !editorHtml.value.includes('editor-file') && 
+      !editorHtml.value.includes('editor-emoji')) {
+    return
+  }
+  console.log('发送消息1');
+  const messageData = parseEditorContent()
+  
+  if (editingMessage.value) {
+    // 编辑消息
+    emit('editor-event', {
+      event: 'edit_message',
+      data: {
+        ...messageData,
+        msg_id: editingMessage.value.msg_id
+      },
+      callBack: (success) => {
+        if (success) {
+          clearEditor()
+          editingMessage.value = null
+        }
+      }
+    })
+  } else {
+    // 发送新消息
+    const eventType = messageData.items.length > 1 ? 'mixed_event' : 
+                     messageData.items[0].type === 1 ? 'text_event' : 
+                     messageData.items[0].type + '_event'
+    console.log('发送消息2',eventType);
+    emit('editor-event', {
+      event: eventType,
+      data: messageData,
+      callBack: (success) => {
+        if (success) {
+          clearEditor()
+        }
+      }
+    })
+  }
+}
+
+// 解析编辑器内容
+const parseEditorContent = () => {
+  const items = []
+  const mentionUids = []
+  
+  // 解析HTML内容
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = editorHtml.value
+  
+  let textContent = ''
+  const nodes = Array.from(tempDiv.childNodes)
+  
+  nodes.forEach(node => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      textContent += node.textContent
+    } else if (node.nodeType === Node.ELEMENT_NODE) {
+      if (node.classList.contains('mention')) {
+        const userId = node.getAttribute('data-user-id')
+        if (userId) {
+          mentionUids.push(parseInt(userId))
+        }
+        textContent += node.textContent
+      } else if (node.tagName === 'IMG') {
+        // 处理图片
+        const src = node.getAttribute('src')
+        const width = node.getAttribute('width') || ''
+        const height = node.getAttribute('height') || ''
+        const isEmoji = node.classList.contains('editor-emoji')
+        
+        if (textContent.trim()) {
+          items.push({
+            type: 1,
+            content: textContent.trim()
+          })
+          textContent = ''
+        }
+        
+        if (isEmoji) {
+          // 处理表情图片
+          const altText = node.getAttribute('alt') || ''
+          if (altText) {
+            // 如果有alt文本，将表情作为文本处理
+            textContent += altText
+          } else {
+            // 否则作为图片处理
+            items.push({
+              type: 3,
+              content: src + (width && height ? `?width=${width}&height=${height}` : ''),
+              isEmoji: true
+            })
+          }
+        } else {
+          // 处理普通图片
+          items.push({
+            type: 3,
+            content: src + (width && height ? `?width=${width}&height=${height}` : '')
+          })
+        }
+      } else if (node.classList.contains('emoji')) {
+        textContent += node.getAttribute('alt') || node.textContent
+      } else if (node.classList.contains('editor-file')) {
+        // 处理文件
+        const fileUrl = node.getAttribute('data-url')
+        const fileName = node.getAttribute('data-name')
+        const fileSize = node.getAttribute('data-size')
+        
+        if (textContent.trim()) {
+          items.push({
+            type: 1,
+            content: textContent.trim()
+          })
+          textContent = ''
+        }
+        
+        if (fileUrl && fileName) {
+          items.push({
+            type: 'file',
+            content: fileUrl,
+            name: fileName,
+            size: node.getAttribute('data-size-raw') || fileSize || 0
+          })
+        }
+      } else {
+        textContent += node.textContent
+      }
+    }
+  })
+  
+  if (textContent.trim()) {
+    items.push({
+      type: 1,
+      content: textContent.trim()
+    })
+  }
+  
+  return {
+    items: items.length > 0 ? items : [{ type: 1, content: '' }],
+    mentionUids,
+    quoteId: quoteData.value?.msg_id || 0
+  }
+}
+
+// 清空编辑器
+const clearEditor = () => {
+  editorContent.value = ''
+  editorHtml.value = ''
+  if (editorRef.value) {
+    editorRef.value.innerHTML = ''
+  }
+  
+  // 清除引用数据
+  quoteData.value = null
+  hideMentionList()
+  
+  // 清空草稿
+  saveDraft()
+  
+  // 触发输入事件
+  emit('editor-event', {
+    event: 'input_event',
+    data: ''
+  })
+}
+
+
+
+// 插入图片
+const insertImage = (url, width, height) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  const img = document.createElement('img')
+  img.src = url
+  img.style.maxWidth = '200px'
+  img.style.maxHeight = '200px'
+  if (width) img.setAttribute('width', width)
+  if (height) img.setAttribute('height', height)
+  
+  range.deleteContents()
+  range.insertNode(img)
+  range.setStartAfter(img)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+  
+  editorRef.value.focus()
+  handleInput({ target: editorRef.value })
+}
+
+// 插入文件
+const insertFile = (url, fileName, fileSize) => {
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+  
+  const range = selection.getRangeAt(0)
+  
+  // 创建文件链接元素
+  const fileLink = document.createElement('a')
+  fileLink.href = url
+  fileLink.target = '_blank'
+  fileLink.className = 'editor-file'
+  fileLink.textContent = fileName
+  fileLink.setAttribute('data-size', formatFileSize(fileSize))
+  fileLink.setAttribute('data-url', url) // 添加URL属性用于解析
+  fileLink.setAttribute('data-name', fileName) // 添加文件名属性用于解析
+  fileLink.setAttribute('data-size-raw', fileSize) // 添加原始文件大小属性用于解析
+  
+  range.deleteContents()
+  range.insertNode(fileLink)
+  range.setStartAfter(fileLink)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+  
+  editorRef.value.focus()
+  handleInput({ target: editorRef.value })
+}
+
+// 格式化文件大小
+const formatFileSize = (size) => {
+  if (size < 1024) {
+    return size + ' B'
+  } else if (size < 1024 * 1024) {
+    return (size / 1024).toFixed(2) + ' KB'
+  } else if (size < 1024 * 1024 * 1024) {
+    return (size / (1024 * 1024)).toFixed(2) + ' MB'
+  } else {
+    return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
+  }
+}
+
+
+/**
+ * 文件上传处理
+ * @param e 上传事件对象
+ */
+ async function onUploadFile(e) {
+  let file = e.target.files[0]
+
+  e.target.value = null  // 清空input，允许再次选择相同文件
+
+  console.log("文件类型"+file.type)
+  if (file.type.indexOf('image/') === 0) {
+    console.log("进入图片")
+    // 处理图片文件 - 立即显示临时消息，然后上传
+    let fn = emitCall('image_event', file, () => {})
+    emit('editor-event', fn)
+
+    return
+  }
+
+  if (file.type.indexOf('video/') === 0) {
+    console.log("进入视频")
+    // 处理视频文件
+    let fn = emitCall('video_event', file, () => {})
+    emit('editor-event', fn)
+  } else {
+    console.log("进入其他")
+    // 处理其他类型文件
+    let fn = emitCall('file_event', file, () => {})
+    emit('editor-event', fn)
+  }
+}
+
+// 表情选择事件
+const onEmoticonEvent = (emoji) => {
+  // 关闭表情面板
+  emoticonRef.value?.setShow(false)
+  
+  // 处理不同类型的表情
+  if (emoji.type === 'text') {
+    // 文本表情
+    insertTextEmoji(emoji.value)
+  } else if (emoji.type === 'image') {
+    // 图片表情
+    insertImageEmoji(emoji.img, emoji.value)
+  } else if (emoji.type === 'emoji') {
+    // 系统表情
+    insertTextEmoji(emoji.value)
+  } else if (emoji.type === 1) {
+    // 兼容旧版表情格式
+    if (emoji.img) {
+      insertImageEmoji(emoji.img, emoji.value)
+    } else {
+      insertTextEmoji(emoji.value)
+    }
+  } else {
+    // 发送整个表情包
+    emit('editor-event', {
+      event: 'emoticon_event',
+      data: emoji.value || emoji.id,
+      callBack: () => {}
+    })
+  }
+}
+
+// 插入文本表情
+const insertTextEmoji = (emojiText) => {
+  const editor = editorRef.value
+  if (!editor) return
+
+  editor.focus()
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+
+  const range = selection.getRangeAt(0)
+  range.deleteContents()
+
+  const textNode = document.createTextNode(emojiText)
+  range.insertNode(textNode)
+
+  // 移动光标到插入文本之后
+  range.setStartAfter(textNode)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  // 触发输入事件以更新编辑器内容
+  handleInput({ target: editor })
+}
+
+// 插入图片表情
+const insertImageEmoji = (imgSrc, altText) => {
+  const editor = editorRef.value
+  if (!editor) return
+
+  editor.focus()
+  const selection = window.getSelection()
+  if (!selection.rangeCount) return
+
+  const range = selection.getRangeAt(0)
+  range.deleteContents()
+
+  const img = document.createElement('img')
+  img.src = imgSrc
+  img.alt = altText
+  img.className = 'editor-emoji' // 使用已有的样式
+  // img.style.width = '24px' // 样式已在 .editor-emoji 中定义
+  // img.style.height = '24px'
+  // img.style.verticalAlign = 'middle'
+
+  range.insertNode(img)
+
+  // 移动光标到插入图片之后
+  range.setStartAfter(img)
+  range.collapse(true)
+  selection.removeAllRanges()
+  selection.addRange(range)
+
+  // 触发输入事件以更新编辑器内容
+  handleInput({ target: editor })
+}
+
+// 事件监听
+const onSubscribeMention = (data) => {
+  // 确保编辑器获得焦点
+  editorRef.value?.focus()
+  
+  // 插入@提及
+  insertMention(data)
+}
+
+const onSubscribeQuote = (data) => {
+  // 保存引用数据，但不保存到草稿中
+  quoteData.value = data
+  
+  // 在编辑器中显示引用内容
+  const editor = editorRef.value
+  if (!editor) return
+  
+  // 先移除已有的引用元素
+  const existingQuotes = editor.querySelectorAll('.editor-quote')
+  existingQuotes.forEach(quote => quote.remove())
+  
+  // 保存当前光标位置
+  const selection = window.getSelection()
+  const savedRange = selection.rangeCount > 0 ? selection.getRangeAt(0).cloneRange() : null
+  const hasContent = editor.textContent.trim().length > 0
+  
+  // 创建引用元素
+  const quoteElement = document.createElement('div')
+  quoteElement.className = 'editor-quote'
+  quoteElement.contentEditable = 'false' // 设置为不可编辑
+  
+  // 添加引用内容和关闭按钮
+  quoteElement.innerHTML = `
+    <div class="quote-content-wrapper">
+      <div class="quote-title">${data.title}</div>
+      ${data.image ? `<div class="quote-image"><img src="${data.image}" alt="引用图片" /></div>` : ''}
+      ${data.describe ? `<div class="quote-content">${data.describe}</div>` : ''}
+    </div>
+    <div class="quote-close">×</div>
+  `
+  
+  // 将引用元素插入到编辑器开头
+  if (editor.firstChild) {
+    editor.insertBefore(quoteElement, editor.firstChild)
+  } else {
+    editor.appendChild(quoteElement)
+  }
+  
+  // 添加关闭按钮点击事件
+  const closeBtn = quoteElement.querySelector('.quote-close')
+  if (closeBtn) {
+    closeBtn.addEventListener('click', () => {
+      // 移除引用元素
+      quoteElement.remove()
+      
+      // 清除引用数据
+      quoteData.value = null
+      
+      // 不触发handleInput，避免保存草稿
+      // 只更新编辑器内容变量
+      editorContent.value = editor.textContent || ''
+      editorHtml.value = editor.innerHTML || ''
+      
+      // 确保编辑器获得焦点
+      setTimeout(() => {
+        editor.focus()
+      }, 0)
+    })
+  }
+  
+  // 注意：不调用saveDraft()，确保引用内容不会被保存到草稿中
+  
+  // 添加点击整个引用卡片的事件
+  quoteElement.addEventListener('click', (e) => {
+    // 如果不是点击关闭按钮，则设置光标到引用卡片后面
+    if (!e.target.classList.contains('quote-close')) {
+      const selection = window.getSelection()
+      const range = document.createRange()
+      range.setStartAfter(quoteElement)
+      range.collapse(true)
+      selection.removeAllRanges()
+      selection.addRange(range)
+      
+      // 确保编辑器获得焦点
+      editor.focus()
+    }
+  })
+  
+  // 监听键盘事件，处理删除操作
+  // 监听键盘事件，处理删除操作
+  const handleDeleteQuote = function(e) {
+  // 检查是否是删除键（Backspace 或 Delete）
+  if (e.key === 'Backspace' || e.key === 'Delete') {
+    const selection = window.getSelection();
+    if (selection.rangeCount === 0) return;
+    
+    const range = selection.getRangeAt(0);
+    const quoteElement = editor.querySelector('.editor-quote');
+    
+    if (!quoteElement) {
+      // 如果引用元素已经被删除，移除事件监听器
+      editor.removeEventListener('keydown', handleDeleteQuote);
+      return;
+    }
+    
+    // 检查光标是否在引用卡片前面（Backspace）或后面（Delete）
+    const isBeforeQuote = e.key === 'Backspace' && 
+                         range.collapsed && 
+                         range.startContainer === editor && 
+                         Array.from(editor.childNodes).indexOf(quoteElement) === range.startOffset;
+    
+    const isAfterQuote = e.key === 'Delete' && 
+                        range.collapsed && 
+                        range.startContainer === editor && 
+                        Array.from(editor.childNodes).indexOf(quoteElement) === range.startOffset - 1;
+    
+    if (isBeforeQuote || isAfterQuote) {
+      quoteElement.remove();
+      quoteData.value = null;
+      handleInput({ target: editor });
+      e.preventDefault();
+    }
+  }
+};
+
+editor.addEventListener('keydown', handleDeleteQuote);
+  
+  // 设置光标位置
+setTimeout(() => {
+  // 确保编辑器中有内容可以放置光标
+  if (!editor.childNodes.length || (editor.childNodes.length === 1 && editor.childNodes[0] === quoteElement)) {
+    // 如果编辑器中只有引用元素，添加一个空的文本节点
+    const textNode = document.createTextNode('\u200B'); // 使用零宽空格
+    editor.appendChild(textNode);
+  }
+  
+  // 强制刷新编辑器内容，确保DOM已更新
+  const currentHtml = editor.innerHTML;
+  editor.innerHTML = currentHtml;
+  
+  // 重新获取引用元素（因为innerHTML操作会导致之前的引用丢失）
+  const newQuoteElement = editor.querySelector('.editor-quote');
+  
+  editor.focus();
+  const newSelection = window.getSelection();
+  const newRange = document.createRange();
+  
+  // 始终将光标设置在引用元素后面
+  if (newQuoteElement) {
+    // 找到引用元素后的第一个节点
+    let nextNode = newQuoteElement.nextSibling;
+    if (nextNode && nextNode.nodeType === 3) { // 文本节点
+      newRange.setStart(nextNode, 0);
+    } else if (nextNode) { // 其他元素节点
+      newRange.setStartBefore(nextNode);
+    } else { // 没有下一个节点
+      newRange.setStartAfter(newQuoteElement);
+    }
+  } else {
+    // 如果找不到引用元素，则设置到编辑器开头
+    if (editor.firstChild) {
+      newRange.setStartBefore(editor.firstChild);
+    } else {
+      newRange.setStart(editor, 0);
+    }
+  }
+  
+  newRange.collapse(true);
+  newSelection.removeAllRanges();
+  newSelection.addRange(newRange);
+  
+  // 确保光标可见
+  editor.scrollTop = editor.scrollHeight;
+  
+  // 更新编辑器内容
+  handleInput({ target: editor });
+  
+  // 再次确保编辑器获得焦点
+  setTimeout(() => {
+    editor.focus();
+    // 再次尝试设置光标位置
+    if (newSelection.rangeCount === 0) {
+      const finalRange = document.createRange();
+      if (newQuoteElement) {
+        finalRange.setStartAfter(newQuoteElement);
+      } else {
+        finalRange.setStart(editor, 0);
+      }
+      finalRange.collapse(true);
+      newSelection.removeAllRanges();
+      newSelection.addRange(finalRange);
+    }
+  }, 50);
+}, 200); // 增加延时确保DOM已完全更新
+}
+
+const onSubscribeEdit = (data) => {
+  editingMessage.value = data
+  clearEditor()
+  
+  // 插入编辑内容
+  if (data.content) {
+    editorRef.value.innerHTML = data.content
+    editorContent.value = data.content
+    editorHtml.value = data.content
+  }
+}
+
+// 清除编辑器内容的事件处理函数
+const onSubscribeClear = () => {
+  clearEditor()
+}
+
+// 保存草稿
+const saveDraft = () => {
+  if (!indexName.value) return
+  
+  // 获取编辑器内容，但排除引用元素
+  let contentToSave = ''
+  let htmlToSave = ''
+  
+  if (editorRef.value) {
+    // 临时保存引用元素
+    const quoteElements = []
+    const editorQuotes = editorRef.value.querySelectorAll('.editor-quote')
+    
+    // 克隆编辑器内容
+    const clonedEditor = editorRef.value.cloneNode(true)
+    
+    // 从克隆的编辑器中移除引用元素
+    const clonedQuotes = clonedEditor.querySelectorAll('.editor-quote')
+    clonedQuotes.forEach(quote => quote.remove())
+    
+    // 获取不包含引用的内容
+    contentToSave = clonedEditor.textContent || ''
+    htmlToSave = clonedEditor.innerHTML || ''
+  }
+  
+  // 检查是否有实际内容（不包括引用）
+  const hasContent = contentToSave.trim() || htmlToSave.includes('<img') || htmlToSave.includes('editor-file')
+  
+  if (hasContent) {
+    // 保存草稿到store，不包括引用数据
+    editorDraftStore.items[indexName.value] = JSON.stringify({
+      content: contentToSave,
+      html: htmlToSave
+      // 不保存quoteData，确保引用不会出现在草稿中
+    })
+  } else {
+    // 编辑器为空时删除对应草稿
+    delete editorDraftStore.items[indexName.value]
+  }
+}
+
+// 加载草稿
+const loadDraft = () => {
+  if (!indexName.value) return
+  
+  // 延迟处理，确保DOM已渲染
+  setTimeout(() => {
+    // 保存当前引用数据的临时副本
+    const currentQuoteData = quoteData.value
+    
+    // 清除当前引用数据，避免重复添加
+    quoteData.value = null
+    
+    const draft = editorDraftStore.items[indexName.value]
+    if (draft) {
+      try {
+        const draftData = JSON.parse(draft)
+        
+        // 恢复编辑器内容（不包含引用）
+        if (editorRef.value) {
+          // 先清空编辑器内容，包括引用元素
+          editorRef.value.innerHTML = ''
+          
+          // 恢复草稿内容
+          editorRef.value.innerHTML = draftData.html || ''
+          editorContent.value = draftData.content || ''
+          editorHtml.value = draftData.html || ''
+          
+          // 如果有引用数据，重新添加到编辑器
+          if (currentQuoteData) {
+            // 重新调用引用函数添加引用元素
+            onSubscribeQuote(currentQuoteData)
+          }
+        }
+      } catch (error) {
+        console.error('加载草稿失败:', error)
+      }
+    } else {
+      // 没有草稿则清空编辑器内容，但保留引用
+      if (editorRef.value) {
+        // 清空编辑器
+        editorRef.value.innerHTML = ''
+        editorContent.value = ''
+        editorHtml.value = ''
+        
+        // 如果有引用数据，重新添加到编辑器
+        if (currentQuoteData) {
+          onSubscribeQuote(currentQuoteData)
+        }
+      }
+    }
+  }, 0)
+}
+
+// 监听会话变化，加载对应草稿
+watch(indexName, loadDraft, { immediate: true })
+
+// 组件挂载
+onMounted(() => {
+  bus.subscribe(EditorConst.Mention, onSubscribeMention)
+  bus.subscribe(EditorConst.Quote, onSubscribeQuote)
+  bus.subscribe(EditorConst.Edit, onSubscribeEdit)
+  bus.subscribe(EditorConst.Clear, onSubscribeClear)
+  
+  // 点击外部隐藏mention
+  document.addEventListener('click', (event) => {
+    if (!editorRef.value?.contains(event.target)) {
+      hideMentionList()
+    }
+  })
+  
+  // 初始加载草稿
+  loadDraft()
+})
+
+/**
+ * 组件生命周期钩子 - 组件卸载前
+ * 
+ * onBeforeUnmount是Vue 3的生命周期钩子，在组件卸载前执行
+ * 在这里用于清理事件订阅，防止内存泄漏
+ * 使用bus.unsubscribe取消订阅之前通过bus.subscribe注册的事件处理函数
+ */
+onBeforeUnmount(() => {
+  // 取消订阅所有编辑器相关事件，防止内存泄漏和事件监听器残留
+  bus.unsubscribe(EditorConst.Mention, onSubscribeMention)
+  bus.unsubscribe(EditorConst.Quote, onSubscribeQuote)
+  bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
+  bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
+  
+  // 清理DOM事件监听器
+  const editor = editorRef.value
+  if (editor && handleDeleteQuote) {
+    editor.removeEventListener('keydown', handleDeleteQuote)
+  }
+})
+
+/**
+ * 表情选择事件处理函数
+ * 
+ * @param {Object} emoji - 选中的表情对象
+ * 
+ * 当用户从表情选择器中选择表情时触发
+ * 调用onEmoticonEvent插入表情到编辑器
+ * 然后关闭表情选择器面板
+ */
+const onEmoticonSelect = (emoji) => {
+  // 直接调用onEmoticonEvent处理表情
+  onEmoticonEvent(emoji)
+  isShowEmoticon.value = false
+}
+
+/**
+ * 代码块提交事件处理函数
+ * 
+ * @param {Object} data - 代码块数据
+ * 
+ * 当用户提交代码块时触发
+ * 通过emit向父组件发送code_event事件
+ * 传递代码块数据并关闭代码块面板
+ */
+const onCodeSubmit = (data) => {
+  emit('editor-event', {
+    event: 'code_event',
+    data,
+    callBack: () => {}
+  })
+  isShowCode.value = false
+}
+
+/**
+ * 投票提交事件处理函数
+ * 
+ * @param {Object} data - 投票数据
+ * 
+ * 当用户提交投票时触发
+ * 通过emit向父组件发送vote_event事件
+ * 传递投票数据并关闭投票面板
+ */
+const onVoteSubmit = (data) => {
+  emit('editor-event', {
+    event: 'vote_event',
+    data,
+    callBack: () => {}
+  })
+  isShowVote.value = false
+}
+</script>
+
+<template>
+  <!-- 
+    编辑器容器组件
+    使用el-container布局组件创建垂直布局的编辑器
+    包含工具栏和编辑区域两个主要部分
+  -->
+  <section class="el-container editor">
+    <section class="el-container is-vertical">
+      <!-- 
+        工具栏区域 
+        使用el-header组件作为工具栏容器
+        包含各种编辑工具按钮
+      -->
+      <header class="el-header toolbar bdr-t">
+        <div class="tools">
+          <!-- 
+            表情选择器弹出框
+            使用n-popover组件创建悬浮的表情选择面板
+            通过trigger="click"设置点击触发
+            raw属性表示内容不会被包装在额外的div中
+          -->
+          <n-popover
+            placement="top-start"
+            trigger="click"
+            raw
+            :show-arrow="false"
+            :width="300"
+            ref="emoticonRef"
+            style="width: 500px; height: 250px; border-radius: 10px; overflow: hidden"
+          >
+            <!-- 
+              触发器模板
+              点击此区域会显示表情选择器
+            -->
+            <template #trigger>
+              <div class="item pointer">
+                <n-icon size="18" class="icon" :component="SmilingFace" />
+                <p class="tip-title">表情符号</p>
+              </div>
+            </template>
+
+            <!-- 
+              表情选择器组件
+              通过on-select事件将选中的表情传递给onEmoticonEvent处理函数
+            -->
+            <MeEditorEmoticon @on-select="onEmoticonEvent" />
+          </n-popover>
+
+          <!-- 
+            工具栏其他功能按钮
+            通过v-for循环渲染navs数组中定义的工具按钮
+            每个按钮包含图标和提示文本
+            通过v-show="nav.show"控制按钮的显示/隐藏
+            点击时执行nav.click定义的函数
+          -->
+          <div
+            class="item pointer"
+            v-for="nav in navs"
+            :key="nav.title"
+            v-show="nav.show"
+            @click="nav.click"
+          >
+            <n-icon size="18" class="icon" :component="nav.icon" />
+            <p class="tip-title">{{ nav.title }}</p>
+          </div>
+        </div>
+      </header>
+
+      <!-- 
+        编辑器主体区域
+        使用el-main组件作为主要内容区域
+      -->
+      <main class="el-main height100">
+        <!-- 
+          可编辑区域
+          使用contenteditable="true"使div可编辑，这是HTML5的属性
+          ref="editorRef"用于获取DOM引用
+          placeholder属性用于显示占位文本
+          绑定多个事件处理函数处理用户交互
+        -->
+        <div
+          ref="editorRef"
+          class="custom-editor"
+          contenteditable="true"
+          :placeholder="placeholder"
+          @input="handleInput"
+          @keydown="handleKeydown"
+          @paste="handlePaste"
+          @focus="handleFocus"
+          @blur="handleBlur"
+        ></div>
+
+        <!-- 
+          @提及列表
+          当用户输入@时显示的用户列表
+          通过v-if="showMention"控制显示/隐藏
+          使用动态样式定位列表位置
+        -->
+       
+        <div
+          v-if="showMention"
+          class="mention-list   py-5px"
+          :style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }"
+        >
+        <n-virtual-list style="max-height: 140px;width: 163px;" :item-size="42" :items="mentionList">
+    <template #default="{ item }">
+      <div :key="item.key" class="cursor-pointer px-14px h-42px hover:bg-#EEE9F9"  @mousedown.prevent="insertMention(item)">
+     <div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 flex items-center h-full ">
+      <img class="w-26px h-26px rounded-50% mr-11px" :src="item.avatar" alt="">
+      <span> {{ item.nickname }}</span>
+     </div>
+      </div>
+    </template>
+  </n-virtual-list>
+          <ul>
+            <!-- 
+              提及列表项
+              循环渲染mentionList数组中的用户
+              通过:class="{ selected: index === selectedMentionIndex }"高亮当前选中项
+              @mousedown.prevent防止失去焦点
+            -->
+            <!-- <li
+              v-for="(member, index) in mentionList"
+              :key="member.user_id"
+              :class="{ selected: index === selectedMentionIndex }"
+              @mousedown.prevent="insertMention(member)"
+            >
+              {{ member.nickname }}
+            </li> -->
+          </ul>
+        </div>
+      </main>
+    </section>
+  </section>
+
+  <!-- 
+    隐藏的文件上传表单
+    使用display: none隐藏表单
+    包含两个文件输入框，分别用于上传图片和其他文件
+    通过ref获取DOM引用
+  -->
+  <form enctype="multipart/form-data" style="display: none">
+    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
+    <input type="file" ref="uploadFileRef" @change="onUploadFile" />
+  </form>
+
+
+</template>
+
+<style lang="less" scoped>
+/**
+ * 编辑器组件样式
+ * 使用CSS变量定义可复用的颜色值
+ * --tip-bg-color: 提示背景色
+ */
+.editor {
+  --tip-bg-color: rgb(241 241 241 / 90%);
+  height: 100%;
+
+  /**
+   * 工具栏样式
+   * 固定高度的顶部工具栏
+   */
+  .toolbar {
+    height: 38px;
+    display: flex;
+
+    /**
+     * 工具按钮容器
+     * 使用flex布局排列工具按钮
+     */
+    .tools {
+      height: 100%;
+      flex: auto;
+      display: flex;
+
+      /**
+       * 单个工具按钮样式
+       * 使用flex布局居中对齐内容
+       * 相对定位用于放置提示文本
+       */
+      .item {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 35px;
+        margin: 0 2px;
+        position: relative;
+        user-select: none; /* 防止文本被选中 */
+
+        /**
+         * 提示文本样式
+         * 默认隐藏，悬停时显示
+         * 使用绝对定位在按钮下方显示
+         */
+        .tip-title {
+          display: none;
+          position: absolute;
+          top: 40px;
+          left: 0px;
+          line-height: 26px;
+          background-color: var(--tip-bg-color);
+          color: var(--im-text-color);
+          min-width: 20px;
+          font-size: 12px;
+          padding: 0 5px;
+          border-radius: 2px;
+          white-space: pre; /* 保留空白符 */
+          user-select: none;
+          z-index: 999999999999; /* 确保提示显示在最上层 */
+        }
+
+        /**
+         * 悬停效果
+         * 当鼠标悬停在按钮上时显示提示文本
+         */
+        &:hover {
+          .tip-title {
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  
+  /**
+   * 文件链接样式
+   * 使用:deep()选择器影响组件内部元素
+   * 显示文件链接的卡片式样式
+   */
+  :deep(.editor-file) {
+    display: inline-block;
+    padding: 5px 10px;
+    margin: 5px 0;
+    background-color: #f5f5f5;
+    border: 1px solid #e0e0e0;
+    border-radius: 4px;
+    color: #2196f3;
+    text-decoration: none;
+    position: relative;
+    padding-right: 60px; /* 为文件大小信息留出空间 */
+    max-width: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+    text-overflow: ellipsis; /* 文本溢出时显示省略号 */
+    white-space: nowrap; /* 防止文本换行 */
+    
+    &::after {
+      content: attr(data-size);
+      position: absolute;
+      right: 10px;
+      color: #757575;
+      font-size: 12px;
+    }
+    
+    &:hover {
+      background-color: #e3f2fd;
+    }
+  }
+  
+  // 表情符号样式
+  /**
+   * 表情符号样式
+   * 使用:deep()选择器影响组件内部元素
+   * 设置表情符号的大小和对齐方式
+   */
+  :deep(.editor-emoji) {
+    display: inline-block;
+    width: 24px;
+    height: 24px;
+    vertical-align: middle; /* 垂直居中对齐 */
+    margin: 0 2px;
+  }
+
+  /**
+   * 引用消息样式
+   * 使用:deep()选择器影响组件内部元素
+   * 创建带有左侧边框的引用卡片
+   * 使用CSS变量适配不同主题
+   */
+  :deep(.editor-quote) {
+    margin-bottom: 8px;
+    padding: 8px 12px;
+    background-color: var(--im-message-left-bg-color, #f5f5f5);
+    border-left: 3px solid var(--im-primary-color, #409eff);
+    border-radius: 4px;
+    font-size: 13px;
+    position: relative;
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); /* 轻微阴影效果 */
+    cursor: pointer; /* 添加指针样式 */
+    user-select: none; /* 防止文本选择 */
+    transition: background-color 0.2s ease; /* 平滑过渡效果 */
+    
+    /**
+     * 引用卡片悬停效果
+     * 改变背景色提供视觉反馈
+     */
+    &:hover {
+      background-color: var(--im-message-left-bg-hover-color, #eaeaea);
+    }
+    
+    /**
+     * 引用内容容器
+     * 使用flex: 1占据剩余空间
+     * 处理内容溢出
+     */
+    .quote-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+    }
+    
+    /**
+     * 引用标题样式
+     * 使用主题色显示引用来源
+     */
+    .quote-title {
+      color: var(--im-primary-color, #409eff);
+      margin-bottom: 4px;
+      font-weight: 500;
+    }
+    
+    /**
+     * 引用内容样式
+     * 限制显示行数，超出部分显示省略号
+     * 使用-webkit-line-clamp实现多行文本截断
+     */
+    .quote-content {
+      color: var(--im-text-color, #333);
+      word-break: break-all; /* 在任意字符间断行 */
+      white-space: normal; /* 允许正常换行 */
+      overflow: hidden;
+      text-overflow: ellipsis; /* 文本溢出显示省略号 */
+      display: -webkit-box;
+      -webkit-line-clamp: 2; /* 限制显示2行 */
+      -webkit-box-orient: vertical;
+    }
+    
+    /**
+     * 引用图片样式
+     * 限制图片大小，添加圆角
+     */
+    .quote-image img {
+      max-width: 100px;
+      max-height: 60px;
+      border-radius: 3px;
+      pointer-events: none; /* 防止图片被拖拽 */
+    }
+    
+    /**
+     * 引用关闭按钮样式
+     * 圆形按钮，悬停时改变背景色和文字颜色
+     */
+    .quote-close {
+      width: 18px;
+      height: 18px;
+      line-height: 16px;
+      text-align: center;
+      border-radius: 50%;
+      background-color: rgba(0, 0, 0, 0.1);
+      color: #666;
+      cursor: pointer;
+      font-size: 16px;
+      margin-left: 8px;
+      user-select: none;
+      
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+        color: #333;
+      }
+    }
+  }
+
+  .custom-editor {
+    width: 100%;
+    height: 100%;
+    padding: 8px;
+    border: none;
+    outline: none;
+    resize: none;
+    font-size: 14px;
+    line-height: 1.5;
+    color: #333;
+    background: transparent;
+    overflow-y: auto;
+
+    /**
+     * 自定义滚动条样式 - 轨道
+     * 使用::-webkit-scrollbar伪元素自定义滚动条轨道
+     * 设置宽度和高度为3px，背景色为透明
+     */
+    &::-webkit-scrollbar {
+      width: 3px;
+      height: 3px;
+      background-color: unset;
+    }
+
+    /**
+     * 自定义滚动条样式 - 滑块
+     * 使用::-webkit-scrollbar-thumb伪元素自定义滚动条滑块
+     * 设置圆角和透明背景色
+     */
+    &::-webkit-scrollbar-thumb {
+      border-radius: 3px;
+      background-color: transparent;
+    }
+
+    /**
+     * 滚动条悬停效果
+     * 当鼠标悬停在编辑器上时，显示滚动条滑块
+     * 使用CSS变量适配不同主题的滚动条颜色
+     */
+    &:hover {
+      &::-webkit-scrollbar-thumb {
+        background-color: var(--im-scrollbar-thumb);
+      }
+    }
+  }
+
+  /**
+   * 编辑器占位符样式
+   * 使用:empty::before伪元素在编辑器为空时显示占位文本
+   * content: attr(placeholder)获取placeholder属性的值作为显示内容
+   */
+  .custom-editor:empty::before {
+    content: attr(placeholder);
+    color: #999;
+    pointer-events: none; /* 防止占位符文本接收鼠标事件 */
+    font-family: PingFang SC, Microsoft YaHei, 'Alibaba PuHuiTi 2.0 45' !important;
+  }
+
+  /**
+   * 编辑器聚焦样式
+   * 移除默认的聚焦轮廓
+   */
+  .custom-editor:focus {
+    outline: none;
+  }
+
+  /**
+   * @提及样式
+   * 为@提及的用户名添加特殊样式
+   * 使用蓝色背景和文字颜色突出显示
+   */
+  .mention {
+    color: #1890ff;
+    background-color: #e6f7ff;
+    padding: 2px 4px;
+    border-radius: 3px;
+    text-decoration: none;
+    cursor: pointer;
+  }
+
+  /**
+   * @提及悬停效果
+   * 当鼠标悬停在@提及上时改变背景色
+   */
+  .mention:hover {
+    background-color: #bae7ff;
+  }
+
+  /**
+   * 图片样式
+   * 限制编辑器中插入的图片大小
+   * 添加圆角和鼠标指针样式
+   */
+  .editor-image {
+    max-width: 100px;
+    max-height: 100px;
+    border-radius: 3px;
+    background-color: #48484d;
+    margin: 0px 2px;
+    cursor: pointer;
+  }
+
+  /**
+   * 表情样式
+   * 设置表情图片的大小和对齐方式
+   */
+  .editor-emoji {
+    width: 20px;
+    height: 20px;
+    vertical-align: middle;
+    margin: 0 2px;
+  }
+
+  /**
+   * @提及列表样式
+   * 定位和样式化@提及的下拉列表
+   * 使用绝对定位、白色背景和阴影效果
+   */
+  .mention-list {
+    position: absolute;
+    background-color: white;
+    border: 1px solid #eee;
+    border-radius: 4px;
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
+    z-index: 1000;
+
+  }
+
+  /* 引用卡片样式 */
+  .quote-card {
+    background: #f5f5f5;
+    border-left: 3px solid #1890ff;
+    padding: 8px 12px;
+    margin: 8px 0;
+    border-radius: 4px;
+    position: relative;
+  }
+
+  /**
+   * 引用内容样式
+   * 设置较小的字体大小
+   */
+  .quote-content {
+    font-size: 12px;
+  }
+
+  /**
+   * 引用标题样式
+   * 使用粗体和主题蓝色
+   * 添加底部间距
+   */
+  .quote-title {
+    font-weight: bold;
+    color: #1890ff;
+    margin-bottom: 4px;
+  }
+
+  /**
+   * 引用文本样式
+   * 使用灰色文本和适当的行高
+   */
+  .quote-text {
+    color: #666;
+    line-height: 1.4;
+  }
+
+  /**
+   * 引用关闭按钮样式
+   * 绝对定位在右上角
+   * 移除默认按钮样式，添加鼠标指针
+   */
+  .quote-close {
+    position: absolute;
+    top: 4px;
+    right: 4px;
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #999;
+    font-size: 12px;
+  }
+
+  /**
+   * 编辑提示样式
+   * 使用橙色背景和边框创建警示效果
+   * 添加内边距、圆角和适当的字体大小
+   * 使用flex布局对齐内容
+   */
+  .edit-tip {
+    background: #fff7e6;
+    border: 1px solid #ffd591;
+    padding: 6px 12px;
+    margin-bottom: 8px;
+    border-radius: 4px;
+    font-size: 12px;
+    color: #d46b08;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+
+  /**
+   * 编辑提示按钮样式
+   * 移除默认按钮样式，添加鼠标指针
+   * 使用margin-left: auto将按钮推到右侧
+   */
+  .edit-tip button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    color: #d46b08;
+    margin-left: auto;
+  }
+}
+
+/**
+ * 暗色模式样式调整
+ * 使用HTML属性选择器检测暗色主题
+ * 重新定义暗色模式下的CSS变量
+ */
+html[theme-mode='dark'] {
+  .editor {
+    --tip-bg-color: #48484d;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue
index dc5f8ad..b80e130 100644
--- a/src/views/message/inner/panel/PanelFooter.vue
+++ b/src/views/message/inner/panel/PanelFooter.vue
@@ -10,6 +10,7 @@ import {
 } from '@/store'
 import ws from '@/connect'
 import { ServePublishMessage, ServeSendVote } from '@/api/chat'
+import CustomEditor from '@/components/editor/CustomEditor.vue'
 import { throttle, getVideoImage } from '@/utils/common'
 import { parseTime } from '@/utils/datetime'
 import Editor from '@/components/editor/Editor.vue'
@@ -342,7 +343,8 @@ onMounted(() => {
   <footer class="el-footer">
     <MultiSelectFooter v-if="dialogueStore.isOpenMultiSelect" />
 
-    <Editor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" />
+    <!-- <Editor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" /> -->
+    <CustomEditor v-else @editor-event="onEditorEvent" :vote="talk_type == 2" :members="members" />
   </footer>
 
   <HistoryRecord
diff --git a/vite.config.ts b/vite.config.ts
index 83a792e..715bc77 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      vueDevTools({
-        launchEditor: 'trae',
-      })
+      // vueDevTools({
+      //   launchEditor: 'trae',
+      // })
     ],
     define: {
       __APP_ENV__: env.APP_ENV

From f279248a51639a39e7f4b64a6410191f3d1f0d4c Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 10:44:17 +0800
Subject: [PATCH 2/9] =?UTF-8?q?feat(=E7=BC=96=E8=BE=91=E5=99=A8):=20?=
 =?UTF-8?q?=E5=A2=9E=E5=BC=BA=E7=BC=96=E8=BE=91=E5=99=A8=E5=8A=9F=E8=83=BD?=
 =?UTF-8?q?=E5=B9=B6=E4=BC=98=E5=8C=96=E5=9B=BE=E7=89=87=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 添加对粘贴图片的支持，自动触发上传流程
- 优化图片插入逻辑，保留原始尺寸信息并改进显示效果
- 重构消息内容解析逻辑，完善数据结构
- 移除冗余的文件插入功能，专注于图片处理优化
- 调整编辑器样式，改进图片显示效果
---
 src/components/editor/CustomEditor.vue | 202 +++++++++++++++++--------
 src/utils/auth.js                      |   2 +-
 2 files changed, 143 insertions(+), 61 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 27ddf87..1672b92 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -240,6 +240,22 @@ const insertMention = (member) => {
 const handlePaste = (event) => {
   event.preventDefault()
   
+  // 检查是否有图片
+  const items = event.clipboardData?.items
+  if (items) {
+    for (let i = 0; i < items.length; i++) {
+      if (items[i].type.indexOf('image') !== -1) {
+        // 获取粘贴的图片文件
+        const file = items[i].getAsFile()
+        if (file) {
+          // 使用现有的上传图片功能处理
+          onUploadFile([file])
+          return
+        }
+      }
+    }
+  }
+  
   // 获取粘贴的纯文本内容
   const text = event.clipboardData?.getData('text/plain') || ''
   
@@ -295,10 +311,19 @@ const handleKeydown = (event) => {
     console.log('editorContent.value', editorContent.value)
     console.log('editorHtml.value', editorHtml.value)
     // 确保编辑器内容不为空（文本、图片、文件或表情）
-    if (editorContent.value.trim() || 
-        editorHtml.value.includes('<img') || 
-        editorHtml.value.includes('editor-file') || 
-        editorHtml.value.includes('editor-emoji')) {
+    // 由于我们已经在 handleInput 中处理了表情文本，editorContent.value 应该包含表情文本
+    if (editorContent.value.trim()) {
+      // 解析并输出编辑器内容
+      const messageData = parseEditorContent()
+      console.log('编辑器内容解析结果:', JSON.stringify(messageData, null, 2))
+      
+      // 输出详细信息
+      console.log('消息项目数量:', messageData.items.length)
+      console.log('消息项目类型:', messageData.items.map(item => item.type))
+      console.log('提及用户IDs:', messageData.mentionUids)
+      console.log('引用消息ID:', messageData.quoteId)
+      
+      // 继续发送消息
       sendMessage()
     }
   }
@@ -309,16 +334,26 @@ const handleKeydown = (event) => {
 // 发送消息
 const sendMessage = () => {
   console.log('发送消息');
-  // 检查编辑器是否有内容：文本、图片、文件或表情
-  if (!editorContent.value.trim() && 
-      !editorHtml.value.includes('<img') && 
-      !editorHtml.value.includes('editor-file') && 
-      !editorHtml.value.includes('editor-emoji')) {
+  // 检查编辑器是否有内容：文本内容（包括表情文本）
+  if (!editorContent.value.trim()) {
     return
   }
   console.log('发送消息1');
   const messageData = parseEditorContent()
   
+  // 输出完整的消息数据结构
+  console.log('完整消息数据:', {
+    items: messageData.items,
+    mentionUids: messageData.mentionUids,
+    quoteId: messageData.quoteId,
+    quoteData: quoteData.value ? {
+      msg_id: quoteData.value.msg_id,
+      title: quoteData.value.title,
+      describe: quoteData.value.describe,
+      image: quoteData.value.image
+    } : null
+  })
+  
   if (editingMessage.value) {
     // 编辑消息
     emit('editor-event', {
@@ -361,6 +396,18 @@ const parseEditorContent = () => {
   const tempDiv = document.createElement('div')
   tempDiv.innerHTML = editorHtml.value
   
+  // 检查是否有引用元素
+  const quoteElements = tempDiv.querySelectorAll('.editor-quote')
+  let quoteInfo = null
+  if (quoteElements.length > 0 && quoteData.value) {
+    quoteInfo = {
+      msg_id: quoteData.value.msg_id,
+      title: quoteData.value.title,
+      describe: quoteData.value.describe,
+      image: quoteData.value.image
+    }
+  }
+  
   let textContent = ''
   const nodes = Array.from(tempDiv.childNodes)
   
@@ -368,6 +415,11 @@ const parseEditorContent = () => {
     if (node.nodeType === Node.TEXT_NODE) {
       textContent += node.textContent
     } else if (node.nodeType === Node.ELEMENT_NODE) {
+      // 跳过引用元素的处理，因为我们已经单独处理了
+      if (node.classList.contains('editor-quote')) {
+        return
+      }
+      
       if (node.classList.contains('mention')) {
         const userId = node.getAttribute('data-user-id')
         if (userId) {
@@ -377,8 +429,8 @@ const parseEditorContent = () => {
       } else if (node.tagName === 'IMG') {
         // 处理图片
         const src = node.getAttribute('src')
-        const width = node.getAttribute('width') || ''
-        const height = node.getAttribute('height') || ''
+        const width = node.getAttribute('data-original-width') || node.getAttribute('width') || ''
+        const height = node.getAttribute('data-original-height') || node.getAttribute('height') || ''
         const isEmoji = node.classList.contains('editor-emoji')
         
         if (textContent.trim()) {
@@ -407,7 +459,9 @@ const parseEditorContent = () => {
           // 处理普通图片
           items.push({
             type: 3,
-            content: src + (width && height ? `?width=${width}&height=${height}` : '')
+            content: src + (width && height ? `?width=${width}&height=${height}` : ''),
+            width: width,
+            height: height
           })
         }
       } else if (node.classList.contains('emoji')) {
@@ -447,11 +501,19 @@ const parseEditorContent = () => {
     })
   }
   
-  return {
+  // 构建完整的消息数据结构
+  const result = {
     items: items.length > 0 ? items : [{ type: 1, content: '' }],
     mentionUids,
     quoteId: quoteData.value?.msg_id || 0
   }
+  
+  // 如果有引用信息，添加到结果中
+  if (quoteInfo) {
+    result.quoteInfo = quoteInfo
+  }
+  
+  return result
 }
 
 // 清空编辑器
@@ -479,17 +541,24 @@ const clearEditor = () => {
 
 
 // 插入图片
-const insertImage = (url, width, height) => {
+const insertImage = (src, width, height) => {
   const selection = window.getSelection()
   if (!selection.rangeCount) return
   
   const range = selection.getRangeAt(0)
+  
+  // 创建图片元素
   const img = document.createElement('img')
-  img.src = url
-  img.style.maxWidth = '200px'
+  img.src = src
+  img.className = 'editor-image'
+  img.alt = '图片'
   img.style.maxHeight = '200px'
-  if (width) img.setAttribute('width', width)
-  if (height) img.setAttribute('height', height)
+  img.style.maxWidth = '100%'
+  img.style.objectFit = 'contain' // 保持原始比例
+  
+  // 存储原始尺寸信息，但不直接设置宽高属性
+  if (width) img.setAttribute('data-original-width', width)
+  if (height) img.setAttribute('data-original-height', height)
   
   range.deleteContents()
   range.insertNode(img)
@@ -502,35 +571,6 @@ const insertImage = (url, width, height) => {
   handleInput({ target: editorRef.value })
 }
 
-// 插入文件
-const insertFile = (url, fileName, fileSize) => {
-  const selection = window.getSelection()
-  if (!selection.rangeCount) return
-  
-  const range = selection.getRangeAt(0)
-  
-  // 创建文件链接元素
-  const fileLink = document.createElement('a')
-  fileLink.href = url
-  fileLink.target = '_blank'
-  fileLink.className = 'editor-file'
-  fileLink.textContent = fileName
-  fileLink.setAttribute('data-size', formatFileSize(fileSize))
-  fileLink.setAttribute('data-url', url) // 添加URL属性用于解析
-  fileLink.setAttribute('data-name', fileName) // 添加文件名属性用于解析
-  fileLink.setAttribute('data-size-raw', fileSize) // 添加原始文件大小属性用于解析
-  
-  range.deleteContents()
-  range.insertNode(fileLink)
-  range.setStartAfter(fileLink)
-  range.collapse(true)
-  selection.removeAllRanges()
-  selection.addRange(range)
-  
-  editorRef.value.focus()
-  handleInput({ target: editorRef.value })
-}
-
 // 格式化文件大小
 const formatFileSize = (size) => {
   if (size < 1024) {
@@ -547,21 +587,61 @@ const formatFileSize = (size) => {
 
 /**
  * 文件上传处理
- * @param e 上传事件对象
+ * @param e 上传事件对象或文件数组
  */
- async function onUploadFile(e) {
-  let file = e.target.files[0]
-
-  e.target.value = null  // 清空input，允许再次选择相同文件
-
+// 文件上传处理
+async function onUploadFile(e) {
+  let files;
+  
+  // 判断参数类型
+  if (Array.isArray(e)) {
+    // 直接传入的文件数组
+    files = e;
+  } else {
+    // 传入的是事件对象
+    files = e.target.files;
+    e.target.value = null;  // 清空input，允许再次选择相同文件
+  }
+  
+  // 确保有文件
+  if (!files || files.length === 0) return;
+  
+  // 处理第一个文件
+  const file = files[0];
+  
   console.log("文件类型"+file.type)
   if (file.type.indexOf('image/') === 0) {
     console.log("进入图片")
-    // 处理图片文件 - 立即显示临时消息，然后上传
-    let fn = emitCall('image_event', file, () => {})
-    emit('editor-event', fn)
-
-    return
+    // 创建临时URL
+    const tempUrl = URL.createObjectURL(file);
+    
+    // 创建图片对象以获取尺寸
+    const image = new Image();
+    image.src = tempUrl;
+    
+    image.onload = () => {
+      // 上传图片到服务器
+      const form = new FormData();
+      form.append('file', file);
+      form.append("source", "fonchain-chat");  // 图片来源标识
+      form.append("urlParam", `width=${image.width}&height=${image.height}`);
+      
+      // 先将临时图片插入编辑器，不直接设置宽高，而是传递原始尺寸信息
+      insertImage(tempUrl, image.width, image.height);
+      
+      // 上传图片并获取永久URL
+      uploadImg(form).then(({ code, data, message }) => {
+        if (code == 0) {
+          // 上传成功后，可以将临时URL替换为永久URL
+          // 但这里我们不做替换，因为临时URL在当前会话中已足够使用
+          console.log('图片上传成功:', data.ori_url);
+        } else {
+          window['$message'].error(message);
+        }
+      });
+    };
+    
+    return;
   }
 
   if (file.type.indexOf('video/') === 0) {
@@ -1536,12 +1616,14 @@ const onVoteSubmit = (data) => {
    * 添加圆角和鼠标指针样式
    */
   .editor-image {
-    max-width: 100px;
-    max-height: 100px;
+    max-width: 300px;
+    max-height: 200px;
     border-radius: 3px;
     background-color: #48484d;
     margin: 0px 2px;
     cursor: pointer;
+    object-fit: contain; /* 保持原始比例 */
+    display: inline-block; /* 确保图片正确显示 */
   }
 
   /**
diff --git a/src/utils/auth.js b/src/utils/auth.js
index f4f176c..0383a0a 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22726726265e9af0db370a54ea5ee002b43662d571b84c8468ac15330f79503a5cd5e72282d8bee92749b1a3c1b7fd87ae70b64b90e437e84c1b558c64a35e181b2ecf5db3007680c3607eac1edee7f59d'
+  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22403363066ad3c046839f7b2cf8a6186da017388f197c0c3b219b1c04e7d986e9774b72664a22a6075cee77da3584b7a2131365913796a5fcabc8f4594284e480a592a84a40a9aa7f5f27c951a53a369c'
 }
 
 /**

From 17c136834675da6da785a1ea44ca3127862f0dc2 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 11:52:55 +0800
Subject: [PATCH 3/9] =?UTF-8?q?feat:=20=E4=BC=98=E5=8C=96=E6=B6=88?=
 =?UTF-8?q?=E6=81=AF=E5=8F=91=E9=80=81=E9=80=BB=E8=BE=91=E5=92=8C=E7=BC=96?=
 =?UTF-8?q?=E8=BE=91=E5=99=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 在vite配置中启用vueDevTools工具
- 重构PanelFooter.vue中的图片消息发送逻辑，改为直接调用onSendMessage
- 修改CustomEditor.vue的消息发送逻辑，支持分类型处理消息内容
- 增加编辑器引用元素的检查逻辑，避免无效引用
- 优化图片上传后的URL替换逻辑，确保编辑器内容更新
---
 src/components/editor/CustomEditor.vue        | 104 ++++++++++++------
 src/views/message/inner/panel/PanelFooter.vue |  62 +----------
 vite.config.ts                                |   6 +-
 3 files changed, 76 insertions(+), 96 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 1672b92..73b0ff4 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -312,7 +312,16 @@ const handleKeydown = (event) => {
     console.log('editorHtml.value', editorHtml.value)
     // 确保编辑器内容不为空（文本、图片、文件或表情）
     // 由于我们已经在 handleInput 中处理了表情文本，editorContent.value 应该包含表情文本
-    if (editorContent.value.trim()) {
+    //  if (editorContent.value.trim()) {
+    if (true) {
+      // 检查引用元素是否存在，如果不存在但 quoteData 有值，则清除 quoteData
+      const editor = editorRef.value
+      const quoteElement = editor?.querySelector('.editor-quote')
+      if (!quoteElement && quoteData.value) {
+        console.log('引用元素已被删除，但 quoteData 仍有值，清除 quoteData')
+        quoteData.value = null
+      }
+      
       // 解析并输出编辑器内容
       const messageData = parseEditorContent()
       console.log('编辑器内容解析结果:', JSON.stringify(messageData, null, 2))
@@ -335,9 +344,9 @@ const handleKeydown = (event) => {
 const sendMessage = () => {
   console.log('发送消息');
   // 检查编辑器是否有内容：文本内容（包括表情文本）
-  if (!editorContent.value.trim()) {
-    return
-  }
+  // if (!editorContent.value.trim()) {
+  //   return
+  // }
   console.log('发送消息1');
   const messageData = parseEditorContent()
   
@@ -353,38 +362,51 @@ const sendMessage = () => {
       image: quoteData.value.image
     } : null
   })
-  
-  if (editingMessage.value) {
-    // 编辑消息
-    emit('editor-event', {
-      event: 'edit_message',
-      data: {
-        ...messageData,
-        msg_id: editingMessage.value.msg_id
-      },
-      callBack: (success) => {
-        if (success) {
-          clearEditor()
-          editingMessage.value = null
-        }
+  messageData.items.forEach(item => {
+    // 处理文本内容
+    if (item.type === 1) {
+      const data={
+        items:[{
+          content:item.content,
+          type:1
+        }],
+        mentionUids:messageData.mentionUids,
+        mentions:[],
+        quoteId:messageData.quoteId,
       }
-    })
-  } else {
-    // 发送新消息
-    const eventType = messageData.items.length > 1 ? 'mixed_event' : 
-                     messageData.items[0].type === 1 ? 'text_event' : 
-                     messageData.items[0].type + '_event'
-    console.log('发送消息2',eventType);
-    emit('editor-event', {
-      event: eventType,
-      data: messageData,
-      callBack: (success) => {
-        if (success) {
-          clearEditor()
+      console.log('发送前',data)
+      emit(
+        'editor-event',
+        emitCall('text_event', data,(ok)=>{
+          console.log('发送后',ok)
+        })
+      )
+      }else if(item.type === 2){
+        //图片消息
+      }else if(item.type === 3){
+        console.log('发送图片消息')
+        const data={
+          height:0,
+          width:0,
+          size:10000,
+          url:item.content,
         }
+        emit(
+        'editor-event',
+        emitCall(
+          'image_event',
+          data,
+          (ok) => {
+             // 成功发送后清空编辑器
+          }
+        )
+      )
+      }else if(item.type === 4){
+        
       }
-    })
-  }
+  })
+
+
 }
 
 // 解析编辑器内容
@@ -505,7 +527,7 @@ const parseEditorContent = () => {
   const result = {
     items: items.length > 0 ? items : [{ type: 1, content: '' }],
     mentionUids,
-    quoteId: quoteData.value?.msg_id || 0
+    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.msg_id ||'' : ''
   }
   
   // 如果有引用信息，添加到结果中
@@ -632,9 +654,19 @@ async function onUploadFile(e) {
       // 上传图片并获取永久URL
       uploadImg(form).then(({ code, data, message }) => {
         if (code == 0) {
-          // 上传成功后，可以将临时URL替换为永久URL
-          // 但这里我们不做替换，因为临时URL在当前会话中已足够使用
+          // 上传成功后，将临时URL替换为永久URL
           console.log('图片上传成功:', data.ori_url);
+          
+          // 查找编辑器中刚插入的图片元素并替换其src为永久URL
+          const editorImages = editorRef.value.querySelectorAll('img.editor-image');
+          // 查找最后插入的图片（通常是最近添加的那个）
+          const lastImage = editorImages[editorImages.length - 1];
+          if (lastImage && lastImage.src === tempUrl) {
+            // 替换为永久URL
+            lastImage.src = data.ori_url;
+            // 触发输入事件更新编辑器内容
+            handleInput({ target: editorRef.value });
+          }
         } else {
           window['$message'].error(message);
         }
diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue
index b80e130..bea5429 100644
--- a/src/views/message/inner/panel/PanelFooter.vue
+++ b/src/views/message/inner/panel/PanelFooter.vue
@@ -10,13 +10,13 @@ import {
 } from '@/store'
 import ws from '@/connect'
 import { ServePublishMessage, ServeSendVote } from '@/api/chat'
-import CustomEditor from '@/components/editor/CustomEditor.vue'
 import { throttle, getVideoImage } from '@/utils/common'
 import { parseTime } from '@/utils/datetime'
 import Editor from '@/components/editor/Editor.vue'
 import MultiSelectFooter from './MultiSelectFooter.vue'
 import HistoryRecord from '@/components/talk/HistoryRecord.vue'
 import {scrollToBottom} from '@/utils/dom.ts'
+import CustomEditor from '@/components/editor/CustomEditor.vue'
 const userStore = useUserStore()
 const talkStore = useTalkStore()
 const editorStore = useEditorStore()
@@ -61,11 +61,11 @@ const onSendMessage = (data = {}, callBack: any) => {
   }
 
   ServePublishMessage(message)
-    .then(({ code, message }) => {
+    .then(({ code, message, msg }) => {
       if (code == 200) {
         callBack(true)
       } else {
-        window['$message'].warning(message)
+        window['$message'].warning(message || msg)
       }
     })
     .catch(() => {
@@ -95,60 +95,8 @@ const onSendTextEvent = throttle((value: any) => {
 }, 1000)
 
 // 发送图片消息
-const onSendImageEvent = ({ data }) => {
-  console.log('onSendImageEvent')
-  
-  // 先创建一个带有上传ID的临时消息对象，用于显示进度
-  const uploadId = `image-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-  
-  // 创建本地预览URL
-  const previewUrl = URL.createObjectURL(data)
-  
-  // 创建临时消息记录
-  const tempMessage = {
-    msg_id: uploadId,
-    sequence: Date.now(),
-    talk_type: props.talk_type,
-    msg_type: 3, // 图片消息类型
-    user_id: props.uid,
-    receiver_id: props.receiver_id,
-    is_revoke: 0,
-    is_mark: 0,
-    is_read: 1,
-    content: '',
-    created_at: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}'),
-    extra: {
-      url: previewUrl, // 使用本地预览URL
-      size: data.size,
-      is_uploading: true,
-      upload_id: uploadId,
-      percentage: 0
-    },
-    isCheck: false,
-    send_status: 1,
-    float: 'right' // 我发送的消息显示在右侧
-  }
-  
-  // 直接添加到对话记录中
-  dialogueStore.addDialogueRecord(tempMessage)  
-  nextTick(()=>{
-        scrollToBottom()
-      })
-  uploadsStore.initUploadFile(
-    data, 
-    props.talk_type, 
-    props.receiver_id, 
-    uploadId, 
-    async (percentage) => {
-      dialogueStore.updateUploadProgress(uploadId, percentage)
-    },
-    async () => {
-      // 清理本地预览URL
-      URL.revokeObjectURL(previewUrl)
-      dialogueStore.batchDelDialogueRecord([uploadId])
- 
-    }
-  )
+const onSendImageEvent = ({ data, callBack }) => {
+  onSendMessage({ type: 'image', ...data }, callBack)
 }
 
 // 发送视频消息
diff --git a/vite.config.ts b/vite.config.ts
index 715bc77..83a792e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      // vueDevTools({
-      //   launchEditor: 'trae',
-      // })
+      vueDevTools({
+        launchEditor: 'trae',
+      })
     ],
     define: {
       __APP_ENV__: env.APP_ENV

From b18a6e5432330bd604812e5c8071a93a39711b97 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 12:00:12 +0800
Subject: [PATCH 4/9] =?UTF-8?q?feat(=E7=BC=96=E8=BE=91=E5=99=A8):=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=B8=85=E9=99=A4=E4=BA=8B=E4=BB=B6=E5=B8=B8?=
 =?UTF-8?q?=E9=87=8F=E5=B9=B6=E4=BC=98=E5=8C=96=E6=8F=90=E5=8F=8A=E5=8A=9F?=
 =?UTF-8?q?=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在事件总线常量中添加 editor:clear 事件类型
优化提及功能，确保编辑器获得焦点后光标位置正确
---
 src/components/editor/CustomEditor.vue | 14 ++++++++++++++
 src/constant/event-bus.ts              |  3 ++-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 73b0ff4..754f90f 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -783,6 +783,20 @@ const onSubscribeMention = (data) => {
   // 确保编辑器获得焦点
   editorRef.value?.focus()
   
+  // 如果编辑器为空或者光标不在编辑器内，将光标移动到编辑器末尾
+  const selection = window.getSelection()
+  if (!selection.rangeCount || !editorRef.value.contains(selection.anchorNode)) {
+    const range = document.createRange()
+    if (editorRef.value.lastChild) {
+      range.setStartAfter(editorRef.value.lastChild)
+    } else {
+      range.setStart(editorRef.value, 0)
+    }
+    range.collapse(true)
+    selection.removeAllRanges()
+    selection.addRange(range)
+  }
+  
   // 插入@提及
   insertMention(data)
 }
diff --git a/src/constant/event-bus.ts b/src/constant/event-bus.ts
index a437264..3abbb99 100644
--- a/src/constant/event-bus.ts
+++ b/src/constant/event-bus.ts
@@ -5,5 +5,6 @@ export const enum ContactConst {
 export const enum EditorConst {
   Mention = 'editor:mention',
   Quote = 'editor:quote',
-  Edit = 'editor:edit'
+  Edit = 'editor:edit',
+  Clear = 'editor:clear'
 }

From 1ff26564c781e8125cdab2cf981bcc60de4dedab Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 13:43:39 +0800
Subject: [PATCH 5/9] =?UTF-8?q?refactor(editor):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E5=BC=95=E7=94=A8=E6=B6=88=E6=81=AF=E7=9A=84=E7=82=B9=E5=87=BB?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6=E5=A4=84=E7=90=86=E9=80=BB=E8=BE=91?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

使用事件委托统一处理引用消息的点击事件，包括关闭按钮点击和光标定位
移除重复的事件监听器，简化代码结构
修复引用消息ID字段从msg_id改为id的匹配问题
---
 src/components/editor/CustomEditor.vue | 62 ++++++++++++++++++++------
 1 file changed, 48 insertions(+), 14 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 754f90f..335f632 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -375,6 +375,7 @@ const sendMessage = () => {
         quoteId:messageData.quoteId,
       }
       console.log('发送前',data)
+      console.log('quoteData',quoteData.value)
       emit(
         'editor-event',
         emitCall('text_event', data,(ok)=>{
@@ -527,7 +528,7 @@ const parseEditorContent = () => {
   const result = {
     items: items.length > 0 ? items : [{ type: 1, content: '' }],
     mentionUids,
-    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.msg_id ||'' : ''
+    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.id ||'' : ''
   }
   
   // 如果有引用信息，添加到结果中
@@ -840,10 +841,15 @@ const onSubscribeQuote = (data) => {
     editor.appendChild(quoteElement)
   }
   
-  // 添加关闭按钮点击事件
-  const closeBtn = quoteElement.querySelector('.quote-close')
-  if (closeBtn) {
-    closeBtn.addEventListener('click', () => {
+  // 使用事件委托处理引用元素的所有点击事件
+  quoteElement.addEventListener('click', (e) => {
+    console.log('执行删除',e)
+    // 检查点击的是否是关闭按钮或其内部元素
+    const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
+    if (closeButton) {
+      // 阻止事件冒泡
+      e.stopPropagation()
+      
       // 移除引用元素
       quoteElement.remove()
       
@@ -859,15 +865,8 @@ const onSubscribeQuote = (data) => {
       setTimeout(() => {
         editor.focus()
       }, 0)
-    })
-  }
-  
-  // 注意：不调用saveDraft()，确保引用内容不会被保存到草稿中
-  
-  // 添加点击整个引用卡片的事件
-  quoteElement.addEventListener('click', (e) => {
-    // 如果不是点击关闭按钮，则设置光标到引用卡片后面
-    if (!e.target.classList.contains('quote-close')) {
+    } else {
+      // 如果不是点击关闭按钮，则设置光标到引用卡片后面
       const selection = window.getSelection()
       const range = document.createRange()
       range.setStartAfter(quoteElement)
@@ -880,6 +879,13 @@ const onSubscribeQuote = (data) => {
     }
   })
   
+  // 注意：不调用saveDraft()，确保引用内容不会被保存到草稿中
+  
+  // 在同一个事件监听器中处理引用卡片的点击
+  // 已经在上面的事件处理中添加了关闭按钮的处理逻辑
+  // 这里只需要处理非关闭按钮的点击
+  // 注意：由于事件委托的方式，不需要额外添加点击事件监听器
+  
   // 监听键盘事件，处理删除操作
   // 监听键盘事件，处理删除操作
   const handleDeleteQuote = function(e) {
@@ -1108,6 +1114,11 @@ onMounted(() => {
   bus.subscribe(EditorConst.Quote, onSubscribeQuote)
   bus.subscribe(EditorConst.Edit, onSubscribeEdit)
   bus.subscribe(EditorConst.Clear, onSubscribeClear)
+
+  // 为编辑器添加点击事件监听器，用于处理引用消息关闭等
+  if (editorRef.value) {
+    editorRef.value.addEventListener('click', handleEditorClick);
+  }
   
   // 点击外部隐藏mention
   document.addEventListener('click', (event) => {
@@ -1133,6 +1144,11 @@ onBeforeUnmount(() => {
   bus.unsubscribe(EditorConst.Quote, onSubscribeQuote)
   bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
   bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
+
+  // 移除编辑器点击事件监听器
+  if (editorRef.value) {
+    editorRef.value.removeEventListener('click', handleEditorClick);
+  }
   
   // 清理DOM事件监听器
   const editor = editorRef.value
@@ -1191,6 +1207,24 @@ const onVoteSubmit = (data) => {
   })
   isShowVote.value = false
 }
+
+// 处理编辑器内部点击事件（用于关闭引用等）
+const handleEditorClick = (event) => {
+  const closeButton = event.target.closest('.quote-close');
+
+  if (closeButton) {
+    const quoteElement = event.target.closest('.editor-quote');
+    if (quoteElement) {
+      quoteElement.remove();
+      quoteData.value = null;
+
+      handleInput({ target: editorRef.value });
+
+      event.preventDefault();
+      event.stopPropagation();
+    }
+  }
+};
 </script>
 
 <template>

From 7067c42b2b5922ce4c1c39547323ec6831c5fc41 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 14:49:38 +0800
Subject: [PATCH 6/9] =?UTF-8?q?feat(editor):=20=E6=B7=BB=E5=8A=A0Ionicons4?=
 =?UTF-8?q?=E5=9B=BE=E6=A0=87=E5=B9=B6=E4=BC=98=E5=8C=96=E7=BC=96=E8=BE=91?=
 =?UTF-8?q?=E5=99=A8=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新增@vicons/ionicons4依赖用于编辑器发送按钮
- 优化提及列表滚动行为，保持选中项可见
- 支持Ctrl+Enter/Shift+Enter换行功能
- 添加发送按钮和编辑器placeholder提示
- 修复引用消息id字段不一致问题
---
 package.json                           |   1 +
 pnpm-lock.yaml                         |   8 ++
 src/components/editor/CustomEditor.vue | 153 +++++++++++++++++++------
 vite.config.ts                         |   6 +-
 4 files changed, 129 insertions(+), 39 deletions(-)

diff --git a/package.json b/package.json
index 8c5366b..0b8bf58 100644
--- a/package.json
+++ b/package.json
@@ -20,6 +20,7 @@
     "@kangc/v-md-editor": "^2.3.18",
     "@onlyoffice/document-editor-vue": "^1.5.0",
     "@vicons/fluent": "^0.13.0",
+    "@vicons/ionicons4": "^0.13.0",
     "@vicons/ionicons5": "^0.13.0",
     "@vueup/vue-quill": "^1.2.0",
     "@vueuse/core": "^10.7.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 168cebb..e186607 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -26,6 +26,9 @@ importers:
       '@vicons/fluent':
         specifier: ^0.13.0
         version: 0.13.0
+      '@vicons/ionicons4':
+        specifier: ^0.13.0
+        version: 0.13.0
       '@vicons/ionicons5':
         specifier: ^0.13.0
         version: 0.13.0
@@ -1002,6 +1005,9 @@ packages:
   '@vicons/fluent@0.13.0':
     resolution: {integrity: sha512-bYGZsOE3qzvm3Cm43e7tybgGlr5ZUpYqtRZq0g0Tfupe8jIzLolpvQLNUt1zS8Mgt6goTbUk5YH7Fkv16jkykg==}
 
+  '@vicons/ionicons4@0.13.0':
+    resolution: {integrity: sha512-5WHIl/4R5a4i9GONa+hIQWxg/WczrbsCdqxawHZvdd3drsEr+Q3yzlfS+NNRO4WS3uDW2uWLCwoW+yp5TgcKeQ==}
+
   '@vicons/ionicons5@0.13.0':
     resolution: {integrity: sha512-zvZKBPjEXKN7AXNo2Na2uy+nvuv6SP4KAMQxpKL2vfHMj0fSvuw7JZcOPCjQC3e7ayssKnaoFVAhbYcW6v41qQ==}
 
@@ -4411,6 +4417,8 @@ snapshots:
 
   '@vicons/fluent@0.13.0': {}
 
+  '@vicons/ionicons4@0.13.0': {}
+
   '@vicons/ionicons5@0.13.0': {}
 
   '@vitejs/plugin-vue-jsx@3.1.0(vite@6.3.5(@types/node@18.19.99)(jiti@1.21.7)(less@4.3.0)(sass@1.88.0)(terser@5.39.2))(vue@3.5.13(typescript@5.2.2))':
diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 335f632..fe75735 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -15,7 +15,7 @@ import { uploadImg } from '@/api/upload'
 import { defAvatar } from '@/constant/default'
 import { getImageInfo } from '@/utils/functions'
 import MeEditorEmoticon from './MeEditorEmoticon.vue'
-
+import {IosSend} from '@vicons/ionicons4'
 const props = defineProps({
   vote: {
     type: Boolean,
@@ -24,6 +24,10 @@ const props = defineProps({
   members: {
     type: Array,
     default: () => []
+  },
+  placeholder: {
+    type: String,
+    default: 'Enter-发送消息  [Ctrl+Enter/Shift+Enter]-换行'
   }
 })
 
@@ -284,10 +288,34 @@ const handleKeydown = (event) => {
       case 'ArrowUp':
         event.preventDefault()
         selectedMentionIndex.value = Math.max(0, selectedMentionIndex.value - 1)
+        // 确保选中项可见 - 向上滚动
+        nextTick(() => {
+          const mentionList = document.querySelector('.mention-list ul')
+          const selectedItem = mentionList?.children[selectedMentionIndex.value]
+          if (mentionList && selectedItem) {
+            // 如果选中项在可视区域上方，滚动到选中项
+            if (selectedItem.offsetTop < mentionList.scrollTop) {
+              mentionList.scrollTop = selectedItem.offsetTop
+            }
+          }
+        })
         break
       case 'ArrowDown':
         event.preventDefault()
         selectedMentionIndex.value = Math.min(mentionList.value.length - 1, selectedMentionIndex.value + 1)
+        // 确保选中项可见 - 向下滚动
+        nextTick(() => {
+          const mentionList = document.querySelector('.mention-list ul')
+          const selectedItem = mentionList?.children[selectedMentionIndex.value]
+          if (mentionList && selectedItem) {
+            // 如果选中项在可视区域下方，滚动到选中项
+            const itemBottom = selectedItem.offsetTop + selectedItem.offsetHeight
+            const listBottom = mentionList.scrollTop + mentionList.clientHeight
+            if (itemBottom > listBottom) {
+              mentionList.scrollTop = itemBottom - mentionList.clientHeight
+            }
+          }
+        })
         break
       case 'Enter':
       case 'Tab':
@@ -302,14 +330,44 @@ const handleKeydown = (event) => {
     }
     return
   }
-  console.log('键盘事件:', event.key, 'Ctrl:', event.ctrlKey, 'Meta:', event.metaKey);
+  console.log('键盘事件:', event.key, 'Ctrl:', event.ctrlKey, 'Meta:', event.metaKey, 'Shift:', event.shiftKey);
   
-  // 处理Enter键发送消息（只有在没有按Ctrl/Cmd时才发送）
-  if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey) {
+  // 处理Ctrl+Enter或Shift+Enter换行
+  if (event.key === 'Enter' && (event.ctrlKey || event.metaKey || event.shiftKey)) {
+    console.log('Ctrl+Enter或Shift+Enter换行');
+    // 不阻止默认行为，允许插入换行符
+    // 手动插入换行符
+    const selection = window.getSelection();
+    if (selection && selection.rangeCount > 0) {
+      const range = selection.getRangeAt(0);
+      const br = document.createElement('br');
+      range.deleteContents();
+      range.insertNode(br);
+      
+      // 在换行符后添加一个空文本节点，并将光标移动到这个节点
+      const textNode = document.createTextNode('');
+      range.setStartAfter(br);
+      range.insertNode(textNode);
+      range.setStartAfter(textNode);
+      range.collapse(true);
+      selection.removeAllRanges();
+      selection.addRange(range);
+      
+      // 触发输入事件更新编辑器内容
+      handleInput({ target: editorRef.value });
+    }
+    
+    // 阻止默认行为，防止触发表单提交
+    event.preventDefault();
+    return;
+  }
+  
+  // 处理Enter键发送消息（只有在没有按Ctrl/Cmd/Shift时才发送）
+  if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
     console.log('Enter发送消息');
-    event.preventDefault()
-    console.log('editorContent.value', editorContent.value)
-    console.log('editorHtml.value', editorHtml.value)
+    event.preventDefault();
+    console.log('editorContent.value', editorContent.value);
+    console.log('editorHtml.value', editorHtml.value);
     // 确保编辑器内容不为空（文本、图片、文件或表情）
     // 由于我们已经在 handleInput 中处理了表情文本，editorContent.value 应该包含表情文本
     //  if (editorContent.value.trim()) {
@@ -356,7 +414,7 @@ const sendMessage = () => {
     mentionUids: messageData.mentionUids,
     quoteId: messageData.quoteId,
     quoteData: quoteData.value ? {
-      msg_id: quoteData.value.msg_id,
+      id: quoteData.value.id,
       title: quoteData.value.title,
       describe: quoteData.value.describe,
       image: quoteData.value.image
@@ -405,6 +463,7 @@ const sendMessage = () => {
       }else if(item.type === 4){
         
       }
+      clearEditor()
   })
 
 
@@ -424,7 +483,7 @@ const parseEditorContent = () => {
   let quoteInfo = null
   if (quoteElements.length > 0 && quoteData.value) {
     quoteInfo = {
-      msg_id: quoteData.value.msg_id,
+      id: quoteData.value.id,
       title: quoteData.value.title,
       describe: quoteData.value.describe,
       image: quoteData.value.image
@@ -1241,7 +1300,7 @@ const handleEditorClick = (event) => {
         包含各种编辑工具按钮
       -->
       <header class="el-header toolbar bdr-t">
-        <div class="tools">
+        <div class="tools pr-30px">
           <!-- 
             表情选择器弹出框
             使用n-popover组件创建悬浮的表情选择面板
@@ -1292,6 +1351,14 @@ const handleEditorClick = (event) => {
             <n-icon size="18" class="icon" :component="nav.icon" />
             <p class="tip-title">{{ nav.title }}</p>
           </div>
+          <n-button class="w-80px h-30px ml-auto" type="primary">
+            <template #icon>
+        <n-icon>
+          <IosSend />
+        </n-icon>
+      </template>
+      发送
+    </n-button>
         </div>
       </header>
 
@@ -1325,37 +1392,25 @@ const handleEditorClick = (event) => {
           通过v-if="showMention"控制显示/隐藏
           使用动态样式定位列表位置
         -->
-       
         <div
           v-if="showMention"
-          class="mention-list   py-5px"
+          class="mention-list py-5px"
           :style="{ top: mentionPosition.top + 'px', left: mentionPosition.left + 'px' }"
         >
-        <n-virtual-list style="max-height: 140px;width: 163px;" :item-size="42" :items="mentionList">
-    <template #default="{ item }">
-      <div :key="item.key" class="cursor-pointer px-14px h-42px hover:bg-#EEE9F9"  @mousedown.prevent="insertMention(item)">
-     <div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 flex items-center h-full ">
-      <img class="w-26px h-26px rounded-50% mr-11px" :src="item.avatar" alt="">
-      <span> {{ item.nickname }}</span>
-     </div>
-      </div>
-    </template>
-  </n-virtual-list>
-          <ul>
-            <!-- 
-              提及列表项
-              循环渲染mentionList数组中的用户
-              通过:class="{ selected: index === selectedMentionIndex }"高亮当前选中项
-              @mousedown.prevent防止失去焦点
-            -->
-            <!-- <li
+          <ul class="max-h-140px w-163px overflow-auto hide-scrollbar">
+            <li
               v-for="(member, index) in mentionList"
-              :key="member.user_id"
-              :class="{ selected: index === selectedMentionIndex }"
+              :key="member.user_id || member.id"
+              class="cursor-pointer px-14px h-42px"
+              :class="{ 'bg-#EEE9F9': index === selectedMentionIndex }"
               @mousedown.prevent="insertMention(member)"
+              @mouseover="selectedMentionIndex = index"
             >
-              {{ member.nickname }}
-            </li> -->
+              <div class="flex items-center border-b-1px border-b-solid border-b-#F8F8F8 h-full">
+                <img class="w-26px h-26px rounded-50% mr-11px" :src="member.avatar" alt="">
+                <span>{{ member.nickname }}</span>
+              </div>
+            </li>
           </ul>
         </div>
       </main>
@@ -1399,10 +1454,11 @@ const handleEditorClick = (event) => {
      * 使用flex布局排列工具按钮
      */
     .tools {
-      height: 100%;
+      height: 40px;
       flex: auto;
       display: flex;
-
+      align-items: center;
+      
       /**
        * 单个工具按钮样式
        * 使用flex布局居中对齐内容
@@ -1615,6 +1671,13 @@ const handleEditorClick = (event) => {
     background: transparent;
     overflow-y: auto;
 
+    /* 添加placeholder样式 */
+    &:empty:before {
+      content: attr(placeholder);
+      color: #999;
+      pointer-events: none;
+    }
+
     /**
      * 自定义滚动条样式 - 轨道
      * 使用::-webkit-scrollbar伪元素自定义滚动条轨道
@@ -1829,4 +1892,22 @@ html[theme-mode='dark'] {
     --tip-bg-color: #48484d;
   }
 }
+
+/**
+ * 隐藏滚动条样式
+ * 保留滚动功能但隐藏滚动条的视觉显示
+ */
+.hide-scrollbar {
+  /* Chrome, Safari, Edge */
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+  
+  /* Firefox */
+  scrollbar-width: none;
+  
+  /* IE */
+  -ms-overflow-style: none;
+}
 </style>
\ No newline at end of file
diff --git a/vite.config.ts b/vite.config.ts
index 83a792e..715bc77 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      vueDevTools({
-        launchEditor: 'trae',
-      })
+      // vueDevTools({
+      //   launchEditor: 'trae',
+      // })
     ],
     define: {
       __APP_ENV__: env.APP_ENV

From 3ec981ea7f46c4ff46e491a70b9f92e02828ce43 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Fri, 6 Jun 2025 16:57:02 +0800
Subject: [PATCH 7/9] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E6=96=87=E4=BB=B6?=
 =?UTF-8?q?=E4=B8=8A=E4=BC=A0=E5=92=8C=E7=BC=96=E8=BE=91=E5=99=A8=E7=9B=B8?=
 =?UTF-8?q?=E5=85=B3=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 启用vueDevTools插件用于开发调试
- 移除调试用的console.error/log语句
- 修复文件扩展名获取可能导致的错误
- 优化文件上传逻辑，添加path字段
- 重构编辑器图片上传处理，支持直接发送
- 调整编辑器样式颜色
---
 src/components/editor/CustomEditor.vue        | 147 +++++++-----------
 src/components/talk/message/FileMessage.vue   |   4 +-
 src/hooks/useTalkRecord.ts                    |   2 -
 .../message/inner/panel/PanelContent.vue      |   1 -
 src/views/message/inner/panel/PanelFooter.vue |   4 +-
 vite.config.ts                                |   6 +-
 6 files changed, 66 insertions(+), 98 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index fe75735..129f8eb 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -252,8 +252,29 @@ const handlePaste = (event) => {
         // 获取粘贴的图片文件
         const file = items[i].getAsFile()
         if (file) {
-          // 使用现有的上传图片功能处理
-          onUploadFile([file])
+          const tempUrl = URL.createObjectURL(file);
+    const image = new Image();
+    image.src = tempUrl;
+    image.onload = () => {
+      const form = new FormData();
+      form.append('file', file);
+      form.append("source", "fonchain-chat");  
+      form.append("urlParam", `width=${image.width}&height=${image.height}`);
+      insertImage(tempUrl, image.width, image.height);
+      uploadImg(form).then(({ code, data, message }) => {
+        if (code == 0) {
+          const editorImages = editorRef.value.querySelectorAll('img.editor-image');
+          const lastImage = editorImages[editorImages.length - 1];
+          if (lastImage && lastImage.src === tempUrl) {
+            lastImage.src = data.ori_url;
+            handleInput({ target: editorRef.value });
+          }
+        } else {
+          window['$message'].error(message);
+        }
+      });
+    };
+    
           return
         }
       }
@@ -665,75 +686,44 @@ const formatFileSize = (size) => {
     return (size / (1024 * 1024 * 1024)).toFixed(2) + ' GB'
   }
 }
+//工具栏中选完图片直接发送
+const onUploadSendImg=async (eventFile)=>{
+  for (const file of eventFile.target.files) {
+    const form = new FormData();
+    form.append('file', file);
+    form.append("source", "fonchain-chat");
 
-
-/**
- * 文件上传处理
- * @param e 上传事件对象或文件数组
- */
-// 文件上传处理
-async function onUploadFile(e) {
-  let files;
-  
-  // 判断参数类型
-  if (Array.isArray(e)) {
-    // 直接传入的文件数组
-    files = e;
-  } else {
-    // 传入的是事件对象
-    files = e.target.files;
-    e.target.value = null;  // 清空input，允许再次选择相同文件
+   const res=await uploadImg(form)
+   if(res.status===0){
+    const data={
+          height:0,
+          width:0,
+          size:10000,
+          url:res.data.ori_url,
+        }
+        emit(
+        'editor-event',
+        emitCall(
+          'image_event',
+          data
+        )
+      )
+   }
   }
-  
-  // 确保有文件
-  if (!files || files.length === 0) return;
-  
-  // 处理第一个文件
-  const file = files[0];
-  
+}
+async function onUploadFile(e) {
+  let file = e.target.files[0]
+
+  e.target.value = null  // 清空input，允许再次选择相同文件
+
   console.log("文件类型"+file.type)
   if (file.type.indexOf('image/') === 0) {
     console.log("进入图片")
-    // 创建临时URL
-    const tempUrl = URL.createObjectURL(file);
-    
-    // 创建图片对象以获取尺寸
-    const image = new Image();
-    image.src = tempUrl;
-    
-    image.onload = () => {
-      // 上传图片到服务器
-      const form = new FormData();
-      form.append('file', file);
-      form.append("source", "fonchain-chat");  // 图片来源标识
-      form.append("urlParam", `width=${image.width}&height=${image.height}`);
-      
-      // 先将临时图片插入编辑器，不直接设置宽高，而是传递原始尺寸信息
-      insertImage(tempUrl, image.width, image.height);
-      
-      // 上传图片并获取永久URL
-      uploadImg(form).then(({ code, data, message }) => {
-        if (code == 0) {
-          // 上传成功后，将临时URL替换为永久URL
-          console.log('图片上传成功:', data.ori_url);
-          
-          // 查找编辑器中刚插入的图片元素并替换其src为永久URL
-          const editorImages = editorRef.value.querySelectorAll('img.editor-image');
-          // 查找最后插入的图片（通常是最近添加的那个）
-          const lastImage = editorImages[editorImages.length - 1];
-          if (lastImage && lastImage.src === tempUrl) {
-            // 替换为永久URL
-            lastImage.src = data.ori_url;
-            // 触发输入事件更新编辑器内容
-            handleInput({ target: editorRef.value });
-          }
-        } else {
-          window['$message'].error(message);
-        }
-      });
-    };
-    
-    return;
+    // 处理图片文件 - 立即显示临时消息，然后上传
+    let fn = emitCall('image_event', file, () => {})
+    emit('editor-event', fn)
+
+    return
   }
 
   if (file.type.indexOf('video/') === 0) {
@@ -1424,7 +1414,7 @@ const handleEditorClick = (event) => {
     通过ref获取DOM引用
   -->
   <form enctype="multipart/form-data" style="display: none">
-    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadFile" />
+    <input type="file" ref="fileImageRef" accept="image/*" @change="onUploadSendImg" />
     <input type="file" ref="uploadFileRef" @change="onUploadFile" />
   </form>
 
@@ -1507,12 +1497,6 @@ const handleEditorClick = (event) => {
       }
     }
   }
-  
-  /**
-   * 文件链接样式
-   * 使用:deep()选择器影响组件内部元素
-   * 显示文件链接的卡片式样式
-   */
   :deep(.editor-file) {
     display: inline-block;
     padding: 5px 10px;
@@ -1520,7 +1504,7 @@ const handleEditorClick = (event) => {
     background-color: #f5f5f5;
     border: 1px solid #e0e0e0;
     border-radius: 4px;
-    color: #2196f3;
+    color: #462AA0;
     text-decoration: none;
     position: relative;
     padding-right: 60px; /* 为文件大小信息留出空间 */
@@ -1542,13 +1526,7 @@ const handleEditorClick = (event) => {
       background-color: #e3f2fd;
     }
   }
-  
-  // 表情符号样式
-  /**
-   * 表情符号样式
-   * 使用:deep()选择器影响组件内部元素
-   * 设置表情符号的大小和对齐方式
-   */
+
   :deep(.editor-emoji) {
     display: inline-block;
     width: 24px;
@@ -1556,13 +1534,6 @@ const handleEditorClick = (event) => {
     vertical-align: middle; /* 垂直居中对齐 */
     margin: 0 2px;
   }
-
-  /**
-   * 引用消息样式
-   * 使用:deep()选择器影响组件内部元素
-   * 创建带有左侧边框的引用卡片
-   * 使用CSS变量适配不同主题
-   */
   :deep(.editor-quote) {
     margin-bottom: 8px;
     padding: 8px 12px;
diff --git a/src/components/talk/message/FileMessage.vue b/src/components/talk/message/FileMessage.vue
index 8129e4e..de5004e 100644
--- a/src/components/talk/message/FileMessage.vue
+++ b/src/components/talk/message/FileMessage.vue
@@ -64,8 +64,8 @@ const fileInfo = computed(() => {
 
 // 获取文件扩展名
 function getFileExtension(filepath) {
-  const parts = filepath.split('.')
-  return parts.length > 1 ? parts.pop().toUpperCase() : ''
+  const parts = filepath?.split('.')
+  return parts?.length > 1 ? parts?.pop()?.toUpperCase() : ''
 }
 
 // 切换播放状态
diff --git a/src/hooks/useTalkRecord.ts b/src/hooks/useTalkRecord.ts
index 4accf93..027c93f 100644
--- a/src/hooks/useTalkRecord.ts
+++ b/src/hooks/useTalkRecord.ts
@@ -190,8 +190,6 @@ export const useTalkRecord = (uid: number) => {
     loadConfig.receiver_id = params.receiver_id
     loadConfig.talk_type = params.talk_type
 
-    console.error('onLoad', params, options)
-
     // 新增：支持指定消息定位模式，参数以传入为准合并
     if (options?.specifiedMsg?.cursor !== undefined) {
       loadConfig.specialParams = { ...options.specifiedMsg } // 记录特殊参数，供分页加载用
diff --git a/src/views/message/inner/panel/PanelContent.vue b/src/views/message/inner/panel/PanelContent.vue
index 5cb1cc9..b4d2df7 100644
--- a/src/views/message/inner/panel/PanelContent.vue
+++ b/src/views/message/inner/panel/PanelContent.vue
@@ -289,7 +289,6 @@ watch(
   async (newProps) => {
     await nextTick()
     let specialParams = undefined
-    console.error(newProps, 'newProps')
     if (newProps.specifiedMsg) {
       try {
         const parsed = JSON.parse(decodeURIComponent(newProps.specifiedMsg))
diff --git a/src/views/message/inner/panel/PanelFooter.vue b/src/views/message/inner/panel/PanelFooter.vue
index bea5429..e1a8abb 100644
--- a/src/views/message/inner/panel/PanelFooter.vue
+++ b/src/views/message/inner/panel/PanelFooter.vue
@@ -101,7 +101,7 @@ const onSendImageEvent = ({ data, callBack }) => {
 
 // 发送视频消息
 const onSendVideoEvent = async ({ data }) => {
-  console.log('onSendVideoEvent')
+
   
   // 获取视频首帧作为封面图
   // let resp = await getVideoImage(data)
@@ -166,7 +166,6 @@ const onSendFileEvent = ({ data }) => {
     return window['$message'].warning('上传文件不能超过100M!')
   }
   const clientUploadId = `file-${Date.now()}-${Math.floor(Math.random() * 1000)}`
-
   const tempMessage = {
     msg_id: clientUploadId,
     sequence: Date.now(),
@@ -182,6 +181,7 @@ const onSendFileEvent = ({ data }) => {
     extra: {
       name: data.name,
       url: '', 
+      path:data.name,
       size: data.size,
       is_uploading: true,
       upload_id: clientUploadId,
diff --git a/vite.config.ts b/vite.config.ts
index 715bc77..83a792e 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -46,9 +46,9 @@ export default defineConfig(({ mode }) => {
       vueJsx({}), 
       compressPlugin(), 
       UnoCSS(),
-      // vueDevTools({
-      //   launchEditor: 'trae',
-      // })
+      vueDevTools({
+        launchEditor: 'trae',
+      })
     ],
     define: {
       __APP_ENV__: env.APP_ENV

From 7fea56f70468b05c214c004ae17cd2a6c8e58a83 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 9 Jun 2025 11:37:39 +0800
Subject: [PATCH 8/9] =?UTF-8?q?refactor(editor):=20=E4=BC=98=E5=8C=96?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=99=A8=E8=BE=93=E5=85=A5=E5=A4=84=E7=90=86?=
 =?UTF-8?q?=E9=80=BB=E8=BE=91=E5=92=8C=E6=80=A7=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 重构输入事件处理函数，减少不必要的DOM操作
- 简化键盘事件处理逻辑，移除冗余日志
- 优化消息发送逻辑，增加内容检查
- 改进引用元素处理，增强交互体验
- 统一表情处理逻辑，使用switch语句替代if-else
- 优化草稿保存和加载机制，使用DocumentFragment提高性能
- 清理冗余代码和注释，保持代码简洁
---
 src/components/editor/CustomEditor.vue | 746 ++++++++++++-------------
 src/utils/auth.js                      |   2 +-
 2 files changed, 362 insertions(+), 386 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 129f8eb..30b43ec 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -94,7 +94,7 @@ const toolbarConfig = computed(() => {
   return config
 })
 
-// 处理输入事件
+// 处理输入事件 - 优化版本，减少DOM操作
 const handleInput = (event) => {
   const target = event.target
   
@@ -108,24 +108,33 @@ const handleInput = (event) => {
   let textContent = editorClone.textContent || ''
   
   // 将表情图片的 alt 属性添加到文本内容中
-  emojiImages.forEach(emoji => {
-    const altText = emoji.getAttribute('alt')
-    if (altText) {
-      textContent += altText
-    }
-  })
+  if (emojiImages.length > 0) {
+    emojiImages.forEach(emoji => {
+      const altText = emoji.getAttribute('alt')
+      if (altText) {
+        textContent += altText
+      }
+    })
+  }
   
-  // 更新编辑器内容（包含表情文本）
+  // 更新逻辑文本内容
   editorContent.value = textContent
+
+  // 检查是否需要清空编辑器以显示placeholder
+  const isEmpty = textContent.trim() === '' && 
+                 !target.querySelector('img, .editor-file, .mention')
+  
+  if (isEmpty && target.innerHTML !== '') {
+    target.innerHTML = ''
+  }
+
+  // 更新HTML内容
   editorHtml.value = target.innerHTML || ''
-  
-  // 检查@mention
+
+  // 后续操作
   checkMention(target)
-  
-  // 保存草稿
   saveDraft()
-  
-  // 发送输入事件
+
   emit('editor-event', {
     event: 'input_event',
     data: editorContent.value
@@ -301,7 +310,7 @@ const handlePaste = (event) => {
   }
 }
 
-// 处理键盘事件
+// 处理键盘事件 - 优化版本，减少不必要的日志和简化逻辑
 const handleKeydown = (event) => {
   // 处理@提及列表的键盘导航
   if (showMention.value) {
@@ -313,11 +322,8 @@ const handleKeydown = (event) => {
         nextTick(() => {
           const mentionList = document.querySelector('.mention-list ul')
           const selectedItem = mentionList?.children[selectedMentionIndex.value]
-          if (mentionList && selectedItem) {
-            // 如果选中项在可视区域上方，滚动到选中项
-            if (selectedItem.offsetTop < mentionList.scrollTop) {
-              mentionList.scrollTop = selectedItem.offsetTop
-            }
+          if (mentionList && selectedItem && selectedItem.offsetTop < mentionList.scrollTop) {
+            mentionList.scrollTop = selectedItem.offsetTop
           }
         })
         break
@@ -329,7 +335,6 @@ const handleKeydown = (event) => {
           const mentionList = document.querySelector('.mention-list ul')
           const selectedItem = mentionList?.children[selectedMentionIndex.value]
           if (mentionList && selectedItem) {
-            // 如果选中项在可视区域下方，滚动到选中项
             const itemBottom = selectedItem.offsetTop + selectedItem.offsetHeight
             const listBottom = mentionList.scrollTop + mentionList.clientHeight
             if (itemBottom > listBottom) {
@@ -341,8 +346,9 @@ const handleKeydown = (event) => {
       case 'Enter':
       case 'Tab':
         event.preventDefault()
-        if (mentionList.value[selectedMentionIndex.value]) {
-          insertMention(mentionList.value[selectedMentionIndex.value])
+        const selectedMember = mentionList.value[selectedMentionIndex.value]
+        if (selectedMember) {
+          insertMention(selectedMember)
         }
         break
       case 'Escape':
@@ -351,146 +357,104 @@ const handleKeydown = (event) => {
     }
     return
   }
-  console.log('键盘事件:', event.key, 'Ctrl:', event.ctrlKey, 'Meta:', event.metaKey, 'Shift:', event.shiftKey);
   
   // 处理Ctrl+Enter或Shift+Enter换行
   if (event.key === 'Enter' && (event.ctrlKey || event.metaKey || event.shiftKey)) {
-    console.log('Ctrl+Enter或Shift+Enter换行');
-    // 不阻止默认行为，允许插入换行符
     // 手动插入换行符
-    const selection = window.getSelection();
+    const selection = window.getSelection()
     if (selection && selection.rangeCount > 0) {
-      const range = selection.getRangeAt(0);
-      const br = document.createElement('br');
-      range.deleteContents();
-      range.insertNode(br);
+      const range = selection.getRangeAt(0)
+      const br = document.createElement('br')
+      range.deleteContents()
+      range.insertNode(br)
       
       // 在换行符后添加一个空文本节点，并将光标移动到这个节点
-      const textNode = document.createTextNode('');
-      range.setStartAfter(br);
-      range.insertNode(textNode);
-      range.setStartAfter(textNode);
-      range.collapse(true);
-      selection.removeAllRanges();
-      selection.addRange(range);
+      const textNode = document.createTextNode('')
+      range.setStartAfter(br)
+      range.insertNode(textNode)
+      range.setStartAfter(textNode)
+      range.collapse(true)
+      selection.removeAllRanges()
+      selection.addRange(range)
       
       // 触发输入事件更新编辑器内容
-      handleInput({ target: editorRef.value });
+      handleInput({ target: editorRef.value })
     }
     
     // 阻止默认行为，防止触发表单提交
-    event.preventDefault();
-    return;
+    event.preventDefault()
+    return
   }
   
   // 处理Enter键发送消息（只有在没有按Ctrl/Cmd/Shift时才发送）
   if (event.key === 'Enter' && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
-    console.log('Enter发送消息');
-    event.preventDefault();
-    console.log('editorContent.value', editorContent.value);
-    console.log('editorHtml.value', editorHtml.value);
-    // 确保编辑器内容不为空（文本、图片、文件或表情）
-    // 由于我们已经在 handleInput 中处理了表情文本，editorContent.value 应该包含表情文本
-    //  if (editorContent.value.trim()) {
-    if (true) {
-      // 检查引用元素是否存在，如果不存在但 quoteData 有值，则清除 quoteData
-      const editor = editorRef.value
-      const quoteElement = editor?.querySelector('.editor-quote')
-      if (!quoteElement && quoteData.value) {
-        console.log('引用元素已被删除，但 quoteData 仍有值，清除 quoteData')
-        quoteData.value = null
-      }
-      
-      // 解析并输出编辑器内容
-      const messageData = parseEditorContent()
-      console.log('编辑器内容解析结果:', JSON.stringify(messageData, null, 2))
-      
-      // 输出详细信息
-      console.log('消息项目数量:', messageData.items.length)
-      console.log('消息项目类型:', messageData.items.map(item => item.type))
-      console.log('提及用户IDs:', messageData.mentionUids)
-      console.log('引用消息ID:', messageData.quoteId)
-      
-      // 继续发送消息
-      sendMessage()
+    event.preventDefault()
+    
+    // 检查引用元素是否存在，如果不存在但 quoteData 有值，则清除 quoteData
+    const editor = editorRef.value
+    const quoteElement = editor?.querySelector('.editor-quote')
+    if (!quoteElement && quoteData.value) {
+      quoteData.value = null
     }
+    
+    // 解析编辑器内容并发送消息
+    sendMessage()
   }
-  
-  // Ctrl+Enter换行由WangEditor的onKeyDown处理，这里不需要额外处理
 }
 
-// 发送消息
+// 发送消息 - 优化版本，移除不必要的日志，简化逻辑
 const sendMessage = () => {
-  console.log('发送消息');
-  // 检查编辑器是否有内容：文本内容（包括表情文本）
-  // if (!editorContent.value.trim()) {
-  //   return
-  // }
-  console.log('发送消息1');
+  // 解析编辑器内容
   const messageData = parseEditorContent()
   
-  // 输出完整的消息数据结构
-  console.log('完整消息数据:', {
-    items: messageData.items,
-    mentionUids: messageData.mentionUids,
-    quoteId: messageData.quoteId,
-    quoteData: quoteData.value ? {
-      id: quoteData.value.id,
-      title: quoteData.value.title,
-      describe: quoteData.value.describe,
-      image: quoteData.value.image
-    } : null
-  })
+  // 检查是否有内容可发送
+  if (messageData.items.length === 0 || 
+     (messageData.items.length === 1 && 
+      messageData.items[0].type === 1 && 
+      !messageData.items[0].content.trim())) {
+    return // 没有内容，不发送
+  }
+  
+  // 处理不同类型的消息
   messageData.items.forEach(item => {
     // 处理文本内容
-    if (item.type === 1) {
-      const data={
-        items:[{
-          content:item.content,
-          type:1
+    if (item.type === 1 && item.content.trim()) {
+      const data = {
+        items: [{
+          content: item.content,
+          type: 1
         }],
-        mentionUids:messageData.mentionUids,
-        mentions:[],
-        quoteId:messageData.quoteId,
+        mentionUids: messageData.mentionUids,
+        mentions: [],
+        quoteId: messageData.quoteId,
       }
-      console.log('发送前',data)
-      console.log('quoteData',quoteData.value)
+      
       emit(
         'editor-event',
-        emitCall('text_event', data,(ok)=>{
-          console.log('发送后',ok)
-        })
+        emitCall('text_event', data)
       )
-      }else if(item.type === 2){
-        //图片消息
-      }else if(item.type === 3){
-        console.log('发送图片消息')
-        const data={
-          height:0,
-          width:0,
-          size:10000,
-          url:item.content,
-        }
-        emit(
-        'editor-event',
-        emitCall(
-          'image_event',
-          data,
-          (ok) => {
-             // 成功发送后清空编辑器
-          }
-        )
-      )
-      }else if(item.type === 4){
-        
+    } else if (item.type === 3) { // 图片消息
+      const data = {
+        height: 0,
+        width: 0,
+        size: 10000,
+        url: item.content,
       }
-      clearEditor()
+      
+      emit(
+        'editor-event',
+        emitCall('image_event', data)
+      )
+    } else if (item.type === 4) { // 文件消息
+      // 文件消息处理逻辑
+    }
   })
-
-
+  
+  // 发送后清空编辑器
+  clearEditor()
 }
 
-// 解析编辑器内容
+// 解析编辑器内容 
 const parseEditorContent = () => {
   const items = []
   const mentionUids = []
@@ -501,102 +465,120 @@ const parseEditorContent = () => {
   
   // 检查是否有引用元素
   const quoteElements = tempDiv.querySelectorAll('.editor-quote')
-  let quoteInfo = null
-  if (quoteElements.length > 0 && quoteData.value) {
-    quoteInfo = {
-      id: quoteData.value.id,
-      title: quoteData.value.title,
-      describe: quoteData.value.describe,
-      image: quoteData.value.image
+  const hasQuote = quoteElements.length > 0 && quoteData.value
+  const quoteId = hasQuote ? quoteData.value.id || '' : ''
+  
+  // 移除引用元素，避免重复处理
+  quoteElements.forEach(quote => quote.remove())
+  
+  let textContent = ''
+  
+  // 处理文本节点和元素节点
+  const processNode = (node) => {
+    if (node.nodeType === Node.TEXT_NODE) {
+      // 文本节点直接添加内容
+      textContent += node.textContent
+      return
+    }
+    
+    if (node.nodeType !== Node.ELEMENT_NODE) return
+    
+    // 处理不同类型的元素
+    if (node.classList.contains('mention')) {
+      // 处理@提及
+      const userId = node.getAttribute('data-user-id')
+      if (userId) {
+        mentionUids.push(parseInt(userId))
+      }
+      textContent += node.textContent
+    } else if (node.tagName === 'IMG') {
+      // 处理图片
+      processImage(node)
+    } else if (node.classList.contains('emoji')) {
+      // 处理emoji元素
+      textContent += node.getAttribute('alt') || node.textContent
+    } else if (node.classList.contains('editor-file')) {
+      // 处理文件
+      processFile(node)
+    } else if (node.childNodes.length) {
+      // 处理有子节点的元素
+      Array.from(node.childNodes).forEach(processNode)
+    } else {
+      // 其他元素，添加文本内容
+      textContent += node.textContent
     }
   }
   
-  let textContent = ''
-  const nodes = Array.from(tempDiv.childNodes)
-  
-  nodes.forEach(node => {
-    if (node.nodeType === Node.TEXT_NODE) {
-      textContent += node.textContent
-    } else if (node.nodeType === Node.ELEMENT_NODE) {
-      // 跳过引用元素的处理，因为我们已经单独处理了
-      if (node.classList.contains('editor-quote')) {
-        return
-      }
-      
-      if (node.classList.contains('mention')) {
-        const userId = node.getAttribute('data-user-id')
-        if (userId) {
-          mentionUids.push(parseInt(userId))
-        }
-        textContent += node.textContent
-      } else if (node.tagName === 'IMG') {
-        // 处理图片
-        const src = node.getAttribute('src')
-        const width = node.getAttribute('data-original-width') || node.getAttribute('width') || ''
-        const height = node.getAttribute('data-original-height') || node.getAttribute('height') || ''
-        const isEmoji = node.classList.contains('editor-emoji')
-        
-        if (textContent.trim()) {
-          items.push({
-            type: 1,
-            content: textContent.trim()
-          })
-          textContent = ''
-        }
-        
-        if (isEmoji) {
-          // 处理表情图片
-          const altText = node.getAttribute('alt') || ''
-          if (altText) {
-            // 如果有alt文本，将表情作为文本处理
-            textContent += altText
-          } else {
-            // 否则作为图片处理
-            items.push({
-              type: 3,
-              content: src + (width && height ? `?width=${width}&height=${height}` : ''),
-              isEmoji: true
-            })
-          }
-        } else {
-          // 处理普通图片
-          items.push({
-            type: 3,
-            content: src + (width && height ? `?width=${width}&height=${height}` : ''),
-            width: width,
-            height: height
-          })
-        }
-      } else if (node.classList.contains('emoji')) {
-        textContent += node.getAttribute('alt') || node.textContent
-      } else if (node.classList.contains('editor-file')) {
-        // 处理文件
-        const fileUrl = node.getAttribute('data-url')
-        const fileName = node.getAttribute('data-name')
-        const fileSize = node.getAttribute('data-size')
-        
-        if (textContent.trim()) {
-          items.push({
-            type: 1,
-            content: textContent.trim()
-          })
-          textContent = ''
-        }
-        
-        if (fileUrl && fileName) {
-          items.push({
-            type: 'file',
-            content: fileUrl,
-            name: fileName,
-            size: node.getAttribute('data-size-raw') || fileSize || 0
-          })
-        }
-      } else {
-        textContent += node.textContent
-      }
+  // 处理图片元素
+  const processImage = (node) => {
+    const src = node.getAttribute('src')
+    const width = node.getAttribute('data-original-width') || node.getAttribute('width') || ''
+    const height = node.getAttribute('data-original-height') || node.getAttribute('height') || ''
+    const isEmoji = node.classList.contains('editor-emoji')
+    
+    // 如果有累积的文本内容，先添加到items
+    if (textContent.trim()) {
+      items.push({
+        type: 1,
+        content: textContent.trim()
+      })
+      textContent = ''
     }
-  })
+    
+    if (isEmoji) {
+      // 处理表情图片
+      const altText = node.getAttribute('alt') || ''
+      if (altText) {
+        // 如果有alt文本，将表情作为文本处理
+        textContent += altText
+      } else {
+        // 否则作为图片处理
+        items.push({
+          type: 3,
+          content: src + (width && height ? `?width=${width}&height=${height}` : ''),
+          isEmoji: true
+        })
+      }
+    } else {
+      // 处理普通图片
+      items.push({
+        type: 3,
+        content: src + (width && height ? `?width=${width}&height=${height}` : ''),
+        width: width,
+        height: height
+      })
+    }
+  }
   
+  // 处理文件元素
+  const processFile = (node) => {
+    const fileUrl = node.getAttribute('data-url')
+    const fileName = node.getAttribute('data-name')
+    const fileSize = node.getAttribute('data-size')
+    
+    // 如果有累积的文本内容，先添加到items
+    if (textContent.trim()) {
+      items.push({
+        type: 1,
+        content: textContent.trim()
+      })
+      textContent = ''
+    }
+    
+    if (fileUrl && fileName) {
+      items.push({
+        type: 4, // 使用数字类型保持一致性
+        content: fileUrl,
+        name: fileName,
+        size: node.getAttribute('data-size-raw') || fileSize || 0
+      })
+    }
+  }
+  
+  // 处理所有顶级节点
+  Array.from(tempDiv.childNodes).forEach(processNode)
+  
+  // 处理剩余的文本内容
   if (textContent.trim()) {
     items.push({
       type: 1,
@@ -605,30 +587,28 @@ const parseEditorContent = () => {
   }
   
   // 构建完整的消息数据结构
-  const result = {
+  return {
     items: items.length > 0 ? items : [{ type: 1, content: '' }],
     mentionUids,
-    quoteId: quoteElements.length > 0 && quoteData.value ? quoteData.value.id ||'' : ''
+    quoteId
   }
-  
-  // 如果有引用信息，添加到结果中
-  if (quoteInfo) {
-    result.quoteInfo = quoteInfo
-  }
-  
-  return result
 }
 
-// 清空编辑器
+// 清空编辑器 
 const clearEditor = () => {
+  // 一次性清空所有编辑器相关状态
   editorContent.value = ''
   editorHtml.value = ''
+  quoteData.value = null
+  
+  // 清空DOM内容
   if (editorRef.value) {
     editorRef.value.innerHTML = ''
+    // 立即设置焦点，提高响应速度
+    nextTick(() => editorRef.value.focus())
   }
   
-  // 清除引用数据
-  quoteData.value = null
+  // 隐藏@提及列表
   hideMentionList()
   
   // 清空草稿
@@ -655,8 +635,8 @@ const insertImage = (src, width, height) => {
   img.src = src
   img.className = 'editor-image'
   img.alt = '图片'
-  img.style.maxHeight = '200px'
-  img.style.maxWidth = '100%'
+  img.style.maxHeight = '150px'
+  img.style.maxWidth = '150px'
   img.style.objectFit = 'contain' // 保持原始比例
   
   // 存储原始尺寸信息，但不直接设置宽高属性
@@ -712,30 +692,25 @@ const onUploadSendImg=async (eventFile)=>{
   }
 }
 async function onUploadFile(e) {
-  let file = e.target.files[0]
-
-  e.target.value = null  // 清空input，允许再次选择相同文件
-
-  console.log("文件类型"+file.type)
+  const file = e.target.files[0]
+  if (!file) return
+  
+  // 清空input，允许再次选择相同文件
+  e.target.value = null
+  
   if (file.type.indexOf('image/') === 0) {
-    console.log("进入图片")
     // 处理图片文件 - 立即显示临时消息，然后上传
-    let fn = emitCall('image_event', file, () => {})
-    emit('editor-event', fn)
+    emit('editor-event', emitCall('image_event', file))
 
     return
   }
 
   if (file.type.indexOf('video/') === 0) {
-    console.log("进入视频")
     // 处理视频文件
-    let fn = emitCall('video_event', file, () => {})
-    emit('editor-event', fn)
+    emit('editor-event', emitCall('video_event', file))
   } else {
-    console.log("进入其他")
     // 处理其他类型文件
-    let fn = emitCall('file_event', file, () => {})
-    emit('editor-event', fn)
+    emit('editor-event', emitCall('file_event', file))
   }
 }
 
@@ -745,29 +720,29 @@ const onEmoticonEvent = (emoji) => {
   emoticonRef.value?.setShow(false)
   
   // 处理不同类型的表情
-  if (emoji.type === 'text') {
-    // 文本表情
-    insertTextEmoji(emoji.value)
-  } else if (emoji.type === 'image') {
-    // 图片表情
-    insertImageEmoji(emoji.img, emoji.value)
-  } else if (emoji.type === 'emoji') {
-    // 系统表情
-    insertTextEmoji(emoji.value)
-  } else if (emoji.type === 1) {
-    // 兼容旧版表情格式
-    if (emoji.img) {
-      insertImageEmoji(emoji.img, emoji.value)
-    } else {
+  switch (emoji.type) {
+    case 'text':
+    case 'emoji':
+      // 文本表情和系统表情都使用相同的处理方式
       insertTextEmoji(emoji.value)
-    }
-  } else {
-    // 发送整个表情包
-    emit('editor-event', {
-      event: 'emoticon_event',
-      data: emoji.value || emoji.id,
-      callBack: () => {}
-    })
+      break
+      
+    case 'image':
+      // 图片表情
+      insertImageEmoji(emoji.img, emoji.value)
+      break
+      
+    case 1: // 兼容旧版表情格式
+      emoji.img ? insertImageEmoji(emoji.img, emoji.value) : insertTextEmoji(emoji.value)
+      break
+      
+    default:
+      // 发送整个表情包
+      emit('editor-event', {
+        event: 'emoticon_event',
+        data: emoji.value || emoji.id
+      })
+      break
   }
 }
 
@@ -892,28 +867,23 @@ const onSubscribeQuote = (data) => {
   
   // 使用事件委托处理引用元素的所有点击事件
   quoteElement.addEventListener('click', (e) => {
-    console.log('执行删除',e)
     // 检查点击的是否是关闭按钮或其内部元素
     const closeButton = e.target.classList?.contains('quote-close') ? e.target : e.target.closest('.quote-close')
+    
+    // 阻止事件冒泡，避免触发编辑器的其他点击事件
+    e.stopPropagation()
+    
     if (closeButton) {
-      // 阻止事件冒泡
-      e.stopPropagation()
-      
-      // 移除引用元素
+      // 移除引用元素并清除引用数据
       quoteElement.remove()
-      
-      // 清除引用数据
       quoteData.value = null
       
-      // 不触发handleInput，避免保存草稿
-      // 只更新编辑器内容变量
+      // 只更新编辑器内容变量，不触发handleInput，避免保存草稿
       editorContent.value = editor.textContent || ''
       editorHtml.value = editor.innerHTML || ''
       
-      // 确保编辑器获得焦点
-      setTimeout(() => {
-        editor.focus()
-      }, 0)
+      // 使用nextTick确保DOM更新后再设置焦点
+      nextTick(() => editor.focus())
     } else {
       // 如果不是点击关闭按钮，则设置光标到引用卡片后面
       const selection = window.getSelection()
@@ -923,7 +893,7 @@ const onSubscribeQuote = (data) => {
       selection.removeAllRanges()
       selection.addRange(range)
       
-      // 确保编辑器获得焦点
+      // 立即设置焦点
       editor.focus()
     }
   })
@@ -935,11 +905,11 @@ const onSubscribeQuote = (data) => {
   // 这里只需要处理非关闭按钮的点击
   // 注意：由于事件委托的方式，不需要额外添加点击事件监听器
   
-  // 监听键盘事件，处理删除操作
-  // 监听键盘事件，处理删除操作
+  // 监听键盘事件，处理引用元素的删除操作
   const handleDeleteQuote = function(e) {
-  // 检查是否是删除键（Backspace 或 Delete）
-  if (e.key === 'Backspace' || e.key === 'Delete') {
+    // 只处理删除键（Backspace 或 Delete）
+    if (e.key !== 'Backspace' && e.key !== 'Delete') return;
+    
     const selection = window.getSelection();
     if (selection.rangeCount === 0) return;
     
@@ -952,25 +922,32 @@ const onSubscribeQuote = (data) => {
       return;
     }
     
+    // 获取引用元素在子节点中的索引
+    const quoteIndex = Array.from(editor.childNodes).indexOf(quoteElement);
+    
     // 检查光标是否在引用卡片前面（Backspace）或后面（Delete）
     const isBeforeQuote = e.key === 'Backspace' && 
                          range.collapsed && 
                          range.startContainer === editor && 
-                         Array.from(editor.childNodes).indexOf(quoteElement) === range.startOffset;
+                         quoteIndex === range.startOffset;
     
     const isAfterQuote = e.key === 'Delete' && 
                         range.collapsed && 
                         range.startContainer === editor && 
-                        Array.from(editor.childNodes).indexOf(quoteElement) === range.startOffset - 1;
+                        quoteIndex === range.startOffset - 1;
     
     if (isBeforeQuote || isAfterQuote) {
+      // 阻止默认删除行为
+      e.preventDefault();
+      
+      // 移除引用元素并清除引用数据
       quoteElement.remove();
       quoteData.value = null;
+      
+      // 更新编辑器内容
       handleInput({ target: editor });
-      e.preventDefault();
     }
-  }
-};
+  };
 
 editor.addEventListener('keydown', handleDeleteQuote);
   
@@ -1062,38 +1039,34 @@ const onSubscribeClear = () => {
 
 // 保存草稿
 const saveDraft = () => {
-  if (!indexName.value) return
+  if (!indexName.value || !editorRef.value) return
   
   // 获取编辑器内容，但排除引用元素
-  let contentToSave = ''
-  let htmlToSave = ''
+  // 使用DocumentFragment进行高效的DOM操作
+  const fragment = document.createDocumentFragment()
+  const tempDiv = document.createElement('div')
+  tempDiv.innerHTML = editorRef.value.innerHTML
+  fragment.appendChild(tempDiv)
   
-  if (editorRef.value) {
-    // 临时保存引用元素
-    const quoteElements = []
-    const editorQuotes = editorRef.value.querySelectorAll('.editor-quote')
-    
-    // 克隆编辑器内容
-    const clonedEditor = editorRef.value.cloneNode(true)
-    
-    // 从克隆的编辑器中移除引用元素
-    const clonedQuotes = clonedEditor.querySelectorAll('.editor-quote')
-    clonedQuotes.forEach(quote => quote.remove())
-    
-    // 获取不包含引用的内容
-    contentToSave = clonedEditor.textContent || ''
-    htmlToSave = clonedEditor.innerHTML || ''
-  }
+  // 从临时DOM中移除引用元素
+  const quoteElements = tempDiv.querySelectorAll('.editor-quote')
+  quoteElements.forEach(quote => quote.remove())
+  
+  // 获取不包含引用的内容
+  const contentToSave = tempDiv.textContent || ''
+  const htmlToSave = tempDiv.innerHTML || ''
   
   // 检查是否有实际内容（不包括引用）
-  const hasContent = contentToSave.trim() || htmlToSave.includes('<img') || htmlToSave.includes('editor-file')
+  const hasContent = contentToSave.trim().length > 0 || 
+                    htmlToSave.includes('<img') || 
+                    htmlToSave.includes('editor-file')
   
+  // 根据内容状态保存或删除草稿
   if (hasContent) {
     // 保存草稿到store，不包括引用数据
     editorDraftStore.items[indexName.value] = JSON.stringify({
       content: contentToSave,
       html: htmlToSave
-      // 不保存quoteData，确保引用不会出现在草稿中
     })
   } else {
     // 编辑器为空时删除对应草稿
@@ -1101,80 +1074,80 @@ const saveDraft = () => {
   }
 }
 
-// 加载草稿
+// 加载草稿 
 const loadDraft = () => {
   if (!indexName.value) return
   
-  // 延迟处理，确保DOM已渲染
-  setTimeout(() => {
+  // 使用nextTick确保DOM已渲染，更可预测且性能更好
+  nextTick(() => {
     // 保存当前引用数据的临时副本
     const currentQuoteData = quoteData.value
     
     // 清除当前引用数据，避免重复添加
     quoteData.value = null
     
+    // 如果编辑器引用不存在，直接返回
+    if (!editorRef.value) return
+    
+    // 先清空编辑器内容
+    editorRef.value.innerHTML = ''
+    editorContent.value = ''
+    editorHtml.value = ''
+    
+    // 获取草稿数据
     const draft = editorDraftStore.items[indexName.value]
+    
+    // 如果有草稿，恢复草稿内容
     if (draft) {
       try {
         const draftData = JSON.parse(draft)
         
-        // 恢复编辑器内容（不包含引用）
-        if (editorRef.value) {
-          // 先清空编辑器内容，包括引用元素
-          editorRef.value.innerHTML = ''
-          
-          // 恢复草稿内容
-          editorRef.value.innerHTML = draftData.html || ''
-          editorContent.value = draftData.content || ''
-          editorHtml.value = draftData.html || ''
-          
-          // 如果有引用数据，重新添加到编辑器
-          if (currentQuoteData) {
-            // 重新调用引用函数添加引用元素
-            onSubscribeQuote(currentQuoteData)
-          }
-        }
+        // 恢复草稿内容
+        editorRef.value.innerHTML = draftData.html || ''
+        editorContent.value = draftData.content || ''
+        editorHtml.value = draftData.html || ''
       } catch (error) {
-        console.error('加载草稿失败:', error)
-      }
-    } else {
-      // 没有草稿则清空编辑器内容，但保留引用
-      if (editorRef.value) {
-        // 清空编辑器
-        editorRef.value.innerHTML = ''
-        editorContent.value = ''
-        editorHtml.value = ''
-        
-        // 如果有引用数据，重新添加到编辑器
-        if (currentQuoteData) {
-          onSubscribeQuote(currentQuoteData)
-        }
+        console.warn('加载草稿失败，使用空内容', error)
       }
     }
-  }, 0)
+    
+    // 如果有引用数据，重新添加到编辑器（无论是否有草稿）
+    if (currentQuoteData) {
+      onSubscribeQuote(currentQuoteData)
+    }
+  })
 }
 
 // 监听会话变化，加载对应草稿
 watch(indexName, loadDraft, { immediate: true })
 
+// 处理点击文档事件，隐藏@提及列表
+const handleDocumentClick = (event) => {
+  if (!editorRef.value?.contains(event.target)) {
+    hideMentionList()
+  }
+}
+
 // 组件挂载
 onMounted(() => {
-  bus.subscribe(EditorConst.Mention, onSubscribeMention)
-  bus.subscribe(EditorConst.Quote, onSubscribeQuote)
-  bus.subscribe(EditorConst.Edit, onSubscribeEdit)
-  bus.subscribe(EditorConst.Clear, onSubscribeClear)
-
-  // 为编辑器添加点击事件监听器，用于处理引用消息关闭等
-  if (editorRef.value) {
-    editorRef.value.addEventListener('click', handleEditorClick);
-  }
+  // 订阅所有编辑器相关事件
+  const subscriptions = [
+    [EditorConst.Mention, onSubscribeMention],
+    [EditorConst.Quote, onSubscribeQuote],
+    [EditorConst.Edit, onSubscribeEdit],
+    [EditorConst.Clear, onSubscribeClear]
+  ]
   
-  // 点击外部隐藏mention
-  document.addEventListener('click', (event) => {
-    if (!editorRef.value?.contains(event.target)) {
-      hideMentionList()
-    }
+  // 批量订阅事件
+  subscriptions.forEach(([event, handler]) => {
+    bus.subscribe(event, handler)
   })
+
+  // 为编辑器添加点击事件监听器
+  editorRef.value?.addEventListener('click', handleEditorClick)
+  
+  // 点击外部隐藏mention - 使用命名函数便于清理
+  document.addEventListener('click', handleDocumentClick)
   
   // 初始加载草稿
   loadDraft()
@@ -1182,24 +1155,27 @@ onMounted(() => {
 
 /**
  * 组件生命周期钩子 - 组件卸载前
- * 
- * onBeforeUnmount是Vue 3的生命周期钩子，在组件卸载前执行
- * 在这里用于清理事件订阅，防止内存泄漏
- * 使用bus.unsubscribe取消订阅之前通过bus.subscribe注册的事件处理函数
+ * 清理所有事件订阅和监听器，防止内存泄漏
  */
 onBeforeUnmount(() => {
-  // 取消订阅所有编辑器相关事件，防止内存泄漏和事件监听器残留
-  bus.unsubscribe(EditorConst.Mention, onSubscribeMention)
-  bus.unsubscribe(EditorConst.Quote, onSubscribeQuote)
-  bus.unsubscribe(EditorConst.Edit, onSubscribeEdit)
-  bus.unsubscribe(EditorConst.Clear, onSubscribeClear)
+  // 取消订阅所有编辑器相关事件
+  const subscriptions = [
+    [EditorConst.Mention, onSubscribeMention],
+    [EditorConst.Quote, onSubscribeQuote],
+    [EditorConst.Edit, onSubscribeEdit],
+    [EditorConst.Clear, onSubscribeClear]
+  ]
+  
+  // 批量取消订阅
+  subscriptions.forEach(([event, handler]) => {
+    bus.unsubscribe(event, handler)
+  })
 
   // 移除编辑器点击事件监听器
-  if (editorRef.value) {
-    editorRef.value.removeEventListener('click', handleEditorClick);
-  }
+  editorRef.value?.removeEventListener('click', handleEditorClick)
   
-  // 清理DOM事件监听器
+  // 移除文档点击事件监听器
+  document.removeEventListener('click', handleDocumentClick)
   const editor = editorRef.value
   if (editor && handleDeleteQuote) {
     editor.removeEventListener('keydown', handleDeleteQuote)
@@ -1729,16 +1705,16 @@ const handleEditorClick = (event) => {
    * 限制编辑器中插入的图片大小
    * 添加圆角和鼠标指针样式
    */
-  .editor-image {
-    max-width: 300px;
-    max-height: 200px;
-    border-radius: 3px;
-    background-color: #48484d;
-    margin: 0px 2px;
-    cursor: pointer;
-    object-fit: contain; /* 保持原始比例 */
-    display: inline-block; /* 确保图片正确显示 */
-  }
+  // .editor-image {
+  //   max-width: 300px;
+  //   max-height: 200px;
+  //   border-radius: 3px;
+  //   background-color: #48484d;
+  //   margin: 0px 2px;
+  //   cursor: pointer;
+  //   object-fit: contain; /* 保持原始比例 */
+  //   display: inline-block; /* 确保图片正确显示 */
+  // }
 
   /**
    * 表情样式
diff --git a/src/utils/auth.js b/src/utils/auth.js
index 0383a0a..2ec121f 100644
--- a/src/utils/auth.js
+++ b/src/utils/auth.js
@@ -18,7 +18,7 @@ export function isLoggedIn() {
  */
 export function getAccessToken() {
   // return storage.get(AccessToken) || ''
-  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22403363066ad3c046839f7b2cf8a6186da017388f197c0c3b219b1c04e7d986e9774b72664a22a6075cee77da3584b7a2131365913796a5fcabc8f4594284e480a592a84a40a9aa7f5f27c951a53a369c'
+  return JSON.parse(localStorage.getItem('token'))||'46d71a72d8d845ad7ed23eba9bdde260e635407190c2ce1bf7fd22088e41682ea07773ec65cae8946d2003f264d55961f96e0fc5da10eb96d3a348c1664e9644ce2108c311309f398ae8ea1b8200bfd490e5cb6e8c52c9e5d493cbabb163368f8351420451a631dbfa749829ee4cda49b77b5ed2d3dced5d0f2b7dd9ee76ba5465c84a17c23af040cd92b6b2a4ea48befbb5c729dcdad0a9c9668befe84074cc24f78899c1d947f8e7f94c7eda5325b8ed698df729e76febb98549ef3482ae942fb4f4a1c92d21836fa784728f0c5483aab2760a991b6b36e6b10c84f840a6433a6ecc31dee36e8f1c6158818bc89d22c9c2f9b60a57573e8b08cdf47105e1ba85550c21fa55526e8a00bf316c623eb67abf749622c48beab908d61d3db7b22ed3eb6aa8a08c77680ad4d8a3458c1e72f97ba2b8480674df77f0501a34e82b58'
 }
 
 /**

From 047cea20b9d3dc2d2166a84e5550f29987c46c33 Mon Sep 17 00:00:00 2001
From: Phoenix <64720302+Concur-max@users.noreply.github.com>
Date: Mon, 9 Jun 2025 11:44:57 +0800
Subject: [PATCH 9/9] =?UTF-8?q?refactor(editor):=20=E5=B0=86=E5=B7=A5?=
 =?UTF-8?q?=E5=85=B7=E6=A0=8F=E9=85=8D=E7=BD=AE=E4=BB=8Ereactive=E6=94=B9?=
 =?UTF-8?q?=E4=B8=BAref=E5=B9=B6=E8=B0=83=E6=95=B4=E8=A1=A8=E6=83=85?=
 =?UTF-8?q?=E7=BB=84=E4=BB=B6=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

将CustomEditor中的navs从reactive改为ref以提高性能
调整MeEditorEmoticon的样式，包括间距改为内边距、添加悬停背景色，并移除表情缩放效果
---
 src/components/editor/CustomEditor.vue     |  2 +-
 src/components/editor/MeEditorEmoticon.vue | 12 ++++++++----
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/src/components/editor/CustomEditor.vue b/src/components/editor/CustomEditor.vue
index 30b43ec..b22e712 100644
--- a/src/components/editor/CustomEditor.vue
+++ b/src/components/editor/CustomEditor.vue
@@ -57,7 +57,7 @@ const editorDraftStore = useEditorDraftStore()
 const indexName = computed(() => dialogueStore.index_name)
 
 // 工具栏配置
-const navs = reactive([
+const navs = ref([
   {
     title: '图片',
     icon: markRaw(Pic),
diff --git a/src/components/editor/MeEditorEmoticon.vue b/src/components/editor/MeEditorEmoticon.vue
index a88e65c..4cd9c3e 100644
--- a/src/components/editor/MeEditorEmoticon.vue
+++ b/src/components/editor/MeEditorEmoticon.vue
@@ -186,16 +186,20 @@ const onSendEmoticon = (type: any, value: any, img = '') => {
       flex-wrap: wrap;
 
       .option{
-        margin: 7px;
+        padding: 7px;
+        border-radius: 4px;
+        &:hover {
+          background-color: #F2F2F2;
+        }
         :deep(.emoji){
           height: 22px;
         width: 22px;
         user-select: none;
         transition: all 0.5s;
 
-        &:hover {
-          transform: scale(1.5);
-        }
+        // &:hover {
+        //   transform: scale(1.5);
+        // }
         }
       }
     }